You are on page 1of 28

GIÁO TRÌNH HỌC LẬP TRÌNH WEB

Bài tiếp theo


Hàm và cách tạo một hàm

Tạo một hàm


Để tạo một hàm, chúng ta sử dụng từ khoá function, tiếp theo sau là tên mà chúng ta
muốn đặt cho hàm và sau đó là các dấu ngoặc tròn, danh sách các tham số mà hàm yêu cầu
phải truyền vào. Một ví dụ về phần thông tin đầu hàm được thể hiện dưới đây:
function tênhàm(thamsốđầutiên, thamsớthứhai, thamsớthứba)
chú ý rằng từ khoá function phải viết ở dạng in thường.
Tên hàm có thể là một từ bất kỳ miễn không phải là từ khoá được sử dụng bởi ngôn ngữ
Javascript chẳng hạn như while hoặc for. Tên của hàm có thể chứa các con số, các ký tự chữ cái
và dấu gạch dưới. Tuy nhiên, tên hàm chỉ có thể bắt đầu bằng ký tự chữ cái hoặc dấu gạch dưới,
không thể là con số. Dưới đây là các tên hàm hợp lệ:
Function displayShoppingBasket()
Function notify_error()
Function checkValueWhileTimerRun()
Các tên dưới đây là các tên không hợp lệ:
Function 1doSomething() //tên hàm không được bắt đầu bằng con số
Function my Function() //không cho phép có khoảng trắng
//trong phần tên hàm
function While() //While là từ khóa trong Javascript
Cuối cùng, phần mã lệnh thuộc về hàm phải được đặt trong dấu ngoặc móc ({}) nằm phía
sau phần đầu hàm. Các dấu ngoặc móc này sẽ bao bọc phần thân hàm.
Function tênhàm(thamsốđầutiên, thamsốthứhai, thamsốthứba) {
// Phần thân hàm
}
Trong Javascript, các biến có một thuộc tính gọi là phạm vi tồn tại. Phạm vi này cho biết
phần nào trong mã Javascript, hoặc thậm chí ngay trong trang Web của một ứng dụng, có thể
truy xuất được biến. Điều này được gọi là tính thấy được của biến. Các biến có thể thấy được
trong các khối lệnh nhất định trong một trang web, trong toàn bộ trang web hoặc thậm chí
trong toàn bộ ứng dụng bao gồm nhiều trang web.
Một khái niệm rất gần với phạm vi tồn tại là khái niệm về thời gian tồn tại của biến. Hãy
xem xét ví dụ sau:

<html>
<body>
<script language=”Javascript”>
var myGlobalVariable = “GLOBAL”;
function myFunction() {
var myLocalVariable=”LOCAL”;
}
</script>
</body>
</html>
Trong ví dụ này chúng ta có hai biến: biến đầu tiên có tên là myGlobalVariable (biến toàn
cục) nằm trong phạm vi cuả mã lệnh nhưng nằm ngoài phạm vi của hàm myFunction, trong khi
biến thứ hai có tên là myLocalVariable (biến cục bộ) nằm phía trong thân hàm myFunction.
Phạm vi tồn tại của biến myGlobalVariable là toàn bộ trang Web. Nói cách khác, nó có thể
được truy xuất từ bất kỳ nơi nào trong trang Web, ngay cả các mã lệnh trong các hàm cũng có
thể truy xuất được biến này. Thời gian tồn tại của nó chính là thời gian tồn tại của trang, ngay
khi người dùng di chuyển sang một trang web khác hoặc thậm chí khi người dùng cập nhật lại
chính trang web đó, giá trị của biến sẽ mất đi và biến không thể truy cập được nữa.
Trong khi đó phạm vi tồn tại của biến myLocalVariable bị giới hạn trong bản thân của
hàm myFunction. Biến này không thể truy xuất từ phía ngoài hàm và thời gian tồn tại của nó bị
giới hạn trong thời gian hàm được gọi. Một khi hàm đã kết thúc, khi đó biến sẽ mất đi.
Vậy thì tại sao chúng ta lại không khai báo tất cả các biến là toàn cục nếu như biến cục bộ
lại bị giới hạn như vậy? Có một lý do chính đáng cho việc sử dụng biến cục bộ. Đầu tiên, các
biến trong Javascript sẽ chiếm bộ nhớ và bằng cách sử dụng biến cục bộ chúng ta đảm bảo rằng
nguồn tài nguyên này chỉ được sử dụng khi cần thiết vì khi một biến “ra khỏi phạm vi tồn tại”
của mình, bộ nhớ dùng cho biến đó sẽ được giải phóng và sẽ được dùng cho mục đích khác. Thứ
hai, việc sử dụng các biến cục bộ sẽ giúp cho hàm của chúng ta có tính độc lập tương đối và
điều đó sẽ giúp cho việc sử dụng lại chúng dễ dàng hơn. Thứ ba, nếu sử dụng quá nhiều biến
toàn cục, khi đó chúng ta buộc phải nhớ hàm hoặc mã lệnh nào sử dụng biến nào. Trong trường
hợp tệ hơn, chúng ta có thể đi đến tình huống là có biến toàn cục chỉ có ý nghĩa đối với một số
hàm, nhưng bất kỳ hàm nào cũng có thể thay đổi được giá trị của nó. Nếu chúng ta phát hiện ra
rằng một biến toàn cục trong một hàm x không có giá trị như chúng ta mong đợi, khi đó chúng
ta phải tìm kiếm qua tất cả các hàm có thể để tìm ra xem hàm nào truy xuất biến đó. Điều này
sẽ làm cho việc bảo trì ứng dụng trở nên khó khăn.
Hãy bắt đầu bằng việc tạo một hàm. Hàm này có cùng tính năng như bộ chuyển đổi tiền tệ
mà chúng ta đã đề cập đến trong chương trước:

<html>
<body>
<script language =”Javascript”>
function convertEuroToDollar(amountOfEuros) {
var euroToDollarRate = 0.872;
var dollars = amountOfEuros*euroToDollarRate;
return dollars;
}
var euroToConvert = Number(prompt(“Nhập vào số Euro cần chuyển
đổi”,””)); if(isNaN(euroToConvert)) {
document.write(“Xin nhập vào con số hợp lệ”); }else {
var dollars =convertEuroToDollar(euroToconvert);
document.write(euroToconvert + “euros tương đương với“ + dollars +
“dollars”);
}
</scrip>
</body>
</html>
Dưới đây là phần định nghĩa hàm:
Function convertEuroToDollar(amountOfEuros) {
Var euroToDollarRate = 0.872;
Var dollars = amountOfEuros *euroTodollarRate;
Return dollars;
}
Hàm của chúng ta có tên gọi là convertEuroToDollar. Hàm nhận vào một tham số,
amountOfEuros. Trong phần thân của hàm, chúng ta sử dụng tham số này như là số Euro cần
được chuyển đổi thành đôla; chúng ta sử dụng tham số này giống như là biến mà chúng ta đã
khai báo. Các biến này sẽ biến mất khi hàm kết thúc, chúng ta không thể truy xuất chúng từ
phía ngoài hàm.
Trên dòng cuối cùng, chúng ta trả lại kết quả tính toán cho mã lệnh đã gọi hàm bằng cách
dùng từ khoá return và dữ liệu cần được gửi ngược trở lại. Chúng ta đã gửi dữ liệu chứa trong
một biến cục bộ, tuy nhiên giá trị trả về có thể là một chuỗi văn bản, hoặc một giá trị số, ... Chú
ý đến việc sử dụng từ “biến cục bộ”, chúng ta khai báo biến dollars phía trong bản thân hàm và
vì thế nó chỉ có thể truy cập và giữ giá trị của mình chỉ phía trong hàm khi mã lệnh của hàm
đang thực hiện. ở đây chúng ta minh hoạ trường hợp một biến toàn cục phía ngoài hàm có tên
gọi trùng tên với tên gọi của một biến cục bộ phía trong hàm, một việc mà chúng ta nên tránh.
Các biến toàn cục không có quan hệ gì đến biến cục bộ phía trong hàm và việc thay đổi của biến
này sẽ không ảnh hưởng gì đến biến kia.
Một ví dụ về giải phương trình bậc hai
<html>
<head>
<script language="Javascript">
function tinh_gia_tri()
{
var a=parseInt(document.addform.op1.value);
var b=parseInt(document.addform.op2.value);
var c=parseInt(document.addform.op3.value);
var z=b*b-4*a*c;
if (z==0)
{document.addform.sum.value="có nghi?m kép";
}
else
{
if (z>0)
{document.addform.sum.value="có hai nghi?m phân bi?t";
}
else
{document.addform.sum.value="vô nghi?m";
}
}
}
</script>
</head>
<body>
<p><h1 align="center"><font color="#0000FF">tìm số nghiệm của phương trình
bậc II</font></h1></p>
<center>
<form name="addform">
<table border="1" cellspacing="1" width="50%">
<tr>
<td width="50%">Nhập giá trị của A:</td>
<td width="25%"><input name="op1" type="text"></td>
</tr>
<tr>
<td width="50%">Nhập giá trị của B:</td>
<td width="25%"><input name="op2" type="text"></td>
</tr>
<tr>
<td width="50%">Nhập giá trị của C:</td>
<td width="25%"><input name="op3" type="text"></td>
</tr>
<tr>
<td width="50%"> Nghiệm của phương trình</td>
<td width="25%" bgcolor="#FF0000"><input name="sum" type="text"></td>
</tr>
</table>
<p>
<input type="button" value="tinh" onclick="tinh_gia_tri()">
<input type="submit" value="reset">
</form>
</body>
</html>
Bây giờ ta tiếp tục nghiên cứu một số hàm thường dùng
1/ Sử dụng phương pháp write và writeln trong JavaScript:
Write là một trong những phương thức thông dụng của Javascript. ứng dụng kết hợp với đối
tượng tài liệu, phương thức write hiển thị văn bản trên trang Web.
Ogject.write(string)

<HTML>
<HEAD>
<TILTE>Using Methods</TITLE>
<SCRIPT LANGUAGE = “JavaScript”>
document.write (“Xin chào ! cậu đi đâu đấy?”)
</SCRIPT>
</HEAD>
</HTML>
Phương thức write nhận hằng chuỗi và biến . Thậm chí bạn có thể ghép nhiều chuỗi
bằng toán tử nối vào một chuỗi . Ví dụ :
<HTML>
<HEAD>
<SCRIPT LANGUAGE = “Javascript”>
document.write(“<H1>Xin chào </H1>” + “<P>Cậu đi đâu đấy?</P>”)
</SCRIPT>
</HEAD>
<BODY>
<P> Đây là câu lệnh mà ta sử dụng phương thức write và dùng toán tử “+”
</BODY>
</HTML>
Phương thức writeln tương tự phương thức write ở chỗ hiển thị văn bản trong cửa sổ tài liệu.
Điểm khác biệt là writeln kết xuất ký tự trở về đầu dòng sau kết xuất văn bản. Trong HTML, ký
tự trở về đầu dòng bị bỏ qua trừ phi áp dụng trong văn bản định dạng sẵn.
ví dụ minh hoạ: sử dụng phương pháp writeln()

<HTML>
<HEAD>
<TITLE>Outputing Text</TITLE>
</HEAD>
<BODY>
<PRE>
<SCRIPT LANGUAGE=”Javascript”>
<!—
document.writeln(“One,”);
document.writeln(“Two,”);
document.write(“Three,”);
document.write(“…,”);
document.write(“This is text bold</B>”);
document.write(‘<IMG SRC=”welcome.gif”>’);
document.write(“<BR><H1>WELCOME TO NETSCAPE 2.1</H1>”);
-->
</SCRIPT>
</PRE>
</BODY>
</HTML>
2. Sử dụng hàm alert() trong JavaScript:
Một hàm tiện dụng là alert(), dùng để đặt một chuỗi vào trong một hộp thông báo nhỏ (còn
được gọi là hộp cảnh báo )với nút OK. Bài tập 3.3 dưới đây minh hoạ cách thức gọi một hàm
alert().

<html>
<head>
<title> Bài tập 4 </title>
<Script language= “JavaScript”>
<!—hide me
alert(“this page was written by chao!”);
// show me -->
</script>
<body>
<h1> To code, perchance to function </h1>
</body>
</html>
Khi chạy trình duyệt sẽ hiện ra màn hình hộp cảnh báo alert với câu
(“this page was written by chao!”. Khi kích vào nút OK thì ta có trang web với từ “To code,
perchance to function”. Hàm alert tìm ra những gì không đúng trong bài tập 4 minh họa sau
đây.

<html>
<head>
<title>Bài tập 5</title>
<Script language=”JavaScript”>
<!-- dấu JavaScript trong các trình duyệt cũ
var seconds_per_minute = 60;
var minute_per_hour = 60;
[1] var Hours_per_day = 24;
[2] alert(“seconds per minute is “ + seconds_per_minute);
[3] alert(“minutes per hour is” + minutes_per_hour);
[4] alert(“hours per day is” + hours_per_day);
[5] varseconds_per_day =
seconds_per_minute*minutes_per_hour*hours_per_day;
// kết thúc đoạn dấu mã JavaScript -->
</script>
</head>
<body>
<h1> Theo tính toán của tôi thì…</h1>
<Script language=”JavaScript”>
<!--
</Script>
</body></html>
Vậy qua bài tập trên một lần nữa ta lại minh hoạ cách dùng hàm alert() để phát hiện ra lỗi
bằng cách đưa ra hộp thông báo cho từng trường hợp bị lỗi trong trình duyệt. Cú pháp khi sử
dụng hàm alert: Object.alert([message])
Ví Dụ sau minh hoạ việc sử dụng hàm alert() trong các dialog boxes: Sử dụng hàm alert() để
thông báo một hộp thoại.
<HTML>
<HEAD>
<TITLE>Example 2.5 </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
<! –
alert(“Welcome To Netscape Navigator 2.1”);
document.write(‘<IMG SRC=”Welcome.gif”>’);
-->
</SCRIPT>
</BODY>
</html>
3/ Sử dụng hàm prompt() trong JavaScript:
Định nghĩa hàm Prompt(): là một hàm khá hữu dụng, yêu cầu người dùng nhập vào đó một
số thông tin và sau đó gán những gì người dùng nhập vào cho một biến.
Cú pháp : Object. Prompt([message[,inputDefault]]) trong đó
Message – chuỗi sẽ hiển thị
Inputdefault–chuỗi hay số nguyên đại diện giá trị mặc định của trường nhập
Trong trường hợp không định rõ tham số inputdefault thì hộp thoại hiển thị <undefined>
Bài tập 6 dưới đây minh hoạ hàm Prompt()

<html>
<head>
<title> Bài tập 6</title>
<Script language=”JavaScript”>
!-- hide me
[1] var the_name = prompt(“What’s your name?”, “put your name here”);
//Show me -->
</Script>
</head>
<body>
<h1>Dear
[2] <Script language = “JavaScript”>
<!-- hide
document.write(the_name);
//Show me-->
</Script>
</h1>
Thank you for coming to my Web page.
</body>
</html>
Ở bài tập trên cho thấy trên dòng [1] có hai chuỗi phía trong dấu ngoặc “What’s your
name?” và “put your name here”. Nếu bạn chạy đoạn mã trong bài tập 6, thì bạn sẽ thấy xuất
hịên một hộp thoại và bạn đáp ứng nhu cầu của hộp thoại.
Sử dụng hàm prompt() để tương tác với người sử dụng : Ví Dụ 1

<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
<!—
document.write(“Your favorite color is:”);
document.writeln(prompt(“enter your favorite color:”,”Blue”));
-->
</SCRIPT>
</BODY>
</HTML>
Ví Dụ 2:
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
<!—
document.write(‘<IMG SRC=”welcome.gif”>’);
document.write(“<H1>Greeting,”);
document.writeln(prompt(“enter your name:”,”name”));
document.write(“Welcome To netscape navigator 2.01</H1>”);
-->
</SCRIPT>
</BODY>
</HTML>
Ví dụ 3: sử dụng dấu + để cộng hai chuỗi đơn lại trong hàm prompt():
<HTML>
<HEAD>
<TITLE>Listing 2.6</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
<!—
document.write(‘<IMG SRC=”welcome.gif”>’);
document.write(“<H1>Greeting,”+prompt(“Nhập tên:”,”Tên”)+“Xin
chào</H1>”);
-->
</SCRIPT>
</BODY>
</HTML>

4/ Sử dụng hàm confirm() trong JavaScript:


Phương thức confirm hiển thị thông điệp cùng với nút OK và Cancel. Tuy nhiên, bạn không thể
thay đổi tiêu đề hộp thoại. Phương thức trả về True nếu người dùng nhấp nút OK và False khi
người dùng nhấp nút Cancel. Cú pháp:

Object. confirm([message])
<HTML>
<HEAD>
<SCRIPT LANGUAGE = “javascript”>
confirm(“Do you want to continue?”)
</SCRIPT>
</EAD>
</HTML>
Một số ví dụ minh hoạ cho hàm confirm() với các kiểu câu lệnh if
<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE=”Javascript”>
var question=”What is 10+10?”;
var answer=20;
var correct=’<IMG SRC=”correct.gif”>’;
var incorrect=’<IMG SRC=”incorect.gif”>’;
var response=prompt(question, “0”);
if (response !=answer) {
if (confirm(“Wrong ! press OK for a second change”))
response=prompt(question, “0”);
}
var output=(response==answer)?
Correct:incorrect;
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
<!—
document.write(output);
-->
</SCRIPT>
</BODY>
</HTML>
sử dụng phương pháp confirm() với phát biểu if – else

<HTML>
<HEAD>
<TITLE>Example 3.3</TITLE>
<SCRIPT LANGUAGE=”Javascript”>
var question=”What is 10+10 ?”;
var answer=20;
var correct=’<IMG SRC=”correct.gif”>’;
var incorrect=’<IMG SRC=”incorrect.gif”>’;
var response=prompt(question, “0”);
if(response !=answer) {
if (confirm(“Wrong ! press OK for a second change”))
response=prompt((question, “0”);
} else {
if(confirm(“correct ! press OK for second question”))
{
question=”What is 10*10”;
answer=100;
response=prompt(question, “0”);
}
}
var output=response ==answer) ?
correct:incorrect;
</SCRIPT>
</HEAD>
<SCRIPT LANGUAGE=”Javascript”>
<!—
document.write(output);
-->
</SCRIPT>
</BODY>
</HTML>
Chúng ta đã xét 3 hộp thông báo: Hộp thông báo Alert là hộp báo lỗi. Hộp thông báo
Confirm là hộp xác nhận tình trạng. Hộp Prompt là hộp thông báo nhắc người dùng. Bây giờ ta
tiếp tục xét bài tập tổng hợp thể hiện với ba hàm trên.

<HTML>
<HEAD>
<TITLE>Bai tap 7</TITLE></HEAD>
<BODY>
<FORM NAME = “F1”>
<INPUT TYPE = "button"
VALUE = "alert button"
onclick="alert('You clicked the alert button.')" size="20">
<P>
<INPUT TYPE = "button"
ư VALUE="prompt button"
onclick=“document.F1.Text1.value=prompt(‘Type below’ , ‘Here’) size="20">
<INPUT TYPE =”Text”
NAME=”text1” size=”50”
VALUE="click each button , starting with the alert button ." size="20">
<P>
<INPUT TYPE=”button”
VALUE="confirm button"
onclick="if(confirm(‘click OK’)){alert(‘thank you’)} else{alert(‘I said click
OK!!!)}" size="20">
</FORM>
</BODY>
</HTML>
Hộp thoại Alert cung cấp cho người dùng một thông báo và một nút OK. Nếu khi bạn nhấp
chuột vào nút thứ nhất, trình duyệt sẽ hiển thị hộp thoại Alert. Bạn có thể đóng hộp thoại này
lại bằng cách nhấp chuột vào nút OK hay nhấn nút Enter.
Hộp thoại Prompt yêu cầu người dùng cung cấp thông tin. Việc nhấp chuột vào nút thứ hai sẽ
thực hiện một đoạn mã kịch bản để mở ra một hộp thoại Prompt yêu cầu người dùng nhập vào
một đoạn văn bản bất kỳ trong ô nhập văn bản. Sau khi người dùng nhập vào một đoạn văn bản
nào đó và nhấp nút OK, trường văn bản kế bên nút nhấn Prompt trên trang Web sẽ thay đổi
thành những giá trị mà người dùng đã nhập vào trong hộp thoại Prompt.
Chú ý rằng tham số đầu tiên được xác định cho chức năng prompt sẽ xuất hiện như là lời chỉ
dẫn trong hộp thoại Prompt, trong khi tham số thứ hai là văn bản mặc định được đặt trong vùng
nhập văn bản. Kết quả khi người dùng nhập vào dòng New Text có thể được thấy trên màn hình.
Hộp thoại Confirm thể hiện với người dùng với một đoạn văn bản, một nút OK và nút Cancel.
Dạng hộp thoại này được dùng khi người dùng được hỏi để thực hiện một quyết định. Việc nhấp
chuột vào nút thứ ba sẽ làm hiển thị hộp thoại Confirm. Câu mệnh lệnh if trong đoạn mã trên sẽ
hiển thị hộp thoại Alert với dòng văn bản “Thank you” nếu biểu thức phía trong dấu ngoặc có
giá trị là true. Nó sẽ hiển thị một hộp thoại Alert phàn nàn với người dùng nếu như kết quả là
false. Chúng tôi dùng chức năng confirm cho biểu thức. Hộp thoại Confirm sẽ trả lại giá trị true
nếu người dùng nhấp vào nút OK và false nếu người dùng nhấp vào nút Cancel. Như vậy, khi
người dùng thực hiện theo lời hướng dẫn và nhấp vào nút OK sẽ được tán thưởng với dòng chữ
“Thank you”, trong khi những người nhấp vào nút Cancel sẽ nhận được lời khiển trách lạ lùng
.
Qua 7 bài tập trên, điều đầu tiên ta cần nói: Một trình duyệt web sẽ “biên dịch” mã lệnh
bằng cách chuyển đổi nó sang dạng mà máy tính có thể hiểu được và sau đó sẽ thực hiện mã
lệnh đó. Tuy nhiên, nó sẽ không biên dịch và thực hiện mã Javascript trừ khi chúng ta báo cho
trình duyệt biết đâu là Javascript và đâu là HTML.
Chúng ta sử dụng thẻ <script> và </script> để báo cho trình biên dịch biết rằng các dòng
nằm phía trong hai thẻ này cần được biên dịch như là các mã JavaScript chứ không phải là
HTML hoặc văn bản. Mọi thứ nằm trong hai thẻ này được xem như là mã lệnh Javascript.
Chúng ta có thể đặt các khối mã Javascript bất kỳ nơi nào trong trang web, và có thể đặt ở
nhiều nơi khác nhau, cũng như có thể đặt vào trong trang web nhiều khối lệnh Javascript khác
nhau:

<html>
<head>
<script language=”Javascript”>
// Các ký tự xổ chéo (/) cho biết các văn bản đi sau nó sẽ không được thực hiện.
</script>
</head>
<body>
<h1>Trang web thử nghiệm</h1>
<script language=”javascript”>
// Bạn có thể đặt các mã lệnh hoặc ghi chú vào đây.
</script>
</body>
</html>
Đoạn mã này thật ra không thực hiện điều gì cả; nó chỉ có mặt để minh hoạ cho bạn thấy
thuộc tính language phía trong thẻ script và cho bạn thấy rằng bạn có thể đưa các mã lệnh
Javascript vào nhiều vị trí khác nhau trên trang web.
Khi nói đến javascript thì ta cần nói đến cú pháp của nó. Cú pháp của javascript, cũng giống
như cú pháp tiếng Anh, là một tập hợp các quy tắc để làm cho ngôn ngữ trở nên “thông minh”.
Cũng giống như một lỗi cú pháp trong tiếng Anh có thể làm cho người đọc cảm thấy một câu vô
nghĩa , lỗi cú pháp trong javascript cũng sẽ dẫn đến câu lệnh vô nghĩa. Chúng ta sẽ đề cập đến
một số cú pháp cần thiết của javascript sau đây:
- ‘//’: cho biết những gì sau nó là ghi chú chứ không phải là mã lệnh cần thực hiện, vì thế
trình biên dịch sẽ không chuyển đổi nó thành mã máy và thực hiện nó. Các ghi chú là một cách
thức tiện lợi để đưa vào các giải thích cho các mã lệnh giúp chúng ta biết được đoạn đang viết
thực hiện điều gì, hoặc để giúp cho bất kỳ ai đọc đoạn mã này cũng biết được điều gì đang diễn
ra.
- ‘/*’: Báo hiệu sự bắt đầu của phần ghi chú có thể nằm trên nhiều dòng.
- ‘*/’: Báo hiệu sự kết thúc của phần ghi chú nằm trên nhiều dòng. Các ghi chú trên nhiều
dòng cũng rất hữu ích nếu bạn muốn ngừng một phần đoạn mã nào đó không bị thực hiện
nhưng lại không muốn xoá nó đi vĩnh viễn. Ví dụ, nếu bạn có vấn đề với một đoạn mã nào đó và
bạn không chắc dòng lệnh nào có vấn đề, bạn có thể đánh dấu ghi chú một đoạn mã nhằm xác
định ra vấn đề.
- Các dấu ngoặc móc ( ‘{‘ và ‘}’) được dùng để chỉ một khối lệnh. Chúng đảm bảo rằng tất cả
các dòng lệnh phía trong các dấu ngoặc móc được xem như là một khối lệnh.
- Dấu chấm phẩy (‘;’) cho biết sự kết thúc của một câu lệnh và một câu lệnh là một câu lệnh
đơn. Các dấu chấm phẩy trong thực tế là tuỳ chọn, tuy nhiên bạn nên sử dụng chúng để kết
thúc câu lệnh một cách rõ ràng hơn vì như vậy mã lệnh của bạn sẽ dễ đọc hơn và dễ dò lỗi hơn (
mặc dù bạn có thể đặt nhiều câu lệnh trên cùng một dòng, tuy nhiên tốt hơn cả bạn nên đặt
chúng trên các dòng riêng biệt để mã lệnh của bạn dễ đọc hơn). Bạn không cần phải sử dụng
dấu chấm phẩy phía sau dấu ngoặc móc.
Hãy xem xét cú pháp này trong việc giúp một đoạn mã cụ thể:
<html>
<body>
<script language=”Javascript”>
//Các ghi chú một dòng rất hữu ích trong việc giúp chúng ta biết
//đoạn mã làm gì.
/* Đây là một ghi chú trên nhiều dòng. Nó hữu ích cho cả các dạng ghi chú dài và cả
việc đánh dấu bỏ một khối lệnh khi bạn đang thử chương trình.
*/
/*Mã kịch bản được bắt đầu từ đây. chúng ta sẽ khai báo một biến có tên là
MyName và gán cho nó giá trị là người dùng nhập vào từ hộp nhắc (bạn sẽ được
biết thêm chi tiết trong chương 2), kết thúc câu lệnh với một dấu chấm phẩy vì đây
là một câu lệnh.
*/
Var MyName=prompt(“Nhập vào tên của bạn”,””);
//Nếu tên của người nhập vào là Nguyen truong sinh
if(MyName==”nguuyen truong sinh”){
// Khi đó một cửa sổ popup sẽ hiện ra với dòng chữ xin chao
alert(“xin chao”);
}
//Nếu tên nhập vào không phải là nguyen truong sinh
else {
//Hiện ra dòng chữ xin chao ban
alert(“xin chao ban”);
}
</script>
</body>
</html>
Có thể có một đoạn mã là mới đối với bạn nếu như bạn chưa từng gặp các đoạn mã
Javascript trước đây. Tất cả vấn đề nêu ra ở trên chỉ nhằm nêu rõ cách sử dụng các ghi chú như
thế nào và tại sao lại có các dấu chấm phẩy ở cuối mỗi dòng lệnh. Bạn có thể chạy đoạn mã này
nếu bạn thích – bạn chỉ việc sao chép nó vào một trang HTML và chạy thông qua trình duyệt.
Mặc dù các lệnh như if và else nằm trên nhiều dòng và chứa nhiều câu lệnh, chúng vẫn
được xem như là một câu lệnh đơn và không cần phải có dấu chấm phẩy phía sau chúng. Trình
biên dịch Javascript biết rằng các dòng được liên kết với một câu lệnh if sẽ được xem như là
một khối lệnh nhờ các dấu ngoặc móc. Chúng ta sẽ xem xét các biến và các câu lệnh điều kiện
(if và else ) trong chương kế tiếp.
Trình duyệt đọc một trang web từ đầu cho tới cuối, vì thế thứ tự thực hiện mã lệnh cũng
phụ thuộc vào thứ tự của các khối lệnh (cũng cần chú ý rằng không chỉ có trình duyệt mới có
thể đọc được mã lệnh của chúng ta, người sử dụng có thể xem được mã lệnh vì thế tốt nhất là
bạn không nên đặt những gì có tính bí mật hoặc nhạy cảm vào đó). Có ba khối lệnh trong ví dụ
kế:

<html>
<head>
<script language=”Javascript”>
alert(“Khối lệnh đầu tiên”);
alert(“Khối lệnh đầu tiên – Dòng thứ hai”);
</script>
</head>
<body>
<h1>Trang thử nghiệm </h1>
<script language=”Javascript”>
alert(“Khối lệnh thứ hai”);
</script>
<P>Đoạn văn mới</P>
<script language=”javaScript”>
alert(“Khối lệnh thứ ba”);
function doSomething() {
alert(“Hàm trong khối lệnh thứ ba”);
}
</script>
</script>
</body>
</html>
Nếu bạn thử chạy đoạn mã này, bạn sẽ thấy alert trong khối lệnh đầu tiên xuất hiện với
dòng chữ ‘Khối lệnh đầu tiên’, tiếp theo bởi dòng lệnh alert kế tiếp với dòng chữ ‘Khối lệnh đầu
tiên - dòng thứ hai.
Trình biên dịch tiếp tục đọc xuống phía dưới và bắt gặp khối lệnh thứ hai, tại đó hàm alert
hiển thị dòng chữ ‘Khối lệnh thứ hai’ và khối lệnh thứ ba tiếp theo sau đó với câu lệnh alert hiển
thị dòng chữ ‘Khối lệnh thứ ba’. Mặc dù cong có một câu lệnh alert nữa phía trong một hàm nằm
trong một số dòng phía dưới, tuy nhiên nó sẽ không được thực hiện và không xuất hiện hộp
cảnh báo. Đó là vì nó nằm phía trong một hàm (function doSomething) và mã lệnh phía trong
các hàm sẽ chỉ thực hiện khi chúng được gọi.
Để rõ hơn ta tiếp xét ví dụ nữa:
ví dụ:

<html>
<body>
<script language=”Javascript”>
//Nếu chiều rộng của màn hình nhỏ hơn 650 pixel
if (screen.availWidth<650){
// Tải xuống hình ảnh nhỏ
document.write(“<img src=SmallImage.jpg>”);
}
//Hoặc nếu kích thước màn hình lớn hơn 1000 pixel
else if(screen.availWidth>1000){
//Tải xuống hình ảnh lớn hơn
document.write(“<img src=BigImage.jpg>”);
}
//Các trường hợp khác
else {
//Tải xuống hình ảnh trung bình
document.write(“<img src=MedImage.jpg>”);
}
</script>
</body>
</html>
Trong trường hợp này, giả sử rằng chúng ta có các hình ảnh vừa với màn hình 640 x 480
(SmallImage.jpg), 800x600 (MedImage.jpg) và 1027x768 (BigImage.jpg).
Mặc dù chúng ta sẽ đề cập chi tiết đến câu lệnh if và các vòng lặp trong chương kế tiếp,
nhưng có lẽ bạn cũng hiểu được đoạn mã trên làm việc như thế nào. Câu lệnh if trên dòng đầu
tiên kiểm tra xem screen.availWidth có nhỏ hơn 650 pixel hay không.
If(screen.availWidth<650)
Nếu kích thước màn hình của người dùng là 640x480 khi đó chiều rộng của nó sẽ nhỏ hơn
650 pixel, vì thế đoạn mã phía trong dấu móc nhọn sẽ được thực hiện và hình ảnh nhỏ sẽ được
tải xuống (giả sử rằng màn hình của người dùng không thể hiện thanh công việc ở phía trái
hoặc phía phải của màn hình, khi đó hình ảnh sẽ vừa khít với màn hình).
If(screen.availWidth<650) {
Document.write(“<img src=SmallImage.jpg>”);
}
Chúng ta cũng sử dụng thêm một đối tượng nữa, đó là đối tượng document, để viết ra
trang Web (hồ sơ HTML). chức năng write() của đối tượng document cho phép chúng ta chèn
HTML vào trong trang Web. Chú ý rằng document.write() sẽ không làm thay đổi trang HTML gốc
mà chỉ làm thay đổi nội dung người dùng thấy được trên trình duyệt của họ.
Đoạn mã sẽ tiếp tục kiểm tra kích thước của màn hình bằng cách sử dụng câu lệnh else.
Mệnh đề else cuối cùng chỉ xảy ra khi các đánh giá khác đều cho lại kết quả sai, khi đó chúng ta
giả sử rằng màn hình là 800x600 và sẽ tải xuống hình ảnh kích thước trung bình:
else{
document.write(“<img src=MedImage.jpg>”);
}
Bạn cũng cần chú ý rằng chúng ta đang kiểm tra kích thước màn hình của người dùng và
người dùng có thể có màn hình 800x600 nhưng điều đó không có nghĩa là cửa sổ trình duyệt
của họ ở chế độ phóng to cực đại. Điều này có thể sẽ dẫn đến việc người dùng tải xuống hình
ảnh lớn hơn là họ mong đợi.
Chúng ta tiếp tục xem xét cách thức Javascript biểu diễn dữ liệu như thế nào?. Dữ liệu
được dùng để chứa thông tin và để thực hiện điều đó một cách hiệu quả hơn, Javascript cung
cấp cho mỗi mẩu dữ liệu một kiểu riêng. Kiểu dữ liệu quy định những gì có thể thực hiện hoặc
không thể thực hiện được với dữ liệu. Ví dụ, một trong số các kiểu dữ liệu là kiểu số, kiểu dữ
liệu này cho phép bạn thực hiện các tính toán nhất định trên dữ liệu mà nó chứa. Các kiểu dữ
liệu đơn giản nhất trong Javascript là các dữ liệu gốc (primitive). Kiểu dữ liệu gốc trong trường
hợp này có nghĩa là dữ liệu được chứa trực tiếp. Có ba kiểu dữ liệu gốc chứa dữ liệu trong
Javascript, bao gồm:
- Chuỗi: một chuỗi ký tự, ví dụ như “đây là một chuỗi”.
- Số: con số dạng chấm phẩy động, ví dụ 42 hoặc 3.1415
- Lôgic: có thể chứa giá trị true hoặc false.
Ngoài ra còn có hai kiểu dữ liệu gốc hơi khác hơn một chút. Các kiểu dữ liệu này không
chứa thông tin mà thay vào đó chúng cảnh báo cho chúng ta một tình huống cụ thể nào đó:
- Null: cho biết rằng không có dữ liệu hợp lệ.
- Underfined: cho biết rằng có một cái gì đó chưa được định nghĩa và được cung cấp một
giá trị. Đây là một đặc điểm quan trọng khi bạn làm việc với các biến. Trên đây là những kiến
thức cơ bản về hàm,trong quá trình thực hành chúng tôI tiếp tục giới thiệu cho bạn học những
hàm tự tạo và những hàm có sẵn trpng bộ Javascript
Phần thủ thuật JavaScript được ưa thích:
Một số loại sự kiện trong JavaScript.
· Sự kiện onClick
Là thể hiện cơ bản của một liên kết sẽ gọi một hộp cảnh báo khi người dùng nhấp chuột vào nó.
Sau đây ta xét đoạn mã về sự kiện onClick.
Trước khi viết JavaScript:
<a href=”http://www.aclu.org”> Visit the ACLU’s Web site </a>
Sau khi viết JavaScript:
<a href=”http://www.aclu.org” onClick=”alert(‘off to the ACLU!’);”> Visit the ACLU’s
Web site</a>
· Các sự kiện onMouseOver và onMouseOut
Là liên kết có thể phát hai sự kịên khác nhau: onMouseOver và onMouseOut. Việc di chuyển
chuột lên một liên kết sẽ tạo ra sự kiện onMouseOver như sau:
<a href=”#” onMouseOver = “alert(‘hey! That tickets!’);”> elmo </a>
Khi di chuột ra khỏi đối tượng thì sẽ tạo ra sự kiện onMouseOut. Có thể sử dụng các sự kiện
onMouseOver, onMouseOut, onClick trong cùng một liên kết như sau:
<a href =”#” onMouseOver = “alert(‘hey! That tickets!’);”
onMouseOut = “alert(‘much better!’);”
onClick = “return false;”>elmo</a>
Hình ảnh trong Script:
* Đặt tên cho hình ảnh
Trước khi viết JavaScript:
<img src=”happy_face.gif”>
Sau khi viết JavaScript:
<img src=”happy_face.gif” name=”my_image”>
có thể đặt tên gọi cho hình ảnh theo bất kỳ những gì bạn thích, nhưng tên gọi không có khoảng
trắng.
* Hoán chuyển hình ảnh cơ bản
JavaScript có thể thay đổi src của một hình ảnh nào đó bằng một hình ảnh Gif khác. Trên đây
là ví dụ về sự hoán chuyển hình ảnh.

<html><head><title>Simple Image Swap</title></head>


<body>
<img Src=”sad_face.gif” name=”my_image”>
<br>
<a href=”#” onClick=”Window.document.my_image.src=’happy_face.gif’;
return false;”>
make my day!</a>
<body>
</html>
* Làm việc với nhiều hình ảnh
Trên một trang Web bạn có thể có rất nhiều hình ảnh và mỗi hình ảnh có một tên khác nhau. Đoạn mã
sau minh hoạ việc sử dụng nhiều hình ảnh trên trang Web.
<html><head><title>Two Image Swap</title></head>
<body>
<img src=”sad_face.gif name= “my_first_image”><br>
<img src=”circle.gif” name= “my_seconds_image”>
<br>
<a hreft=”#”
onClick=”window.document.my_first_image.src=’happy_face.gif’; return false;”>
Make my day!</a>
<br>
<a hreft=”#”
onClick=”window.document.my_seconds_image.src=”square.gif’; return false;”>
Square the circle!</a>
</body>
</html>
Cơ bản về tải xuống trước:
Trước hết bạn phải tạo một đối tượng hình ảnh mới như sau:
Var new_image = new image();
đối tượng hình ảnh này không có gì. nhưng dòng lệnh dưới đây:
new_image.src = “my_good_image.gif”; sẽ buộc trình duyệt tải xuống một hình ảnh vào
trong bộ đệm. Chúng ta sẽ kết hợp giữa tải hình ảnh xuống trước và rollover:

<html><head><title>Preloaded Rollover</title>
<Script language=”JavaScript”>
<!hide me from old browsers
var some_image = new Image();
some_image.src = “happy_face.gif”;
//end hide-->
</script>
</head>
<body>
<a href=”#” onMouseOver = “window.document.my_first_image.src =
‘happy_face.gif’;” onMouseOut = “window.document.my_first_image.src =
‘sad_face.gif’;” onClick =”return false;”>
<img src =”sad_face.gif name =”my_first_image” border=”0”></a>
</body>
</html>
Phát hiện trình duyệt và hoán chuyển hình ảnh:

<html><head><title> Browser – Detecting Preloaded Rollover</title>


<Script language=”JavaScript”>
<!-- hide me from old browsers
var browser_name = navigator.appName;
var version = parseFloat(navigator.appVersion);
[1] var swappable = false; // this will be set to true if
// the browser can handle image swaps
if ((browser_name == “Netscape”) && (version >= 3.0))
{
[2] swappable = true;
}
if ((browser_name == “Microsoft Internet Explorer”) && (version >= 4.0))
{
[3] swappable = true;
}
[4] if(swappable)
{
var some_image = new Image();
some_image.src = “happy_face.gif”;
}
//end hide -->
</script>
</head>
<body>
<a href=”#” onMouseOver = “if(swappable)
{ window.document.my_first_image.src=’happy_face.gif’;}”
onMouseOut= “if(swappable)
{window.document.my_firsr_image.src=’sad_face.gif’;}”
onClick=”return fasle;”>
<img src=”sad_face.gif name= “my_first_image” border=”0”></a>
</body>
</html>
Bài sau sẽ minh hoạ một giải pháp thay thế để phát hiện trình duyệt và hoán chuyển hình ảnh.

<html>
<head>
<title> Nicer Browser – Detecting Preloaded Rollover</title>
<script language=”JavaScript”>
<!-- hide me from old browsers
if (window.document.images)
{
var some_image.src =”happy_face.gif”;
some_image.src = “happy_face.gif”;
}
//end hide -->
</script>
</head>
<body>
<a href=”#” onMouseOver = “if(window.document.images)
{window.document.my_first_image.src =’happy_face.gif’;}”
onMouseOut = “if(window.document.images)
{window.document.my_first_image.src =’sad_face.gif’;}”
onClick =”return false;”>
<img src=”sad_face.gif” name=”my_first_image” border=”0”>
</a>
</body>
</html>
Bài tiếp theo là một ví dụ thực tế về hoán chuyển hình ảnh cuả ACLU

<html><head><title> ACLU: American Civil Libertiess Union</title>


<SCRIPT language = “JavaScript”>
if (navigator.appVersion.substring(0,1) >= 3) {
hpbtact1 = new Image(158, 25);
hpbtact1.src = “hpbt-act1.gif”;
hpbtact2 = new Image(158, 25);
hpbtact2 .src = “hpbt-act2.gif”;}
</SCRIPT>
</HEAD>
<BODY alink = #0033cc bgcolor = #ffffff link =#0033cc vlink = #0033cc>
<A href =”http://www.aclu.org/congress/issues.html”
onmouseout=“if(navigator.appVersion.substring(0, 1) >= 3) hpbtact.src=
hpbtact1.src”
onmouseover=”if(navigator.appVersion.substring(0, 1) >= 3) hpbtact.src=
hpbtact2.src”
<IMG alt=”Act Now!” border=0 height=25 name=hpbtact src=”hpbt-
act1.gif” width=158>
</A>

<A href =”http://www.aclu.org/really_long.html”


onmouseout=“if(navigator.appVersion.substring(0, 1) >= 3) hpbtjoin.src=
hpbtact1.src”
onmouseover=”if(navigator.appVersion.substring(0, 1) >= 3) hpbtjoin.src=
hpbtact2.src”
<IMG alt=”Join the ACLU” border=0 height=29 name=hpbtjoin src=”ACLU
American Civil Liberties Union_files/hpbt-join.gif” width=158></A>
</BODY></HTML>
Qua bài trên bạn cần phải nắm được các yêu cầu sau:
- các sự kiện, chẳng hạn như onMouseOver và onMouseOu.
- Làm thế nào để vô hiệu hoá một liên kết với việc trả lại giá trị false phía trong onlick.
- Cách thức để thay đổi màu nền của một trang Web.
- Cách hoán chuyển hình ảnh.
- Cách tải xuống trước các hình ảnh để chúng có thể hoán chuyển nhanh hơn.
- Một dạng phát hiện trình duyệt mới: if(document.images)
- các dấu chấm có ý nghĩa gì.
Sử dụng hàm trong JavaScript:
<SCRIPT language=”JavaScript”>
<!—
function TripodShowPopup()
{
// open the popup window. Stick a timestamp to foil caching.
[1] var now = newDate();
[2] var popupURL = “ad.html?” + now.getTime();
[3] var popup = window.open(popupURL, “TripodPopup”, ‘width = 593,
height= 125’);
[4] if(navigator.appName.substring(0, 8) == “Netscape”)
{
popup.location = popupURL;
}
}
[5] TripodShowPopup();
// -->
</SCRIPT>
Phân tích đoạn mã thể hiện quảng cáo của Tripod
Dòng [1] lấy ngày giờ hiện tại và gán vào biến có tên là now.
Dòng [2] cung cấp URL của quảng cáo mà Tripod muốn xuất hiện trong cửa sổ pop-up.
URL này hơi khác thường một chút; thay vì nó kết thúc với .html, nó kết thúc với .shtml. các
trang web kết thúc với .shtml nói chung thường gọi một đoạn script là perl hay một chương
trình C nào đó trên máy chủ để tạo ra một trang Web. đoạn mã này sẽ quyết định quảng cáo
nào sẽ được đặt vào cửa sổ quảng cáo. chú ý rằng Tripod nối phần thông tin thời gian ở cuối của
URL bằng cách sử dụng new.getTime(). Như chúng ta đã học ở chương trước, getTime() trả lại
con số tính bằng mili giây giữa ngày hiện tại và ngày 1- 1- 1970, Tripod thêm thông tin này vào
URL để đánh lừa trình duyệt của bạn cho rằng chưa từng thấy trang Web này trước đây. Nếu
trình duyệt cho rằng nó đã thấy trang Web này trước đây thì, nó sẽ đọc trang Web này từ bộ
đệm của nó thay vì đọc từ site. Điều này sẽ không tốt cho Tripod, vì họ chỉ có thể kiếm tiền nếu
trình duyệt đọc quảng từ site của họ. Vì getTime() tính toán thời gian từ 1- 1- 1970, nó sẽ
không bao giờ có một con số xuất hiện hai lần, vì thế URL mà dòng [2] phát sinh ra luôn luôn
khác nhau. Điều này nằm ngoài phạm vi của cuốn sách này, nhưng nó là một ví dụ tốt về các
JavaScript và các script chạy trên máy chủ có thể làm việc với nhau.
Dòng [3] mở một cửa sổ nhỏ với URL được cung cấp trong dòng [2]. Mệnh đề if – then
xuất hiện ở dòng [4] để ý vấn đề kỳ lạ của Netscape 2 đối với việc mở cửa sổ: đôi khi bạn phải
đảm bảo rằng URL thực sự tải vào cửa sổ. Mệnh đề này là phần cuối cùng của hàm.
Dòng [5] đảm bảo rằng hàm này được gọi khi trang Web được đọc lên. chúng ta sẽ thấy
các hàm được gọi với một liên kết, giống như dưới đây:
<a href=”#” onClick=”TripodShowPopup(); return false;”> Show me an ad! </a>
Nếu bạn muốn gọi một hàm trong JavaScript mà không đòi hỏi người dùng phải nhấp
chuột vào một liên kết, bạn có thể chỉ cần gọi nó bằng tên, như Tripod đã thực hiện trong dòng
[5].
Bây giờ ta xét cách thêm một tham số vào hàm của bạn và cách gọi hàm với tham số.

<html><head><title>Getting Centered Functionally</title>


<script language=”JavaScript”>
<! Hide me from old browsers
[1] function openAndCenterWindow(the_url)
{
[2] if((parseInt(navigator.appVersion) >3) && (navigator.appName ==
“Netscape”))
}
var the_window =
window.open(the_url,’the_window’,’height=200,width=200’);
var screen_height = window.screen.availHeight;
var screen_width = window.screen.availWidth;
var left_point = parseInt(screen_width/2) – 100;
var top_point = parseInt(screen_height/2) – 100;
the_window.moveTo(left_point, top_point);
}
}
// show me -->
<script>
</head>
<body>
<a href=”#”
onClick=”openAnđCenterWindow(‘http://www.webmonkey.com/’);
return false;”> Click on me to put Webmonkey in a small centered
Window</a>
<a href=”#”
onClick=”openAndCenterWWindow(‘http://www.nostarch.com/’);
return false;”> Click on me to put No Starch Press in a small centered
window</a>
</body>
</html>
Phân tích bài trên:
Các dòng :
<a href=”#”
onClick=”openAndCenterWindow(‘http://www.webmonkey.com/’);
return false;”> Click on me to put webmonkey in a small centered window</a>
gọi hàm với URL của web monkey trong dấu ngoặc. ở đây URL của một webmonkey đóng
vai trò như dòng văn bản trong hàm alert(), ngoại trừ rằng thay vì một chuỗi ngẫu nhiên nào
đó, nó là một URL. Một cách tương tự, dòng:
<a href=”#”
onClick=”openAndCenterWindow(‘http://www.nostarch.com/’);
return false;”> Click on me to put No Starch Press a small centered window
</a>
gọi hàm URL của No Starch Press.
Bây giờ hãy xem xét bản thân hàm. chỉ có hai dòng khác với trong bài tập 3. dòng thứ
nhất của hàm bây giờ có dạng như sau:
Function openAndCenterWindow(the_url)
Chú ý rằng bây giờ có một từ xuất hiện phía trong dấu ngoặc. Đó là một biến lưu trữ
những gì bạn dùng để gọi hàm. vì thế nếu dòng dưới đây:
openAnđCenterWindow(‘happy happy!’);
gọi hàm, biến the_url sẽ giữ giá trị “happy happy!”. Khi chúng ta gọi hàm trong bài tập 5 như
dưới đây, biến the_url sẽ giữ giá trị http://www.nostarch.com/:
<a href=”#”
onClick=”openAndCenterWindow(‘http://www.nostarch.com/’);
return false;”> Click on me to put No Starch Press in a small centered window
</a>
dòng thứ hai trong hàm khác với dòng tương ứng trong bài tập 3 làdòng mở cửa sổ (dòng
[2]). Trong bài 3 chúng ta đã mở cửa sổ với một trang web.
Var the_window =
Window.open(‘http://www.nostarch.com/’,’the_window’, ‘height=200,width=200’);
Trong bài tập 5 chúng ta sẽ mở ra cửa sổ với biến được thiết lập khi hàm được gọi:
Var the_window = window.open(the_url, ‘the_window’, ‘height=200, width=200’);
JavaScript gặp biến the_url và biến đó là một biến vì không có dấu nháy bao quanh nó.
Nếu hàm có http://www.nostarch.com/ phía trong dấu ngoặc, giống như dưới đây:
openAndCenterWindow(‘http://nostarch.com/’);
biến the_url sẽ có giá trị http://www.nostarch.com/, vì thế cửa sổ mở ra với Web site No
Starch Press. Bài tập 6 dưới đây viết các hàm với nhiều tham số.

<html>
<head>
<title>Square Window</title>
<script language =”JavaScript”>
<!—
[1] function openSquareWindow(the_url, the_lenght)
{
var the_features =”width=” + the_length + “,height=” + the_length;
var the_window = window.open(the_url, “”, the_features);
}
//show me -->
</script>
</head>
<body>
[2] <a href=”#”
onClick=”openSquareWindow(‘http://www.webmonkey.com/’, 400);
return false;”> Open Webmonkey in a big square window</a><br>
<a href=”#”
onClick=”openSquareWindow(‘http://www.nostarch.com/’, 100);
return false;”> Open No Starch Press in a small square window</a><br>
</body>
</html>
Chú ý rằng trong dòng [1] bây giờ có hai biến xuất hiện trong dấu ngoặc đi sau tên hàm:
the_url và the_length. Trong dòng [2] chúng ta gọi hàm giống như chúng ta gọi hàm prompt(),
với hai tham số được phân cách với nhau bằng dấu phẩy. Việc gọi hàm sẽ thiết lập biến thứ nhất
trong phần định nghĩa hàm với tham số thứ nhất, vì thế trong trường hợp của dòng [2], the_url
được gán giá trị http://www.webmonkey.com/. Một cách tương tự, biến thứ hai trong phần gọi
hàm. Nếu chúng ta gọi hàm như trong dòng [2], the_length được gán giá trị 400.
Bài tập 7 là thể hiện tạo ra các trang trợ giúp lúc chạy:

<html>
<head>
<title>Abbreviated Listing of ParentsPlace Help Page Generator</title>
<script language=”JavaScript”>
<! – hide me from older browsers
[1] newWindow = newObject;
[2] newWindow.closed = true;
[3] function newWindowopener(word, def)
{
[4] if(!newWindow.closed) {
newWindow.closed();
}
[5] newWindow = window.open(“”,””,”height=200, width=420, scrollbars,
resizable”);
newWindow.document.write(“<HTML><HEAD><TITLE>”);
[6] newWindow.document.write(word);
newWindow.document.write(“</TITLE>”):
newWindow.document.write(“</HEAD><BODY BGCOLOR=#ffffff>”);
[7] newWindow.document.writeln(“<B>+word+”</B><br>”);
newWindow.document.writeln(def);
[8] newWindow.document.writeln(“<FORM><INPUT
TYPE=\”BUTTOM\”VALUE=\”Close\” onClick=\”seft.close()\”>”);
newWindow.document.writeln(“</FORM>”);
newWindow.document.close();
newWindow.focus();
}
// show me -->
</script>
</head>
<body>
<a href =“#” onClick=”newWindowopener(‘fetal monitoring’,’Fetal
monitoring can help gauge blah blah’); return false;”> get info on fetal monitoring
</a><br>
<a href =“#” onClick=”newWindowopener(‘êy_drops’,’Eye treatment of
some form is required by law blah blah blah’); return false;”> get info on eye
drops</a><br>
</body>
</html>
Cung cấp và nhận thông tin với các biểu mẫu
<html>
<head>
<title>A very Simple Calculator</title>
<script language =”JavaScript”>
<! – hide me from old browsers
functiuon multiplyThefields()
{
(1) var number_one = window.document.the_form.field_one.value;
(2) var number_two = window.document.the_form.field_two.value;
(3) var number = number_one * number_two;
(4) alert(number_one + “times” + number_two + “is:” + product);
}
//end hiding comment-- >
</script>
</head>
<body>
(5) <form name =”the_form”>
(6) Number 1: <input type =”text” name =”field_one”><br>
(7) Number 2: <input type =”text” name =”field_two”><br>
(8) <a href =”#” onClick =”multiplyThefields(); return false;”>multiply them!</a>
</form>
</body>
</html>
Thiết lập giá trị của một trường văn bản

<html>
<head>
<title>A Very Simple Calculator</title>
<script language =”JavaScript”>
<! Hide me from old browsers
function multiplyThefields()
{
var number_one =window.document.the_form.field_one.value;
var number_two =window.document.the_form.field_two.value;
var product = number_one * number_two;
(1) window.document.the_form.the_answers.value = product;
}
//end hiding comment-- >
</script>
</head>
<body>
<form name =”the_form”>
Number 1: <input type =”text” name =”field_one”><br>
Number 2: <input type =”text” name =”field_two”><br>
(2) The product : <input type =”text” name =”the_answer”><br>
<a href +”#” onClick = “multiplyThefields(); return false;”>multiply ‘em together!
</a>
</form>
</body>
</html>

Đọc và thiết lập giá trị cho vùng văn bản


Bạn có thể đọc và thiết lập các giá trị cho các vùng văn bản, phần tử biểu mẫu cho phép bạn
nhập vào nhiều dòng văn bản, giống như các trường văn bản. Ví dụ, nếu bạn có một vùng văn
bản có tên là the_text_area trong một biểu mẫu có tên là my_form, bạn có thể nhập vào các
chuỗi như sau:
window.document.my_form.my_text_area.value =”Here’s the story, of the lovely lady_”;
Nếu người dùng nhập một giá trị nào đó vào vùng văn bản, bạn có thể đọc giá trị của nó bằng
cách như sau :
Var the_visitor_input = window.document.my_form.my_text_area.value;
Đọc và thiết lập giá trị cho hộp kiểm
Các hộp kiểm khác với các trường văn bản và vùng văn bản. Thay vì có các giá trị như trường
văn bản và vùng văn bản, chúng có một giá trị Boolean gọi là checked. Nếu người dùng nhắp
vào một hộp kiểm để xuất hiện ký tự X phía trong nó, khi đó giá trị checked sẽ là true. Nếu hộp
kiểm không được chọn, khi đó giá trị checked sẽ là false(hãy nhớ rằng vì giá trị true và false là
các giá trị Boolean do đó chúng không được đặt trong dấu nháy).

<html>
<head>
<title>A quiz</title>
<script language =”JavaScript”>
<!—hide me
function scoreQuiz()
{
(1) Var correct =0;
(2) If (window.document.the_form.question1.checked == true) {
(3) correct = correct +1;
}
(4) if (window.document.the_form.question2.checked == true) {
correct = correct +1;
{
(5) if (window.document.the_form.question3.checked == false) {
correct = correct +1;
}
(6) alert(“you got” + correct + “answers right”);
}
//end hiding comment -- >
</script>
</head>
<body>
<h1>A little Quiz</h1>
Check the statements which are true:
<form name =”the_form”>
<input type =”checkbox” name =”question1”>All men are featherless bipeds<br>
<input type =”checkbox” name =”question2”>All men are featherless bipeds<br>
<input type =”checkbox” name =”question3”>All men are Kangaroos<br>
(7) <input type =”button” value = “score this quiz” onClick =”scoreQuiz();”>
</form>
</body>
</html>
Câu lệnh if – then trong dòng [5] hơi khác so với hai dòng kia. Nó nói rằng nếu thuộc tính
checked của hộp thứ ba là false (tức là người dùng không chọn hộp kiểm này), khi đó
JavaScript sẽ thêm vào một biến correct.
Cuối cùng dòng [6] báo cho họ biết kết quả của họ thế nào.
Để thể hiện cho người dùng biết được các câu trả lời chính xác sau khi họ nhấp vào nút tính
điểm trong mã trên, chúng ta có thể dùng scoreQuiz để xác đinh giá trị của mỗi hộp kiểm bằng
cách thiết lập thuộc tính checked của chúng thành true hay false.
Function scoreQuiz()
{
(1) var correct = 0;
if (window.document.the_form.question1.checked == true) {
correct = correct =1;
} else {
(2) window.document.the_form.question1.checked = true;
}
if(window.document.the_form.question2.checked == true)
{
correct = correct =1;
} else {
window.document.the_form.question2.checked = true;
}
if(window.document.the_form.question3.checked == false) {
correct = correct +1;
} else {
window.document.the_form.question3.checked = false;
}
alert(“you got” + correct + “answers right! The correct answers are now shown”);
}

Đọc và thiết lập các nút lựa chọn


Việc đọc và thiết lập giá trị của các nút chọn lựa hơi phức tạp hơn so với các trường văn bản
và các hộp kiểm. Vì tất cả các nút chọn lựa trong một nhóm có cùng một tên, bạn không thể
không xác định thông tin của một nút chọn lựa bằng cách sử dụng một tên nào đó: JavaScript
không biết bạn có ý đề cập đến nút nào. Để khắc phục khó khăn này, JavaScript đặt tất cả các
nút nhọn lựa với cùng tên trong một danh sách. Mỗi nút chọn lựa trong danh sách được gắn với
một con số. Nút chọn lựa đầu tiên trong nhóm là 0, nút thứ hai là 1, nút thứ ba là 2,…. (phần
lớn các ngôn ngữ lập trình đều bắt đầu từ 0 – bạn phải tập làm quen với quy ước này).
Để tham khảo đến một nút lựa chọn, hãy sử dụng quy ước
radio_button_name[item_number]. Ví dụ, nếu bạn có 4 nút lựa chọn có tên là age, nút đầu tiên
sẽ là age[0], nút thứ hai sẽ là age[1], nút thứ ba sẽ là age[2], nút thứ tư sẽ là age[3].
Nếu bạn muốn xem người dùng đã chọn nút nhọn lựa nào, bạn phải xem xét thuộc tính
checked giống như trong hộp kiểm. Hãy giả sử rằng bạn có 4 nút chọn lựa có tên là age trong
một biểu mẫu có tên là radio_button_form như trong mã trên. Nếu bạn muốn xem người sử
dụng có chọn nút chọn lựa đầu tiên trong nhóm age hay không, hãy viết một dòng lệnh như
sau:
If(window.document.radio_button_form.age[0].checked)
{
alert(“The first radio button was selected”);
}
Bạn sử dụng một cách thức cho hộp kiểm. Chỉ có một khác biệt là bạn phải tham chiếu đến
nút chọn lựa thứ nhất trong nhóm age dưới dạng age[0], trong khi đó với một hộp kiểm, bạn có
thể dùng tên của nó.
Một khi bạn đã biết cách thức xác định xem một nút chọn lựa nào được chọn, rất dễ để hiểu
được cách thức chọn một nút chọn lựa với JavaScript. Với hộp kiểm, bạn sử dụng đoạn mã giống
như dưới đây:
Window.document.form_name.checkbox_name.checked = true;
Với các nút chọn lựa, bạn phải báo cho JavaScript biết nút chọn lựa nào bạn muốn đề cập
đến bằng cách tham chiếu tới con số thứ tự của nó. Để chọn nút chọn lựa đầu tiên của nhóm
age, hãy sử dụng đoạn mã sau :
Window.document.form_name.age[0].checked = true;
Đọc và thiết lập giá trị của menu thả xuống và danh sách cuộn
JavaScript có thể đọc và thiết lập giá trị của menu thả xuống và danh sách cuộn như đối với
các nút chọn lựa, với hai sự khác biệt. Đầu tiên, trong khi các nút chọn lựa có một thuộc tính
checked, menu thả xuống và danh sách cuộn có thuộc tính gọi là selected. Thứ hai, danh sách
duy trì các tuỳ chọn trong một menu thả xuống và danh sách cuộn khác với nút chọn lựa. Như
được đề cập trong phần đọc và thiết lập giá trị của các nút chọn lựa, khi một trình duyệt bắt gặp
một nhóm các nút chọn lựa, nó tạo một danh sách với cùng tên như các nút chọn lựa. Chúng ta
tiếp tục đặt tên các nút chọn lựa là gender, vì thế trình duyệt gọi danh sách là gender. Phần tử
đầu tiên của danh sách này là gender[0].
Ngược lại, thuộc tính option, một danh sách của tất cả các tuỳ chọn trong một menu thả
xuống hay một danh sách cuộn, có thể báo cho bạn biết những gì được chọn trong menu hay
danh sách đó. Trong danh sách của một menu thả xuống đơn giản, male là phần tử đầu tiên
(mục số 0) và female là mục thứ hai (mục số 1).
<form name =”my_form”>
<select name =”the_gender”>
<option value =”male”>Male
<option value =”female”>Female
</select>
</form>
Như vậy dòng sau sẽ báo cho bạn biết nếu như người dùng chọn tuỳ chọn thứ nhất trong
danh sách:
If(window.document.my_form.the_gender.option[0].selected == true)
{
alert(“It’s a boy”);
}
Bạn cũng có thể chọn một tuỳ chọn :
Window.document.my_form.the_gender.option[1].selected = true;
Việc thực hiện dòng JavaScript này sẽ chọn tuỳ chọn female trong menu thả xuống.
Cách nhanh nhất để tìm mục nào được chọn trong menu thả xuống
Đôi khi bạn có một danh sách nhiều tuỳ chọn trong một menu thả xuống và bạn muốn biết
người sử dụng đã chọn các tuỳ chọn nào. Thật may mắn, các menu thả xuống và các danh sách
cuộn có một thuộc tính là selectedIndex chứa số hiệu của tuỳ chọn được chọn. Một khi bạn đã
biết con số này, bạn có thể nhận được giá trị của tuỳ chọn đó.
Hãy giả sử rằng bạn có một menu thả xuống. Để xác định một cách nhanh chóng xem người
dùng đã chọn mục male hay female trong menu thả xuống này, bạn hãy viết dòng mã như
sau:Var gender_number = window.document.my_form.the_gender.selectedIndex; Var
chosen_gender = window.document.my_form.the_gender.options[gender_number].value;
Dòng [1] xác định tuỳ chọn được chọn trong menu thả xuống the_gender bằng cách xét giá
trị của thuộc tính selectedIndex của menu thả xuống the_gender(trong biểu mẫu my_form
trong hồ sơ document của đối tượng window).Nếu người dùng chọn tuỳ chọn thứ nhất,
gender_number phải bằng 0.
Dòng [2] lấy ra giá trị của tuỳ chọn được chọn bằng cách tìm kiếm trong danh sách các
tuỳ chọn của menu thả xuống the_gender và tìm giá trị của tuỳ chọn có số hiệu
gender_number.
Thông thường, hai dòng lệnh trên được đặt thành một dòng lệnh dài giống như dưới đây:
Var chosen_gender =
window.document.my_form.the_gender.options[window.document.my_form.
The_gender.selectedIndex].value;
Trong dòng này, phần định ra số hiệu tuỳ chọn được chọn xuất hiện trong ngoặc vuông.
Đầu tiên JavaScript sử dụng selectedIndex để xác định ra tuỳ chọn, sau đó xác định giá trị của
nó.
Xử lý các sự kiện bằng cách dùng các phần tử của biểu mẫu
Đến giờ, tất cả các hàm trong chương này đều được kích hoạt bởi hành động nhấp chuột
của người dùng lên một liên kết hay một nút.
Mỗi loại phần tử của biểu mẫu có loại danh sách các sự kiện của riêng nó. Các phần tử nút
nhấn có thể dùng onClick. Tuy nhiên, không phải tất cả các phần tử của biểu mẫu đều có sự
kiện onClick. Bảng dưới đây thể hiện một số sự kiện khác mà các phần tử khác nhau xử lý.

Phần tử biểu Sự kiện Hành động nào kích hoạt sự kiện


mẫu
Nút nhấn OnClick

Hộp kiểm OnClick


Nút chọn lựa OnClick
Trường văn bản Onchange Thay đổi nội dung của một trường văn bản và
sau đó nhấp chuột phía bên ngoài trường văn
bản (nơi nào đó trên trang web).
Vùng văn bản Onchange Thay đổi nội dung của một vùng văn bản và
sau đó nhấp chuột phía ngoài vùng văn bản.
Chọn lựa Onchange Thay đổi mục chọn lựa trong một menu thả
xuống hay danh sách cuộn
Biểu mẫu OnSubmit Nhấn Enter phía trong một trường văn bản hay
nhắp chuột vào nút submit

Cũng cần chú ý rằng phần tử biểu mẫu có một sự kiện có tên là OnSubmit. Một biểu mẫu sẽ
được gửi đi khi một ai đó nhấn nút ENTER khi con trỏ nằm trong một trường văn bản hay khi họ
nhấn nút submit,

<html>
<head>
<title>A Simple Browser</title>
</head>
<body>
Type in URL and then either hit the submit button or just hit the enter key.
(1) <form name =”the_form” onSubmit =”window.location =
window.document.the_form.the_url.value; return false;”>
<input type =”text” name =”the_url” value = “http://”>
(2) <input type = “submit” value =”go thereZ!”>
</form>
</body>
</html>
Bạn có thể thấy rằng dòng [1] khá dài. bạn có thể rút gọn nó bằng cách thay thế phần lớn phần xác
định biểu mẫu window.document.the_form, với từ khóa this, mà tham chiếu tới đối tượng chứa nó. Ví dụ,
trong dòng [1] đoạn mã tìm kiếm giá trị của the_url nằm trong thẻ form với từ khoá this – nói cách khác,
bạn có thể viết lại dòng [1] trong mã trên như sau:
<form name =”the_form” onSubmit =”window.location = this.the_url.value;”>
Chúng tôi đã thay thế các phần tử xác định biểu mẫu, window.document.the_form với từ
khoá this, vì this nằm trong thẻ form. Mặc dù đôi khi thật khó biết được this là gì, nhưng nói
chung là nó tham khảo tới thẻ HTML chứa nó.
Kiểm tra lại
Bây giờ bạn đã sẵn sàng để tạo một menu thả xuống như một công cụ di chuyển, giống
như Sun Microsystems sử dụng trong mã trên thể hiện cho bạn thấy một công cụ như thế có
dạng như thế nào và cung cấp cho bạn đoạn Script.

<html>
<head>
<title>A pull down for Navigation</title>
<script language =”Javascript”>
<!—hide me
function visitSite(the_site)
{
window.location = the_site;
}
// show me-- >
</script>
</head>
<body>
<h1>Use the pulldown to choose where you want to go</h1>
<form name =”the_form”><select name =”the_select” onChange
=”visitSite(this.option[[this.selectedIndex]. value);”>
<option value =”http://www.nostarch.com/”>No starch Press
<option value =”http://www.nytimes.com/”>The New York Times
<option value =”http://www.Theonion.com/”>The Onion
</select>
</body>
</html>

Sun Microsystems đã tạo ra một công cụ di chuyển bằng menu thả xuống như thế nào
Đoạn mã di chuyển dạng menu thả xuống của Sun Microsystems hơi khác so với đoạn mã
trên thể hiện đoạn mã của Sun, đã được viết tắt để tiết kiệm không gian.

<html>
<head>
<title>Sun Microsystems</title>
<script language =”Javascript”>
<!--
function gotoFunction() {
(1) self.location =
document.productGoto.productList.option[[document.productGoto.productList.
selectedIndex].value;
}
// -->
</script>
</head>
<body BGcolor=”#666699”LINK=”#666699”VLINK=”#666699”ALINK=
”#FF0000”>
(2) <form name =”productGoto” action =”/cgi-bin/gotopic.cgi” method =”post”>
(3) <select name =”productList” onChange =”gotoFunction()”>
(4) <option value =”#”>SELECT A TOPIC
<option value =”#”>……………………….
<option value =”/stose/”>SUNSTOSE
<option value =”/dot-com/”>HOW TO .COM
<option value =”/ dot-com/keynotes”>&nbsp;&gt; Executive Keynotes
<option value =”/ dot-com/perspectives”>&nbsp;&gt; Executive Perspectives
<option value =”/ dot-com /reading”>&nbsp;&gt; Executive Reading
<option value =”/dot-com/studies/”>&nbsp;&gt; Case Studies
</select>
</form>
</body>
</html>
Kết luận chung:
Để bắt đầu với biểu mẫu, bạn cần phải tìm hiểu các đối tượng cơ bản của nó :
1. Đối tượng Button: đối tượng này được tạo ra khi bạn tạo Form trong HTML.
Thuộc tính:
o name: thiết lập tên cho đối tượng
o value: giá trị của đối tượng Button
o type: kiểu đối tượng button
Sự kiện:
o onClick: sự kiện này được kích hoạt khi ta click chuột vào đối tượng.
2. Đối tượng Checkbox: đây là đối tượng tạo các lựa chọn trong form của HTML.
Thuộc tính:
o checked: thuộc tính này cho biết đối tượng có được check hay không.
o name: thiết lập tên cho đối tượng
o value: giá trị trả về của đối tượng
o type: kiểu đối tượng button
Sự kiện:
o onClick: sự kiện này được kích hoạt khi ta click chuột vào đối tượng.
3. Đối tượng Radiobutton:
Thuộc tính:
o checked: thuộc tính này cho biết đối tượng có được check hay không
o lenght: thuộc tính này cho biết số đối tượng Radiobutton trong form.
o name: thiết lập tên cho đối tượng
o value: giá trị trả về của đối tượng
o type: kiểu đối tượng button
Sự kiện:
o onClick: sự kiện này được kích hoạt khi ta click chuột vào đối tượng.
4. Đối tượng Texbox, Textarea:
Thuộc tính:
o defaultValue: Xác lập giá trị mặc định cho đối tượng Textbox
o name: thiết lập tên cho đối tượng
o value: giá trị trả về của đối tượng
o type: kiểu đối tượng button
Phương thức:
o focus(): phương thức này đưa dấu nháy (dấu nhập liệu) vào đối tương Textbox.
o blur(): phương thức này ngược với phương thức focus()
o select(): phương thức này sẽ đánh dấu chuỗi văn bản trong Textbox
Sự kiện:
o onBlur: sự kiện này được gọi khi dấu nháy rời khỏi đối tượng
o onFocus: sự kiện này được gọi khi dấu nháy đưa vào đối tượng.
o onChange: sự kiện này được gọi khi ta thay đổi dữ liệu trong Textbox
o onSelect: sự kiện này được gọi khi ta đánh dấu chọn một vài hoặc tất cả các từ trong
Textbox.
5. Đối tượng Select (combobox): đối tượng này cũng được tạo ra trong Form của HTML.
Thuộc tính:
o name: xác lập tên cho đối tượng
o index: thuộc tính này lấy vị trí thứ n của đối tượng
o length: trả về số mục trong đối tượng
o selected: thuộc tính cho biết mục nào được chọn
o selectedindex: trả về vị trí thứ n của mục đang chọn
o text: lấy chuỗi đang hiển thị trong đối tượng
o type: kiểu đối tượng
o value: gán hoặc lấy giá trị trong đối tượng
Sự kiện:
o onBlur: sự kiện này được gọi khi dấu nháy rời khỏi đối tượng
o onFocus: sự kiện này được gọi khi dấu nháy đưa vào đối tượng
o onChange: sự kiện này được gọi khi ta thay đổi giá trị trong đối tượng
6. Đối tượng Document: Đây là đối tượng thông dụng khi ta muốn truy xuất đến bất kỳ phần
tử nào trong form hay trong HTML. Hoặc khi ta hiển thị giá trị nào trong HTML ta có thể
sử dụng đối tượng document này. Tóm lại, bất cứ cái gì thể hiện trong HTML ta có thể
truy xuất đến chúng thông qua đối tượng Document.
Phương thức:
o clear(): phương thức xóa tài liệu trong window
o close(): phương thức đóng lớp hiện hành đang mở
o write(): đây là phương thức sẽ ghi chuỗi hoặc cấu trúc HTML trong tài liệu đặc biệt
o writeln(): giống như phương thức write() nhưng tạo ra dòng mới
7. Đối tượng Window: đây là mức đối tượng đầu của mỗi Window hay Frame và cũng là đối
tượng cha của mỗi tài liệu tải trong trang web.
Thuộc tính:
o defaultStatus: giá trị hiển thị mặc định trong thanh trạng thái (status bar) của cửa sổ
trang Web
o frames: mảng chứa các frame được thiết lập trong trang HTML
o length: cho biết số frames được thiết lập trong trang HTML
o name: cho biết tên của window hay frame
o status: dùng hiển thị các thông điệp trong thanh trạng thái (status bar)
Phương thức:
o alert (message): hiển thị thông điệp (message) trong hộp thoại (dialog box)
o Close(): đóng cửa sổ
o Confirm (message): hiển thị thông điệp trong hộp thoại với 2 nút OK và Cancel. Giá trị trả
về là True hay False tùy thuộc người dùng click chọn OK hay Cancel
o Open (url, name, option): Mở (load) trang HTML (URL) vào trong cửa sổ window với tên
(name). Trong đó Option gồm:
 Toolbar = [yes, no, 1, 0]: cho biết tạo window có thanh Toolbar không ?
 Directories = [yes, no, 1, 0]: cho biết tạo window có directorie không ?
 Status = [yes, no, 1, 0]: cho biết tạo window có thanh trạng thái không ?
 menu = [yes, no, 1, 0]: cho biết tạo window có thanh menu không ?
 scrollbars = [yes, no, 1, 0]: cho biết tạo window có thanh cuộn không ?
 resizabled = [yes, no, 1, 0]: cho biết tạo window có thể thay đổi kích thước
không ?
 width = pixel: định kích thước bề rộng của cửa sổ
 height = pixel: định kích thước chiều cao của cửa sổ
Sự kiện:
o onload: sự kiện này được gọi khi mở trang web
o onUnload: sự kiện này được kích hoạt khi thoát trang web.
8. Đối tượng Navigator: đối tượng cho biết về trình duyệt mà người sử dụng đang dùng
chúng bao gồm cả phiên bản sử dụng, trên nền tảng nào ? . . .
9. Đối tượng history: đối tượng này kích hoạt đến các sự kiện trong history của trình duyệt
Web.
Thuộc tính:
o length: cho biết số mục có trong danh sách history
Phương thức:
o back(): phương thức này để quay lại tài liệu trước đó trong history
o forward(): phương thức này gọi đến tài liệu kế trong history
o go (location): phương thức này sẽ gọi đến tài liệu trong history. Location có thể dùng với
cuỗi hoặc số. Nếu là chuỗi thì ta phải điền đầy đủ các thành phần của URL. Nếu là số thì
phương thức này sẽ lấy vị trí tài liệu cần đến trong history.