a) Tham chiếu đến giá trị của thẻ
Để lấy được thơng tin mà người dùng đã nhập vào form để kiểm tra tính hợp lệ, chúng ta cần tham chiếu đến các thành phần của form. Để tham chiếu đến form, bạn cần chú ý đến tên form và tên của các thành phần trong form mà bạn dự định sẽ lấy dữ liệu.
THẺ VD
Text document.ten_form.ten_txt.value
Password document.ten_form.ten_txtpass.value
Textarea document.ten_form.ten_txtarea.value
Select (combobox) document.ten_form.ten_combo.value Select (listbox) document.ten_form.ten_listbox.value
Checkbox document.ten_form.ten_checkbox[i].value
Radio document.ten_form.ten_radio[i].value
… …
b) Tham chiếu đến chiều dài của thẻ
Để lấy được chiều dài của thơng tin nhập nhiệu, chúng ta cần lấy được thơng tin đĩ trước, rồi sau đĩ mới xem chiều dài của thơng tin.
THẺ VD
Text document.ten_form.ten_txt.value.length
Password document.ten_form.ten_txtpass.value. length
Textarea document.ten_form.ten_txtarea.value. length
Select (listbox) document.ten_form.ten_listbox.value. length
Checkbox document.ten_form.ten_checkbox[i].value. length
Radio document.ten_form.ten_radio[i].value. length
… …
c) Tham chiếu đến trạng thái của thẻ
Chỉ cĩ một số đối tượng trong form cĩ thể kiểm tra trạng thái.
THẺ VD
Select (combobox) document.ten_form.ten_combo.selected
Select (listbox) document.ten_form.ten_listbox. selected
Checkbox document.ten_form.ten_checkbox[i]. checked
Radio document.ten_form.ten_radio[i]. checked
… …
Nếu muốn tham chiếu đến trạng thái của một khung nhập liệu (chằng hạn như Text Fiels, Password Field, …) cĩ được nhập thơng tin vào chưa, ta quay về với dạng tham chiếu đến giá trị của các Fields đĩ. Nếu sau khi tham chiếu mà trả về là rỗng tức là Field đĩ chưa được nhập liệu.
d) Một số phương thức
PHƯƠNG THỨC DIỄN GIẢI
document.ten_form.ten_tp_form.focus() Đặt con trỏ nhấp nháy vào một thành phần cĩ tên là ten_tp_form trong form cĩ tên là ten_form
window.close() Đĩng của sổ hiện tại
window.open(URL) Mở cửa sổ trình duyệt với địa chỉ URL
window.history.back(i) Trở về cửa sổ trình duyệt trang web i lần window.history.go(i) Trở về cửa sổ trình duyệt trang web i lần
… …
e) Thao tác trên id của thẻ HTML
Khi muốn viết nội dung vào các thành phần của form ta quay về dạng tham chiếu đến giá trị của thẻ và chỉ việc gán nội dung. Nhưng nếu đĩ là một thẻ HTML khơng thuộc thành phần của biểu mẫu, chúng ta khơng thể áp dụng theo cách tham chiếu giá trị được. Lúc này chúng ta sẽ sử dụng thuộc tính id để nhận dạng các thẻ HTML cần chèn thêm thơng tin từ JavaScript. Sau đĩ sử dụng thành phần getElementById(“ten_id”). Tuy nhiên cĩ hai dạng truy cập vào id của một thẻ HTML.
Viết nội dung vào hoặc lấy nội dung đã trình bày sẵn trong cặp thẻ HTML đã được đặt trước một id:
Thao tác với id của thẻ:
Trường hợp vừa muốn thao tác lên thẻ cĩ id được chỉ định lại vừa muốn thao tác trên nội dung bên trong của thẻ:
f) Sừ dụng một số đối tượng Đối tượng String:
document.getElementById("ten_ID").innerHTML
document.getElementById("ten_ID").id
Ví dụ 4-8: Sử dụng một số phương thức trong đối tượng String
Đối tượng Date:
var txt =“ Hello world!”; document.write (txt.length);
document.write (txt.toUpperCase()); document.write (txt.substring(4,8));
Ví dụ 4-9: Sử dụng một số phương thức của đối tượng Date
Đối tượng Array:
Ví dụ 4-10: Sắp xếp mảng bằng phương thức sort()
var myDate = new Date();
myDate.setFullYear(2010,0,14); myDate.setDate(myDate.getDate()+5); myDate.setFullDate(2010,0,14); var today = new Date();
if (myDate > today )
alert(“Hơm nay chưa đến ngày 14/1/2010”); else
Ví dụ 4-11: Sử dụng phương thức ghép chuỗi
Câu hỏi (bài tập) củng cố:
1. Hãy thiết kế trang HTML như sau. Yêu cầu: Khi click vào mục chọn màu nào thì hiện lên thơng báo rằng bạn đã chọn màu đĩ. Lưu bài tập với tên JS_baitap1.html
2. Hãy thiết kế trang HTML như sau, lưu bài tập với tên JS_baitap2.html. Dùng Javascript để xử lý các nút:
- Nút lời chào, khi click vào hiện ra lời chào: Chào mừng bạn đến với Javascript. - Khi bạn nhập họ tên vào textbox, click vào nút Xong, hộp thoại hiện ra tên bạn vừa nhập.
- Khi click vào nút đĩng trang web, website của bạn sẽ bị đĩng lại.
3. Viết chương trình mơ phổng máy tính điện tử. Lưu bài với tên JS_baitap3.html. - Sau khi bạn nhập vào 2 số a, b. Bạn hãy chọn một phép tốn và xem kết quả của phép tốn đĩ
4. Bạn hãy thiết kế form như sau, lưu bài tập với tên JS_baitap4.html Lưu ý:
- Nếu người dùng chưa nhập tên, chương trình xuất hiện thơng báo. Sau đĩ con trỏ chuột xuất hiện trong ơ cần nhập tên.
- Tương tự, hãy lập trình cho ơ nhập tuổi.
- Đặc biệt, nếu người dùng nhập tuổi là ký tự hoặc số âm thì hiện thơng báo lỗi, yêu cầu nhập lại, xĩa bỏ dữ liệu trong ơ tuổi cũ, đặt con trỏ chuột vào ơ tuổi để người dùng nhập lại.
Nếu người dùng nhập đúng thơng tin, click vào nút gửi, sẽ hiện lên thơng tin về tên, tuổi, năm sinh của người dùng.
5. Hãy viết một thơng báo yêu cầu người dùng nhập vào một chuỗi. Sau đĩ kiểm tra xem chuỗi vừa nhập cĩ bao nhiêu ký tự. Lưu bài tập với tên JS_baitap5.html
6. Cho trước một mảng gồm danh sách các trái cây: orange, banana, mango, lemon, melon, tomato. Hãy sắp xếp lại theo thứ tự abc. Lưu bài tập với tên JS_baitap6.html.
7. Cho hai mảng, mảng thứ nhất gồm các phần tử: 1, 2, 3. Mảng thứ hai gồm các phần tử: Nguyễn Văn A, Trần Văn C, Nguyễn Thị C
8. Hãy tạo trang JS_baitap8.html. Chú ý:
- Kiểm tra tên đăng nhập khơng thể rỗng và nếu chiều dài khác 9 ký tự thì báo lỗi - Kiềm tra mật khẩu phải cĩ ít nhất 6 ký tự và nhiều nhất là 12 ký tự.
- Sau khi điền thơng tin và click vào nút nhập, thơng tin vừa nhập sẽ được điền vào các cột tương ứng của table.
9. Hãy tạo trang JS_baitap9.html. Yêu cầu:
- Sau mỗi lần khách hàng nhập vào số lượng bức tranh thì tổng thành tiền được cập nhật.
TÀI LIỆU THAM KHẢO
TÀI LIỆU THAM KHẢO ĐỂ BIÊN SOẠN NỘI DUNG MƠN HỌC:
[1] - Xây dựng ứng dụng Web bằng PHP & MySQL - chương 1, 2 - Phạm Hữu Khang, NXB Phương Đơng, 2007.
[2] – Bài giảng mơn Lập trình Web, phần HTML, JavaScript – Đỗ Thanh Nghị - Khoa Cơng nghệ Thơng tin và Truyền thơng, Trường Đại học Cần Thơ.
[3] – Bài giảng mơn Thiết kế Web - Phạm Thị Trúc Mai – Bộ mơn Cơng nghệ Thơng tin, Khoa Kỹ thuật & Cơng nghệ, Trường Đại học Trà Vinh.
[4] – Tài liệu CSS cơ bản của tác giả WallPearl, địa chỉ Email: wallpearl@gmail.com. [5] – http://www.w3schools.com/books/default.asp
TÀI LIỆU THAM KHẢO ĐỀ NGHỊ CHO HỌC VIÊN:
[1] - Xây dựng ứng dụng Web bằng PHP & MySQL - chương 1, 2 - Phạm Hữu Khang, NXB Phương Đơng, 2007.
[2] – Tài liệu CSS cơ bản của tác giả WallPearl, địa chỉ Email: wallpearl@gmail.com. [3] – http://www.w3schools.com/books/default.asp