Sau khi học xong phần FORM tạo bảng đăng nhập đăng ký của HTML5 các bạn sẽ học tiếp phần này là phần javascript Mục đích học phần này là để kết hợp với FORM tạo thành một thể thống nhất công dụng của Javarscript là để bắt lỗi các thẻ input vidu bắt lỗi người nhập Email nếu nhập sai Form sẽ cảnh báo và bắt nhập lại Hoặc Javascript có thể tính toán các phép toán đơn giản kết hợp với FORM table
Giới thiệu DHTML Chương 13 Mục tiêu bài học HTML động (Dynamic HTML) Những đặc trưng DHTML Đặc trưng DHTML Mô hình đối tượng tài liệu (DOM) DHTML Các kiện (Events) Sự kiện bàn phím Sự kiện chuột Sự kiện focus (tiêu điểm) selection (chọn) Building Dynamic Web Sites / of 22 Tổng quan DHTML Các trang Web tĩnh: Được tạo HTML CSS, tập trung vào việc trình bày bố cục cho trang Sự tương tác với người dùng bị giới hạn Người dùng cập nhật nội dung Các trang Web động Thêm khả tương tác với người dùng Người dùng cập nhật nội dung Bạn thay đổi giao diện, cập nhật nội dung mà không cần phải tải trang từ Web server (ví dụ Blog, forum, Wikipedia…) Building Dynamic Web Sites / of 22 Tổng quan DHTML DHTML(Dynamic HyperText Markup Language) cung cấp cách dễ dàng cho việc tạo trang Web có tính động tính tương tác Cho phép bạn tạo trang Web có khả định giá đáp ứng lại liệu nhập vào người dùng Cho phép bạn thêm vào trang hiệu ứng hoạt họa tạo liên kết tới sở liệu để lưu trữ lấy liệu DHTML kết hợp nhiều công nghệ Web khác Các công nghệ sử dụng để tạo thêm tính động cho trang Web Các công nghệ bao gồm: DOM, JavaScript, CSS HTML Building Dynamic Web Sites / of 22 Đặc trưng DHTML Các kiểu động (Dynamic Styles): cho phép áp dụng nhiều style khác cho nội dung Bạn thay đổi hình thức hiển thị nội dung việc dùng CSS Nội dung động (Dynamic Content): Cho phép bạn phát sinh giá trị dựa việc tính toán số học, thêm lấy liệu từ sở liệu có kiện xảy Định vị vị trí (positioning): Bằng việc sử dụng kĩ thuật định vị khác nhau(tương đối, tuyệt đối, cố định) CSS, bạn đặt phần tử vào vị trí xác định trang Web Building Dynamic Web Sites / of 22 Đặc trưng DHTML Tải font (Font Download): Hỗ trợ nhiều kiểu font khác download Sự kết nối động (Dynamic Binding): Cho phép bạn truy xuất liệu từ sở liệu Bạn hiển thị liệu điều khiển HTML textbox, label,… Viết kịch (Scripting): Cho phép bạn nhúng kịch (scripts) tài liệu HTML để làm tăng tính tương tác với Building Dynamic Web Sites / of người dùng 22 DOM DHTML DOM (Document Object Model) mô hình đối tượng đại diện cho tập phần tử trang Web DOM mô hình đối tượng độc lập tảng cho phép kịch truy xuất thao tác phần tử HTML CSS DOM hỗ trợ đầy đủ kiện(event) gây người dùng Điều cho phép đáp trả lại đầu vào(intput) người dùng tạo tương tác dễ ràng Building Dynamic Web Sites / of 22 DOM DHTML Các đối tượng DHTML Mỗi phần tử trang Web xem đối tượng Building Dynamic Web Sites / of 22 Sự kiện (Event) Một kiện xảy người dùng tương tác với trang Web Một kiện thông dụng phát sinh click chuột, di chuyển chuột, gõ phím… Mỗi kiện kết hợp với đối tượng event, đối tượng cung cấp thông tin kiện như: Loại kiện Vị trí trỏ thời điểm xảy kiện Đối tượng Event xem phần trình xử lý kiện (Nó gửi tới trình xử lý kiện tham số) Building Dynamic Web Sites / of 22 Trình xử lý kiện (Event Handler) Khi kiện xảy ra, đoạn mã lệnh Javascript thực Đoạn mã gọi trình xử lý kiện Đoạn mã câu lệnh đơn lời gọi hàm Building Dynamic Web Sites / 10 of 22 Trình xử lý kiện (Event Handling) Liên kết trình xử lý kiện với đối tượng, phần tử HTML: Trình xử lý kiện cho thẻ HTML: Building Dynamic Web Sites / 18 of 22 Sự kiện onChange Sự kiện onChange xảy nội dung phần tử text bị thay đổi thay đổi mục chọn phần tử select else alert ("Thank you"); function checkNum(num) { if (num == "") { alert("Please enter a number"); return false; } if (isNaN (num)) { alert("Please enter a numeric value"); return false; } } Please enter a number: Building Dynamic Web Sites / 19 of 22 Sự kiện onChange Building Dynamic Web Sites / 20 of 22 OnLoad/onSubmit OnLoad Sự kiện onLoad gửi đến đối tượng document tải xong tài liệu onSubmit Sự kiện onSubmit phát sinh người dùng gửi form (sử dụng nút Submit) Sự kiện xảy trước form thật gửi Building Dynamic Web Sites / 21 of 22 onResize - Example onResize Sự kiện kích hoạt kiện resize xảy ra, nghĩa người dùng script chỉnh kích thước cửa sổ hay frame window.onresize= notify; function notify() { alert("Window resized!"); } window.onresize= notify; Please resize the Kết quả: Building Dynamic Web Sites / 22 of 22 [...]... tải xong tài liệu onSubmit Sự kiện onSubmit phát sinh bất cứ khi nào người dùng gửi form đi (sử dụng nút Submit) Sự kiện xảy ra trước khi form thật sự được gửi đi Building Dynamic Web Sites / 21 of 22 onResize - Example onResize Sự kiện này được kích hoạt khi sự kiện resize xảy ra, nghĩa là khi người dùng hoặc script chỉnh kích thước cửa sổ hay frame ... chấp nhận dữ liệu nhập từ người dùng Sự kiện onblur ngược với focus Xảy ra khi người dùng rời tiêu điểm khỏi phần tử form Sự kiện onchange xảy ra khi văn bản trong hộp text hoặc textarea bị thay đổi Sự kiện onselectstart Sự kiện ondragstart xảy ra khi phần tử bị di chuyển (move) Building Dynamic Web Sites / 17 of 22 Sự kiện tiêu điểm(focus), và lựa chọn (selection) ... một phím bị nhấn xuống onkeyup: xảy ra khi một phím được nhả ra onkeypress: xảy ra khi một phím được nhấn và nhả Building Dynamic Web Sites / 13 of 22 Sự kiện bàn phím (Keyboard Event) function numericonly() { if(event.keyCode < 48 || event.keyCode>57) event.returnValue=false; } function countword(){ var message ... Binding): Cho phép bạn truy xuất liệu từ sở liệu Bạn hiển thị liệu điều khiển HTML textbox, label,… Viết kịch (Scripting): Cho phép bạn nhúng kịch (scripts) tài liệu HTML để làm tăng tính tương... tạo trang Web có khả định giá đáp ứng lại liệu nhập vào người dùng Cho phép bạn thêm vào trang hiệu ứng hoạt họa tạo liên kết tới sở liệu để lưu trữ lấy liệu DHTML kết hợp nhiều công nghệ Web... document tải xong tài liệu onSubmit Sự kiện onSubmit phát sinh người dùng gửi form (sử dụng nút Submit) Sự kiện xảy trước form thật gửi Building Dynamic Web Sites / 21 of 22 onResize - Example