xv.l. ĐỊNH NGHĨA
Hàm là một đọan chương trình cĩ thể được sử dựng nhiều lần trong một chương trình đ ể thực hiện một tác vụ nào đĩ.
X ây d ự n g hàm: Trong JavaScript, dùng từ khố f u n c t i o n đ ể
định nghĩa hàm . M)ât haom có cấu trúc nhơ sau:
function N am eFunction( List_Param eter )
{
K hai báo các b iế n s ử d ụ n g trong hàm ;
Các câu lệ n h trong JavaScript ứ tự c h iệ n túc vụ ;
[return [giá trị /b iể u thứ c] ];
}
- NameFunction: là tên hàm do người lập trình tự đặt.
- Qui tắc đ ặt tên hàm giống như tên biên. Sau NameFunction là cặp dấu ngoặc ( )
chứa danh sách tham sơ hình thức. N êu hàm khơng cĩ tham sơ thì cặp dấu ngoặc ( ) cũng phải viết sau NameFunction.
- List_Parameter: là danh sách các tham sơ hình thức, nêu cĩ nhiều tham sơ cĩ thì
các tham sơ phài cách nhau bởi dấu phẩy, các tham sơ này khơng chỉ ra kiểu dữ liệu cụ th ể và cũng khơng cần từ khố var.
' Ví ‘d u ĩ:
function D isplay(user, pwd) {
document.write(“UserName cua ban la:” + user) ; document.write(“Password cua ban la:” + pwd) ; return ;
- Câu ìệnh return: là câu lệnh k ết thúc hàm. Câu lệnh này là tuỳ chọn. Cĩ th ể bỏ qua, nếu hàm cĩ giá trị trả v ề thì cần cĩ câu lệnh Return đ ể trả v ề giá trị. Sau Return cĩ th ể chứa hoặc khơng chứa một giá trị cự th ể hoặc một biểu thức tính tốn. Ví dụ: Function total(a,b) { c= a+ b ; Return c; } Cách g ọ i hàm
- Hàm sẽ khơng thực hiện cho đến khi nĩ được gọi.
- Đơi với hàm cĩ đối sơ ta gọi tên hàm và danh sách các giá trị truyền cho đối sơ đĩ FunctionN am e(argum entl,argum ent2,etc)
FunctionName()
- Đối với hàm khơng cĩ giá trị trả v ề :
NameFunction(parameter) .
- Đơi với hàm cĩ giá trị trả v ề :
variable= NameFunction(parameter). Ví du: < h tm l> <head><title>Function</title></head> <body> <script>
function Area(Width, Length) { size=Width*Length; retiirn size; } x=eval(prompt("Nhap x: ")) ; y= eval(prompt("Nhap y: ")); document.write(Area(x,y)) </script> </body> </html> XV.2. CÁC H À M TH Ơ N G D Ụ N G TR O N G JA VA SCR IPT
1) H à m alertQ: dùng hiển thị một hộp thơng báo cĩ nút OK
Cú pháp:
alert(“n ộ i dung thơng b á o ”)
ví d u : <html> <head><title>Function</title></head> <body> <script> alert("Hello World") </script> </body> </html>
2) H à m p ro m p t():tạ o hộp thoại chứa 2 nút OK và Cancel, và m ột textbox đ ể người sd nhập nội dung, giá trị trả v ề của hàm prompt là nội dung nhập trong textbox
Cú pháp:
variable= prompt(“n ộ i dung đối thoại”,giá trị khỏi tạo);
ví d u : <html> <head><title>Function</title></head> <body> <script> a=prompt("Your Lastname:"); b=prompt("Your FirstName"); document.write("Your FullName is :"+ a + ' ' + b) </script>
</body> </html>
Exp lo rer U ser Prom pt f X 11
Script Prompt: OK
Your Lastname:
Cancel
3) H à m confirm ():H iển thị hộp tliơng báo cĩ 2 nút OK và Cancel. Hàm trả v ề giá trị true nếu người sd d ic k OK và ngược lại thì trả v ề giá trị false.
Cüp pháp:
variable=confirm (“Chuoi thong b ao”); V í d ụ : <htmỉ> <head><title>Function</title></head> <body> <script> a=prompt("nhap so a b=prompt("nhap so b");
c=confirm( a +' lon hon '+ b+'?') if(c= =true) document.write( a +" > "+b ) else document.write( a +" < "+b ) </script> </body> </html> 4) Các hàm thơng d ụ n g c ủ a ch u ổi và số :
a. H àm eval(): T rả v ề giá trị sơ củ a m ộ t chuổi sơ Cú pháp: e v a l(c h u ổ i s ố ) Ví d u : <script> var s t r l= ” 123” , Str2=”4 5 6 ”; str= Strl+Str2; document.write(str);-> kết quả :123456 </script> <script> var strl= ” 123”, Sfr2=”456”; str=eval(strl)+eval(str2) ; document.write(str)->kết quả: 579 </script> b. H àm Parselnt(strN um )
Trả về một sơ nguyên từ chuổi strNum. N êu strNum theo sau là ký tự chữ thì các ký tự này sẽ bị bỏ qua. Nêu strNum khơng b ắ t đầu bằng sơ thì hàm này trả về giá trị NaN (Not a Number)
Ví du : var strNum=” 123.8” , kq: kq=parseInt(strNum) =>kq=123 strN um -”a l2 3 ” kq=parselnt(strNum) =>kq=NaN strN um =123.8abc” kq=parseInt(strNum)=>kq=123 c. H àm parseFloat(strNum ):
Hàm trả v ề một sơ thực từ chuổi strNum. N êu chuổi strNum bắt đầu là sơ và theo sau là các ký tự chữ thì các ký tự này bị bỏ qua. N êu chuổi strNum b ắt đầu từ ký tự chữ thì hàm trả v ề giá trị NaN. Ví d u : var strNum=” 123.8” , kq; kq=parseFloat(strNum) -> kq= 123.8 strNum=”al23.8” kq=parseFloat(strNum) =>kq=NaN strNum=”123 8abc kq=parseFloat(strNum)=>kq= 123.8 d. H àm isNaN(str):
Hàm trả v ề giá trị True nếu str là chuổi, ngược lại là False nếu str là chuổi sơ. Ví dụ : Var str=”123abc”, kq; kq=isNaN(str) =>kq=true; str=” 123.8 kq=isNaN(str) =>kq=false ; 5) Các hàm th iế t lậ p th ờ i gian:
a. Hàm Tim eout( ): Báo cho JavaScript thực hiện một lệnh JavaScript sau một khoảng thời gian nào đĩ. Hàm trả v ề một ID(duy nhất đơi với mơi hàm setTimeout thực hiện một lệnh) Giá trị ID này dùng đ ể xố khoảng thời gian đã thiết lập nếu khơng cần thực hiện hàm Timeout nữa .
Cú pháp:
IdTim e=setTim eout(“ Com m and JavaScript”, delayTime);
Command JavaScript : cĩ th ể là lời gọi hàm hoặc là một câu lệnh đơn
delayTime :là khoảng thịi gian chờ đ ể thi hành Command JavaScript, được tính
bằng mili giây. Ví d u :
Idq=setTimeout(“alert(‘Da het gio’)”,1000) ; c ứ 1000 mili giây thì thơng báo đã h ế t giờ một lân.
b. Hàm clearTimeout():Huỷ thời gian đã thiết lập bởi setTimeout().
Cú pháp:
clearTim eout(IdTim e );
Ví d u :
clearTimeoutỢdq);
c. Hàm setlnterval() và clearlnterval() với ý nghĩa và tham sơ giống như setTimeoutQ và clearTimeout().
CHƯƠNG XVI: CÁC CÀU TRÚC ĐlỀU KIÊN
XVI.1. C Ấ U TRÚC L ự A CHỌN:
Câu lệ n h if:
M ầ u 1: Áp dụng cho trường hợp cĩ 1 điều kiện và 1 cơng việc x ử iý
Củ pháp:
if (< B ỉể u th ứ c đ iề u k iện > )
K h ố i lệ n h 1;
K h ố i lệ n h 2;
Nguyên tắc hoat đơng: Nêu biểu thức điều kiện đúng thì thực hiện khối lệnh
1, sau đĩ thực hiện khỏi lệnh 2, ngược lại nếu biểu thức điều kiện sai thì bỏ qua khơi lệnh 1 và thực hiện khơi lệnh 2
M ầ u 2 : Áp dụng cho trường hợp cĩ 1 điều kiện và 2 lựa chọn cơng việc xử lý
Cú pháp:
if(< b iểu th ứ c đ iề u k iện > )
K h ơ i ỉệ n h l;
else
K h ơ i lệ n h 2 ; K h ỏ i lệ n h 3;
Nọiivên tắc hoat đơrtọ: Nêu biểu thức điều kiện đúng thì thực hiện khối lệnh
1, sau đĩ thực hiện khối lệnh 3, ngược lại thì thực hiện khối lệnh 2, sau đĩ thực hiện khối lệnh 3
__M ẫu _3_(if ...e ls e lồ n g nhau): Áp dụng cho trường hợp cĩ nhiéu chọn lựa khác nhau
Cú pháp:
if(< ủ /êu th ứ c đ iề u k iệ n l > )
K h ơ i lệ n h 1;
else
if (< b iể u thứ c đ iề u k iệ n 2>) K h ơ i lệ n h 2 ;
else
k h ố i lệ n h 3
Đ ể áp dụng m ẫu 3, cắn phải xác định biểu thức điều kiện của bài tốn rồi sắp xếp th ứ tự lồng nhau cho hợp lý.
Ví d u : V iết chương trình nhập 3 cạnh của tam giác sau đĩ xuất ra màn hình đĩ là tam giác gì?
<Body><script>
a=eval(prompt(“Nhap canh a”)); b=eval(prompt(“Nhap canh b”)); c=eval(prompt(“Nhap canh c”)); if(a= =b && b= = c && c= = a)
Tam giac đ ề u ; else
if(a= =b II b= = c II c= = a) Tam giac cân
Else
Tam giác thuong </script></Body>
C ấ u trúc c h ọ n lự a switch...case:
Áp dụng trong trường hợp muơn chọn m ột trong các giá trị của biểu thức đ ể thực hiện lệnh. Giá trị của biểu thức cĩ th ể là m ột chuỗi hoặc m ột sơ
M ầ u 1: sw itch (B /ểu th ứ c) { case v a lu e l: K h ơ i lệ n h 1; break; case value2: K h ơ i lệ n h 2 ; break; case valuek: K h ố i lệ n h k ; break; } M ầ u 2: sw itch (b iểu thức) {
case valu el:
k h ố i lệ n h 1 ; break; case vaỉue2: k h ơ i lệ n h 2 ; break; case valuek: k h ố i lệ n h k ; break; d e fa u lt: k h ố i lệ n h k + 1 ;}
Nguỵên tắc hoat đơng:
Trình thơng dịch s ẽ tính giá trị của biểu thức rồi so sách với các value, nếu bằng giá trị nào thì thực hiện khơi lệnh đĩ.
S ự khác nhau giữa m ẫu 1 và 2 là: ở m ẫu 2 khi so sánh giá trị của biểu thức với các value, n ếu khơng khớp thì thực hiện lệnh trong default
Trong trường hợp cĩ nhiều value khác nhau mà cùng thực hiện một khối lệnh thì liệt kê các value liên tiếp nhau và cách nhau dấu phẩy.
case valuejl ,vaỉuej2 ,...,va!uejk : khối lệnh; break; V í d ụ: <body> <script> t=prompt("nhap thang: "); switch(eval(t)) {
case 1: case 3: case 5: case 7: case 8 : case 10: case 12: alert("Thang "+ t+ " CO 31 ngay");
break; case 2:
alert("Thang "+t + " CO 28 ngay"); break;
case 4: case 6: case 9: case 11:
alert("Thang "+t +" CO 30 ngay"); break;
default:
alert("Khong CO thang nay"); }
</script> </body>
XVI.2. C Ấ U TRÚC LAP:
Đ ược áp dụng khi m ột cơng việc nào đĩ muốn thực hiện lặp đi lặp lại nhiều lần với m ột điểu kiện nào đĩ. Cĩ 2 lọai cấu trúc lặp là : lặp với số lẳn lặp biết trước và lặp với số lắn lặp khơng b iế t trươc
V ịng lặ p For: T h ư ờ n g áp d ụ n g cho s ố lầ n lặ p b iế t tr ứ ơ c Cú p h áp :
fo r(b iểu th ứ c 1; b iể u thức 2; b iể u th ứ c 3)
{
K h ố i lệ n h 1;
}
k h ố i lệ n h 2;
Trong đĩ :
biểu thức í:ch ứ a giá trị khởi tạo của biến điều khiển biểu thức 2 :chứa biểu thức điều kiện lặp.
biểu thức 3: chứa biểu thức tăng hoặc giảm biến điều khiển . Nguyên tắc hoat đơng::
Trình thơng dịch gán giá trị khởi tạo cho biến điều khiển, K êìn tra biểu thức 2, nếu đúng thì thực hiện khối lệnh 1, chuyển lên thực hiện biểu thức 3, tiếp tục kiểm tra biêu thức 2, và tiếp tục ...
N êu biểu thức 2 cĩ giá trị sai thì chương trình thốt khỏi vịng lặp và thực hiện khơi lệnh 2.
N êu khơi lệnh 1 cĩ chứa câu lệnh Break thì chương trình sẽ thốt khỏi vịng lặp for và thực h iện khối lệnh 2
Ví d u : V iết chương trình tạo một table m dịng n cột. <body> <Script language="javascript"> var n, m, i, j; m=prompt("Nhap so dong"); n=prompt("Nhap so cot"); document.write("<table wỉdth=50% border=l>"); for(i=l;i<=m;i++) { document.write("<tr>"); for(j=l;j<=n;j++) docuinent.write("<td>" + i + j +"</td>M); document.write("</tr>"); } document.write("</table>"); </Script> </body>
'3 Untitled Document Microsoft Internet Explorer
File
A d d ress
View Favorites Tools Help © E:\Mywebsite\TMP2f 58jdcwps.htm
Ịĩĩ 12 13
pn 22 23
31 32 33
41 42 43
V ịng lặ p while: th ư ờ n g áp d ụ n g cho s ố lẩ n lặ p khơng xác định 1. V ịng lậ p W hile: K iểm tra đ iề u k iệ n trư ớ c khi thực h iện lện h
Cú pháp:
w h ile(b iểu th ứ c đ iề u k iệ n )
{
khốỉ lễnh 1;
}
khối leảnh 2; Nguyên tắ c h o a t đơng :
Trình thơng dịch kiểm tra biểu thức điều kiện, nêu đúng thì thực hiện khơi lệnh 1, sau đĩ quay lại kiểm tra biểu thức điều kiện, và tiếp tục nếu sai thì thực h iện khối lệnh 2.
N hư vậy khơi lệnh 1 cĩ th ể khơng được thực hiện lẩn nào nếu ngay từ đáu biểu thức điều kiện sai
Thường khối lệnh 1 chứa lệnh làm thay đổi giá trị của biểu thức điều kiện đ ể cĩ th ể thốt ra khỏi vịng lặp, hoặc chứa lệnh break đ ể thốt khỏi vịng lặp
Ví du:
<script language="javascript"> var userinput;
w hile ((userinput!= 99) {
userinput=prom pt(“N h ập vào m ộ t sơ b ấ y kỳ, n h ậ p 99 đ ê thĩat”)
if(isNaN(userinput)
{
docum ent.write(“D ữ liệ u khơng hợp lệ, n h ập sơ ”); break;
} }</script>
2. V ịng l ặ p do ...w h ile: Thực h iện lệnh trước sau đĩ kiểm tra biểu thức điều kiện
Cú p háp: d o
{
k h ố i lệ n h 1;
} W h ile(biểu th ứ c đ iề u k iện ); k h ố i lệ n h 2;
Nauvên tắc hoat đơng: trình thơng dịch thực hiện khối lệnh 1, sau đĩ kiểm tra biểu thức điều kiện, nếu đúng thì thực hiện lại khối lệnh 1, nếu sai thì thốt khỏi vịng lặp và thực hiện khơi lệnh 20
Ví dU:Viểt chương trình u cắu người dùng nhập vào một số, kiểm tra xem giá trị nhập cĩ phải là số khơng, nếu khơng yêu cầu nhập lại.
<script language="javascript"> var userinput;
do {
userinput=prompt(“N hập vào một số b ấy kỳ, nhập 99 đ ê thĩat”) if(isNaN(userinput)
{
document.write(“D ữ liệu khơng hỢp lệ, nhập sơ ”); break;
}
}while ((userinput!=99 ) </script>
3. V ịng lá p for ...in : dùng đ ể d u y ệ t qua các thuộc tính c ủ a m ộ t đ ố i tư ợ n g hay giá trị của các p h ần tử trong m ản g
Cú pháp:
for ( variable in Object)
k h ố i lệ n h 1 ;
}
k h ố i lệ n h 2;
Nguyên tắc hoat đơng: trình thơng dịch sẽ duyệt qua tấ t cả các phần tử trong Object.
Ví du:
<body>
<script>
obj= new ArrayO ; obj[0]="Hello"; obj[l]="World" ; for(i in obj) document. write(obj[i]); </script> </body>
Câu lệ n h try ...ca tch và throw: dùng x ử lý l ỗ i trong các m odul. Nĩ
được dùng trong Internet Exploer 5 và trong IIS
Cú p h áp : try { k h ơ i lệ n h ; } catch(objErr) { xữlýlỗi; }
Nguyên tắc hoat đơng:
Trình thơng dịch thực thi các lệnh trong khối lệnh, nếu trong quá trình thực thi cĩ lỗi xãy ra thì trình thơng dich truyền đối tượng lỗi cho catch.
Câu lệnh catch tự động gữi vào tham sơ cĩ chứa đối tượng lỗi, đối tượng này cĩ 2 thuộc tính number và description, mỗi dạng lỗi trong mã kịch bản sẽ được gán cho một con sơ lỗi duy nhất, thuộc tính Number chứa m ột sơ nguyên lỗi, thuộc tính description chứa một mơ tả dạng văn bản v ề lỗi.
Ví duĩ:
<head><title>Chuong trinh kiem tra loi</title> <Script language=”JavaScript”> var s t r ; try { document.write("He]lo World"); Math.rQ; } catch(objerr) {
str="Loi thu " + objerr.number +"<br>"; str="Va loi do la " + objerr.description; alert(str);
}
Address E:\MyvMebsite\TMP2w8q3dcxbx.htm
</Script> </head>
Câu lệnh throw được dùng đ ể truyền một thơng báo lổi đến một câu lệnh catch. Nĩ cũng cĩ th ể được dùng đ ể truyền m ột lỗi lên
BỘ x ữ lý lỗi mức cao hơn trong trường hợp cĩ nhiều câu lệnh try...catch lổng nhau
Ví duĩ:
<Html><head><title>Chuong trinh kiem tra loi</title> <Script language=”JavaScript”> var s tr , m=4 ,kq; try { try { document.write("Hello World"); kq=m/n; } catch(objerr) {
str="Loi thu " + objerr.number +"<br>"; str="Va loi do la " + objerr.description; if (kq= =4) alert(“n - l ”) ; else throw (objerr); } catch (objerr) { alert(objerr.nuinber + objerr.description); } </Script></head></html>
CHƯƠNG XVII: MƠ HÌNH Đ ố i TƯỢNG
X V II.l. M Ơ H ÌN H D O M ((Docum ent Object M odel)
1. Đơi tượng - Mơ hình đối tượng:
Mỗi thành phần trên trang web được xem như m ột đối tượng, mỗi đối tượng đều cĩ các thuộc tính, phương thức và sự kiện của nĩ. Ví dụ hình ảnh, văn bản, button, một tag trong HTML cũng được xem như là một đối tựơng và các thuộc tính của tag đĩ được xem như là đối tượng con của nĩ. 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
Dùng thuộc tính ID đ ể truy xuất đến một đối tượng trong IE và thay đổi dữ liệu cho chính phần tử đĩ, tất cả các đối tượng trên trang đều cĩ một 1D duy n h ấ t
Ví dụ:
<tr><td Id=IdN am el>D ata</td></tr> <img Id=Id Name2>
<Iframe Id=IdNam e3></Iframe>
applet layer
class link
elem ent plug-in
em beb style ID
tag
Muơn truy cập vào đồi tượng nào thì phải truy cập vào đối tượng chứa nĩ trước, dùng tốn tử dấu chấm (.) đ ể phân cách giữa các đơi tượng. Tuy nhiên ta cĩ thê bỏ qua đối tượng window nếu đang thao tác trên cửa sổ hiện hành
Ví dụ: window.location
Ngồi các đối tượng do chương trình xây dựng sẳn, cĩ th ể tạo thêm những đối tượng mới cắn thiết cho nhu cầu sử dụng.
Mổi đối tượng đều cĩ thuộc tính, s ự kiện và 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,
o Thuốc tính (Properties): là nơi chứa các mơ tả thơng tin của đơi tựơng.
Ví d u : <img src=”URL” height=valuel widtli=value2 Id=”Id h l”>
form
button reset
check box select
hidden submit
password text
Trong tag Img cĩ 3 thuộc tính src, width, height, đ ể thay đổi kích thước của hình thì thay đổi giá trị của thuộc tính width, height hoặc đổi hình khác thì thay đổi giá trị của thuộc tính, đ ể thực hiện các việc trên ta dựa vào thuộc tính Td là IdhlT Ví d u : function ZoomIn() { Idhl.width=Idhl.width +10; Idhl.height=Idhl. height + 5; } function Changelmg(file) { Idhl.src=fi]e ; }
o S ự kiện (event): là các hành động, sự việc xãy ra trên trang web: click chuột, di
chuyển chuột, ...g ọ i là sự kiện. S ự kiện được x ử lý bởi các đoạn mã kịch gọi là bọ x ử lý sự kiện
■ Các s ự kiện thường s ử dụng:
Tên s ư k iê n Ý nghĩa
Onmousedown Phát sinh khi người sdụng nhấn chuột
Onmouseover Phát sinh khi người sdụng d/chuyển chuội lên đối tượng Onmouseout Phát sinh khi người sdụng d/chuyển chuột ra ngồi đtượng
Onkeypress Phát sinh khi người sử dụng nhấn một phím Onfocus Phát sinh khi đối tượng nhận tiêu điểm
Onblur Phát sinh khi rời khỏi đối tượng Onclick
- Người dùng click chuột vào đối tượng
- Một đối tượng đang cĩ tiêu điểm, người sd nhấn enter -M ột checkbox hoặc nút chọn đang cĩ tiêu điểm, người sd nhấn phím Spacebar
Onload - Phát sinh khi đối tượng được tả i xuống
On Unload - Phát sinh khi đối tượng được nạp trở lại hoặc chuyển trang
Onresize - Phát sinh khi cửa sổ bị thay đổi kích thước Onselect - Phát sinh khi đối tựơng được chọn
Onchange - Phát sinh khi đối tượng thay đổi giá trị Onsubmit - Phát sinh khi Form đươc Submit
■ Cách s ử dụng các s ự kiện: muốn điều khiển sự kiện, ta thêm sự kiện
đĩ vào trong thẻ HTML.
■ Cú pháp:< TagName event_handler=”JavaScript Command”> • TagName: tên tag
• event_handler: tên sự kiện
• JavaScript Command: gọi hàm x ử lý sự kiện
o Phương thức: Là các hàm được xây dụng trước cĩ tác dụng làm thay đổi thuộc
tính của đối tượng.
2. M ụ c đích c ủ a mơ hình DOM:
- Đê’ định nghĩa 1 tổ chức phân cấp th ể hiện các phán của 1 hổ sơ web. - Cho phép thay đổi cấu trúc đĩ thơng qua v iệc thêm bớt nội dung
- Cung cấp cách thức quan sát. thao tác các đặc tính của nội dung trên trang web