Bai Tap Javascript 034

5/12/2018 Bai Tap Javascript 034 - slidepdf.com

http://slidepdf.com/reader/full/bai-tap-javascript-034 1/49

TÀI LI UỆ

HTML, DHTML VÀ JAVASCRIPT

HA NOI 9/2008



TÀI LI U DÀNH CHO KHÓA H CỆ Ọ

C B N V HTML, JAVASCRIPT, CSS VÀ ASPƠ Ả Ề

Tài li u này ch a nh ng gì?ệ ứ ữ Tài li u này ch a m t s bài 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 các ph n t HTML.ươ ạ ầ ử Ch ng I: Bài t p c b n v JavaScript.ươ ậ ơ ả ềCh ng II: S d ng các 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 trong trang HTML v i JavaScript ươ ử ự ệ ớ Ch ng IV: Đ nh d ng các ph n t HTML b ng CSSươ ị ạ ầ ử ằCh ng V: T o và x lý các t ng (Layer)ươ ạ ử ầCh ng VI: N i dung đ ng và đ 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 gì tr c khi đ 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- Search v i t khóaớ ừ Java Script tutorial; Java script Introduction

2

http://www.3schools.com/

http://www.3schools.com/



M C L CỤ ỤChươ ng 0: Tạo các phần tử HTML cơ bản............................................................... 4

1. Cú pháp chung: ..................................................................................................................42. T o m t s ph n t c b nạ ộ ố ầ ử ơ ả .............................................................................................4

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 .......................................................... 44

3



Ch ng 0: T o các ph n t HTML c b n.ươ ạ ầ ử ơ ảM c tiêu:ụ K t thúc ch ng này, ng i h c có thế ươ ườ ọ ể T o các 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 các ph n t HTMLạ ộ ứ ầ ử

N i dungộ

Gi i thi uớ ệTrong nhi u ng d ng web không ph i lúc nào chúng ta cũng 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 là khiả ợ ể ư ể ế ế ệ ặ ệ giao di n này có liên quan đ n y u t l p trình, khi đó ng i l p trình ph i t o các ph nệ ế ế ố ậ ườ ậ ả ạ ầ t HTML hoàn toà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 các ph n t HTML là vô cùng 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 NameText VALUEFile MAXLENGTHHidden ReadOnlySelect DisableTextArea Cols, Rows

CheckBox MultipleTYPE

Ph n “giá tr ” có th đ t trong 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, thì có th tham chi u b ng sau (g i là 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">

<Input name="Truong" TYPE="text" VALUE="Tr ng Đ i h c s ph m k thu t H ngườ ạ ọ ư ạ ỹ ậ ư Yên" size="40" MAXLENGTH="50" Disabled="true">

4



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 = 1 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 các ph n t và đ t thu c tính:ạ ầ ử ặ ộ

+ T o m t textbox và đ t thu c tính font:ạ ộ ặ ộ<FONT FACE = “Times New Roman”>

<Input type = text value = “Font ch Unicode đây !”>ữ </FONT>

+ T o m t textbox và đ t thu c tính thông qua phong cách CSS:ạ ộ ặ ộ

<Input type = text value = “Font Unicode” Style = “Font-Family:Times newroman”>

5



+ T o m t nhãn có font ch xanh, có hi u ng:ạ ộ ữ ệ ứ <P Style =”Color:Blue; font-size:20; Text-Align:center”>Xin chào </p>

+ T o m t nút nh n có màu n n đ :ạ ộ ấ ề ỏ<Input type = button style=”font-family:arial; background-color:red” value = “Đ ”>ỏ

K t quế ả

Ch ng I: Bài t p c b n v JavaScriptươ ậ ơ ả ềM c tiêu:ụ K t thúc ch ng này ng i h c có th :ế ươ ườ ọ ể Vi t các câu l nh JavaScript và nhúng vào trang webế ệ S d ng đ c các đ i t ng nh p xu t Promt,ử ụ ượ ố ượ ậ ấ document.write. Truy xu t thu c tính c a các ph n t HTML b ng câu l nh JavaScriptấ ộ ủ ầ ử ằ ệ Vi t l nh x lý m t s s ki n đ n gi n.ế ệ ử ộ ố ự ệ ơ ả

N i dung:ộ

6



Ví d 1:ụ Cho ng i dùng nh p vào tên và tu i. Hãy vi t l i tên và tu i c a ng i đó raườ ậ ổ ế ạ ổ ủ ườ màn hình b ng hàmằ document.write, trong đó tên có màu đ m, tu i đ c g ch chân.ậ ổ ượ ạGi i m u:ả ẫ<HTML><HEAD> </HEAD>

<BODY><script language = "JavaScript">var Ten, Tuoi; // Khai báo 2 bi n đ l u tên và tu iế ể ư ổ Ten = prompt("B n hãy nh p vào tên ", "");ạ ậTuoi = prompt("B n hãy nh p vào Tu i : ", 20);ạ ậ ổdocument.write("Chào b n : <B> " + Ten + "</B>");ạdocument.write("<BR>"); // Xu ng dòngố document.write("Tu i c a b n là : <U> " + Tuoi + "</U>");ổ ủ ạ

</script></BODY></HTML>

Ví d 2:ụ T o m t nút nh n (button) có name làạ ộ ấ welcome, value là " Welcome ". M tộ textbox có tên là msg, value = "Welcome to".

H ng d n :ướ ẫ S d ng ph ng th c (hàm) write c a đ i t ng document đ t o.ử ụ ươ ứ ủ ố ượ ể ạGi i m u:ả ẫ<HTML><HEAD> </HEAD><BODY><script language = "JavaScript">

document.write("Tao Button va Text bang Script<BR>");document.write("<BR>");document.write("<input type=button name=welcome value = 'Welcome' ");document.write("onclick = 'alert ('Welcome to JavaScript');' > ");document.write("<input type = text name = msg value = 'Welcome to'>");


Ví d 3:ụ T o m t nút nh trong ví d 2 và thêm ch c năng sau: Khi ng i dùng click vàoạ ộ ư ụ ứ ườ nút welcome thì hi n th thông báo "Welcome to JavaScript !"ể ị

H ng d n:ướ ẫ Dùng th đ t o nút nh n và thêm thu c tính onClick = "<Câu l nhẻ ể ạ ấ ộ ệ

JavaScript>;" (Trong đó <Câu l nh JavaScript> có th là m t l nh JavaScript b t kỳ, ví dệ ể ộ ệ ấ ụ l nhệ document.write, alert, prompt ho c l nh g i hàm v.v...)ặ ệ ọGi i m u:ả ẫ<HTML><HEAD> </HEAD><BODY><input type=button name= welcome value="Welcome" onclick="alert('Welcome to JavaScript');"></BODY></HTML>L u ý quan tr ng:ư ọ Trong JavaScript, m t h ng xâu đ c bao b i c p nháy đ n ho cộ ằ ượ ở ặ ơ ặ nháy kép, ví d các xâu: 'nháy đ n', "nháy kép" là nh ng xâu h p l , tuy nhiên b n vi t :ụ ơ ữ ợ ệ ạ ế

'abc" hay "xyz' là nh ng xâu không h p l . Trong tr ng h p b n mu n in chính b n thânữ ợ ệ ườ ợ ạ ố ả d u nháy đ n ho c nháy kép ra màn hình thì b n đ t tr c nó m t ký t \, ví d b n cóấ ơ ặ ạ ặ ướ ộ ự ụ ạ

7



th in ra màn hình dòng ch : Women's day ra màn hình b ng hai hàm alert và documentể ữ ằ theo các cách sau đây : alert("Women's day"), document.write('Women\'s day');alert("Women\"s day"); alert('Women"s day'); v.v...

Ví d 4:ụ L y (đ c) giá tr c a m t ph n t HTMLấ ọ ị ủ ộ ầ ử T o 2 ph n t nh trong ví d 2 b ng th HTML, khi ng i dùng click chu t vào nútạ ầ ử ư ụ ằ ẻ ườ ộ

Welcome thì hi n th n i dung ch a trong text có tên làể ị ộ ứ msg. H ng d n:ướ ẫ Đ l y giá tr c a m t ph n t HTML, b n vi t <Tên ph n t >.valueể ấ ị ủ ộ ầ ử ạ ế ầ ử Ví d : msg.value cho ta giá tr c a text tên là msg.ụ ị ủGi i m u:ả ẫ<HTML><HEAD> </HEAD><BODY>

<input type = button name = welcome value = "Welcome" onclick = "alert(msg.value)"><input type = text name = msg value = "Welcome to JavaScript" size = 30>

</BODY></HTML>

Ví d 5:ụ Khai báo hàm trong JavaScript và cách liên k t nút nh n v i m t hàmế ấ ớ ộT o 2 ph n t nh ví d 2, khi ng i dùng nh n nút thì g i m t hàm có tên là HienThi,ạ ầ ử ư ụ ườ ấ ọ ộ hàm hi n th có ch c năng hi n th n i dung trong text có tên làể ị ứ ể ị ộ msg trên.ở

H ng d nướ ẫ : Trong th t o button, b n đ t thu c tính onClick = "<Tên hàm>", trongẻ ạ ạ ặ ộ tr ng h p này b n đ t OnClick = "HienThi()". Đi u này có nghĩa là khi ng i s d ngườ ợ ạ ặ ề ườ ử ụ Click chu t (OnClick = Click chu t) thì trình duy t hãy g i hàm HienThi(). Cũng gi ngộ ộ ệ ọ ố nh trong ngôn ng C, M t hàm b t bu c ph i có c p ngo c đ n, cho dù có tham s hayư ữ ộ ắ ộ ả ặ ặ ơ ố không. Ví d khi g i hàm HienThi thì b n ph i vi t là HienThi().ụ ọ ạ ả ếGi i m u:ả ẫ<HTML><HEAD><Script Language = "JavaScript">

function HienThi() // Khai báo m t hàm tên là HienThiộ{

alert(msg.value); // L y n i dung trong text box và hi n thấ ộ ể ịalert("B n hãy nh p vào ô text và th l i !");ạ ậ ử ạ

}</Script>

</HEAD><BODY><input type = button name = welcome value = "Welcome" onclick = "HienThi()"><input type = text name = msg value = "Welcome to JavaScript" size = 30></BODY>

</HTML> L u ý:ư Trong C, đ khai báo m t hàm th ng b n vi t, ví d :ể ộ ườ ạ ế ụ int HienThi() v...v.. Tuynhiên, v i JavaScript có h i khác tí chút, thay vào đó b n vi tớ ơ ạ ế function HienThi()Còn các câu l nh khác b n vi t t ng t nh ngôn ng C đã h c. Các hàm khi khai báoệ ạ ế ươ ự ư ữ ọ

trong JavaScript b t bu c ph i đ t trong th <Script> ..... </Script>.ắ ộ ả ặ ẻ

8



9



Ch ng II: S d ng các l p x lý Chu i, Ngày tháng, Toán h c.ươ ử ụ ớ ử ỗ ọM c tiêu:ụ K t thúc bài h c này, ng i h c có th .ế ọ ườ ọ ể

Mô t đ c công d ng c a các l p x lý Chu i (String), x lý ngày tháng (Date) vàả ượ ụ ủ ớ ử ỗ ử x lý các hàm toàn h c Math.ử ọ

S d ng đ c m t s ph ng th c, thu c tính c b n c a các l p này.ử ụ ượ ộ ố ươ ứ ộ ơ ả ủ ớ V n d ng vi t m t s trang web đ n gi n có s d ng đ n 3 l p trên.ậ ụ ế ộ ố ơ ả ử ụ ế ớ

N i dung:ộ

Bài t p 1:ậ Minh ho cách khai báo và s d ng đ i t ngạ ử ụ ố ượ Date đ ngày gi c a h th ng.ể ờ ủ ệ ố

Yêu c u:ầ Hãy hi n th ngày và gi c a h th ng máy tính khi trang Web đ c n p. Thôngể ị ờ ủ ệ ố ượ ạ tin hi n th ra có d ng nh sau:ể ị ạ ư

H ng d n:ướ ẫ S d ng đ i t ng Date và s d ng các hàm l y th , ngày, tháng, năm đ inử ụ ố ượ ử ụ ấ ứ ể thông tin ra màn hình. Chú ý đ n các hàm tính tháng, ngày trong tu n b h t m t đ n v .ế ầ ị ụ ộ ơ ị

Bài t p 2:ậ Minh ho s khai báo và dùng đ i t ng Date đ l y Gi , phút, giây c a hạ ử ố ượ ể ấ ờ ủ ệ

th ngố

Yêu c u:ầ Hi n th Gi và phút trong thanh tiêu đ c a c a s khi trang Web đ c n p.ể ị ờ ề ủ ử ổ ượ ạ H ng d n:ướ ẫ Giá tr hi n th trong thanh tiêu đ c a trang web đ c l u trong thu c tínhị ể ị ề ủ ượ ư ộ title c a đ i t ng document, do v y đ hi n th thông tin trên thanh tiêu đ , b n c n vi t:ủ ố ượ ậ ể ể ị ề ạ ầ ế document.title = <Giá tr >ị . Ví d , đ hi n th dòng ch "Hello Every body !", b n vi t:ụ ể ể ị ữ ạ ế document.title "Hello Every body !"

Minh ho :ạ

<HTML><BODY><script language="JavaScript">

var D = new Date();

document.title = "Bây gi là: " + D.ờ getHours()+" gi "+ D.ờ getMinutes()+ " phút.";</script></BODY></HTML>

Bài 3: V n d ng bi n đ i t ng Date đ tính tu i c a m t ng i.ậ ụ ế ố ượ ể ổ ủ ộ ườ

Yêu c u :ầ Cho ng i dùng nh p vào năm sinh c a h , sau đó hi n th tu i t ng ng.ườ ậ ủ ọ ể ị ổ ươ ứ

H ng d n:ướ ẫ S d ng đ i t ng Date đ l y năm hi n t i. Tu i s b ng năm hi n t i trử ụ ố ượ ể ấ ệ ạ ổ ẽ ằ ệ ạ ừ đi năm sinh v a nh p vào.ừ ậ

Minh ho m u:ạ ẫ

<HTML><TITLE>Tính tu i</TITLE>ổ

10

Hôm nay là th 2, ngày 13 tháng 9 năm 2004ứ



<BODY><script language="JavaScript">

var D = new Date();var NamSinh, NamHienTai;NamHienTai = D.getYear(); // L u năm hi n t i vào bi nư ệ ạ ế NamSinh = prompt("B n sinh năm bao nhiêu ? : ","");ạalert("Tu i c a b n bây gi là : " + (NamHienTai-NamSinh));ổ ủ ạ ờ


Bài 4: T ng t nh bài 3 nh ng Năm sinh nh p vào không đ c l n h n năm hi n t i.ươ ự ư ư ậ ượ ớ ơ ệ ạ

H ng d n:ướ ẫ S d ng vòng l pử ụ ặ do…while đ yêu c u nh p l i n u năm sinh > năm hi nể ầ ậ ạ ế ệ

t i.ạ

Minh ho m u:ạ ẫ

<HTML><TITLE>Tinh tuoi</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><BODY><script language="JavaScript">

var D = new Date();var NamSinh, NamHienTai;NamHienTai = D.getYear(); //L u năm hi n t i vào bi nư ệ ạ ế do {

NamSinh = prompt("B n sinh năm bao nhiêu : ","");ạ} while (parseInt(NamSinh)>NamHienTai); //Nh p l i n u Năm sinh>năm hi n t iậ ạ ế ệ ạ

alert("Tu i c a b n bây gi là : " + (NamHienTai-NamSinh));ổ ủ ạ ờ</script></BODY>

</HTML>

Bài 5: Minh ho cách đ t các câu l nh JavaScript vào trong các ph n t HTML đạ ặ ệ ầ ử ể th c thi khi ng i dùng click chu t và s d ng hàm open c a đ i t ng window đự ườ ộ ử ụ ủ ố ượ ể m trang web.ở

Yêu c u:ầ Vi t đo n Script cho ng i dùng nh p vào m t s nguyên. N u ng iế ạ ườ ậ ộ ố ế ườ dùng nh p s 1 thì m trang Webậ ố ở http://www.vnn.vn, n u nh p s 2 thì m trangế ậ ố ở http://www.mail.yahoo.com, n u nh p s 3 thì m trangế ậ ố ở http://www.echip.com.vn,còn n u nh p m t s khác v i 1, 2 hay 3 thì m trangế ậ ộ ố ớ ở http://www.google.com.

H ng d n:ướ ẫ Đ m m t trang Web b t kỳ trong c a s hi n hành b n vi t nh sau:ể ở ộ ấ ử ổ ệ ạ ế ư window.open("Đ a ch c a trang c n m ").ị ỉ ủ ầ ở

Ví d :ụ window.open(http://www.vnn.vnn) đ m trang ch c aể ở ủ ủ VNN trong c a s hi nử ổ ệ t i.ạNh v y, đ gi i quy t yêu c u c a bài toán trên , b n c n cho ng i dùng nh pư ậ ể ả ế ầ ủ ạ ầ ườ ậ vào m t s và s d ng c u trúcộ ố ử ụ ấ switch đ ki m tra và m trang web t ng ng.ể ể ở ươ ứ

Minh ho m u:ạ ẫ

<HTML><TITLE>M trang web v i hàm open c a đ i t ng window</TITLE>ở ớ ủ ố ượ<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><BODY><script language="JavaScript">

var LuaChon;

11

http://www.vnn.vnn/

http://www.vnn.vnn/



LuaChon = prompt("B n hãy nh p vào m t s đ m trang web : ", 1);ạ ậ ộ ố ể ởswitch (LuaChon){

case "1" : window.open("http://www.vnn.vn"); break;case "2" : window.open("http://www.mail.yahoo.com"); break;case "3" : window.open("http://www.echip.com.vn"); break;default : window.open("http://www.google.com");

}</script></BODY></HTML>

Bài s 6:ố Minh ho vi c khai báo và s d ng bi n đ i t ng Array đ l u tr danh sáchạ ệ ử ụ ế ố ượ ể ư ữ và cách s d ng các hàm c a đ i t ng Array nh hàmử ụ ủ ố ượ ư sort và vòng l pặ for…in

Yêu c u:ầ Cho ng i dùng nh p vào danh sách tên c a m t l p, sau đó s p x p theo v nườ ậ ủ ộ ớ ắ ế ầ Alphabet r i hi n th danh sách đã s p x p đó ra màn hình, m i ng i trên m t dòng.ồ ể ị ắ ế ỗ ườ ộ

H ng d n:ướ ẫ S d ng vòng l p for đ cho phép nh p danh sách h tên và L u danh sáchử ụ ặ ể ậ ọ ư vào m t m ng, sau đó s d ng ph ng th c sort c a đ i t ng m ng đ s p x p, ti pộ ả ử ụ ươ ứ ủ ố ượ ả ể ắ ế ế

theo dùng vòng l pặ for…in đ in các ph n t trong danh sách.ể ầ ử Minh ho m u:ạ ẫ

<HTML><TITLE>S p x p m ng</TITLE>ắ ế ả<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><BODY><script language="JavaScript">

var SoLuong, x;var DS = new Array(100); // Khai báo m ng DS, có th l u t i đa là 100 ph n t ả ể ư ố ẩ ử SoLuong = prompt("B n c n nh p bao nhiêu ng i : ", 5);ạ ầ ậ ườfor (i=0; i < SoLuong; i++)

{DS[i] = prompt("Nh p vào h tên : ","");ậ ọ

}

// G i hàmọ sort c a đ i t ng m ng DS đ s p x pủ ố ượ ả ể ắ ế DS.sort();

//Hi n th k t qu sau khi s p (sort)ể ị ế ả ắ document.write("<h1>Danh sách đã s p x p là </h1>");ắ ế

for (x in DS) /* Nên s d ng c u trúcử ụ ấ for … in này đ duy t m ng */ ể ệ ả{

document.write( DS[x] );document.write("<BR>"); // Xu ng dòngố

}</script></BODY></HTML>

*** Nh n xét: N u mu n s p theo chi u gi m d n thì sau khi sort b n g i hàm reverse.ậ ế ố ắ ề ả ầ ạ ọ

Bài s 7:ố Minh ho vi c đ a các câu l nh JS vào trong m t th khi ng i dùngạ ệ ư ệ ộ ẻ ườ clickchu t.ộ

Yêu c u:ầ T o m t nút nh n (Button) có name = "DangKy", value = "Đăng ký". Khi ng iạ ộ ấ ườ

dùng Click vào nút này thì thông báo là "Đăng ký d ch v E-Mail".ị ụ

12



H ng d n:ướ ẫ Đ i v i các ph n t HTML, nh textbox, button, checkbox, Select v.v… Cácố ớ ầ ử ư trình duy t đ u cho phép ta th c thi m t ho c nhi u câu l nh JavaScript khi ng i sệ ề ự ộ ặ ề ệ ườ ử d ng click chu t lên các ph n t đó. V n đ ch , vi t các câu l nh đó nh th nào ?ụ ộ ầ ử ấ ề ở ỗ ế ệ ư ếĐ vi t các câu l nh JavaScript khi ng i dùng click chu t lên m t ph n t nào đó, trongể ế ệ ườ ộ ộ ầ ử th c a ph n t này, ta vi t nh sau:ẻ ủ ầ ử ế ư OnClick = "Các câu l nh JavaScript".ệ"Các câu l nh JavaScript" đây là b t kỳ câu l nh JavaScript nào và chúng ph iệ ở ấ ệ ả

đ c cách nhau b i d u ch m ph y. Ngoài ra, các câu l nh ph i đ t trong c p d uượ ở ấ ấ ả ệ ả ặ ặ ấ nháy kép (Ho c nháy đ n).ặ ơ

Ví d m t s cách đ a câu l nh JavaScript c n th c thi khi ng i dùng click chu tụ ộ ố ư ệ ầ ự ườ ộ1. Onclick = "alert('Hello world';"2. OnClick = 'document.write("Welcome to JavaScript");'3. OnClick = "var x,y; x = 10; y = 20; alert('T ng là : ' + (x + y)); "ổ4. OnClick = "var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);"5. OnClick = "KiemTra();"

Theo ví d trên, Khi ng i s d ng Click :ụ ườ ử ụ1 : Th c hi n câu l nhự ệ ệ alert('Hello world')

2 : Th c hi n câu l nhự ệ ệ document.write('Welcome to JavaScript');3 : Th c hi n NHI U câu l nh JavaScriptự ệ Ề ệ4 : Th c hi n nhi u câu l nh JavaScript và có l i g i đ n hàm KiemTra(Tuoi)ự ệ ề ệ ờ ọ ế5 : Th c hi n câu l nh g i hàm KiemTra().ự ệ ệ ọ

Minh ho m u:ạ ẫ

<HTML><HEAD><TITLE>Minh ho đ a câu l nh JavaScript vào các ph n t </TITLE>ạ ư ệ ầ ử <META http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD><BODY>

<INPUT type="button" name="DangKy" value="Đăng ký" onClick="alert('Dang ky E-Mail'); "></BODY></HTML>

Bài s 8:ố Minh ho cách thay đ i thu c tính c a m t đ i t ng thông qua vi c vi t các câu l nh JavaScript.ạ ổ ộ ủ ộ ố ượ ệ ế ệ

T o m t nút có name = ThayMauNen, value = "Thay đ i màu n n". Khi ng i dùng click chu t vào nút này thìạ ộ ổ ề ườ ộ thay đ i màu n n c a trang Web thành màu "xanh".ổ ề ủH ng d n: Đ thay đ i màu n n c a trang Web thành màu, ta c n thay đ i thu c tính document.ướ ẫ ể ổ ề ủ ầ ổ ộ bgColor ="blue". (Màu đ là red, tìm : magenta, đen: black, tr ng: white, vàng: Yellow, tím nh t: lavender). Nh v y, câuỏ ắ ạ ư ậ l nh này s đ c đ t trong ph n onClick nh sau:ệ ẽ ượ ặ ầ ư

<HTML><HEAD><TITLE>Thay mau nen bang click chuot</TITLE><META http-equiv="Content-Type" content="text/html; charset=utf-8">

</HEAD><BODY><h2>Thay đ i màu n n s d ng đ i t ng document</h2>ổ ề ử ụ

ố ượ

13



<INPUT type="button" name="ThayMauNen" value="Thay đ i màu n n"ổ ềonClick="document.bgColor = 'blue' ">

</BODY></HTML>

Bài s 9:ố Minh ho vi c đ c giá tr trong ph n t text và hi n th ra màn hìnhạ ệ ọ ị ầ ử ể ị

Yêu c u:ầ T o m t h p text có tên là HoTen. M t nút có tên là HienThi, value =ạ ộ ộ ộ "Hi n th ". Khi ng i dùng click vào nút HienThi thì hi n th n i dung trong h p textể ị ườ ể ị ộ ộ đó b ng hàm alert.ằ

H ng d n:ướ ẫ Đ l y giá tr c a m t ph n t HTML nào đó, chúng ta vi tể ấ ị ủ ộ ầ ử ế<Tên ph n t >.valueầ ử

Trong đó: <Tên ph n t > chính là giá tr c a thu c tính name khi b n t o th .ầ ử ị ủ ộ ạ ạ ẻVí d :ụ - Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v…

Minh ho :ạ

<HTML><HEAD><TITLE>Đ c giá tr trong h p text</TITLE>ọ ị ộ</HEAD><BODY>

<h2>Hãy gõ văn b n vào trong h p text và click vào nút Hi n th </h2>ả ộ ể ị<INPUT type="text" name="HoTen" ><INPUT type="button" name="HienThi" value="Hi n th "ể ị onClick="alert( HoTen.value); ">

</BODY></HTML>

L u ýư : Khi mu n l y giá tr c a ph n t nào đó b ng JavaScript thì b n ph i đ t cho nóố ấ ị ủ ầ ử ằ ạ ả ặ m t cái tên, nh ví d trên, đ l y giá tr trong h p text ta đã đ t cho h p text này tênộ ư ụ ở ể ấ ị ộ ặ ộ (name) là HoTen.

Bài s 10:ố Minh ho vi c thay đ i giá tr c a h p textboxạ ệ ổ ị ủ ộ

Yêu c u:ầ T o ra ba h p text l n l t tên là SoHang1, SoHang2, KetQua và m t nút có tênạ ộ ầ ượ ộ là TinhTong, đ th c hi n phép tính t ng. Khi ng i dùng nh p hai s h ng vào h pể ự ệ ổ ườ ậ ố ạ ộ SoHang1 và SoHang2, sau đó click vào nút TinhTong thì k t qu t ng s đ c l u vàoế ả ổ ẽ ượ ư trong h p text KetQua.ộ

H ng d n:ướ ẫ Đ thay đ i giá tr m t thu c tính nào đó c a ph n t HTML, b n vi t theoể ổ ị ộ ộ ủ ầ ử ạ ế cách sau:

<Tên c a ph n t >.<Tên thu c tính> = <Giá tr m i>ủ ầ ử ộ ị ớ Trong đó: Tên ph n t chính là giá tr c a thu c tính name khi b n t o th .ầ ử ị ủ ộ ạ ạ ẻVí d :ụ HoTen.value = "Đây là văn b n m i", DangKy.value = "Sign Up now", v.v…ả ớ

<HTML><HEAD><TITLE>Thay đ i giá tr c a thu c tính</TITLE>ổ ị ủ ộ<META http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD><BODY>

<h2>Hãy nh p hai s và click vào nút Tính t ng</h2>ậ ố ổ<INPUT type="text" name="SoHang1" > +<INPUT type="text" name="SoHang2"> =<INPUT type="text" name="KetQua"><INPUT type="button" value="Tính t ng"ổ

onClick="KetQua.value = parseFloat(SoHang1.value) + parseFloat(SoHang2.value)"></BODY>

</HTML>

14



L u ý:ư - Giá tr l u trong h p text luôn là m t xâu, do v y đ th c hi n phép c ng đ cị ư ộ ộ ậ ể ự ệ ộ ượ đúng, b n c n ph i chuy n giá tr sang d ng s b ng hàm parseFloat (Ho c parseInt) nhạ ầ ả ể ị ạ ố ằ ặ ư

trên.ở- Vi c thay đ i này có th áp d ng cho các ph n t khác nh button, checkbox, v.v…ệ ổ ể ụ ầ ử ư

Bài t p 11:ậ Minh ho vi c g i hàm khi ng i dùng click vào m t nútạ ệ ọ ườ ộYêu c u:ầ T o ra 4 text có tên l n l t là : MauNen, MauChu, TieuDe, TrangThai và m tạ ầ ượ ộ nút có tên là ThayDoi, value là "Thay đ i". Khi ng i dùng click vào nút ThayDoi thì màuổ ườ n n, màu ch , tiêu đ c a tài li u và thanh tr ng thái c a c a s trình duy t s đ c thayề ữ ề ủ ệ ạ ủ ử ổ ệ ẽ ượ đ i b ng các giá tr trong text t ng ngổ ằ ị ươ ứ

H ng d n:ướ ẫ B n hoàn toàn có th vi t nhi u câu l nh trong thu c tính OnClick nh các víạ ể ế ề ệ ộ ư d tr c, tuy nhiên n u có nhi u l nh thì ch ng trình trông không đ c sáng s a choụ ướ ế ề ệ ươ ượ ủ l m. Khi đó b n có th nhóm các câu l nh vào trong m t hàm và trong thu c tính OnClickắ ạ ể ệ ộ ộ b n ch vi c g i hàm này ra.ạ ỉ ệ ọ

Minh ho m uạ ẫ<HTML><HEAD> <TITLE>Thay đ i thu c tính c a trang Web</TITLE> </HEAD>ổ ộ ủ<SCRIPT language="JavaScript">

function CapNhat( ){

document.title = TieuDe.value; /* Thay đ i tiêu đ c a trang Web */ ổ ề ủdocument.bgColor = MauNen.value; /* Thay đ i màu n n c a trang */ ổ ề ủdocument.fgColor = MauChu.value; /* Thay đ i màu ch c a trang */ ổ ữ ủwindow.defaultStatus = TrangThai.value; /* Thay đ i dòng tr ng thái c a c a s */ ổ ạ ủ ử ổ

}</SCRIPT><BODY>

<h2>Nh p vào các giá tr và nh n nút Thay đ i</h2>ậ ị ấ ổ<INPUT type="text" name="TieuDe" value="Tiêu đ m i">ề ớ<INPUT type="text" name="MauNen" value="Nh p màu vào đây (ví d blue)"> <BR>ậ ụ<INPUT type="text" name="MauChu" value="Nh p màu ch vào đây (ví d white)">ậ ữ ụ<INPUT type="text" name="TrangThai" value="Nh p dòng tr ng thái vào đây "> <BR>ậ ạ<INPUT type="button" name ="ThayDoi" value="Thay đ i"ổ onClick="Ham( );">

</BODY></HTML>

Nh n xét:ậ ví d trên, khi ng i dùng click chu t lên nútỞ ụ ườ ộ ThayDoi thì hàm CapNhat( ) s đ c g i.ẽ ượ ọ

15



Đ i t ng Stringố ượ B t kỳ m t bi n xâu ho c m t h ng xâu đ u đ c coi là m t đ i t ng xâu.ấ ộ ế ặ ộ ằ ề ượ ộ ố ượVí d ta có: var s = "Hung Yen-Aptech", "JavaScript" hayụvar x = new String("Welcome to Aptech") thì bi n s, x và h ng "H ng Yên - Aptech" đ làế ằ ư ề các đ i t ng xâu và đ u có các ph ng th c và thu c tính d i đây.ố ượ ề ươ ứ ộ ướ

Thu cộtính

Tên thu c tínhộ ý nghĩa Ví dụ

lengthCho bi t đ dài c a m t xâuế ộ ủ ộ x

var x = "abc";alert(x.length); // 3alert("Aptech".length); // 6

Ph ngươth cứ

Tên ph ng th cươ ứ ý nghĩa Ví dụcharAt(n) Cho ta ký t t i v trí: nự ạ ị alert(s.charAt(0)); //H

indexOf(x)Cho ta v trí xu t hi n c aị ấ ệ ủ xâu s trong xâu s. N u khôngế th y thì v trí tr v là -1.ấ ị ả ề

s.indexOf("Aptech") -> 9"Hello".indexOf("e") -> 1"Java".indexOf("C") -> -1

lastIndexOf(x)Cho ta v trí cu i cùng c aị ố ủ xâu x trong xâu s

s.lastIndexOf("n") -> 7"Hello".lastIndexOf("l") -> 3

substring(n1, n2)

L y ra m t xâu con trong xâuấ ộ

s, l y t v trí n1 đ n n2 (sấ ừ ị ế ố ký t l y ra là n2-n1 ký t )ự ấ ự

s.substring(0,3) -> "Hun"

s.substring(2,4) -> "ng""Hello".substring(2,5) ->"llo"

toLowerCase()Chuy n xâu s thành chể ữ th ngườ

s.toLowerCase() -> "hung yen-aptech""Hello".toLowerCase()->"hello"

toUpperCase()Chuy n xâu s thành chể ữ HOA

s.toUpperCase() -> "HUNG YEN-APTECH""Hello".toUpperCase() -> "HELLO"

big() In to xâu sdocument.write(s.big())document.write("abc".big())

bold() In đ m xâu sậ document.write(s.bold())document.write("abc".bold())

fontcolor(m)In xâu s v i màu m. ví dớ ụ màu: "red", "blue"

m"magenta" v.v..

document.write(s.fontcolor("blue"))

document.write("abc".fontcolor("red"))fontsize(n) In xâu s v i kích c font là nớ ỡ document.write(s.fontsize(30))

document.write("Java".fontsize(20))

strike()In xâu s v i đ ng g chớ ườ ạ ngang

document.write(s.strike())

sub() In xâu s d i dòng hi n t iở ướ ệ ạdocument.write(s.sub())document.write("H"+"2".sub()+"O")//H2O

sup() In xâu s trên dòng hi n t iở ệ ạ document.write(s.sub())document.write("x" + "2".sup());// -> x2

anchor(A)T o m t đi m neo, có tên làạ ộ ể A, ph n hi n th là s.ầ ể ị document.write(s.anchor("TOP"))

link(A) T o m t liên k t đ n đi mạ ộ ế ế ể neo A, ph n hi n th là sầ ể ị

document.write(s.link("#TOP"))document.write("V đ uề ầ trang".link("#TOP"))

Thanh tiêu đềc a c a sủ ử ổ

Thanh tr ngạthái c a c aủ ử

16



Đ i t ng Mathố ượ V i đ i t ng Math, Khi khai báo bi n thu c đ i t ng này, b n không đ c vi t d ngớ ố ượ ế ộ ố ượ ạ ượ ế ạ nh : var m = new Math(); Khi mu n s d ng các thu c tính và ph ng th c c a đ iư ố ử ụ ộ ươ ứ ủ ố t ng này b n g i tr c ti p các thu c tính và ph ng th c, ví d : Math.sin(3.14),ượ ạ ọ ự ế ộ ươ ứ ụ Math.PI, Math.abs(x) v.v...

Thu cộtính

Tên thu c tínhộ ý nghĩa Ví dụ

PICho ta h ng s PI (t cằ ố ứ 3.14159)

var BanKinh = 10;alert("Di n tích hình tròn là :" + Math.PI *ệ BanKinh*BanKinh);

E Cho ta h ng s E (= 2.718…)ằ ố alert("H ng s E là: " + Math.E)ằ ố

SQRT2 Cho ta căn b c 2 c a 2 :ậ ủ (=1.4142)

alert("Căn b c 2 c a 2 = " +ậ ủ Math.SQRT2);

SQRT1_2Cho ta (căn b c 2 c a 2) / 2ậ ủ alert("Căn b c 2 c a 2 /2 = " +ậ ủ

Math.SQRT1_2);

Ph ngươth cứ

Tên ph ng th cươ ứ ý nghĩa Ví dụ

abs(x) Cho ta tr tuy t đ i c a xị ệ ố ủ alert(Math.abs(-19)); // -> 19alert(Math.abs(-1.5));// -> 1.5

sin(x), cos(x) Tính sin và cos c a xủ alert("Sin(1.5) = " + Math.sin(1.5));alert("Cos(0) = " + Math.cos(0));

sqrt(x) Tính căn b c hai c a xậ ủ alert("Căn 16 = " + Math.sqrt(16)); //4

pow(x,y) Tính xy alert("6^2="+ Math.pow(6,2)); //->36alert("9^0.5="+ Math.pow(9,0.5));//3

round(x)

Làm tròn s x. N u ph n l sauố ế ầ ẻ ph n th p phân > = 0.5 thì bầ ậ ỏ ph n th p phân và c ng thêmầ ậ ộ 1. Trái l i thì b ph n th pạ ỏ ầ ậ phân nh ng và không c ng gìư ộ

alert(Math.round(3.5));//->4alert(Math.round(3.6));//->4alert(Math.round(3.49));//->3

max(a,b)Cho ta giá tr l n nh t trong haiị ớ ấ s a và bố

var a = 10, b = 100;alert("Max(a,b) = ",Math.max(a,b)); //100alert(Math.max(-1,2));//->2

min(a,b)Cho ta giá tr nh nh t trong haiị ỏ ấ s a và bố

var a = 10, b = 100;alert("Min(a,b)=",Math.min(a,b));//10alert(Math.min(-1,2));//->-1

ceil(x)

Làm tròn s x, N u s x cóố ế ố ph n th p phân thì ph n th pầ ậ ầ ậ phân b c t đi sau đó c ng thêmị ắ ộ 1 vào x

var x = 1.1, y = 2.5, z = 4.8;alert(Math.ceil(x),Math.ceil(y),Math.ceil(z)); // ->235

floor(x)Làm tròn s x, n u x có ph nố ế ầ l th p phân thì b c t đi, chẻ ậ ị ắ ỉ l y ph n nguyên.ấ ầ

var x = 1.1, y = 2.5, z = 4.8;alert(Math.floor(x),Math.floor(y),Math.floor(z)); // ->124

Đ i t ng Dateố ượ Khai báo bi n thu c đ i t ng Date nh sau: var <Tên bi n> = new Date();ế ộ ố ượ ư ế

Ví d ngày, gi hi n t i là th hai 20/12/2004, 6h30' 20'', ta có các k t qu sau:ụ ờ ệ ạ ứ ế ảTên ph ng th cươ ứ ý nghĩa Ví dụ

getDay()L y th hi n t i trong tu n (Ch nh t ngấ ứ ệ ạ ầ ủ ậ ứ v i 0, th hai ng v i 1, ..., th 7 ng v iớ ứ ứ ớ ứ ứ ớ 6)

var D = new Date();alert(D.getDay()); //-> 1

getDate() L y ngày hi n t iấ ệ ạ alert(D.getDate()); //->20

getMonth()L y tháng hi n t i (0->tháng 1, 1-> thángấ ệ ạ 2)

alert(D.getMonth()); //->11

getYear() L y năm hi n t iấ ệ ạ alert(D.getYear());//->2004getHours() L y gi hi n t i (Tính theo 24 h)ấ ờ ệ ạ alert(D.getHours());//->6getMinutes() L y phút hi n t iấ ệ ạ alert(D.getMinutes());//->30

17



getSeconds() L y giây hi n t iấ ệ ạ alert(D.getSeconds());//->20

setDate(n) Đ t ngày là nặ D.setDate(10);alert(“Bây gi : “+D.getDate()); //10ờ

các ph ng th c setYear(n), setHours(n) cũng làm t ng t . Chú ý, s n ph i là s nguyên. và vi c set đó chươ ứ ươ ự ố ả ố ệ ỉ làm thay đ i giá tr ngày, tháng năm, gi , phút, giây ... c a đ i t ng Date ch không làm thay đ i ngày giổ ị ờ ủ ố ượ ứ ổ ờ c a h th ng máy tính.ủ ệ ố

18



Ch ng III: X lý s ki n trong trang HTML v i JavaScriptươ ử ự ệ ớ M c tiêu c a ch ng:ụ ủ ươ

- Giúp h c viên nh n bi t đ c khi nào s ki n x y raọ ậ ế ượ ự ệ ả- Vi t các câu l nh JavaScript đ t vào các s ki n khi nó x y raế ệ ặ ự ệ ả- V n d ng linh ho t vào vi t ch ng trìnhậ ụ ạ ế ươ

N i dung:ộ1. Nh c l i khái ni m s ki n (event)ắ ạ ệ ự ệS ki n là nh ng hành đ ng do ng i dùng ho c h th ng gây ra. Các hành đ ngự ệ ữ ộ ườ ặ ệ ố ộ do ng i dùng gây ra có th là di chuy n chu t, nh n chu t, nh chu t, nh n phím,ườ ể ể ộ ấ ộ ả ộ ấ nh phím, copy, kéo giãn c a s , di chuy n c a s v.v... Các s ki n do h th ngả ử ổ ể ử ổ ự ệ ệ ố gây ra có th là n p tài li u, đóng c a s v.v...ể ạ ệ ử ổ

Khi s ki n x y ra, nó s t đ ng th c thi các câu l nh JavaScript t ng ngự ệ ả ẽ ự ộ ự ệ ươ ứ v i s ki n đóớ ự ệ (n u chúng ta đã đ nh nghĩa ch ng trình x lý s ki n t ng ng).ế ị ươ ử ự ệ ươ ứ

2. B ng li t kê các s ki n và tên t ng ngả ệ ự ệ ươ ứ M i s ki n khi x y ra chúng đ u có m t cái tên và th ng b t đ u b ng tỗ ự ệ ả ề ộ ườ ắ ầ ằ ừ on, ví d nh onClick,ụ ư

onChange.... c th đ c mô ta nh trong b ng d i đây:ụ ể ượ ư ả ướTên S ki nự ệ Ch áp d ng cho ph n t ỉ ụ ầ ử Mô t ả

Onabort Image Đ c kích ho t khi ng i s d ngượ ạ ườ ử ụ hu b vi c t i m t hình nhỷ ỏ ệ ả ộ ả b ng cách kích vào m t k t n iằ ộ ế ố ho c nút Stopặ

Onblur Window, frame, all form element Khi ph n t b m t focusầ ử ị ấ

Onclick Button, radio button, check box, submitbutton, reset button, link

đ c kích ho t khi ng i s d ngượ ạ ườ ử ụ kích trái chu t vào ph n t .ộ ầ ử

Onchange Text field, textarea, select list Nó đ c kích ho t khi ng i sượ ạ ườ ử d ng thay đ i giá tr c a ph n t .ụ ổ ị ủ ầ ử

Onfocus Window, frame, all form element Nó đ c kích ho t khi ng i sượ ạ ườ ử d ng đ t focus vào m t c a s ,ụ ặ ộ ử ổ khung, hay ph n t formầ ử

Onload Document, applet, frameset, img, link,object, script, style, window

Nó đ c kích ho t khi tài li uượ ạ ệ đ c trình duy t n p xong.ượ ệ ạ

Onmousedown Button, document, link Nó đ c kích ho t khi ng i sượ ạ ườ ử d ng n nút con chu tụ ấ ộ

Onmouseout Area, layer, link Nó đ c kích ho t khi ng i sượ ạ ườ ử

d ng di chuy n con tr ra kh iụ ể ỏ ỏ m t ph n t .ộ ầ ử

Onmouseover Area, layer, link Nó đ c kích ho t khi ng i sượ ạ ườ ử d ng di chuy n con tr kh p m tụ ể ỏ ắ ộ ph n t .ầ ử

Onmouseup Button, document, link Nó kích ho t khi ng i s d ngạ ườ ử ụ nh nút con chu t đã đ c n.ả ộ ượ ấ

Onreset Form Khi ng i s d ng click vào nútườ ử ụ reset form

Onresize Window, frame Nó kích ho t khi ng i s d ngạ ườ ử ụ

kéo giãn c a s ho c m t khung.ử ổ ặ ộonsubmit Form Nó đ c kích ho t khi ng i sượ ạ ườ ử

19



d ng click vào nútụ submit c aủ form.

onunload Document, frameset, image, window Nó đ c kích ho t khi ng i sượ ạ ườ ử d ng chuy n sang (m ) m t trangụ ể ở ộ khác.

V y áp d ng tên các s ki n đã li t kê trên nh th nào ?ậ ụ ự ệ ệ ở ư ế

N u b n đã bi t khi nào m t s ki n x y ra thì b n hoàn có th th c thi các câu l nh JavaScriptế ạ ế ộ ự ệ ả ạ ể ự ệ t ng ng v i s ki n đó.ươ ứ ớ ự ệ

Cú pháp khai báo đ trình duy tể ệ th c thi các câu l nh JavaScriptự ệ khi m t s ki n x y ra ộ ự ệ ả như sau:

a/ Cách 1: <Tên thẻ <Tên s ki n> = " <M t Câu l nh JavaScipt>"ự ệ ộ ệ ..... >L u ý:ư M t câu l nh JavaScriptộ ệ có th là b t kỳ câu l nh nào mà b n đã h c. Câu l nh này ph iể ấ ệ ạ ọ ệ ả đ c đ t trong c p nháy kép (ho c c p nháy đ n).ượ ặ ặ ặ ặ ơ

Ví d 1 :ụ

<Input onClick = "alert('B n đã click vào textbox');"ạ >Ví d 2:ụ

<Input type=button value="Th "ử onMouseMove = "alert('B n di chu t');">ạ ộ

Ví d 3:ụ<P onClick = "window.status='Văn b n b click chu t';"> Hello ! </P>ả ị ộ

Ví d 4:ụ<Input type = submit value = "G i"ử onclick = "alert('Đã đ c g i')ượ ử ;">

Ta hãy đi phân tích ví d 1. Trong ví d này ta đã t o ra m t textbox và vi t (khai báo) s ki n clickụ ụ ạ ộ ế ự ệ nh sau :ư onClick = "alert('B n đã click vào textbox');"ạ

đây có 2 ph n:Ở ầ- Ph nầ onClick : là tên c a s ki n click chu t (xin tham kh o b ng trên).ủ ự ệ ộ ả ở ả- Ph n th 2 sau d u =, là m t câu l nh JavaScript t ng ng s đ c th c thi khi s ki nầ ứ ấ ộ ệ ươ ứ ẽ ượ ự ự ệ

click chu t x y ra đ i v i textbox đó. đây là câu l nh alert.ộ ả ố ớ ở ệĐi u này có nghĩa là, b t c khi nào ng i dùng click chu t vào textbox này thì trình duy t s tề ấ ứ ườ ộ ệ ẽ ự đ ng th c thi câu l nhộ ự ệ alert('B n đã click vào textbox');ạ

K t lu n:ế ậ N u chúng ta mu n trình duy t th c thi m t câu l nh nào đó khi m t s ki n x y raế ố ệ ự ộ ệ ộ ự ệ ả thì c n khai báo trong ph n đ nh nghĩa th nh sau:ầ ầ ị ẻ ư <Tên s ki n> = "<Câu l nh JavaScript c n th c thi>"ự ệ ệ ầ ự

• T ng t trong ví d 2: B t c khi nào ng i dùng di chuy n chu t trong textbox (tên s ki n làươ ự ụ ấ ứ ườ ể ộ ự ệ onMouseMove) thì l nh "alert('B n di chu t');" s đ c th c thi.ệ ạ ộ ẽ ượ ự

• Trong ví d 3: B t c khi nào b n click chu t vào dòng ch "Hello !" thì thanh tr ng thái c a c aụ ấ ứ ạ ộ ữ ạ ủ ử

s s có dòng ch : "Văn b n b click chu t"ổ ẽ ữ ả ị ộ• Trong ví d 4: Theo b n, thông báo "ụ ạ Đã đ c g iượ ử " khi nào thì xu t hi n !?ấ ệ

b/ Cách 2: B n có th không ch vi t m t câu l nh khi m t s ki n x y ra đ i v i m t ph n t nàoạ ể ỉ ế ộ ệ ộ ự ệ ả ố ớ ộ ầ ử đó mà JavaScript còn cho phép b n th c thi nhi u câu l nh đ ng th i, v i đi u ki n các câu l nhạ ự ề ệ ồ ờ ớ ề ệ ệ này ph i đ c phân cách nhau b i d u ch m ph y "ả ượ ở ấ ấ ả ;".Cú pháp vi t nh sau:ế ư <Tên th <Tên s ki n>=" <Câu l nh 1>; <Câu l nh 2>; ...; <Câu l nh n>" .... >ẻ ự ệ ệ ệ ệVí d 1:ụ

<input onclick="window.status='Click chu t'ộ ; alert('B n đã click chu t')">ạ ộ

Trong ví d này, ta đã t o m t textbox và khi ng i dùng click chu t vào textbox này thì trình duy tụ ạ ộ ườ ộ ệ s th c thi 2 câu l nh t ng ng nh ta đã ch ra trong th :ẽ ự ệ ươ ứ ư ỉ ẻ window.status='Click chu t'ộ và alert('B n đã click chu t').ạ ộ 2 l nh này đ c phân cách nhau b iệ ượ ở d u ch m ph y.ấ ấ ả

20



Ví d 2:ụ<input name=Hoten onFocus="Hoten.value=' ' ; window.status='H tên đã nh n focus'ọ ậ ; window.document.title = 'N i dung trong textbox đã b xoá' ">ộ ị

Trong ví d này ta cũng t o ra m t textbox và khi textbox này nh n đ c focus (click chu t) thì trìnhụ ạ ộ ậ ượ ộ duy t s t đ ng th c thi 3 câu l nh :ệ ẽ ự ộ ự ệ

• Hoten.value=' '

• window.status='H tên đã nh n focus'ọ ậ• window.document.title = 'N i dung trong textbox đã b xoá'ộ ị

Nh n xét:ậ N u s câu l nh c n th c thi khi m t s ki n x y ra là ít (M t ho c hai câu l nh) thì ta cóế ố ệ ầ ự ộ ự ệ ả ộ ặ ệ th khai báo đo n ch ng trình x lý s ki n s d ng theo cách 1 ho c cách 2. Còn trong tr ngể ạ ươ ử ự ệ ử ụ ặ ườ h p s câu l nh c n x lý là l n, thì cách nên s d ng cách khác mà ta s đ c p d i đây.ợ ố ệ ầ ử ớ ử ụ ẽ ề ậ ướ

C/ Cách 3: G i m t hàm khi m t s ki n x y ra.ọ ộ ộ ự ệ ảV b n ch t cách này chính làề ả ấ cách m tộ , có đi u câu l nh là m t l i g i hàm.ề ệ ộ ờ ọCách này th ng đ c s d ng khi :ườ ượ ử ụ

• S l nh c n th c thi khi m t s ki n x y ra là l nố ệ ầ ự ộ ự ệ ả ớ• Đ m b o cho ch ng trình sáng s a và d đ c, d qu n lý và b o trìả ả ươ ủ ễ ọ ễ ả ả

Cú pháp khai báo hàm trong đ nh nghĩa s ki n nh sau:ị ự ệ ư <Tên th <tên s ki n> = "Tên hàm c n g i([Tham s n u có] )" .... >ẻ ự ệ ầ ọ ố ếVí d :ụ1/ <input onclick ="Ham1()" >2/ <input type = button value = Gui onclick = "GuiThongTin()">3/ <input type = radio name = GT onclick = "KiemTra()">

Trong đó, Ham1(), GuiThongTin() và KiemTra() là các hàm.

Tóm l i: Tuỳ vào tr ng h p c th mà khi m t s ki n x y ra, b n có th vi t m t l nh, nhi u l nhạ ườ ợ ụ ể ộ ự ệ ả ạ ể ế ộ ệ ề ệ ho c m t hàm t ng ng s đ c th c thi trong đ nh nghĩa th . Tuy nhiên, m t qui t c chung là:ặ ộ ươ ứ ẽ ượ ự ị ẻ ộ ắ N u đo n ch ng trình x lý s ki n ch có m t l nh thì nên vi t theo cách a, còn trái l i thì nên vi tế ạ ươ ử ự ệ ỉ ộ ệ ế ạ ế các l nh trong m t hàm (t c theo cách vi t b).ệ ộ ứ ế

3. M t s bài t p minh hoộ ố ậ ạVí d 1:ụ Hãy t o m t nút nh n (button) có value = "Th ". Khi ng i dùng click vào nút này thì tiêu đạ ộ ấ ử ườ ề c a c a s s là "B n đã click chu t"ủ ử ổ ẽ ạ ộH ng d n:ướ ẫ Tr c h t ta c n xác đ nh xem các l nh nào cho phép ta thay đ i tiêu đ c a c a sướ ế ầ ị ệ ổ ề ủ ử ổ thành "B n đã click chu t", ti p theo là đ t các l nh đó vào đâu đ khi ng i dùng click chu t thì nóạ ộ ế ặ ệ ể ườ ộ đ c th c thi theo nh yêu c u bài toánượ ự ư ầ

• L nh đ thay đ i tiêu đ nh sau:ệ ể ổ ề ư document.title = "B n đã click chu t"ạ ộ• Nh ta đã bi t khi ng i dùng click thì s ki nư ế ườ ự ệ onClick xu t hi n, do v y câu l nh trên sấ ệ ậ ệ ẽ

đ c đ t t ng ng vào s ki n onClick, nh sau:ượ ặ ươ ứ ự ệ ư <HTML><HEAD>

<TITLE>Hay click vao nut o duoi va quan sat tieu de</TITLE></HEAD><BODY>

<input type=button value="Thu" onClick="document.title='Ban da click chuot' ">

</BODY></HTML>

Ví d 2:ụ T o m t trang Web, có 2 ph n t : Ph n t button có value = "G i", và m t ph n tạ ộ ầ ử ầ ử ử ộ ầ ử textbox.Yêu c u: khi ng i dùng click vào nút G i thì thông báo trên màn hình là : "B n đã click vàoầ ườ ử ạ nút g i" còn khi ng i dùng click vào textbox thì thông báo là "B n đã click vào textbox".ử ườ ạH ng d n:ướ ẫ Theo yêu c u c a bài thì dòng thông báo "B n đã click chu t vào nút g i" xu t hi n chầ ủ ạ ộ ử ấ ệ ỉ khi ng i dùng click chu t vào nút g i, do v y các l nh th c hi n hi n th thông báo s đ cườ ộ ử ậ ệ ự ệ ể ị ẽ ượ đ tặ trong s ki n onclick c a nút nh n.ự ệ ủ ấ Còn dòng thông báo "B n đã click chu t vào text box" khiạ ộ

21



ng i dùng click chu t vào textbox, do v y các l nh th c hi n hi n th dòng thông báo s đ cườ ộ ậ ệ ự ệ ể ị ẽ ượ đ tặ trong s ki n onclick c a textboxự ệ ủ :Minh ho :ạ<HTML><HEAD><TITLE>Hay click vao nut va textbox o duoi va quan sat tieu de</TITLE></HEAD><BODY>

<input type=button value="Gui" onClick="alert( 'Ban da click chuot vao nut') "><input type=text onclick = "alert('Ban da click chuot vao textbox') ">

</BODY></HTML>

Ví d 3:ụ T o 2 nút, nút th nh t có value = "Xanh", nút th hai có value = "Đ ".ạ ứ ấ ứ ỏ Yêu c u:ầ Khi ng iườ dùng click vào nút xanh thì màu n n c a tài li u là xanh (blue), còn khi ng i dùng click vào nút đề ủ ệ ườ ỏ thì màu n n c a tài li u là: Đ (red).ề ủ ệ ỏH ng d n:ướ ẫ Thu c tính màu n n c a tài li u đ c l u trong thu c tính bgColor c a đ i t ngộ ề ủ ệ ượ ư ộ ủ ố ượ document. Thu c tính này có th thay đ i đ c.ộ ể ổ ượ

Minh ho :ạ<HTML><HEAD></HEAD><BODY>

<input type=button value=Xanh onclick="window.document.bgColor = 'blue'; "><input type = button value =Do onclick="window.document.bgColor = 'red'; ">

</BODY></HTML>

Ví d 4:ụT o m t danh sách l a ch n g m có 4 màu: red, blue, brown và lavender. Khi ng i dùng ch n m tạ ộ ự ọ ồ ườ ọ ộ màu thì màu n n c a tài li u s thay đ i t ng ng.ề ủ ệ ẽ ổ ươ ứ H ng d n:ướ ẫ Đ thay đ i màu n n c a tài li u ta làm t ng t nh ví d 3ể ổ ề ủ ệ ươ ự ư ụMinh ho :ạ<HTML><HEAD></HEAD><BODY><script language = JavaScript>

function DoiMau(){

document.bgColor = Mau.value; // Ho c vi t: window.document.bgColor = Mau.value;ặ ế

}</script>B n hãy ch n màu n n:ạ ọ ề<Select name = Mau onchange = "DoiMau();" >

<option value = red> Màu đ </option>ỏ<option value = blue> Màu xanh </option><option value = brown> Màu nâu </option><option value = lavender> Màu xanh nh t</option>ạ

</select>

</BODY></HTML>

Ví d 5 :ụ T o m t textarea có tên là NoiDung, m t Textbox có tên là : SoKyTu. V i yêu c u nh sau:ạ ộ ộ ớ ầ ư Khi ng i s d ng gõ các phím vào trong textarea thì s l ng ký t (Đ dài xâu) ch a trongườ ử ụ ố ượ ự ộ ứ

22



textarea đó s đ c hi n th trong textbox. N u s l ng ký t trong textarea gõ vào v t quá 200ẽ ượ ể ị ế ố ượ ự ượ ký t thì thông báo : "B n đã gõ quá s ký t cho phép !".ự ạ ố ự <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><script language="JavaScript">

function KiemTra (){ if (NoiDung.value.length > 200) alert("B n đã gõ qúa s ký t cho phép !");ạ ố ự SoKyTu.value = NoiDung.value.length; // Hi n th s ký t trong textbox SoKyTuể ị ố ự }

</script><body style="font-family:arial">

S ký t đã gõ : <input type="text" name="SoKyTu"> <BR>ố ự

<textarea name="NoiDung" cols=50 rows="10" onKeyUp="KiemTra ();"> </textarea></body></html>

ví d trên:Ở ụ Hàm ki m tra s đ c g i m i khi s ki n nh n phím (onKeyUp) xu t hi n hay nóiể ẽ ượ ọ ỗ ự ệ ấ ấ ệ cách khác là khi ng i dùng gõ thêm m t ký t vào trong textarea. đây ta không đ t hàm ki m traườ ộ ự Ở ặ ể vào trong s ki nự ệ onClick; Màn hình cho ví d này có d ng nh sau:ụ ạ ư

<Xem k t qu >ế ả

Ví d 6:ụ T o m t nút có value = "G i", textbox có name = "HoTen", 2 nút radio có tên là GioiTinh vàạ ộ ử nhãn t ng ng là Nam, n .ươ ứ ữ Yêu c uầ : Khi ng i dùng di chuy n chu t vào ph n t nào thì hi n th thông báo t ng ng d iườ ể ộ ầ ử ể ị ươ ứ ướ thanh tr ng thái. Ví d n u ng i s d ng di chuy n chu t qua nút nh n "G i" thì thanh tr ng tháiạ ụ ế ườ ử ụ ể ộ ấ ử ạ s là "B n đang di chuy n chu t vào nút"...ẽ ạ ể ộH ng d n:ướ ẫ Khi ng i dùng di chuy n chu t thì s ki n di chuy n chu t s xu t hi n, s ki n nàyườ ể ộ ự ệ ể ộ ẽ ấ ệ ự ệ có tên là : onMoseMove. V y ta s vi t l nh trong s ki n này.ậ ẽ ế ệ ự ệMinh ho : màn hìnhạ

23

http://storage/tailieu/files/source/20100621/thanhlinh2009/vidu5.htm





<html><head><title>Xu ly su kien</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head><body style="font-family:arial">

<input type="button" value="G i"ử onmousemove="window.status = 'Chu t trong nút'; ">ộ<input onMouseMove ="window.status='Chu t trong textbox';"> <BR>ộ<input type="radio" name="GioiTinh" onMouseMove="window.status='Trong nam';">Nam </option><input type="radio" name="GioiTinh" onMouseMove="window.status='Trong n ';"> N </option>ữ ữ

</body></html>


Ví d 7:ụ

T o 3 textbox, có tên l n l t là: SoLuong (S l ng), DonGia (Đ n giá) và ThanhTien (Thành ti n);ạ ầ ượ ố ượ ơ ềYêu c u:ầ Khi ng i dùng nh p giá tr trong DonGia thì k t qu s đ c c p nh t ngay trongườ ậ ị ế ả ẽ ượ ậ ậ ThanhTien.H ng d n: Khi ng i dùng nh p giá tr trong textbox DonGia b ng cách nh n các phím s thì sướ ẫ ườ ậ ị ằ ấ ố ự ki n nh n phím xu t hi n (s ki n nh n phím có tên là onKeyUp), do v y ta s vi t các l nh đápệ ấ ấ ệ ự ệ ấ ậ ẽ ế ệ

ng v i s ki n này. Các l nh đây ch có m t do v y nên đ t ngay trong đ nh nghĩa th , nh sau:ứ ớ ự ệ ệ ở ỉ ộ ậ ặ ị ẻ ư

<html><head><title>Tinh tich</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>

<body style="font-family:arial;background-color:lavender"><H1>B n hãy nh p vào s l ng và giá:</H1>ạ ậ ố ượ

S l ng: <input name="SoLuong">ố ượĐ n giá:<input name="DonGia"ơ onKeyUp="ThanhTien.value=SoLuong.value*DonGia.value"> <HR>Thành ti n:<input name="ThanhTien"> USDề

</body></html>

24

http://storage/tailieu/files/source/20100621/thanhlinh2009/HTML/Vidu%2006.htm





<Xem k t qu >ế ảVí d 8:ụ T ng t nh ví d 7, nh ng vi t theo cách khai báo 3 (Các l nh vi t trong hàm). K t quươ ự ư ụ ư ế ệ ế ế ả v n cho ta nh ví d 7ẫ ư ụ

<html><head><title>Tinh tich</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><Script language = JavaScript>function TinhToan(){

ThanhTien.value=SoLuong.value*DonGia.value ;

// Ho c b n vi t đ y đ là:ặ ạ ế ầ ủ // window.ThanhTien.value = window.SoLuong.value*window.DonGia.value

}

</head>

<body style="font-family:arial;background-color:lavender"><H1>B n hãy nh p vào s l ng và giá:</H1>ạ ậ ố ượ

S l ng:ố ượ <input name="SoLuong"> Đ n giá:ơ <input name="DonGia" onKeyUp="TinhToan();"> <HR>Thành ti n: <input name="ThanhTien"> USDề

</body></html>

25






Ví d 9:ụ T o ra m t trang Web đăng nh p vào trang Vinaphone đ cho phép ng i g i tin nh n đ nạ ộ ậ ể ườ ử ắ ế đi n tho i di đ ng.ệ ạ ộh ng d n:ướ ẫ Đ đăng nh p vào m t trang Web nào đó, nh ng thông tin b t bu c th ng làể ậ ộ ữ ắ ộ ườ UserName và password (m t kh u). Tuy nhiên, ngoài nh ng thông tin b t bu c đó chúng ta còn ph iậ ẩ ữ ắ ộ ả g i các thông tin ph . Nh ng thông tin ph này ng i dùng ng i dùng không ph i nh p. (các thôngử ụ ữ ụ ườ ườ ả ậ tin ph đó d i đây s đ c g ch chân)ụ ướ ẽ ượ ạMinh ho :ạ

<HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Dang nhap vao trang http://sms.vinaphone.vnn.vn</title></HEAD><BODY style="font-family:arial"><H2>Đăng nh p vào trang Web c a vinaphone </H2><HR>ậ ủ

<form action="http://sms.vinaphone.vnn.vn/sms/servlet/UserInterface" method=post> User Name Password <BR>

<input type="text" id = username name="username" size="20">

<input type="text" id= password name="password" size="20"><input type="hidden" name="id" value="0" ><input type="hidden" name="language" value="en">

26



<input type="submit" value="Dang nhap - Login"></p>

</form>

</BODY></HTML>

Các th có thu c tính type = "hidden" s không đ c hi n th trong trình duy t, tuy nhiên khi chúngẻ ộ ẽ ượ ể ị ệ ta "Submit" thì các thông tin trong đó cũng đ c g i đi.ượ ử


Các bài t p t gi iậ ự ảBài 1: Hãy t o ra trang Web có giao di n nh sau:ạ ệ ư

Yêu c u:ầ

• Khi ng i dùng di chuy n chu t đ n ph n t nào thì hi n th dòng nh c d i thanh tr ngườ ể ộ ế ầ ử ể ị ắ ướ ạ thái đ h ng d n ng i dùng. Ví d : Khi ng i dùng đ a chu t vào trong ô textbox Userể ướ ẫ ườ ụ ườ ư ộ

27

http://storage/tailieu/files/source/20100621/thanhlinh2009/HTML/SMS_login.htm





Name thì thì hi n th d i thanh tr ng thái là :"Nh p mã ng i dùng", hay khi ng i đ aể ị ướ ạ ậ ườ ườ ư chu t đ n nút "Đăng ký" thì hi n th dòng nh c: "G i thông tin đi đ đăng ký" v.v...ộ ế ể ị ắ ử ể

H ng d n:ướ ẫ Nút đăng ký nên là nút th ng, t c là t o b ng th :ườ ứ ạ ằ ẻ<input type = button value = "Đăng ký">

Bài t p 2ậ : Có giao di n nh bài 1, nh ng yêu c u nh sau:ệ ư ư ầ ư • Khi g i thông tin đi, c n ki m tra xem n i dung ng i dùng gõ trong ô Password v i textboxử ầ ể ộ ườ ớ

trong ô "Gõ l i password" có gi ng nhau hay không? N u b ng nhau thì m i g i (Submit) đi,ạ ố ế ằ ớ ử còn n u không b ng thì thông báo là "Password ph i gi ng nhau"ế ằ ả ố

• Khi g i thông tin, c n ki m tra ngày sinh, tháng sinh ph i h p l . (T c ngày ph i nh h nử ầ ể ả ợ ệ ứ ả ỏ ơ 32, tháng ph i nh h n 13)ả ỏ ơ

H ng d n:ướ ẫNút đăng ký nên là nút th ng, t c là t o b ng th :ườ ứ ạ ằ ẻ<input type = button value = "Đăng ký" onClick = "DangKy();">Trong đó Hàm DangKy() s ki m tra d li u h p l và khi d li u nh p vào đúng đ n thì g i đi b ngẽ ể ữ ệ ợ ệ ữ ệ ậ ắ ử ằ cách g i ph ng th cọ ươ ứ submit c a đ i t ngủ ố ượ document, nh sau:ư document.submit();Bài t p 3:ậLàm t ng t bài t p 7 và 8, nh ng thêm yêu c u: Khi ng i dùng nh p ho c s l ng, ho c đ nươ ự ậ ư ầ ườ ậ ặ ố ượ ặ ơ giá thì hãy tính luôn ô textbox thành ti n.ề

H ng d n: Vi t l nh tính thành ti n trong c 2 s ki n onKeyUp c a c hai textbox s l ng vàướ ẫ ế ệ ề ả ự ệ ủ ả ố ượ textbox đ n giá.ơ*** L u ý:ư Tr c khi tính tích thì c n ph i ki m tra xem d li u trong hai textbox đã có hay ch a, n uướ ầ ả ể ữ ệ ư ế m t ô ch a nh p gì thì ch a tính.ộ ư ậ ư

Ch ng IV: Đ nh d ng các ph n t HTML b ng CSSươ ị ạ ầ ử ằ

M c tiêu c a ch ng:ụ ủ ươ - Giúp h c viên hi u rõ h n v ý nghĩa c a vi c dùng ki u (style)ọ ể ơ ề ủ ệ ể- Tra c u thành th o các thu c tính trong b ng dánh sách ki uứ ạ ộ ả ể- V n d ng các thu c tính (ki u) đ đ nh d ng cho các ph n t trong trang web,ậ ụ ộ ể ể ị ạ ầ ử

nâng cao tính th m m .ẩ ỹ

N i dung:ộI. Nh c l i khái ni m v ki uắ ạ ệ ề ểKi u (style) th c ch t là m t cách đ nh nghĩa thu c tính cho các ph n t trong trang webể ự ấ ộ ị ộ ầ ử theo m t cách th c m i.ộ ứ ớVi c đ nh nghĩa các thu c tính này cho các ph n t s cho ta m t "dáng v m i", m tệ ị ộ ầ ử ẽ ộ ẻ ớ ộ "di n m o m i" v trang web. Ngoài ra, vi c đ nh nghĩa thu c tính theo cú pháp m i nàyệ ạ ớ ề ệ ị ộ ớ s làm ti n đ cho vi c xây d ng các trang web đ ng mà ta s đ c p trong các ch ngẽ ề ề ệ ự ộ ẽ ề ậ ươ ti p theo.ế

Ví d :ụ Tr c đây, đ đ nh nghĩa m t đo n văn b n n m trong th <P> có font ch làướ ể ị ộ ạ ả ằ ẻ ữ .vntime, chúng ta s vi t nh sau:ẽ ế ư <P ><FONT face=.VnTime>Dòng văn b n này có font ch là .vntime</Font></p>ả ữ Nh ng v i cách đ nh d ng m i theo cú pháp mà ta g i là cú pháp CSS, thì có th th c hi nư ớ ị ạ ớ ọ ể ự ệ yêu c u trên nh sau:ầ ư <P style= "font-family:.vntime">Dòng văn b n này có font ch là .vntime </P>ả ữ

II. Minh ho cách khai báo styleạTrong JavaScript, b n có th thi t l p các thu c tính cho m t th nào đó theo r t nhi uạ ể ế ậ ộ ộ ẻ ấ ề cách. D i đây xin gi i thi u 3 cách thi t l p thu c tính cho th , đó là :ướ ớ ệ ế ậ ộ ẻ

• Thi t l p (Đ nh nghĩa) thu c tính ngay trong khi đ nh nghĩa th (tag), ki u này cònế ậ ị ộ ị ẻ ể g i là đ nh nghĩa ki u m c dòng (style line)ọ ị ể ở ứ

28



• Thi t l p thu c tính cho toàn b m t lo i th nào đó. Cách này còn g i là đ nhế ậ ộ ộ ộ ạ ẻ ọ ị nghĩa b ch nộ ọ

• Đ nh nghĩa m t l p, sau đó có th đem ra s d ng cho b t kỳ ph n t nàoị ộ ớ ể ử ụ ấ ầ ử • Đ nh nghĩa b ch n ID, cho phép áp d ng t t c các thu c tính c a b ch n vào t tị ộ ọ ụ ấ ả ộ ủ ộ ọ ấ

c các th có thu c tính ID phù h p v i mã ID trong đ nh nghĩa.ả ẻ ộ ợ ớ ị

I. Style áp d ng m c dòng (Inline style)ụ ở ứ Style m c dòng (inline style) cho phép b n có th thay đ i hình th c (style) c a m t ph nứ ạ ể ổ ứ ủ ộ ầ t nào đó b ng cách thêm các thu c tính đ nh d ng tr c ti p vào ngay bên trong đ nh nghĩaử ằ ộ ị ạ ự ế ị c a th .ủ ẻ

M t s ví d minh hoộ ố ụ ạVí d 1:ụ Đ t o m t dòng văn b n v i th <P>; có màu ch là đ , b n có th vi t nhể ạ ộ ả ớ ẻ ữ ỏ ạ ể ế ư sau:<P style = "color:blue"> Màu này là màu c a hoà bình <P>.ủK t qu cho ta :ế ả

Màu này là màu c a hoà bìnhủ Ví d 2 :ụ Đ t o m t m t button (Nút nh n) có màu n n là tím (magenta), b n vi t:ể ạ ộ ộ ấ ề ạ ế<input type="button" style="background-color:magenta" value="Helloworld">

K t qu :ế ả Ví d 3:ụ T o m t nút nh n (Button), trong đó, khi ngạ ộ ấ ư i dùng đờ ư a chu t đ n nút đó thìộ ế con tr chu t có hình bàn tayỏ ộThu c tính qui đ nh chu t có ki u hình bàn tay là "cursor:hand", do v y c n thêm thu cộ ị ộ ể ậ ầ ộ

tính này trong đ nh nghĩa thị ẻ<Input type = button style = "cursor:hand" value="Chu t hình bàn tay ">ộTa đ c k t qu (B n di chu t vào nút này):ợ ế ả ạ ộ Ví d 4 :ụ T o m t textbox có vi n màu đạ ộ ề ỏThu c tính t o vi n màu đ là : "background-border:red", do v y b n c n đ t vào trongộ ạ ề ỏ ậ ạ ầ ặ đ nh nghĩa th text nhị ẻ sau:ư <input type="text" style="border-color:red" value="vi n màu đ ">ề ỏ

K t qu cho ta m t textbox có vi n màu đ :ế ả ộ ề ỏ Nh n xét :ậã Trong các ví d trên, chúng ta có th thi t l p m t s thu c tính c a b t kỳ ph n tụ ở ể ế ậ ộ ố ộ ủ ấ ầ ử

nào b ng cách đằ a vào dòngư style = "Tên thu c tính:Giá tr c a thu c tính"ộ ị ủ ộ Trong đó,C p tên thu c tính : Giá tr c a thu c tính các b n có th tra trongặ ộ ị ủ ộ ạ ể b ng các thu c tínhả ộ .đ c đ t trên thợ ặ m c c a máy ch .ụ ủ ủã Có th để ư a vào m t ho c nhi u thu c tính trong bi u th c style="...." , khi đ a nhi uộ ặ ề ộ ể ứ ư ề thu c tính thì các thu c tính cách nhau b i d u ch m ph yộ ộ ở ấ ấ ả ";" Ví d 5:ụ T o m t nút nh n có màu n n là tím (magenta) và màu ch là tr ng (white)ạ ộ ấ ề ữ ắThu c tính qui đ nh màu n n tím là :ộ ị ề "background-color:magenta" , Còn thu c tính quiộ đ nh màu ch tr ng làị ữ ắ "color:white" Như v y c n đ nh nghĩa th là :ậ ầ ị ẻ <input type ="button" style="background-color:magenta; color:white" value="N n tím- ch tr ng">ề ữ ắ

K t qu :ế ả

29

http://server/Aptech%20-%20Tai%20lieu%20HTML-Javascript/Chuong%2010/Cac%20the%20su%20dung%20trong%20CSS.htm





Ví d 6: Thi t l p nh n n c a trang Web là anh1.jpg, và nh này hi n th v trí c đ nhụ ế ậ ả ề ủ ả ể ị ở ị ố ị (T c là n u b n có cu n thanh cu n c a c a s thì nh này s không b cu n theo mà v nứ ế ạ ộ ộ ủ ử ổ ả ẽ ị ộ ẫ đ ng yên).ứ Bi t r ng thu c tính đ a nh n n vào trang web nh sau:ế ằ ộ ư ả ề ư background-image:url( ' <Đ ng d n và tên file nh> ')ườ ẫ ảThu c tính đ nh v trí c đ nh là :ộ ể ả ở ị ố ị

background-attachment:fixedL u ý: đ c tính nh c đ nh ch có trong IE, không có trong Nescapeư ặ ả ố ị ỉNh v y, yêu c u trên có th th c hi n nh sau:ư ậ ầ ể ự ệ ư <body style="background-image:url('anh1.jpg'); background-attachment:fixed; color:white;font-family:arial"><Click vào đây đ xem minh ho >ể ạ (B n ph i đ m b o là m trong trình duy t IE)ạ ả ả ả ở ệVí d 7:ụ T o các liên k t đ n các trangạ ế ế http://www.aptech.ute, http://www.vnn.vn, nh ngư các liên k t này không có đ ng g ch chân và có các thu c tính nh sau:ế ườ ạ ộ ư

- Màu ch : Đ (red)ữ ỏ- Màu n n : lavenderề- Màu khi chu t click vào liên k t : tím (magenta)ộ ế- Màu khi trang đó đã đ c thăm : nâu (brown)ượ

H ng d n:ướ ẫ- Thu c tính qui đ nh màu ch c a liên k t là: linkColor, thu c đ i t ng documentộ ị ữ ủ ế ộ ố ượ- Thu c tính qui đ nh màu n n c a văn b n trong m t th : background-color (CSS)ộ ị ề ủ ả ộ ẻ- Thu c tính qui đ nh c a liên k t khi b click chu t : alinkColor, thu c documentộ ị ủ ế ị ộ ộ- Thu c tính qui đ nh màu c a liên k t đã đ c thăm: vlinkColor, thu c documentộ ị ủ ế ượ ộ

Minh ho (So n trong Dreamweaver):ạ ạ

Đ nh nghĩa style m c dòngị ở ứ

30

http://storage/tailieu/files/source/20100621/thanhlinh2009/Background-image.htm



http://www.aptech.ute/

http://www.aptech.ute/pcworld2003/homepage.pdf



http://www.aptech.ute/pcworld2003/homepage.pdf



III. B ch n HTMLộ ọB ch n HTML cho phép chúng ta ch c n đ nh nghĩa các thu c tính m t l n duy nh t choộ ọ ỉ ầ ị ộ ộ ầ ấ m t lo i th HTML nào đó (Ví d P, INPUT, H1, H2 ....), và v sau t t c các văn b nộ ạ ẻ ụ ề ấ ả ả n m trong lo i th này s có cùng đ nh d ng nhằ ạ ẻ ẽ ị ạ nhau. Đi u này r t có l i cho ta trongư ề ấ ợ th c t , ch ng h n khi b n t o m t website cho m t cu n sách nào đó mà trong cu n sáchự ế ẳ ạ ạ ạ ộ ộ ố ố này l i có r t nhi u ch ng và b n mu n màu s c, kích c , font ch , ki u dáng... cho tiêuạ ấ ề ươ ạ ố ắ ỡ ữ ể

đ các ch ng là nh nhau, thì b n ch c n đ nh nghĩa m t l n và v sau tiêu đ cácề ươ ư ạ ỉ ầ ị ộ ầ ề ề ch ng s có cùng đ nh d ng gi ng nh nhau.ươ ẽ ị ạ ố ư

Vi c chúng ta t o ra các tính ch t chung cho m t lo i th nào đó thì ta g i là m t b ch nệ ạ ấ ộ ạ ẻ ọ ộ ộ ọ (Selector) HTML

Đ đ nh nghĩa ra m t b ch n HTML, ta có 2 cách, b n có th tuỳ ý ch n m t trong 2 cáchể ị ộ ộ ọ ạ ể ọ ộ này. Cách th nh t là ta vi t theo m t d ng cú pháp mà ta g i là cú pháp d ng CSS, d ngứ ấ ế ộ ạ ọ ạ ạ th hai là ta vi t theo cú pháp c a JavaScript.ứ ế ủ

Cú pháp đ t o b ch n theo CSS nh sau:ể ạ ộ ọ ư

<Style type = "text/CSS">

<Tên th HTML> { <Tên thu c tính> : <Giá tr > }ẻ ộ ị



........................

</Style>

Trong đó:

- <Tên th HTML> là m t trong các th mà b n đã h c, ví d nó có th là th P,ẻ ộ ẻ ạ ọ ụ ể ẻ INPUT, LI, UL, B, H1, H2 v.v...

- Tên thu c tínhộ : Là tên c a thu c tính c a lo i th mà b n mu n thay đ i . Nó cóủ ộ ủ ạ ẻ ạ ố ổ th là color, background-color, cursor, text-align v.v... Tên các thu c tính này cácể ộ b n có th tra trong b ng (Fileạ ể ả Cac the su dung trong CSS.doc" n m trong th m cằ ư ụ tài li u v JavaScript c a máy Server)ệ ề ủ

- Giá tr :ị Là giá tr m i mà b n mu n đ t cho thu c tính. Ví d , "red", "lavender",ị ớ ạ ố ặ ộ ụ "hand", "center" v.v.... Đ có th đ t giá tr cho h p l , b n tham kh o trong file:ể ể ặ ị ợ ệ ạ ả

Cac the su dung trong CSS.doc" trong server.

Sau khi đã đ nh nghĩa tên c a m t lo i th v i các thu c tính c a nó, thì t t c các thị ủ ộ ạ ẻ ớ ộ ủ ấ ả ẻ cùng lo i v sau s có t t c các thu c tính nh đã đ nh nghĩa. Đ làm sáng t đi u này,ạ ề ẽ ấ ả ộ ư ị ể ỏ ề chúng ta hãy l y m t s ví d :ấ ộ ố ụ Ví d 1:ụ Gi s b n c n t o m t danh m c các đ u sách c a Aptech, theo đ nh d ng d iả ử ạ ầ ạ ộ ụ ầ ủ ị ạ ứơ đây

KNOW YOUR DESKTOP

Office 2000

31







Access 2000

Logic Building with C

HTML, DHTML and JavaScriptDream Weaver

M t cách thông th ng nh t, v i các ki n th c nh ng ph n trộ ườ ấ ớ ế ứ ở ữ ầ c, b n hoàn toàn có thướ ạ ể t o đ c b ng cách vi t nh sau :ạ ượ ằ ế ư

Tuy nhiên n u theo cách trên thì chúng ta d dàng th y có m t đi m ch a đ c thu nế ở ễ ấ ộ ể ư ượ ậ ti n, đó là m i khi thêm tên m t lo i sách chúng ta c n ph i thêm trong th P dòng:ệ ỗ ộ ạ ầ ả ẻ

<style="font-family:.vntimeH; font-size:20pt; color:red".Trong tr ng h p này, B ng cách đ nh ra m t qui t c (Đ nh d ng) chung cho t t c cácườ ợ ằ ị ộ ắ ị ạ ấ ả th P ta có th có k t qu nh mong đ i mà không ph i vi t l i các dòng d th a nhẻ ể ế ả ư ợ ả ế ạ ư ừ ư ở trên. Vi c đ nh ra qui t c chung cho th P ta g i là đ nh nghĩa b ch n P.ệ ị ắ ẻ ọ ị ộ ọ

áp d ng cú pháp đ nh nghĩa b ch n theo d ng CSS đ đ nh nghĩa b ch n P nh sau:ụ ị ộ ọ ạ ể ị ộ ọ ư

<style type = "text/css">P {font-family:.vntimeH}P {font-size:20pt}P {color:red}

</style>

Ho c đ nh nghĩa m t cách ng n g n :ặ ị ộ ắ ọ<style type = "text/css">

P {font-family:.vntimeH ; font-size:20pt; color:red}</style>

PH L C : B NG TRA C U CÁC THU C TÍNH C A CSSỤ Ụ Ả Ứ Ộ Ủ- Các thu c tính áp d ng cho Font chộ ụ ữ Thu c tínhộ Các giá tr h p lị ợ ệ Ví dụ

font-family [Tên font ho c ki u]ặ ể font-family: Verdana,Arial;

font-style normal ho c italicặ font-style:italic;

font-variant normal ho c small-capsặ font-variant:small-caps;

font-weight normal ho bold font-weight:bold;

font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | ph nầ

trăm ho cặ length

font-size:12pt;

font [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family

font: bold 12pt Arial;

32



- Các thu c tính màu và n n (Color and background properties)ộ ềThu c tínhộ Các giá tr h p lị ợ ệ Ví dụ

color Màu color: red

background-color Màu ho c transparentặ background-color: yellow

background-image Đ a ch (url) ho c Không đ t gìị ỉ ặ ặ background-image:url(house.jpg)

background-repeat repeat | repeat-x | repeat-y | no-repeat

background-repeat: no-repeat

background-attachment scroll ho c fixedặ background-attachment: fixed

background-position [ position | length ] | {1,2} | [ top |center | bottom ] || [ left | center |right ]

background-position: topcenter

background transparent | color || url || repeat ||scroll || position

background: silverurl(house.jpg) repeat-y

* L u ý: Các giá tr in nghiêng khi s d ng b n ph i thay b ng giá tr c th , ví d vi tư ị ử ụ ạ ả ằ ị ụ ể ụ ế ph n trăm hay lenght thì b n ph i thay các giá tr d ng ph n trăm, ví d 50% đ i v iầ ạ ả ị ạ ầ ụ ố ớ thu c tính ph n trăm (percentage) và 10, 20 .... cho thu c tính length.ộ ầ ộ

33



- Các thu c tính áp d ng cho Textộ ụThu c tínhộ Giá tr h p lị ợ ệ Ví dụ

letter-spacing normal | length letter-spacing:5pt

text-decoration none | underline | overline | line-through text-decoration:underline

vertical-align sub | super | vertical-align:subtext-transform capitalize | uppercase | lowercase | none text-transform:lowercase

text-align left | right | center | justify text-align:center

text-indent length | percentage text-indent:25px

line-height normal | number | length | percentage line-height:15pt

- Các thu c tính áp d ng cho các ô trong m t b ngộ ụ ộ ảThu c tínhộ Giá tr h p lị ợ ệ Ví dụ

margin-top length | percentage | auto margin-top:5pxmargin-right length | percentage | auto margin-right:5px

margin-bottom length | percentage | auto margin-bottom:1em

margin-left length | percentage | auto margin-left:5pt

margin length | percentage | auto {1,4} margin: 10px 5px 10px 5px

padding-top length | percentage padding-top:10%

padding-right length | percentage padding-right:15px

padding-bottom length | percentage padding-bottom:1.2empadding-left length | percentage padding-left:10pt; }

padding length | percentage {1,4} padding: 10px 10px 10px15px

border-top-width thin | medium | thick | length border-top-width:thin

border-right-width thin | medium | thick | length border-right-width:medium

border-bottom-width thin | medium | thick | length border-bottom-width:thick

border-left-width thin | medium | thick | length border-left-width:15pxborder-width thin | medium | thick | length {1,4} border-width: 3px 5px 3px

5px

border-top-color color border-top-color:navajowhite

border-right-color color border-right-color:whitesmoke

border-bottom-color color border-bottom-color:black

border-left-color color border-left-color:#C0C0C0

border-color color {1,4} border-color: green red whiteblue; }

34



border-top-style none | solid | double | groove |ridge | inset | outset

border-top-style:solid

border-right-style none | solid | double | groove |ridge | inset | outset

border-right-style:double

border-bottom-style none | solid | double | groove |

ridge | inset | outset

border-bottom-style:groove

border-left-style none | solid | double | groove |ridge | inset | outset

border-left-style:none

border-style none | solid | double | groove |ridge | inset | outset

border-style:ridge; }

border-top border-width | border-style |border-color

border-top: medium outset red

border-right border-width | border-style |

border-color

border-right: thick inset

maroonborder-bottom border-width | border-style |

border-colorborder-bottom: 10px ridgegray

border-left border-width | border-style |border-color

border-left: 1px groove red

border border-width | border-style |border-color

border: thin solid blue

float none | left | right float:none

clear none | left | right | both clear:left- Các thu c tính phân lo i - classification Propertiesộ ạThu c tínhộ Giá tr h p lị ợ ệ Ví dụ

display none | block | inline | list-item display:none

list-style-type disk | circle | square | decimal |lower-roman | upper-roman | lower-alpha | upper-alpha | none

list-style-type:upper-alpha

list-style-image url | none list-style-

image:url(icFile.gif)list-style-position inside | outside list-style-position:inside

list-style keyword || position || url list-style: square outsideurl(icFolder.gif)

35



- Các thu c tính đ nh v trí cho các ph n tộ ị ị ầ ử Thu c tínhộ Giá tr h p lị ợ ệ Ví dụ Có th áp d ng choể ụ

clip To đ c a m tạ ộ ủ ộ hình ch nh t| autoữ ậ

clip:rect(0px 200px200px 0px)

t t c các ph n t (allấ ả ầ ử elements)

height length | auto height:200px DIV, SPAN và các pt bử ị thay thế

left length | percentage |auto

left:0px Các ph n t đ c đ nh vầ ử ượ ị ị tuy t đ i và t ng đ iệ ố ươ ố

overflow visible | hidden |scroll | auto

overflow:scroll t t c các ph n tấ ả ầ ử

position absolute| relative |static

position:absolute t t c các ph n tấ ả ầ ử

top length | percentage |

auto

top:0px Các ph n t đ c đ nh vầ ử ượ ị ị

tuy t đ i và t ng đ iệ ố ươ ốvisibility visible | hidden |

inheritvisibility:visible t t c các ph n tấ ả ầ ử

width length | percentage |auto

width:80% DIV, SPAN and replacedelements

z-index auto | integer z-index:-1 Các ph n t đ c đ nh vầ ử ượ ị ị tuy t đ i và t ng đ iệ ố ươ ố

- Thu c tính liên quan đ n in n - Printing Propertiesộ ế ấThu c tínhộ Giá tr h p lị ợ ệ Ví dụ

page-break-before auto | always || left | right page-break-before:always

page-break-after auto | always || left | right page-break-before:auto

-Pseudo Classes

Thu c tínhộ Giá tr h p lị ợ ệ Ví dụ

cursor auto | crosshair | default | hand | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text |wait | help

{ cursor:hand; }

active, hover, link,visited

n/a a:hover { color:red; }

first-letter, first-line any font manipulating declaration p:first-letter{float:left;color:blue}.

36



M t s ví d áp d ng:ộ ố ụ ụVí d 1:ụ T o m t dòng văn b n “Welcome to CSS” có font ch là Arial, in nghiêngạ ộ ả ữ và kích th c font ch là 16 point.ướ ữ <HTML><HEAD> </HEADS><BODY>

<P style=“font-family:arial; font-style:italic; font-size:16pt”>Welcome to </P></BODY></HTML><Xem k t qu >ế ảVí d 2:ụ T o m t textbox v i màu n n là màu tím (magenta).ạ ộ ớ ề<HTML><HEAD> </HEADS><BODY><input type = text style = “background-color:magenta”></BODY></HTML>

<Xem k t qu >ế ảVí d 3:ụ Đ t 3 file nh n n t ng ng vào tài li u, vào textbox và vào textareaặ ả ề ươ ứ ệ<HTML><HEAD> </HEAD><BODY style="background-image:url('anh1.jpg');background-repeat:no-repeat"><input style = "background-image:url('anh2.jpg');background-repeat:repeat-x; width:100%"><P><textarea style = "background-image:url('anh3.jpg');background-repeat:repeat-y" cols = 80 rows =25></textarea></BODY>

</HTML><Xem k t qu >ế ả

*Ghi chú:-Khi ta đ t là repeat-x thì ta có m t dãy nh đ c x p liên ti p theo chi u ngangặ ộ ả ượ ế ế ề-Khi ta đ t là repeat-y thì ta có m t dãy nh đ c x p liên ti p theo chi u d cặ ộ ả ượ ế ế ề ọ

Ví d 4:ụ T o m t dòng văn b n, ch a xâu: "Trang chu cua HY-Aptech", trong đó tạ ộ ả ứ ừ "Trang chu" có màu xanh (blue) và khi ng i dùng di chuy n chu t đ n ch "Trang chu"ườ ể ộ ế ữ thì chu t chuy n thành hình bàn tay, và khi chu t click lên ch này thì trangộ ể ộ ữ http://www.aptech.ute s đ c m .ẽ ượ ở<HTML>

<HEAD> </HEAD><BODY><TITLE>T o liên k t và x lý s ki n</TITLE>ạ ế ử ự ệ<font style ="cursor:hand;color:blue"onclick="window.open('http://www.aptech.ute');">Trang chu </font> cua HY-Aptech</BODY></HTML> ===> Xem k t quế ảGhi chú: Khi mu n áp d ng các ki u cho m t s ph n t các b n ch c n vi t :ố ụ ể ộ ố ầ ử ạ ỉ ầ ế style="Tên_Thu c_tínhộ : Giá_Tr ;" trong đ nh nghĩa th . Trong đó c p "Tên_Thu c_tínhị ị ẻ ặ ộ :Giá_Tr ;" có th vi t nh c t ví d đã ch ra các b ng trên.ị ể ế ư ộ ụ ỉ ở ả

37

















N i dung trang Web c a chúng ta bây gi s là:ộ ủ ờ ẽ

<html><head><title>Su dung bo chon</title></head>

<style type = "text/css">P {font-family:.vntimeH; font-size:20pt; color:red}</style><body><P>Know Your desktop </P><P>Office 2000 </P><P>Access 2000 </P><P>Logic Building with C </P><P>HTML, DHTML and JavaScript</P><P>Dream Weaver</P>

</body></html>

Ch ng V: T o và x lý các t ng (Layer)ươ ạ ử ầ

M c tiêu c a ch ng này giúp ng i h c có th :ụ ủ ươ ườ ọ ể Thay đ i thu c tính c a m t ph n t HTML khi có các s ki n chu tổ ộ ủ ộ ầ ử ự ệ ộ

và bàn phím x y ra.ả Đ nh nghĩa các t ng (Layer) trong IE và Netscape.ị ầ n, hi n t ng b ng các l nh JavaScriptẨ ệ ầ ằ ệ T o m t menu liên k t đ n các trang khác s d ng t ng.ạ ộ ế ế ử ụ ầ

A. TÓM T T LÝ THUY TẮ Ế

1. M t s s ki n th ng dùng:ộ ố ự ệ ườ - S ki n Click chu t (ự ệ ộ onClick) đ c kích ho t khi chu t đ c clickượ ạ ộ ượ- S ki n di chuy n chu t vào bên trong ph n t (ự ệ ể ộ ầ ử onMouseOver) đ c kích ho t khiượ ạ chu t di chuy n chu t t ngoài vào trong ph n t .ộ ể ộ ừ ầ ử - S ki n di chu t ra ngoài (ự ệ ộ onMouseOut) đ c kích ho t khi di chuy n chu t t bênượ ạ ể ộ ừ trong ph n t ra kh i ph n t .ầ ử ỏ ầ ử - S ki n nh n phím (ự ệ ấ onKeyUp) đ c kích ho t khi ng i dùng nh n m t phím.ượ ạ ườ ấ ộ2. Thay đ i thu c tính c a các ph n t HTMLổ ộ ủ ầ ử Đ thay đ i thu c tính c a m t ph n t HTML nào đó trong trang b ng l nh JavaScript,ể ổ ộ ủ ộ ầ ử ằ ệ b n vi t nh sau:ạ ế ư

document.all.<Giá tr ID c a th >.style.<Tên thu c tính> = <Giá tr m i>ị ủ ẻ ộ ị ớ

Trong đó: • <Giá tr ID c a th >ị ủ ẻ chính là giá tr mà b n đ t cho thu c tính ID, ví d :ị ạ ặ ộ ụ<H2 ID = ‘TieuDe’> THAY Đ I THU C TÍNH C A TH </H2> thì <giá tr ID c aỔ Ộ Ủ Ẻ ị ủ th > trong tr ng h p này s là ‘ẻ ườ ợ ẽ TieuDe’. •

<Tên thu c tínhộ > là tên thu c tính c n thay đ i. B n có th tra trong tài li u đã đ cộ ầ ổ ạ ể ệ ượ giáo viên phát: “Danh sách các thu c tính”. Ví d : text-align, font-size, color v.v…ộ ụ

38



• <Giá tr m i>ị ớ là nh ng giá tr h p l cho thu c tính c n thay đ i. (B n cũng tra trongữ ị ợ ệ ộ ầ ổ ạ tài li u “Danh sách các thu c tính”).ệ ộ

** L u ý:ư N u b n mu n thay đ i thu c tính c a m t ph n t thì b t bu c b n ph i gánế ạ ố ổ ộ ủ ộ ầ ử ắ ộ ạ ả cho th đó m t giá tr ID duy nh t (Nh ví d trên).ẻ ộ ị ấ ư ụ ở

3. Đ nh nghĩa t ng trong IE và Netscapeị ầa. Đ nh nghĩa t ng trong IEị ầ Đ đ nh nghĩa t ng trong IE, b n ch c n đ t thu c tính position cho style.ể ị ầ ạ ỉ ầ ặ ộVí d : <H2 style = “position:absolute;”>Th H2 này đ c đ t trên m t t ng </H2>ụ ẻ ượ ặ ộ ầTuy nhiên, v i cách đ nh nghĩa trên thì m i t ng ch ch a đ c m t ph n t . Nêu b nớ ị ở ỗ ầ ỉ ứ ượ ộ ầ ử ạ mu n m t t ng ch a đ c nhi u h n m t ph n t thì b n đ nh nghĩa t ng b ng c p thố ộ ầ ứ ượ ề ơ ộ ầ ử ạ ị ầ ằ ặ ẻ <DIV> ho c <SPAN> nh sau:ặ ư

<DIV ID = ‘Tang1’ style = “position:absolute”><Đ t các ph n t khác vào đây, ví d : >ặ ầ ử ụ<H1> Ph n t này n m trên t ng 1 </H1>ầ ử ằ ầ<input type = button value = “Move”><img src = “file://c:/anh1.jpg”><a href = “http://www.echip.com.vn”> Trang ch c a báo E-Chip </a>ủ ủ

</DIV>

M i t ng khi t o ra, b n nên gán thu c tính ID cho t ng đó m t giá tr duy nh t (Khôngỗ ầ ạ ạ ộ ầ ộ ị ấ trùng v i ID c a b t kỳ th nào trong trang). B n hoàn toàn có th th c hi n các thao tácớ ủ ấ ẻ ạ ể ự ệ đ i v i t ng nh :ố ớ ầ ư

• n t ng, ví d : document.all.Tang1.style.visibility = ‘hidden’Ẩ ầ ụ• Hi n t ng, ví d : document.all.Tang1.style.visibility = ‘visible’ệ ầ ụ• Di chuy n t ng sang trái 5 pixel, ví d : document.all.Tang1.style.pixelLeft -= 5ể ầ ụ• Di chuy n t ng sang ph i 5 pixel, ví d : document.all.Tang1.style.pixelLeft += 5ể ầ ả ụ• Di chuy n t ng lên trên 5 pixel, ví d : document.all.Tang1.style.pixelTop -= 5ể ầ ụ• Di chuy n t ng xu ng d i 5 pixel, ví d : document.all.Tang1.style.pixelTop+=5ể ầ ố ướ ụ

b. Đ nh nghĩa t ng trong Netscapeị ầ Trong Netscape, vi c đ nh nghĩa (t o ra) t ng có ph n d dàng h n v i th LAYER :ệ ị ạ ầ ầ ễ ơ ớ ẻ

<LAYER name = “Tang1”><Đ t các ph n t khác vào đây, ví d : >ặ ầ ử ụ<H1> Ph n t này n m trên t ng 1 </H1>ầ ử ằ ầ<input type = button value = “Move”>

<img src = “file://c:/anh1.jpg”><a href = “http://www.manguon.com”> Trang ch a nhi u m o v t v IT </a>ứ ề ẹ ặ ề

</LAYER>• Đ n / hi n t ng đ c t o b i th LAYER thông qua l nh JavaScript, b n vi t :ể ẩ ệ ầ ượ ạ ở ẻ ệ ạ ế

o document.<Tên c a t ng>.visibility = 'hidden' (đ n t ng)ủ ầ ể ẩ ầo document.<Tên c a t ng>.visibility = 'show' (đ hi n t ng)ủ ầ ể ệ ầ

Trong đó : <Tên c a t ng> chính là giá tr c a thu c tính name.ủ ầ ị ủ ộ

** L u ý:ư Đ truy c p đ n m t t ng, trong IE s d ng giá tr c a thu c tính ID, trong khiể ậ ế ộ ầ ử ụ ị ủ ộ đó Netscape s d ng giá tr c a thu c tínhử ụ ị ủ ộ name.

Ví d :ụ document.Tang1.visibility = 'hidden' Đ n t ng có tên là Tang1 t o ra trên.ể ẩ ầ ạ ở• Đ di chuy n t ng b ng JavaScript, b n vi t:ể ể ầ ằ ạ ế

39



o document.<Tên t ng>.ầ left = <Giá tr > (Di chuy n sang trái ho c ph i)ị ể ặ ảo document.<Tên t ng>.ầ top = <Giá tr > (Di chuy n lên | xu ng)ị ể ố

Trong đó: <giá tr > âm đ di chuy n lùi, giá tr d ng đ di chuy n ti n.ị ể ể ị ươ ể ể ế

• Ví d di chuy n t ng lên trên thêm 10 pixelụ ể ầo document.Tang1.top -= 10

• Ví d di chuy n t ng sang ph i thêm 10 pixelụ ể ầ ảo document.Tang1.left += 10

• Ví d , di chuy n t ng đ n v trí cách mép trên c a s trình duy t 100px, và cách mépụ ể ầ ế ị ử ổ ệ trái 50 pixel.

o document.Tang1.top = 100o document.Tang1.left = 50

B. BÀI T P M UẬ Ẫ Bài s 1:ố Minh ho s ki n di chuy n chu t vào ph n t .ạ ự ệ ể ộ ầ ử Yêu c u:ầ T o m t liên k t đ n trangạ ộ ế ế http://www.w3schools.com b ng th H2. Có màu n nằ ẻ ề

là xanh, màu ch là tr ng. Khi chu t di chuy n đ n thì đ i màu n n thành màu đ .ữ ắ ộ ể ế ổ ề ỏ H ng d n:ướ ẫ Đ đ i màu n n thành đ đ i v i th H2 (ho c th b t kỳ) b n vi t:ể ổ ề ỏ ố ớ ẻ ặ ẻ ấ ạ ếdocument.all.LienKet.style.backgroundColor = ‘red’

Trong đó LienKet là giá tr c a thu c tính ID .ị ủ ộ

Câu l nh JavaScript này đ t đâu ?ệ ặ ở Theo nh yêu c u đ u bài là : “Khi chu t di chuy n …”. Do v y câu l nh này s đ cư ầ ầ ộ ể ậ ệ ẽ ượ đ t trong s ki n di chuy n chu t đ n (có tên làặ ự ệ ể ộ ế onMouseMove)

Minh ho :ạ<HTML><HEAD>

<TITLE>Hi u ng di chuy n chu t</TITLE>ệ ứ ể ộ<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></HEAD>

<BODY><h2 ID= "LienKet" STYLE="background-color:blue; color:white"

onMouseMove="document.all.LienKet.style.backgroundColor= 'red'">Trang d y JavaScript http://www.w3schools.comạ

</h2></BODY></HTML>

<Nh c l i:ắ ạ Các thu c tính trong b ng tra c u “danh sách thu c tính” n u có ch a d uộ ả ứ ộ ế ứ ấ g ch n i (ví d : background-color) thì khi vi t trong JavaScript, b n ph i chuy n ký tạ ố ụ ế ạ ả ể ự

đ ng ngay sau d u g ch n i đó thành ch hoa và b d u g ch n i đi. (Ví d tứ ấ ạ ố ữ ỏ ấ ạ ố ụ ừ

background-color backgroundColor)

Bài s 2:ố Minh ho s ki n di chuy n chu t vào và ra kh i m t ph n t .ạ ự ệ ể ộ ỏ ộ ầ ử Yêu c u:ầ Nh bài t p 1, và thêm yêu c u sau: Khi ng i dùng di chuy n chu t ra kh iư ậ ầ ườ ể ộ ỏ ph n t H2 đó thì đ t l i màu n n là màu xanh.ầ ử ặ ạ ề

H ng d n:ướ ẫ Vi t l nh thay đ i màu n n thành xanh trong s ki n di chu t ra ngoài.ế ệ ổ ề ự ệ ộ Minh ho :ạ

<HTML>

<HEAD><TITLE>Hi u ng di chuy n chu t Version 2</TITLE>ệ ứ ể ộ

40

http://www.w3schools.com/





<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></HEAD><BODY>

<H2 ID= "LienKet" STYLE="background-color:blue; color:white"onMouseMove = "document.all.LienKet.style.backgroundColor = 'red' "

onMouseOut = "document.all.LienKet.style.backgroundColor = 'blue' ">

Trang d y JavaScript http://www.w3schools.comạ</H2></BODY></HTML>

Bài s 3:ố Minh ho t o m t liên k t hoàn ch nh đ n m t trang webạ ạ ộ ế ỉ ế ộYêu c u:ầ Nh bài s 2 nh ng khi ng i dùng click chu t thì m trangư ố ư ườ ộ ở http://www.w3schools.com. Và chu t có hình bàn tay.ộ

H ng d nướ ẫ : Đ m trang web b t kỳ b n vi t: window.open(‘Đ a ch URL’). L nh mể ở ấ ạ ế ị ỉ ệ ở này đ c đ t trong s ki n Click chu t (Vì theo yêu c u: khi ng i dùng click chu t thìượ ặ ự ệ ộ ầ ườ ộ m i m ).ớ ở

Minh ho :ạ<HTML><HEAD><TITLE>Hi u ng di chuy n chu t Version 2</TITLE>ệ ứ ể ộ<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></HEAD>

<BODY><H2 ID="LienKet" STYLE="background-color:blue; color:white; cursor:hand"

onMouseMove = "document.all.LienKet.style.backgroundColor = 'red';" onMouseOut = "document.all.LienKet.style.backgroundColor = 'blue';" onClick = "window.open('http://www.w3schools.com');" >

Trang d y JavaScript http://www.w3schools.comạ</H2>

</BODY></HTML>

Bài t p t gi i:ậ ự ảBài t gi i 1:ự ả Hãy t o m t menu đ t theo chi u d c g m 4 m c nh sau:ạ ộ ặ ề ọ ồ ụ ư

Gi i thi uớ ệTin t cứ S n ph mả ẩTr giúpợ Yêu c u:ầ 4 m c này có màu n n là xanh, màu ch là vàng (yellow). Khi ng i dùng diụ ề ữ ườ chuy n đ n m c nào thì m c đó có màu n n là màu đ . Khi di chuy n chu t ra kh i thìể ế ụ ụ ề ỏ ể ộ ỏ màu n n tr l i màu xanh.ề ở ạKhi ng i dùng click vào thì m ra trang t ng ng làườ ở ươ ứ http://www.echip.com.vn,http://www.manguon.com, http://www.w3schools.com và http://www.quantrimang.com.G i ý: Làm t ng t nh bài t p m u, nh ng t o ra 4 th H2.ợ ươ ự ư ậ ẫ ư ạ ẻ

41


http://www.echip.com.vn/

http://www.manguon.com/


http://www.quantrimang.com/




http://www.manguon.com/





Bài t p t gi i 2:ậ ự ả Hãy t o m t menu g m 4 m c nh trên nh ng theo chi u ngang,ạ ộ ồ ụ ư ở ư ề H ng d nướ ẫ : N u b n dùng th H2, thì m i m c s t đ ng đ c đ t riêng trên m t dòng.ế ạ ẻ ỗ ụ ẽ ự ộ ượ ặ ộ Đ có th đ t nhi u m c trên cùng m t dòng, b n có th t o m t b ng có m t hàng vàể ể ặ ề ụ ộ ạ ể ạ ộ ả ộ nhi u c t. M i m c bây gi s đ c đ t trong m t th <TD>. Đ thay đ i kích th c,ề ộ ỗ ụ ờ ẽ ượ ặ ộ ẻ ể ổ ướ màu n n, màu ch v.v.. b n cũng s d ng STYLE: <TD style = “color: white” ……ề ữ ạ ử ụHo c cách th hai là b n s d ng th <Span>. Ví d :ặ ứ ạ ử ụ ẻ ụ

<Span style = “color:white; background-color:blue; cursor:hand; font-size:16pt”onClick = “window.open(‘http://www.echip.com.vn’);” >Trang Echip.com

</Span>

Bài s 4:ố Minh ho t o t ng trong IEạ ạ ầT o m t t ng g m có dòng ch “Welcome to LAYER !”, màu đ , kích th c 40pt, fontạ ộ ầ ồ ữ ỏ ướ ch Arial. Toàn b dòng ch này có đ r ng (width) là 300px.ữ ộ ữ ộ ộ

H ng d n:ướ ẫ Vi c t o t ng và đ t các thu c tính có th đ t thông qua đ nh nghĩa STYLE.ệ ạ ầ ặ ộ ể ặ ị Minh ho :ạ

<HTML>

<HEAD><TITLE>T o t ng trong IE</TITLE>ạ ầ<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></HEAD>

<BODY><DIV STYLE="position:absolute; color:red; font-family:arial; font-size:30pt;

top: 50px; left: 50px; width:400px">Welcome to LAYER !

</DIV></body>

</HTML>

Bài s 5:ố Minh ho vi c n và hi n t ng b ng câu l nh JavaScirptạ ệ ẩ ệ ầ ằ ệYêu c u: t o m t dòng chầ ạ ộ ữ “Các liên k t”ế b ng th H2, màu n n là tím (magenta), màuằ ẻ ề ch tr ng (white). Và t o m t t ng có ID = LienKet, Trong t ng có m t b ng g m 2 hàng,ữ ắ ạ ộ ầ ầ ộ ả ồ 1 c t, n i dung c a b ng ch a 2 liên k t (b n có th t o b ng th A HREF) đ n các trangộ ộ ủ ả ứ ế ạ ể ạ ằ ẻ ế http://www.vol.vnn.vn, và http://www.fateback.com, Ban đ u, t ng này n (visible :ầ ầ ẩ ‘hidden’). Khi ng i dùng dùng di chuy n chu t đ n th H2 thì t ng này hi n. Còn khiườ ể ộ ế ẻ ầ ệ ng i dùng click vào m t trong 3 liên k t thì t ng này n.ườ ộ ế ầ ẩ

H ng d n:ướ ẫ Đ n hay hi n t ng b n vi t:ể ẩ ệ ầ ạ ế

42

Top=50

left=50

Width = 400px

http://www.vol.vnn.vn/

http://www.fateback.com/


http://www.vol.vnn.vn/




document.all.LienKet.style.visibility = ‘visible’ (ho c ‘hidden’)ặ Minh ho :ạ

<HTML><HEAD><TITLE>T o t ng trong IE Version 2</TITLE>ạ ầ<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

</HEAD>

<BODY><H2 STYLE="color:white; background-color:magenta; width:200px"

onMouseOver = "document.all.LienKet.style.visibility = 'visible';">Các liên k tế

</H2>

<DIV ID="LienKet" STYLE="position:absolute; font-family:arial; visibility: hidden;background-color:yellow; top: 40px; left: 10px; width:200px; ">

<TABLE BORDER="0"><TR><TD onClick = "document.all.LienKet.style.visibility = 'hidden';" >

<A HREF = "HTTP://www.vol.vnn.vn">Trang đăng ký E-Mail</A></TD>

</TR>

<TR><TD onClick = "document.all.LienKet.style.visibility = 'hidden';">

<A HREF = "HTTP://www.fateback.com">Website mi n phí</A>ễ</TD>

</TR>

</TABLE></DIV></body></HTML>

Bài t p t gi i 3:ậ ự ả T o m t h th ng menu nh trang bên:ạ ộ ệ ố ư <HTML><HEAD><TITLE>T o Menu trong IE - S d ng T NG và JavaScript</TITLE>ạ ử ụ Ầ<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"></HEAD>

ị ớ <STYLE TYPE="TEXT/CSS">

.MenuBar{background-color:blue; color:white; font-family:arial; font-size:16pt;width:150px; cursor:hand} .Menu { background-color: yellow; color: white; position: absolute; top : 40; visibility : hidden}</STYLE><SCRIPT language="JavaScript">

function AnCacMenu() // Hàm n các Menu có tác d ng làm n các t ng m i khi đ c g iẨ ụ ẩ ầ ỗ ượ ọ{

document.all.Menu1.style.visibility = 'hidden';document.all.Menu2.style.visibility = 'hidden';document.all.Menu3.style.visibility = 'hidden';

}</SCRIPT>

ộ ấ ệ ạ ầ ổ ọ ự ệ<BODY onClick = "AnCacMenu()">

ạ ầ ứ ế ủ ụ ế <DIV CLASS="Menu" ID="Menu1" style = "left:10">

<A HREF = "HTTP://www.vol.vnn.vn">Trang đăng ký E-Mail</A> <BR><A HREF = "HTTP://www.fateback.com">Đăng ký Website mi n phí</A>ễ

</DIV>

ạ ầ ứ ế ủ ụ ế <DIV CLASS="Menu" ID="Menu2" style = "left:150;">

<A HREF = "HTTP://www.w3schools.com">Trang d y JavaScript</A> <BR>ạ<A HREF = "HTTP://www.manguon.com">Trang IT Ti ng vi t</A>ế ệ

</DIV>

ạ ầ ứ ế ủ ụ ế <DIV CLASS="Menu" ID="Menu3" style = "left:250">

<A HREF = "HTTP://www.hut.edu.vn">Đ i h c Bách khoa Hà N i</A> <BR>ạ ọ ộ<A HREF = "HTTP://www.ctu.edu.vn">Đ i h c c n th </A>ạ ọ ầ ơ<A HREF = "HTTP://www.vnu.edu.vn">Đ i h c Qu c gia</A>ạ ọ ố

</DIV><span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu1.style.visibility = 'visible'">

Các liên k tế </span><span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu2.style.visibility = 'visible'">

Tin t cứ </SPAN><span CLASS="MenuBar" onMouseMove="AnCacMenu(); document.all.Menu3.style.visibility = 'visible'">

Các ho t đ ngạ ộ</SPAN>

</body></HTML>

Ch ng VI: N i dung đ ng và đ nh v đ ngươ ộ ộ ị ị ộ

M c tiêu c a ch ng này giúp ng i h c có th :ụ ủ ươ ườ ọ ể Thay đ i n i dung c a các th trong trang web thông qua JavaScriptổ ộ ủ ẻ S d ng JavaScript đ di chuy n các t ngử ụ ể ể ầ V n d ng kh năng đ nh v đ ng và n i dung đ ng vào thi t k webậ ụ ả ị ị ộ ộ ộ ế ế

44



C. TÓM T T LÝ THUY TẮ Ế

1. N i dung đ ng là kh năng cho phép thay đ i n i dung c a trang webộ ộ ả ổ ộ ủ b ng các l nh Script.ằ ệĐ thay đ i n i dung c a m t ph n t nào đóể ổ ộ ủ ộ ầ ử trong IE, chúng ta có th thay đ iể ổ

m t trong 4 thu c tính c a nó :ộ ộ ủ• innerText

• innerHTML

• outerText

• outerHTML

Cú pháp dùng đ thay đ i giá tr c a các thu c tính nh sau:ể ổ ị ủ ộ ư document.all.<Giá tr c a thu c tính ID>.<Tên thu c tính> = <Giá tr m i>ị ủ ộ ộ ị ớ

Trong đó <Tên thu c tính là m t trong s 4 thu c tính nêu trên.ộ ộ ố ộ

2. Đ nh v (Thay đ i v trí) các t ng trong IE và Netscapeị ị ổ ị ầL u ý quan tr ng :ư ọ Đ thay đ i v trí c a m t ph n t nào đó trong IE và Netscape,ể ổ ị ủ ộ ầ ử tr c h t b n c n ph i đ t ph n t đó trong m t t ng.ớ ế ạ ầ ả ặ ầ ử ộ ầ

2.1 Thay đ i trong IEổB n c n thay đ i 2 thu c tính c a t ng là pixelLeft và pixelTop.ạ ầ ổ ộ ủ ầ

• Thu c tính pixelLeft qui đ nh di chuy n sang ph i / sang tráiộ ị ể ả• Thu c tính pixelTop qui đ nh di chuy n lên trên / xu ng d iộ ị ể ố ướ

Cú pháp câu l nh đ thay đ i nh sau:ệ ể ổ ư document.all.<Giá tr ID>.style.ị pixelLeft = <V trí c n di chuy n đ n>ị ầ ể ế

document.all.<Giá tr ID>.style.ị pixelTop = <V trí c n di chuy n đ n>ị ầ ể ế2.2 Thay đ i trong NetsapeổTrong Netscape, mu n thay đ i b n cũng ch vi c thay đ i 2 thu c tính là top vàố ổ ạ ỉ ệ ổ ộ left, nh sau:ư

document.<Tên t ng>.top = <V trí c n di chuy n>ầ ị ầ ểdocument.<Tên t ng>.left = <V trí c n di chuy n>ầ ị ầ ể

Trong đó, Tên t ng chính là giá tr c a thu c tínhầ ị ủ ộ name do b n đ t.ạ ặ

45



B. BÀI T P M U Ậ ẪBài s 1:ố Minh ho thay đ i thu c tính innerTextạ ổ ộYêu c u:ầ T o m t dòng ch "I am having fun" thành "This is great fun" khi ng iạ ộ ữ ườ dùng click chu t.ộH ng d n:ướ ẫ B n có th dùng b t kỳ th gì (th H, th P v.v...) đ t o dòng chạ ể ấ ẻ ẻ ẻ ể ạ ữ ở

trên. Do đ u bài yêu c u là ch thay đ i dòng văn b n, do v y chúng ta s thay đ iầ ầ ỉ ổ ả ậ ẽ ổ thu c tính innerText, dòng l nh này s đ t trong s ki n onClick.ộ ệ ẽ ặ ự ệMinh ho :ạ

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>

<h2 id="ID1" onClick="document.all.ID1.innerText='This is great fun'">I am having func</h2></body></html>

Bài s 2:ố Minh ho thay đ i thu c tính innerHTMLạ ổ ộYêu c u:ầ T o m t dòng ch "Click here". Khi ng i dùng click chu t vào thì dòngạ ộ ữ ườ ộ ch đó bi n thành nút có nhãn là "Having fun"ữ ếH ng d n:ướ ẫ

• B n có th s d ng b t kỳ th nào đ hi n th dòng ch "Click here"ạ ể ử ụ ấ ẻ ể ể ị ữ • Trong s ki n click chu t (onMouseMove) b n vi t l nh thay n i dung trongự ệ ộ ạ ế ệ ộ

th b ng n i dung m i (N i dung này là th t o nút).ẻ ằ ộ ớ ộ ẻ ạMinh ho :ạ

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>

<h2 id="ID1" onClick="document.all.ID1.innerHTML='<input type=button value = OK>'">

Click here</h2>

</body></html>

Bài s 3ố : Minh ho thay th thu c tính outerText.ạ ế ộ

Yêu c u:ầ T o m t nút có nhãn là "Open". Khi ng i dùng click vào nút này thì mạ ộ ườ ở trang http://www.echip.com.vn, trong m t c a s m i và dòng nút đó s thay b ngộ ử ổ ớ ẽ ằ dòng ch "Trang này đã m ".ữ ở

H ng d n:ướ ẫ• Đ m m t trang web trong m t c a s m i, b n vi t: window.open("Đ a chể ở ộ ộ ử ổ ớ ạ ế ị ỉ

URL c a trang c n m ", "_Blank")ủ ầ ở• Thay th nút b ng m t dòng ch thông qua thay đ i thu c tính outerText c aế ằ ộ ữ ổ ộ ủ

nút.Minh ho :ạ

46



<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><SCRIPT language="JavaScript">

function ThayDoi(){

window.open("http://www.echip.com.vn","_blank");document.all.Nut1.outerText='"Trang này đã thăm";

}</SCRIPT><body>

<INPUT id="Nut1" type="button" value="Open" onClick="ThayDoi();"></body></html>

Bài s 4:ố Minh ho thay đ i thu c tính outerHTMLạ ổ ộYêu c u:ầ T o m t dòng ch "Click here" có màu xanh, kích c H1. Khi ng i dùngạ ộ ữ ỡ ườ click vào dòng ch này thì thay b ng m t liên k t đ n trang http://www.vn.vnữ ằ ộ ế ếH ng d n:ướ ẫ Do đây khi ng i dùng click vào dòng ch thì thay th b ng m t liênở ườ ữ ế ằ ộ k t nên thu c tính c n thay đ i s là outerHTML. Câu l nh thay đ i s đ c đ tế ộ ầ ổ ẽ ệ ổ ẽ ượ ặ trong s ki n Click chu t.ự ệ ộMinh ho :ạ

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><SCRIPT language="JavaScript"> function ChenLienKet()

{document.all.LienKet.outerHTML='<A HREF = "http://www.vnn.vn">Trang Aptech</A>' ;

}</SCRIPT><body>

<h1 id="LienKet" style="color:blue" onClick="ChenLienKet()">Click Here</h1></body></html>

Bài s 5:ố Minh h a vi c đ nh v đ ng trong IEọ ệ ị ị ộYêu c u:ầ T o m t nút có nhãn là "Sign Up". Khi chu t di chuy n trong nút này thìạ ộ ộ ể hi n th dòng nh c là "Đăng ký hòm th m i" có màu n n là vàng t i v trí c a conể ị ắ ư ớ ề ạ ị ủ chu t. Khi chu t di chuy n ra ngoài thì dòng nh c n đi.ộ ộ ể ắ ẩH ng d n:ướ ẫ B n t o ra m t t ng ch a dòng ch "Đăng ký hòm th m i" có màuạ ạ ộ ầ ứ ữ ư ớ n n là vàng. Khi chu t di chuy n đ n (onMouseMove) thì đ t thu c tính visibility làề ộ ể ế ặ ộ 'visible' đ cho hi n t ng đó và khi di chuy n chu t ra ngoài (onMouseOut) thì đ tể ệ ầ ể ộ ặ l i thu c tính visibility là 'hidden' đ n t ng. L u ý, v trí c a chu t đ c l u trongạ ộ ể ẩ ầ ư ị ủ ộ ượ ư thu c tính event.clientX và event.clientY. B n s gán v trí này c a chu t cho 2ộ ạ ẽ ị ủ ộ thu c tính pixelLeft và pixelTop đ đ nh v t ng.ộ ể ị ị ầMinh ho :ạ

47



<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 khi chu t di chuy n vào trong nútế ả ộ ể

Bài s 6ố : Minh ho n i dung trong Netscapeạ ộYêu c u:ầ T o m t t ng có tên là Tang1, m t nút nh n có nhãn là "N p trang Web"ạ ộ ầ ộ ấ ạ và m t h p text có tên là DiaChi. Khi ng i dùng nh p đ a ch vào trong h p text vàộ ộ ườ ậ ị ỉ ộ

nh n nút "N p trang web" thì 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 và đ t tên cho nó là Tang1ẻ ể ạ ầ ặ- Vi t trong 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 trong Netscape nh sau:ạ ệ ộ ầ ư

document.<Tên t ng>.src = "Đ a ch trang c n n p"ầ ị ỉ ầ ạTrong tr ng h p này s là :ườ ợ ẽ

document.Tang1.src = document.form1.DiaChi.value

Minh ho :ạ

<html><head><TITLE>Hi n th tooltip</TITLE>ể ị

48



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>

<LAYER name="Tang1"><h1> T ng này dùng đ hi n th trang Web b n gõ trong 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. và m t nút nh n có nhãn là "Thay đ i". Khiạ ộ ầ ứ ữ ướ ộ ấ ổ

ng i dùng click vào nút này thì 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 này (Theo 4 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 trong 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 2 t ng trong 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 màn hình, t ng th hai ch y t trên xu ng d i màn hình.ả ầ ứ ạ ừ ố ướG i ý: S d ng 2 hàm setInterval đ g i 2 hàm di chuy n 2 t ng.ợ ử ụ ể ọ ể ầ

Bài s 4:ố T o m t t ng ch a 3 liên k t. Chu t click t i v trí nào thì t ng s đ cạ ộ ầ ứ ế ộ ạ ị ầ ẽ ượ đ t t i v trí đó. G i ý: Vi t l nh trong 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 khi ng i dùng di chuy n chu t đ n m tộ ố ầ ử ầ ạ ế ỗ ườ ể ộ ế ộ ph n t nào đó thì hi n th m t l i chú thích b ng Ti ng vi t. (Xem Bài s 5)ầ ử ể ị ộ ờ ằ ế ệ ố

Bài s 6:ố T o 3 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 và 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 là "Di chuy n". Khiạ ộ ầ ứ ộ ứ ả ộ ể ng i dùng click vào nút này thì b c nh s di chuy n chéo t góc trên bên ph iườ ứ ả ẽ ể ừ ả

xu ng góc d i bên trái c a màn hình.ố ướ ủ G i ý ợ : Tăng d n pixelTop, gi m pixelLeft.ầ ả

Bài s 8:ố Hãy làm h t các bài t p trong sách giáo khoa c a cu n giáo trình HTML,ế ậ ủ ố DHTML & JavaScript.

49

http://www.vnn.vn/


http://www.vnn.vn/

Documents

Bai Tap Javascript 034