Bài giảng lập trình web DOM – HTML trần phước tuấn

DOM – HTML Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Nội dung Tổng quan DOM – HTML Một số đối tượng Làm việc với document - DOM Xử lý kiện (even) Một số ví dụ 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML § HTML DOM = HTML Document Object Model § Xem trang web gồm nhiều nút (node) § Mỗi nút thành phần (tag HTML, thuộc tính, nội dung tag) § DOM định nghĩa cách để truy xuất điều khiển thành phần trang web 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML § Mỗi đối tượng DOM có danh sách thuộc tính (Properties) danh sách 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ì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Một số đối tượng DOM window location history navigator document image form element 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 10 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 36 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 37 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 38 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Xử lý kiện Event Object Event Handle Xử lý kiện 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 39 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.1 Event Object § Events kiện xảy trang Web § Do người dùng hệ thống tạo § Mỗi kiện liên quan đến event object § Event cung cấp thông tin – Loại event – Vị trí trỏ thời điềm xảy kiện § Ví dụ: Xem Slide sau 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 40 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.1 Event Object 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 41 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.2 Event Handle § Giúp cho người lập trình bắt xử lý kiện đối tượng trang web § Cú pháp § Ví dụ: § Lưu ý: Dấu “…” ‘…’ 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 44 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.3 Xử lý kiện Ví dụ 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 45 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 4.3 Xử lý kiện 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 46 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Một số ví dụ function compute(frm) { var x = frm.expr.value; expr result.innerHTML= x*x; result } X = [...]... document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 33 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 34 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 35 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC... // 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 30 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 31 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 32 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm... 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 20 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM Biểu diễn nội dung tài liệu theo cấu trúc cây 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 21 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM Cấu trúc cây của tài liệu 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn. .. kiện 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 16 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 2.5 DOM - document 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 17 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ 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... TOÁN – TIN HỌ HỌC 2.1 DOM - window 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 12 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 2.2 DOM - location Chứa thông tin hiện tại của URL 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 13 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 2.3 DOM - history Cung cấp danh sách các URL đã được duyệt bởi người sử dụng 7/24/2009 Lập trì trình. .. của Image Obj – alt, border, classname, title, – width, height, hspace, vspace, – id, name, src, lowsrc, longDesc, – isMap, complete 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 18 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ 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... trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 14 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 2.4 DOM - navigator Cung cấp thông tin về trình duyệt 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 15 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ 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ập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 25 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM § createElement( createElement nodeName): nodeName tạo ra một node HTML mới tùy theo đối số nodeName § Ví dụ: var imgNode=document.createElement(“img”); imgNode.src=“images/test.gif”; // 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn. .. 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ì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 19 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 2.8 DOM – element § Tương ứng với form field § Cách truy xuất document.formName.controlName... cây của tài liệu 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 22 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 3 Làm việc với document - DOM 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 23 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ 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 ... trang web 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn. .. – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC Tổng quan DOM – HTML 7/24/2009 Lập trì trình Web -. .. 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 11 ĐẠI HỌ HỌC SP TPHCM, KHOA TOÁ TOÁN – TIN HỌ HỌC 2.1 DOM - window 7/24/2009 Lập trì trình Web - Trầ Trần Phướ Phước Tuấ Tuấn 12 ĐẠI