欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript客戶端腳本的設(shè)計(jì)和應(yīng)用

 更新時(shí)間:2006年08月21日 00:00:00   作者:  

Javascript基本概念

  JavaScript是一種基于對(duì)象(Object)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語言,最初由Netscape公司創(chuàng)造出來,起名Live Script,它和Java的關(guān)系只有一個(gè):名字比較像。使用它的目的是與HTML超文本標(biāo)記語言、Java 腳本語言(Java小程序)一起實(shí)現(xiàn)在一個(gè)Web頁面中鏈接多個(gè)對(duì)象,與Web客戶交互作用。從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入在標(biāo)準(zhǔn)的HTML語言中實(shí)現(xiàn)的。它的出現(xiàn)彌補(bǔ)了HTML語言的缺陷,它是Java與HTML折衷的選擇。(注意,如同VBScript一樣,JavaScript一樣有服務(wù)器端版本)

一、JavaScript的基本語法

  0、引言

  Javascript的語法基本上與Java一致,但是由于Javascript是一個(gè)弱類型的腳本語言,在程序編寫的過程中會(huì)有一些不同。同時(shí)由于Javascript是基于對(duì)象的語言,注意不是面向?qū)ο蟮恼Z言,所以它在對(duì)對(duì)象的支持上有一定缺陷,大家所熟悉的諸如對(duì)象繼承,多態(tài)等面向?qū)ο笳Z言所具有的基本特性在Javascript中只能通過一些變通手段來實(shí)現(xiàn)(通常比較復(fù)雜)。然而,弱類型語言也有其優(yōu)點(diǎn),那就是簡(jiǎn)單性,Javascript中類型轉(zhuǎn)化是非常方便的(弱類型語言在代碼中基本上表現(xiàn)為無類型),一個(gè)String通過一個(gè)簡(jiǎn)單的加減操作就可以轉(zhuǎn)化為Int(相當(dāng)于調(diào)用了Integer.ParseInt(String)),而且不會(huì)拋異常。Javascript作為一種解釋性語言,還能使用在編譯性語言C/C++、JAVA難以支持的eval語句。由于運(yùn)行在沙箱中,Javascript運(yùn)行時(shí)有很多的安全性限制。它不允許訪問本地的硬盤,并不能將數(shù)據(jù)存入到服務(wù)器上,不允許對(duì)網(wǎng)絡(luò)文檔進(jìn)行修改和刪除,只能通過瀏覽器實(shí)現(xiàn)信息瀏覽或動(dòng)態(tài)交互,從而有效地防止數(shù)據(jù)的丟失。 總體上來說,Javascript應(yīng)該是優(yōu)缺點(diǎn)兼?zhèn)洌ū孀C的說=])。
  作為學(xué)過JAVA的軟院本科生來說,學(xué)習(xí)Javascript并不困難。Javascript不像HTML、CSS這種經(jīng)驗(yàn)性很強(qiáng)的的領(lǐng)域,一旦大家入門之后,剩余階段的Javascript相關(guān)的學(xué)習(xí)很可能就是查閱資料而已。在這里我希望我所寫的內(nèi)容能夠起到拋磚引玉的作用,為大家打下基礎(chǔ)。以下內(nèi)容主要是Javascript的入門知識(shí),我會(huì)從關(guān)鍵字開始描述,強(qiáng)調(diào)關(guān)鍵字是為了讓大家對(duì)Javascript的語法有比較全面的認(rèn)識(shí),可能大家在今后的開發(fā)中可能一直用不到其中的某些關(guān)鍵字,但我認(rèn)為大家有必要了解一下,同時(shí)請(qǐng)留意其中標(biāo)出的注意事項(xiàng)。隨后將是在頁面中加入腳本的四種方法。在“Javascript客戶端編程”中,我將提及瀏覽器文檔(DOM)模型和事件(EVENT)模型,其中會(huì)有如何尋找對(duì)象以及安裝事件處理器(事件處理映射)的詳細(xì)解說。最后我將在“Javascript樣例”中給出一段核心代碼的注解和三個(gè)樣例?!癑avascript學(xué)習(xí)資料”中有一些有用的書籍名,電子參考資料和相關(guān)網(wǎng)址,請(qǐng)留意其中的推薦參考資料和MLParser的使用指南。大家的對(duì)Javascript問題我將會(huì)在FAQ中給出解答。
  第一次寫,錯(cuò)誤在所難免,懇請(qǐng)大家指正和諒解。

  1、VAR

  var i = 5;
  var j = "hello world";
  var k = document;
  for( var u = 0; ... ; ... ) { ... }
  function fun() { var v = document; ... }
  VAR的作用是聲明變量,但是不通過VAR聲明的變量也可以使用。
  在BLOCK塊(用 { 和 } 或 (和 )括起來的的代碼段)中用VAR聲明的變量是局部變量,一旦出了BLOCK的范圍(SCOPE),變量就會(huì)失效。例如在樣例中的 u 和 v 變量,當(dāng)程序流分別出了 FOR 和 FUNCTION 語句的范圍之后 u 和 v 就成了未定義變量。
  其他情況下用VAR聲明或者通過未聲明直接使用的變量(解釋器會(huì)隱式聲明這些變量)都是全局變量。

  在同一個(gè)范圍(SCOPE)中對(duì)同一個(gè)變量名不能用一次以上的VAR,即不可重復(fù)聲明變量。
  不同范圍(SCOPE)中聲明的同名變量在Javascript中會(huì)相互隱藏,例如,有一個(gè)全局變量 variable,同時(shí)在程序段中還有一個(gè)局部變量 variable,那么你在程序中引用的變量實(shí)際上會(huì)是局部變量 variable 。

  一個(gè)變量在賦值之后,其類型就轉(zhuǎn)化為所賦值的類型。
  從未聲明過(包括賦值操作引發(fā)的隱式聲明)的變量值為 undefined 類型也為 undefined 。

  變量的有效性是它的定義范圍與定義語句出現(xiàn)的順序無關(guān)。
  function test(){
    document.write(great) ;  // print "undefined"
    document.write(odd) ;   // print "javas" , not "undefined"
    var odd = "javas" ;
  }
  樣例中雖然 odd 在 document.write 之后,但在程序被解釋時(shí) odd 就被初始化了,所以打印結(jié)果不是 "undefined" 而是odd被賦予的初始值。

  2、IF-ELSE

  if( val > 2.3){
    rs = 5.56;
  }
  else if( val + rs > "1.2") {
    rs = document;
  }
  else{
    rs = "Hello world";
  }
  IF-ELSE的用法與JAVA中的完全相同。
  注意表達(dá)式中的中的“val + rs > '1.2' "這在JAVA中是不允許出現(xiàn)的。
  另外雖然Javascript不要求在每句語句之后加分號(hào),但加上分號(hào)是良好的編程習(xí)慣。
  在樣例中出現(xiàn)的未聲明就使用的變量的情況在Javascript中是允許的,他們將自動(dòng)轉(zhuǎn)化為全局變量。
  Javascript是大小寫敏感的,所以請(qǐng)注意關(guān)鍵字的大小寫。

  3、SWITCH

  switch(key - 65){
    case 0:
      ch = "A" ;
      break;
    case 1:
      ch = "B" ;
      break;
    default:
      ch = "X" ;
      break;
    case 9:
      ch = "Y" ;
      break;
  }
  SWITCH的用法與JAVA中的完全相同。
  CASE后跟的變量建議使用常量表達(dá)式(整數(shù)和字符串),不要用浮點(diǎn)。
  每個(gè)CASE結(jié)束時(shí)的BREAK語句通常不可少,除非想利用SWITCH的FALL-THROUGH來實(shí)現(xiàn)特定的功能。
  DEFAULT語句可以放在SWITCH結(jié)構(gòu)中的任意位置,可以于CASE語句交叉放置。

  4、WHILE

  while( i < 0 && bool_var){
    if( i > -5)
      continue;
    i += 3 + i;
  }
  WHILE的用法與JAVA中的完全相同。
  如果是BOOL變量可以不寫bool_var == true/false,直接使用即可。
  CONTINE語句會(huì)使程序流跳過循環(huán)中剩余的語句,進(jìn)入循環(huán)的下一次迭代。
  在Javascript中也有帶LABEL的BREAK和CONTINUE,用法與JAVA相同。
  在寫循環(huán)時(shí),注意不要產(chǎn)生“死”循環(huán)。樣例程序片斷中的就是一個(gè)“死”循環(huán)。

  5、DO-WHILE

  do{
    i -= 8;
  } while( i > 0);
  DO-WHILE的用法與JAVA中的完全相同。
  不要遺漏結(jié)尾WHILE(Expression)之后的分號(hào)。

  6、FOR

  for (var i = 0; i < 8; i++){
    document.writeln("Hello world !");
  }
  DO-WHILE的用法與JAVA中的完全相同。
  不要在計(jì)數(shù)變量 i 之前加 int 類型標(biāo)識(shí)符,Javascript是弱類型語言,加了 int 反倒會(huì)報(bào)語法錯(cuò),但是可以用 var 使之成為局部變量。
  FOR(... ; ... ; ...)中分號(hào)之間的內(nèi)容都可以空缺(for (;;)相當(dāng)于while(true)),其中也可以使用多句語句用逗號(hào)分隔。

  7、FOR-IN

  for ( var ite in document) {
    str_result += document [ ite ];
  }
  FOR-IN控制語句在JAVA中不存在,它的作用有點(diǎn)類似JAVA中的 Iterator 接口描述的功能。在樣例中,ite將遍歷 docment 中所有的可遍歷元素(不是所有元素),每次迭代時(shí),ite中會(huì)包含被遍歷數(shù)組或?qū)ο蟮乃饕址梢钥醋鲗?duì)象名),例如,textfield(如果你在頁面中有一個(gè)元素的ID為textfield),或者像數(shù)字1、2、3(它們用來引用對(duì)象中的未命名元素)。
  引用對(duì)象中元素時(shí)使用關(guān)聯(lián)數(shù)組的方式:數(shù)組名或?qū)ο竺?[ 索引值 ],例子中用 document [ ite ] 表示 document 中索引為 ite 的元素。
  使用FOR-IN的最大好處就是你不需要知道目標(biāo)對(duì)象或者數(shù)組究竟有多少元素,以及其內(nèi)部結(jié)構(gòu)是怎么樣的,就可以遍歷其所有可遍歷元素。

  8、CONTINUE-BREAK

  again:
  while ( test() ){
    whie (is_run) {
      if(work()) {
        break again;
        // continue again;
      }
      reap();
    }
    i++;
  }
  CONTINUE-BREAK的用法與JAVA中的完全相同。
  使用帶Label的break或者continue可以在內(nèi)外循環(huán)中進(jìn)行跳轉(zhuǎn)。

  9、FUNCTION

  function fun_1(arg1, arg2) {
    rs = arg1 + arg2;
    return rs;
  }
  FUNCTION在Javascript中的寫法與JAVA中的有很大的差異。
  首先是參數(shù)類型的問題,參數(shù)前面不需要加任何類型描述,VAR也不能加。Javascript方法參數(shù)也有傳值和傳引用之分,規(guī)則與JAVA基本一致,具體請(qǐng)查閱相關(guān)資料。
  其次是返回值,返回值的類型不需要標(biāo)明,RETURN會(huì)返回相應(yīng)的對(duì)象,若無RETURN的數(shù)據(jù),則返回值為undefined。從這個(gè)意義上講,F(xiàn)UNCTION總是有返回值的。
  最后是參數(shù)個(gè)數(shù)的問題,參數(shù)列表并不限制實(shí)際傳入函數(shù)的參數(shù)個(gè)數(shù),它只是提供了一個(gè)訪問參數(shù)的快捷方式,也就是說給了特定位置參數(shù)一個(gè)特定的名字。

  sum = fun_1(1) ;
  以上函數(shù)調(diào)用時(shí)只傳給 fun_1 一個(gè)參數(shù)( fun_1 定義時(shí)需要兩個(gè)參數(shù))。那么此時(shí) arg2 的值是什么呢?undefined,你猜對(duì)了。
  我們可以把 fun_1 改成以下形式來應(yīng)對(duì)這種情況。
  function fun_2(arg1, arg2) {
    if ( !arg1 ) arg1 = 0;
    if ( !arg2 ) arg2 = 0;
    rs = arg1 + arg2;
    return rs;
  }
  undefined在布爾表達(dá)式中相當(dāng)于 false 。

  好了,問題似乎解決了??墒侨绻覀円幚砀鄥?shù)怎么辦呢?例如以下函數(shù)調(diào)用所代表的情況。
  sum = fun_2(1, 2, 3) ;
  在函數(shù)內(nèi)部有一個(gè)Arguments對(duì)象,它是一個(gè)參數(shù)數(shù)組,通過它可以訪問到傳入函數(shù)的所有參數(shù)。
  根據(jù)這一特性我們把 fun_2 改成 fun_3。
  function fun_3 () {
    rs = 0;
    for (var i = 0 ; i < Arguments.length; i++) {
      rs += parseInt( Arguments[i] );
    }
    return rs;
  }
  注意:這里使用了parseInt而不是直接加法引起的隱式轉(zhuǎn)化。這是因?yàn)殡[式轉(zhuǎn)化的要求過高,而且有可能把 rs 轉(zhuǎn)化為其他內(nèi)部類型。
  0 + "23a" = NaN;0 + parseInt ( "23a" )= 23

  function Point ( x, y ) {
    this.x = x;
    this.y = y;
    this.func = m_func;
  }
  function m_func( num ) { ... }
  var newPoint = new Point( 1, 3 );
  newPoint.func( newPoint.x + new Point.y);
  任何一個(gè)函數(shù)都可以成為構(gòu)造函數(shù),在函數(shù)中的 this 關(guān)鍵字同JAVA中意義類似,但不完全相同。
  通過 new 產(chǎn)生的對(duì)象最終會(huì)通過垃圾回收機(jī)制清除。
  函數(shù)也是Javascript的內(nèi)部類型之一,所以可以賦給某個(gè)變量,注意不要加 () ,()實(shí)際上也是一個(gè)操作符表示對(duì)函數(shù)的調(diào)用。
  this.func = m_func; 表示把m_func函數(shù)賦給 this 的 func 成員變量。
  this.func = m_func(); 表示把m_func函數(shù)調(diào)用的返回值賦給 this 的 func 成員變量。

  對(duì)象成員訪問與JAVA類似:對(duì)象名.成員名
  為一個(gè)類添加新成員,只要給特定的成員名賦值即可(不賦值的話讀出來都是 undefined),實(shí)際上全局變量或函數(shù)也就是頂級(jí)對(duì)象的成員屬性和方法,從這個(gè)角度上來思考,大家就很容易理解我在VAR一節(jié)中描述的變量聲明規(guī)則了。
  
  在Javascript中函數(shù)既然被視作一個(gè)類型,那么函數(shù)的聲明就會(huì)有與普通變量相似的方法:
  var my_func = new Function ("arg1", "arg2", ... , "argN", " var rs = arg1 + arg2 + ... + argN; return rs; ");
  var my_func = function (arg1, arg2, ... , argN)
    {
      var rs = arg1 + arg2 + ... + argN;
       return rs;
    };
  前者被稱之為構(gòu)造器法,后者被稱之為直接量法。

  10、PROTOTYPE

  function Point ( x, y ) {
    this.x = x;
    this.y = y;
    // this.func = m_func;
  }
  Point.prototype.func = m_func;
  Point.prototype.s_name = "Point";
  function m_func( num ) { ... }
  new Point () ;
  var newPoint = new Point( 1, 3 );
  newPoint.func( newPoint.x + new Point.y);
  PROTOTYPE是原型的意思,我改變?cè)诘诰殴?jié)中 Point 的實(shí)現(xiàn)。把 m_func 賦給了Point的原型。
  這一改變唯一的好處就是我們不用在每次調(diào)用 Point 函數(shù)都對(duì) func 屬性賦值了,func 屬性被保存在 Point 的原型對(duì)象中,從而節(jié)省了內(nèi)存空間。 Point 與 Point.prototype 的關(guān)系請(qǐng)查閱相關(guān)的資料,這里不再詳述。
  用PROTOTYPE可以實(shí)現(xiàn)JAVA中的靜態(tài)變量和靜態(tài)方法(由于某些瀏覽器實(shí)現(xiàn)在對(duì)象創(chuàng)建之后才創(chuàng)建它的原型對(duì)象,所以建議在使用原型對(duì)象中靜態(tài)成員之前先調(diào)用一次構(gòu)造器方法,如同樣例中 new Point();語句,調(diào)用結(jié)束之后,無用對(duì)象將被回收,但其原型對(duì)象將繼續(xù)駐留在內(nèi)存中),在Javascript支持的有限的對(duì)象繼承也與PROTOTYPE有一定聯(lián)系。

  11、ARRAY

  var arr_8 = new Array(8);
  var arr = new Array();
  var arr_d = [ 1, 2, , 4 , .., "Hi", null, true, document ];
  var arr_m = [ [ 1, 2, 3, 4 ], [ 5, 6, 7], [ 8 ] ];

  arr_8[ 3 ] = "ABC";
  arr[ 100 ] = 8.8888;
  arr_d[ 0 ] = "CDE";
  arr_m[ 1 ][ 0 ] = "XYZ";
  數(shù)組的創(chuàng)建可以通過 new Array 的構(gòu)造器方法(參數(shù)是數(shù)組初始長(zhǎng)度,空參數(shù)表示零長(zhǎng)度)。
  或者是把[ 數(shù)據(jù) , 數(shù)據(jù) , ... , 數(shù)據(jù)]的數(shù)組直接量賦給變量,數(shù)據(jù)之間用逗號(hào)分隔,arr_d中藍(lán)色的部分有兩個(gè)連續(xù)的逗號(hào)表示第三個(gè)元素空缺,其值為 undefined。
  構(gòu)造器方法的樣例: arr_8和arr ;數(shù)組直接量的樣例: arr_d和arr_m 。

  Javascript中的數(shù)組是動(dòng)態(tài)數(shù)組,它將隨著元素?cái)?shù)量自動(dòng)調(diào)節(jié)數(shù)組長(zhǎng)度。
  Javascript中的數(shù)組元素沒有任何類型限制,未初始化的元素值為 undefined。
  Javascript中的多維數(shù)組的實(shí)現(xiàn)與JAVA中的完全相同。arr_m中 [ 1, 2, 3, 4] 表示 arr_m[0]所指向的第二維數(shù)組的數(shù)據(jù)。
  Javascript對(duì)數(shù)組的訪問與JAVA中的完全相同。

  var textfield = document.all[ "textfield" ];
  document.all 是一個(gè)數(shù)組嗎?不完全是。
  那為什么我們可以用 “textfield” 來訪問我們的對(duì)象呢?
  這是因?yàn)橐陨衔覀兯吹降氖荍avascript中非常特殊的用法——關(guān)聯(lián)數(shù)組,也可以稱之為索引器。
  對(duì)象名[ "成員名" ] = 對(duì)象名.成員名

  關(guān)聯(lián)數(shù)組的使用,可以使某些操作從硬編碼中解脫出來,使之更具有靈活性。請(qǐng)看下面一個(gè)例子。
  假如我們?cè)趫?zhí)行某個(gè)與對(duì)象相關(guān)的操作時(shí)需要靠外界輸出才能確定調(diào)用的函數(shù)。
  方案之一:SWITCH,每更改一個(gè)分支就需要更新該方法。
  方案之二:對(duì)象 + . + 函數(shù)名();,語法錯(cuò)誤。
  方案之三:對(duì)象 [ 函數(shù)名字符串 ]();,好的。
  方案之四:eval(對(duì)象名字符串 + "." + 函數(shù)名字符串 + "();");,也可以的。

  關(guān)聯(lián)數(shù)組的使用,使我們能夠用字符串,數(shù)字或者其他的類型的變量作為索引來訪問我們所需要訪問的屬性和方法。
  在FOR-EACH中常常會(huì)用這種方法來遍歷對(duì)象或數(shù)組屬性和方法。

  12、UNDEFINDED-NULL

  undefined == null ? true
  undefined === null ? false
  undefined 表示所引用的對(duì)象未經(jīng)定義。
  null表示所引用的對(duì)象的值是空值。
  在布爾表達(dá)式中它的作用基本與null一致,都表示 false。

  13、TRY-CATCH-FINALLY-THROW

  try{
    throw new Error( "Test Exception" ) ;
  }
  catch( e ){
    document.writeln( e.name + ":" + e.message);
  }
  finally{
    document.writeln( "Final here");
  }
  TRY-CATCH-FINALLY-THROW的用法與JAVA中的完全相同。
  這是Javascript 1.5才有的新特性,在早期的瀏覽器中可能不支持。目前常用的瀏覽器 IE6、NAV7、Opera、FireFox 1.0 都支持。

  14、WITH

  function Point ( x, y ) {
    this.x = x;
    this.y = y;
  }
  var newPoint = new Point( 1, 3 );
  with (newPoint) {
    var sum = x + y;
  }
  WITH的用法與DELPH中的完全相同。
  由于使用了WITH,在其作用域中newPoint.x 和 newPoint.y 分別被簡(jiǎn)化為了 x 和 y 。

  15、TYPEOF

  swich (typeof obj) {
    case "String" :
      rs = "string" ;
      break;
    case "Object" :
      rs = "object" ;
      break;
    case "Number" :
      rs = "Number" ;
      break;
    defualt:
       rs = "Unknown Type" ;
  }
  TYPEOF的作用是返回變量中數(shù)據(jù)類型對(duì)應(yīng)的字符串。
  TYPEOF返回的字符串隨著瀏覽器的不同會(huì)有一定的差異。

二、在網(wǎng)頁中使用JavaScript

  1、鏈接標(biāo)記的URL中

  <a href = "Javascript: alert('Hi !');" >Click Me </a>
  Click Me
  這種做法通常只在教學(xué)演試中使用。
  HREF中的"Javascript : // "的協(xié)議頭一定要加,其中可以寫多句腳本,但不能寫 RETURN 語句。

  2、HTML標(biāo)簽的事件處理屬性中

  <a href = "#" onclick = "Javascript: alert('Hello !');return false;">Click Me Too</a>
  Click Me Too
  這種做法比較簡(jiǎn)單,比較常用。return false 是為了禁止頁面跳轉(zhuǎn)。
  通常 "Javascript : // "的協(xié)議頭可以不加,簡(jiǎn)寫為 onclick = "alert('Hello !');return false;"。

  3、頁面的SCRIPT標(biāo)簽中

  <script language="javascript" type="text/javascript">
  <!--//--><![CDATA[//><!--
  function testJs(){
    alert('Hello !');
    ...
  }
  //--><!]]>
  </script>
  ...
  <a href = "#" onclick = " testJs();return false;">Click Me Again</a>
  Click Me Again
  這種做法把腳本與HTML做了一定的分離,代碼的整體結(jié)構(gòu)比較良好。
  在代碼的周圍加上<!--//--><![CDATA[//><!-- 和 //--><!]]>是為了避免不支持腳本的瀏覽器把腳本當(dāng)作普通文本輸出。
  與之作用類似的還有<noscript>標(biāo)簽,<noscript>標(biāo)簽在瀏覽器不支持腳本時(shí)顯示出其中的提示性文字。
  <script>標(biāo)簽通常都放在<head>標(biāo)簽內(nèi)。

  4、外部腳本文件中

  [ testJs.js ]
  <!--//--><![CDATA[//><!--
  function testJsExt(){
    alert('Ohhh No!');
    ...
  }
  //--><!]]>
  [ *.htm ]
  <script language="javascript" type="text/javascript" src="mat/js/testJs.js"></script>
  ...
  <a href = "#" onclick ="testJsExt();return false;">Click Me Nowww! </a>
  Click Me Nowww !
  外部腳本就是把腳本保存在一個(gè)單獨(dú)的 *.js 文件中,通過指定<script>標(biāo)簽的 src 屬性,把腳本引入。
  效果相當(dāng)于在原先的<script> 標(biāo)簽中間插入外部文件中的腳本文本。
  注意某些瀏覽器將忽略有SRC屬性的<script>標(biāo)簽中的腳本代碼。
  這種方法從本質(zhì)上來講與第三種方法沒有差別,但是由于把腳本和HTML做了完全的分離,所以是商業(yè)領(lǐng)域最常用的方法。
  現(xiàn)在我們?cè)跇?biāo)簽<a>中仍然有Javascript的痕跡,在Javascript客戶端編程中我將會(huì)介紹如何將其去除,以及使Javascript腳本在HTML中留下最少痕跡的手段

相關(guān)文章

最新評(píng)論