Bài thực hành số JavaScript DHTML Mục đích: giúp sinh viên nắm • Tạo tương tác người sử dụng trang Web • Kết hợp kiến thức học DHTML • Thực hành phần mềm Macromedia Dreamweaver Nội dung: Chú ý: I • Sinh viên không cần quan tâm nhiều đến nội dung, màu, ảnh… tài liệu ví dụ Các bạn cần đưa ví dụ thể Đặt tên file yêu cầu • Vào Run gõ //sv02 Sau đăng nhập với user, pass hocvien để lấy cài file giảng JavaScript Hộp thoại File MessageBox.html Sử dụng phương thức alert, confirm, prompt để hiển thị trình duyệt hộp thoại đề nghị người sử dụng nhập tên, sau đưa 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 đưa câu trả lời họ Sự kiện File Event.html Hiển thị Textbox trình duyệt Định nghĩa phương thức onClick, onChange, onFocus đối tượng thử nghiệm Đối tượng a Lấy thông tin máy tính Trước 12h trưa hiển thị trình duyệt dòng chữ “Good morning”; từ 12h trưa đến 18h hiển thị “Good afternoon”, lại hiển thị “Good evening” File Hello.html b Minh họa khả chọn thư hòm thư chọn hóa đơn Khi Checkbox đánh dấu (hoặc không) checkbox bên đánh dấu (hoặc không) theo Khi checkbox bên đánh dấu checkbox đánh dấu theo File CheckboxObj.html c Hiển thị trình duyệt thời gian máy tính Thời gian cập nhật liên tục giây File Time.html d Tạo máy tính đơn giản hình File Calculator.html II DHTML Tạo công tắc bóng đèn sau: trình duyệt có điều khiển Checkbox Khi người sử dụng đánh dấu Checkbox màu chuyển thành đen, bỏ đánh dấu màu chuyển thành trắng File Light.html Nổi bọt kiện File Event.html Trong thẻ Body định nghĩa trình điều khiển cho kiện click chuột Trong Body khai báo thêm thẻ H1, H2, P Trong thẻ P khai báo trình điều khiển cho kiện click chuột Hãy click chuột vào nội dung thẻ kiểm tra việc bọt kiện Tạo giao diện hình sau Khi người sử dụng di chuyển chuột vào vùng màu màu 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 đoạn văn hiển thị thích Ví dụ có đoạn văn Coffee Milk Khi di chuột vào Coffee hiển thị dòng chữ “Hot black drink” Khi di chuột vào Milk hiển thị dòng chữ “Cold white drink” Hiển thị dòng chữ hiển thị chữ Ở sử dụng đối tượng String để giây lấy kí tự dòng chữ Hiển thị dòng chữ trình duyệt Khi di chuột vào dòng chữ dòng chữ xuất vị trí chuột File Cursor.html