5.3. Tạo tương tác cơ bản với trang web
5.3.4. Sử dụng câu lệnh lặp trong JavaScript
Vòng lặp while
Vòng lặp while được dùng để thực hiện một khối lệnh chừng nào điều kiện vẫn còn đúng.
Vòng lặp while thường được dùng cho các trường hợp không biết trước số lần lặp.
- Cú pháp
while ( <điều kiện> ) {
//Các câu lệnh thực thi trong khi lặp }
Hiển thị trên trình duyệt:
Hình 5.3. Kết quả ví dụ 11
Vòng lặp for
Vòng lặp for thường được dùng cho các trường hợp biết trước số lần cần lặp, biến đếm chạy trong khoảng giới hạn của vòng lặp và giá trị lặp.
- Cú pháp
for (biến-đếm=giá-trị-khởi-đầu;điều-kiện-giới-hạn-của-vòng-lặp; giá-trị-lặp;) {
//Các câu lệnh thực thi trong khi lặp }
- Ví dụ 12:
Hiển thị trên trình duyệt:
Hình 5.4. Kết quả ví dụ 12 5.3.5. Sử dụng hàm, mảng trong JavaScript
Hàm
Hàm là một khối các câu lệnh được thiết kế để thực hiện một tác vụ cụ thể nào đó. Hàm chỉ thực thi khi được gọi hàm.
- Cú pháp
function tên-hàm (tham-số1, tham-số2, …) {
//Các câu lệnh thực thi [return value;]
Một hàm có thể khơng hoặc có nhiều tham số. Khi gọi hàm có tham số, cần truyền tham số là giá trị thực tế để hàm thi hành (các tham số truyền phải đúng theo tứ tự khi định nghĩa hàm).
- Ví dụ 13:
Hiển thị trên trình duyệt:
Hình 5.5. Kết quả ví dụ 13
Mảng
Mảng Array là một đối tượng định nghĩa sẵn trong JavaScript, nó là đối tượng chứa danh sách các dữ liệu.
Có hai cách tạo ra đối tượng mảng: - Tạo mảng với new Array():
Ví dụ:
- Tạo mảng với khai báo dữ liệu trong [] Ví dụ: var courses = ["HTML", "CSS", "JS"]; Mỗi phần từ có một chỉ số trong mảng, phần tử thứ nhất chỉ số là 0. - Truy cập tới phần tử mảng: tên-mảng [chỉ-số-phần-tử] - Ví dụ 14:
Hiển thị trên trình duyệt:
Hình 5.6. Kết quả ví dụ 14 5.3.6. Sử dụng các đối tƣợng cơ bản trong JavaScript
Đối tƣợng string:
Bảng 5.1. Đối tƣợng string
Đối tƣợng number:
Bảng 5.2. Đối tƣợng number
var num=45.678;
Đối tƣợng math:
Đối tƣợng array:
Bảng 5.4. Đối tƣợng array
var arr= new Array(3); arr[0]=2, arr[1]=0, rr[2]=1;
Đối tƣợng date:
Bảng 5.5. Đối tƣợng date
5.3.7. DOM
JavaScript có thể truy cập và thay đổi tất cả các phần tử của tài liệu HTML thông qua DOM (Document Object Model - mơ hình các đối tượng trong tài liệu HTML).
JavaScript có khả năng:
Thay đổi nội dung, thuộc tính các thẻ HTML Thay đổi định dạng CSS của các thẻ HTML Xóa, thêm các thẻ và thuộc tính thẻ HTML Tương tác với các sự kiện của các thẻ HTML Truy xuấtthẻ HTML
- Truy xuất thẻ html thông qua tên id
document.getElementById(“tên_id”);
- Truy xuất thẻ html thông qua tên class
document.getElementsByClassName(“tên_class”);
- Truy xuất thẻ html thông qua tên thẻ
document.getElementsByTagName(“tên_thẻ”);
- Truy xuất thẻ html thông qua bộ chọn css:
document.querySelectorAll(“css_selector”);
Xử lý nội dung, thuộc tính thẻ HTML
- Xử lý nội dung của một thẻ
document.getElementById(id).innerHTML = “nội dung mới”
- Thay đổi giá trị thuộc tính thẻ
document.getElementById(id).attribute = “giá trịmới”
- Ví dụ 16: thay đổi giá trị thuộc tính src cho thẻ có id là “myImage”
Xử lý địnhdạng css
- Thay đổikiểuđịnhdạng cho thẻ:
document.getElementById(id).style.thuộc-tính = “giá trịmới”
- Ví dụ 17: thay đổi màu chữ cho thẻ có id là “demo”
5.4. LÀM VIỆC VỚI WEB FORM 5.4.1. Xử lý sự kiện 5.4.1. Xử lý sự kiện
Sự kiện là kết quả thao tác của người dùng tác động lên đối tượng. Một sự kiện bao gồm 2 thông tin:
Kiểu sự kiện: click, double click, change,.. Vị trí của con trỏ tại thời điểm xảy ra sự kiện. Các sự kiện thƣờng dùng:
Bảng 5.6. Sự kiện
Tên sự kiện Mô tả
onblur() Sự kiện xảy ra khi phần tử bị mất focus (khơng cịn được chọn bởi người dùng).
onchange() Sự kiện xảy ra khi phần tử đã thay đổi (ví dụ, một người dùng gõ vào một ô nhập liệu)
onclick() Sự kiện xảy ra khi nhấn chuột vào một phần tử.
ondbclick() Sự kiện xảy ra khi nhấn đúp chuột vào một phần tử.
onfocus() Sự kiện xảy ra khi phần tử nhận được focus (phần tử được chọn).
onkeydown() Sự kiện xảy ra khi một phím được nhấn trong khi phần tử đang được chọn
onkeypress() Sự kiện xảy ra khi một phím được nhấn khi phần tử đang được chọn.
onkeyup() Sự kiện xảy ra khi Một phím được nhả ra khi phần tử đang được chọn.
onload() Sự kiện xảy ra khi phần tử được tải lên trang web (văn bản, frameset hoặc hình ảnh).
onunload() Sự kiện xảy ra khi đóng trang web
onmousedown() Sự kiện xảy ra khinhấn chuột.
onmouseout() Sự kiện xảy ra khi di chuyển chuột ra ngoài một phần tử.
onmouseover() Sự kiện xảy ra khi chuột di chuyển trên một phần tử.
onmouseup() Sự kiện xảy ra khi khi nhả chuột
onreset() Sự kiện xảy ra khiphần tử form được reset (như khi nhấn button reset trên form)
onresize() Sự kiện xảy ra khi thay đổi kích thước cửa sổ.
onselect() Sự kiện xảy ra khi nội dung của một phần tử trên form được chọn.
onsubmit() Sự kiện xảy ra khi form được gửi đi (submit)
onunload() Sự kiện xảy ra khi văn bản hoặc frameset
được gỡ bỏ. Bắt sự kiện trong JavaScript
Trước khi bắt sự kiện cần phải xác định rõ ba thành phần: Phần tử dùng để xảy ra sự kiện.
Sự kiện sẽ xảy ra.
Đoạn mã sẽ được thực thi khi sự kiện xảy ra. - Cú pháp dùng bắt sự kiện:
<Tên-phần-tử Tên-sự-kiện=“đoạn mã thực thi”>
- Ví dụ 18: khi người dùng bấm chuột vào nút "Xin chào" thì hàm hello() sẽ được thực thi
- Ví dụ 19: khi người dùng mở trang thì hiển thị hộp thơng báo u cầu nhập Tên sau đó xuất câu chào “Hi tên-nhập, welcome to my pages”. Khi đóng trang hiển thị câu thơng báo “Good bye tên-nhập, see you again !”
5.4.2. Kiểm tra tính hợp lệ của dữ liệu trong form bằng JavaScript
Kiểm tra tính hợp lệ của dữ liệu trong form là kiểm tra xem thông tin cần thiết mà người dùng điền vào form có đúng yêu cầu hay chưa.
Kiểm tra hợp lệ cho form rất cần thiết để đảm bảo tính đúng đắn của dữ liệu mà người dùng nhập.
* Lưu ý: Trong HTML5 có một số thuộc tính cho phép kiểm tra tính hợp lệ dữ liệu nhập bằng cách thiết lập các thuộc tính của phần tử như thuộc tính required, min, max, pattern,…
- Ví dụ 20: tạo form cho người dùng nhập Username, Password. Username, Password bắt buộc phải nhập và phải trùng với Username, Password cho trước.
- Hiển thị trên trình duyệt:
Hình 5.7. Kết quả ví dụ 20 5.5. BÀI TẬP ÁP DỤNG
1. Hãy hiển thị ngày và giờ của hệ thống máy tính khi trang Web được nạp. Thơng tin hiển thị ra có dạng như sau:
2. Tạo form có danh sách cho người dùng lựa chọn gồm có 4 màu: red, blue, brown và lavender. Khi người dùng chọn một màu thì màu nền của trang web sẽ thay đổi tương ứng.
3. Kiểm tra dữ liệu nhập cho form với yêu cầu:
- Bắt buộc nhập dữ liệu cho Password, Re-enter Password - Password phải có độ dài tối thiểu 6 ký tự
TÀI LIỆU THAM KHẢO
Tiếng Việt:
[I]. Thạc Bính Cường, Vũ Thị Hậu. Giáo trình thiết kế web, NXB Giáo dục, 2009.
[II]. Nguyễn Minh Hoàng, Hướng dẫn thực hành Dreamweaver CS5, Hồng
Đức, 2011
[III]. Nguyễn Trường Sinh, Thiết kế Web động với JavaScript, NXB Tri thức, 2013
[IV]. Jeremy Osborn và Nhóm AGI Creative, HTML5 và CSS3 - Thiết kế trang web thích ứng giàu tính năng, NXB Bách Khoa Hà Nội, 2015
[V]. https://hocwebchuan.com
Tiếng Anh:
[VI]. Ebook, CSS Notes for Professionals [VII]. Ebook, HTML5 Notes for Professionals [VIII]. https://www.w3schools.com
PHỤ LỤC BẢNGMÀU CƠ BẢN
Màu sắc RGB Mã màu Tên màu
Đỏ Đỏ sẫm Xanh lá cây Xanh lá cây nhạt Xanh lam Vàng Vàng nhạt Vàng (kim loại) Trắng Đen Xám Nâu Cánh sen Tím Hồng Da cam
Xanh hải quân Xanh olive Nâu sẫm Tía rgb(255,0,0) rgb(139,0,0) rgb(0,218,0) rgb(144,238,144) rgb(0,0,255) rgb(255,255,0) rgb(255,255,224) rgb(255,215,0) rgb(255,255,255) rgb(0,0,0) rgb(218,218,218) rgb(165,42,42) rgb(165,42,42) rgb(238,130,238) rgb(255,192,203) rgb(255,165,0) rgb(0,0,128) rgb(128,128,0) rgb(128,0,0) rgb(128,0,128) #FF0000 #8B0000 #00FF00 #90EE90 #0000FF #FFFF00 #FFFFE0 #FFD700 #FFFFFF #000000 #808080 #A52A2A #FF00FF #EE82EE #FFC0CB #FFA500 #000080 #808000 #800000 #800080 red darkred green lightgreen blue yellow lightyellow gold white black gray brown magenta violet pink orange navy olive maroon purple
DANH MỤC HÌNH
Hình 1.1. Sơ đồ website ................................................................................................... 3
Hình 1.2. Bố cục thơng thường của một trang web ......................................................... 4
Hình 1.3. Trang web có bố cục thơng thường ................................................................. 5
Hình 2.1. Cấu trúc của tài liệu html................................................................................. 8
Hình 2.2. Các ký tự đặc biệt trong HTML ...................................................................... 8
Hình 2.3. Trình soạn thảo Notepad++ ............................................................................. 9
Hình 2.4. Hộp thoại Save As ........................................................................................... 9 Hình 2.5. Menu lệnh Run ................................................................................................ 9 Hình 2.6. Kết quả ví dụ 1 .............................................................................................. 10 Hình 2.7. Kết quả ví dụ 4 .............................................................................................. 14 Hình 2.8. Kết quả ví dụ 5 .............................................................................................. 14 Hình 2.9. Kết quả ví dụ 6 .............................................................................................. 15 Hình 2.10. Kết quả ví dụ 7 ............................................................................................ 16 Hình 2.11. Kết quả ví dụ 8 ............................................................................................ 17 Hình 2.12. Kết quả ví dụ 9 ............................................................................................ 18 Hình 2.13. Kết quả ví dụ 10 .......................................................................................... 18 Hình 2.14. Kết quả ví dụ 13 .......................................................................................... 20 Hình 2.15. Kết quả ví dụ 14 .......................................................................................... 22 Hình 2.16. Kết quả ví dụ 24 .......................................................................................... 27 Hình 2.17. Kết quả ví dụ 25 .......................................................................................... 29 Hình 2.18. Ví dụ form ................................................................................................... 30 Hình 2.19. Kết quả ví dụ 26 .......................................................................................... 36 Hình 2.20. Kết quả ví dụ 27 .......................................................................................... 37 Hình 2.21. Kết quả ví dụ 28 .......................................................................................... 39 Hình 2.22. Kết quả ví dụ 29 .......................................................................................... 39 Hình 2.23. Kết quả ví dụ 30 .......................................................................................... 40 Hình 2.24. Kết quả ví dụ 31 .......................................................................................... 42 Hình 2.25. Bố cục trang ................................................................................................. 42
Hình 3.2. Cửa sổ Files ................................................................................................... 48
Hình 3.3. Hộp thoại Site setup – thẻ Advanced ............................................................ 48
Hình 3.4. Hộp thoại Site setup – thẻ Server .................................................................. 49
Hình 3.5. Hộp thoại Basic ............................................................................................. 49
Hình 3.6. Hộp thoại Manage Sites ................................................................................. 50
Hình 3.7. Hộp thoại Files .............................................................................................. 51
Hình 3.8. Lệnh kiểm tra liên kết .................................................................................... 51
Hình 3.9. Lệnh sửa lỗi liên kết ...................................................................................... 52
Hình 3.10. Cửa sổ Validation ........................................................................................ 52
Hình 3.11. Cửa sổ Browser Compatibility .................................................................... 52
Hình 3.12. Cửa sổ Dreamweaver .................................................................................. 53
Hình 3.13. Lệnh kiểm tra trang web trên trình duyệt .................................................... 54
Hình 3.14. Cửa sổ Properties ......................................................................................... 55
Hình 3.15. Lệnh tạo tiêu đề ........................................................................................... 55
Hình 3.16. Lệnh canh lề ................................................................................................ 56
Hình 3.17. Lệnh tạo danh sách ...................................................................................... 56
Hình 3.18. Lệnh định dạnh chữ ..................................................................................... 57
Hình 3.19. Hộp thoại Select Image Source ................................................................... 57
Hình 3.20. Cửa sổ Properties ......................................................................................... 58
Hình 3.21. Cửa sổ Properties ......................................................................................... 59
Hình 3.22. Hộp thoại Table ........................................................................................... 60
Hình 3.23. Cửa sổ Properties ......................................................................................... 60
Hình 3.24. Cửa sổ Properties ......................................................................................... 61
Hình 3.25. Hộp thoại Split Cell ..................................................................................... 62
Hình 3.26. Lệnh chèn cột/ hàng ..................................................................................... 62
Hình 3.27. Lệnh tạo Form ............................................................................................. 63
Hình 3.28. Hộp thoại thuộc tính thẻ input ..................................................................... 64
Hình 3.31. Cửa sổ Properties ......................................................................................... 66
Hình 3.32. Cửa sổ Properties ......................................................................................... 66
Hình 3.33. Hộp thoại List values .................................................................................. 67
Hình 3.34. Cửa sổ Properties ......................................................................................... 67
Hình 3.35. Cửa sổ Properties ......................................................................................... 68
Hình 3.36. Cửa sổ CSS Styles ....................................................................................... 68
Hình 3.37. Cửa sổ New CSS Rule ................................................................................ 69
Hình 3.38. Danh sách chọn Selector type...................................................................... 69
Hình 3.39. Danh sách chọn Rule Definition ................................................................. 70
Hình 3.40. Hộp thoại CSS Rule definition .................................................................... 70
Hình 3.41. Hộp thoại Background ................................................................................. 71 Hình 3.42. Hộp thoại Block ........................................................................................... 72 Hình 3.43. Hộp thoại Box .............................................................................................. 73 Hình 3.44. Hộp thoại Border ......................................................................................... 73 Hình 3.45. Hộp thoại List .............................................................................................. 74 Hình 3.46. Hộp thoại Positioning .................................................................................. 74
Hình 3.47. Hộp thoại Attach Style Sheet ...................................................................... 75
Hình 4.1. Kết quả ví dụ 3 .............................................................................................. 81
Hình 4.2. Nội dung file teststyle.css .............................................................................. 82
Hình 4.3. Nội dung file test.html ................................................................................... 83
Hình 4.4. Kết quả ví dụ 4 .............................................................................................. 83 Hình 4.5. Kết quả ví dụ 5 .............................................................................................. 84 Hình 4.6. Kết quả ví dụ 6 .............................................................................................. 85 Hình 4.7. Kết quả ví dụ 7 .............................................................................................. 87 Hình 4.8. Kết quả ví dụ 12 ............................................................................................ 90 Hình 4.9. Kết quả ví dụ 13 ............................................................................................ 93
Hình 4.10. Các kiểu list style ......................................................................................... 94
Hình 4.13. Vị trí hiển thị ảnh nền tính theo khoảng cách x, y....................................... 98
Hình 4.14. Các kiểu đường viền .................................................................................. 100
Hình 4.15. Kết quả ví dụ 20 ........................................................................................ 102 Hình 4.16. Các vị trí lề ................................................................................................ 102 Hình 4.17. Kết quả ví dụ 21 ........................................................................................ 103 Hình 4.18. Các vị trí padding ...................................................................................... 105 Hình 4.19. Kết quả ví dụ 26 ........................................................................................ 106 Hình 4.20. Kết quả ví dụ 31 ........................................................................................ 110 Hình 4.21. Kết quả ví dụ 32 ........................................................................................ 112 Hình 4.22. Mơ hình hộp .............................................................................................. 113
Hình 4.23. Ví dụ minh họa các giá trị thuộc tính overflow ......................................... 115
Hình 4.24. Thứ tự xếp chồng các phần tử ................................................................... 116
Hình 4.25. Ví dụ minh họa thuộc tính display ............................................................ 117
Hình 4.26. Ví dụ minh họa thuộc tính box-sizing ....................................................... 117
Hình 4.27. Kết quả ví dụ 33 ........................................................................................ 118 Hình 4.28. Kết quả ví dụ 34 ........................................................................................ 120 Hình 4.29. Kết quả ví dụ 36 ........................................................................................ 123 Hình 4.30. Kết quả ví dụ 37 ........................................................................................ 124 Hình 4.31. Kết quả ví dụ 38 ........................................................................................ 125 Hình 4.32. Kết quả ví dụ 39 ........................................................................................ 127 Hình 4.33. Kết quả ví dụ 40 ........................................................................................ 130 Hình 5.1. Kết quả ví dụ 3 ............................................................................................ 135 Hình 5.2. Kết quả ví dụ 7 ............................................................................................ 137 Hình 5.3. Kết quả ví dụ 11 .......................................................................................... 141 Hình 5.4. Kết quả ví dụ 12 .......................................................................................... 142 Hình 5.5. Kết quả ví dụ 13 .......................................................................................... 143 Hình 5.6. Kết quả ví dụ 14 .......................................................................................... 144 Hình 5.7. Kết quả ví dụ 20 .......................................................................................... 153
DANH MỤC BẢNG Bảng 2.1. Các thuộc tính thẻ <img> .............................................................................. 19 Bảng 2.2. Các thuộc tính thẻ <audio> ........................................................................... 20 Bảng 2.3. Các thuộc tính thẻ <video> ........................................................................... 21 Bảng 2.4. Các thuộc tính thẻ <object> .......................................................................... 22 Bảng 2.5. Ký hiệu đường dẫn ........................................................................................ 23 Bảng 2.6. Các thuộc tính thẻ <a> .................................................................................. 24 Bảng 2.7. Các thẻ tạo bảng ............................................................................................ 26 Bảng 2.8. Các thuộc tính thẻ <form> ............................................................................ 31 Bảng 2.9. Các thuộc tính thẻ <input> ............................................................................ 32 Bảng 2.10. Các thuộc tính thẻ <select> ......................................................................... 36 Bảng 2.11. Các thuộc tính thẻ <option> ........................................................................ 37 Bảng 2.12. Các thuộc tính thẻ <textarea> ..................................................................... 38 Bảng 4.1. Cách viết bộ chọn .......................................................................................... 78 Bảng 4.2. Bảng đơn vị đo .............................................................................................. 80
Bảng 5.1. Đối tượng string .......................................................................................... 144
Bảng 5.2. Đối tượng number ....................................................................................... 145
Bảng 5.3. Đối tượng math ........................................................................................... 145
Bảng 5.4. Đối tượng array ........................................................................................... 146
Bảng 5.5. Đối tượng date ............................................................................................. 146