摘要：創建對象訪問對象的屬性和方法訪問對象的屬性和方法調用帶參數的函數在調用函數時，您可以向其傳遞值，這些值被稱為參數。

javascript是一門重要弱類型的語言，因為它是web瀏覽器的語言，它與瀏覽器的結合使他成為世界上最流行的編程語言之一。

js歷史

Nombas 和 ScriptEase

大概在 1992 年，一家稱作 Nombas 的公司開發了一種叫做 C 減減（C-minus-minus，簡稱 Cmm）的嵌入式腳本語言。Cmm 背后的理念很簡單：一個足夠強大可以替代宏操作（macro）的腳本語言，同時保持與 C （和 C ++）足夠的相似性，以便開發人員能很快學會。這個腳本語言捆綁在一個叫做 CEnvi 的共享軟件中，它首次向開發人員展示了這種語言的威力。

Nombas 最終把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）聽起來過于消極，同時字母 C “令人害怕”。

現在 ScriptEase 已經成為了 Nombas 產品背后的主要驅動力。

Netscape 發明了 JavaScript

當 Netscape Navigator 嶄露頭角時，Nombas 開發了一個可以嵌入網頁中的 CEnvi 的版本。這些早期的試驗被稱為 Espresso Page（濃咖啡般的頁面），它們代表了第一個在萬維網上使用的客戶端語言。而 Nombas 絲毫沒有料到它的理念將會成為萬維網的一塊重要基石。

當網上沖浪越來越流行時，對于開發客戶端腳本的需求也逐漸增大。此時，大部分因特網用戶還僅僅通過 28.8 kbit/s 的調制解調器連接到網絡，即便這時網頁已經不斷地變得更大和更復雜。而更加加劇用戶痛苦的是，僅僅為了簡單的表單有效性驗證，就要與服務器進行多次地往返交互。設想一下，用戶填完一個表單，點擊提交按鈕，等待了 30 秒的處理后，看到的卻是一條告訴你忘記填寫一個必要的字段。

那時正處于技術革新最前沿的 Netscape，開始認真考慮開發一種客戶端腳本語言來解決簡單的處理問題。

當時工作于 Netscape 的 Brendan Eich，開始著手為即將在 1995 年發行的 Netscape Navigator 2.0 開發一個稱之為 LiveScript 的腳本語言，當時的目的是在瀏覽器和服務器（本來要叫它 LiveWire）端使用它。Netscape 與 Sun 及時完成 LiveScript 實現。

就在 Netscape Navigator 2.0 即將正式發布前，Netscape 將其更名為 JavaScript，目的是為了利用 Java 這個因特網時髦詞匯。Netscape 的賭注最終得到回報，JavaScript 從此變成了因特網的必備組件。

javascript的函數（主要）基于詞法作用域(lexical scoping)的頂級對象。

hello world

demo.html



    


 
     
 


demo.js
document.writeln("hello world")

    


   








    


   








    
       











    
       


  
My link
  try it








     


  
My msg
  try it
  






     










    
    


    try it







    


       






    


       

1,語法
1.1 空格
var that = this;
var 和that之間的空白不能移除，但是其他的空格都是可以移除的。
注釋
js的注釋有兩種方法：/ / 和//
/ var rm_a = /a/.match(s) */就會導致錯誤，所以一般注釋用//.
1.2 標識符
標識符有一個字母開頭，可以選擇性的加上一個或是多個字母，數字或下劃線，但是不能使用下面的保留字
abstract,boolean,break,byte,case,catch,char,class,const,continue,debugger,default,delete,do,double,else,enum,export,extends,false,final,finally,float,for,function,goto,if,implements,import,in,instanceof,int,interface,long,native,new,null,package,private,protected,public,return,short,static,super,switch,synchronized,this,throw,thransient,true,try,typeof,while,with
2,對象
js中，對象是可變的鍵控集合(keyed collections)，在js中，數組是對象，函數是對象，正則表達式是對象。
對象字面量:對象字面量提供了一種非常方便的創建新對象值的表達法，一個對象字面量就是包圍在一對花括號中的零或多個"鍵/值"對。

var name = {
    "name1":"mike",
    "name2":"mike2"
}

對象也可以嵌套使用:

var flight = {
    airline:"oceanic",
    number:125,
    departure:{
        city:"beijing",
        time:"2015/01/05"
    },
    arrival:{
        city:"amrica",
        time:"2015/01/06"
    }
}

2.1 對象的檢索
檢索對象中包含的值，可以采用在[]后綴中括住一個字符串表達式。

name["name1"] //mike1
flight.arrival.city //amrica

2.2屬性值更新
name["name1"] = "Jet li"
2.3引用傳遞對象
對象通過引用來傳遞
var = {},b = {},c = {}//a,b,c 都引用一個不同的空對象
a = b = c = {} //a b,c都引用同一個空對象

3.2 原型
http://www.crockford.com/java...
原型是一個對象，其他對象可以通過它實現屬性繼承。
每個對象都連接到一個原型對象，并且他可以從中可以繼承屬性，原型連接在屬性更新的時候是不起作用的，原型連接只用在檢索的時候才會被用到，如果我們嘗試去獲取對象的某個屬性值，且該對象沒有此屬性值，那么js會嘗試從原型對象上獲取，如果也沒找到，返回undefined，這個過程叫委托

typeof

typeof 運算符有一個參數，即要檢查的變量或值

var a = "str"; alert(typeof a);//string
var a = "str"; alert(typeof 123);// number

對變量或值調用 typeof 運算符將返回下列值之一：

undefined - 如果變量是 Undefined 類型的
boolean - 如果變量是 Boolean 類型的
number - 如果變量是 Number 類型的
string - 如果變量是 String 類型的
object - 如果變量是一種引用類型或 Null 類型的

為什么 typeof 運算符對于 null 值會返回 "Object"。這實際上是 JavaScript 最初實現中的一個錯誤，然后被 ECMAScript 沿用了。現在，null 被認為是對象的占位符，從而解釋了這一矛盾，但從技術上來說，它仍然是原始值。

Undefined 類型

如前所述，Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。

var str; console.log(str==undefined)//true
var str; console.log(typeof str)//undefined

Null 類型

另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。

var str = null; console.log(str==undefined)//true

盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用于表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那么找不到該對象時，返回的通常是 null。

Boolean 類型
它有兩個值 true 和 false （即兩個 Boolean 字面量）。

即使 false 不等于 0，0 也可以在必要時被轉換成 false，這樣在 Boolean 語句中使用兩者都是安全的。

注意數值的表示法
var str = !0;console.log(str)//true
var str = !1;console.log(str)//false

Number 類型
ECMA-262 中定義的最特殊的類型是 Number 類型。這種類型既可以表示 32 位的整數，還可以表示 64 位的浮點數。

直接輸入的（而不是從另一個變量訪問的）任何數字都被看做 Number 類型的字面量。例如，下面的代碼聲明了存放整數值的變量，它的值由字面量 32 定義：

var num = 32;console.log(num)//32

JavaScript 擁有動態類型

JavaScript 擁有動態類型。這意味著相同的變量可用作不同的類型：

Undefined 和 Null

Undefined 這個值表示變量不含有值。

可以通過將變量的值設置為 null 來清空變量。

聲明變量類型
當您聲明新變量時，可以使用關鍵詞 "new" 來聲明其類型：

創建 JavaScript 對象

JavaScript 中的幾乎所有事務都是對象：字符串、數字、數組、日期、函數，等等。

對象（object）定義為“屬性的無序集合，每個屬性存放一個原始值、對象或函數”。嚴格來說，這意味著對象是無特定順序的值的數組。

面向對象語言的要求

一種面向對象語言需要向開發者提供四種基本能力：

封裝 - 把相關的信息（無論數據或方法）存儲在對象中的能力
聚集 - 把一個對象存儲在另一個對象內的能力
繼承 - 由另一個類（或多個類）得來類的屬性和方法的能力
多態 - 編寫能以多種方法運行的函數或方法的能力

對象由特性（attribute）構成，特性可以是原始值，也可以是引用值。如果特性存放的是函數，它將被看作對象的方法（method），否則該特性被看作對象的屬性（property）。

你也可以創建自己的對象。

訪問對象的屬性和方法

調用帶參數的函數
在調用函數時，您可以向其傳遞值，這些值被稱為參數。
變量和參數必須以一致的順序出現。第一個變量就是第一個被傳遞的參數的給定的值，以此類推。

    
    


   click

帶有返回值的函數
在使用 return 語句時，函數會停止執行，并返回指定的值。

    
    


   
Here is the content will be changed
   click

局部 JavaScript 變量

在 JavaScript 函數內部聲明的變量（使用 var）是局部變量，所以只能在函數內部訪問它。（該變量的作用域是局部的）。

可以在不同的函數中使用名稱相同的局部變量，因為只有聲明過該變量的函數才能識別出該變量。

只要函數運行完畢，本地變量就會被刪除。

全局 JavaScript 變量

在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能訪問它。

向未聲明的 JavaScript 變量來分配值

如果把值賦給尚未聲明的變量，該變量將被自動作為全局變量聲明。
將聲明一個全局變量，即使它在函數內執行。

函數支持閉包
函數支持閉包，也即是說，函數可以使用函數之外定義的變量。

JavaScript 運算符
如果把數字與字符串相加，結果將成為字符串。

逗號運算符
用逗號運算符可以在一條語句中執行多個運算。常用在變量聲明中。

var iNum1 = 1, iNum = 2, iNum3 = 3;

JavaScript Switch 語句

    


    

    try it
    

for循環

    
    


    

    try it
    

do/while

    
    


    

    try it
    

while 遍歷數組

try/catch

    


    
    
    click
    

通過標簽名查找 HTML 元素
getElementsByTagName

    


  

      this is the first doc
      
this is the second doc
      
this is the third doc
  
    

改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。

    


      
this is the first doc
    

改變 HTML 樣式

如需改變 HTML 元素的樣式，請使用這個語法：

    


      
this is the first doc
    

點擊更改html

    


  
please click it






    


  
  
please click it

打印系統時間

    


  

  
  please click it




button和點擊分離




    


    click here
    
    

onload事件

onchange事件，點擊離開，輸入內容大寫

mouseover/mouseout

    


  
what "s that
  

mouseup/mousedown

當輸入字段獲得焦點時，會觸發改變背景顏色的函數。

創建新的 HTML 元素
如需向 HTML DOM 添加新元素，你必須首先創建該元素（元素節點），然后向一個已存在的元素追加該元素。

    



    
the second para
    
the second para
 

  

刪除已有的 HTML 元素

如需刪除 HTML 元素，你必須首先獲得該元素的父元素

    



    
the first para
    
the second para
 
    
the third para

  

javascript 面對對象
使用預定義對象只是面向對象語言的能力的一部分，它真正強大之處在于能夠創建自己專用的類和對象。
工廠方式
原始方式

工廠模式

    


      


返回 person 對象（person）作為函數值。調用此函數，將創建新對象，并賦予它所有必要的屬性，復制出一個我們在前面說明過的 person 對象。因此，通過這種方法，我們可以很容易地創建 person 對象的兩個版本（person1 和 person2），它們的屬性完全一樣。

工廠模式傳遞參數

    


      


給 createPerson() 函數加上參數，即可為要創建的 person 對象的 skinColor、phsiHight 和 hanNum 屬性賦值。這使兩個對象具有相同的屬性，卻有不同的屬性值

將函數方法定義在工廠函數外面

構造函數方法

構造函數方法與工廠方式的差別。
首先在構造函數內沒有創建對象，而是使用 this 關鍵字。使用 new 運算符構造函數時，在執行第一行代碼前先創建一個對象，只有用 this 才能訪問該對象。然后可以直接賦予 this 屬性，默認情況下是構造函數的返回值（不必明確使用 return 運算符）。
現在，用 new 運算符和類名 Person 創建對象，就更像 ECMAScript 中一般對象的創建方式了。
就像工廠函數，構造函數會重復生成函數，為每個對象都創建獨立的函數版本。不過，與工廠函數相似，也可以用外部函數重寫構造函數，同樣地，這么做語義上無任何意義。這正是下面要講的原型方式的優勢所在。

原型方式

混合的構造函數

字符串拼接，資源消耗問題

var str = "hello ";
str += "world";

實際上，這段代碼在幕后執行的步驟如下：

創建存儲 "hello " 的字符串。
創建存儲 "world" 的字符串。
創建存儲連接結果的字符串。
把 str 的當前內容復制到結果中。
把 "world" 復制到結果中。
更新 str，使它指向結果。

每次完成字符串連接都會執行步驟 2 到 6，使得這種操作非常消耗資源。如果重復這一過程幾百次，甚至幾千次，就會造成性能問題。解決方法是用 Array 對象存儲字符串，然后用 join() 方法（參數是空字符串）創建最后的字符串。想象用下面的代碼代替前面的代碼：

這樣，無論數組中引入多少字符串都不成問題，因為只在調用 join() 方法時才會發生連接操作。此時，執行的步驟如下：

創建存儲結果的字符串
把每個字符串復制到結果中的合適位置

雖然這種解決方案很好，但還有更好的方法。問題是，這段代碼不能確切反映出它的意圖。要使它更容易理解，可以用 StringBuffer 類打包該功能：

這段代碼首先要注意的是 s 屬性，本意是私有屬性。它只有兩個方法，即 append() 和 toString() 方法。append() 方法有一個參數，它把該參數附加到字符串數組中，toString() 方法調用數組的 join 方法，返回真正連接成的字符串。要用 StringBuffer 對象連接一組字符串

重命名已有的方法
可以給已有的方法名更改名稱，比如可以給 Array 類添加兩個方法 enq() 和 inq()，只讓它們反復調用已有的 push() 和 shift() 方法即可：
shift() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值。

創造方法
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置.但是Array沒有indexof方法,這里可以給Array創建一個indexof方法

重定義已有方法
就像能給已有的類定義新方法一樣，也可重定義已有的方法。如前面的章節所述，函數名只是指向函數的指針，因此可以輕松地指向其他函數。

重新定義toString方法，但是保留它的原始指針

javascript的繼承機制的實現

選定基類后，就可以創建它的子類了。基類只是用于給子類提供通用的函數。在這種情況下，基類被看作抽象類。

盡管 ECMAScript 并沒有像其他語言那樣嚴格地定義抽象類，但有時它的確會創建一些不允許使用的類。通常，我們稱這種類為抽象類。

創建的子類將繼承超類的所有屬性和方法，包括構造函數及方法的實現。記住，所有屬性和方法都是公用的，因此子類可直接訪問這些方法。子類還可添加超類中沒有的新屬性和方法，也可以覆蓋超類的屬性和方法。
繼承的方式

和其他功能一樣，ECMAScript 實現繼承的方式不止一種。這是因為 JavaScript 中的繼承機制并不是明確規定的，而是通過模仿實現的。這意味著所有的繼承細節并非完全由解釋程序處理。作為開發者，你有權決定最適用的繼承方式。
1，對象冒充
它是在開發者開始理解函數的工作方式，尤其是如何在函數環境中使用 this 關鍵字后才發展出來。

對象冒充可實現多重繼承
UML

這里存在一個弊端，如果存在兩個類 ClassX 和 ClassY 具有同名的屬性或方法，ClassY 具有高優先級。因為它從后面的類繼承。除這點小問題之外，用對象冒充實現多重繼承機制輕而易舉。

由于這種繼承方法的流行，ECMAScript 的第三版為 Function 對象加入了兩個方法，即 call() 和 apply()。

Call() 方法

var pet = {
    words:"...",
    speak: function(say){
        console.log(say+""+this.words);
    }
}

// pet.speak("speak") //speak ...
// this 指的是調用這個方法的對象 pet


// 狗有自己的話，但是沒有speak的方法
var dog = {
    words:"wang"
}

//  pet本來指向的是speak方法，但是call改變了執行上下文，pet 的speak就指向了dog
//dog 現在有了一個pet的技能 speak
pet.speak.call(dog,"speak ")//speak wang

 call 實現繼承
 function pet (words) {
    this.words = words;
    this.speak = function(){
        console.log(this.words)
    }
}

function dog(words){
    pet.call(this,words)//dog 沒有speak方法，通過call(this) 繼承了pet的speak方法
    //pet.apply(this,arry) apply和call的區別在于apply傳遞的是一個參數列表
}

var dog = new dog("wang");

dog.speak();//wang

apply方法

    


    


//當然，只有超類中的參數順序與子類中的參數順序完全一致時才可以傳遞參數對象。如果不是，就必須創建一個多帶帶的數組，按照正確的順序放置參數。

call(),apply(),bind()的區別

比如，在舉一個例子:




  


  


這段代碼打印出來的肯定是mike this year 20 years old

原型鏈繼承

混合繼承機制

javasript中需要注意的一些問題

     var obj = {name:"michael",age:"23",gender:"male"}
     var txt = ""
     for(var i in obj){//這里可以不加 var，直接寫‘i’但是會把i 做為全局的變量 window.i
        txt +=obj[i]//obj是一個對象，但是可以這樣寫 obj[i],因為集合也是對象。
     }
     console.log(txt)//michael23male

javascript頁面加載刷新就會自動執行部分腳本，請看下面demo

    

        
click me
        
click me
        
click me
        
click me
    
    
    var eles = document.getElementsByTagName("li")
   var len = eles.length;
   for(var i = 0;i
javascript 2種截取字符串的方法 substr 和 slice
  var date = "2016-01-05"
  date.slice(0,7) 
  date.substr(0,7)