初級JavaScript學習教程（三）

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript|教程　　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()檔案：

　　在onClick等號後，可以使用自己編寫的函數作為事件處理常式，也可以使用JavaScript中內部的函數。還可以直接使用JavaScript的代碼等。例：
<Input type="button" value=" " onclick=alert("這是一個例子"）;
（２）onChange改變事件
　　當利用text或texturea元素輸入字元值改變時發該事件，同時當在select表格項中一個選項狀態改變後也會引發該事件。
例：

（３）選中事件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">

</Script>
</HEAD>
<BODY 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編程的重點。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More