HTML和javascript 第二天 HTML/JS Day 02

                                                          2011年3月4日

了解 JS 是什麼，JS能做什麼，JS 基本程式結構 

什麼是 JS 

JavaScript 被設計用來向 HTML頁面添加互動行為。 

JavaScript 是一種腳本語言, 被浏覽器解釋執行。 

JavaScript 的正式名稱是 "ECMAScript". 這個标準由 ECMA 組織發

展和維護。 

JS被用于做什麼?  

響應事件, 實作複雜互動。 

驗證資料, 提示系統健壯性。 

擷取和改變 HTML元素及 CSS屬性， 動态改變頁面外觀。 

JS DOM 程式設計及伺服器異步通信技術—Ajax, 成為 RIA(Rich Internet Applications)的解決方案之一。 

JS在頁面中的聲明位置  

•  頁面内部  

  <script type="text/JavaScript" src="some.js"> 

    var flag = true; 

    function validate() {…} 

  </script>  

•  單獨檔案  

<script type="text/JavaScript" src="some.js"></script> 

•  嵌入 HTML元素内部  

<a href="javascript:alert(‘Click Me’);">…</a> 

基于事件響應  

  </script> 

    … … … 

  <input type=“button” value=“OK” 

  <!—事件發生後，調用 validate方法-->

掌握 JS基本資料類型及其運算

JS有 3種基本資料類型  

number, string, boolean  

var n = 2; var str = "ECMAScript"; var flag = true;

typeof 用于傳回類型  

 undefined, null, number, string, boolean, object

null和 undefined 

 var nullV = null; alert(nullV == undefined); //true

Infinity和 NaN 

對于 number類型 Infinity表示無窮, NaN表示非數字  

isNaN("ABC") // false 

parseInt(…)和 parseDouble(…) 

用于将字元串轉換為數值

toString(…) 

用于将數值轉換為字元串 

字元串的基本屬性和方法 

•  length屬性  傳回字元串的長度  

•  charAt(index)   傳回指定位置的字元  

•  substring(from, to) 傳回子字元串  

•  indexOf(str) 指定字元串在原字元串中第一次出現的位置  

•  lastIndexOf(str) 指定字元串在原字元串中最後一次出現的的位置 

•  match(regexp)   傳回比對指定正規表達式的字元串  

•  search(regexp)  傳回按照正規表達式檢索到的字元串位置  

•  toLowerCase/toUpperCase 傳回小寫/大寫形式 

掌握如基本事件及其含義  

onclick 滑鼠單擊（參見執行個體）  

onchange 内容改變（參見執行個體）  

onfocus 獲得焦點（參見執行個體）  

onblur 失去焦點（參見執行個體）  

onload 元素加載顯示（參見執行個體） 

onunload 頁面關閉（參見執行個體） 

  滑鼠移出（參見執行個體） 

onDblClick 滑鼠輕按兩下（參見執行個體） 

熟練的使用數組、日期等

數組的基本操作  

•  建立數組, 長度由後期指派決定  

  var arry1 = new Array;                 

  for (i = 0; i < 5; i++) {                     

    arry1[i] = 2 * i + 1;                 

  } 

•  length屬性傳回數組的長度                 

alert("arry1.length=" + arry1.length);                            

•  toString()方法, 傳回數組的字元串表示                 

alert("arry1=" + arry1.toString());  

•  建構數組并初始化(有點像 Java) 

arry2 = [2, 4, 6, 8]; 

•  concat方法, 用于連接配接兩個數組                 

var arry3 = arry1.concat(arry2); 

alert(arry3); // 1, 3, 5, 7, 9, 2, 4, 6, 8 

•  join 用于将數組中的各個元素連接配接成字元串, 預設用","連接配接,也可以指定連接配接的字元.   

  var arry5 = ["one", "two", "three"];  

  var strArry = arry5.join(); // "one,two,three“ 

  strArry = arry5.join("|"); "one|two|three" 

•  調用 reverse可以将數組反轉  

  arry8 = [1,2,3,4,5]; 

  arry8.reverse(); // 5, 4, 3, 2, 1 

•  slice用于截取數組的一部分并以數組的形式傳回  

  var arry9 = ['一','二','三','四','五']; 

  var arry10 = arry9.slice(1,3); // 二, 三  

•  splice用于删除原數組的一部分内容, 并用指定的元素替換  

  var arry11 = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; 

  arry11.splice(1, 5, '&','%','#'); // A, &, %, #, G 

•  sort 方法用于将數組排序                 

var arry6 = [2, 3, 1, 6, 5, 3, 1, 4, 7]; arry6.sort();  

// 1, 1, 2, 3, 3, 4, 5, 6, 7 

對于字元串數組, sort方法使用字典的順序排序                 

var arry7 = ['BB', 'AAA', 'C']; 

arry7.sort(); // AAA, BB, C 

可以通過回調函數的方式自定義排序的大小邏輯, 例如:  

arry7.sort(function(a1, a2) { 

return a1.length - a2.length;}); // C, BB, AAA 

=sort 方法運作時将使用數組的元素調用 function(a1, a2) {...} 根據其傳回的結果判斷元素的大小, 其邏輯為:  

    傳回值>0 表示 a1>a2 

    傳回值<0 表示 a1<a2 

    傳回值=0 表示 a1=a2 

•  棧的操作  

可以利用數組實作棧(先進後出)的操作  

  var arry12 = new Array; 

     // 進棧一個元素  

  arry12.push('one'); 

  // 進棧多個元素    

  var size = arry12.push('two','three','four'); 

  for(i=0; i<size; i++) {          

alert(arry12.pop()); 

  }  

使用 Date對象處理日期  

var date = new Date(); 

alert(date.toString()); 設定/擷取時間分量的方法  

setYear(…)/getYear() 

setMonth(…)/getMonth() 

setDate(…)/getDate() 

setHours(…)/getHours() setMinutes(…)/getMinutes() 

setSeconds(…)/getSeconds() 

setMilliseconds()/getMilliseconds  

setTime(…)/getTime()

Math類提供各種數學運算方法：  

alert(Math.sqrt(2));    

alert(Math.PI); 

alert(Math.pow(2,5)); 

alert(Math.random()); 類似的屬性和方法還有：  

E, abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, 

max, min, pow, random, round, sin, sqrt, tan …

一些基本的對于頁面元素的操作

每一個頁面元素用 id屬性辨別。 

document（浏覽器内建對象）的 getElementById方法可以根據 Id擷取

該元素對象。 

通過 style屬性可以通路樣式。 

例如： 

var d = document.getElementById(“d1”); 

d.style.backgroundColor=”#ff9999”;

注意 JS對 CSS樣式屬性的命名規則： 

#d1 {color：#ffff99;}    d1.style.color=”#ffff99”; 

#d2{background-color: #ff9999;}  

d2.style.backgroundColor=”ff9999”; 

掌握 Prototype.js 的兩個基本方法 

Prototype.js 

Prototype.js是知名的JS架構。應用很廣。可以從官方網站下

$方法 

相當于 document.getElementById 

•  $(‘item1’) 

相當于 document.getElementById(‘item1’); 

•  $('item1', 'item2', 'item3'，…) 

傳回一個數組包含分别與 id‘item1’、 ‘item2’ 、‘item3’… 對應的各

個元素。

$F方法 

獲得表單的值，相當于 document.getElementById(‘…’).value; 

例如: <input type=”text” id=”name”/> 

… … … 

$F(‘id’)=”Hello”;  

// 相當于 document.getElementBy(‘name’).value

掌握簡單的正規表達式操作 

建立正規表達式對象： 

var re = /\d/; 

var reEmail = /^(?:\w+\.?)*\w+@(?:\w+\.?)*\w+$/; 

正規表達式的 test方法用于比對。 

re.test(“1”); 傳回為 boolean類型，表示是否比對。 

match方法 

字元串的 match方法用于比對，傳回為數組對象，表示比對到的所有字元

串。（注意表達式中“/g”的問題）。 

search方法 

字元串的 search方法用于查找字元串中第一個比對的位置 

正規表達式規則（參見學過的 Java API） 

本文轉自 646676684 51CTO部落格，原文連結：http://blog.51cto.com/2402766/506883，如需轉載請自行聯系原作者