›
›

Bài giảng Lập trình Web - Bài 6: Mô hình đối tượng DOM

Download
12/30/2016  
CHƯƠNG XVII  
MÔ HÌNH ĐỐI TƯỢNG  
DOM  
Object  
Object  
Properties  
Methods  
• xe tên vespa  
• Hãng Piaggio  
• Xe màu đỏ  
• Khởi động()  
• Chạy xe()  
• Dừng xe()  
• Xe sản xuất năm • Thắng xe lại()  
1954  
• Xe có cân nặng  
110kg  
12/30/2016  
DOM  
2
1
12/30/2016  
Đối tượng Xe Vespa  
<xemay ten=vespa mau=đo hang=piaggio  
namsx=1980 cannang=130kg>  
<xemay ten=SH mau=trang hang=Honda  
namsx=2010 cannang=120kg>  
Cách truy cập các thuộc tính của xe:  
vespa.hang=“piaggio”;  
vespa.namsx=“1980”;  
vespa.cannang=“130kg”;  
vespa.mau=“do”;  
12/30/2016  
DOM  
3
I. MÔ HÌNH DOM (Document Object Model)  
Đối tượng – Mô hình đối tượng:  
object :  
properties (thuộc tính),  
methods (phương thức)  
events (sự kiện).  
Object [id]: Địnhdanh cho objects duy nhất  
Ví dụ: <img id=“h1” …>  
<table id=“tb1” …>  
<tr id=“ro1”…>  
<td id=“cl1” …>  
<form id=“frmDK” …>  
<input type=text id=“txtName”>  
12/30/2016  
DOM  
4
2
12/30/2016  
Toán tử dấu chấm (.) để phân cấp giữa các đối tượng và truy  
cập thuộc tính của mỗi đối tượng  
Mỗi đối tượng đều có properties (thuộc tính), events (sự kiện)  
và methods (phương thức), nhờ các thành phần này mà có thể  
truy cập và thay đổi nội dung của chúng.  
Properties: mô tả thông tin của đối tựơng. (How?)  
<img src=”URL” height=“value1”  
width=“value2” Id=”idh1”>  
[idh1.height, idh1.width, idh1.src]  
12/30/2016  
DOM  
5
JavaScript Events  
• onClick  
• onChange  
• onFocus  
• onBlur  
• onMouseOut  
• onLoad  
• onSubmit  
• onMouseDown  
• onMouseUp  
• onMouseOver  
12/30/2016  
DOM  
6
3
12/30/2016  
Một số đối tượng  
Array():  
lưu trữ nhiều giá trị với cùng một tên gọi.  
chứa các thành phần mang kiểu giá trị khác nhau  
chỉ số từ 0 đến n-1.  
Khởi tạo một mảng:  
Dùng từ khóa new để khởi tạo một mảng  
var variable_arr = new Array();  
.length: số phần tử của Array  
12/30/2016  
DOM  
7
Ví dụ:  
<script>  
var arr= new Array();  
arr[0]= "thu hai";  
arr[1]= "Thu ba";  
arr[2]= "Thu tu";  
arr[3]= "Thu nam";  
arr[4]= "Thu sau";  
arr[5]= "Thu bay";  
for(i=0; i<=5; i++)  
document.write(arr[i]+ "<br>");  
document.write(arr.length+ "<br>");//6  
</script>  
12/30/2016  
DOM  
8
4
12/30/2016  
<script language="JavaScript" type="text/JavaScript">  
function changecolor()  
{
var arrcolor= new Array();  
arrcolor[0]="#ff99ff";  
arrcolor[1]="#ffff99";  
arrcolor[2]="#99ffff";  
arrcolor[3]="#ff6633";  
arrcolor[4]="#990033";  
var m= Math.round(Math.random()*5);  
document.bgColor=arrcolor[m];  
idq=setTimeout("changecolor()",1000);  
}
function stop()  
{
clearTimeout(idq);  
}
</script>  
12/30/2016  
DOM  
9
Các phương thức của đối tượng Array()  
12/30/2016  
DOM  
10  
5
12/30/2016  
Ví dụ 2  
<script type="text/javascript">  
var arrName = new Array(3)  
arrName [0] = "Jani"  
arrName [1] = "Tove"  
arrName [2] = "Hege"  
document.write(arrName.length + "<br>")  
document.write(arrName.join(".") + "<br>")  
document.write(arrName.reverse() + "<br>")  
document.write(arrName.sort() + "<br>")  
document.write(arrName.push("Ola","Jon")+ "<br>"  
document.write(arrName.pop() + "<br>")  
document.write(arrName.shift() + "<br>")  
</script>  
12/30/2016  
DOM  
11  
Date()  
Cung cấp thông tin về ngày, giờ trên môi trường client.  
Thiết lập ngày tháng năm và giờ hiện hành trên trang web.  
Cách khai báo:  
Cách 1: Khai báo và khởi tạo  
var variableName= new Date(“month, day,  
year , hours : minutes : seconds”);  
hoặc:  
var variableName= new  
Date(year,month,day,hours,minutes,secon  
d);  
Cách 2: Khai báo ngày hiện hành ( Không khởi tạo)  
var variableName=new Date();  
12/30/2016  
DOM  
12  
6
12/30/2016  
Các phương thức của đối tượng Date():  
Ví dụ: Hiển thị giờ trên status bar  
12/30/2016  
DOM  
13  
String:  
Mỗi chuổi trong JavaScript là một đối tượng, gồm các  
thuộc tính và phương thức thực hiện trên chuỗi, đó là  
các phương thức tìm kiếm chuỗi, trích chuỗi con và áp  
dụng các thẻ HTML vào nội dung của chuỗi.  
Cách khai báo đối tượng String:  
var str=new String();  
Thuộc tính của String():  
Length: xác định chiều dài của chuuỗi.  
Các ký tự trong chuỗi được đánh chỉ số từ 0 đến Length-  
1. Tất cả các thành phần có giá trị chuỗi đều dùng được  
thuộc tính length.  
12/30/2016  
DOM  
14  
7
12/30/2016  
Một số phương thức của string  
12/30/2016  
DOM  
15  
Math()  
Các phương thức:  
Math.method([value])  
12/30/2016  
DOM  
16  
8
12/30/2016  
Windows  
Các thuộc tính:  
Status: status mặc định cho windows  
Location: xác định vị trí của windows  
…  
Các phương thức:  
Open(); mở windows mới  
Close(): đóng windows;  
12/30/2016  
DOM  
17  
12/30/2016  
DOM  
18  
9
12/30/2016  
Ví dụ:  
Tạo 2 liên kết trên trang, khi user di chuyển mouse qua  
liên kết nào thì hiển thị trên status thông báo về liên kết  
đó  
Events: Sự kiện của windows chính là sự kiện của  
document gồm 2 sự kiện: onload và unonLoad  
12/30/2016  
DOM  
19  
Phương thức:  
12/30/2016  
DOM  
20  
10  
12/30/2016  
12/30/2016  
DOM  
21  
Ví dụ: Tạo đoạn script gồm 3  
button như hình bên  
<script type="text/JavaScript">  
var win;  
function mo()  
{
win=window.open('hinhInOut.html','NewWin‘,  
'toolbar=yes,status=yes,  
width=500,height=500');  
}
function dong()  
{
win.close();  
}
</script>  
12/30/2016  
DOM  
22  
11  
12/30/2016  
document:  
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>,<a>,  
<img>, <title>, <table>, …  
document được định nghĩa khi <body> được xử lý trong  
trang HTML và nó vẫn tồn tại nếu trang được load lên.  
Các thuộc tính của document được thiết lập trong tag  
<body>. Trong <body> có 2 sự kiện onLoadvà  
onunload.  
<body onLoad=“alert(‘Welcome to my web  
site’);” onunLoad=“alert(‘Goodbye, see  
you again’);”>  
12/30/2016  
DOM  
23  
Ví dụ:  
Viết đoạn script thực hiện khi load webpage cho phép user  
nhập tên, và hiện thị 1 window “Chào bạn X đến với web  
site”. Khi kết thúc đóng window hiển thị “Tạm biệt bạn X,  
hẹn gặp bạn lần sau.”  
12/30/2016  
DOM  
24  
12  
12/30/2016  
Các thuộc tính của đối tượng document  
alink: màu cho liên kết  
bgcolor: màu nền cho trang  
fgcolor: màu chữ  
Ví dụ:  
document.bgcolor=“red”;  
document.fgcolor=“yellow”;  
12/30/2016  
DOM  
25  
12/30/2016  
DOM  
26  
13  
12/30/2016  
Phương thức:  
12/30/2016  
DOM  
27  
Events  
Ví dụ: Viết đoạn mã Script thực hiện việc thay đổi màu  
nền của Webpage với giá trị màu do user nhập vào  
bởi hàm prompt khi trang Web được load lên  
Form và cách làm việc trên form  
12/30/2016  
DOM  
28  
14  
12/30/2016  
txtName  
lstHk  
chkField  
radLag  
txtCont  
btnSend, btnClear  
frm  
12/30/2016  
DOM  
29  
Form và cách làm việc trên form  
Các sự kiện của các phần tử trên form  
12/30/2016  
DOM  
30  
15  
12/30/2016  
Cách đặt tên cho các phần tử trên  
form  
Textbox txt  
Checkbox chk  
Radio rad  
Listbox lst  
Button btn  
12/30/2016  
DOM  
31  
Form  
<form id=“name form” action=“url file”  
method=[post/get]>  
12/30/2016  
DOM  
32  
16  
12/30/2016  
Sự kiện form  
◦ OnSubmit  
◦ OnReset  
12/30/2016  
DOM  
33  
Truy cập các phần tử trên form  
Cú pháp:  
frm.txtName.value  
frm.chkField.value  
frm.chkField.checked  
Ví dụ:  
<form id=“frm”>  
<input id="txtName" name="txtName"  
type="text" />  
<input type=“Checkbox” id="chkField"  
name=“chkField" value=“Ly thuyet" />  
</form>  
12/30/2016  
DOM  
34  
17  
12/30/2016  
Truy cập các phần tử trên form  
document.getElementById(“id”).property  
Ví dụ:  
<form id=“frm”>  
<input id="txtName" name="txtName" type="text" />  
<input type=“Checkbox” id="chkField"  
name=“chkField" value=“Ly thuyet" />  
</form>  
Truy cập  
document.getElementById(“txtName”).text  
document.getElementById(“chkField”).value  
12/30/2016  
DOM  
35  
Textbox  
<input type=“text” name=“name” value= “buttonname”  
name_events=“function_events()”>  
Events: onblur, onfocus  
12/30/2016  
DOM  
36  
18  
12/30/2016  
<form id=“frm”>  
<input id="txtso1" name="txtso1" type="text" />  
<input id="txtkq" name="txtkq" type="text”  
readonly=true />  
…
</form>  
var a=document.getElementById(“txtso1”).value;  
document.getElementById(“txtso1”).value=“1900”;  
document.getElementById(“txtkq”).value= “2000”;  
frm.txtso1.focus();  
12/30/2016  
DOM  
37  
Regular Expression  
Biểu thức chính qui  
Cú pháp:  
/pattern/modifiers  
Trong đó: pattern: chuỗi Regular Expression  
modifiers: thông số cấu hình cho chuỗi  
với các giá trị:  
i: so khớp chữ hoa và thường  
g: so khớp toàn chuỗi  
m:so khớp cả dữ liệu xuống dòng  
Sử dụng hàm test() [true/false]: so khớp biểu thức chính  
qui  
12/30/2016  
DOM  
38  
19  
12/30/2016  
Partern chứa 2 loại ký tự:  
Ký tự thường bao gồm các ký tự trong bảng chữ cái:  
a,b,c,d,.. và các chuỗi thông thường được ghép từ các  
ký tự đó.  
Ký tự đặc biệt:  
^ : Trả về chuỗi kết quả phù hợp với vị trí đầu của chuỗi gốc.  
$ : Trả về chuỗi kết quả phù hợp với vị trí cuối của chuỗi gốc.  
: Ký tự Escape.  
+ : Lặp lại 1 hay nhiều lần.  
12/30/2016  
DOM  
39  
12/30/2016  
DOM  
40  
20  
Tải về để xem bản đầy đủ
pdf 26 trang baolam 20261 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web - Bài 6: Mô hình đối tượng DOM", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_lap_trinh_web_bai_6_mo_hinh_doi_tuong_dom.pdf