首頁 > 開發者 > JavaScript
第三講 JavaScript程式構成
指令碼語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。
一、程式控制流程
在任何一種語言中，程式控制流程是必須的，它能使得整個程式減小混亂，使之順利按其一定的方式執行。下面是JavaScript常用的程式控制流程結構及語句:
1.if條件陳述式
（1）基本格式
if（表述式）
語句段1；
......
else
語句段2；
.....
（2）功能：若運算式為true，則執行語句段1；否則執行語句段2。
（3）說明：
if -else 語句是JavaScript中最基本的控制語句，通過它可以改變語句的執行順序。
運算式中必須使用關係語句，來實現判斷，它是作為一個布爾值來估算的。
它將零和非零的數分別轉化成false和true。
若if後的語句有多行，則必須使用花括弧將其括起來。
if語句的嵌套
if（布爾值）語句1；
else（布爾值）語句2；
else if（布爾值）語句3；
……
else 語句4；
在這種情況下，每一級的布爾表述式都會被計算，若為真，則執行其相應的語句，否則執行else後的語句。
2.For迴圈語句
（1）基本格式
for（初始化；條件；增量）
語句集；
（2）功能：實現條件迴圈，當條件成立時，執行語句集，否則跳出迴圈體。
（3）說明：
初始化參數告訴迴圈的開始位置，必須賦予變數的初值；
條件：是用於判別迴圈停止時的條件。若條件滿足，則執行迴圈體，否則 跳出。
增量：主要定義迴圈控制變數在每次迴圈時按什麼方式變化。
三個主要語句之間，必須使用逗號分隔。
3.while迴圈
（1）基本格式
while（條件）
語句集；
該語句與For語句一樣，當條件為真時，重複迴圈，否則退出迴圈。
（2）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>
在onClick等號後，可以使用自己編寫的函數作為事件處理常式，也可以使用JavaScript中內部的函數。還可以直接使用JavaScript的代碼等。例：
<Input type="button" value="" onclick=alert("這是一個例子"）;
（2）onChange改變事件
當利用text或texturea元素輸入字元值改變時發該事件，同時當在select表格項中一個選項狀態改變後也會引發該事件。
例： <Form>
<Input type="text" name="Test" value="Test" onCharge="check(this.test)">
</Form>
（3）選中事件onSelect
當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()函數,確認後方可進入。
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("想知道你的瀏覽器的詳細資料嗎？看下面嘍"))
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>
本講介紹了JavaScript程式設計的有關內容。程式流、函數、事件是我們學習掌握JavaScript編程的重點。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
