?? javascript3.htm
字號:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
a{ text-decoration: none }
p{ line-height:140% }
.text{ font-size: 9pt }
.text{ text-align:justify }
.text11{ font-size: 11pt }
.text11{ text-align:justify }
-->
</style>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>網頁教程－JavaScript技術講座:第三講 JavaScript程序構成 </title>
</head>
<body>
<p><span class="text">您現在的位置：<a href="javascript:if(confirm('http://www.4gee.com/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/Index.htm'" tppabs="http://www.4gee.com/Index.htm">主頁</a>－<a
href="javascript:if(confirm('http://www.4gee.com/colleges/Index.htm \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server?'))window.location='http://www.4gee.com/colleges/Index.htm'" tppabs="http://www.4gee.com/colleges/Index.htm">網絡教室</a>－<a href="Index.htm" tppabs="http://www.4gee.com/colleges/homepages/Index.htm">主頁工廠</a>－JavaScript技術講座:第三講
JavaScript程序構成</span></p>
<p align="center"><small><a href="JavaScript2.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript2.htm">上一頁</a>
<a href="JavaScript4.htm" tppabs="http://www.4gee.com/colleges/homepages/JavaScript4.htm">下一頁</a></small></p>
<table border="0" width="100%">
<tr>
<td width="100%"><p align="center"><span style="color: rgb(252,177,3)" class="text11">JavaScript技術講座<br>
第三講 JavaScript程序構成 </span></td>
</tr>
</table>
<table border="0" width="100%">
<tr>
<td width="100%"><span style="color: rgb(125,125,125)" class="text">JavaScript腳本語言的基本構成是由控制語句、函數、對象、方法、屬性等,來實現編程的。</span><p><span
style="color: rgb(125,125,125)" class="text"><font color="#00cc33">一、程序控制流</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text">在任何一種語言中，程序控制流是必須的，它能使得整個程序減小混亂，使之順利按其一定的方式執行。下面是JavaScript常用的程序控制流結構及語句:
</span></p>
<p><span style="color: rgb(125,125,125)" class="text">１、if條件語句</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 基本格式</span></p>
<p><span style="color: rgb(125,125,125)" class="text">if（表述式）</span></p>
<p><span style="color: rgb(125,125,125)" class="text">語句段１；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">......</span></p>
<p><span style="color: rgb(125,125,125)" class="text">else</span></p>
<p><span style="color: rgb(125,125,125)" class="text">語句段２；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">.....</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 功能：若表達式為true，則執行語句段１；否則執行語句段２。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 說明：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">if -else 語句是JavaScript中最基本的控制語句，通過它可以改變語句的執行順序。
<br>
表達式中必須使用關系語句，來實現判斷，它是作為一個布爾值來估算的。
<br>
它將零和非零的數分別轉化成false和true。 <br>
若if后的語句有多行，則必須使用花括號將其括起來。 <br>
</span></p>
<p><span style="color: rgb(125,125,125)" class="text">if語句的嵌套</span></p>
<p><span style="color: rgb(125,125,125)" class="text">if（布爾值）語句１；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">else（布爾值）語句２；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">else if（布爾值）語句３；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">……</span></p>
<p><span style="color: rgb(125,125,125)" class="text">else 語句４；</span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text">在這種情況下，每一級的布爾表述式都會被計算，若為真，則執行其相應的語句，否則執行else后的語句。</span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text">２、For循環語句</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 基本格式</span></p>
<p><span style="color: rgb(125,125,125)" class="text">for（初始化；條件；增量）</span></p>
<p><span style="color: rgb(125,125,125)" class="text">語句集；</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 功能：實現條件循環，當條件成立時，執行語句集，否則跳出循環體。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 說明：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">初始化參數告訴循環的開始位置，必須賦予變量的初值；
<br>
條件：是用于判別循環停止時的條件。若條件滿足，則執行循環體，否則
跳出。 <br>
增量：主要定義循環控制變量在每次循環時按什么方式變化。 <br>
三個主要語句之間，必須使用逗號分隔。 <br>
</span></p>
<p><span style="color: rgb(125,125,125)" class="text">３、while循環</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 基本格式</span></p>
<p><span style="color: rgb(125,125,125)" class="text">while（條件）</span></p>
<p><span style="color: rgb(125,125,125)" class="text">語句集；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">該語句與For語句一樣，當條件為真時，重復循環，否則退出循環。
</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> For與while語句</span></p>
<p><span style="color: rgb(125,125,125)" class="text">兩種語句都是循環語句，使用For語句在處理有關數字時更易看懂，也較緊湊；而while循環對復雜的語句效果更特別。</span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text">４、break和continue語句</span></p>
<p><span style="color: rgb(125,125,125)" class="text">與C++語言相同，使用break語句使得循環從For或while中跳出，continue使得跳過循環內剩余的語句而進入下一次循環。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> <font color="#00cc33">二、函數</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text">函數為程序設計人員提供了一個豐常方便的能力。通常在進行一個復雜的程序設計時，總是根據所要完成的功能，將程序劃分為一些相對獨立的部分，每部分編寫一個函數。從而，使各部分充分獨立，任務單一，程序清晰，易懂、易讀、易維護。JavaScript函數可以封裝那些在程序中可能要多次用到的模塊。并可作為事件驅動的結果而調用的程序。從而實現一個函數把它與事件驅動相關聯。這是與其它語言不樣的地方。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">１、JavaScript函數定義</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Function 函數名 （參數,變元）{</span></p>
<p><span style="color: rgb(125,125,125)" class="text">函數體;.</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Return 表達式;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">}</span></p>
<p><span style="color: rgb(125,125,125)" class="text">說明：</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 當調用函數時,所用變量或字面量均可作為變元傳遞。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 函數由關鍵字Function定義。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 函數名：定義自己函數的名字。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 參數表，是傳遞給函數使用或操作的值，其值可以是常量
，變量或其它表達式。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 通過指定函數名（實參）來調用一個函數。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 必須使用Return將值返回。</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> 函數名對大小寫是敏感的。</span></p>
<p> </p>
<p><span style="color: rgb(125,125,125)" class="text">２、函數中的形式參數：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">在函數的定義中，我們看到函數名后有參數表，這些參數變量可能是一個或幾個。那么怎樣才能確定參數變量的個數呢？在JavaScript中可通過arguments
.Length來檢查參數的個數。例：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Function
function_Name(exp1,exp2,exp3,exp4)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Number =function _Name . arguments
.length;</span></p>
<p><span style="color: rgb(125,125,125)" class="text">if (Number>1）</span></p>
<p><span style="color: rgb(125,125,125)" class="text">document.wrile(exp2);</span></p>
<p><span style="color: rgb(125,125,125)" class="text">if (Number>2)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">document.write(exp3);</span></p>
<p><span style="color: rgb(125,125,125)" class="text">if(Number>3)</span></p>
<p><span style="color: rgb(125,125,125)" class="text">document.write(exp4);</span></p>
<p><span style="color: rgb(125,125,125)" class="text">...</span></p>
<p><span style="color: rgb(125,125,125)" class="text"> <font color="#00cc33">三、事件驅動及事件處理</font></span></p>
<p><span style="color: rgb(125,125,125)" class="text">１、基本概念</span></p>
<p><span style="color: rgb(125,125,125)" class="text">JavaScript是基于對象(object-based)的語言。這與Java不同,Java是面向對象的語言。而基于對象的基本特征，就是采用事件驅動(event-driven)。它是在用形界面的環境下，使得一切輸入變化簡單化。通常鼠標或熱鍵的動作我們稱之為事件（Event），而由鼠標或熱鍵引發的一連串程序的動作，稱之為事件驅動（Event
Driver）。而對事件進行處理程序或函數，我們稱之為事件處理程序（Event
Handler）。</span></p>
<p><span style="color: rgb(125,125,125)" class="text">２、事件處理程序</span></p>
<p><span style="color: rgb(125,125,125)" class="text">在JavaScript中對象事件的處理通常由函數(Function)擔任。其基本格式與函數全部一樣，可以將前面所介紹的所有函數作為事件處理程序。格式如下：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">Function
事件處理名（參數表）{</span></p>
<p><span style="color: rgb(125,125,125)" class="text">事件處理語句集；</span></p>
<p><span style="color: rgb(125,125,125)" class="text">……</span></p>
<p><span style="color: rgb(125,125,125)" class="text">}</span></p>
<p><span style="color: rgb(125,125,125)" class="text">３、事件驅動</span></p>
<p><span style="color: rgb(125,125,125)" class="text">JavaScript事件驅動中的事件是通過鼠標或熱鍵的動作引發的。它主要有以下幾個事件：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">（１）單擊事件onClick</span></p>
<p><span style="color: rgb(125,125,125)" class="text">當用戶單擊鼠標按鈕時，產生onClick事件。同時onClick指定的事件處理程序或代碼將被調用執行。通常在下列基本對象中產生：</span></p>
<p><span style="color: rgb(125,125,125)" class="text">button（按鈕對象） <br>
checkbox（復選框）或（檢查列表框） <br>
radio （單選鈕） <br>
reset buttons（重要按鈕） <br>
submit buttons（提交按鈕） <br>
例：可通過下列按鈕激活change()文件：</span></p>
<p><span style="color: rgb(125,125,125)" class="text"><Form></span></p>
<p><span style="color: rgb(125,125,125)" class="text"><Input type="button"
Value=“ ” onClick="change()"></span></p>
<p><span style="color: rgb(125,125,125)" class="text"></Form></span></p>
<p><span style="color: rgb(125,125,125)" class="text">在onClick等號后，可以使用自己編寫的函數作為事件處理程序，也可以使用JavaScript中內部的函數。還可以直接使用JavaScript的代碼等。例：
</span></p>
<p><span style="color: rgb(125,125,125)" class="text"><Input type="button"
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -