Lập trình Thiết kế Web Bài – Phần 2/2 HTML DOM với Javascript Khoa CNTT – ĐH.KHTN © 2007 Khoa Công nghệ thông tin CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Nội dung ƒ Giới thiệu HTML DOM ƒ Thuộc tính (Property) Phương thức (Method) ƒ Xử lý kiện (Event) © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Nội dung ƒ Giới thiệu HTML DOM ƒ Thuộc tính (Property) Phương thức (Method) ƒ Xử lý kiện (Event) © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Giới thiệu HTML DOM ƒ 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 © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Giới thiệu HTML DOM - Ví dụ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Giới thiệu HTML DOM – Cấu trúc DOM đơn giản © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Giới thiệu HTML DOM – Cấu trúc DOM đầy đủ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Nội dung ƒ Giới thiệu HTML DOM ƒ Thuộc tính (Property) Phương thức (Method) ƒ Xử lý kiện (Event) © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Property & Method – Cú pháp chung ƒ 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(); © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện ƒ Event Object ƒ Event Handler ƒ Xử lý kiện ƒ Ví dụ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện ƒ Event Object ƒ Event Handler ƒ Xử lý kiện ƒ Ví dụ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện – 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 ƒ Cung cấp thông tin event – Loại event – Vị trí trỏ thời điềm xảy kiện © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện ƒ Event Object ƒ Event Handler ƒ Xử lý kiện ƒ Ví dụ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện – Event Handler ƒ 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 “…” ‘…’ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện ƒ Xử lý function function greeting() { alert("Welcome to my world"); } © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện ƒ Xử lý thuộc tính : – Gán tên hàm xử lý cho object event object.eventhandler = functionname; function greeting() { alert("Welcome to my world"); } window.onload = greeting; © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện – Danh sách kiện Form field Blur Click Button x Checkbox x Change Focus Document Load Mouseo ver Select Submit x x Form x Link x Radio x Reset x Selection x Submit x x x x Text x x x x Textarea x x x x © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com Unload https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Xử lý kiện ƒ Event Object ƒ Event Handler ƒ Xử lý kiện ƒ Ví dụ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Ví dụ: onclick Event function compute(frm){ var x = frm.expr.value; result.innerHTML = x*x; } X = X * X = © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Ví dụ: onFocus - onBlur ƒ Xảy thành phần HTML bị focus (onFocus) focus (onBlur) ƒ Ví dụ: © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Ví dụ: onMouseOver - onMouseOut 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt ... https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Giới thiệu HTML DOM – Cấu trúc DOM đơn giản © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết. .. Thiết kế Web – Bài : DOM HTML với Javascript Giới thiệu HTML DOM – Cấu trúc DOM đầy đủ © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế Web –... https://fb.com/tailieudientucntt Lập trình Thiết kế Web – Bài : DOM HTML với Javascript Property & Method – Các loại Objects © 2007 Khoa CNTT - ĐHKHTN CuuDuongThanCong.com https://fb.com/tailieudientucntt Lập trình Thiết kế