JavaScript腳本語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。

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

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

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

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

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

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

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

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

２、函數中的形式參數：
在函數的定義中，我們看到函數名后有參數表，這些參數變量可能是一個或幾個。那么怎樣才能確定參數變量的個數呢？在JavaScript中可通過arguments .Length來檢查參數的個數。
例：
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);
...

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

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

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

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

范例2：這是一個獲取瀏覽器版本號的程序。該程序首先顯示一個波浪一提示信息。之后顯示瀏覽器的版本號有關信息。
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("用戶代理標識: "+navigator.userAgent);
</script>
<body>
</body>
</html>
輸出結果圖1所示。

　
圖1


本講介紹了JavaScript程序設計的有關內容。程序流、函數、事件是我們學習掌握JavaScript編程的重點。

dm520