JavaScript腳本語言的基本構(gòu)成是由控制語句、函數(shù)、對象、方法、屬性等,來實現(xiàn)編程的。

一、程序控制流
在任何一種語言中，程序控制流是必須的，它能使得整個程序減小混亂，使之順利按其一定的方式執(zhí)行。下面是JavaScript常用的程序控制流結(jié)構(gòu)及語句:
１、if條件語句
基本格式
if（表述式）
語句段１；
......
else
語句段２；
.....
功能：若表達式為true，則執(zhí)行語句段１；否則執(zhí)行語句段２。
說明：
if -else 語句是JavaScript中最基本的控制語句，通過它可以改變語句的執(zhí)行順序。
表達式中必須使用關(guān)系語句，來實現(xiàn)判斷，它是作為一個布爾值來估算的。
它將零和非零的數(shù)分別轉(zhuǎn)化成false和true。
若if后的語句有多行，則必須使用花括號將其括起來。

if語句的嵌套
if（布爾值）語句１；
else（布爾值）語句２；
else if（布爾值）語句３；
……
else 語句４；

在這種情況下，每一級的布爾表述式都會被計算，若為真，則執(zhí)行其相應(yīng)的語句，否則執(zhí)行else后的語句。

２、For循環(huán)語句
基本格式
for（初始化；條件；增量）
語句集；
功能：實現(xiàn)條件循環(huán)，當(dāng)條件成立時，執(zhí)行語句集，否則跳出循環(huán)體。
說明：
初始化參數(shù)告訴循環(huán)的開始位置，必須賦予變量的初值；
條件：是用于判別循環(huán)停止時的條件。若條件滿足，則執(zhí)行循環(huán)體，否則 跳出。
增量：主要定義循環(huán)控制變量在每次循環(huán)時按什么方式變化。
三個主要語句之間，必須使用逗號分隔。

３、while循環(huán)
基本格式
while（條件）
語句集；
該語句與For語句一樣，當(dāng)條件為真時，重復(fù)循環(huán)，否則退出循環(huán)。
For與while語句
兩種語句都是循環(huán)語句，使用For語句在處理有關(guān)數(shù)字時更易看懂，也較緊湊；而while循環(huán)對復(fù)雜的語句效果更特別。

４、break和continue語句
與C++語言相同，使用break語句使得循環(huán)從For或while中跳出，continue使得跳過循環(huán)內(nèi)剩余的語句而進入下一次循環(huán)。

二、函數(shù)
函數(shù)為程序設(shè)計人員提供了一個豐常方便的能力。通常在進行一個復(fù)雜的程序設(shè)計時，總是根據(jù)所要完成的功能，將程序劃分為一些相對獨立的部分，每部分編寫一個函數(shù)。從而，使各部分充分獨立，任務(wù)單一，程序清晰，易懂、易讀、易維護。JavaScript函數(shù)可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅(qū)動的結(jié)果而調(diào)用的程序。從而實現(xiàn)一個函數(shù)把它與事件驅(qū)動相關(guān)聯(lián)。這是與其它語言不樣的地方。

１、JavaScript函數(shù)定義
Function 函數(shù)名 （參數(shù),變元）{
函數(shù)體;.
Return 表達式;
}
說明：
當(dāng)調(diào)用函數(shù)時,所用變量或字面量均可作為變元傳遞。
函數(shù)由關(guān)鍵字Function定義。
函數(shù)名：定義自己函數(shù)的名字。
參數(shù)表，是傳遞給函數(shù)使用或操作的值，其值可以是常量 ，變量或其它表達式。
通過指定函數(shù)名（實參）來調(diào)用一個函數(shù)。
必須使用Return將值返回。
函數(shù)名對大小寫是敏感的。

２、函數(shù)中的形式參數(shù)：
在函數(shù)的定義中，我們看到函數(shù)名后有參數(shù)表，這些參數(shù)變量可能是一個或幾個。那么怎樣才能確定參數(shù)變量的個數(shù)呢？在JavaScript中可通過arguments .Length來檢查參數(shù)的個數(shù)。
例：
Function function_Name(exp1,exp2,exp3,exp4)
Number =function _Name . arguments .length;
if (Number>1）
document.wrile(exp2);
if (Number>2)
document.write(exp3);
if(Number>3)
document.write(exp4);
...

三、事件驅(qū)動及事件處理
１、基本概念
JavaScript是基于對象(object-based)的語言。這與Java不同,Java是面向?qū)ο蟮恼Z言。而基于對象的基本特征，就是采用事件驅(qū)動(event-driven)。它是在用形界面的環(huán)境下，使得一切輸入變化簡單化。通常鼠標(biāo)或熱鍵的動作我們稱之為事件（Event），而由鼠標(biāo)或熱鍵引發(fā)的一連串程序的動作，稱之為事件驅(qū)動（Event Driver）。而對事件進行處理程序或函數(shù)，我們稱之為事件處理程序（Event Handler）。

２、事件處理程序
在JavaScript中對象事件的處理通常由函數(shù)(Function)擔(dān)任。其基本格式與函數(shù)全部一樣，可以將前面所介紹的所有函數(shù)作為事件處理程序。
格式如下：
Function 事件處理名（參數(shù)表）{
事件處理語句集；
……
}

３、事件驅(qū)動
JavaScript事件驅(qū)動中的事件是通過鼠標(biāo)或熱鍵的動作引發(fā)的。它主要有以下幾個事件：
（１）單擊事件onClick
當(dāng)用戶單擊鼠標(biāo)按鈕時，產(chǎn)生onClick事件。同時onClick指定的事件處理程序或代碼將被調(diào)用執(zhí)行。通常在下列基本對象中產(chǎn)生：
button（按鈕對象）
checkbox（復(fù)選框）或（檢查列表框）
radio （單選鈕）
reset buttons（重要按鈕）
submit buttons（提交按鈕）

例：可通過下列按鈕激活change()文件：
<Form>
<Input type="button" Value=“ ” onClick="change()">
</Form>
在onClick等號后，可以使用自己編寫的函數(shù)作為事件處理程序，也可以使用JavaScript中內(nèi)部的函數(shù)。還可以直接使用JavaScript的代碼等。例：
<Input type="button" value=" " onclick=alert("這是一個例子"）;
（２）onChange改變事件
當(dāng)利用text或texturea元素輸入字符值改變時發(fā)該事件，同時當(dāng)在select表格項中一個選項狀態(tài)改變后也會引發(fā)該事件。
例：
<Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>
（３）選中事件onSelect
當(dāng)Text或Textarea對象中的文字被加亮后，引發(fā)該事件。
（４）獲得焦點事件onFocus
當(dāng)用戶單擊Text或textarea以及select對象時，產(chǎn)生該事件。此時該對象成為前臺對象。
（５）失去焦點onBlur
當(dāng)text對象或textarea對象以及select對象不再擁有焦點、而退到后臺時，引發(fā)該文件，他與onFocas事件是一個對應(yīng)的關(guān)系。
（６）載入文件onLoad
當(dāng)文檔載入時，產(chǎn)生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值，并用一個變量為其賦值，使它可以被源代碼使用。
（７）卸載文件onUnload
當(dāng)Web頁面退出時引發(fā)onUnload事件，并可更新Cookie的狀態(tài)。
四、范例
范例1：下例程序是一個自動裝載和自動卸載的例子。即當(dāng)裝入HTML文檔時調(diào)用loadform()函數(shù),而退出該文檔進入另一HTML文檔時則首先調(diào)用unloadform()函數(shù),確認后方可進入。
test3_1.htm
<HTML>
<HEAD>
<script Language="JavaScript">
<!--
function loadform(){
alert("這是一個自動裝載例子!");
}
function unloadform(){
alert("這是一個卸載例子!");
}
//-->
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">調(diào)用</a>
</BODY>
</HTML>

范例2：這是一個獲取瀏覽器版本號的程序。該程序首先顯示一個波浪一提示信息。之后顯示瀏覽器的版本號有關(guān)信息。
test3_2.htm
<html>
<head>
<script language="JavaScript"><!--
// -->
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /= 16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}

function getletter(num) {
if (num < 10) { return num; }
else {
if (num == 10) { return "A" }
if (num == 11) { return "B" }
if (num == 12) { return "C" }
if (num == 13) { return "D" }
if (num == 14) { return "E" }
if (num == 15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}

function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1){
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; }}
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("這是一個獲取WEB瀏覽器的程序"))
document.write("</CENTER></font>")
document.write("瀏覽器名稱: "+navigator.appName+"<br>");
document.write("版本號: "+navigator.appVersion+"<br>");
document.write("代碼名字: "+navigator.appCodeName+"<br>");
document.write("用戶代理標(biāo)識: "+navigator.userAgent);
</script>
<body>
</body>
</html>
輸出結(jié)果圖1所示。

　
圖1


本講介紹了JavaScript程序設(shè)計的有關(guān)內(nèi)容。程序流、函數(shù)、事件是我們學(xué)習(xí)掌握JavaScript編程的重點。

dm520