›
›

Bài giảng Lập trình Web - Chương 4: DOM - HTML - Trần Phước Tuấn

pdf 50 trang cucquyet12 2971
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web - Chương 4: DOM - HTML - Trần Phước Tuấn", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_chuong_4_dom_html_tran_phuoc_tuan.pdf

Nội dung text: Bài giảng Lập trình Web - Chương 4: DOM - HTML - Trần Phước Tuấn

  1. DOMDOM –– HTMLHTML Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com
  2. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC Nội dung 1. Tổng quan về DOM – HTML 2. Một số đối tượng 3. Làm việc với document - DOM 4. Xử lý sự kiện (even) 5. Một số ví dụ 7/24/2009 Lập trình Web - Trần Phước Tuấn 2
  3. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan về DOM – HTML § HTML DOM = HTML Document Object Model § Xem trang web như một cây gồm nhiều nút (node) § Mỗi nút là một thành phần (tag HTML, thuộc tính, nội dung của tag) § DOM định nghĩa một cách để truy xuất và điều khiển các thành phần trong 1 trang web 7/24/2009 Lập trình Web - Trần Phước Tuấn 3
  4. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan về DOM – HTML 7/24/2009 Lập trình Web - Trần Phước Tuấn 4
  5. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan về DOM – HTML 7/24/2009 Lập trình Web - Trần Phước Tuấn 5
  6. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan về DOM – HTML 7/24/2009 Lập trình Web - Trần Phước Tuấn 6
  7. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan về DOM – HTML 7/24/2009 Lập trình Web - Trần Phước Tuấn 7
  8. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan về DOM – HTML 7/24/2009 Lập trình Web - Trần Phước Tuấn 8
  9. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan về DOM – HTML § Mỗi đối tượng DOM đều có danh sách thuộc tính (Properties) và danh sách các phương thức (Method) tương ứng. § objectName.propertyName= value § Vídụ: document.bgColor= “blue”; § objectName.methodName() § Vídụ: window.focus(); 7/24/2009 Lập trình Web - Trần Phước Tuấn 9
  10. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2. Một số đối tượng trong DOM 1. window 2. location 3. history 4. navigator 5. document 6. image 7. form 8. element 7/24/2009 Lập trình Web - Trần Phước Tuấn 10
  11. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.1. DOM - window § Là thể hiện của đối tượng cửa sổ trình duyệt § Tồn tại khi mở 1 tài liệu HTML § Sử dụng để truy cập thông tin window § Điều khiển các sự kiện xảy ra trong window § Nếu tài liệu định nghĩa nhiều frame, browser tạo 1 window object cha và các window object con cho từng frame 7/24/2009 Lập trình Web - Trần Phước Tuấn 11
  12. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.1. DOM - window 7/24/2009 Lập trình Web - Trần Phước Tuấn 12
  13. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.2. DOM - location ChChứứaa thôngthông tintin hihiệệnn ttạạii ccủủaa URLURL 7/24/2009 Lập trình Web - Trần Phước Tuấn 13
  14. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.3. DOM - history CungCung ccấấpp danhdanh ssááchch ccáácc URLURL đđãã đưđượợcc duyduyệệtt bbởởii ngngưườờii ssửử ddụụng.ng. 7/24/2009 Lập trình Web - Trần Phước Tuấn 14
  15. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.4. DOM - navigator CungCung ccấấpp thôngthông tintin vvềề trtrììnhnh duyduyệệt.t. 7/24/2009 Lập trình Web - Trần Phước Tuấn 15
  16. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.5. DOM - document § Biểu diễn cho toàn bộ các thành phần trong 1 tài liệu HTML § Dùng để lấy thông tin về tài liệu, các thành phần HTML và xử lý sự kiện 7/24/2009 Lập trình Web - Trần Phước Tuấn 16
  17. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.5. DOM - document 7/24/2009 Lập trình Web - Trần Phước Tuấn 17
  18. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.6. DOM – image § Truy xuất đến tag trên trang web § Có thể truy xuất thông qua: – document.images[index] – document.images[“ImageName”] – document.ImageName §§ MMộộtt ssốố thuthuộộcc ttíínhnh ccủủaa ImageImage ObjObj – alt, border, classname, title, – width, height, hspace, vspace, – id, name, src, lowsrc, longDesc, – isMap, complete 7/24/2009 Lập trình Web - Trần Phước Tuấn 18
  19. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.7. DOM – form § Dùng để truy xuất đến tag trên trang web § Có thể truy xuất thông qua – document.forms[index] – document.forms[“FormName”] – document.FormName § Một số thuộc tính – action, method, id, name, target – classname, title, language, dir – elements[ ] § Một số phương thức – reset( ), submit( ) 7/24/2009 Lập trình Web - Trần Phước Tuấn 19
  20. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2.8. DOM – element § Tương ứng với form field. § Cách truy xuất document.formName.controlName document.searchForm.entry document.searchForm.elements[0] document.forms[“searchForm”].elements[“entry”] document.forms[“searchForm”].entry 7/24/2009 Lập trình Web - Trần Phước Tuấn 20
  21. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM BiBiểểuu didiễễnn nnộộii dungdung ttààii liliệệuu theotheo ccấấuu trtrúúcc câycây 7/24/2009 Lập trình Web - Trần Phước Tuấn 21
  22. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM CCấấuu trtrúúcc câycây ccủủaa ttààii liliệệuu 7/24/2009 Lập trình Web - Trần Phước Tuấn 22
  23. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 23
  24. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM § getElementById(“id1”): trả về node có giá trị thuộc tính id = id1 § Ví dụ: // // some text // var node = document.getElementById(“id1”); var nodeName = node.nodeName; // p var nodeType = node.nodeType; // 1 var nodeValue = node.nodeValue; // null var text = node.innerText; // some text 7/24/2009 Lập trình Web - Trần Phước Tuấn 24
  25. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM § getElementsByName(name1): trả về danh sách node có giá trị của thuộc tính name = name1 § Ví dụ: var nodeList=document.getElementsByName(“name1”); for(var i=0;i<nodeList.length;++i) { var nodeName= nodeList(i).nodeName; var nodeType=nodeList(i).nodeType; var nodeValue=nodeList.item(i).nodeValue; } 7/24/2009 Lập trình Web - Trần Phước Tuấn 25
  26. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM §§ createElementcreateElement(nodeNamenodeName): tạo ra một node HTML mới tùy theo đối số nodeNamenodeName § Ví dụ: var imgNode=document.createElement(“img”); imgNode.src=“images/test.gif”; // 7/24/2009 Lập trình Web - Trần Phước Tuấn 26
  27. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM §§ createTextNodecreateTextNode(contentcontent): tạo ra một textnode mới với nội dung tùy theo đối số contentcontent § Ví dụ: var txtNode=document.createTextNode(“New text”); var pNode=document.createElement(“p”); pNode.appendChild(txtNode); // New text 7/24/2009 Lập trình Web - Trần Phước Tuấn 27
  28. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM §§ nodeName.nodeName.appendChildappendChild(newNodenewNode): thêm node mới newNodenewNode vào cuối danh sách các node con của một node. § Ví dụ: // Some text var pNode=document.getElementById(“id1”); var imgNode=document.createElement(“img”); imgNode.src=“images/test.gif”; pNode.appendChild(imgNode); // // Some text // 7/24/2009 Lập trình Web - Trần Phước Tuấn 28
  29. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM §§ nodeName.nodeName.insertBeforeinsertBefore(newNode,childnewNode,child RefRef): chèn newNodenewNode vào trước childRefchildRef trong danh sách các node con của một node. // // var pNode=document.getElementById(“id1”); var firstChild=pNode.firstChild; var newNode=document.createTextNode(“Some text”); pNode.insertBefore(newNode,firstChild); // // // Some text // 7/24/2009 Lập trình Web - Trần Phước Tuấn 29
  30. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM §§ nodeName.nodeName.removeChildremoveChild(childchild): xóa childchild trong danh sách các node con của một node gọi phương thức, trả về node bị xóa. // Hình ảnh // var pNode=document.getElementById(“id1”); if (pNode.hasChildNodes()) var rmNode=pNode.removeChild(pNode.lastChild); // // // // 7/24/2009 Lập trình Web - Trần Phước Tuấn 30
  31. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 31
  32. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 32
  33. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 33
  34. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 34
  35. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 35
  36. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 36
  37. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 37
  38. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3. Làm việc với document - DOM 7/24/2009 Lập trình Web - Trần Phước Tuấn 38
  39. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Xử lý sự kiện 1. Event Object 2. Event Handle 3. Xử lý sự kiện 7/24/2009 Lập trình Web - Trần Phước Tuấn 39
  40. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. Event Object § 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 § Event cung cấp các thông tin – Loại event –Vị trí con trỏ tại thời điềm xảy ra sự kiện § Ví dụ: Xem Slide sau 7/24/2009 Lập trình Web - Trần Phước Tuấn 40
  41. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.1. Event Object 7/24/2009 Lập trình Web - Trần Phước Tuấn 41
  42. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.2. Event Handle § Giúp cho người lập trình bắt và xử lý các sự kiện của các đối tượng trong trang web. § Cú pháp § Ví dụ: 7/24/2009 Lập trình Web - Trần Phước Tuấn 42
  43. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.2. Event Handle 7/24/2009 Lập trình Web - Trần Phước Tuấn 43
  44. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.3. Xử lý sự kiện § Cú pháp § Ví dụ: § Lưu ý: Dấu “ ” và ‘ ’ 7/24/2009 Lập trình Web - Trần Phước Tuấn 44
  45. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.3. Xử lý sự kiện VVíí ddụụ 7/24/2009 Lập trình Web - Trần Phước Tuấn 45
  46. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4.3. Xử lý sự kiện 7/24/2009 Lập trình Web - Trần Phước Tuấn 46
  47. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5. Một số ví dụ function compute(frm) { var x = frm.expr.value; result.innerHTML= x*x; } X = X * X = 7/24/2009 Lập trình Web - Trần Phước Tuấn 47
  48. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5. Một số ví dụ 7/24/2009 Lập trình Web - Trần Phước Tuấn 48
  49. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5. Một số ví dụ § Ví dụ: onFocus – onBlur § Xảy ra khi một thành phần HTML bị focus (onFocus) và mất focus (onBlur) § Ví dụ: 7/24/2009 Lập trình Web - Trần Phước Tuấn 49
  50. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 5. Một số ví dụ 7/24/2009 Lập trình Web - Trần Phước Tuấn 50