03 - Noi Dung Web - Phan 2 - DOM - Javascript

Bi ging
LP TRNH WEB
L nh Thanh B mn Mng v Truyn thng My tnh Khoa Cng ngh Thng tin Trng i hc Cng ngh, HQGHN E-mail: thanhld@vnu.edu.vn, thanhld.vnuh@gmail.com Mobile: 0987.257.504
Bi 3
Ni dung web
L nh Thanh, Bi ging Lp trnh web.
Ni dung
HTML CSS JavaScript DOM S pht trin: HTML5, CSS3
JavaScript
Ti sao s dng JavaScript?

HTML:
Cung cp cc th to (khai bo) i tng ti liu nhng khng cung cp kh nng qun l (hy, thay i thuc tnh, triu gi phng thc) chng.
V d: th <input type = button > to mt nt bm nhng HTML khng x l s kin khi nt c bm (onclick).
JavaScript (Scripts):
Qun l (to, hy b, thay i thuc tnh, triu gi phng thc) cc i tng.
JavaScript
c s dng rng ri. Ta C.
Khc C cc im:
nh kiu khng tng minh Khai bo bin bng t kha var; nh ngha hm bng t kha function. Khai bo mng bng Array()
S dng cng HTML:

Vit lnh JavaScript trong cp th <script type= text/javascript > </script> - phn on Javascript. C th t (nhiu) phn on javascript ti bt kz u trong trang HTML. Gi hm JavaScript trong cc thuc tnh s kin ca cc i tng iu khin vit bng HTML.
JavaScript: Khai bo, s dng bin
JavaScript: Khai bo, s dng bin
JavaScript: Khai bo, s dng hm
Javascript: i tng
Mi th trong javascript u l i tng Tuy nhin, javascript khng nh ngha lp m trc tip khai bo cc i tng
Khai bo i tng
Khai bo i tng Object ri gn thuc tnh cho n
person=new Object(); person.firstname="John"; person.lastname="Doe"; person.age=50; person.eyecolor="blue";
Khai bo trc tip

person={firstname:"John", lastname:"Doe", age:50, eyecolor:"blue"};
Khai bo i tng
Khai bo s dng hm to function person(firstname,lastname,age,eyecolor){ this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor; } var myFather=new person("John","Doe",50,"blue"); var myMother=new person("Sally","Rally",48,"green");
Thm phng thc

function person(firstname,lastname,age,eyecolor) { this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor;
this.changeName=setName; function setName(name) { this.lastname=name; }
var myFather = new Person("John","Doe",50,"blue"); myFather.changeName("Hu");

Mng
Khai bo
Chnh tc
var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";
Rt gn
var myCars=new Array("Saab", "Volvo", "BMW");
Nguyn thy
var myCars=*"Saab", "Volvo, "BMW"+;
Truy cp phn t
var name=myCars[0]; myCars[0]="Saab";
S
Javascript ch h tr mt loi s l s thc du phy ng, c s 10, 64 bt Lp Number c s dng bao gi cc d liu nguyn thy, cung cp cc thuc tnh v phng thc x l khc
var num = new Number(value); MAX VALUE MIN VALUE NEGATIVE INFINITIVE POSITIVE INFINITIVE NaN toExponential(x) toFixed(x) toPrecision(x) toString() valueOf()
Math
Lp Math cung cp cc hng v hm ton hc
E PI abs(x) sin(x) sqrt(x)
Xu
Chui k t nm gia nhy n () hoc nhy kp ()
var carname="Volvo XC60"; var carname='Volvo XC60';
Truy cp k t trong xu
var character=carname[7];
di xu
var txt="Hello World!"; document.write(txt.length);
Xu
Tm xu con
var str="Hello world, welcome to the universe."; var n=str.indexOf("welcome");
Thay th xu con
str="Please visit Microsoft!" var n=str.replace("Microsoft","W3Schools");
Xu
str.substring(begin, end): Tr v xu con bao gm cc k t c ch mc t begin n end-1 ca xu str str.substring(begin): Tr v xu con bao gm cc k t c ch mc t begin n ht ca xu str str.split(deli): Tch xu str bi s dng xu ngn cch deli. Tr v mng cc xu kt qu
Xu
str. toUpperCase(): Tr v xu vit hoa ca str str. toLowerCase(): Tr v xu vit thng ca str isNaN(s): true nu s khng l biu din s parseInt(s): Gi tr nguyn ca biu din s parseFloat(s): Gi tr thc ca biu din s
Ch thch
//Ch thch trn mt dng javascript /* Ch thch trn nhiu dng javascript */
DOM Document Object Model
Gii thiu v DOM

Mt trang web bao gm mt tp cc i tng c t chc theo cu trc cy c gc l i tng window
i tng window i din cho ca s/khung hin th trang web v c khai bo ngm nh. i tng document i din cho chnh ni dung trang web l mt thuc tnh ca window.
Gii thiu v DOM

HTML c dng khai bo cc i tng (thuc cc lp dng sn) CSS c dng nh ngha thuc tnh/kiu hin th cho cc i tng (java)script c dng qun l{ (to, hy b, thay i thuc tnh, triu gi phng thc) cc i tng, nh ngha lp mi.
DOM V d 1
<html> <body> <p>hi</p> <p> hello world </p> </body> </html>
window
world
DOM V d 2
<table border="2"> <tr><td> hi </td><td> there </td></tr> <tr><td> hello </td><td> world </td></tr> </table>
DOM V d 3
ce.parentNode == body ce.childNodes*0+ == hello ce.childNodes*1+ == world ce.childNodes*2+ == 2 ce.firstChild == hello ce.lastChild == 2 ce.previousSibling == p ce.nextSibling == select
window
ce
select
Tt c i tng: Thuc tnh
Tt c i tng: Phng thc
i tng window: Thuc tnh
i tng window: Thuc tnh
i tng window: Phng thc
i tng window
C th truy cp cc phng thc v thuc tnh ca i tng window m khng cn tin t window. V d: alert(some text); tng ng window.alert(some text); document tng ng window.document
i tng document: Thuc tnh
i tng document: Thuc tnh
i tng document: Phng thc
V d: Hin th thng bo
Onload: S kin c pht sinh khi ti trang ln OnUnload: S kin c pht sinh khi tt trang
V d: Truy cp iu khin text
V d: Truy cp bng
V d: Truy cp bng
<script language="javascript"> function dechuot(i) { document.getElementById("table1").rows[i].cells[0].background="cuocsong.g if" ; } function chuotRa(i) { document.getElementById("table1").rows[i].cells[0].background="cuocsong1. gif" ; } </script> <td style="cursor:pointer" onMouseOver="javascript:dechuot(<%=i%>);" onMouseOut="javascript:chuotRa(<%=i%>);" background="cuocsong1.gif" align="center" bgcolor="#CCCCFF" onClick="javascript:Chuyentrang(i); </td>
V d: Thng bo hi s ng {
V d: M ca s mi
V d: M ca s mi Nhp tham s
V d: M ca s con
Ca s con tr v gi tr bng returnValue
V d: Thay ni dung frame
V d: Thay ni dung iframe
V d: Truy cp iu khin v hm javascript trong frame v iframe
V d: Nhn phm c bm
V d: t iu khin c chn
V d: In trn web
Vn ca trnh duyt
Vn
Vn : Mt trang web (cng ni dung, cng m ngun) c th hin (hin th v tng tc) khc nhau trn cc trnh duyt khc nhau. Nguyn nhn: C nhiu hng to ra nhiu trnh duyt khc nhau nh MS-IE, Moz.-FF, Google-Chrome, . Cc hng khng thng nht vi nhau cch x l (bn cht trnh duyt chnh l trnh thng dch) V d:
window.event ch c th hin IE addEventListener h tr bi FF tng ng vi attachEvent h tr bi IE style.display = block c x l khc nhau trn IE, FF, Chrome
Mong mun v gii php

Mong mun: Trang web c th hin nh nhau tt c cc trnh duyt (cross-browser). Gii php: S dng cc i tng, thuc tnh, phng thc c h tr v x l nh nhau trn cc trnh duyt Ty trnh duyt m sinh m cho ph hp Khuyn co s dng trnh duyt c u tin Ly thng tin trnh duyt: window.clientInformation.appName/.appVersion/. platform
ng dng mu: Table Sorter
ng dng mu: Tree
ng dng mu: Tabbed Content
ng dng mu: Calculator
Tip theo
HTML5, CSS3

03 - Noi Dung Web - Phan 2 - DOM - Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

03 - Noi Dung Web - Phan 2 - DOM - Javascript

Uploaded by

Copyright:

Available Formats

Bi ging

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

Ti sao s dng JavaScript?

S dng cng HTML:

JavaScript: Khai bo, s dng bin

L nh Thanh, Bi ging Lp trnh web.

JavaScript: Khai bo, s dng bin

L nh Thanh, Bi ging Lp trnh web.

JavaScript: Khai bo, s dng hm

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

Khai bo trc tip

L nh Thanh, Bi ging Lp trnh web.

Thm phng thc

var myFather = new Person("John","Doe",50,"blue"); myFather.changeName("Hu");

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

DOM Document Object Model

L nh Thanh, Bi ging Lp trnh web.

Gii thiu v DOM

L nh Thanh, Bi ging Lp trnh web.

Gii thiu v DOM

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Thuc tnh

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.

Tt c i tng: Phng thc

L nh Thanh, Bi ging Lp trnh web.