JavaScript教程--從入門到精通(3)

來源:互聯網
上載者:User
javascript|教程

JavaScript程式構成

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

一、程式控制流程
  在任何一種語言中,程式控制流程是必須的,它能使得整個程式減小混亂,使之順利按其一定的方式執行。下面是JavaScript常用的程式控制流程結構及語句:
1、if條件陳述式
 基本格式
if(表述式)
語句段1;
......
else
語句段2;
.....
 功能:若運算式為true,則執行語句段1;否則執行語句段2。
 說明:
if -else 語句是JavaScript中最基本的控制語句,通過它可以改變語句的執行順序。
運算式中必須使用關係語句,來實現判斷,它是作為一個布爾值來估算的。
它將零和非零的數分別轉化成false和true。
若if後的語句有多行,則必須使用花括弧將其括起來。
 
if語句的嵌套
if(布爾值)語句1;
else(布爾值)語句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=“ ” >
</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 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編程的重點。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。