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 thingồ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
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