4.7. Tạo thanh điều hướng cho trang web
4.7.1. Pseudo-classes cho liên kết
Pseudo-Classes for Link cho phép xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định.
Pseudo-classes bắt đầu với dấu hai chấm (:) - Cú pháp:
a:pseudo-classes { thuộc tính: giá trị; }
Định dạng liên kết khi chƣa ghé thăm
- Cú pháp:
a:link { thuộc tính: giá trị; }
Định dạng liên kết khi đã ghé thăm
- Cú pháp:
a:visited { thuộc tính: giá trị; }
Định dạng liên kết khi đƣa chuột trên liên kết
- Cú pháp:
a:hover { thuộc tính: giá trị; }
Định dạng liên kết khi liên kết đang đƣợc kích hoạt
- Cú pháp:
a:active { thuộc tính: giá trị; }
* Lưu ý: Khi ta định dạng cho liên kết theo trạng thái, các trạng thái phải
Ví dụ 35: Thiết lập các trạng thái liên kết:
- Liên kết chưa thăm: chữ màu vàng, nền màu xanh lá, khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px.
- Liên kết có chuột đi qua: chữ màu đỏ đậm, chữ to hơn (1.2em), nền màu vàng (gold), khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px.
- Liên kết đã thăm: chữ màu trắng, nền màu xanh lá, khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px.
- Liên kết đang kích hoạt: chữ màu đỏ, nền màu xanh vàng (yellowgreen), khơng có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px. - Code CSS:
4.7.2. Tạo thanh điềuhƣớng dọc
Có nhiều cách để tạo thanh điều hướng, cách phổ biến nhất là tạo thanh điều hướng bằng danh sách sử dụng các thẻ <ul> và <li>.
Ví dụ 36: - Code CSS:
Hiển thị trên trình duyệt:
Hình 4.29. Kết quả ví dụ 36
4.7.3. Tạo thanh điều hƣớng ngang
Tương tự như taọ thanh điều hướng dọc, nhưng thanh điều hướng ngang sử dụng thuộc tính display: inline để hiển thị các phần tử <li> trên cùng một dòng. Ví dụ 37:
- Code HTML:
Hiển thị trên trình duyệt:
Hình 4.30. Kết quả ví dụ 37
Tương tự như trên nhưng sử dụng thuộc tính display: flex để taọ thanh điều hướng dọc hoặc thanh điều hướng ngang.
Ví dụ 38: - Code CSS:
- Hiển thị trên trình duyệt:
Hình 4.31. Kết quả ví dụ 38
4.8. ĐỊNH DẠNG BẢNG BIỂU BẰNG CSS
Các thuộc tính định dạng bảng bao gồm: width, height, border, border- collapse, margin, padding, text-align, vertical-align, background-color.
Thuộc tính height: quy định chiều cao của ơ, dịng, bảng
Thuộc tính width: quy định chiều rộng của ơ, dịng, bảng
Thuộc tính border: quy định đường viền cho bảng
Thuộc tính margin: quy định lề cho bảng
Thuộc tính padding: quy định vùng đệm giữa đường viền và nội dung trong
Thuộc tính background-color: thiết lập màu nền cho bảng
Thuộc tính text-align: canh chỉnh nội dung trong bảng theo chiều ngang. Thuộc tính vertical-align: canh chỉnh nội dung trong bảng theo chiều đứng.
- Cú pháp:
{ vertical-align: giá trị;}
Các giá trị:
+ top: nội dung nằm ở trên + bottom: nội dung nằm ở dưới + middle nội dung nằm ở giữa Thuộc tính border-collapse:
Dùng xác định kết hợp hoặc tách riêng đường viền của bảng. - Cú pháp: { border-collapse: giá trị;}
Các giá trị:
+ collapse: kết hợp đường viền (loại bỏ khoảng trống giữa các đường viền)
+ separate: phân tách đường viền Ví dụ 39:
- Code HTML:
- Hiển thị trên trình duyệt:
Hình 4.32. Kết quả ví dụ 39 4.9. ĐỊNH DẠNG BIỂU MẪU BẰNG CSS
Các thuộc tính định dạng biểu mẫu (form) bao gồm: width, height, border, margin, padding, text-align, vertical-align, background-color.
Thuộc tính height: quy định chiều cao của phần tử form Thuộc tính width: quy định chiều rộng của phần tử form Thuộc tính border: quy định đường viền cho phần tử form
Thuộc tính padding: quy định vùng đệm giữa đường viền và nội dung trong phần tử form
Thuộc tính background-color: thiết lập màu nền cho phần tử form Ví dụ 40:
- Code CSS:
- Code HTML:
4.10. BÀI TẬP ÁP DỤNG
Thiết kế trang web có nội dung và định dạng như mẫu.
BÀI 5 - NGÔN NGỮ JAVASCRIPT Giới thiệu:
Trong bài học này sẽ cung cấp cho người học các kiến thức cơ bản về ngôn ngữ lập trình kịch bản JavaScript như: cách thức viết một đoạn mã JavaScript để tạo ra tương tác giữa trang web với người dùng, cách xử lý các sự kiện trên form.
Mục tiêu:
- Trình bày được các đối tượng cơ bản trong JavaScript - Nhúng được đoạn mã JavaScript vào trang web.
- Tạo được tương tác cơ bản với trang web bằng JavaScript
- Sử dụng được JavaScript để viết kịch bản đơn giản cho trang web.
5.1. GIỚI THIỆU VỀ JAVASCRIPT
JavaScript là một ngơn ngữ lập trình kịch bản phía máy khách, mã lệnh được thực thi bởi trình duyệt của người dùng.
JavaScript được sử dụng rộng rãi trong việc kết hợp với HTML/CSS để thiết kế web động.
JavaScript có thể tăng cường tính động và tính tương tác của các trang web.
Cung cấp sự tương tác người dùng Thay đổi nội dung động
Xác nhận tính hợp lệ của dữ liệu
5.2. NHÚNG JAVASCRIPT VÀO TRANG WEB
JavaScript được viết dưới dạng câu lệnh, các câu lệnh này được đặt bên trong cặp thẻ <script></script>
Có hai cách để nhúng mã lệnh JavaScript vào trang web: Cách 1: Đặt mã lệnh JavaScript trực tiếp vào trang web Cách 2: Đặt mã lệnh JavaScript bên trong một tập tin .js
5.2.1. Đặt mã lệnh JavaScript trực tiếp vào trang web
Mã lệnh JavaScript được đặt bên trong cặp thẻ <head></head> hoặc cặp thẻ <body></body> của trang web.
Trong một trang web có thể sử dụng nhiều đoạn mã lệnh <script>.
* Lưu ý: - Các đoạnmã lệnh <script> có thể được đặt ở bất kỳ nơi nào trong trang web. Tuy nhiên nên đặt chúng ở vị trí cuối cùng trong phần tử <body> . Điều đó giúp cải thiện tốc độ tải giao diện của trang web và tránh một số trường hợp xảy ra lỗi thực thingoài mong đợi.
Ví dụ 1: viết mã lệnh JavaScript xuất dịng Hello World! ở cửa sổ trình duyệt
<!DOCTYPE html> <head> <script > // mã lệnh JavaScript </script> <head> Hoặc <body> <script > // mã lệnh JavaScript </script> <body>
5.2.2. Đặt mã lệnh JavaScript bên trong một tập tin .js
Mã lệnh JavaScript được viết trong một tập tin có phần mở rộng là .js và được liên kết với trang web bằng thẻ <script> với cú pháp:
* Lưu ý: không đặt mã lệnh JavaScript bên trong cặp thẻ <script></script> trong tập tin .js
Ví dụ 2: viết mã lệnh JavaScript trong tập tin vd1.js để xuất dòng Hello World! ở cửa sổ trình duyệt.
Nội dung tập tin vd1.js:
document.write("Hello World!");
Nội dung tập tin vidu1.html:
<!DOCTYPE html>
5.3. TẠO TƢƠNG TÁC CƠ BẢN VỚI TRANG WEB 5.3.1. Hiển thị dữ liệu ra màn hình trong JavaScript
JavaScript không hỗ trợ hiển thị dữ liệu trực tiếp dữ liệu ra màn hình mà phải thơng qua một phương thức nào đó.
Các cách hiển thị dữ liệu thường dùng trong JavaScript: Sử dụng alert()
Sử dụng document.write() Sử dụng innerHTML Sử dụng alert( )
Câu lệnh alert() dùng để hiển thị nội dung bên trong một hộp thông báo.
<script src=“đường dẫn đến tập tin JavaScript” >
// mã lệnh JavaScript
- Cú pháp:
alert(nội dung muốnhiển thị);
- Ví dụ 3: Mã lệnh hiển thị dịng chữ “Hello World” trong hộp thơng báo Mã lệnh JavaScript:
Hiển thị trên trình duyệt:
Hình 5.1. Kết quả ví dụ 3
Sử dụng Confirm()
Hộp thoại Confirm dùng để người dùng xác nhận. Khi hộp thoại hiển thị nếu người dùng nhấn vào OK thì trả về true, nhấn vào Cancel sẽ trả về false
- Cú pháp:
confirm(nội dung muốn hiển thị);
- Ví dụ 4: Mã lệnh hiển thị hộp thơng báo “Bạn có muốn rời trang?”, nếu người dùng nhấn vào OK thì hiện hộp thơng báo “Cám ơn đã truy cập!”, nếu người dùng nhấn vào Cancel thì hiện hộp thơng báo “Cảm ơn đã ở lại!”
Sử dụng Prompt()
Hộp thoại Prompt() dùng để người dùng nhập giá trị. Khi hộp thoại hiển thị, người dùng gõ dữ liệu yêu cầu sau đó nhấn nút OK hoặc Cancel để thi hành tiếp.
Nếu nhấn OK trả về giá trị nhập vào, nếu Cancel trả về giá trị null - Cú pháp:
confirm(nội dung thơng báo,giá trị mặc định);
- Ví dụ 5: Mã lệnh hiển thị hộp thông báo “Nhập tên của bạn”, người dùng nhập tên và nhấn OK thì hiện hộp thông báo hiển thị tên vừa nhập.
Sử dụng document.write()
document.write() dùng hiển thị dòng nội dung ra màn hình. - Cú pháp:
document.write(nội dung muốn hiển thị);
- Ví dụ 6: Mã lệnh hiển thị dịng chữ “Hello World” ra màn hình Mã lệnh JavaScript:
* Lưu ý: Nếu thực thi câu lệnh document.write() sau khi trang web đã được
download xong thì tồn bộ nội dung của trang web sẽ bị thay thế mới nội dung của câu lệnh document.write().
Sử dụng innerHTML
Câu lệnh innerHTML dùng thay thế nội dung của một phần tử HTML bằngnội dung mới.
- Cú pháp:
document.getElementById(“id”).innerHTML = “nội dung hiển thị”;
Trong đó:
document.getElementById(“id”): xác định phần tử HTML dựa vào tên id của nó.
innerHTML = “nội dung hiển thị”: dùng thay thế nội dung của phần tử HTML đó thành nội dung mới muốn hiển thị.
- Ví dụ 7: thay thế nội dung của phần tử HTML có id là demo thành "Hello World!"
Hiển thị trên trình duyệt:
Hình 5.2. Kết quả ví dụ 7
* Lưu ý: Nếu phần tử được chọn đã cónội dung thì sau khi dùng innerHTML các nội dung của phần tử đó sẽ bị thay thế bởi nội dung mới.
5.3.2. Sử dụng biến, kiểu dữ liệu, biểu thức, toán tử trong JavaScript
Kiểu dữ liệu
Kiểu dữ liệu của một ngôn ngữ xác định những thành phần cơ bản có thể được sử dụng trong ngơn ngữ đó.
Các kiểu dữ liệu trong JavaScript: kiểu số (số nguyên, số thực), kiểu chuỗi, kiểu logic (true/false), kiểu null, kiểu undefined (không xác định), kiểu đối tượng.
JavaScript không quy định kiểu biến khi khai báo biến, kiểu của biến sẽ được tự động xác định khi gán dữ liệu cho biến.
Biến
Biến dùng để lưu trữ giá trị các dữ liệu, hay các đối tượng. Giá trị của biến có thể thay đổi trong q trình chương trình làm việc theo yêu cầu.
- Cú pháp khai báo biến:
var tên-biến = giá-trị-biến;
Quy tắc đặt tên biến:
Tên biến có thể chứa chữ cái, chữ số, dấu _ và $. Tên biến phải bắt đầu bằng một chữ cái
Tên biến phân biệt chữ hoa chữ thường
Tên biến không được đặt trùng với các từ dành riêng (từ khóa JavaScript)
Biểu thức
Biểu thức là sự kết hợp của các biến và giá trị mà trình thơng dịch JavaScript có thể đánh giá thành một giá trị duy nhất.
Toán tử
Toán tử được sử dụng để thực hiện một phép tốn nào đó trên dữ liệu. Một tốn tử có thể trả lại một giá trị kiểu số, kiểu chuỗi hay kiểu logic.
JavaScript sử dụng các toán tử:
- Toán tử số học: + , - , * , / , % (chia lấy phần dư),++ (tăng 1), -- (giảm 1) - Toán tử so sánh: == (bằng), != (khác), > , < , >= , <=
- Toán tử logic: && (and), || (or), ! (not) - Toán tử chuỗi: + (nối chuỗi)
- Toán tử lượng giá: ? (điều kiện), typeof (trả về kiểu dữ liệu cần kiểm tra của một biến, một giá trị) Ví dụ 8: x=2; x= “ab”; x= “ab”; x= “12”; x+3 x+3 x+ “cd” x+ “34” cho kết quả cho kết quả cho kết quả cho kết quả x= 5 x= ab3 x= abcd x= 1234 x=5; x++ cho kết quả x= 6 x=5; x-- cho kết quả x= 4 dtb=7;
kq = (dtb < 5) ? "rớt": "đậu"; cho kết quả kq = đậu
5.3.3. Sử dụng câu lệnh điều kiện trong JavaScript
Câu lệnh if..else
Câu lệnh điều kiện if else cho phép kiểm tra điều kiện và thực hiện một
nhóm lệnh dựa trên kết quả của điều kiện kiểm tra.
Nếu điều kiện là đúng (true) thì thi hành các câu lệnh trong khối lệnh if, nếu điều kiện là sai (false) thì thi hành các câu lệnh trong khối lệnh else.
* Lưu ý:
Câu lệnh if, else phải viết bằng chữ thường.
Nhóm lệnh trong khối lệnhelse khơng bắt buộc phải có.
if ( <điều kiện> ) {
//Các câu lệnh với điều kiện đúng }
else {
//Các câu lệnh với điều kiện sai }
- Ví dụ 9: nếu phái là nam thì xuất ra màn hình “Chào anh!” ngược lại xuất ra màn hình “Chào chị!”
if (phai =="nam") {
document.write(“Chào anh!”);
} else { document.write(“Chào chị!”); } Câu lệnh switch
Câu lệnh switch dùng kiểm tra điều kiện với nhiều giá trị và thực thi các câu lệnh dựa trên trường hợp trùng khớp.
- Cú pháp
switch ( <điều kiện> ) {
case n1:
//.. thi hành các câu lệnh nếu điều kiệnbằng n1 break;
case n2:
//.. thi hành các câu lệnh nếu điều kiệnbằng n2 break;
default:
//.. mặc định - thi hành các câu lệnh nếu điều kiện khơng bằng giá trị nào ở trên
default đóng vai trị xử lý những trường hợp ngoại lệ khi biểu thức điều kiện không thỏa mãn bất cứ case nào.
Khi câu lệnh trong mỗi case được thực hiên xong, lệnh break giúp thoát switch case. Điều này giúp các câu lệnh của các case bên dưới không thực hiện.
- Ví dụ 10:
switch (n) {
case 2 : document.write(“Thứ 2”); break;
case 3 : document.write(“Thứ 3”); break;
case 4 : document.write(“Thứ 4”); break;
case 5 : document.write(“Thứ 5”); break;
case 6 : document.write(“Thứ 6”); break;
case 7 : document.write(“Thứ 7”); break;
default: document.write(“Không hợp lệ”);
}
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