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

ươ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ồ