Cách th c nhúng JavaScript vào file HTML ứ- 123docz.net

1 .T ng qua nổ

2.2Cách th c nhúng JavaScript vào file HTML ứ

Chúng ta có th nhúng JavaScript vào m t file HTML theo m t trong các cách sau đây:ể ộ ộ  S d ng các câu l nh và các hàm trong c p th <SCRIPT>ử ụ ệ ặ ẻ

 S d ng các file ngu n JavaScriptử ụ ồ

 S d ng m t bi u th c JavaScript làm giá tr c a m t thu c tính HTMLử ụ ộ ể ứ ị ủ ộ ộ  S d ng th s ki n (event handlers) trong m t th HTML nào đóử ụ ẻ ự ệ ộ ẻ

Trong đó, s d ng c p th <SCRIPT>...</SCRIPT> và nhúng m t file ngu nử ụ ặ ẻ ộ ồ JavaScript là đượ ử ục s d ng nhi u h n c .ề ơ ả

2.3 S d ng th SCRIPTử ụ ẻ

Script được đ a vào file HTML b ng cách s d ng c p thư ằ ử ụ ặ ẻ

<SCRIPT> và </SCRIPT>. Các th <SCRIPT> có th xu t hi nẻ ể ấ ệ trong ph n <HEAD> hay <BODY> c a file HTML. N u đ t trongầ ủ ế ặ ph n <HEAD>, nó s đầ ẽ ượ ảc t i và s n sàng trẵ ước khi ph n còn l iầ ạ c a văn b n đủ ả ượ ảc t i.

Thu c tính duy nh t độ ấ ược đ nh nghĩa hi n th i cho thị ệ ờ ẻ <SCRIPT> là “LANGUAGE=“ dùng đ xác đ nh ngôn ng scriptể ị ữ được s d ng. Có hai giá tr đử ụ ị ược đ nh nghĩa là "JavaScript" vàị "VBScript". V i chớ ương trình vi t b ng JavaScript b n s d ng cúế ằ ạ ử ụ pháp sau :

<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”> //Vi t mã JavaScript đâyế ở

…..

</SCRIPT>

2.4 S d ng m t file ngu n JavaScript ử ụ ộ ồ

Thu c tính ộ SRC c a th <ủ ẻ SCRIPT> cho phép b n ch rõ file ngu n JavaScript đạ ỉ ồ ượ ử ục s d ng.

Cú pháp:

<SCRIPT SRC=”path/file_name.js” language=”javascript” type=”text/javascript”> ...

</SCRIPT>

Chú ý:

- Thu c tính này r y h u d ng cho vi c chia s các hàm dùng chung cho nhi u trang khácộ ấ ữ ụ ệ ẻ ề nhau.

- Có th đ a thêm các câu l nh JavaScript n m trong c p th <ể ư ệ ằ ặ ẻ SCRIPT> và </SCRIPT> có ch a thu c tinhứ ộ SRC.

- Các file JavaScript bên ngoài không được ch a b t kỳ th HTML nào, chúng ch đứ ấ ẻ ỉ ược ch aứ các câu l nh JavaScript và các đ nh nghĩa hàm.ệ ị

2.5 Hi n th m t dòng Text trên Websiteể ị ộ

Đ i tố ượng document trong JavaScript được thi t k s n hai cách th c đ xu t m tế ế ẵ ứ ể ấ ộ dòng text ra màn hình c a client: ủ write() và writeln(). Cách g i m t cách th c c a m t đ iọ ộ ứ ủ ộ ố tượng nh sau:ư

object_name.property_name

D li u mà cách th c dùng đ th c hi n công vi c c a nó đữ ệ ứ ể ự ệ ệ ủ ược đ a vào dòng thamư s , ố Ví d :ụ

document.write("Test"); document.writeln('Test');

Cách th c ứ write() xu t ra màn hình xâu Text nh ng không xu ng dòng, còn cách th cấ ư ố ứ writeln() sau khi vi t xong dòng Text t đ ng có kho ng tr ng cu i dòng. Hai cách th c nàyế ự ộ ả ắ ở ố ứ đ u cho phép xu t ra th HTML. ề ấ ẻ

Ví d : ụ Xem ví d ụDocument.html

Mã ngu n:ồ

<TITLE>Design Simple Website</TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript" type=”text/javascript”> document.write("Đây là dòng văn b n in đ m!.</B>");ả ậ </SCRIPT>

</BODY></HTML>

2.6 Giao ti p v i ngế ớ ườ ử ụi s d ng thông qua h p tho iộ ạ 2.6.1 Hàm Alert

Ch c năng: ứ Thông báo m t h p tho i đ n ngộ ộ ạ ế ườ ử ụi s d ng.

Cú pháp: alert(“dòng văn b n”);ả

Thông thường, hàm alert() đượ ử ục s d ng trong các trường h p:ợ  Thông tin đ a vào form không h p l .ư ợ ệ

 K t qu sau khi tính toán không h p l .ế ả ợ ệ

 Khi d ch v ch a s n sàng đ truy nh p d li u.ị ụ ư ẵ ể ậ ữ ệ

Ví d : ụ Xem ví d ụalert.html

Mã ngu n:ồ

<body>

alert("Vui lòng nh p vào d li u!");ậ ữ ệ }

</script>

<tr>

<td width="143">H tên</td>ọ

<tr>

<td width="143">Đ a ch </td>ị ỉ

</table>

<p align="center"> (adsbygoogle = window.adsbygoogle || []).push({});

<input type="submit" onclick="kiemtradulieu();"

value="Update" name="B1"><input type="reset" value="Reset" name="B2"></p>

</form> </body> </html>

2.6.2 Hàm Prompt

Ch c năng: ứ Thông báo m t h p tho i đ n ngộ ộ ạ ế ườ ử ụi s d ng và yêu c u ngầ ườ ử ụi s d ng nh pậ vào m t giá tr nào đó.ộ ị

Cú pháp:

Prompt(“Đo n văn b n”, “Giá tr m c đ nh đạ ả ị ặ ị ược gán”);

Ví d :ụ

<TITLE>Design Simple Website</TITLE>

<SCRIPT LANGUAGE= “JavaScript” type=”text/javascript”> var name=window.prompt(“Hello! What’s your name ?”,””); document.write(“Hello ” + name + “ ! I hope you like JavaScript ”);

</SCRIPT> </HEAD>

2.6.3 Hàm Comfirm

Ch c năng: ứ Thông báo m t câu h i Yes/No cho ngộ ỏ ườ ử ụi s d ng l a ch n.ự ọ

Cú pháp: Confirm(“Câu h i?”);ỏ

Ví d :ụ

<title>Design Simple Website</title> </head>

<body>

if(ans){

document.write("Tôi cho b n 2$");ạ }

else{

document.write("B n cho tôi 20$");ạ } </script> </body> </html> 2.7 Bi n trong JavaScriptế 2.7.1 Bi n và phân lo i bi nế ạ ế

Tên bi n trong JavaScript ph i b t đ u b ng ch hay d u g ch ngang dế ả ắ ầ ằ ữ ấ ạ ưới. Các ch sữ ố không đượ ử ục s d ng đ m đ u tên m t bi n nh ng có th s d ng sau ký t đ u tiên.ể ở ầ ộ ế ư ể ử ụ ự ầ Ph m vi c a bi n có th là m t trong hai ki u sau: ạ ủ ế ể ộ ể

 Bi n toàn c c:ế ụ Có th để ược truy c p t b t kỳ đâu trong ng d ng.ậ ừ ấ ứ ụ được khai báo nh sau :ư

x = 0; (adsbygoogle = window.adsbygoogle || []).push({});

 Bi n c c b :ế ụ ộ Ch đỉ ược truy c p trong ph m vi chậ ạ ương trình mà nó khai báo. Bi n c cế ụ b độ ược khai báo trong m t hàm v i t khoá ộ ớ ừ varnh sau:ư

var x = 0;

Bi n toàn c c có th s d ng t khoá ế ụ ể ử ụ ừ var, tuy nhiên đi u này không th c s c n thi t.ề ự ự ầ ế

2.7.2 Ki u d li uể ữ ệ

Khác v i C++ hay Java, JavaScript là ngôn ng có tính đ nh ki u th p. Đi u này có nghĩaớ ữ ị ể ấ ề là không ph i ch ra ki u d li u khi khai báo bi n. Ki u d li u đả ỉ ể ữ ệ ế ể ữ ệ ượ ự ộc t đ ng chuy n thànhể ki u phù h p khi c n thi t.ể ợ ầ ế

<title>Design Simple Website</title> </head>

<body>

//num += 20; num = num + 20;

var temp ="There are " + num + " apples on the table."; document.write(temp);

</script> </body> </html>

Trình di n d ch JavaScript s xem bi n num có ki u nguyên khi c ng v i 20 và có ki uễ ị ẽ ế ể ộ ớ ể chu i khi k t h p v i bi n temp.ỗ ế ợ ớ ể

Trong JavaScript, có b n ki u d li u c b n sau: ố ể ữ ệ ơ ả ki u s nguyên, ki u d u ph yể ố ể ấ ẩ đ ngộ , ki u logicể và ki u chu iể ỗ.

2.8 Xây d ng các bi u th c trong JavaScriptự ể ứ 2.8.1 Đ nh nghĩa và phân lo i bi u th cị ạ ể ứ

V c b n có ba ki u bi u th c trong JavaScript:ề ơ ả ể ể ứ

 S h cố ọ : Nh m đ lằ ể ượng giá giá tr s . Ví d ị ố ụ(3+4) được đánh giá b ng ằ 7.

 Chu iỗ : Nh m đ đánh giá chu i. Ví d ằ ể ỗ ụ "The dog barked" + barktone + "!" là The dog barked ferociously!.

 Logic: Nh m đánh giá giá tr logic. Ví d ằ ị ụ temp>32 có th nh n giá tr sai. JavaScriptể ậ ị cũng h tr bi u th c đi u ki n, cú pháp nh sau:ỗ ợ ể ứ ề ệ ư

(condition) ? valTrue : valFalse

N u đi u ki n ế ề ệ condition được đánh giá là đúng, bi u th c nh n giá tr ể ứ ậ ị valTrue, ngược l i nh n giá tr ạ ậ ị valFalse. Ví d :ụ

state = (tuoi>60) ? "già" : "tr ";ẻ

Trong ví d này bi n state đụ ế ược gán giá tr ị "già" n u giá tr c a bi n ế ị ủ ế tuoi l n h n 32;ớ ơ trong trường h p ngợ ượ ạc l i nó nh n giá tr ậ ị"tr ".ẻ

2.8.2 Các toán tử

2.8.2.1 Gán

Toán t gán là d u b ng (=) nh m th c hi n vi c gán giá tr c a toán h ng bên ph iử ấ ằ ằ ự ệ ệ ị ủ ạ ả cho toán h ng bên trái. Bên c nh đó JavaScript còn h tr m t s ki u toán t gán rút g n.ạ ạ ỗ ợ ộ ố ể ử ọ

Ki u gán thông thể ường Ki u gán rút g nể ọ

x = x + y x + = y

x = x – y x - = y (adsbygoogle = window.adsbygoogle || []).push({});

x = x / y x / = y

x = x % y x % = y

2.8.2.2 So sánh

Người ta s d ng toán t so sánh đ so sánh hai toán h ng và tr l i giá tr đúng hayử ụ ử ể ạ ả ạ ị sai ph thu c vào k t qu so sánh. ụ ộ ế ả Sau đây là m t s toán t so sánh trong JavaScript:ộ ố ử

== Tr l i giá tr đúng n u toán h ng bên trái b ng toán h ng bên ph iả ạ ị ế ạ ằ ạ ả

!= Tr l i giá tr đúng n u toán h ng bên trái khác toán h ng bên ph iả ạ ị ế ạ ạ ả

> Tr l i giá tr đúng n u toán h ng bên trái l n h n toán h ng bên ph iả ạ ị ế ạ ớ ơ ạ ả

>= Tr l i giá tr đúng n u toán h ng bên trái l n h n ho c b ng toán h ng bên ph iả ạ ị ế ạ ớ ơ ặ ằ ạ ả

< Tr l i giá tr đúng n u toán h ng bên trái nh h n toán h ng bên ph iả ạ ị ế ạ ỏ ơ ạ ả

<= Tr l i giá tr đúng n u toán h ng bên trái nh h n ho c b ng toán h ng bênả ạ ị ế ạ ỏ ơ ặ ằ ạ ph iả

2.8.2.3 S h cố ọ

Bên c nh các toán t c ng (+), tr (-), nhân (*), chia (/) thông thạ ử ộ ừ ường, JavaScript còn h tr các toán t sau đây: x=4; y=5; z=++x – y--; x=5; z=0; y=4ỗ ợ ử

var1% var2 Toán t ph n d , tr l i ph n d khi chia var1 cho var2ử ầ ư ả ạ ầ ư

- Toán t ph đ nh, có giá tr ph đ nh toán h ngử ủ ị ị ủ ị ạ

var++ Toán t này tăng var lên 1 (có th bi u di n là ++var)ử ể ể ễ

var-- Toán t này gi m var đi 1 (có th bi u di n là --var)ử ả ể ể ễ

Chú ý

- N u b n gán giá tr c a toán t ++ hay -- vào m t bi n, nh y= x++, có th có các k tế ạ ị ủ ử ộ ế ư ể ế qu khác nhau ph thu c vào v trí xu t hi n trả ụ ộ ị ấ ệ ước hay sau c a ++ hay -- v i tên bi nủ ớ ế (là x trong trường h p này).ợ

- N u ++ đ ng trế ứ ước x, x s đẽ ược tăng ho c gi m trặ ả ước khi giá tr x đị ược gán cho y. N u ++ hay -- đ ng sau x, giá tr c a x đế ứ ị ủ ược gán cho y trước khi nó được tăng hay gi m.ả

2.8.2.4 Chu iỗ

Khi đượ ử ục s d ng v i chu i, toán t ớ ỗ ử+ được coi là k t h p hai chu i, ế ợ ỗ

Ví dụ : "abc" + "xyz" được "abcxyz"

2.8.2.5 Logic

JavaScript h tr các toán t logic sau đây:ỗ ợ ử

expr1 && expr2 Là toán t logic AND, tr l i giá tr đúng n u c expr1 và expr2 cùngử ả ạ ị ế ả đúng.

expr1 || expr2 Là toán t logic OR, tr l i giá tr đúng n u ít nh t m t trong haiử ả ạ ị ế ấ ộ expr1 và expr2 đúng.

2.8.2.6 Bitwise

V i các toán t thao tác trên bit, đ u tiên giá tr đớ ử ầ ị ược chuy n dể ướ ại d ng s nguyên 32ố bit, sau đó l n lầ ượt th c hi n các phép toán trên t ng bit.ự ệ ừ

& Toán t bitwise AND, tr l i giá tr 1 n u c hai bit cùng là 1.ử ả ạ ị ế ả

| Toán t bitwise OR, tr l i giá tr 1 n u m t trong hai bit là 1.ử ả ạ ị ế ộ (adsbygoogle = window.adsbygoogle || []).push({});

^ Toán t bitwise XOR, tr l i giá tr 1 n u hai bit có giá tr khác nhauử ả ạ ị ế ị

Ngoài ra còn có m t s toán t d ch chuy n bitwise. Giá tr độ ố ử ị ể ị ược chuy n thành sể ố nguyên 32 bit trước khi d ch chuy n. Sau khi d ch chuy n, giá tr l i đị ể ị ể ị ạ ược chuy n thành ki uể ể c a toán h ng bên trái. Sau đây là các toán t d ch chuy n:ủ ạ ử ị ể

<< Toán t d ch trái. D ch chuy n toán h ng trái sang trái m t s lử ị ị ể ạ ộ ố ượng bit b ngằ toán h ng ph i. Các bit b chuy n sang trái b m t và 0 thay vào phía bên ph i.ạ ả ị ể ị ấ ả Ví d : 4<<2 tr thành 16 (s nh phân 100 tr thành s nh phân 10000)ụ ở ố ị ở ố ị

>> Toán t d ch ph i. D ch chuy n toán h ng trái sang ph i m t s lử ị ả ị ể ạ ả ộ ố ượng bit b ngằ toán h ng ph i. Các bit b chuy n sang ph i b m t và d u c a toán h ng bênạ ả ị ể ả ị ấ ấ ủ ạ trái được gi nguyên. Ví d : 16>>2 tr thành 4 (s nh phân 10000 tr thành sữ ụ ở ố ị ở ố nh phân 100)ị

>>> Toán t d ch ph i có chèn 0. D ch chuy n toán h ng trái sang ph i m t sử ị ả ị ể ạ ả ộ ố lượng bit b ng toán h ng ph i. Bit d u đằ ạ ả ấ ược d ch chuy n t trái (gi ng >>).ị ể ừ ố Nh ng bit đữ ược d ch sang ph i b xoá đi. Ví d : -8>>>2 tr thành 1073741822ị ả ị ụ ở (b i các bit d u đã tr thành m t ph n c a s ). T t nhiên v i s dở ấ ở ộ ầ ủ ố ấ ớ ố ương k tế qu c a toán t >> và >>> là gi ng nhau.ả ủ ử ố

Có m t s toán t d ch chuy n bitwise rút g n:ộ ố ử ị ể ọ

Ki u bitwise thông thể ường Ki u bitwise rút g nể ọ

x = x << y x << = y x = x >> y x - >> y x = x >>> y x >>> = y x = x & y x & = y x = x ^ y x ^ = y x = x | y x | = y 2.9 Các c u trúc l nh c a JavaScriptấ ệ ủ 2.9.1 L nh đi u ki n if ... elseệ ề ệ Cú pháp if ( <đi u ki n> )ề ệ { //Các câu l nh v i đi u ki n đúngệ ớ ề ệ } else {

//Các câu l nh v i đi u ki n saiệ ớ ề ệ

}

if (x==10){ document.write(“x b ng 10, đ t l i x b ng 0.”);ằ ặ ạ ằ x = 0; } else document.write(“x không b ng 10.”);ằ 2.9.2 Câu l nh l pệ ặ 2.9.2.1 L nh Forệ

Vòng l p for thi t l p m t bi u th c kh i đ u - ặ ế ậ ộ ể ứ ở ầ initExpr, sau đó l p m t đo n mã choặ ộ ạ đ n khi bi u th cế ể ứ <đi u ki n>ề ệ được đánh giá là đúng. Sau khi k t thúc m i vòng l p, bi uế ỗ ặ ể th c ứ incrExpr được đánh giá l i.ạ

Cú pháp:

for (initExpr; <đi u ki n> ; incrExpr)ề ệ

{

//Các l nh đệ ược th c hi n trong khi l pự ệ ặ

}

Ví d :ụ

<TITLE>For loop Example</TITLE>

<SCRIPT LANGUAGE= "JavaScript" type=”text/javascript”> for (x=1; x<=10 ; x++) { y=x*25; document.write("x =" + x + ";y= " + y + "<BR>"); } </SCRIPT> </HEAD> <BODY></BODY> </HTML> 2.9.2.2 L nh Whileệ

Vòng l p while l p kh i l nh ch ng nào ặ ặ ố ệ ừ <đi u ki n> ề ệ cònđược đánh giá là đúng

Cú pháp:

while (<đi u ki n>)ề ệ

{

//Các câu l nh th c hi n trong khi l pệ ự ệ ặ

}

<TITLE>While loop Example</TITLE>

<SCRIPT LANGUAGE= "JavaScript" type=”text/javascript”> x=1; while (x<=10) { y=x*25; document.write("x=" + x + "; y = " + y + "<BR>"); x++; } </SCRIPT> </HEAD> <BODY></BODY> </HTML> 2.9.2.3 L nh Breakệ (adsbygoogle = window.adsbygoogle || []).push({});

Câu l nh ệ break dùng đ k t thúc vi c th c hi n c a vòng l p ể ế ệ ự ệ ủ ặ for hay while. Chương trình được ti p t c th c hi n t i câu l nh ngay sau ch k t thúc c a vòng l p.ế ụ ự ệ ạ ệ ỗ ế ủ ặ

Cú pháp

break;

Đo n mã sau l p cho đ n khi x l n h n ho c b ng 100. Tuy nhiên n u giá tr x đ a vào vòngạ ặ ế ớ ơ ặ ằ ế ị ư l p nh h n 50, vòng l p s k t thúcặ ỏ ơ ặ ẽ ế Ví d :ụ x=1; while (x<100) { if (x<50) break; x++; } 2.9.2.4 L nh Continueệ

L nh ệ continue gi ng l nh ố ệ break nh ng khác ch vi c l p đư ở ỗ ệ ặ ược k t thúc và b t đ uế ắ ầ t đ u vòng l p. Đ i v i vòng l p ừ ầ ặ ố ớ ặ while, l nh ệ continue đi u khi n quay l i <đi u ki n>;ề ể ạ ề ệ v i ớ for, l nh ệ continue đi u khi n quay l i incrExpr.ề ể ạ

Cú pháp

continue;

Ví dụ:

Đo n mã sau tăng x t 0 lên 5, nh y lên 8 và ti p t c tăng lên 10ạ ừ ả ế ụ x=0; while (x<=10) { document.write(“Giá tr c a x là:”+ x+”<BR>”);ị ủ if (x==5) {

x=8;

continue; }

x++; }

2.10 Các câu l nh thao tác trên đ i tệ ố ượng

JavaScript là m t ngôn ng d a trên đ i tộ ữ ự ố ượng, do đó nó có m t s câu l nh làm vi cộ ố ệ ệ v i các đ i tớ ố ượng.

2.10.1 L nh For...inệ

Câu l nh này đệ ược s d ng đ l p t t c các thu c tính (properties) c a m t đ iử ụ ể ặ ấ ả ộ ủ ộ ố tượng. Tên bi n có th là m t giá tr b t kỳ, ch c n thi t khi b n s d ng các thu c tínhế ể ộ ị ấ ỉ ầ ế ạ ử ụ ộ

Cách th c nhúng JavaScript vào file HTML ứ

Th uc tính color và Background ộ

Cài đt ASP trên máy tín hặ