TI LIU HTML, DHTML V JAVASCRIPT

HA NOI 9/2008

TI LIU DNH CHO KHA HC

C BN V HTML, JAVASCRIPT, CSS V ASPTi liu ny cha nhng g? Ti liu ny cha mt s bi tp km gii thch ni dung kin thc lin quan n k thut lp trnh Web c bn pha Client, bao gm:

Phn AChng 0: To cc phn t HTML. Chng I: Bi tp c bn v JavaScript. Chng II: S dng cc lp (i tng) x l Chui, Ngy thng, Ton hc. Chng III: X l s kin trong trang HTML vi JavaScript Chng IV: nh dng cc phn t HTML bng CSS Chng V: To v x l cc tng (Layer) Chng VI: Ni dung ng v nh v ng

Ai nn c ti liu ny L Sinh vin, gio vin hoc nhng ngi cn c kin thc v lp trnh Web. Cn c nhng kin thc g trc khi c ti liu ny? Cn c kin thc c bn v lp trnh ni chung. Gio trnh l thuyt HTML, DHTML & JavaScript ca Aptech worldwide Cc trang web nn gh thm www.3schools.com Search vi t kha Java Script tutorial; Java script Introduction

-

-

2

MC LCCh ng 0: T o cc ph n t HTML c b n. ....................................... 4 1. C php chung:.......................................................................................................................4 2. To mt s phn t c bn.....................................................................................................4 Ch ng I: Bi t p c b n v JavaScript .......................................... 6 Ch ng II: S d ng cc l p x l Chu i, Ngy thng, Ton h c. ...... . . . 9 Ch ng III: X l s ki n trong trang HTML v i JavaScript ............... 17 Ch ng IV: nh d ng cc ph n t HTML b ng CSS ......................... 26 Ch ng V: T o v x l cc t ng (Layer) ....................................... 36 Ch ng VI: N i dung ng v nh v ng .................................... 42

3

Chng 0: To cc phn t HTML c bn.Mc tiu: Kt thc chng ny, ngi hc c th To cc phn t HTML c bn bng cch code trc tip Dng Notepad to mt trang web cha cc phn t HTML Ni dung Gii thiu Trong nhiu ng dng web khng phi lc no chng ta cng c th s dng trnh son tho tch hp kiu nh Frontpage hay Dreamweaver thit k giao din, c bit l khi giao din ny c lin quan n yu t lp trnh, khi ngi lp trnh phi to cc phn t HTML hon ton th cng (Code ch khng dng ko th). Do vy, vic hiu c php to cc phn t HTML l v cng quan trng. 1. C php chung: Kt hp c hai cch. Trong : Tn loi phn t HTML Button Text File Hidden Select TextArea CheckBox Thuc tnh Name VALUE MAXLENGTH ReadOnly Disable Cols, Rows Multiple TYPE

Phn gi tr c th t trong cp ngoc kp hoc cp ngoc n hoc khng cn !! Nu t thuc tnh theo cch 2, th c th tham chiu bng sau (gi l theo c php CSS) 2. To mt s phn t c bn To nt nhn To nhp

4

To vng nhp (Textarea) Ni dung ghi ch: To nhp Password To listbox Visual Basic Lp trnh .NET Lp trnh ASP To ComboBox (ch cn b thuc tnh size) Visual Basic Lp trnh .NET Lp trnh ASP To hp kim Visual Basic Active Server Pages To nt Radio

Tn ging nhau th s thuc v cng mt nhm (Groups) Phn t chn File To textbox n (Hidden). To cc phn t v t thuc tnh: + To mt textbox v t thuc tnh font: + To mt textbox v t thuc tnh thng qua phong cch CSS: + To mt nhn c font ch xanh, c hiu ng:

5

Xin cho + To mt nt nhn c mu nn :

Kt qu

Chng I: Bi tp c bn v JavaScriptMc tiu: Kt thc chng ny ngi hc c th: Vit cc cu lnh JavaScript v nhng vo trang web S dng c cc i tng nhp xut Promt, document.write. Truy xut thuc tnh ca cc phn t HTML bng cu lnh JavaScript Vit lnh x l mt s s kin n gin. Ni dung:

6

V d 1: Cho ngi dng nhp vo tn v tui. Hy vit li tn v tui ca ngi ra mn hnh bng hm document.write, trong tn c mu m, tui c gch chn. Gii mu: var Ten, Tuoi; // Khai bo 2 bin lu tn v tui Ten = prompt("Bn hy nhp vo tn ", ""); Tuoi = prompt("Bn hy nhp vo Tui : ", 20); document.write("Cho bn : " + Ten + ""); document.write("
"); // Xung dng document.write("Tui ca bn l : " + Tuoi + ""); V d 2: To mt nt nhn (button) c name l welcome, value l " Welcome ". Mt textbox c tn l msg, value = "Welcome to". Hng dn : S dng phng thc (hm) write ca i tng document to. Gii mu: document.write("Tao Button va Text bang Script
"); document.write("
"); document.write(" "); document.write(""); V d 3: To mt nt nh trong v d 2 v thm chc nng sau: Khi ngi dng click vo nt welcome th hin th thng bo "Welcome to JavaScript !" Hng dn: Dng th to nt nhn v thm thuc tnh onClick = ";" (Trong c th l mt lnh JavaScript bt k, v d lnh document.write, alert, prompt hoc lnh gi hm v.v...) Gii mu:

Lu quan trng: Trong JavaScript, mt hng xu c bao bi cp nhy n hoc nhy kp, v d cc xu: 'nhy n', "nhy kp" l nhng xu hp l, tuy nhin bn vit : 'abc" hay "xyz' l nhng xu khng hp l. Trong trng hp bn mun in chnh bn thn du nhy n hoc nhy kp ra mn hnh th bn t trc n mt k t \, v d bn c th in ra mn hnh dng ch : Women's day ra mn hnh bng hai hm alert v document theo cc cch sau y :

7

alert("Women's day"), alert('Women"s day'); v.v...

document.write('Women\'s

day');

alert("Women\"s

day");

V d 4: Ly (c) gi tr ca mt phn t HTML To 2 phn t nh trong v d 2 bng th HTML, khi ngi dng click chut vo nt Welcome th hin th ni dung cha trong text c tn l msg. Hng dn: ly gi tr ca mt phn t HTML, bn vit .value V d: msg.value cho ta gi tr ca text tn l msg. Gii mu: V d 5: Khai bo hm trong JavaScript v cch lin kt nt nhn vi mt hm To 2 phn t nh v d 2, khi ngi dng nhn nt th gi mt hm c tn l HienThi, hm hin th c chc nng hin th ni dung trong text c tn l msg trn. Hng dn: Trong th to button, bn t thuc tnh onClick = "", trong trng hp ny bn t OnClick = "HienThi()". iu ny c ngha l khi ngi s dng Click chut (OnClick = Click chut) th trnh duyt hy gi hm HienThi(). Cng ging nh trong ngn ng C, Mt hm bt buc phi c cp ngoc n, cho d c tham s hay khng. V d khi gi hm HienThi th bn phi vit l HienThi(). Gii mu: function HienThi() // Khai bo mt hm tn l HienThi { alert(msg.value); // Ly ni dung trong text box v hin th alert("Bn hy nhp vo text v th li !"); } Lu : Trong C, khai bo mt hm thng bn vit, v d: int HienThi() v...v.. Tuy nhin, vi JavaScript c hi khc t cht, thay vo bn vit function HienThi() Cn cc cu lnh khc bn vit tng t nh ngn ng C hc. Cc hm khi khai bo trong JavaScript bt buc phi t trong th ..... .

8

Chng II: S dng cc lp x l Chui, Ngy thng, Ton hc.Mc tiu: Kt thc bi hc ny, ngi hc c th. M t c cng dng ca cc lp x l Chui (String), x l ngy thng (Date) v x l cc hm ton hc Math. S dng c mt s phng thc, thuc tnh c bn ca cc lp ny. Vn dng vit mt s trang web n gin c s dng n 3 lp trn.

Ni dung: Bi tp 1: Minh ho cch khai bo v s dng i tng Date ngy gi ca h thng. Yu cu: Hy hin th ngy v gi ca h thng my tnh khi trang Web c np. Thng tin hin th ra c dng nh sau:

Hm nay l th 2, ngy 13 thng 9 nm 2004

Hng dn: S dng i tng Date v s dng cc hm ly th, ngy, thng, nm in thng tin ra mn hnh. Ch n cc hm tnh thng, ngy trong tun b ht mt n v. Bi tp 2: Minh ho s khai bo v dng i tng Date ly Gi, pht, giy ca h thng Yu cu: Hin th Gi v pht trong thanh tiu ca ca s khi trang Web c np. Hng dn: Gi tr hin th trong thanh tiu ca trang web c lu trong thuc tnh title ca i tng document, do vy hin th thng tin trn thanh tiu , bn cn vit: document.title = . V d, hin th dng ch "Hello Every body !", bn vit: document.title "Hello Every body !" Minh ho: var D = new Date(); document.title = "By gi l: " + D.getHours()+" gi "+ D.getMinutes()+ " pht.";

Bi 3: Vn dng bin i tng Date tnh tui ca mt ngi. Yu cu : Cho ngi dng nhp vo nm sinh ca h, sau hin th tui tng ng. Hng dn: S dng i tng Date ly nm hin ti. Tui s bng nm hin ti tr i nm sinh va nhp vo. Minh ho mu: Tnh tui

9

var D = new Date(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); // Lu nm hin ti vo bin NamSinh = prompt("Bn sinh nm bao nhiu ? : ",""); alert("Tui ca bn by gi l : " + (NamHienTai-NamSinh));

Bi 4: Tng t nh bi 3 nhng Nm sinh nhp vo khng c ln hn nm hin ti. Hng dn: S dng vng lp dowhile yu cu nhp li nu nm sinh > nm hin ti. Minh ho mu: Tinh tuoi var D = new Date(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); //Lu nm hin ti vo bin do { NamSinh = prompt("Bn sinh nm bao nhiu : ",""); } while (parseInt(NamSinh)>NamHienTai); //Nhp li nu Nm sinh>nm hin ti alert("Tui ca bn by gi l : " + (NamHienTai-NamSinh));

Bi 5: Minh ho cch t cc cu lnh JavaScript vo trong cc phn t HTML thc thi khi ngi dng click chut v s dng hm open ca i tng window m trang web. Yu cu: Vit on Script cho ngi dng nhp vo mt s nguyn. Nu ngi dng nhp s 1 th m trang Web http://www.vnn.vn, nu nhp s 2 th m trang http://www.mail.yahoo.com, nu nhp s 3 th m trang http://www.echip.com.vn, cn nu nhp mt s khc vi 1, 2 hay 3 th m trang http://www.google.com. Hng dn: m mt trang Web bt k trong ca s hin hnh bn vit nh sau: window.open("a ch ca trang cn m"). V d : window.open(http://www.vnn.vnn) m trang ch ca VNN trong ca s hin ti. Nh vy, gii quyt yu cu ca bi ton trn , bn cn cho ngi dng nhp vo mt s v s dng cu trc switch kim tra v m trang web tng ng. Minh ho mu: M trang web vi hm open ca i tng window var LuaChon; LuaChon = prompt("Bn hy nhp vo mt 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;

10

case "3" : window.open("http://www.echip.com.vn"); break; default : window.open("http://www.google.com"); }

Bi s 6: Minh ho vic khai bo v s dng bin i tng Array lu tr danh sch v cch s dng cc hm ca i tng Array nh hm sort v vng lp forin Yu cu: Cho ngi dng nhp vo danh sch tn ca mt lp, sau sp xp theo vn Alphabet ri hin th danh sch sp xp ra mn hnh, mi ngi trn mt dng. Hng dn: S dng vng lp for cho php nhp danh sch h tn v Lu danh sch vo mt mng, sau s dng phng thc sort ca i tng mng sp xp, tip theo dng vng lp forin in cc phn t trong danh sch. Minh ho mu: Sp xp mng var SoLuong, x; var DS = new Array(100); // Khai bo mng DS, c th lu ti a l 100 phn t SoLuong = prompt("Bn cn nhp bao nhiu ngi : ", 5); for (i=0; i < SoLuong; i++) { DS[i] = prompt("Nhp vo h tn : ",""); } // Gi hm sort ca i tng mng DS sp xp DS.sort(); //Hin th kt qu sau khi sp (sort) document.write("Danh sch sp xp l "); for (x in DS) /* Nn s dng cu trc for in ny duyt mng */ { document.write( DS[x] ); document.write("
"); // Xung dng } *** Nhn xt: Nu mun sp theo chiu gim dn th sau khi sort bn gi hm reverse.

Bi s 7: Minh ho vic a cc cu lnh JS vo trong mt th khi ngi dng click chut. Yu cu: To mt nt nhn (Button) c name = "DangKy", value = "ng k". Khi ngi dng Click vo nt ny th thng bo l "ng k dch v E-Mail". Hng dn: i vi cc phn t HTML, nh textbox, button, checkbox, Select v.v Cc trnh duyt u cho php ta thc thi mt hoc nhiu cu lnh JavaScript khi ngi s dng click chut ln cc phn t . Vn ch, vit cc cu lnh nh th no ? vit cc cu lnh JavaScript khi ngi dng click chut ln mt phn t no , trong th ca phn t ny, ta vit nh sau: OnClick = "Cc cu lnh JavaScript".

11

"Cc cu lnh JavaScript" y l bt k cu lnh JavaScript no v chng phi c cch nhau bi du chm phy. Ngoi ra, cc cu lnh phi t trong cp du nhy kp (Hoc nhy n). V d mt s cch a cu lnh JavaScript cn thc thi khi ngi dng click chut 1. Onclick = "alert('Hello world';" 2. OnClick = 'document.write("Welcome to JavaScript");' 3. OnClick = "var x,y; x = 10; y = 20; alert('Tng l : ' + (x + y)); " 4. OnClick = "var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);" 5. OnClick = "KiemTra();" Theo v d trn, Khi ngi s dng Click : 1 : Thc hin cu lnh alert('Hello world') 2 : Thc hin cu lnh document.write('Welcome to JavaScript'); 3 : Thc hin NHIU cu lnh JavaScript 4 : Thc hin nhiu cu lnh JavaScript v c li gi n hm KiemTra(Tuoi) 5 : Thc hin cu lnh gi hm KiemTra().Minh ho mu: Minh ho a cu lnh JavaScript vo cc phn t

Bi s 8: Minh ho cch thay i thuc tnh ca mt i tng thng qua vic vit cc cu lnh JavaScript. To mt nt c name = ThayMauNen, value = "Thay i mu nn". Khi ngi dng click chut vo nt ny th thay i mu nn ca trang Web thnh mu "xanh". Hng dn: thay i mu nn ca trang Web thnh mu, ta cn thay i thuc tnh document. bgColor = "blue". (Mu l red, tm : magenta, en: black, trng: white, vng: Yellow, tm nht: lavender). Nh vy, cu lnh ny s c t trong phn onClick nh sau: Thay mau nen bang click chuot Thay i mu nn s dng i tng document

12

Bi s 9: Minh ho vic c gi tr trong phn t text v hin th ra mn hnh Yu cu: To mt hp text c tn l HoTen. Mt nt c tn l HienThi, value = "Hin th". Khi ngi dng click vo nt HienThi th hin th ni dung trong hp text bng hm alert. Hng dn: ly gi tr ca mt phn t HTML no , chng ta vit .value Trong : chnh l gi tr ca thuc tnh name khi bn to th. V d : - Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v Minh ho : c gi tr trong hp text Hy g vn bn vo trong hp text v click vo nt Hin th

Lu : Khi mun ly gi tr ca phn t no bng JavaScript th bn phi t cho n mt ci tn, nh v d trn, ly gi tr trong hp text ta t cho hp text ny tn (name) l HoTen. Bi s 10: Minh ho vic thay i gi tr ca hp textbox Yu cu: To ra ba hp text ln lt tn l SoHang1, SoHang2, KetQua v mt nt c tn l TinhTong, thc hin php tnh tng. Khi ngi dng nhp hai s hng vo hp SoHang1 v SoHang2, sau click vo nt TinhTong th kt qu tng s c lu vo trong hp text KetQua. Hng dn: thay i gi tr mt thuc tnh no ca phn t HTML, bn vit theo cch sau: . = Trong : Tn phn t chnh l gi tr ca thuc tnh name khi bn to th. V d: HoTen.value = "y l vn bn mi", DangKy.value = "Sign Up now", v.v Thay i gi tr ca thuc tnh Hy nhp hai s v click vo nt Tnh tng + =

Lu : - Gi tr lu trong hp text lun l mt xu, do vy thc hin php cng c ng, bn cn phi chuyn gi tr sang dng s bng hm parseFloat (Hoc parseInt) nh trn. - Vic thay i ny c th p dng cho cc phn t khc nh button, checkbox, v.v

13

Bi tp 11: Minh ho vic gi hm khi ngi dng click vo mt nt Yu cu: To ra 4 text c tn ln lt l : MauNen, MauChu, TieuDe, TrangThai v mt nt c tn l ThayDoi, value l "Thay i". Khi ngi dng click vo nt ThayDoi th mu nn, mu ch, tiu ca ti liu v thanh trng thi ca ca s trnh duyt s c thay i bng cc gi tr trong text tng ng Hng dn: Bn hon ton c th vit nhiu cu lnh trong thuc tnh OnClick nh cc v d trc, tuy nhin nu c nhiu lnh th chng trnh trng khng c sng sa cho lm. Khi bn c th nhm cc cu lnh vo trong mt hm v trong thuc tnh OnClick bn ch vic gi hm ny ra. Minh ho mu Thay i thuc tnh ca trang Web function CapNhat( ) { document.title = TieuDe.value; /* Thay i tiu ca trang Web */ document.bgColor = MauNen.value; /* Thay i mu nn ca trang */ document.fgColor = MauChu.value; /* Thay i mu ch ca trang */ window.defaultStatus = TrangThai.value; /* Thay i dng trng thi ca ca s */ } Nhp vo cc gi tr v nhn nt Thay i

Nhn xt: v d trn, khi ngi dng click chut ln nt ThayDoi th hm CapNhat( ) s c gi.

Thanh tiu ca ca s Thanh trng thi ca ca s

14

i tng StringBt k mt bin xu hoc mt hng xu u c coi l mt i tng xu. V d ta c: var s = "Hung Yen-Aptech", "JavaScript" hay var x = new String("Welcome to Aptech") th bin s, x v hng "Hng Yn - Aptech" l cc i tng xu v u c cc phng thc v thuc tnh di y.Tn thuc tnh Thuc tnh length Tn phng thc charAt(n) indexOf(x) lastIndexOf(x) substring(n1, n2) toLowerCase() toUpperCase() big() Phng thc bold() fontcolor(m) fontsize(n) strike() sub() sup() anchor(A) link(A) ngha Cho bit di ca mt xu x ngha Cho ta k t ti v tr: n Cho ta v tr xut hin ca xu s trong xu s. Nu khng thy th v tr tr v l -1. Cho ta v tr cui cng ca xu x trong xu s Ly ra mt xu con trong xu s, ly t v tr n1 n n2 (s k t ly ra l n2-n1 k t) Chuyn xu s thnh ch thng Chuyn xu s thnh ch HOA In to xu s In m xu s In xu s vi mu m. v d mu: "red", "blue" m"magenta" v.v.. In xu s vi kch c font l n In xu s vi ng gch ngang In xu s di dng hin ti In xu s trn dng hin ti To mt im neo, c tn l A, phn hin th l s. To mt lin kt n im neo A, phn hin th l s V d var x = "abc"; alert(x.length); // 3 alert("Aptech".length); // 6 V d alert(s.charAt(0)); //H s.indexOf("Aptech") -> 9 "Hello".indexOf("e") -> 1 "Java".indexOf("C") -> -1 s.lastIndexOf("n") -> 7 "Hello".lastIndexOf("l") -> 3 s.substring(0,3) -> "Hun" s.substring(2,4) -> "ng" "Hello".substring(2,5) ->"llo" s.toLowerCase() -> "hung yen-aptech" "Hello".toLowerCase()->"hello" s.toUpperCase() -> "HUNG YENAPTECH" "Hello".toUpperCase() -> "HELLO" document.write(s.big()) document.write("abc".big()) document.write(s.bold()) document.write("abc".bold()) document.write(s.fontcolor("blue")) document.write("abc".fontcolor("red")) document.write(s.fontsize(30)) document.write("Java".fontsize(20)) document.write(s.strike()) document.write(s.sub()) document.write("H"+"2".sub() +"O")//H2O document.write(s.sub()) document.write("x" + "2".sup());// -> x2 document.write(s.anchor("TOP")) document.write(s.link("#TOP")) document.write("V u trang".link("#TOP"))

i tng MathVi i tng Math, Khi khai bo bin thuc i tng ny, bn khng c vit dng nh : var m = new Math(); Khi mun s dng cc thuc tnh v phng thc ca i tng ny bn gi trc tip cc thuc tnh v phng thc, v d: Math.sin(3.14), Math.PI, Math.abs(x) v.v...Thuc tnh Tn thuc tnh PI E ngha Cho ta hng s PI (tc 3.14159) Cho ta hng s E (= 2.718) V d var BanKinh = 10; alert("Din tch hnh trn l :" + Math.PI * BanKinh*BanKinh); alert("Hng s E l: " + Math.E)

15

SQRT2 SQRT1_2 Tn phng thc abs(x) sin(x), cos(x) sqrt(x) pow(x,y)

Cho ta cn bc 2 ca 2 : (=1.4142) Cho ta (cn bc 2 ca 2) / 2 ngha Cho ta tr tuyt i ca x Tnh sin v cos ca x Tnh cn bc hai ca x Tnh xy Lm trn s x. Nu phn l sau phn thp phn > = 0.5 th b phn thp phn v cng thm 1. Tri li th b phn thp phn nhng v khng cng g Cho ta gi tr ln nht trong hai s a v b Cho ta gi tr nh nht trong hai s a v b Lm trn s x, Nu s x c phn thp phn th phn thp phn b ct i sau cng thm 1 vo x Lm trn s x, nu x c phn l thp phn th b ct i, ch ly phn nguyn.

alert("Cn bc 2 ca 2 = " + Math.SQRT2); alert("Cn bc 2 ca 2 /2 = " + Math.SQRT1_2); V d alert(Math.abs(-19)); // -> 19 alert(Math.abs(-1.5));// -> 1.5 alert("Sin(1.5) = " + Math.sin(1.5)); alert("Cos(0) = " + Math.cos(0)); alert("Cn 16 = " + Math.sqrt(16)); //4 alert("6^2="+ Math.pow(6,2)); //->36 alert("9^0.5="+ Math.pow(9,0.5));//3 alert(Math.round(3.5));//->4 alert(Math.round(3.6));//->4 alert(Math.round(3.49));//->3 var a = 10, b = 100; alert("Max(a,b) = ",Math.max(a,b)); //100 alert(Math.max(-1,2));//->2 var a = 10, b = 100; alert("Min(a,b)=",Math.min(a,b));//10 alert(Math.min(-1,2));//->-1 var x = 1.1, y = 2.5, z = 4.8; alert(Math.ceil(x), Math.ceil(y),Math.ceil(z)); // ->235 var x = 1.1, y = 2.5, z = 4.8; alert(Math.floor(x), Math.floor(y),Math.floor(z)); // ->124

round(x) Phng thc max(a,b) min(a,b)

ceil(x)

floor(x)

i tng Date Khai bo bin thuc i tng Date nh sau: var = new Date(); V d ngy, gi hin ti l th hai 20/12/2004, 6h30' 20'', ta c cc kt qu sau:Tn phng thc getDay() getDate() getMonth() getYear() getHours() getMinutes() getSeconds() ngha Ly th hin ti trong tun (Ch nht ng vi 0, th hai ng vi 1, ..., th 7 ng vi 6) Ly ngy hin ti Ly thng hin ti (0->thng 1, 1-> thng 2) Ly nm hin ti Ly gi hin ti (Tnh theo 24 h) Ly pht hin ti Ly giy hin ti V d var D = new Date(); alert(D.getDay()); //-> 1 alert(D.getDate()); //->20 alert(D.getMonth()); //->11

alert(D.getYear());//->2004 alert(D.getHours());//->6 alert(D.getMinutes());//->30 alert(D.getSeconds());//->20 D.setDate(10); setDate(n) t ngy l n alert(By gi: +D.getDate()); //10 cc phng thc setYear(n), setHours(n) cng lm tng t. Ch , s n phi l s nguyn. v vic set ch lm thay i gi tr ngy, thng nm, gi, pht, giy ... ca i tng Date ch khng lm thay i ngy gi ca h thng my tnh.

16

Chng III: X l s kin trong trang HTML vi JavaScriptMc tiu ca chng: - Gip hc vin nhn bit c khi no s kin xy ra - Vit cc cu lnh JavaScript t vo cc s kin khi n xy ra - Vn dng linh hot vo vit chng trnh Ni dung: 1. Nhc li khi nim s kin (event) S kin l nhng hnh ng do ngi dng hoc h thng gy ra. Cc hnh ng do ngi dng gy ra c th l di chuyn chut, nhn chut, nh chut, nhn phm, nh phm, copy, ko gin ca s, di chuyn ca s v.v... Cc s kin do h thng gy ra c th l np ti liu, ng ca s v.v...Khi s kin xy ra, n s t ng thc thi cc cu lnh JavaScript tng ng vi s kin (nu chng ta nh ngha chng trnh x l s kin tng ng). 2. Bng lit k cc s kin v tn tng ng Mi s kin khi xy ra chng u c mt ci tn v thng bt u bng t on, v d nh onClick, onChange.... c th c m ta nh trong bng di y: Tn S kin Onabort Ch p dng cho phn t Image M t c kch hot khi ngi s dng hu b vic ti mt hnh nh bng cch kch vo mt kt ni hoc nt Stop Khi phn t b mt focus c kch hot khi ngi s dng kch tri chut vo phn t. N c kch hot khi ngi s dng thay i gi tr ca phn t. N c kch hot khi ngi s dng t focus vo mt ca s, khung, hay phn t form N c kch hot khi ti liu c trnh duyt np xong. N c kch hot khi ngi s dng n nt con chut N c kch hot khi ngi s dng di chuyn con tr ra khi mt phn t. N c kch hot khi ngi s dng di chuyn con tr khp mt phn t. N kch hot khi ngi s dng nh nt con chut c n. Khi ngi s dng click vo nt reset form N kch hot khi ngi s dng ko gin ca s hoc mt khung. N c kch hot khi ngi s

Onblur Onclick Onchange Onfocus

Window, frame, all form element Button, radio button, check box, submit button, reset button, link Text field, textarea, select list Window, frame, all form element

Onload

Document, applet, frameset, img, link, object, script, style, window Button, document, link Area, layer, link

Onmousedown Onmouseout

Onmouseover

Area, layer, link

Onmouseup Onreset Onresize onsubmit

Button, document, link Form Window, frame Form

17

dng click vo nt submit ca form. onunload Document, frameset, image, window N c kch hot khi ngi s dng chuyn sang (m) mt trang khc.

Vy p dng tn cc s kin lit k trn nh th no ? Nu bn bit khi no mt s kin xy ra th bn hon c th thc thi cc cu lnh JavaScript tng ng vi s kin . C php khai bo trnh duyt thc thi cc cu lnh JavaScript khi mt s kin xy ra nh sau: a/ Cch 1: Lu : Mt cu lnh JavaScript c th l bt k cu lnh no m bn hc. Cu lnh ny phi c t trong cp nhy kp (hoc cp nhy n). V d1 : V d 2: V d 3: Hello ! V d 4: Ta hy i phn tch v d 1. Trong v d ny ta to ra mt textbox v vit (khai bo) s kin click nh sau : onClick = "alert('Bn click vo textbox');" y c 2 phn: - Phn onClick : l tn ca s kin click chut (xin tham kho bng trn). - Phn th 2 sau du =, l mt cu lnh JavaScript tng ng s c thc thi khi s kin click chut xy ra i vi textbox . y l cu lnh alert. iu ny c ngha l, bt c khi no ngi dng click chut vo textbox ny th trnh duyt s t ng thc thi cu lnh alert('Bn click vo textbox');

Kt lun: Nu chng ta mun trnh duyt thc thi mt cu lnh no khi mt s kin xy ra th cn khai bo trong phn nh ngha th nh sau: = "" Tng t trong v d 2: Bt c khi no ngi dng di chuyn chut trong textbox (tn s kin l onMouseMove) th lnh "alert('Bn di chut');" s c thc thi. Trong v d 3: Bt c khi no bn click chut vo dng ch "Hello !" th thanh trng thi ca ca s s c dng ch : "Vn bn b click chut" Trong v d 4: Theo bn, thng bo " c gi" khi no th xut hin !? b/ Cch 2: Bn c th khng ch vit mt cu lnh khi mt s kin xy ra i vi mt phn t no m JavaScript cn cho php bn thc thi nhiu cu lnh ng thi, vi iu kin cc cu lnh ny phi c phn cch nhau bi du chm phy ";". C php vit nh sau: V d 1: Trong v d ny, ta to mt textbox v khi ngi dng click chut vo textbox ny th trnh duyt s thc thi 2 cu lnh tng ng nh ta ch ra trong th : window.status='Click chut' v alert('Bn click chut'). 2 lnh ny c phn cch nhau bi du chm phy.

18

V d 2: Trong v d ny ta cng to ra mt textbox v khi textbox ny nhn c focus (click chut) th trnh duyt s t ng thc thi 3 cu lnh : Hoten.value=' ' window.status='H tn nhn focus' window.document.title = 'Ni dung trong textbox b xo' Nhn xt: Nu s cu lnh cn thc thi khi mt s kin xy ra l t (Mt hoc hai cu lnh) th ta c th khai bo on chng trnh x l s kin s dng theo cch 1 hoc cch 2. Cn trong trng hp s cu lnh cn x l l ln, th cch nn s dng cch khc m ta s cp di y. C/ Cch 3: Gi mt hm khi mt s kin xy ra. V bn cht cch ny chnh l cch mt, c iu cu lnh l mt li gi hm. Cch ny thng c s dng khi : S lnh cn thc thi khi mt s kin xy ra l ln m bo cho chng trnh sng sa v d c, d qun l v bo tr C php khai bo hm trong nh ngha s kin nh sau: V d: 1/ 2/ 3/ Trong , Ham1(), GuiThongTin() v KiemTra() l cc hm. Tm li: Tu vo trng hp c th m khi mt s kin xy ra, bn c th vit mt lnh, nhiu lnh hoc mt hm tng ng s c thc thi trong nh ngha th. Tuy nhin, mt qui tc chung l: Nu on chng trnh x l s kin ch c mt lnh th nn vit theo cch a, cn tri li th nn vit cc lnh trong mt hm (tc theo cch vit b). 3. Mt s bi tp minh ho V d 1: Hy to mt nt nhn (button) c value = "Th". Khi ngi dng click vo nt ny th tiu ca ca s s l "Bn click chut" Hng dn: Trc ht ta cn xc nh xem cc lnh no cho php ta thay i tiu ca ca s thnh "Bn click chut", tip theo l t cc lnh vo u khi ngi dng click chut th n c thc thi theo nh yu cu bi ton Lnh thay i tiu nh sau: document.title = "Bn click chut" Nh ta bit khi ngi dng click th s kin onClick xut hin, do vy cu lnh trn s c t tng ng vo s kin onClick, nh sau: Hay click vao nut o duoi va quan sat tieu de V d 2: To mt trang Web, c 2 phn t : Phn t button c value = "Gi", v mt phn t textbox.Yu cu: khi ngi dng click vo nt Gi th thng bo trn mn hnh l : "Bn click vo nt gi" cn khi ngi dng click vo textbox th thng bo l "Bn click vo textbox". Hng dn: Theo yu cu ca bi th dng thng bo "Bn click chut vo nt gi" xut hin ch khi ngi dng click chut vo nt gi, do vy cc lnh thc hin hin th thng bo s c t trong s kin onclick ca nt nhn. Cn dng thng bo "Bn click chut vo text box" khi ngi dng click chut vo textbox, do vy cc lnh thc hin hin th dng thng bo s c t trong s kin onclick ca textbox :

19

Minh ho: Hay click vao nut va textbox o duoi va quan sat tieu de V d 3: To 2 nt, nt th nht c value = "Xanh", nt th hai c value = "". Yu cu: Khi ngi dng click vo nt xanh th mu nn ca ti liu l xanh (blue), cn khi ngi dng click vo nt th mu nn ca ti liu l: (red). Hng dn: Thuc tnh mu nn ca ti liu c lu trong thuc tnh bgColor ca i tng document. Thuc tnh ny c th thay i c. Minh ho: V d 4: To mt danh sch la chn gm c 4 mu: red, blue, brown v lavender. Khi ngi dng chn mt mu th mu nn ca ti liu s thay i tng ng. Hng dn: thay i mu nn ca ti liu ta lm tng t nh v d 3 Minh ho: function DoiMau() { document.bgColor = Mau.value; // Hoc vit: window.document.bgColor = Mau.value; } Bn hy chn mu nn: Mu Mu xanh Mu nu Mu xanh nht V d 5 : To mt textarea c tn l NoiDung, mt Textbox c tn l : SoKyTu. Vi yu cu nh sau: Khi ngi s dng g cc phm vo trong textarea th s lng k t ( di xu) cha trong textarea s c hin th trong textbox. Nu s lng k t trong textarea g vo vt qu 200 k t th thng bo : "Bn g qu s k t cho php !".

20

function KiemTra() { if (NoiDung.value.length > 200) alert("Bn g qa s k t cho php !"); SoKyTu.value = NoiDung.value.length; // Hin th s k t trong textbox SoKyTu } S k t g :
v d trn: Hm kim tra s c gi mi khi s kin nhn phm (onKeyUp) xut hin hay ni cch khc l khi ngi dng g thm mt k t vo trong textarea. y ta khng t hm kim tra vo trong s kin onClick; Mn hnh cho v d ny c dng nh sau:

V d 6: To mt nt c value = "Gi", textbox c name = "HoTen", 2 nt radio c tn l GioiTinh v nhn tng ng l Nam, n. Yu cu: Khi ngi dng di chuyn chut vo phn t no th hin th thng bo tng ng di thanh trng thi. V d nu ngi s dng di chuyn chut qua nt nhn "Gi" th thanh trng thi s l "Bn ang di chuyn chut vo nt"... Hng dn: Khi ngi dng di chuyn chut th s kin di chuyn chut s xut hin, s kin ny c tn l : onMoseMove. Vy ta s vit lnh trong s kin ny. Minh ho: mn hnh

21

Xu ly su kien
Nam N V d 7: To 3 textbox, c tn ln lt l: SoLuong (S lng), DonGia (n gi) v ThanhTien (Thnh tin); Yu cu: Khi ngi dng nhp gi tr trong DonGia th kt qu s c cp nht ngay trong ThanhTien. Hng dn: Khi ngi dng nhp gi tr trong textbox DonGia bng cch nhn cc phm s th s kin nhn phm xut hin (s kin nhn phm c tn l onKeyUp), do vy ta s vit cc lnh p ng vi s kin ny. Cc lnh y ch c mt do vy nn t ngay trong nh ngha th, nh sau: Tinh tich Bn hy nhp vo s lng v gi: S lng: n gi: Thnh tin: USD

22

V d 8: Tng t nh v d 7, nhng vit theo cch khai bo 3 (Cc lnh vit trong hm). Kt qu vn cho ta nh v d 7 Tinh tich function TinhToan() { ThanhTien.value=SoLuong.value*DonGia.value ; // Hoc bn vit y l: // window.ThanhTien.value = window.SoLuong.value*window.DonGia.value } Bn hy nhp vo s lng v gi: S lng: n gi: Thnh tin: USD

23

V d 9: To ra mt trang Web ng nhp vo trang Vinaphone cho php ngi gi tin nhn n in thoi di ng. hng dn: ng nhp vo mt trang Web no , nhng thng tin bt buc thng l UserName v password (mt khu). Tuy nhin, ngoi nhng thng tin bt buc chng ta cn phi gi cc thng tin ph. Nhng thng tin ph ny ngi dng ngi dng khng phi nhp. (cc thng tin ph di y s c gch chn) Minh ho:

Dang nhap vao trang http://sms.vinaphone.vnn.vn ng nhp vo trang Web ca vinaphone User Name Password

24

Cc th c thuc tnh type = "hidden" s khng c hin th trong trnh duyt, tuy nhin khi chng ta "Submit" th cc thng tin trong cng c gi i.

Cc bi tp t giiBi 1: Hy to ra trang Web c giao din nh sau:

Yu cu: Khi ngi dng di chuyn chut n phn t no th hin th dng nhc di thanh trng thi hng dn ngi dng. V d: Khi ngi dng a chut vo trong textbox User Name

25

th th hin th di thanh trng thi l :"Nhp m ngi dng", hay khi ngi a chut n nt "ng k" th hin th dng nhc: "Gi thng tin i ng k" v.v... Hng dn: Nt ng k nn l nt thng, tc l to bng th : Bi tp 2: C giao din nh bi 1, nhng yu cu nh sau: Khi gi thng tin i, cn kim tra xem ni dung ngi dng g trong Password vi textbox trong "G li password" c ging nhau hay khng? Nu bng nhau th mi gi (Submit) i, cn nu khng bng th thng bo l "Password phi ging nhau" Khi gi thng tin, cn kim tra ngy sinh, thng sinh phi hp l. (Tc ngy phi nh hn 32, thng phi nh hn 13) Hng dn: Nt ng k nn l nt thng, tc l to bng th : Trong Hm DangKy() s kim tra d liu hp l v khi d liu nhp vo ng n th gi i bng cch gi phng thc submit ca i tng document, nh sau: document.submit(); Bi tp 3: Lm tng t bi tp 7 v 8, nhng thm yu cu: Khi ngi dng nhp hoc s lng, hoc n gi th hy tnh lun textbox thnh tin. Hng dn: Vit lnh tnh thnh tin trong c 2 s kin onKeyUp ca c hai textbox s lng v textbox n gi. *** Lu : Trc khi tnh tch th cn phi kim tra xem d liu trong hai textbox c hay cha, nu mt cha nhp g th cha tnh.

Chng IV: nh dng cc phn t HTML bng CSSMc tiu ca chng: - Gip hc vin hiu r hn v ngha ca vic dng kiu (style) - Tra cu thnh tho cc thuc tnh trong bng dnh sch kiu - Vn dng cc thuc tnh (kiu) nh dng cho cc phn t trong trang web, nng cao tnh thm m. Ni dung: I. Nhc li khi nim v kiu Kiu (style) thc cht l mt cch nh ngha thuc tnh cho cc phn t trong trang web theo mt cch thc mi. Vic nh ngha cc thuc tnh ny cho cc phn t s cho ta mt "dng v mi", mt "din mo mi" v trang web. Ngoi ra, vic nh ngha thuc tnh theo c php mi ny s lm tin cho vic xy dng cc trang web ng m ta s cp trong cc chng tip theo. V d: Trc y, nh ngha mt on vn bn nm trong th c font ch l .vntime, chng ta s vit nh sau: Dng vn bn ny c font ch l .vntime Nhng vi cch nh dng mi theo c php m ta gi l c php CSS, th c th thc hin yu cu trn nh sau: Dng vn bn ny c font ch l .vntime II. Minh ho cch khai bo style Trong JavaScript, bn c th thit lp cc thuc tnh cho mt th no theo rt nhiu cch. Di y xin gii thiu 3 cch thit lp thuc tnh cho th, l : Thit lp (nh ngha) thuc tnh ngay trong khi nh ngha th (tag), kiu ny cn gi l nh ngha kiu mc dng (style line)

26

Thit lp thuc tnh cho ton b mt loi th no . Cch ny cn gi l nh ngha b chn nh ngha mt lp, sau c th em ra s dng cho bt k phn t no nh ngha b chn ID, cho php p dng tt c cc thuc tnh ca b chn vo tt c cc th c thuc tnh ID ph hp vi m ID trong nh ngha.

I. Style p dng mc dng (Inline style)Style mc dng (inline style) cho php bn c th thay i hnh thc (style) ca mt phn t no bng cch thm cc thuc tnh nh dng trc tip vo ngay bn trong nh ngha ca th. Mt s v d minh ho V d 1: to mt dng vn bn vi th ; c mu ch l , bn c th vit nh sau: Mu ny l mu ca ho bnh . Kt qu cho ta : Mu ny l mu ca ho bnh V d 2 : to mt mt button (Nt nhn) c mu nn l tm (magenta), bn vit:

Kt qu : V d 3: To mt nt nhn (Button), trong , khi ngi dng a chut n nt th con tr chut c hnh bn tay Thuc tnh qui nh chut c kiu hnh bn tay l "cursor:hand", do vy cn thm thuc tnh ny trong nh ngha th Ta c kt qu (Bn di chut vo nt ny): V d 4 : To mt textbox c vin mu Thuc tnh to vin mu l : "background-border:red", do vy bn cn t vo trong nh ngha th text nh sau: Kt qu cho ta mt textbox c vin mu : Nhn xt : Trong cc v d trn, chng ta c th thit lp mt s thuc tnh ca bt k phn t no bng cch a vo dng style = "Tn thuc tnh:Gi tr ca thuc tnh" Trong , Cp tn thuc tnh : Gi tr ca thuc tnh cc bn c th tra trong bng cc thuc tnh. c t trn th mc ca my ch. C th a vo mt hoc nhiu thuc tnh trong biu thc style="...." , khi a nhiu thuc tnh th cc thuc tnh cch nhau bi du chm phy ";" V d 5: To mt nt nhn c mu nn l tm (magenta) v mu ch l trng (white) Thuc tnh qui nh mu nn tm l :"background-color:magenta", Cn thuc tnh qui nh mu ch trng l "color:white" Nh vy cn nh ngha th l : Kt qu : V d 6: Thit lp nh nn ca trang Web l anh1.jpg, v nh ny hin th v tr c nh (Tc l nu bn c cun thanh cun ca ca s th nh ny s khng b cun theo m vn ng yn). 27

Bit rng thuc tnh a nh nn vo trang web nh sau: background-image:url( ' ') Thuc tnh nh v tr c nh l : background-attachment:fixed Lu : c tnh nh c nh ch c trong IE, khng c trong Nescape Nh vy, yu cu trn c th thc hin nh sau: (Bn phi m bo l m trong trnh duyt IE) V d 7: To cc lin kt n cc trang http://www.aptech.ute, http://www.vnn.vn, nhng cc lin kt ny khng c ng gch chn v c cc thuc tnh nh sau: - Mu ch : (red) - Mu nn : lavender - Mu khi chut click vo lin kt : tm (magenta) - Mu khi trang c thm : nu (brown) Hng dn: - Thuc tnh qui nh mu ch ca lin kt l: linkColor, thuc i tng document - Thuc tnh qui nh mu nn ca vn bn trong mt th : background-color (CSS) - Thuc tnh qui nh ca lin kt khi b click chut : alinkColor, thuc document - Thuc tnh qui nh mu ca lin kt c thm: vlinkColor, thuc document Minh ho (Son trong Dreamweaver):

nh ngha style mc dng

28

III. B chn HTMLB chn HTML cho php chng ta ch cn nh ngha cc thuc tnh mt ln duy nht cho mt loi th HTML no (V d P, INPUT, H1, H2 ....), v v sau tt c cc vn bn nm trong loi th ny s c cng nh dng nh nhau. iu ny rt c li cho ta trong thc t, chng hn khi bn to mt website cho mt cun sch no m trong cun sch ny li c rt nhiu chng v bn mun mu sc, kch c, font ch, kiu dng... cho tiu cc chng l nh nhau, th bn ch cn nh ngha mt ln v v sau tiu cc chng s c cng nh dng ging nh nhau. Vic chng ta to ra cc tnh cht chung cho mt loi th no th ta gi l mt b chn (Selector) HTML nh ngha ra mt b chn HTML, ta c 2 cch, bn c th tu chn mt trong 2 cch ny. Cch th nht l ta vit theo mt dng c php m ta gi l c php dng CSS, dng th hai l ta vit theo c php ca JavaScript. C php to b chn theo CSS nh sau: { : } { : } { : } ........................ Trong : -

-

l mt trong cc th m bn hc, v d n c th l th P, INPUT, LI, UL, B, H1, H2 v.v... Tn thuc tnh : L tn ca thuc tnh ca loi th m bn mun thay i . N c th l color, background-color, cursor, text-align v.v... Tn cc thuc tnh ny cc bn c th tra trong bng (File Cac the su dung trong CSS.doc" nm trong th mc ti liu v JavaScript ca my Server) Gi tr: L gi tr mi m bn mun t cho thuc tnh. V d, "red", "lavender", "hand", "center" v.v.... c th t gi tr cho hp l, bn tham kho trong file: Cac the su dung trong CSS.doc" trong server.

Sau khi nh ngha tn ca mt loi th vi cc thuc tnh ca n, th tt c cc th cng loi v sau s c tt c cc thuc tnh nh nh ngha. lm sng t iu ny, chng ta hy ly mt s v d : V d 1: Gi s bn cn to mt danh mc cc u sch ca Aptech, theo nh dng di y

KNOW YOUR DESKTOP Office 200029

Access 2000 Logic Building with C HTML, DHTML and JavaScript Dream WeaverMt cch thng thng nht, vi cc kin thc nhng phn trc, bn hon ton c th to c bng cch vit nh sau : Tuy nhin nu theo cch trn th chng ta d dng thy c mt im cha c thun tin, l mi khi thm tn mt loi sch chng ta cn phi thm trong th P dng: Xem kt qu

Ghi ch: Khi mun p dng cc kiu cho mt s phn t cc bn ch cn vit : style="Tn_Thuc_tnh : Gi_Tr;" trong nh ngha th. Trong cp "Tn_Thuc_tnh : Gi_Tr;" c th vit nh ct v d ch ra cc bng trn.

35

Ni dung trang Web ca chng ta by gi s l: Su dung bo chon P {font-family:.vntimeH; font-size:20pt; color:red} Know Your desktop Office 2000 Access 2000 Logic Building with C HTML, DHTML and JavaScript Dream Weaver

Chng V: To v x l cc tng (Layer) Mc tiu ca chng ny gip ngi hc c th: Thay i thuc tnh ca mt phn t HTML khi c cc s kin chut v bn phm xy ra. nh ngha cc tng (Layer) trong IE v Netscape. n, hin tng bng cc lnh JavaScript To mt menu lin kt n cc trang khc s dng tng.A. TM TT L THUYT

1. Mt s s kin thng dng:- S kin Click chut (onClick) c kch hot khi chut c click - S kin di chuyn chut vo bn trong phn t (onMouseOver) c kch hot khi chut di chuyn chut t ngoi vo trong phn t. - S kin di chut ra ngoi (onMouseOut) c kch hot khi di chuyn chut t bn trong phn t ra khi phn t. - S kin nhn phm (onKeyUp) c kch hot khi ngi dng nhn mt phm.

2. Thay i thuc tnh ca cc phn t HTML thay i thuc tnh ca mt phn t HTML no trong trang bng lnh JavaScript, bn vit nh sau: document.all..style. = Trong : chnh l gi tr m bn t cho thuc tnh ID, v d: THAY I THUC TNH CA TH th trong trng hp ny s l TieuDe. l tn thuc tnh cn thay i. Bn c th tra trong ti liu c gio vin pht: Danh sch cc thuc tnh. V d : text-align, font-size, color v.v

36

l nhng gi tr hp l cho thuc tnh cn thay i. (Bn cng tra trong ti liu Danh sch cc thuc tnh).

** Lu : Nu bn mun thay i thuc tnh ca mt phn t th bt buc bn phi gn cho th mt gi tr ID duy nht (Nh v d trn).

3. nh ngha tng trong IE v Netscapea. nh ngha tng trong IE nh ngha tng trong IE, bn ch cn t thuc tnh position cho style. V d: Th H2 ny c t trn mt tng Tuy nhin, vi cch nh ngha trn th mi tng ch cha c mt phn t. Nu bn mun mt tng cha c nhiu hn mt phn t th bn nh ngha tng bng cp th hoc nh sau: Phn t ny nm trn tng 1 Trang ch ca bo E-Chip Mi tng khi to ra, bn nn gn thuc tnh ID cho tng mt gi tr duy nht (Khng trng vi ID ca bt k th no trong trang). Bn hon ton c th thc hin cc thao tc i vi tng nh : n tng, v d : document.all.Tang1.style.visibility = hidden Hin tng, v d : document.all.Tang1.style.visibility = visible Di chuyn tng sang tri 5 pixel, v d: document.all.Tang1.style.pixelLeft -= 5 Di chuyn tng sang phi 5 pixel, v d: document.all.Tang1.style.pixelLeft += 5 Di chuyn tng ln trn 5 pixel, v d: document.all.Tang1.style.pixelTop -= 5 Di chuyn tng xung di 5 pixel, v d: document.all.Tang1.style.pixelTop+=5 b. nh ngha tng trong Netscape Trong Netscape, vic nh ngha (to ra) tng c phn d dng hn vi th LAYER : Phn t ny nm trn tng 1 Trang cha nhiu mo vt v IT n / hin tng c to bi th LAYER thng qua lnh JavaScript, bn vit : o document..visibility = 'hidden' ( n tng) o document..visibility = 'show' ( hin tng) Trong : chnh l gi tr ca thuc tnh name. **Lu : truy cp n mt tng, trong IE s dng gi tr ca thuc tnh ID, trong khi Netscape s dng gi tr ca thuc tnh name. V d : document.Tang1.visibility = 'hidden' n tng c tn l Tang1 to ra trn. di chuyn tng bng JavaScript, bn vit:

37

o document..left = (Di chuyn sang tri hoc phi) o document..top = (Di chuyn ln | xung) Trong : m di chuyn li, gi tr dng di chuyn tin. V d di chuyn tng ln trn thm 10 pixel o document.Tang1.top -= 10 V d di chuyn tng sang phi thm 10 pixel o document.Tang1.left += 10 V d, di chuyn tng n v tr cch mp trn ca s trnh duyt 100px, v cch mp tri 50 pixel. o document.Tang1.top = 100 o document.Tang1.left = 50

B. BI TP MUBi s 1: Minh ho s kin di chuyn chut vo phn t. Yu cu: To mt lin kt n trang http://www.w3schools.com bng th H2. C mu nn l xanh, mu ch l trng. Khi chut di chuyn n th i mu nn thnh mu . Hng dn: i mu nn thnh i vi th H2 (hoc th bt k) bn vit: document.all.LienKet.style.backgroundColor = red Trong LienKet l gi tr ca thuc tnh ID . Cu lnh JavaScript ny t u ? Theo nh yu cu u bi l : Khi chut di chuyn . Do vy cu lnh ny s c t trong s kin di chuyn chut n (c tn l onMouseMove) Minh ho: Hiu ng di chuyn chut Trang dy JavaScript http://www.w3schools.com

Nhc li: Cc thuc tnh trong bng tra cu danh sch thuc tnh nu c cha du gch ni (v d : background-color) th khi vit trong JavaScript, bn phi chuyn k t ng ngay sau du gch ni thnh ch hoa v b du gch ni i. (V d t background-color backgroundColor) Bi s 2: Minh ho s kin di chuyn chut vo v ra khi mt phn t. Yu cu: Nh bi tp 1, v thm yu cu sau: Khi ngi dng di chuyn chut ra khi phn t H2 th t li mu nn l mu xanh. Hng dn: Vit lnh thay i mu nn thnh xanh trong s kin di chut ra ngoi. Minh ho: Hiu ng di chuyn chut Version 2 38

Trang dy JavaScript http://www.w3schools.com Bi s 3: Minh ho to mt lin kt hon chnh n mt trang web Yu cu: Nh bi s 2 nhng khi ngi dng click chut th m trang http://www.w3schools.com. V chut c hnh bn tay. Hng dn: m trang web bt k bn vit: window.open(a ch URL). Lnh m ny c t trong s kin Click chut (V theo yu cu: khi ngi dng click chut th mi m). Minh ho: Hiu ng di chuyn chut Version 2 Trang dy JavaScript http://www.w3schools.com

Bi tp t gii:Bi t gii 1: Hy to mt menu t theo chiu dc gm 4 mc nh sau: Gii thiu Tin tc Sn phm Tr gip Yu cu: 4 mc ny c mu nn l xanh, mu ch l vng (yellow). Khi ngi dng di chuyn n mc no th mc c mu nn l mu . Khi di chuyn chut ra khi th mu nn tr li mu xanh. Khi ngi dng click vo th m ra trang tng ng l http://www.echip.com.vn, http://www.manguon.com, http://www.w3schools.com v http://www.quantrimang.com. Gi : Lm tng t nh bi tp mu, nhng to ra 4 th H2.

39

Bi tp t gii 2: Hy to mt menu gm 4 mc nh trn nhng theo chiu ngang, Hng dn: Nu bn dng th H2, th mi mc s t ng c t ring trn mt dng. c th t nhiu mc trn cng mt dng, bn c th to mt bng c mt hng v nhiu ct. Mi mc by gi s c t trong mt th . thay i kch thc, mu nn, mu ch v.v.. bn cng s dng STYLE: Trang ng k E-Mail
ng k Website min ph Trang dy JavaScript
Trang IT Ting vit i hc Bch khoa H Ni
i hc cn th i hc Quc gia

Cc lin kt

Tin tc

Cc hot ng

Chng VI: Ni dung ng v nh v ng Mc tiu ca chng ny gip ngi hc c th:

Thay i ni dung ca cc th trong trang web thng qua JavaScript S dng JavaScript di chuyn cc tng Vn dng kh nng nh v ng v ni dung ng vo thit k web

42

C. TM TT L THUYT

1. Ni dung ng l kh nng cho php thay i ni dung ca trang web bng cc lnh Script. thay i ni dung ca mt phn t no trong IE, chng ta c th thay i mt trong 4 thuc tnh ca n : innerText innerHTML outerText outerHTML C php dng thay i gi tr ca cc thuc tnh nh sau: document.all.. = Trong

Click here

Bi s 3: Minh ho thay th thuc tnh outerText.Yu cu: To mt nt c nhn l "Open". Khi ngi dng click vo nt ny th m trang http://www.echip.com.vn, trong mt ca s mi v dng nt s thay bng dng ch "Trang ny m". Hng dn: m mt trang web trong mt ca s mi, bn vit: window.open("a ch URL ca trang cn m", "_Blank") Thay th nt bng mt dng ch thng qua thay i thuc tnh outerText ca nt. Minh ho:

44

function ThayDoi() { window.open("http://www.echip.com.vn","_blank"); document.all.Nut1.outerText='"Trang ny thm"; }

Bi s 4: Minh ho thay i thuc tnh outerHTMLYu cu: To mt dng ch "Click here" c mu xanh, kch c H1. Khi ngi dng click vo dng ch ny th thay bng mt lin kt n trang http://www.vn.vn Hng dn: Do y khi ngi dng click vo dng ch th thay th bng mt lin kt nn thuc tnh cn thay i s l outerHTML. Cu lnh thay i s c t trong s kin Click chut. Minh ho: function ChenLienKet() { document.all.LienKet.outerHTML='Trang Aptech' ; } Click Here

Bi s 5: Minh ha vic nh v ng trong IEYu cu: To mt nt c nhn l "Sign Up". Khi chut di chuyn trong nt ny th hin th dng nhc l "ng k hm th mi" c mu nn l vng ti v tr ca con chut. Khi chut di chuyn ra ngoi th dng nhc n i. Hng dn: Bn to ra mt tng cha dng ch "ng k hm th mi" c mu nn l vng. Khi chut di chuyn n (onMouseMove) th t thuc tnh visibility l 'visible' cho hin tng v khi di chuyn chut ra ngoi (onMouseOut) th t li thuc tnh visibility l 'hidden' n tng. Lu , v tr ca chut c lu trong thuc tnh event.clientX v event.clientY. Bn s gn v tr ny ca chut cho 2 thuc tnh pixelLeft v pixelTop nh v tng. Minh ho:

45

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 Tng Tang1 { document.all.Tang1.style.visibility = 'hidden'; } ng k hm th mi

Kt qu khi chut di chuyn vo trong ntBi s 6: Minh ho ni dung trong Netscape Yu cu: To mt tng c tn l Tang1, mt nt nhn c nhn l "Np trang Web" v mt hp text c tn l DiaChi. Khi ngi dng nhp a ch vo trong hp text v nhn nt "Np trang web" th ni dung ca trang s c np vo tng Tang1. Hng dn: - Dng th LAYER to tng v t tn cho n l Tang1 - Vit trong s kin onCLick ca nt "Np trang web" cu lnh np ti liu vo tng. C php np ti liu vo mt tng trong Netscape nh sau: document..src = "a ch trang cn np" Trong trng hp ny s l : document.Tang1.src = document.form1.DiaChi.value Minh ho: Hin th tooltip

46

Tng ny dng hin th trang Web bn g trong hpText !

C. BI TP T GII

Bi s 1:To mt tng c cha dng ch "Hello", kch thc H1. v mt nt nhn c nhn l "Thay i". Khi ngi dng click vo nt ny th yu cu ngi dng nhp vo mt xu, sau thay ni dung trong th H1 bng xu nhp vo ny (Theo 4 cch: thay thuc tnh innerText, innerHTML, outerText, outerHTML).

Bi s 2:To mt th H1, mu ch xanh dng hin th thi gian ca h thng (gm gi:pht:giy).

Gi : Vit hm CapNhat ly gi:pht:Giy trong my tnh sau gn cho thuc tnh innerText ca th H1. S dng hm setInterval("CapNhat();", 1000) lin tc cp nht thi gian theo tng giy. Bi s 3: To 2 tng trong IE, mi tng cha mt bc nh. Tng th nht chy t tri sang phi mn hnh, tng th hai chy t trn xung di mn hnh.Gi : S dng 2 hm setInterval gi 2 hm di chuyn 2 tng.

Bi s 4: To mt tng cha 3 lin kt. Chut click ti v tr no th tng s c t ti v tr . Gi : Vit lnh trong s kin onClick ca th BODY. Bi s 5: To mt form ng k E-Mail tng t nh ca Yahoo (Bn ch cn to mt s phn t, khng cn to ht). Mi khi ngi dng di chuyn chut n mt phn t no th hin th mt li ch thch bng Ting vit. (Xem Bi s 5) Bi s 6: To 3 tng (Trong Netscape), mi tng np mt trang tng ng nh sau: http://www.vnn.vn, http://www.echip.com.vn v http://www.manguon.com. Bi s 7: To mt tng cha mt bc nh, mt nt c nhn l "Di chuyn". Khi ngi dng click vo nt ny th bc nh s di chuyn cho t gc trn bn phi xung gc di bn tri ca mn hnh. Gi : Tng dn pixelTop, gim pixelLeft. Bi s 8: Hy lm ht cc bi tp trong sch gio khoa ca cun gio trnh HTML, DHTML & JavaScript.

47