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)，它看上去極可能成爲將來的主宰。

1. 網景公司動了心，決定與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配合實現遊戲【水果忍者： http://www.jq22.com/demo/html...】

3. 實現應用級別的程序【http://naotu.baidu.com】

4. 實現統計效果【http://echarts.baidu.com/exam...】

5. 地理定位等功能【http://lbsyun.baidu.com/jsdem..._5】

6. 在線學編程【https://codecombat.163.com/play/】

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;

· 注意：

1. 一個變量名只能存儲一個值
2. 當再次給一個變量賦值的時候，前面一次的值就沒有了
3. 變量名稱區分大小寫（JS 區分大小寫）

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

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

1. 一個變量名稱能夠由 數字、字母、英文下劃線（_）、美圓符號（$） 組成
2. 嚴格區分大小寫
3. 不能由數字開頭，不要使用中文漢字命名
4. 不能是 保留字 或者 關鍵字
5. 不要出現空格

· 規範： 建議遵照的（開發者默認），不遵照不會報錯

1. 變量名儘可能有意義（語義化）
2. 遵循駝峯命名規則，由多個單詞組成的時候，從第二個單詞開始首字母大寫

數據類型（重點）

· 是指咱們存儲在內存中的數據的類型

· 咱們一般分爲兩大類 基本數據類型 和 複雜數據類型

基本數據類型

一、數值類型（number）

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

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

二、字符串類型（string）

· 被引號包裹的全部內容（能夠是單引號也能夠是雙引號）

三、布爾類型（boolean）

· 只有兩個（true 或者 false）

四、null類型（null）

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

五、undefined類型（undefined）

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

複雜數據類型

1. 對象類型（object）
2. 函數類型（function）
3. 。。。

判斷數據類型

· 既然已經把數據分開了類型，那麼咱們就要知道咱們存儲的數據是一個什麼類型的數據

· 使用 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

數據類型轉換

· 數據類型之間的轉換，好比數字轉成字符串，字符串轉成布爾，布爾轉成數字等

其餘數據類型轉成數值

一、Number(變量)

· 能夠把一個變量強制轉換成數值類型

· 能夠轉換小數，會保留小數

· 能夠轉換布爾值

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

二、parseInt(變量)

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

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

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

三、parseFloat(變量)

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

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

· 認識一次小數點

四、除了加法之外的數學運算

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

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

· 加法不能夠用

其餘數據類型轉成字符串

一、變量.toString()

· 有一些數據類型不能使用 toString() 方法，好比 undefined 和 null

二、String(變量)

· 全部數據類型均可以

三、使用加法運算

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

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

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

其餘數據類型轉成布爾

1. Boolean(變量)

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

運算符

· 就是在代碼裏面進行運算的時候使用的符號，不光只是數學運算，咱們在 js 裏面還有不少的運算方式

數學運算符

一、+

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

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

二、-

· 會執行減法運算

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

三、*

· 會執行乘法運算

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

四、/

· 會執行除法運算

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

五、%

· 會執行取餘運算

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

賦值運算符

一、=

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

· var num = 100

· 就是把 100 賦值給 num 變量

· 那麼 num 變量的值就是 100

二、+=

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

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

三、-=

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

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

四、*=

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

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

五、/+

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

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

六、%=

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

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

比較運算符

一、==

· 比較符號兩邊的值是否相等，無論數據類型

· 1 == '1'

· 兩個的值是同樣的，因此獲得 true

二、===

· 比較符號兩邊的值和數據類型是否都相等

· 1 === '1'

· 兩個值雖然同樣，可是由於數據類型不同，因此獲得 false

三、!=

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

· 1 != '1'

· 由於兩邊的值是相等的，因此比較他們不等的時候獲得 false

四、!==

· 比較符號兩邊的數據類型和值是否不等

· 1 !== '1'

· 由於兩邊的數據類型確實不同，因此獲得 true

五、>=

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

· 1 >= 1 true

· 1 >= 0 true

· 1 >= 2 false

六、<=

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

· 1 <= 2 true

· 1 <= 1 true

· 1 <= 0 false

七、>

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

· 1 > 0 true

· 1 > 1 false

· 1 > 2 false

八、<

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

· 1 < 2 true

· 1 < 1 false

· 1 < 0 false

邏輯運算符

一、&&

· 進行 且 的運算

· 符號左邊必須爲 true 而且右邊也是 true，纔會返回 true

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

· true && true true

· true && false false

· false && true false

· false && false false

二、||

· 進行 或 的運算

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

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

· true || true true

· true || false true

· false || true true

· false || false false

三、!

· 進行 取反 運算

· 自己是 true 的，會變成 false

· 自己是 false 的，會變成 true

· !true false

· !false true

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

一、++

· 進行自增運算

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

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

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

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

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

二、--

· 進行自減運算

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

· 和 ++ 運算符道理同樣