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ế