Tài liệu dành cho khóa học cơ bản về HTML, Javascript, CSS và ASP

7 5 0
Tài liệu dành cho khóa học cơ bản về HTML, Javascript, CSS và ASP

Đang tải... (xem toàn văn)

Thông tin tài liệu

[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

Ngày đăng: 09/03/2021, 06:20

Tài liệu cùng người dùng

  • Đang cập nhật ...

Tài liệu liên quan