First Name : Last Name :
Email : Comments : Enter your comments
68 69 BÀI TẬP: Bài tập JavaScript 14: Minh hoạ việc đọc giá trị phần tử text hiển thị hình Yêu cầu: Tạo hộp text có tên HoTen Một nút có tên HienThi, value = “Hiển thị” Khi người dùng click vào nút HienThi hiển thị nội dung hộp text hàm alert Hướng dẫn: Để lấy giá trị phần tử HTML đó, viết .value Trong đó: giá trị thuộc tính name bạn tạo thẻ Ví dụ: – Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v… Minh hoạ: Đọc giá trị hộp text Hãy gõ văn vào hộp text click vào nút Hiển thị Lưu ý: Khi muốn lấy giá trị phần tử JavaScript bạn phải đặt cho tên, ví dụ trên, để lấy giá trị hộp text ta đặt cho hộp text tên (name) HoTen Bài tập JavaScript 15: Minh hoạ việc thay đổi giá trị hộp textbox Yêu cầu: Tạo ba hộp text tên SoHang1, SoHang2, KetQua nút có tên TinhTong, để thực phép tính tổng Khi người dùng nhập hai số hạng vào hộp SoHang1 SoHang2, sau click vào nút TinhTong kết tổng lưu vào hộp text KetQua Hướng dẫn: Để thay đổi giá trị thuộc tính phần tử HTML, bạn viết theo cách sau: . = Trong đó: Tên phần tử giá trị thuộc tính name bạn tạo thẻ 70 Ví dụ: HoTen.value = “Đây văn mới”, DangKy.value = “Sign Up now”, v.v… Thayđổi giá trị thuộc tính Hãy nhập hai số click vào nút Tính tổng + = Lưu ý: – Giá trị lưu hộp text xâu, để thực phép cộng đúng, bạn cần phải chuyển giá trị sang dạng số hàm parseFloat (Hoặc parseInt) – Việc thay đổi áp dụng cho phần tử khác button, checkbox, v.v… Bài tập JavaScript 16: Minh hoạ việc gọi hàm người dùng click vào nút Yêu cầu: Tạo text có tên là: MauNen, MauChu, TieuDe, TrangThai nút có tên ThayDoi, value “Thay đổi” Khi người dùng click vào nút ThayDoi màu nền, màu chữ, tiêu đề tài liệu trạng thái cửa sổ trình duyệt thay đổi giá trị text tương ứng Hướng dẫn: Bạn hồn tồn viết nhiều câu lệnh thuộc tính OnClick ví dụ trước, nhiên có nhiều lệnh chương trình trơng khơng sáng sủa cho Khi bạn nhóm câu lệnh vào hàm thuộc tính OnClick bạn việc gọi hàm Minh hoạ mẫu: Thayđổi thuộc tính trang Web functionCapNhat() 71 { document.title =TieuDe.value;/* Thay đổi tiêu đề trang Web */ document.bgColor =MauNen.value;/* Thay đổi màu trang */ document.fgColor =MauChu.value;/* Thay đổi màu chữ trang */ window.defaultStatus =TrangThai.value;/* Thay đổi dòng trạng thái cửa sổ */ } Nhập vào giá trị nhấn nút Thayđổi Nhận xét: Ở ví dụ trên, người dùng click chuột lên nút ThayDoi hàm CapNhat( ) gọi Bài tập JavaScript 17: Hãy tạo nút nhấn (button) có value = “Thu” Khi người dùng click vào nút tiêu đề cửa sổ “Bạn click chuột” Hướng dẫn: Trước hết ta cần xác định xem lệnh cho phép ta thay đổi tiêu đề cửa sổ thành “Bạn click chuột”, đặt lệnh vào đâu để người dùng click chuột thực thi theo yêu cầu toán · Lệnh để thay đổi tiêu đề sau: title = “Bạn click chuột” · Như ta biết người dùng click kiện onClick xuất hiện, câu lệnh đặt tương ứng vào kiện onClick, sau: Hãy click vào nút quan sát tiêu đề 72 Bài tập JavaScript 18: Tạo trang Web, có phần tử: Phần tử button có value = “Gửi”, phần tử textbox.Yêu cầu: người dùng click vào nút Gửi thơng báo hình là: “Bạn click vào nút gửi” người dùng click vào textbox thơng báo “Bạn click vào textbox” Hướng dẫn: Theo u cầu dịng thông báo “Bạn click chuột vào nút gửi” xuất người dùng click chuột vào nút gửi, lệnh thực hiển thị thông báo đặt kiện onclick nút nhấn Cịn dịng thơng báo “Bạn click chuột vào text box” người dùng click chuột vào textbox, lệnh thực hiển thị dịng thơng báo đặt kiện onclick textbox: Minh hoạ: Hay click vao nut va textbox o duoi va quan sat tieu de Bài tập JavaScript 19: Tạo nút, nút thứ có value = “Xanh”, nút thứ hai có value = “Đỏ” Yêu cầu: Khi người dùng click vào nút xanh màu tài liệu xanh (blue), cịn người dùng click vào nút đỏ màu tài liệu là: Đỏ (red) Hướng dẫn: Thuộc tính màu tài liệu lưu thuộc tính bgColor đối tượng document Thuộc tính thay đổi Minh hoạ: 73 Bài tập JavaScript 20: Tạo danh sách lựa chọn gồm có màu: red, blue, brown lavender Khi người dùng chọn màu màu tài liệu thay đổi tương ứng Minh hoạ: functionDoiMau() { document.bgColor =Mau.value; / Hoặc viết: window.document.bgColor = Mau.value; } Bạn chọn màu nền: Màu đỏ Màu xanh Màu nâu Màu xanh nhạt Bài tập JavaScript 21: Tạo textarea có tên NoiDung, Textbox có tên là: SoKyTu Với yêu cầu sau: Khi người sử dụng gõ phím vào textarea số lượng ký tự (Độ dài xâu) chứa textarea hiển thị textbox Nếu số lượng ký tự textarea gõ vào vượt q 200 ký tự thơng báo: “Bạn gõ số ký tự cho phép!” functionKiemTra() { if(NoiDung.value.length >200) alert("Bạn gõ số ký tự cho phép!"); 74 SoKyTu.value =NoiDung.value.length;// Hiển thị số ký tự textbox SoKyTu } Số ký tựđã gõ: Ở ví dụ trên, hàm kiểm tra gọi kiện nhấn phím (onKeyUp) xuất hay nói cách khác người dùng gõ thêm ký tự vào textarea Bài tập JavaScript 22: Tạo nút có value = “Gửi”, textbox có name = “HoTen”, nút radio có tên GioiTinh nhãn tương ứng Nam, nữ Yêu cầu: Khi người dùng di chuyển chuột vào phần tử hiển thị thơng báo tương ứng trạng thái Ví dụ người sử dụng di chuyển chuột qua nút nhấn “Gửi” trạng thái “Bạn di chuyển chuột vào nút”… Hướng dẫn: Khi người dùng di chuyển chuột kiện di chuyển chuột xuất hiện, kiện có tên : onMoseMove Vậy ta viết lệnh kiện Minh hoạ: Xu ly su kien Nam Nữ 75 BÀI TẬP JAVASCRIPT TỰ GIẢI Bài số 1: Tạo tầng có chứa dịng chữ “Hello”, kích thước H1 nút nhấn có nhãn “Thay đổi” Khi người dùng click vào nút yêu cầu người dùng nhập vào xâu, sau thay nội dung thẻ H1 xâu nhập vào (Theo cách: thay thuộc tính innerText, innerHTML, outerText, outerHTML) Bài số 2: Tạo thẻ H1, màu chữ xanh dùng để hiển thị thời gian hệ thống (gồm giờ:phút:giây) Gợi ý: Viết hàm CapNhat để lấy giờ:phút:Giây máy tính sau gán cho thuộc tính innerText thẻ H1 Sử dụng hàm setInterval(“CapNhat();”, 1000) để liên tục cập nhật thời gian theo giây Bài số 3: Tạo tầng IE, tầng chứa ảnh Tầng thứ chạy từ trái sang phải hình, tầng thứ hai chạy từ xuống hình Gợi ý: Sử dụng hàm setInterval để gọi hàm di chuyển tầng Bài số 4: Tạo tầng chứa liên kết Chuột click vị trí tầng đặt vị trí Gợi ý: Viết lệnh kiện onClick thẻ BODY Bài số 5: Tạo form đăng ký E-Mail tương tự Yahoo (Bạn cần tạo số phần tử, không cần tạo hết) Mỗi người dùng di chuyển chuột đến phần tử hiển thị lời thích Tiếng việt (Xem Bài số 5) Bài số 6: Tạo tầng (Trong Netscape), tầng nạp trang tương ứng sau: https://vndoc.com, https://quantrimang.com https://meta.vn Bài số 7: Tạo tầng chứa ảnh, nút có nhãn “Di chuyển” Khi người dùng click vào nút ảnh di chuyển chéo từ góc bên phải xuống góc bên trái hình Gợi ý: Tăng dần pixelTop, giảm pixelLeft Bài số 8: Hãy tạo trang Web có giao diện sau: Yêu cầu: Khi người dùng di chuyển chuột đến phần tử hiển thị dịng nhắc trạng thái để hướng dẫn người dùng Ví dụ: Khi người dùng đưa chuột vào textbox User Name thì hiển thị trạng thái là: “Nhập mã người dùng”, hay người đưa chuột đến nút “Đăng ký” hiển thị dịng nhắc: “Gửi thơng tin để đăng ký” v.v… Hướng dẫn: Nút đăng ký nên nút thường, tức tạo thẻ: · Bài số 9: Có giao diện 1, yêu cầu sau: · Khi gửi thông tin đi, cần kiểm tra xem nội dung người dùng gõ ô Password với textbox ô “Gõ lại password” có giống hay không? Nếu gửi (Submit) đi, cịn khơng thơng báo “Password phải giống nhau” 76 Khi gửi thông tin, cần kiểm tra ngày sinh, tháng sinh phải hợp lệ (Tức ngày phải nhỏ 32, tháng phải nhỏ 13) Hướng dẫn: · Nút đăng ký nên nút thường, tức tạo thẻ: Trong Hàm DangKy() kiểm tra liệu hợp lệ liệu nhập vào đắn gửi cách gọi phương thức submit đối tượng document, sau: document.submit(); Bài số 10: Làm tương tự tập 8, thêm yêu cầu: Khi người dùng nhập số lượng, đơn giá tính ln textbox thành tiền Hướng dẫn: Viết lệnh tính thành tiền kiện onKeyUp hai textbox số lượng textbox đơn giá * Lưu ý: Trước tính tích cần phải kiểm tra xem liệu hai textbox có hay chưa, chưa nhập chưa tính Bài số 11: Hãy tạo menu đặt theo chiều dọc gồm mục sau: Giới thiệu Tin tức Sản phẩm Trợ giúp Yêu cầu: mục có màu xanh, màu chữ vàng (yellow) Khi người dùng di chuyển đến mục mục có màu màu đỏ Khi di chuyển chuột khỏi màu trở lại màu xanh Khi người dùng click vào mở trang tương ứng https://download.com.vn, https://vndoc.com, https://meta.vn https://quantrimang.com Gợi ý: Làm tương tự tập mẫu, tạo thẻ H2 Bài số 11: Hãy tạo menu gồm mục theo chiều ngang, Hướng dẫn: Nếu bạn dùng thẻ H2, mục tự động đặt riêng dòng Để đặt nhiều mục dịng, bạn tạo bảng có hàng nhiều cột Mỗi mục đặt thẻ Để thay đổi kích thước, màu nền, màu chữ v.v bạn sử dụng STYLE: