JavaScript學習(三)——程序構成

 

  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>
  在onClick等號後,可以使用自己編寫的函數作爲事件處理程序,也可以使用JavaScript中內部的函數。還可以直接使用JavaScript的代碼等。例:
<Input type="button" value=" " οnclick=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()函數,確認後方可進入。

<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>
<head>
  <script language="JavaScript">
  <!--
  
   function makeArray(n){
    this.length=n
    return this
   }
   
   function hexfromdec(num) {
    var hexstring="";
    var shifthex=16;
    var temp1=num;
    
    hex=new makeArray(1);
    
    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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章