JavaScript的學習要點

概要

瞭解Javascript歷史以及Javascript三個不一樣組成部分：

1. ECMAScript
2. DOM（文檔對象模型）
3. BOM（瀏覽器對象模型）

ECMAScript

1. 目標

   掌握Javascript語法，熟悉對象的定義和使用，能熟練使用Javascript進行web開發。

2. 要點

   1. 瞭解ECMAScript歷史以及瀏覽器支持狀況

   2. 基本語法

      • 語句
      • 運算符

      • 數據類型

        • 值類型，也就是原始類型：Undefined、Null、Boolean、Number 和 String。

          var a;                         // undefined,

          var b = null;             // null

          var c = true;             // boolean,

          var d = 10;                // number

          var e = 「my」;           // string

        • 引用類型：Object, Boolean, Number和String

          var a = new Boolean(true);

          var b = new Number(10);

          var c = new String(「my」);
      • 經常使用對象: Boolean, Number, String, Date, Array, Math, RegExp, Function
   3. 函數的定義和使用，閉包的理解
   4. 對象的定義和使用
   5. 對象的繼承
3. 參考資源
1. Javascript高級教程
2. 對象的繼承實現

DOM（主要學習HTML DOM）

1. 目標

   掌握HTML DOM定義的訪問HTML元素的對象和基本屬性，以及訪問它們的基本方法；瞭解瀏覽器的差別；熟練使用Javascript操做HTML元素。

2. 要點
   • 掌握HTML DOM的概念：節點、屬性
   • 如何訪問HTML元素（節點）：
     • 經過使用 getElementById() 方法
     • 經過使用 getElementsByTagName() 方法
     • 經過使用 getElementsByClassName() 方法
   • 如何訪問節點屬性（獲取、修改）、節點內容（獲取、修改）
   • 如何建立、刪除、移動節點：
     • createElement
     • removeChild
     • insertBefore
     • appendChild
     • cloneNode
     • replaceChild
   • 事件
     • 事件的概念
     • 如何給節點添加和移除事件(瞭解各自優缺點，建議使用推薦的方式來添加和移除事件)
       • 直接在HTML元素上添加、移除事件
       • 利用Javascript給節點添加、移除事件（瞭解不一樣瀏覽器的差別： Chrome， Firefox， IE（IE9以前和IE9以後不一樣））
         • attachEvent和addEventListener（推薦）
         • detachEvent和removeEventListener（推薦）
         • 經過修改節點事件屬性：htmlElement.onclick = function(){};
     • 基本事件及處理函數中接受的參數：事件對象（Event）：
       • 基本事件
         • 鼠標事件：onmousedown, onmouseup, onclick, ondblclick, onmousemove, onmouseover, onmouseout
         • 鍵盤事件：onkeydown, onkeypress, onkeyup
         • 焦點事件：onfocus, onblur
         • 其餘事件：onload, onchange
       • Event對象的屬性和方法
         • target
         • clientX, clientY, screenX, screenY
         • altKey, shiftKey
         • button
         • keyCode(for IE), which(for Chrome, Firefox)
         • preventDefault(): 通知瀏覽器不要執行與事件關聯的默認動做
         • stopPropagation(): 再也不派發事件。
       • 瞭解事件冒泡機制，學會如何利用冒泡來開發；瞭解如何阻止冒泡、阻止默認行爲
3. 參考資源
   1. HTML DOM教程
   2. HTML DOM Event 對象

BOM

1. 目標

   掌握BOM中提供的一些基本對象意義及使用，能熟練利用這些對象進行Web開發。

2. 要點
   • BOM概念及做用
   • 對於Window, Navigator, Screen, History, Location對象做一個基本瞭解。