Thực hành thiết kế Web - Bài thực hành số 2: JavaScript và DHTML

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.
JavaScript
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ọ.
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.
Đối tượng
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
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
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
Tạo một máy tính đơn giản như hình. File Calculator.html
DHTML
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
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.
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
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”.
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ữ.
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