Session 13 t8 Javascript tài liệu tiếng việt

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

Tổng quan về DHTML

 Các trang Web tĩnh:

 Được tạo bằng HTML và CSS, chỉ 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 không thể cập nhật được nội dung.

 Các trang Web động

 Thêm khả năng tương tác với người dùng.

 Người dùng có thể cập nhật được nội dung.

 Bạn có thể thay đổi giao diện, cập nhật nội dung mới mà không cần phải tải trang về từ Web server (ví dụ Blog, forum, Wikipedia…)

Tổng quan về DHTML

 DHTML(Dynamic HyperText Markup Language) cung cấp một cách dễ dàng

cho việc tạo các trang

Web có tính động và tính tương tác.

 Cho phép bạn tạo các trang Web có khả năng định giá và đáp ứng lại các dữ liệu nhập vào của người dùng.

 Cho phép bạn thêm vào trang các hiệu ứng hoạt họa và tạo các liên kết tới cơ

sở dữ liệu để lưu trữ và lấy dữ liệu

 DHTML là sự kết hợp của nhiều công nghệ Web khác nhau Các công nghệ này được sử dụng cùng nhau để tạo thêm tính động cho các trang Web Các công nghệ đó bao gồm: DOM, JavaScript, CSS và HTML.

Đặc trưng của DHTML

 Các kiểu động (Dynamic Styles): cho phép áp dụng

nhiều style khác nhau cho nội dung Bạn có thể thay

đổi hình thức hiển thị nội dung bằng việc dùng CSS.

 Nội dung động (Dynamic Content): Cho phép bạn

phát sinh các giá trị dựa trên các việc tính toán số

học, thêm và lấy dữ liệu từ cơ sở dữ liệu khi có một sự

kiện nào đó xảy ra.

 Định vị vị trí (positioning): Bằng việc sử dụng các kĩ

thuật định vị khác nhau(tương đối, tuyệt đối, cố định)

của CSS, bạn có thể đặt các phần tử vào một vị trí xác

Đặc trưng của DHTML

 Tải font (Font Download): Hỗ trợ

nhiều kiểu font khác nhau và có

thể download được

 Sự kết nối động (Dynamic Binding):

Cho phép bạn truy xuất dữ liệu từ

cơ sở dữ liệu Bạn có thể hiển thị

các dữ liệu này trong các điều khiển

HTML như textbox, label,…

 Viết kịch bản (Scripting): Cho phép bạn nhúng các kịch bản

(scripts) trong một tài liệu HTML để làm tăng tính tương tác với

DOM trong DHTML

 DOM (Document Object Model) là một mô hình đối tượng đại

diện cho tập các phần tử trong trang Web

 DOM là một mô hình đối tượng độc lập nền tảng cho các phép

kịch bản truy xuất và thao tác các phần tử HTML và CSS

 DOM hỗ trợ đầy đủ các sự kiện(event) gây ra bởi người dùng

Điều này cho phép đáp trả lại các đầu vào(intput) của người

dùng và tạo sự tương tác dễ ràng hơn

DOM trong DHTML

 Các đối tượng DHTML

 Mỗi phần tử trong trang Web được xem như là một đối tượng

Sự kiện (Event)

 Một sự kiện xảy ra khi người dùng tương tác với trang Web

 Một sự kiện thông dụng được phát sinh như click chuột, di

chuyển chuột, gõ phím…

 Mỗi sự kiện được kết hợp với một đối tượng event, là đối tượng cung cấp các thông tin về sự kiện như:

 Loại sự kiện

 Vị trí của con trỏ tại thời điểm xảy ra sự kiện

 Đối tượng Event được xem như một phần của trình xử lý sự kiện (Nó được gửi tới trình xử lý sự kiện như một tham số)

Trình xử lý sự kiện (Event Handler)

 Khi một sự kiện xảy ra, một đoạn mã lệnh Javascript được thực hiện Đoạn mã này được gọi là trình xử lý sự kiện Đoạn mã có thể là các câu lệnh đơn hoặc lời gọi hàm

<INPUT TYPE="button“ NAME="docode" onClick="DoOnClick();">

<INPUT TYPE="button“ NAME=“Hello" onClick=“alert(‘Hello’);">

Trình xử lý sự kiện (Event Handling)

 Liên kết trình xử lý sự kiện với đối tượng, phần tử HTML:

 Trình xử lý sự kiện cho thẻ HTML:

ví dụ:

<INPUT TYPE="button“ NAME="docode" onClick=“alert(‘Hello !’);">

 Trình xử lý sự kiện cho đối tượng:

Vòng đời của một sự kiện

 Hành động do người sử dụng làm sự kiện xảy ra.

 Đối tượng Event ngay lập tức được cập nhật để phản ánh

trạng thái sự kiện.

 Sự kiện được kích hoạt.

 Trình xử lý sự kiện tương ứng được gọi, thực hiện các

hành động và trả về điều khiển cho chương trình.

Sự kiện bàn phím (Keyboard Event)

 Sự kiện xảy ra khi một phím từ bàn phím được ấn xuống, hoặc

được nhả ra Các sự kiện bàn phím gồm có:

 onkeydown: xảy ra khi 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ả

Sự kiện bàn phím (Keyboard Event)

Sự kiện click chuột (Mouse Click Event)

 Sự kiện xảy ra khi người dùng bấm một nút chuột

 onmousedown: Xảy ra khi nút chuột được nhấn xuống.

 onmouseup: Xảy ra khi nút chuột được nhả ra.

 onclick: Xảy ra khi nút chuột được nhấn và thả ra.

 ondblclick: Xảy ra khi nhấn đúp chuột.

 onmousemove: Xảy ra khi con trỏ chuột di chuyển từ vị trí này sang vị trí

khác.

 onmouseover: Xảy ra khi con trỏ chuột di chuyển qua một phần tử.

 onmouseout: Xảy ra khi con trỏ chuột di chuyển ra khỏi một phần tử.

Sự kiện click chuột (Mouse Click Event)

 Ví dụ: Tạo hiệu ứng RollOver cho ảnh

Sự kiện tiêu điểm(focus), và lựa chọn (selection)

 Sự kiện onfocus xảy ra bất cứ khi nào một phần tửcủa form trở thành phần tử hiện thời Chỉ khi phần tử nhận được focus nó mới 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 / 18 of

Sự kiện tiêu điểm(focus), và lựa chọn (selection)

<form name="form1" method="post" action="">

Name:<input type="text" name="txtName" onFocus="showStyle(this);" onBlur="hideStyle(this)"

Sự kiện onChange

tử text bị thay đổi hoặc khi thay đổi mục chọn của phần

Please enter a number:

<INPUT type = text size = 5 onChange="checkNum(this.value)"

>

</FORM>

</BODY>

Sự kiện onChange

onResize - Example

 onResize

kích thước cửa sổ hay frame.