Lập trình thiết kế Web 1 - Bài 6 - Phần 2/2: HTML DOM với Javascript

i dungdung HTMLHTML bênbên trongtrong mmộộtt node.node.
 Ví dụ:
 //
 // some text
 //
 var theElement = document.getElementById("para1");
 theElement.innerHTML = “Some new text”;
 // Kếtquả :
 // 
 // Some new text
 // 
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
ĐĐốốii ttưượợngng DocumentDocument -- DOMDOM
 ƒƒ innerTextinnerText
 TTươươngng ttựự innerHTMLinnerHTML,, tuytuy nhiênnhiên bbấấtt kkỳỳ nnộộii dungdung nnààoo đưđưaa
 vvààoo ccũũngng đưđượợcc xemxem nhnhưư llàà texttext hhơơnn llàà ccáácc ththẻẻ HTML.HTML.
 Ví dụ:
 var theElement = document.getElementById("para1");
 theElement.innerText = “Some new text”;
 // Kếtquả hiểnthị trên trình duyệt
 // bên trong thẻ p: “Some new text”
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
ĐĐốốii ttưượợngng DocumentDocument -- DOMDOM
 ƒƒ setAttributesetAttribute (( attributeNameattributeName ,, valuevalue ))
 ChChỉỉ đđịịnhnh attributeattribute ccủủaa mmộộtt nodenode vvớớii gigiáá trtrịị llàà value.value.
 Ví dụ:
 Some text
 var fontNode = document.getElementById(“font1”);
 fontNode.setAttribute(“color”,”red”);
 fontNode.setAttribute(“size”,”5”);
 Some text
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
ĐĐốốii ttưượợngng DocumentDocument -- DOMDOM
 ƒƒ getAttributegetAttribute (( attributeNameattributeName ))
 LLấấyy gigiáá trtrịị ccủủaa mmộộtt attributeattribute trongtrong nodenode
 Ví dụ:
 var font1 = document.getElementById(“font1”);
 alert(font1.getAttribute(“color”));
 zz removeAttributeremoveAttribute (( attributeNameattributeName ))
 HHủủyy mmộộtt attributeattribute trongtrong nodenode
 Ví dụ:
 font1.removeAttribute(“color”);
 font1.removeAttribute(“size”);
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
ĐĐốốii ttưượợngng DocumentDocument -- DOMDOM
 ƒƒ ThayThay đđổổii đđịịnhnh ddạạngng CSSCSS ccủủaa mmộộtt nodenode thôngthông quaqua 
 thuthuộộcc ttíínhnh stylestyle
 Ví dụ:
 This is a 
 text
 var node = 
 document.getElementById(“myParagraph”);
 node.style.color = "green";
 node.style.fontSize = "14";
 node.style.backgroundColor = "yellow";
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
ĐĐốốii ttưượợngng DocumentDocument -- DOMDOM
 ƒƒ ThayThay đđổổii đđịịnhnh ddạạngng csscss thôngthông quaqua thuthuộộcc ttíínhnh classNameclassName
 Ví dụ:
 .look1 { color: black; background-color: yellow; 
 font-style: normal; }
 .look2 { background-color: orange; font-style: 
 italic; }
 this is my text 
 var pNode = document.getElementById("p1");
 pNode.className = "look2";
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
ĐĐốốii ttưượợngng DocumentDocument -- DOMDOM
 ƒƒ ThayThay đđổổii thamtham chichiếếuu đđếếnn filefile CSSCSS
 Ví dụ:
 function changeSkin()
 {
 document.getElementById("myStyle").href = 
 "css/style2.css";
 }
 <link id="myStyle" rel="stylesheet" 
 type="text/css" href="css/style1.css" />
 Hello world
 <input type="button" onclick="changeSkin()" 
 value="change skin" />
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
VVíí ddụụ:: DynamicDynamic TableTable
 ƒƒ ViViếếtt trangtrang webweb chocho phphéépp ttạạoo tabletable ccóó ssốố dòngdòng,, ssốố
 ccộộtt dodo ngngưườờii ddùùngng nhnhậậpp vvààoo..
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
VVíí ddụụ:: DynamicDynamic TableTable
 body
 Table
 >
 1212 Tr
 1313 
 >
 Td
 >
 Td
 2121 
 2222 
 Tr
 >
 Td
 © 2007 Khoa CNTT - ĐHKHTN Td
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
 body
VVíí ddụụ::
 Table
 TBody
 >
 >
 1212 Tr
 1313 
 >
 Td
 >
 Td
 2121 
 2222 
 Tr
 >
 >
 Td
 © 2007 Khoa CNTT - ĐHKHTN Td
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
VVíí ddụụ:: DynamicDynamic TableTable
 ƒƒ document.createElementdocument.createElement((……)) ::TTạạoo mmộộtt đđốốii ttưượợngng
 ththẻẻ DOMDOM HTMLHTML
 ƒƒ object.appendChildobject.appendChild((……):): ThêmThêm mmộộtt đđốốii ttưượợngng ththẻẻ
 DOMDOM HTMLHTML nhnhưư llàà nnúútt con.con.
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
VVíí ddụụ:: DynamicDynamic TableTable
functionfunction CreateTable(divTable)CreateTable(divTable)
 {{ 
 varvar tagTabletagTable == document.createElementdocument.createElement("table");("table");
 tagTable.bordertagTable.border == 1;1;
 varvar tagTBodytagTBody == document.createElementdocument.createElement("tbody");("tbody");
 tagTable.tagTable.appendChildappendChild(tagTBody);(tagTBody);
 varvar nDongnDong == txttxtSoDong.value;SoDong.value;
 varvar nCotnCot == txttxtSoCot.value;SoCot.value;
 forfor (i=0;(i=0; i<nDong;i<nDong; i++)i++)
 {{
 varvar tagTRtagTR == document.document.createElementcreateElement("tr");("tr");
 forfor (j=0;(j=0; j<nCot;j<nCot; j++)j++)
 {{
 varvar tagTDtagTD == document.document.createElementcreateElement("td");("td");
 varvar textNodetextNode == document.document.createTextNodecreateTextNode(i+""+j);(i+""+j);
 tagTD.tagTD.appendChildappendChild(textNode);(textNode);
 tagTR.tagTR.appendChildappendChild(tagTD);(tagTD);
 }}
 tagTBody.tagTBody.appendChildappendChild(tagTR);(tagTR);
 }}
 divTable.divTable.appendChildappendChild(tagTable);(tagTable);
 }}
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
NNộộii dungdung
 ƒ Giớithiệuvề HTML DOM
 ƒ Thuộc tính (Property) và Phương thức (Method)
 ƒ Xử lý sự kiện(Event)
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn
 ƒ Event Object
 ƒ Event Handler
 ƒ Xử lý sự kiện
 ƒ Ví dụ
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn
 ƒ Event Object
 ƒ Event Handler
 ƒ Xử lý sự kiện
 ƒ Ví dụ
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn –– EventEvent ObjectObject
 ƒ Events là các sự kiện xảy ra trên trang Web
 ƒ Do người dùng hoặc do hệ thống tạo ra
 ƒ Mỗi sự kiện sẽ liên quan đến một event object
 ƒ Cung cấp thông tin về event
 – Loại event
 – Vị trí con trỏ tại thời điềm xảy ra sự kiện
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn
 ƒ Event Object
 ƒ Event Handler
 ƒ Xử lý sự kiện
 ƒ Ví dụ
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn –– EventEvent HandlerHandler
 ƒ Giúp cho ngườilậptrìnhbắtvàxử lý các sự kiệncủacác
 đốitượng trong trang web.
 ƒ Cú pháp
 ƒ Ví dụ :
 <INPUT TYPE="button” NAME=“Button1”
 VALUE="Open Sesame!” onClick=”window.open('mydoc.html','newWin')”>
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn –– EventEvent HandlerHandler
 Danh sách mộtsố Event Handler thường sử dụng
 onabort onload
 onblur onmousedown
 onchange onmousemove
 onclick onmouseout
 onerror onmouseover
 onfocus onmouseup
 onkeydown onreset
 onkeyup onresize
 onselect onsubmit
 onunload
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn
 ƒ Event Object
 ƒ Event Handler
 ƒ Xử lý sự kiện
 ƒ Ví dụ
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn chocho ccáácc ththẻẻ HTMLHTML
ƒ Cú pháp
ƒ Ví dụ:
 <INPUT TYPE="button“ NAME="Button1“
 VALUE="OpenSesame!”
 onClick="window.open('mydoc.html','newWin');">
ƒ Lưuý: Dấu “…” và ‘…’
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn
 ƒ Xử lý bằng function
 function greeting() {
 alert("Welcome to my world");
 }
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn
 ƒ Xử lý bằng thuộctính:
 – Gán tên hàm xử lý cho 1 object event
 object.eventhandler = functionname;
 function greeting() {
 alert("Welcome to my world");
 }
 window.onload = greeting;
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn –– DanhDanh ssááchch ccáácc ssựự kikiệệnn ccủủaa FormForm fieldfield
 Blur Click Change Focus Load Mouseo Select Submit Unload
 ver
 Button x
 Checkbox x
 Document x x
 Form x
 Link x x
 Radio x
 Reset x
 Selection x x x
 Submit x
 Text x x x x
 Textarea x x x x
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
XXửử lýlý ssựự kikiệệnn
 ƒ Event Object
 ƒ Event Handler
 ƒ Xử lý sự kiện
 ƒ Ví dụ
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
VVíí ddụụ:: onclickonclick EventEvent
 function compute(frm){
 var x = frm.expr.value;
 result.innerHTML = x*x;
 } 
 X = 
 <INPUT TYPE="button" VALUE=“Calculate”
 ONCLICK="compute(this.form)">
 X * X = 
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
VVíí ddụụ:: onFocusonFocus -- onBluronBlur
 ƒ Xảyrakhimột thành phầnHTML bị focus (onFocus) và mất
 focus (onBlur)
 ƒ Ví dụ:
 <INPUT type=“text” name=“myTextbox”
 onblur=“(document.bgColor='aqua')”
 onfocus=“(document.bgColor='dimgray')”>
 © 2007 Khoa CNTT - ĐHKHTN
 Lập trình và Thiếtkế Web 1 – Bài 6 : DOM HTML với Javascript
 VVíí ddụụ:: onMouseOveronMouseOver -- onMouseOutonMouseOut
 function showLink(num) {
 if (num==1)
 document.forms[0].elements[0].value=
 "You have selected Aptech"; 
 } else {
 document.forms[0].elements[0].value=“”;
 }
 } 
Aptech
 © 2007 Khoa CNTT - ĐHKHTN