Bài giảng Thiết kế và lập trình Web - Bài 4: JS-JavaScript

Thiết kế và lập trình Web 
Viện CNTT & TT 
Bài 4 
JS – JavaScript 
Thiết kế và lập trình Web 
Nội dung 
 Giới thiệu về Javascript 
 Nhúng Javascript vào trang web 
 Kiểu dữ liệu & Các cú pháp Javascript 
 Xử lý sự kiện 
 DOM HTML với Javascript 
 Ví dụ 
Thiết kế và lập trình Web 
Giới thiệu về Javascript 
 Script? 
– Ngôn ngữ kịch bản 
– Là một ngôn ngữ lập trình cho phép tạo ra sự điều khiển trong 
một ứng dụng khác. 
– Các ngôn ngữ kịch bản thường được thông dịch 
 JS là ngôn ngữ Client-side script hoạt động trên trình duyệt 
của người dùng ( client ) 
 Chia sẻ xử lý trong ứng dụng web. Giảm các xử lý không cần 
thiết trên server. 
 Giúp tạo các hiệu ứng, tương tác cho trang web. 
Thiết kế và lập trình Web 
Giới thiệu về Javascript 
 Client-Side Script: 
– Script được thực thi tại Client-Side ( trình duyệt ): Thực hiện 
các tương tác với người dùng ( tạo menu chuyển động,  ) , 
kiểm tra dữ liệu nhập,  
 Server-Side Script: 
– Script được xử lý tại Server-Side, nhằm tạo các trang web có 
khả năng phát sinh nội dung động. Một số xử lý chính: kết nối 
CSDL, truy cập hệ thống file trên server, phát sinh nội dung 
html trả về người dùng 
Thiết kế và lập trình Web 
Giới thiệu về Javascript 
 Cung cấp sự tương tác với người dùng 
– Sự kiện do người dùng tạo ra: di chuột, click chuột 
– Sự kiện do hệ thống tạo ra: thay đổi kích thước trang, tải 
trang 
 Thay đổi động nội dung 
– Thay đổi nội dung và vị trí các thành phần trên trang Web theo 
sự tương tác của người dùng 
 Hợp lệ hóa dữ liệu 
– Kiểm tra xem dữ liệu có hợp lệ không trước khi nó được gửi 
(submit) đến Web Server để xử lý 
Thiết kế và lập trình Web 
Nội dung 
 Giới thiệu về Javascript 
 Nhúng Javascript vào trang web 
 Kiểu dữ liệu & Các cú pháp Javascript 
 Xử lý sự kiện 
 DOM HTML với Javascript 
 Ví dụ 
Thiết kế và lập trình Web 
Nhúng Javascript vào trang web 
Định nghĩa script trực tiếp trong trang html: 
 <!-- 
 // Lệnh Javascript 
 --> 
Nhúng sử dụng script cài đặt từ 1 file .js khác: 
Thiết kế và lập trình Web 
 Đặt giữa tag và : script sẽ thực thi ngay khi 
trang web được mở. 
 Đặt giữa tag và : script trong phần body 
được thực thi khi trang web đang mở (sau khi thực thi các 
đoạn script có trong phần ). 
 Số lượng đoạn client-script chèn vào trang không hạn chế. 
 File JavaScript bên ngoài cho phép sử dụng lại nhiều lần và chỉnh 
sửa dễ dàng 
Nhúng Javascript vào trang web 
Thiết kế và lập trình Web 
Nhúng Javascript vào trang web 
 document.write("Welcome to JavaScript"); 
Thiết kế và lập trình Web 
Nội dung 
 Giới thiệu về Javascript 
 Nhúng Javascript vào trang web 
 Kiểu dữ liệu & Các cú pháp Javascript 
 Xử lý sự kiện 
 DOM HTML với Javascript 
 Ví dụ 
Thiết kế và lập trình Web 
Các quy tắc chung 
 Khối lệnh được bao trong dấu {} 
 Mỗi lệnh nên kết thúc bằng dấu ; 
 Cách ghi chú thích: 
– // Chú thích 1 dòng 
– /* Chú thích 
 nhiều dòng */ 
Thiết kế và lập trình Web 
Biến số trong Javascript 
 Cách đặt tên biến 
– Bắt đầu bằng một chữ cái hoặc dấu _ 
– A..Z,a..z,0..9,_ : phân biệt HOA, Thường 
 Khai báo biến 
– Sử dụng từ khóa var 
 Ví dụ: var count=10,amount; 
– Không cần khai báo biến trước khi sử dụng, 
biến thật sự tồn tại khi bắt đầu sử dụng lần đầu tiên 
Thiết kế và lập trình Web 
Biến số trong Javascript 
 Phạm vi của biến 
– Được xác định bởi nơi biến được khai báo 
 Biến toàn cục 
– Khai báo bên ngoài hàm 
– Được truy cập từ mọi nơi trong kịch bản 
– Khai báo không cần từ khóa var 
 Biến cục bộ 
– Khai báo bên trong hàm 
– Phạm vi trong hàm khai báo 
– Bắt buộc phải có từ khóa var 
Script 
Global variable 
Function 1 
Local variable 
Function 2 
Local varibale 
Thiết kế và lập trình Web 
Kiểu dữ liệu trong Javascript 
Kiểu dữ liệu Ví dụ Mô tả 
Object var listBooks = new Array(10) ; Trước khi sử dụng, phải cấp phát 
bằng từ khóa new 
String “The cow jumped over the moon.” 
“40” 
Chứa được chuổi unicode 
Chuổi rỗng “” 
Number 0.066218 
12 
Theo chuẩn IEEE 754 
boolean true / false 
undefined var myVariable ; myVariable = undefined 
null connection.Close(); connection = null 
Thiết kế và lập trình Web 
Đổi kiểu dữ liệu 
 Biến tự đổi kiểu dữ liệu khi giá trị mà nó lưu trữ thay đổi 
Ví dụ: 
var x = 10; // x kiểu Number 
x = “hello world !”; // x kiểu String 
 Có thể cộng 2 biến khác kiểu dữ liệu 
Ví dụ: 
var x; 
x = “12” + 34.5; // KQ: x = “1234.5” 
 Hàm parseInt(), parseFloat() : Đổi KDL từ chuỗi sang 
số. 
 Chuyển không thành công: “NaN” 
Thiết kế và lập trình Web 
Đổi kiểu dữ liệu 
 var x = 10; 
 document.write(x); 
 x=true; 
 x = "Hello World"; 
 document.write(x); 
 x = "12"+4.3; 
 document.write(x); 
 x = parseInt("-32"); 
 document.write(x); 
Thiết kế và lập trình Web 
Phép toán số học 
Phép toán Mô tả Ví dụ 
+ Cộng A = 5 + 8 
- Trừ A = 8 – 5 
/ Chia A = 20 / 5 
% Số dư 10 % 3 = 1 
++ Tăng 1 ++ x và x ++ 
-- Giảm 1 -- x và x -- 
- Đảo dấu nếu A = 5 
thì –A = -5 
Thiết kế và lập trình Web 
Phép toán so sánh 
Phép 
toán 
Mô tả so sánh Ví dụ (x=5) Kết quả 
= = Bằng giá trị x = = 5 true 
= = = Bằng giá trị và 
kiểu 
x = = = “5” false 
! = Không bằng x ! = 4 true 
> Lớn hơn x > 5 false 
>= Lớn hơn hoặc bằng x >= 5 true 
< Nhỏ hơn x < 4 false 
<= Nhỏ hơn hoặc bằng x <=5 true 
Thiết kế và lập trình Web 
Phép toán logic 
Phép 
toán 
Mô tả Ví dụ 
(x=6, y=3) 
Kết quả 
&& And (x1) true 
|| Or (x5) false 
! Not !(x==y) true 
Thiết kế và lập trình Web 
Phép toán định lượng 
 Phép toán điều kiện 
 Cú pháp 
 tênbiến = điềukiện ? giátrị1:giátrị2; 
 Ví dụ: 
 status = (diem >= 5) ? “đạt”: “thi lại”; 
20 
Thiết kế và lập trình Web 
Phép toán định lượng 
 typeof 
– Trả về xâu xác định kiểu dữ liệu của biến 
Ví dụ: 
21 
var x = 5; 
document.write(typeof(x)); 
=> number 
Thiết kế và lập trình Web 
Hàm trong Javascript 
 Dạng thức khai báo chung: 
 function Tên_hàm(thamso1, thamso2,..) 
{ 
} 
 Hàm có giá trị trả về: 
 function Tên_hàm(thamso1, thamso2,..) 
{ 
 return (value); 
} 
Thiết kế và lập trình Web 
 Ví dụ: 
 function Sum(x, y) 
{ 
 tong = x + y; 
 return tong; 
} 
 Gọi hàm: 
 var x = Sum(10, 20); 
Hàm trong Javascript 
Thiết kế và lập trình Web 
Câu lệnh if 
 if (condition) 
{ 
 statement[s] if true 
} 
else 
{ 
 statement[s] if false 
} 
Ví dụ: 
var x = 5, y = 6, z; 
- if (x == 5) { if (y == 6) z = 17; } else z = 20; 
Thiết kế và lập trình Web 
Câu lệnh switch 
switch (expression) 
{ 
 case label : 
 statementlist 
 case label : 
 statementlist 
 ... 
 default : 
 statement list 
} 
Ví dụ : 
var diem = “G”; 
switch (diem) { 
 case “Y”: 
 document.write(“Yếu"); 
 break; 
 case “TB”: 
 document.write(“Trung bình"); 
 break; 
 case “K”: 
 document.write(“Khá"); 
 break; 
 case “G” : 
 document.write(“Giỏi"); 
 break; 
 default: 
 document.write(“Xuất sắc") 
} 
Thiết kế và lập trình Web 
Vòng lặp for 
for ([initial expression]; [condition]; 
[update expression]) { 
 statement[s] inside loop 
} 
Ví dụ: 
var myarray = new Array(); 
for (i = 0; i < 10; i++) 
{ 
 myarray[i] = i; 
} 
Thiết kế và lập trình Web 
Vòng lặp while, do.. while 
while (expression) 
{ 
 statements 
} 
Ví dụ: 
var i = 9, total = 0; 
while (i < 10) 
{ 
 total += i * 3 + 5; 
 i = i +5; 
} 
do 
{ 
 statement 
}while (expression); 
Ví dụ: 
var i = 9, total = 0; 
do 
{ 
 total += i * 3 + 5; 
 i = i +5; 
} while (i > 10); 
Thiết kế và lập trình Web 
Hộp thông báo 
 Sử dụng các phương thức: confirm, alert, prompt 
 Phương thức alert() 
 Cú pháp 
 alert (“thông_báo”); 
28 
Thiết kế và lập trình Web 
Hộp thông báo 
 Phương thức confirm() 
 Cú pháp 
 ret = confirm (“thông_báo”); 
29 
Thiết kế và lập trình Web 
Hộp thông báo 
 Phương thức prompt() 
 Cú pháp 
 value = prompt(“thông_báo”, 
 giá_trị_mặc_định); 
30 
Thiết kế và lập trình Web 
Hộp thông báo 
31 
 alert("Welcome to JavaScript"); 
 var value = prompt("What's your 
 name?","JS"); 
 alert("Hello "+value); 
 var ret = confirm("Do you like 
 JavaScript?"); 
 alert("You pressed "+ret); 
Thiết kế và lập trình Web 
Hộp thông báo 
32 
Thiết kế và lập trình Web 
Viết chú thích 
 Viết chú thích trên một dòng: // 
 Viết chú thích trên nhiều dòng: /* và */ 
33 
/*Todo: Example in MessageBox 
include: alert(), confirm(), 
prompt() 
*/ 
var value = prompt("What's your 
name?","JS"); //get your name 
Thiết kế và lập trình Web 
Các kí tự đặc biệt 
 Vấn đề: 
 var txt=“He is very “intelligence””; 
 Các kí tự đặc biệt trong JavaScript: 
 “ ‘ & \ n r t b f 
 Để sử dụng: thêm dấu \ phía trước 
 var txt= 
“He is very \“intelligence\””; 
34 
Thiết kế và lập trình Web 
Nội dung 
 Giới thiệu về Javascript 
 Nhúng Javascript vào trang web 
 Kiểu dữ liệu & Các cú pháp Javascript 
 Xử lý sự kiện 
 DOM HTML với Javascript 
 Ví dụ 
Thiết kế và lập trình Web 
Giới thiệu về sự kiện 
 Sự kiện (event) 
– Là các hành động có thể được thể hiện bằng JavaScript 
– Mỗi thành phần trên trang Web đều có những sự kiện 
xác định, có thể kích hoạt một script 
 Ví dụ 
– Sự kiện click chuột 
– Trang web hoặc ảnh được tải 
– Nhập dữ liệu vào một trường trên form 
36 
Thiết kế và lập trình Web 
Giới thiệu về sự kiện 
 Chú ý: 
– Sự kiện thường được kết hợp với hàm. Hàm sẽ không 
thực thi chừng nào sự kiện chưa xuất hiện 
– Cú pháp 
 sự_kiện = “tên_hàm ();” 
hoặc 
 sự_kiện = “tên_hàm (ds_tham_số);” 
37 
Thiết kế và lập trình Web 
Các sự kiện thông dụng 
Các sự kiện được hỗ trợ bởi hầu hết các đối 
tượng 
 onClick 
 onFocus 
 onChange 
 onBlur 
 onMouseOver 
 onMouseOut 
 onMouseDown 
 onMouseUp 
 onLoad 
 onSubmit 
 onResize 
  
Thiết kế và lập trình Web 
Xử lý sự kiện cho các thẻ HTML 
 Cú pháp 1: 
 Ví dụ: 
 <INPUT TYPE="button“ NAME="Button1“ 
 VALUE="OpenSesame!” 
 onClick="window.open('mydoc.html');"> 
 Lưu ý: Dấu “” và ‘’ 
Thiết kế và lập trình Web 
Xử lý sự kiện bằng function 
 function GreetingMessage() 
 { 
 window.alert(“Welcome to my world”); 
 } 
Thiết kế và lập trình Web 
Một số sự kiện thông dụng 
Sự kiện Ý nghĩa 
onMouseUp nút chuột được nhả 
onMouseDown ấn chuột 
onMouseOver chuột di chuyển qua vùng 
onMouseOut chuột di chuyển khỏi vùng 
onMouseMove chuột được di chuyển 
onclick click chuột 
ondbclick click đúp chuột 
onFocus Đối tượng được sử dụng(đặt con trỏ) 
onBlus Đối tượng không còn được sử dụng 
onChange Đối tượng được thay đổi (nhập dữ liệu) 
onSubmit Xác nhận tất cả dữ liệu trên form 
Thiết kế và lập trình Web 
Ví dụ: onclick Event 
 function compute(frm) 
 { 
 var x = frm.expr.value; 
 result.innerHTML = x*x; 
 } 
 X = 
 <INPUT TYPE="button" VALUE=“Calculate” 
 ONCLICK="compute(this.form)"> 
 X * X = 
Thiết kế và lập trình Web 
Ví dụ: onFocus - onBlur 
 Xảy ra khi một thành phần HTML bị focus (onFocus) và mất 
focus (onBlur) 
 Ví dụ: 
 <INPUT type=“text” name=“myTextbox” 
 onblur=“(document.bgColor='aqua')” 
 onfocus=“(document.bgColor='dimgray')”> 
Thiết kế và lập trình Web 
Bài tập 1 
 Tạo 2 phần tử: một nút bấm và một ô textbox. Hãy 
viết đoạn mã JavaScript khi người dùng click chuột 
vào nút Welcome thì hiển thị nội dung chứa trong 
textbox. 
– Hướng dẫn: Để lấy giá trị của một phần tử HTML: <Tên 
phần tử>.value 
– Ví dụ: msg.value cho ta giá trị của text tên là msg. 
44 
Thiết kế và lập trình Web 
Bài tập 1 
<input type="button" name="welcome" 
value="Welcome" 
onclick="alert(document.frm.msg.value);" /> 
<input type="text" name="msg" value="Welcome to 
JavaScript" size="30" /> 
45 
Thiết kế và lập trình Web 
Bài tập 2 
 Tạo 2 nút, nút thứ nhất có value = "Xanh", nút thứ hai 
có value = "Đỏ". 
 Yêu cầu: Khi người dùng click vào nút xanh thì màu 
nền của tài liệu là: xanh (blue), còn khi người dùng 
click vào nút đỏ thì màu nền của tài liệu là: đỏ (red). 
– Hướng dẫn: Thuộc tính màu nền của tài liệu được lưu 
trong thuộc tính bgColor của đối tượng document. Thuộc 
tính này có thể thay đổi được. 
46 
Thiết kế và lập trình Web 
Bài tập 2 
<input type="button" value="Xanh" 
onclick="window.document.bgColor = 'blue'; " /> 
<input type="button" value="Đỏ" 
onclick="window.document.bgColor = 'red'; " /> 
47 
Thiết kế và lập trình Web 
Bài tập 3 
 Tạo một danh sách 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 tài liệu 
sẽ thay đổi tương ứng. 
48 
Thiết kế và lập trình Web 
function DoiMau() { 
 document.bgColor = frm.Mau.value; 
 // Hoặc viết: window.document.bgColor = frm.Mau.value; 
 } 
Bạn hãy chọn màu nền: 
Màu đỏ 
Màu xanh 
Màu nâu 
Màu xanh nhạt 
49 
Thiết kế và lập trình Web 
Bài tập 4 
 Tạo một textarea có tên là NoiDung, một Textbox có 
tên là : SoKyTu. 
 Với yêu cầu như sau: 
– Khi người sử dụng gõ các phím vào trong textarea thì số 
lượng ký tự (Độ dài xâu) chứa trong textarea đó sẽ được 
hiển thị trong textbox. 
– Nếu số lượng ký tự trong textarea gõ vào vượt quá 200 
ký tự thì thông báo : "Bạn đã gõ quá số ký tự cho phép !". 
50 
Thiết kế và lập trình Web 
Bài tập 4 
51 
Thiết kế và lập trình Web 
Bài tập 4 
function KiemTra() { 
 if (frm.NoiDung.value.length > 200) 
 alert("Bạn đã gõ qúa số ký tự cho phép !"); 
 frm.SoKyTu.value = frm.NoiDung.value.length; 
} 
Số ký tự đã gõ : 
<textarea name="NoiDung" cols="50" rows="10" 
onKeyUp="KiemTra();"> 
52 
Thiết kế và lập trình Web 
Bài tập 5 
 Tạo một nút có value = "Gửi", textbox có name = 
"HoTen", 2 nút radio có tên là GioiTinh và nhãn tương 
ứng là Nam, nữ. 
 Yêu cầu: Khi người dùng di chuyển chuột vào phần tử 
nào thì hiển thị thông báo tương ứng dưới thanh trạng 
thái. 
– Ví dụ nếu người sử dụng di chuyển chuột qua nút nhấn 
"Gửi" thì thanh trạng thái sẽ là "Bạn đang di chuyển 
chuột vào nút"... 
53 
Thiết kế và lập trình Web 
Bài tập 5 
54 
Thiết kế và lập trình Web 
Bài tập 5 
 Xu ly su kien 
 <input type="button" value="Gửi" 
onmousemove="window.status = 'Chuột trong nút'; "> 
 <input onMouseMove ="window.status='Chuột trong 
textbox';"> 
 <input type="radio" name="GioiTinh" 
 onMouseMove="window.status='Trong nam';">Nam 
 <input type="radio" name="GioiTinh" 
 onMouseMove="window.status='Trong nữ';"> Nữ 
55 
Thiết kế và lập trình Web 
Bài tập 6 
 Tạo 3 textbox, có tên lần lượt là: SoLuong (Số lượng), 
DonGia (Đơn giá) và ThanhTien (Thành tiền); 
 Yêu cầu: Khi người dùng nhập giá trị trong DonGia thì kết 
quả sẽ được cập nhật ngay trong ThanhTien. 
56 
Thiết kế và lập trình Web 
Bài tập 6 
 Tinh tich 
 Bạn hãy nhập vào số lượng và giá: 
 Số lượng: 
 Đơn giá:<input name="DonGia" 
 onKeyUp="ThanhTien.value=SoLuong.value*DonGia.value"> 
 Thành tiền: USD 
57 
Thiết kế và lập trình Web 
Bài tập 7 
 Cho người dùng nhập vào tên và tuổi. Hãy v ... ấp bởi browser, JavaScript, HTML 
 Truy nhập 
– Thuộc tính: tên_đối_tượng . tên_thuộc_tính 
– Phương thức: tên_đối_tượng . tên_phương_thức() 
70 
Thiết kế và lập trình Web 
1. Giới thiệu về đối tượng 
Phân tầng các đối tượng 
71 
Browser Objects 
Script Objects 
HTML Objects 
Thiết kế và lập trình Web 
1. Giới thiệu về đối tượng 
 Khởi tạo đối tượng 
 tên_đối_tượng = new 
 đối_tượng(danh_sách_tham_số) 
 Cấu trúc for..in và with 
– Cú pháp 
 for (variable in object) 
 lệnh; 
 và 
 with (object) 
 lệnh; 
72 
Thiết kế và lập trình Web 
Đối tượng của browser 
 IE Objects 
Window Obj 
Frame 
Screen 
Document Obj 
History 
Navigator 
Event 
Location 
Thiết kế và lập trình Web 
Đối tượng Window 
 Mỗi thành phần trên trang web được xem như một đối 
tượng, 
 Tất cả các đối tượng trong Javascript được tổ chức phân 
cấp dạng hình cây gọi là mô hình DOM (Document Object 
Model), 
 Ở mức trên cùng là đối tượng window biểu thị cho khung 
hay cửa sổ của trình duyệt, các phần tử còn lại là đối tượng 
con của window 
 Để truy xuất đến một đối tượng trong IE và thay đổi dữ liệu 
cho chính phần tử đó dùng thuộc tính ID , tất cả các đối 
tượng trên trang đều có một ID duy nhất. 
Thiết kế và lập trình Web 
Đối tượng Window 
 Đối tượng Window 
– Thể hiện cửa sổ của trình duyệt 
– Được sử dụng để 
• nhận các thông tin về trạng thái của cửa sổ 
• hiển thị các đối tượng khác 
• truy cập các sự kiện 
Thiết kế và lập trình Web 
Đối tượng Window 
 document Obj: biểu diễn tài liệu HTML 
 event: biểu diễn trạng thái của sự kiện 
 frame: biểu diễn các frame (child windows) 
 history: thông tin về URLs đã mở 
 location: thông tin về URL hiện tại 
 navigator: thông tin về Web browser 
 screen: thông tin về màn hình client, khả năng render 
Thiết kế và lập trình Web 
Đối tượng Window 
Ví dụ: 
window.defaultStatus="String"; 
window.status="String"; 
window.location="URL"; 
Ta cũng có thể mở một trang web mới bằng lệnh: 
window.location.href= "URL"; 
Thiết kế và lập trình Web 
Đối tượng Window 
78 
Thiết kế và lập trình Web 
Đối tượng Window 
79 
Thiết kế và lập trình Web 
Đối tượng Window 
Ví dụ: Objwindow.close() 
Từ khoá self: trong trường hợp muốn thao tác trên cửa 
sổ hiện hành ta dùng từ khoá self thay thế cho đối tượng 
window 
Ví dụ : đóng cửa sổ hiện hành: 
Self.close() hoặc window.close() 
Thiết kế và lập trình Web 
Đối tượng Document 
 Đối tượng document cung cấp các thuộc tính và phương 
thức để làm việc với toàn bộ tài liệu hiện hành gồm: form, 
liên kết, hình ảnh, tiêu đề, vị trí hiện hành, màu hiện 
hành 
 Đối tượng document được định nghĩa khi tag body được 
xử lý trong trang HTML và nó vẫn tồn tại nếu trang được 
nạp. 
 Các thuộc tính của document phản ánh thuộc tính của 
tag body. 
– Trong body có 2 sự kiện OnLoad và Unload 
Thiết kế và lập trình Web 
Đối tượng Document 
 Thuộc tính 
Thiết kế và lập trình Web 
Đối tượng Document 
 Thuộc tính 
Thiết kế và lập trình Web 
Đối tượng Document 
 Phương thức 
Thiết kế và lập trình Web 
Đối tượng History 
 Cung cấp các URLs được mở gần nhất 
 Phương thức 
– back: quay lại URL ngay trước 
– go(number): quay lại vị trí xác định trong tài liệu 
– forward: mở URL tiếp theo 
85 
Thiết kế và lập trình Web 
Đối tượng HTML DOM 
 DOM = Document Object Model 
 Là tập hợp các đối tượng HTML chuẩn được dùng để truy 
xuất và thay đổi thành phần HTML trong trang web ( thay 
đổi nội dung tài liệu của trang ) 
 Một số đối tượng của DOM: window, document, history, link, 
form, frame, location, event,  
Thiết kế và lập trình Web 
Đối tượng Window - DOM 
Properties 
– document 
– event 
– history 
– location 
– name 
– navigator 
– screen 
– status 
 Methods 
 alert 
 confirm 
 prompt 
 blur 
 close 
 focus 
 open 
Thiết kế và lập trình Web 
Đối tượng Window - DOM 
 Ví dụ: 
 var curURL = window.location; 
 window.alert(curURL); 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 Biểu diễn cho nội dung trang HTML đang được hiển thị trên 
trình duyệt 
 Dùng để lấy thông tin về tài liệu, các thành phần HTML và 
xử lý sự kiện 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 Properties 
 aLinkColor 
 bgColor 
 body 
 fgColor 
 linkColor 
 title 
 URL 
 vlinkColor 
 forms[] 
 images[] 
 childNodes[] 
 Methods 
 close 
 open 
 createTextNode(“ text ") 
 createElement(“HTMLtag") 
 getElementById(“id”) 
  
 documentElement 
 cookie 
  
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 Biểu diễn nội dung của tài liệu theo cấu trúc cây 
 DOM Test 
 DOM Test Heading 
 A paragraph of text 
 is just an example 
 Yahoo! 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 Cấu trúc cây nội dung tài liệu 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 Các loại DOM Node chính 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 getElementById ( id1 ) 
 Trả về node có giá trị thuộc tính id = id1 
Ví dụ: 
 // 
 // some text 
 // 
 var node = document.getElementById(“id1”); 
 var nodeName = node.nodeName; // p 
 var nodeType = node.nodeType; // 1 
 var nodeValue = node.nodeValue; // null 
 var text = node.innerText ; // some text 
Text Node 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
createElement ( nodeName ) 
Cho phép tạo ra 1 node HTML mới tùy theo đối 
số nodeName đầu vào 
Ví dụ: 
 var imgNode = document.createElement(“img”); 
 imgNode.src = “images/test.gif”; 
 // 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
createTextNode ( content ) 
Ví dụ: 
 var textNode = document.createTextNode(“New 
 text”); 
 var pNode = document.createElement(“p”);
 pNode.appendChild(textNode); 
 // New text 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 appendChild ( newNode ) 
 Chèn node mới newNode vào cuối danh sách các node con 
của một node. 
Ví dụ: 
 // 
 // some text 
 // 
 var pNode = document.getElementById("id1"); 
 var imgNode = document.createElement("img"); 
 imgNode.src = "images/test.gif"; 
 pNode.appendChild(imgNode); 
 // 
 // some text 
 // 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 innerHTML 
 Chỉ định nội dung HTML bên trong một node. 
Ví dụ: 
// 
// some text 
// 
var theElement = document.getElementById("para1"); 
theElement.innerHTML = “Some new text”; 
// Kết quả : 
// 
// Some new text 
// 
Thiết kế và lập trình Web 
Đối tượng Document - DOM 
 innerText 
 Tương tự innerHTML, tuy nhiên bất kỳ nội dung nào đưa 
vào cũng được xem như là text hơn là các thẻ HTML. 
Ví dụ: 
var theElement = document.getElementById("para1"); 
theElement.innerText = “Some new text”; 
// Kết quả hiển thị trên trình duyệt 
// bên trong thẻ p: “Some new text” 
Thiết kế và lập trình Web 
Nội dung 
 Giới thiệu về Javascript 
 Kiểu dữ liệu & Các cú pháp Javascript 
 Nhúng Javascript vào trang web 
 Sử dụng các đối tượng trong Javascript 
 Xử lý sự kiện 
 DOM HTML với Javascript 
 Ví dụ 
Thiết kế và lập trình Web 
Ví dụ: Dynamic Table 
 Viết trang web cho phép tạo table có số dòng, số cột do 
người dùng nhập vào. 
Thiết kế và lập trình Web 
Ví dụ: Dynamic Table 
 12 
 13 
 21 
 22 
Table 
Tr 
Tr 
Td 
Td 
Td 
Td 
body 
Thiết kế và lập trình Web 
Ví dụ: 
 12 
 13 
 21 
 22 
Table 
Tr 
Tr 
Td 
Td 
Td 
Td 
TBody 
body 
Thiết kế và lập trình Web 
Ví dụ: Dynamic Table 
 Document.createElement() :Tạo một đối tượng thẻ DOM 
HTML 
 Object.appendChild(): Thêm một đối tượng thẻ DOM 
HTML như là nút con. 
Thiết kế và lập trình Web 
function CreateTable(divTable) 
 { 
 var tagTable = document.createElement("table"); 
 tagTable.border = 1; 
 var tagTBody = document.createElement("tbody"); 
 tagTable.appendChild(tagTBody); 
 var nDong = txtSoDong.value; 
 var nCot = txtSoCot.value; 
 for (i=0; i<nDong; i++) 
 { 
 var tagTR = document.createElement("tr"); 
 for (j=0; j<nCot; j++) 
 { 
 var tagTD = document.createElement("td"); 
 var textNode = document.createTextNode(i+""+j); 
 tagTD.appendChild(textNode); 
 tagTR.appendChild(tagTD); 
 } 
 tagTBody.appendChild(tagTR); 
 } 
 divTable.appendChild(tagTable); 
 } 
Thiết kế và lập trình Web 
Đối tượng JavaScript 
 1. Đối tượng String 
 .2. Đối tượng Date 
 3. Đối tượng Math 
 4. Đối tượng Array 
Thiết kế và lập trình Web 
1. Đối tượng String 
 Được sử dụng để làm việc với xâu văn bản 
 Khởi tạo 
var tên_xâu = “nội_dung_xâu”; 
tên_xâu=“nội_dung_xâu”; 
var tên_xâu = String(“nội_dung_xâu); 
Thiết kế và lập trình Web 
1. Đối tượng String 
 Thuộc tính 
– length: độ dài xâu 
 Phương thức 
– big: tăng kích thước xâu 
– small: giảm kích thước xâu 
– toLowerCase: chuyển thành chữ thường 
– toUpperCase: chuyển thành chữ hoa 
– fontcolor: xác định màu chữ 
– charAt: vị trí kí tự trong xâu 
Thiết kế và lập trình Web 
2. Đối tượng Date 
 Chứa các thông tin về ngày, giờ 
 Lưu trữ thời điểm thông qua số lượng ms từ ngày 
1/1/1970 tại 00:00:00 
 Khởi tạo 
 tên_đối_tượng = new Date(tham_số); 
 Ví dụ 
 today = new Date(); 
 dateobj = new Date(“Octorber 
13,2009,10:10:10”); 
Thiết kế và lập trình Web 
2. Đối tượng Date 
 Phương thức chia làm: 
get: lấy giá trị ngày và giờ 
set: thiết lập giá trị ngày và giờ 
Bao gồm: Hours, Minutes, Seconds, Time, Year, Month, Date 
 Giá trị 
– seconds và minutes: 0-59 
– hours: 0-23 
– day: 0-6 
– date: 0-31 
– months: 0-11 
Thiết kế và lập trình Web 
3. Đối tượng Math 
 Thuộc tính 
– PI: số Pi, xấp xỉ 3.1415 
– E: số e, xấp xỉ 2.718 
 Phương thức 
– abs: lấy giá trị tuyệt đối 
– sin, cos, tan 
– min (number1, number2) 
– max (number1, number2) 
– sqrt 
– pow 
Thiết kế và lập trình Web 
4. Đối tượng Array 
Khởi tạo 
 tên_mảng = new Array(kích_thước_mảng); 
 hoặc 
 tên_mảng = new Array(ds_phần_tử); 
 Ví dụ: mybook = new Array(2); 
 mybook[0] = “Access 2000”; 
 mybook[1] = “Programming Techniques”; 
Phương thức 
– reverse: đảo ngược các phần tử trong mảng 
– pop: trả về phần tử cuối cùng của mảng, rồi xóa nó 
– push: thêm một phần tử vào cuối mảng 
Thiết kế và lập trình Web 
4. Đối tượng Array 
 color = new Array("red“,"blue","green"); 
 var scolor; 
 for(var elem in color){ 
 scolor = "color " + elem + " = " + 
 color[elem] + ""; 
 document.write(scolor); 
 } 
Thiết kế và lập trình Web 
Bài tập 1 
Thiết kế và lập trình Web 
Bài tập 1 
 function show(content){ 
 alert(content); 
 } 
 <input type="text onFocus="show('focus');" 
 onChange="show('change');"> 
Thiết kế và lập trình Web 
Bài tập 2 – Sự kiện trên checkbox 
Thiết kế và lập trình Web 
 function switchlight(){ 
 var check = window.document.frmlight.chklight; 
 if(check.checked) 
 document.bgColor = 'white'; 
 else 
 document.bgColor='black‘; 
 } 
 <input type="checkbox" name = "chklight" 
 onClick="switchlight();">The light switch 
Thiết kế và lập trình Web 
Bài tập 3 – Đổi màu nền 
Thiết kế và lập trình Web 
Bài tập 3 
 function bat_dau(){ 
var mau=prompt("Nhap mau nen cua trang",""); 
document.body.style.backgroundColor=mau; 
} 
 Chao mung den Website 
Thiết kế và lập trình Web 
Bài tập 4 – Văn bản di chuyển 
Thiết kế và lập trình Web 
 function moveleft(){ 
 document.getElementById('header').style.position= 
 "absolute"; 
 document.getElementById('header').style.left="0"; 
 } 
 function moveback(){ 
 document.getElementById('header').style.left="100"; 
 } 
 <h1 id="header“ onmouseover="moveleft()“ 
 onmouseout="moveback()“> Mouse over this text 
Thiết kế và lập trình Web 
Bài tập 5 – Đèn tắt, bật 
Thiết kế và lập trình Web 
 bLight=0; 
 function changeimage(){ 
 if (bLight==0){ 
 bLight=1; document.myimage.src="bulbon.gif"; 
 } 
 else{ 
 bLight=0; document.myimage.src="bulboff.gif“; 
 } 
 } 
 <img name="myimage" onClick="changeimage()" 
 src="bulboff.gif"> 
Thiết kế và lập trình Web 
Dynamic 
124 
Bài tập 6 – Bổ sung các thành phần động 
Thiết kế và lập trình Web 
Enter Your Mail Address 
<input id="Button1" type="button" value="Add More" 
onclick="Button1_onclick()" /> 
125 
Bài tập 6 
Thiết kế và lập trình Web 
var NumOfRow=1; 
function Button1_onclick() 
{ 
NumOfRow++; 
// lấy tham chiếu đến main Div 
var mainDiv=document.getElementById('MainDiv'); 
// tạo một div để chứa các điều khiển khác 
var newDiv=document.createElement('div'); 
newDiv.setAttribute('id','innerDiv'+NumOfRow); 
//tạo span để chứa đoạn text 
var newSpan=document.createElement('span'); 
newSpan.innerHTML="Enter Your Mail Address "; 
// tạo một textbox mới 
var newTextBox=document.createElement('input'); 
newTextBox.type='text'; 
newTextBox.setAttribute('id','txtAddr'+NumOfRow); 
// tạo một nút button Remove mới 
var newButton=document.createElement('input'); 
newButton.type='button'; 
newButton.value='Remove'; 
newButton.id='btn'+NumOfRow; 
// gắn sự kiện click cho button mới 
newButton.onclick=function RemoveEntry() { var 
mainDiv=document.getElementById('MainDiv'); 
 mainDiv.removeChild(this.parentNode); 
} 
// append span, textbox và the button vào div 
newDiv.appendChild(newSpan); 
newDiv.appendChild(newTextBox); 
newDiv.appendChild(newButton); 
// cuối cùng gắn div mới vào main div 
mainDiv.appendChild(newDiv); 
} 
Thiết kế và lập trình Web 
Bài tập 7 
 Xây dựng một trang Web liệt kê danh sách các hóa đơn “Orders.html”: 
 Nút “Save” cho phép các gửi các hóa đơn được đánh dấu đến file 
“Process.php” trên server để xử lý, nút “Back” cho phép quay lại trang 
trước đó và nút “Reset” dùng để xóa các nút chọn (checkbox). 
 Nút chọn trên cùng cho phép có thể chọn tất cả hoặc hủy chọn tất cả 
các dòng hóa đơn bên dưới. 
 Nếu tất cả các dòng bên dưới đều được chọn thì nút trên cùng cũng 
được đánh dấu. 
127 
Thiết kế và lập trình Web 
 <input type="checkbox" name="chkall" 
onClick="docheck(document.frmList.chkall.checked);"/> 
 <input type="checkbox" name="chkid" value="SHD11" 
onClick="docheckone();"/> 
 <input type="checkbox" name="chkid" value="SHD12" 
onClick="docheckone();"/> 
 128 
Thiết kế và lập trình Web 
Bài tập 7 
function docheck(status){ 
 var num = document.frmList.chkid.length; 
 for(var i=0; i<num; i++) 
 document.frmList.chkid[i].checked = status; 
} 
129 
Thiết kế và lập trình Web 
Bài tập 7 
function docheckone(){ 
var checked = true; 
var num = document.frmList.chkid.length; 
for(var i=0; i<num; i++) 
 if(document.frmList.chkid[i].checked==false){ 
 checked = false; 
 break; 
} 
document.frmList.chkall.checked = checked; 
} 
130 
Thiết kế và lập trình Web 
Bài tập 8 – Đổi màu nền thành màu của ô 
Thiết kế và lập trình Web 
Bài tập 9 - Ẩn hiện văn bản 
Thiết kế và lập trình Web 
Bài tập 10 – Kiểm tra các ô nhập liệu 
Thiết kế và lập trình Web 
Bài tập 11 – Tính toán đơn giản 
Thiết kế và lập trình Web 
Bài tập 12 – Mô phỏng máy tính 
Thiết kế và lập trình Web 
Bài tập 13 – Đồng hồ