目前,我們一旦談?wù)摰骄W(wǎng)頁編程,就離不開 HTML熬的、CSS 與 JavaScript 這 3 種技術(shù)藻雌。 由 HTML 負(fù)責(zé)描述頁面數(shù)據(jù)和信息,CSS 負(fù)責(zé)控制外觀,JavaScript 則用于響應(yīng)用戶的操 作,為網(wǎng)頁添加動(dòng)態(tài)的功能,我們也常稱之為動(dòng)態(tài)網(wǎng)頁編程,即 DHTML粉楚。
JavaScript 的引入
JavaScript 可以通過<script>標(biāo)記嵌入在 HTML 頁面中,也可以保存為擴(kuò)展名為.js 的文件后通過<script>標(biāo)記引入到網(wǎng)頁中,如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//JavaScript 代碼 </script>
<!--src 屬性為 JS 文件的位置 -->
<script type="text/javascript" src="js文件"></script>
</head>
<body>
</body>
</html>
JavaScript 中的變量
1.變量的定義
雖然 JavaScript 支持變量未經(jīng)定義直接使用,但推薦進(jìn)行變量定義,否則變量的生命 周期難以確定曹货。
在定義變量時(shí),因?yàn)?JavaScript 為弱類型語言,所以不需要指定變量類型,只需要指 定變量名稱即可,也可以為變量賦初始值奖亚。定義變量時(shí)可以使用 var 關(guān)鍵字徘跪。
注意:因?yàn)镴avaScript代碼總是在同一網(wǎng)頁內(nèi)有效,并不能跨網(wǎng)頁運(yùn)行,所 以也不需要定義類似于Java語言中的訪問修飾符(public甘邀、private等)。
JavaScript 變量的命名規(guī)則與 Java 相似,只能包含數(shù)字垮庐、字母松邪、下畫線和$符號(hào),大小 寫敏感,不可以使用 JavaScript 的關(guān)鍵字和保留字。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var a; //定義變量
var b = 3; //定義變量并賦初始值
var c = 'String', d = "String";//定義多個(gè)變量
</script>
</head>
<body>
</body>
</html>
2.變量的類型
雖然不能在定義變量時(shí)指定變量類型,但是 JavaScript 會(huì)根據(jù)變量的值自動(dòng)決定類型, JavaScript 中常見的內(nèi)置變量類型如下哨查。
- 數(shù)字型:可以存儲(chǔ)小數(shù)或整數(shù)逗抑。
*? 布爾型:可以存儲(chǔ) true 或 false。
*? 字符串:屬于引用類型,可以存儲(chǔ)字符串寒亥。
*? 數(shù)組:屬于引用類型,存儲(chǔ)多項(xiàng)數(shù)據(jù)邮府。
如果要將字符串轉(zhuǎn)換為數(shù)字類型,可以使用 parseInt 或 parseFloat 方法,如果無法轉(zhuǎn)換
為數(shù)字,則 JavaScript 會(huì)返回特殊值“NaN(Not a Number)”,如下所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var a = 3;
var b = "3";
var c = a + b; //結(jié)果是33
var d = a + parseInt(b); //結(jié)果是6
var e = a + (b - 0); //結(jié)果是6
var f = parseInt('a'); //結(jié)果是NaN
</script>
</head>
<body>
</body>
</html>
3.注釋與特殊符號(hào)
JavaScript 語言中的注釋與 Java 語言中的注釋規(guī)則相同,支持單行注釋(//)與多行注 釋(/.../),注意不能在 JavaScript 內(nèi)部使用 HTML 語言中的“”注釋。在 JavaScript 中字符串可以使用雙引號(hào)或單引號(hào)引起來,在不引起沖突的情況下可以混用,也可以使用 反斜杠進(jìn)行轉(zhuǎn)義,如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//a的值為It's mine.
var a = "It's mine.";
//b的值為he say : "good".
var b = 'he say : "good".';
//c的值he say : "It's good".
var c = 'he say : "It\'s good".';
</script>
</head>
<body>
</body>
</html>
4.運(yùn)算符
運(yùn)算符與表達(dá)式基本與 Java 相同,常用的運(yùn)算符如表 7-1 所示(優(yōu)先級(jí)自上而下)溉奕。
JavaScript 中的流程控制語句
JavaScript 語言中的流程控制語句與 Java 語言中幾乎完全一致,分支流程可以使用 if-else 結(jié)構(gòu)或 switch 結(jié)構(gòu),循環(huán)流程可以使用 for 或 while 循環(huán),具體語法如下褂傀。
1.if 語句的語法結(jié)構(gòu)
if 語句的語法結(jié)構(gòu)如下:
if (條件表達(dá)式A) {
//條件表達(dá)式 A 為 true,所執(zhí)行的代碼塊
} else if(條件表達(dá)式)B {
//條件表達(dá)式 B 為 true,所執(zhí)行的代碼塊
} else {
// 條件表達(dá)式 A 和條件表達(dá)式 B 都為 false,所執(zhí)行的代碼塊
}
2.switch 語句的語法結(jié)構(gòu)
switch 語句的語法結(jié)構(gòu)如下:
switch (表達(dá)式) {
case值1 :
//表達(dá)式與值 1 匹配時(shí),所執(zhí)行的代碼塊
break;
case值2 :
//表達(dá)式與值 2 匹配時(shí),所執(zhí)行的代碼塊
break;
default :
//所有 case 值都與表達(dá)式不匹配時(shí),所執(zhí)行的代碼塊
}
3.for 語句的語法結(jié)構(gòu)
for 語句的語法結(jié)構(gòu)如下:
for (初始化語句; 循環(huán)判斷條件; 循環(huán)執(zhí)行語句) {
//循環(huán)體
}
4.while 語句的語法結(jié)構(gòu)
while 語句的語法結(jié)構(gòu)如下:
while (循環(huán)判斷條件) {
//循環(huán)體
}
5.do...while 語句的語法結(jié)構(gòu)
do...while 語句的語法結(jié)構(gòu)如下:
do {
//循環(huán)體
} while (循環(huán)判斷條件);
6.綜合演示
下例綜合使用各種流程結(jié)構(gòu)通過 JavaScript 動(dòng)態(tài)在頁面中生成一個(gè)隔行換色的 HTML表格,其中用到了 document.write()方法,該方法用于向 HTML 頁面中輸出內(nèi)容。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
//rows 為表格的行數(shù),cols 為表格的列數(shù)
var rows = 6;
var cols = 8;
document.write('<table width="100%" border="1">'); document.write('<caption>動(dòng)態(tài)生成表格</caption>'); document.write('<tbody>');
for (var row = 0; row < rows; row++) {
if (row % 2 == 0) {
document.write('<tr bgcolor="#cccccc">');
} else {
document.write('<tr>');
}
for (var col = 0; col < cols; col++) {
document.write('<td>' + col + '</td>');
}
document.write('</tr>');
}
document.write('</tbody>');
document.write('</table>');
</script>
</head>
<body>
</body>
</html>
請(qǐng)注意,本例 document.write()方法是動(dòng)態(tài)地生成 HTML 代碼并輸出到頁面中,并沒有 改變 HTML 源文件,只改變了瀏覽器內(nèi)存中的 DOM(DOM 即文檔對(duì)象模型,詳細(xì)內(nèi)容請(qǐng) 參看第 10 章)結(jié)構(gòu)加勤。故如果通過瀏覽器的“查看源代碼”功能查看該頁面代碼并不會(huì)看到 輸出的表格代碼,但如果通過瀏覽器的 DOM 查看器則可以看到生成的結(jié)果.
JavaScript 中的方法
1.JavaScript 中的常用方法
JavaScript 中提供了很多常用的方法,如上例中用到的 document.write 方法,現(xiàn)介紹 3個(gè)用于與用戶交互的方法.
請(qǐng)注意這 3 個(gè)方法顯示的對(duì)話框都是模態(tài)對(duì)話框,即會(huì)停止當(dāng)前腳本的運(yùn)行直到用戶 關(guān)閉對(duì)話框?yàn)橹?下面的例子綜合使用了這 3 個(gè)方法
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
alert("現(xiàn)在演示 alert仙辟、confirm 與 prompt 方法");
var name = prompt("請(qǐng)輸入您的姓名", "匿名");
var flag = confirm("請(qǐng)確認(rèn)您的姓名:" + name);
if (flag) {
alert('確認(rèn)無誤!');
} else {
alert('確認(rèn)失敗');
}
</script>
</head>
<body>
</body>
</html>
2.自定義方法
JavaScript 語言中的自定義方法與 Java 語言有較大的不同。
第一 ,JavaScript 中沒有方法 修飾符,所有方法都是本頁面內(nèi)可以訪問;
第二 ,由于 JavaScript 是弱類型語言,所以不需 要聲明方法的返回值類型;
第三 ,JavaScript 中的方法不支持重載,但是支持類似于 Java 中 變長(zhǎng)參數(shù)的特性鳄梅。
定義一個(gè)方法的語法如下:
function 方法名 ( 參數(shù)1, 參數(shù)2, ... ) {
//函數(shù)體
return 返回值;
}
下例演示了通過定義方法計(jì)算兩個(gè)數(shù)的和:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function add(a, b) {
//如果不通過 parseInt 方法轉(zhuǎn)換為數(shù)字,會(huì)進(jìn)行字符串的連接
var c = parseInt(a) + parseInt(b);
return c;
}
var a = prompt("請(qǐng)輸入第一個(gè)數(shù)", 0);
var b = prompt("請(qǐng)輸入第二個(gè)數(shù)", 0);
//請(qǐng)注意變量的作用范圍
var c = add(a, b);
alert("計(jì)算結(jié)果是:" + c);
</script>
</head>
<body>
</body>
</html>
如果想計(jì)算不確定數(shù)目的若干個(gè)數(shù)字的和,就可以使用 JavaScript 中的一個(gè)特殊數(shù)組, 名為 arguments,這個(gè)數(shù)組用來保存調(diào)用方法時(shí)傳遞的所有參數(shù),如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function add() {
//獲取 arguments 數(shù)組的長(zhǎng)度
var length = arguments.length;
var c = 0;
for (var i = 0; i < length; i++) {
c += parseInt(arguments[i]);
}
return c;
}
document.write("<p>無參數(shù) = " + add());
document.write("<p>1 = " + add(1));
document.write("<p>1,3 = " + add(1,3));
document.write("<p>1,3,5 = " + add(1,3,5));
document.write("<p>1,3,5,7,9 = " + add(1,3,5,7,9));
</script>
</head>
<body>
</body>
</html>
JavaScript 中函數(shù)的參數(shù)還有更靈活的運(yùn)用方式,如下例所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function output(times, char, end) {
var s = '';
for (var i = 0; i < times; i++) {
if (char) {
s+=char;
} else {
s+='*';
}
}
document.write(s);
if (end) {
document.write(end);
} else {
document.write("<br/>");
}
}
output(20);
output(20, "O");
output(20);
output(20, "H", "<hr/>");
output(20, '', "<hr/>");
</script>
</head>
<body>
</body>
</html>
注意:因?yàn)镴avaScript中方法的參數(shù)長(zhǎng)度是可變的,所以JavaScript并不支持 類似于Java語言的方法重載特性叠国。
