一、JavaScript 基礎一 （從零學習JavaScript）

1：定義：javascript是一種弱類型、動態類型、解釋型的腳本語言。

弱類型：類型檢查不嚴格，偏向於容忍隱式類型轉換。

強類型：類型檢查嚴格，偏向於不容忍隱式類型轉換。

動態類型：運行的時候執行類型檢查。

靜態類型：編譯的時候就知道每一個變量的類型。

解釋型：程序不須要編譯，程序在運行的時候才翻譯成機器語言，每執行一次都要翻譯一次，所以效率比較低，可是跨平臺性好。

編譯型：程序在執行以前須要一個專門的翻譯過程，把程序編譯爲機器語言的文件，運行時直接使用編譯的結果就好了。

標記語言：標記語言的存在就是用來被讀取(瀏覽)的，而其自己是沒有行爲能力的，在標記語言裏你會看到<和>這些尖括號，這是用來寫出「層次」和」屬性」的，換句話說，它是被動的。並不具有與訪問者互動的能力。

編程語言：它是具備邏輯性和行爲能力，這是主動的。說通俗一點，它是有思想的。

腳本語言：它介於標記語言和編程語言之間，腳本語言不須要編譯，能夠直接用，由解釋器來負責解釋。

2: JS由來及其發展史

1）Netsape發明了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 今後變成了因特網的必備組件。

2）JS之父Brendan Eich（布蘭登 · 艾奇）

Brendan Eich在1995年在Netscape發明了JavaScript語言，
這個語言在過去的一些年裏曾是一個最被誤解的語言，隨着AJAX和Web 2.0的發展，人們逐漸正視JavaScript。
這是一篇Computerworld對Brendan Eich的一次採訪，對JavaScript的過去、如今和將來都作了闡述。
我在1995年4月4日加入了Netscape，當時的目標是把Scheme語言或者相似的語言嵌入到Netscape的瀏覽器當中。
因爲申請沒 有經過，我加入了Netscape的Server團隊，這個團隊負責Web服務器和代理服務器方面產品的開發，
我在這裏工做了一個月，主要進行下一代 HTTP的研發。
到了五月份的時候，我就被調回當初想加入Client團隊，今後我就開始了對JavaScript雛形的開發。
Marc Andreessen和我，連同在Sun工做的Bill Joy，
堅信HTML須要一種腳本化的語言，這種語言就算對於新手和業餘者來講也會很容易上手，
並且這種語言的代碼能夠直接寫在HTML的標記之間，以源 代碼的形式做爲網頁的一部分發布。
這種信念同時成爲了咱們的動力。咱們打算開發一個」膠水語言「，
面向網站的設計者和兼職作網站開發的程序員，以替代之前 那種經過圖片、插件和Java小程序搭建網站的方式。
咱們把Java當作是由高薪程序員使用的組件語言，而膠水程序員，也就是那些網頁設計師，將經過 JavaScript把組件組合起來實現交互。
JavaScript應該和Visual Basic是相似的，而Java和C++相似。
從這個意義上說，縱觀在微軟的操做系統和應用程序中使用的編程語言家族中，
貫穿在編程語言金字塔的分工差異促進了更多的創新，使咱們除了能夠選擇像Java和C++那樣」真正「的編程語言之外，
還能夠選擇一些」小巧「的腳本式語言，好比JavaScript。

3）爲何叫JavaScript

JavaScript最初的名字Mocha和LiveScript是根據什麼起的？
Mocha是Marc Andreessen起的項目名稱，但Netscape的市場部發現這個名字存在潛在的商標衝突，
因此對外決定啓用新的名稱，他們爲Netscape的產品名稱啓用了Live這個前綴，好比LiveWire、LiveScript等。
但在1995-1996這個時間，Java的發展勢頭太猛了，因此你們決定沾沾光，把名字修改成JavaScript。

4）JS和JAVA語言關係

Java 和 JavaScript 是兩門不一樣的編程語言。
通常認爲，當時 Netscape 之因此將 LiveScript 命名爲 JavaScript，是由於 Java 是當時最流行的編程語言，帶有 "Java" 的名字有助於這門新生語言的傳播。         
它們的相同之處包括：       
它們的語法和 C 語言都很類似；
它們都是面向對象的（雖然實現的方式略有不一樣）；
JavaScript 在設計時參照了 Java 的命名規則；   
借鑑了Java的垃圾回收機制；
類Self語言風格的基於原型（Prototype）的OO（Object-Oriented）模型；

它們的不一樣之處包括：       
JavaScript 是動態類型語言，而 Java 是靜態類型語言；
JavaScript 是弱類型的，Java 屬於強類型；
JavaScript 的面向對象是基於原型的（prototype-based）實現的，Java 是基於類（class-based）的； 
JavaScript 除了長得和 Java 比較像以外，語言風格相去甚遠。
JavaScript 在設計時所參考的對象不包括 Java，而包括了像 Self 和 Scheme 這樣的語言。

JavaScript最初的版本因爲設計和實現都很倉促，並不是一門嚴謹的編程語言，有很多漏洞廣爲詬病。可是最重要的是能工做（it works!），並且因爲瀏覽器的市場競爭和模仿，被快速普遍支持。從而造成了事實上的語言標準。
固然JavaScript自己也隨着Web一塊兒演進而變得更爲成熟和強大。在客戶端領域擊敗了Java Applet、VBScript乃至其後起之秀Flash的ActionScript，是現在不容置疑的Web客戶端第一編程語言，並開始向系統級語言擴展（NodeJS）。

5）JS標準化---ECMAScript

1997 年，JavaScript 1.1 做爲一個草案提交給歐洲計算機制造商協會（ECMA）。第 39 技術委員會（TC39）被委派來「標準化一個通用、跨平臺、中立於廠商的腳本語言的語法和語義」(http://www.ecma-international.org/memento/TC39.htm)。由來自 Netscape、Sun、微軟、Borland 和其餘一些對腳本編程感興趣的公司的程序員組成的 TC39 錘鍊出了 ECMA-262，該標準定義了名爲 ECMAScript 的全新腳本語言。

在接下來的幾年裏，國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。

6）發展歷程

1     1995: JavaScript出生，小名叫LiveScript。
2     1997: ECMAScript標準確立。
3     1999: ES3出現，與此同時IE5風靡一時。
4     2000–2005: XMLHttpRequest也就是AJAX大獲流行，給了JS第2次生命。
5     2009: ES5出現，（就是咱們大多數人如今使用的）例如forEach, Object.keys, Object.create 以及JSON標準。
6     2015: ES6/ECMAScript2015出現。主要是一些語法糖（好的語法改進），但缺乏功能突破。

3: JS組成

 

什麼是DOM
JavaScript最主要的操做對象毫無疑問是HTML文檔，咱們使用面向對象的方法來對文檔內容進行抽象和概念化，以便於程序對其進行操做。這樣的文檔對象模型就是DOM（Document Object Model），本質上是一種應用程序接口（API）。
HTML文檔的DOM結構和XML的DOM結構相似，都是一種樹形結構。樹的根節點就是document，而後有父節點、子節點、祖先、後代、兄弟節點這些關係。

什麼是BOM
JavaScript除了要能操做文檔，還須要能操做瀏覽器，好比獲取瀏覽器窗口大小，或者刷新頁面。和DOM相似，瀏覽器也提供了對象模型來支持JS的訪問。這個模型就是BOM（Browser Object Model）。
BOM主要包含以下6個對象：

    window對象，它是BOM的根對象，其它的BOM對象都是windows對象的屬性
    document對象表示瀏覽器中加載頁面的文檔對象，而這個對象也就是DOM模型的根對象
    location對象包含了瀏覽器當前的URL信息
    navigator對象包含了瀏覽器自己的信息
    screen對象包含了客戶端屏幕及渲染能力的信息
    history對象包含了瀏覽器訪問網頁的歷史信息。

JavaScript只有經過調用BOM/DOM API才能賦予網頁文檔動態交互特性，才能真正使得HTML變成動態的HTML。

 

---

4：文件引入

 <script>標籤用於定義客戶端腳本。它既能夠包含腳本語句，也能夠經過src屬性指定外部腳本文件。

屬性：

language：用來指定<script>標籤中的腳本類型，即javascript。已廢棄，大多數瀏覽器已經忽略它了，因此不要在使用。

type：它也是用來指定<script>標籤中的腳本類型，即text/javascript。它也是type的默認值，因此能夠忽略指定。

src：指定外部的腳本文件。若是指定該屬性，script標籤包含的JS腳本不會執行。

不可使用單標籤，即<script type=「text/javascript」/>。

1) 引入外部文件

1	< script type="text/javascript" src="JS文件"></ script >

2.存放在HTML的<head>或<body>中

1 2 3

< script type="text/javascript">      Js代碼內容 </ script >

• HTML的head中
• HTML的body代碼塊底部(推薦)

3） 爲何要放在<body>代碼塊底部？

• HTML代碼從上到下執行，先加載CSS，避免html出現無樣式狀態；
• 將JavaScript代碼塊放在<body>最後，可讓網頁儘快的呈現給用戶，減小瀏覽者的等待時間，避免由於JS代碼塊阻塞網頁的呈現。

5：js註釋

註釋可用於提升代碼的可讀性。Javascript不會執行註釋，用戶也不會看到註釋，註釋只是方便開發者更好的理解JS代碼。

單行註釋：以//開頭。

// 這是一行單行註釋 

多行註釋：以/*開頭，以*/結尾。 

/* 第一行註釋 第二行註釋 */

文檔註釋：以/**開頭，以*/結尾。 

/** 這是文檔的註釋 */

重要註釋：以/*！開頭，以*/結尾 

/*! 這是很是重要的註釋 */ 

6：js變量

變量是存儲信息的容器，用var關鍵詞來聲明(建立)變量。

1)變量定義（聲明）：

先定義後賦值：

var age; 　　 //var 是關鍵字，age是變量名

age = 20;　　//20是數據 「=」是賦值

定義的同時賦值： var age=20；

一條語句中聲明多個變量，該語句以var開頭，並使用英文逗號分隔。

　　var x= '加數', y= '加數',z='和';

2)變量的分類

全局變量：在全部的函數外部定義的變量和不寫 var 則爲全局變量 

局部變量：在函數內部定義的變量且必須以var開頭申明

1 2 3 4 5 6 7 8 9 10

<script type= "text/javascript" >      // 全局變量      name = 'xiaoming' ;       function func(){              // 局部變量              var age = 18;              // 全局變量              sex = "man"      } </script>

  

1 2 3 4 5 6 7 8 9 10

var a = 5; var b = 6; var c = 12; //在此以前定義的三個變量都是全局變量（頁面關閉後被刪除） function sum() {      var c = a + b; //局部變量（生存週期:函數執行完畢後被刪除）      console.log(c); //在此輸出的是局部變量，則輸出結果：11 } sum(); console.log(c); //在此輸出的變量是全局變量，則輸出的結果：12

  

1 2 3 4 5 6 7 8 9

var a = 5; //全局變量 ( function () {      var a = 7; //局部變量，做用域爲此函數代碼塊內      sum(); })();   function sum() {      console.log(a + 4); //a的值是全局變量的值，故輸出的結果爲9 }

 　　

注：1， 變量也能夠不定義，但強烈不推薦。 2， 變量必須先賦值再使用

7：變量命名規則及經常使用命名法

1)變量命名規則：以字母、數字、下劃線和$組成，可是不能以數字開頭。且JS語句和JS變量都是嚴格區分大小寫。不能用拼音來命名。

2)變量經常使用命名法推薦西班牙命名法，以 小寫字母b,f,i,s開頭表示類型，後接大寫開頭的有意義的單詞。

駝峯命名法（Camel）：第一個單詞的首字母小寫，後面的單詞首字母大寫。

帕斯卡命名法（Pascal）：全部單詞的首字母大寫。

匈牙利命名法（Hungarian）：在變量名最前面添加相應小寫字母來標識變量的類型，後面的單詞首字母大寫。 

1 2 3 4 5 6 7 8 9 10 11

// 駝峯命名法 //   var haveGoodGoods = '有好貨' ;   // 帕斯卡命名法     var HaveGoodGoods;   // 匈牙利命名法     var sHaveGoodGoods = '有好貨' ;

　　

 3）儘可能使用有意義的單詞做爲變量名（語義化），也儘可能不要與HTML、CSS中的關鍵字衝突。

　　　　　　　　　　　　　　　　　　保留關鍵字列表

8：數據類型

• 基本數據類型：字符串類型（string）、數值類型（number）、布爾類型（boolean）、undefined、null。

1）字符串類型：必需要由成對的單引號或雙引號包起來。內容能夠是任意文本，只要不包含包圍字符串的引號就能夠。若是必定要包含，則用反斜槓轉義。

// 字符串類型
var data = 'this is a string';

//字符串包含引號轉義

 var data = '"this is a str\'ing'; 

\0 空字節 \n 換行 \t 製表 \b 空格 \r 回車 \f 進紙 \\ 斜槓 \' 單引號 \" 雙引號　　

 

2）數值類型：能夠帶小數點，也能夠不帶小數點。
 var number = 123;
 var number = 123.4;
 var number = '123.4';

轉換：

parseInt(..)    將某值轉換成整數，不成功則NaN

parseFloat(..) 將某值轉換成浮點數，不成功則NaN

特殊值：

　　 NaN，非數字。可使用 isNaN(num) 來判斷,切記不能用if(typeof(num)==NaN)。

　　Infinity，無窮大。可使用 isFinite(num) 來判斷。

3）布爾類型：只有兩個值：true，false。

// 布爾類型 true 和 false
 var bool = true;

4）undefined：表示變量未定義。

5）null：用來表示還沒有存在的對象。

• 引用數據類型：對象（object），函數（function）。

1)定義對象(冒號前面的字符串稱爲鍵，冒號後面的是值)
　　 var person = {name: '小明', age: 20};  //name鍵    小明值

2)定義數組
　　 var arr = ['小白', '男', 20];

3)定義函數（此處數據類型不進行深究）

1 2 3 4 5 6 7 8 9 10 11 12

// 普通函數（聲明式建立函數）   function func(arg){       return true ;   } // 匿名函數 （表達式建立函數） var func = function (arg){      return "nick" ; } // 自執行函數 ( function (arg){      console.log(arg); })( 'nick' )

// 經過構造函數的方式建立函數

// 構造函數：出如今new運算符後的函數，稱爲構造函數

var funcName = new Function ();document.write(typeof func);   //typeof來查看變量的類型

1 2 3

// 執行函數　   func();

 

9：運算符

• 算術運算符：+、-、*、/、%(取餘)、++（遞增）、--(遞減)

　　+運算符：可用於把字符串變量鏈接起來。

　　var  a=1+"5"  //結果爲15（字符串）

　　//當用/運算符的時候，Math.round的用法(四捨五入)。

1 2 3 4

var a = 9 ,b = 7; // Math.round：四捨五入到整數位 表達式Math.round(9/7)=1,若是想四捨五入到某小數位則先乘後除 var c = Math.round(9 / 7 * 100) / 100; document.write(c);

 

　　parseInt：將字符串轉換成整數，從字符串左側依次查找數值，直到碰到非數值的字符結束

　　parseFloat：將字符串轉換成浮點數（帶有小數點的數值）。

　　NaN：not a number  （NaN類型是Number，可用typeof來查看相關類型）

1 2 3 4 5 6 7

var a = '0.128.6.7px' ;   var b = parseInt(a);　　 //b=0   var b = parseFloat(a);　 //b=0.128   document.write(b);

1 2 3 4 5 6

var a = 10.4, b = 7; //var c = a% b ; /*按照正常算法3.4，可是js定義的變量都是弱類型，精度相對來講較低出來的結果大概是 3.400000000000000000004,結果接近咱們處理的方式以下：*/ var c = a * 10 % b / 10; document.write(c);

1 2 3 4 5 6 7

// ++ （自增） => 前自增（++a）、後自增(a++) var a = 5; // a的前自增：變量自己先自增1，而後再將結果賦予當前位置 // a的後自增：變量的值先賦予當前位置，而後變量自己再自增1 var b = 4 + a++; document.write(a); // 6 document.write(b); // 9

　　--a和a--原理同++a和a++

1 2 3 4 5 6 7

var a = 4, b = 3; var c = (a++ + ++b + b-- + --a) % 5; //表達式對應值：4+4+4+4 //對應位置a、b的值： a++=五、++b=四、 b--=三、--a=4 document.write(c); document.write(a); document.write(b);

　　賦值運算符：=、+=、-=、*=、/=、%=

1 2 3 4 5

var a = 4, b = 5; a += b; // a = a + b; a %= b; // a = a % b; document.write(a); document.write(b);

• 關係(比較)運算符：>、<、>=、<=、==、===、!=、!==

===與==的區別：

對於string和number等基本類型，不一樣類型之間比較：

一、==比較會將變量隱式轉換成同一類型的值進行比較。

二、===若是類型不一樣，其結果就是不等。

若是是array和object等引用類型，==和===沒有區別，若是兩個的變量是同一個對象就爲true，不然爲false。

基本類型和引用類型進行比較，==會將引用類型轉換成基本類型，再進行值比較。而===由於類型不一樣，結果爲false。

1 2 3 4 5 6 7 8 9 10

// == 和 === // 基本數據類型 var a = 5, b = '5' ; document.write(a == b); //true document.write(a === b); //fasle   // 引用數據類型：看兩側的變量是否爲同一個對象，是則true，不是則false var a = {}, b = {}; document.write(a == b); //false document.write(a === b); //false

• 邏輯運算符：&&、||、!

•  三目運算符（簡化代碼）：? :

1 2 3

// 三目運算符：condition ? if_true : if_false;   var c = 5 > 4 ? '恩' : '哦' ; alert(c); //c=恩

10：運算符的優先級(自上而下遞減 ，水平同級)

1》.（對象、類的屬性或字段訪問） 　　　　[]（數組下表） 　　　　　　()（函數調用）    ：（三目表達式的分組—表達式的分組）

2》++、--、!、delete（刪除對象的某個屬性及屬性值）、new（建立構造函數和建立對象）、typeof

3》*、/、%

4》+、-、+  加、減、字符串鏈接

5》關係運算符、instanceof（判斷某個對象是不是某個類的一個實例）

6》邏輯運算符

7》賦值運算符

()做用：能夠表達式分組、改變運算符的優先級、函數調用。

例：a=!6<7  =>   true

推理：a=(!6)<7    =>     a=false<7     =>    a=0<7    =>        true         

     

---

 一、JavaScript 基礎一  （從零學習JavaScript）    

二、JavaScript 基礎二 （從零學習JavaScript）

---

 借鑑轉載出處: http://www.cnblogs.com/witkeydu/