JavaScript腳本語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。
一、程序控制流
在任何一種語言中,程序控制流是必須的,它能使得整個程序減小混亂,使之順利按其一定的方式執行。下面是JavaScript常用的程序控制流結構及語句:
1、if條件語句
基本格式
if(表述式)
語句段1;
......
else
語句段2;
.....
功能:若表達式爲true,則執行語句段1;否則執行語句段2。
說明:
if -else 語句是JavaScript中最基本的控制語句,通過它可以改變語句的執行順序。
表達式中必須使用關係語句,來實現判斷,它是作爲一個布爾值來估算的。
它將零和非零的數分別轉化成false和true。
若if後的語句有多行,則必須使用花括號將其括起來。
if語句的嵌套
if(布爾值)語句1;
else if(布爾值)語句2;
else if(布爾值)語句3;
……
else 語句4;
在這種情況下,每一級的布爾表述式都會被計算,若爲真,則執行其相應的語句,否則執行else後的語句。
2、For循環語句
基本格式
for(初始化;條件;增量)
語句集;
功能:實現條件循環,當條件成立時,執行語句集,否則跳出循環體。
說明:
初始化參數告訴循環的開始位置,必須賦予變量的初值;
條件:是用於判別循環停止時的條件。若條件滿足,則執行循環體,否則 跳出。
增量:主要定義循環控制變量在每次循環時按什麼方式變化。
三個主要語句之間,必須使用逗號分隔。
3、while循環
基本格式
while(條件)
語句集;
該語句與For語句一樣,當條件爲真時,重複循環,否則退出循環。
For與while語句
兩種語句都是循環語句,使用For語句在處理有關數字時更易看懂,也較緊湊;而while循環對複雜的語句效果更特別。
4、break和continue語句
與C++語言相同,使用break語句使得循環從For或while中跳出,continue使得跳過循環內剩餘的語句而進入下一次循環。
二、函數
函數爲程序設計人員提供了一個豐常方便的能力。通常在進行一個複雜的程序設計時,總是根據所要完成的功能,將程序劃分爲一些相對獨立的部分,每部分編寫一個函數。從而,使各部分充分獨立,任務單一,程序清晰,易懂、易讀、易維護。JavaScript函數可以封裝那些在程序中可能要多次用到的模塊。並可作爲事件驅動的結果而調用的程序。從而實現一個函數把它與事件驅動相關聯。這是與其它語言不樣的地方。
1、JavaScript函數定義
Function 函數名 (參數,變元){
函數體;.
Return 表達式;
}
說明:
當調用函數時,所用變量或字面量均可作爲變元傳遞。
函數由關鍵字Function定義。
函數名:定義自己函數的名字。
參數表,是傳遞給函數使用或操作的值,其值可以是常量 ,變量或其它表達式。
通過指定函數名(實參)來調用一個函數。
必須使用Return將值返回。
函數名對大小寫是敏感的。
2、函數中的形式參數:
在函數的定義中,我們看到函數名後有參數表,這些參數變量可能是一個或幾個。那麼怎樣才能確定參數變量的個數呢?在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); ... |
三、事件驅動及事件處理
1、基本概念
JavaScript是基於對象(object-based)的語言。這與Java不同,Java是面向對象的語言。而基於對象的基本特徵,就是採用事件驅動(event-driven)。它是在用形界面的環境下,使得一切輸入變化簡單化。通常鼠標或熱鍵的動作我們稱之爲事件(Event),而由鼠標或熱鍵引發的一連串程序的動作,稱之爲事件驅動(Event Driver)。而對事件進行處理程序或函數,我們稱之爲事件處理程序(Event Handler)。
2、事件處理程序
在JavaScript中對象事件的處理通常由函數(Function)擔任。其基本格式與函數全部一樣,可以將前面所介紹的所有函數作爲事件處理程序。
格式如下:
Function 事件處理名(參數表){
事件處理語句集;
……
}
3、事件驅動
JavaScript事件驅動中的事件是通過鼠標或熱鍵的動作引發的。它主要有以下幾個事件:
(1)單擊事件onClick
當用戶單擊鼠標按鈕時,產生onClick事件。同時onClick指定的事件處理程序或代碼將被調用執行。通常在下列基本對象中產生:
button(按鈕對象)
checkbox(複選框)或(檢查列表框)
radio (單選鈕)
reset buttons(重置按鈕)
submit buttons(提交按鈕)
例:可通過下列按鈕激活change()文件:
<Form> <Input type="button" Value=“ ” onClick="change()"> </Form> |
<Input type="button" value=" " οnclick=alert("這是一個例子");
(2)onChange改變事件
當利用text或texturea元素輸入字符值改變時發該事件,同時當在select表格項中一個選項狀態改變後也會引發該事件。
例:
<Form> <Input type="text" name="Test" value="Test" onCharge="check('this.test)"> </Form> |
當Text或Textarea對象中的文字被加亮後,引發該事件。
(4)獲得焦點事件onFocus
當用戶單擊Text或textarea以及select對象時,產生該事件。此時該對象成爲前臺對象。
(5)失去焦點onBlur
當text對象或textarea對象以及select對象不再擁有焦點、而退到後臺時,引發該文件,他與onFocas事件是一個對應的關係。
(6)載入文件onLoad
當文檔載入時,產生該事件。onLoad一個作用就是在首次載入一個文檔時檢測cookie的值,並用一個變量爲其賦值,使它可以被源代碼使用。
(7)卸載文件onUnload
當Web頁面退出時引發onUnload事件,並可更新Cookie的狀態。
四、範例
範例1:下例程序是一個自動裝載和自動卸載的例子。即當裝入HTML文檔時調用loadform()函數,而退出該文檔進入另一HTML文檔時則首先調用unloadform()函數,確認後方可進入。
<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:這是一個獲取瀏覽器版本號的程序。該程序首先顯示一個波浪一提示信息。之後顯示瀏覽器的版本號有關信息。
<html> function rainbow(text){ |