Đang tải... (xem toàn văn)
[r]
(1)TÀI LI U Ệ
HTML, DHTML VÀ JAVASCRIPT
(2)TÀI LI U DÀNH CHO KHÓA H CỆ Ọ
C B N V HTML, JAVASCRIPT, CSS VÀ ASPƠ Ả Ề
Tài li u ch a nh ng gì? ệ ứ ữ Tài li u ch a m t s t p kèm gi i thích n iệ ứ ộ ố ậ ả ộ dung ki n th c liên quan đ n k thu t l p trình Web c b n phía Client, bao g m:ế ứ ế ỹ ậ ậ ả Ph n Aầ
Chương 0: T o ph n t HTML.ạ ầ ử
Chương I: Bài t p c b n v JavaScript ậ ơ ả ề
Chương II: S d ng l p (đ i tử ụ ớ ố ượng) x lý Chu i, Ngày tháng, Toán h c.ử ỗ ọ
Chương III: X lý s ki n trang HTML v i JavaScriptử ự ệ ớ
Chương IV: Đ nh d ng ph n t HTML b ng CSSị ạ ầ ử ằ
Chương V: T o x lý t ng (Layer)ạ ử ầ
Chương VI: N i dung đ ng đ nh v đ ngộ ộ ị ị ộ
Ai nên đ c tài li u nàyọ ệ
Là Sinh viên, giáo viên ho c nh ng ngặ ữ ườ ầi c n có ki n th c v l p trình Web.ế ứ ề ậ
C n có nh ng ki n th c trầ ữ ế ứ ước đ c tài li u này?ọ ệ
C n có ki n th c c b n v l p trình nói chung.ầ ế ứ ả ề ậ
Giáo trình lý thuy tế
- HTML, DHTML & JavaScript c a Aptech worldwideủ
Các trang web nên ghé thăm - www.3schools.com
(3)M C L CỤ Ụ Chương 0: Tạo các phần tử HTML cơ bản.
4 Cú pháp chung: T o m t s ph n t c b nạ ộ ố ầ ả Chương I: Bài tập cơ bản về JavaScript
6 Chương II: Sử dụng các lớp xử lý Chuỗi, Ngày tháng, Toán học.
10 Chương III: Xử lý sự kiện trong trang HTML với JavaScript
19 Chương IV: Định dạng các phần tử HTML bằng CSS
28 Chương V: Tạo và xử lý các tầng (Layer)
38 Chương VI: Nội dung động và định vị động
(4)Chương 0: T o ph n t HTML c b n.ạ ầ ử ơ ả
M c tiêu:ụ K t thúc chế ương này, ngườ ọi h c
T o ph n t HTML c b n b ng cách code tr c ti p ầ ả ằ ự ế Dùng Notepad t o m t trang web ch a ph n t HTMLạ ộ ứ ầ N i dungộ
Gi i thi uớ ệ
Trong nhi u ng d ng web không ph i lúc có th s d ng trình so nề ứ ụ ả ể ụ th o tích h p ki u nh Frontpage hay Dreamweaver đ thi t k giao di n, đ c bi t khiả ợ ể ể ế ế ệ ặ ệ giao di n có liên quan đ n y u t l p trình, ngệ ế ế ố ậ ườ ậi l p trình ph i t o ph nả ầ t HTML hoàn tồn th cơng (Code ch khơng dùng kéo th ) Do v y, vi c hi u cú phápử ủ ứ ả ậ ệ ể đ t o ph n t HTML vô quan tr ng.ể ầ ọ
1 Cú pháp chung:
<Tên_Lo i_Ph n_T <Thu c tính 1> ạ ầ ử ộ = “Giá tr ”ị <Thu c Tính> = ộ “Giá tr ”… >ị <Tên_Lo i_Ph n_T Style = ạ ầ ử “Thu c_tính: giá_tr ; thu c_tính : giá tr ;….; ộ ị ộ ị > K t h p c hai cách.ế ợ ả
Trong :
Tên lo i ph n t HTMLạ ầ ử Thu c tínhộ
Button Name
Text VALUE
File MAXLENGTH
Hidden ReadOnly
Select Disable
TextArea Cols, Rows
CheckBox Multiple
TYPE
Ph n “giá tr ” có th đ t c p ngo c kép ho c c p ngo c đ n ho c không c n !!ầ ị ể ặ ặ ặ ặ ặ ặ ơ ặ ầ N u đ t thu c tính theo cách 2, có th tham chi u b ng sau (g i theo cú phápế ặ ộ ể ế ả ọ
CSS)
2 T o m t s ph n t c b nạ ộ ố ầ ử ả
T o nút nh nạ ấ
<Input name="KiemTra" TYPE="button" VALUE="Ki m tra d li u">ể ữ ệ <Input TYPE="Submit" VALUE="Đăng nh p">ậ
T o ô nh pạ ậ
<Input name="HoVaTen" TYPE="text" VALUE="Nguy n Văn A" size="20"ễ MAXLENGTH="30">
<Input name="Khoa" TYPE="text" VALUE="Khoa Công ngh thông tin" size="40"ệ MAXLENGTH="50" readonly="true">
(5) T o vùng nh p (Textarea)ạ ậ
<textarea name="GhiChu" cols="50" rows="5"> N i dung ghi chú: </textarea>ộ
T o ô nh p Passwordạ ậ
<Input name="MatKhau" type="password" value="123456" size="10" maxlength="20"> T o listboxạ
<select name="MonHoc" size="5" > <option>Visual Basic</option> <option>L p trình NET</option>ậ <option>L p trình ASP</option>ậ </select>
T o ComboBox (ch c n b thu c tính size)ạ ỉ ầ ỏ ộ
<select name="Mon" size = onChange="Call DocGiaTriListBox"> <option value = "Visual Basic">Visual Basic</option> <option value = "DOT_NET">L p trình NET</option>ậ <option value = "ASP">L p trình ASP</option>ậ
</select>
T o h p ki mạ ộ ể
<Input name="chkVB" type="checkbox" value="Visual Basic" checked> Visual Basic <Input name="chkASP" type="checkbox" value="ASP "> Active Server Pages
T o nút Radioạ
<Input name="GioiTinh" type="radio" value="Nam" checked> <Input name="GioiTinh" type="radio" value="N " >ữ
<Input name="TinhTrang" type="radio" value="Đã l p gia đình" >ậ <Input name="TinhTrang" type="radio" value="Đ c thân" checked >ộ Tên gi ng nhauố thì s thu c v ẽ ộ ềcùng m t nhómộ (Groups)
Ph n t ch n Fileầ ọ
<Input name="ChonFile" type="file" size="30"> T o textbox n (Hidden).ạ ẩ
<Input name="PhanTuAn" type="hidden" value=""> T o ph n t đ t thu c tính:ạ ầ ặ ộ
+ T o m t textbox đ t thu c tính font:ạ ộ ặ ộ <FONT FACE = “Times New Roman”>
<Input type = text value = “Font ch Unicode !”>ữ </FONT>
+ T o m t textbox đ t thu c tính thông qua phong cách CSS:ạ ộ ặ ộ
(6)<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>
<SCRIPT language="JavaScript">
function HienThi() {
document.all.Tang1.style.pixelLeft = event.clientX; document.all.Tang1.style.pixelTop = event.clientY; document.all.Tang1.style.visibility = 'visible'; }
function AnTang() // n T ng Tang1Ẩ ầ
{
document.all.Tang1.style.visibility = 'hidden'; }
</SCRIPT> <BODY>
<INPUT type="button" value="Sign Up" onMouseMove="HienThi();" onMouseOut="AnTang()">
<DIV id= Tang1 style="position:absolute; visibility: hidden; background-color:yellow">
Đăng ký hòm th m iư ớ </DIV>
</BODY> </html>
K t qu chu t di chuy n vào nútế ả ộ ể Bài s 6ố : Minh ho n i dung Netscapeạ ộ
Yêu c u:ầ T o m t t ng có tên Tang1, m t nút nh n có nhãn "N p trang Web"ạ ộ ầ ộ ấ
và m t h p text có tên DiaChi Khi ngộ ộ ười dùng nh p đ a ch vào h p text vàậ ị ỉ ộ
nh n nút "N p trang web" n i dung c a trang s đấ ộ ủ ẽ ược n p vào t ng ầ Tang1 Hướng d n: ẫ
- Dùng th LAYER đ t o t ng đ t tên cho Tang1ẻ ể ầ ặ
- Vi t s ki n onCLick c a nút "N p trang web" câu l nh n p tài li u vào t ng.ế ự ệ ủ ệ ệ ầ
Cú pháp n p tài li u vào m t t ng Netscape nh sau:ạ ệ ộ ầ
document.<Tên t ng>.src = "Đ a ch trang c n n p"ầ ị ỉ ầ ạ
Trong trường h p s :ợ ẽ
document.Tang1.src = document.form1.DiaChi.value Minh ho :ạ
(7)<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>
<body>
<LAYER name="Tang1">
<h1> T ng dùng đ hi n th trang Web b n gõ h pText !ầ ể ể ị ộ
</LAYER>
<FORM name="Form1">
<INPUT type="text" name="DiaChi">
<INPUT type="button" onClick="document.Tang1.src = document.form1.DiaChi.value"> </FORM>
</body> </html>
C BÀI T P T GI IẬ Ự Ả Bài s 1:ố
T o m t t ng có ch a dịng ch "Hello", kích thạ ộ ầ ứ ữ ước H1 m t nút nh n có nhãn "Thay đ i" Khiộ ấ ổ
người dùng click vào nút yêu c u ngầ ười dùng nh p vào m t xâu, sau thay n i dung trongậ ộ ộ
th H1 b ng xâu nh p vào (Theo cách: thay thu c tính innerText, innerHTML, outerText,ẻ ằ ậ ộ
outerHTML) Bài s 2:ố
T o m t th H1, màu ch xanh dùng đ hi n th th i gian c a h th ng (g m gi :phút:giây) ộ ẻ ữ ể ể ị ủ ệ ố
G i ý:ợ Vi t hàm ế CapNhat đ l y gi :phút:Giây máy tính sau gán cho thu cể ấ ộ
tính innerText c a th H1 S d ng hàm setInterval("CapNhat();", 1000) đ liên t củ ẻ ụ ể ụ
c p nh t th i gian theo t ng giây.ậ ậ
Bài s 3:ố T o t ng IE, m i t ng ch a m t b c nh T ng th nh t ch y tạ ầ ỗ ầ ứ ộ ứ ả ầ ứ ấ
trái sang ph i hình, t ng th hai ch y t xu ng dả ầ ố ưới hình
G i ý: S d ng hàm setInterval đ g i hàm di chuy n t ng.ợ ụ ể ọ ể ầ
Bài s 4: ố T o m t t ng ch a liên k t Chu t click t i v trí t ng s đạ ộ ầ ứ ế ộ ị ầ ẽ ược đ t t i v trí G i ý: Vi t l nh s ki n onClick c a th BODY.ặ ị ợ ế ệ ự ệ ủ ẻ
Bài s 5:ố T o m t form đăng ký E-Mail tạ ộ ương t nh c a Yahoo (B n ch c n t oự ủ ỉ ầ
m t s ph n t , không c n t o h t) M i ngộ ố ầ ầ ế ỗ ười dùng di chuy n chu t đ n m tể ộ ế ộ
ph n t hi n th m t l i thích b ng Ti ng vi t (Xem Bài s 5)ầ ể ị ộ ằ ế ệ ố
Bài s 6:ố T o t ng (Trong Netscape), m i t ng n p m t trang tạ ầ ỗ ầ ộ ương ng nhứ
sau: http://www.vnn.vn, http://www.echip.com.vn http://www.manguon.com
Bài s 7:ố T o m t t ng ch a m t b c nh, m t nút có nhãn "Di chuy n" Khiạ ộ ầ ứ ộ ứ ả ộ ể
người dùng click vào nút b c nh s di chuy n chéo t góc bên ph iứ ả ẽ ể ả
xu ng góc dố ưới bên trái c a hình ủ G i ýợ : Tăng d n pixelTop, gi m pixelLeft.ầ ả
Bài s 8:ố Hãy làm h t t p sách giáo khoa c a cu n giáo trình HTML,ế ậ ủ ố
www.3schools.com http://www.vnn.vn http://www.echip.com.vn