Bài thực hành số 2. JavaScript và DHTML

JavaScript và DHTMLMục đích: giúp sinh viên nắm được • Tạo ra sự tương tác giữa người sử dụng và trang Web • Kết hợp các kiến thức đã học trong DHTML • Thực hành trên phần mềm Macromedia

Bài thực hành số 2 JavaScript và DHTML

Mục đích: giúp sinh viên nắm được

• Tạo ra sự tương tác giữa người sử dụng và trang Web

• Kết hợp các kiến thức đã học trong DHTML

• Thực hành trên phần mềm Macromedia Dreamweaver

Nội dung:

Chú ý:

• Sinh viên không cần quan tâm nhiều đến nội dung, màu, ảnh… trong

tài liệu ví dụ Các bạn chỉ cần đưa ra được ví dụ thể hiện Đặt tên

file đúng yêu cầu.

• Vào Run gõ //sv02 Sau đó đăng nhập với user, pass là hocvien để

lấy bộ cài và file bài giảng

I JavaScript

1 Hộp thoại File MessageBox.html

Sử dụng các phương thức alert, confirm, prompt để hiển thị trên trình duyệt hộp thoại đề nghị người sử dụng nhập tên, sau đó đưa ra lời chào họ Tiếp theo hỏi người sử dụng có thích môn Thiết kế Web không và đưa ra câu trả lời của họ

2 Sự kiện File Event.html

Hiển thị một Textbox trên trình duyệt Định nghĩa các phương thức onClick, onChange, onFocus đối với đối tượng này và thử nghiệm

3 Đối tượng

a Lấy thông tin về giờ hiện tại trên máy tính Trước 12h trưa thì hiển thị trên trình duyệt dòng chữ “Good morning”; từ 12h trưa đến 18h hiển thị

“Good afternoon”, còn lại hiển thị “Good evening” File Hello.html

b Minh họa khả năng chọn thư trong các hòm thư hoặc chọn hóa đơn Khi Checkbox trên cùng được đánh dấu (hoặc không) thì các checkbox bên dưới cũng được đánh dấu (hoặc không) theo Khi các checkbox bên dưới đều được đánh dấu thì checkbox trên cùng cũng được đánh dấu

theo File CheckboxObj.html

c Hiển thị trên trình duyệt thời gian hiện tại trên máy tính Thời gian này

được cập nhật liên tục từng giây File Time.html

d Tạo một máy tính đơn giản như hình File Calculator.html

II DHTML

1 Tạo một công tắc bóng đèn như sau: trên trình duyệt có một điều khiển Checkbox Khi người sử dụng đánh dấu Checkbox thì màu nền chuyển thành

đen, khi bỏ đánh dấu thì màu nền chuyển thành trắng File Light.html

2 Nổi bọt sự kiện File Event.html Trong thẻ Body định nghĩa trình điều khiển

cho sự kiện click chuột Trong Body khai báo thêm các thẻ H1, H2, P Trong thẻ P cũng khai báo trình điều khiển cho sự kiện click chuột Hãy click chuột vào nội dung các thẻ và kiểm tra việc nổi bọt sự kiện

3 Tạo giao diện như hình sau Khi người sử dụng di chuyển chuột vào vùng màu

nào thì màu nền được chuyển thành màu vùng đó File BgColor.html

4 Tạo ToolTip, file ToolTip.html Khi người sử dụng di chuột qua một đoạn văn

bản nào đó thì hiển thị ra một chú thích Ví dụ ở đây có 2 đoạn văn bản và Coffee và Milk Khi di chuột vào Coffee thì hiển thị dòng chữ “Hot black drink” ở dưới Khi di chuột vào Milk thì hiển thị dòng chữ “Cold white drink”

5 Hiển thị một dòng chữ hiển thị ra dần dần từng chữ một Ở đây sử dụng đối tượng String để mỗi giây lấy ra một kí tự trong dòng chữ

6 Hiển thị một dòng chữ trên trình duyệt Khi di chuột vào dòng chữ thì một dòng chữ nó xuất hiện ngay dưới vị trí chuột File Cursor.html