好程式設計師web前端培訓分享JavaScript基礎語法

　　好程式設計師web 前端培訓分享 JavaScript 基礎語法， JavaScript 發展歷史（ JS ）

1994 年，網景公司 (Netscape) 釋出了 Navigator 瀏覽器 0.9 版，這是世界上第一款比較成熟的網路瀏覽器，轟動一時。但是這是一款名副其實的瀏覽器 -- 只能瀏覽頁面，瀏覽器無法與使用者互動 , 當時解決這個問題有兩個辦法，一個是採用現有的語言 , 許它們直接嵌入網頁。另一個是發明一種全新的語言。
liveScript ==> javaScript ==> ECMAscript

HTML  ：標記語言

JavaScript  ：程式語言

2. 1995 年 Sun 公司將 Oak 語言改名為 Java ，正式向市場推出。 Sun 公司大肆宣傳，許諾這種語言可以 " 一次編寫，到處執行 "(Write Once, Run Anywhere) ，它看上去很可能成為未來的主宰。

3. 網景公司動了心，決定與 Sun 公司結成聯盟

4. 34 歲的系統程式設計師 Brendan Eich 登場了。 1995 年 4 月，網景公司錄用了他 , 他只用 10 天時間就把 Javascript 設計出來了。（多型語言）

5. (1) 借鑑 C 語言的基本語法 ; (2) 借鑑 Java 語言的資料型別和記憶體管理 ; (3) 借鑑 Scheme 語言，將函式提升到 " 第一等公民 "(first class) 的地位 ; (4) 借鑑 Self 語言，使用基於原型 (prototype) 的繼承機制。

JavaScript能幹什麼

1. 常見的網頁效果【表單驗證，輪播圖。。。】

2. 與H5配合實現遊戲【水果忍者： 】

3. 實現應用級別的程式【】

4. 實現統計效果【】

5. 地理定位等功能【】

6. 線上學程式設計【】

7. js可以實現人工智慧【面部識別】

8. 。。。

JavaScript的組成

1. ECMASCRIPT: 定義了javascript的語法規範,描述了語言的基本語法和資料型別
2. BOM (Browser Object Model): 瀏覽器物件模型
- 有一套成熟的可以操作瀏覽器的 API，透過 BOM 可以操作瀏覽器。比如： 彈出框、瀏覽器跳轉、獲取解析度等
3. DOM (Document Object Model): 文件物件模型
- 有一套成熟的可以操作頁面元素的 API，透過 DOM 可以操作頁面中的元素。比如： 增加個 div，減少個 div，給div 換個位置等

總結：  JS 就是透過固定的語法去操作 瀏覽器 和 標籤結構 來實現網頁上的各種效果

JavaScript程式碼的書寫位置

·  和  css  一樣，我們的  js  也可以有多種方式書寫在頁面上讓其生效

·  js  也有多種方式書寫，分為  行內式 ，  內嵌式 ， 外鏈式

行內式 JS 程式碼（不推薦）

·  寫在標籤上的 js 程式碼需要依靠事件（行為）來觸發

// 我是 index.js 檔案 alert( '我是一個彈出層' )

 

<!-- 寫在 a 標籤的 href 屬性上 --> < a   href = "javascript:alert('我是一個彈出層');" > 點選一下試試 </ a >

<!-- 寫在其他元素上 --> < div   onclick = "alert('我是一個彈出層')" > 點一下試試看 </ div >

<!--     注：onclick 是一個事件（點選事件），當點選元素的時候執行後面的 js 程式碼-->

內嵌式 JS 程式碼

·  內嵌式的 js 程式碼會在頁面開啟的時候直接觸發

<!-- 在 html 頁面書寫一個 script 標籤，標籤內部書寫 js 程式碼 --> < script   type = "text/javascript" >

     alert( '我是一個彈出層' )</ script >

<!--     注：script 標籤可以放在 head 裡面也可以放在 body 裡面-->

外鏈式 JS 程式碼（推薦）

·  外鏈式 js 程式碼只要引入了 html 頁面，就會在頁面開啟的時候直接觸發

·  新建一個  .js  字尾的檔案，在檔案內書寫 js 程式碼，把寫好的 js 檔案引入 html 頁面

<!-- 我是一個 html 檔案 -->

<!-- 透過 script 標籤的 src 屬性，把寫好的 js 檔案引入頁面 --> < script   src = "index.js" ></ script >

<!-- 一個頁面可以引入多個 js 檔案 --> < script   src = "index1.js" ></ script >< script   src = "index2.js" ></ script >< script   src = "index3.js" ></ script >

JS 中的註釋

·  學習一個語言，先學習一個語言的註釋，因為註釋是給我們自己看的，也是給開發人員看的

·  寫好一個註釋，有利於我們以後閱讀程式碼

單行註釋

·  一般就是用來描述下面一行程式碼的作用

·  可以直接寫兩個  /  ，也可以按  ctrl + /

// 我是一個單行註釋 // 下面程式碼表示在瀏覽器裡面出現一個彈出層 alert( '我是一個彈出層' )

多行註釋

·  一般用來寫一大段話，或者註釋一段程式碼

·  可以直接寫  /**/  然後在兩個星號中間寫註釋，也可以按  shift + alt + a

/*    我是一個多行註釋*/ /*    註釋的程式碼不會執行    alert('我是一個彈出層')    alert('我是一個彈出層')*/ alert( '我是一個彈出層' )

變數（重點）

·  變數指的是在程式中儲存資料的一個容器

·  變數是計算機記憶體中儲存資料的識別符號，根據變數名稱可以獲取到記憶體中儲存的資料

·  也就是說，我們向記憶體中儲存了一個資料，然後要給這個資料起一個名字，為了是我們以後再次找到他

·  語法：  var 變數名 = 值

定義變數及賦值

// 定義一個變數 var   num; // 給一個變數賦值 num   =   100 ; // 定義一個變數的同時給其賦值 var   num2   =   200 ;

·  注意：

00001.  一個變數名只能儲存一個值

00002.  當再次給一個變數賦值的時候，前面一次的值就沒有了

00003.  變數名稱區分大小寫（JS 區分大小寫）

變數的命名規則和命名規範

·  規則： 必須遵守的，不遵守就是錯

00001.  一個變數名稱可以由  數字 、 字母 、 英文下劃線（_） 、 美元符號（$）  組成

00002.  嚴格區分大小寫

00003.  不能由數字開頭，不要使用中文漢字命名

00004.  不能是  保留字  或者  關鍵字

00005.  不要出現空格

 

·  規範： 建議遵守的（開發者預設），不遵守不會報錯

00001.  變數名儘量有意義（語義化）

00002.  遵循駝峰命名規則，由多個單片語成的時候，從第二個單詞開始首字母大寫

資料型別（重點）

·  是指我們儲存在記憶體中的資料的型別

·  我們通常分為兩大類  基本資料型別  和  複雜資料型別

基本資料型別

1、數值型別（number）

·  一切數字都是數值型別（包括二進位制，十進位制，十六進位制等）

·  NaN（not a number），一個非數字

2、字串型別（string）

·  被引號包裹的所有內容（可以是單引號也可以是雙引號）

3、布林型別（boolean）

·  只有兩個（true 或者 false）

4、null型別（null）

·  只有一個，就是 null，表示空的意思

5、undefined型別（undefined）

·  只有一個，就是 undefined，表示沒有值的意思

複雜資料型別

00001.  物件型別（object）

00002.  函式型別（function）

00003.  。。。

判斷資料型別

·  既然已經把資料分開了型別，那麼我們就要知道我們儲存的資料是一個什麼型別的資料

·  使用  typeof  關鍵字來進行判斷

// 第一種使用方式 var   n1   =   100 ;console.log( typeof   n1); // 第二種使用方式 var   s1   =   'abcdefg' ;console.log( typeof (s1));

判斷一個變數是不是數字

·  可以使用  isNaN  這個方法來判斷一個變數是不是數字

·  isNaN  ：is not a number

// 如果變數是一個數字 var   n1   =   100 ;console.log( isNaN (n1));   //=> false // 如果變數不是一個數字 var   s1   =   'Jack' console.log( isNaN (s1));   //=> true

資料型別轉換

·  資料型別之間的轉換，比如數字轉成字串，字串轉成布林，布林轉成數字等

其他資料型別轉成數值

1、 Number(變數)

·  可以把一個變數強制轉換成數值型別

·  可以轉換小數，會保留小數

·  可以轉換布林值

·  遇到不可轉換的都會返回 NaN

2、 parseInt(變數)

·  從第一位開始檢查，是數字就轉換，知道一個不是數字的內容

·  開頭就不是數字，那麼直接返回 NaN

·  不認識小數點，只能保留整數

3、 parseFloat(變數)

·  從第一位開始檢查，是數字就轉換，知道一個不是數字的內容

·  開頭就不是數字，那麼直接返回 NaN

·  認識一次小數點

4、除了加法以外的數學運算

·  運算子兩邊都是可運算數字才行

·  如果運算子任何一遍不是一個可運算數字，那麼就會返回 NaN

·  加法不可以用

其他資料型別轉成字串

1、 變數.toString()

·  有一些資料型別不能使用  toString()  方法，比如 undefined 和 null

2、 String(變數)

·  所有資料型別都可以

3、使用加法運算

·  在 JS 裡面， +  由兩個含義

·  字串拼接： 只要  +  任意一邊是字串，就會進行字串拼接

·  加法運算：只有  +  兩邊都是數字的時候，才會進行數學運算

其他資料型別轉成布林

00001.  Boolean(變數)

·  在 js 中，只有  '' 、 0 、 null 、 undefined 、 NaN ，這些是 false，其餘都是 true

運算子

·  就是在程式碼裡面進行運算的時候使用的符號，不光只是數學運算，我們在 js 裡面還有很多的運算方式

數學運算子

1、 +

·  只有符號兩邊都是數字的時候才會進行加法運算

·  只要符號任意一邊是字串型別，就會進行字串拼接

2、 -

·  會執行減法運算

·  會自動把兩邊都轉換成數字進行運算

3、 *

·  會執行乘法運算

·  會自動把兩邊都轉換成數字進行運算

4、 /

·  會執行除法運算

·  會自動把兩邊都轉換成數字進行運算

5、 %

·  會執行取餘運算

·  會自動把兩邊都轉換成數字進行運算

賦值運算子

1、 =

·  就是把  =  右邊的賦值給等號左邊的變數名

·  var num = 100

·  就是把 100 賦值給 num 變數

·  那麼 num 變數的值就是 100

2、 +=

var   a   =   10 ;a   +=   10 ;console.log(a);   //=> 20

·  a += 10  等價於  a = a + 10

3、 -=

var   a   =   10 ;a   -=   10 ;console.log(a);   //=> 0

·  a -= 10  等價於  a = a - 10

4、 *=

var   a   =   10 ;a   *=   10 ;console.log(a);   //=> 100

·  a *= 10  等價於  a = a * 10

5、 /+

var   a   =   10 ;a   /=   10 ;console.log(a);   //=> 1

·  a /= 10  等價於  a = a / 10

6、 %=

var   a   =   10 ;a   %=   10 ;console.log(a);   //=> 0

·  a %= 10  等價於  a = a % 10

比較運算子

1、 ==

·  比較符號兩邊的值是否相等，不管資料型別

·  1 == '1'

·  兩個的值是一樣的，所以得到 true

2、 ===

·  比較符號兩邊的值和資料型別是否都相等

·  1 === '1'

·  兩個值雖然一樣，但是因為資料型別不一樣，所以得到 false

3、 !=

·  比較符號兩邊的值是否不等

·  1 != '1'

·  因為兩邊的值是相等的，所以比較他們不等的時候得到 false

4、 !==

·  比較符號兩邊的資料型別和值是否不等

·  1 !== '1'

·  因為兩邊的資料型別確實不一樣，所以得到 true

5、 >=

·  比較左邊的值是否 大於或等於 右邊的值

·  1 >= 1  true

·  1 >= 0  true

·  1 >= 2  false

6、 <=

·  比較左邊的值是否 小於或等於 右邊的值

·  1 <= 2  true

·  1 <= 1  true

·  1 <= 0  false

7、 >

·  比較左邊的值是否 大於 右邊的值

·  1 > 0  true

·  1 > 1  false

·  1 > 2  false

8、 <

·  比較左邊的值是否 小於 右邊的值

·  1 < 2  true

·  1 < 1  false

·  1 < 0  false

邏輯運算子

1、 &&

·  進行 且 的運算

·  符號左邊必須為 true 並且右邊也是 true，才會返回 true

·  只要有一邊不是 true，那麼就會返回 false

·  true && true  true

·  true && false  false

·  false && true  false

·  false && false  false

2、 ||

·  進行 或 的運算

·  符號的左邊為 true 或者右邊為 true，都會返回 true

·  只有兩邊都是 false 的時候才會返回 false

·  true || true  true

·  true || false  true

·  false || true  true

·  false || false  false

3、 !

·  進行 取反 運算

·  本身是 true 的，會變成 false

·  本身是 false 的，會變成 true

·  !true  false

·  !false  true

自增自減運算子（一元運算子）

1、 ++

·  進行自增運算

·  分成兩種， 前置++  和  後置++

·  前置++，會先把值自動 +1，再返回

var   a   =   10 ;console.log( ++ a); // 會返回 11，並且把 a 的值變成 11

·  後置++，會先把值返回，在自動+1

var   a   =   10 ;console.log(a ++ ); // 會返回 10，然後把 a 的值變成 11

2、 --

·  進行自減運算

·  分成兩種， 前置--  和  後置--

·  和  ++  運算子道理一樣