文章目錄
1.初識JavaScript
1.1 JavaScript歷史
-
布蘭登-艾奇（Brendan Eich， 1961～）
-
艾奇在1995年10天內完成JavaScript設計
-
網景公司最初命名爲LiveScript，後來在與Sun合作之後將其改名爲JavaScript
1.2 JavaScript是什麼
-
JavaScript是世界上最流行的語言之一，是一種運行在客戶端的腳本語言（Script是腳本的意思）
-
腳本語言：不需要編譯，運行過程中由js解釋器(js引擎)逐行來進行解釋並執行
-
現在也可以基於Node.js技術進行服務器端編程
1.3 JavaScript的作用
- 表單動態校驗（密碼強度檢測）（JS產生的最初目的）
- 網頁特效
- 服務端開發（Node.js）
- 桌面程序（Electron）
- App（Cordova）
- 控制硬件-物聯網（Ruff）
- 遊戲開發（cocos2d-js）
1.4 HTML/CSS/JS的關係
HTML/CSS標記語言 – 描述類語言
-
HTML決定網頁結構和內容（決定看到什麼），相當於人的身體
-
CSS決定網頁呈現給用戶的模樣（決定好不好看），相當於給人穿衣服、化妝
JS腳本語言 – 編程類語言
- 實現業務邏輯和頁面控制（決定功能），相當於人的各種動作
1.5 瀏覽器執行JS簡介
瀏覽器分爲兩部分，渲染引擎和JS引擎
-
渲染引擎：用來解析HTML與CSS，俗稱內核，比如chrome瀏覽器的blink
-
JS引擎：也稱爲JS解釋器。用來讀取網頁中的JavaScript代碼，對其處理後運行，比如chrome瀏覽器的V8
瀏覽器本身並不會執行JS代碼，而是通過內置JavaScript引擎（解釋器）來執行JS代碼。JS引擎執行代碼時逐行解釋每一句源碼（轉換成機器語言），然後由計算機去執行，所以JavaScript語言歸於腳本語言，會逐行解釋執行。
1.6 JS的組成
1.6.1.ECMAScript
ECMAScript是由ECMA國際 （原歐洲計算機製造商協會）進行標準化的一門編程語言，這種語言在萬維網上應用廣泛，它往往被稱爲JavaScript或JScript，但實際上後兩者是ECMAScript語言的實現和擴展。
ECMAScript：ECMAScript規定了JS的編程語法和基礎核心知識，是所有瀏覽器廠商共同遵循的一套JS語法工業標準。
1.6.2.DOM — 文檔對象模型
文檔對象模型（Document Object Model， 簡稱DOM），是W3C組織推薦的處理可擴展標記語言的標準編程接口。通過DOM提供的接口可以對頁面上的各種元素進行操作（大小、位置、顏色等）。
1.6.3.BOM — 瀏覽器對象模型
BOM（Browser Object Model， 簡稱BOM）是指瀏覽器對象模型，它提供了獨立於內容的、可以與瀏覽器窗口進行互動的對象結構。通過BOM可以操作瀏覽器窗口，比如彈出框、控制瀏覽器跳轉、獲取分辨率等。
1.7 JS示例
JS有3種書寫位置，分別爲行內、內嵌和外部。
1.7.1 行內式 JS
<input type="button" value="try" oncilck="alert('hello world')" />
- 可以將單行或少量JS代碼寫在HTML標籤的事件屬性中（以on開頭的屬性），比如： onclick
- 注意單雙引號的使用：在HTML中我們推薦使用雙引號，JS中我們推薦使用單引號
- 可讀性差，在html中編寫大量JS代碼時，不方便閱讀
- 引號易錯，引號多層嵌套匹配時，非常容易混
- 特殊情況下使用
1.7.2 內嵌JS
<script>
alter('hello world');
</script>
- 可以將多行JS代碼寫到
1.7.3 外部JS文件
<script src="js_test.js"></script>
-
利於HTML頁面代碼結構化，把大段JS代碼獨立到HTML頁面之外，既美觀也方便文件級別的複用
-
引用外部js文件的script標籤中間不可以寫代碼
-
適合js代碼量比較大的情況
2. JavaScript基礎語法
2.1 JavaScript註釋
2.1.1 單行註釋
<script>
//alert('hello world'); 單行註釋
</script>
2.1.2 多行註釋
<script>
/*
alert('hello world');
alert('hello world');
alert('hello world'); 多行註釋
*/
</script>
2.2 JavaScript輸入輸出語句
爲了方便信息的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：
| 方法 | 說明 | 歸屬 |
|---|---|---|
| alert(msg) | 瀏覽器彈出警告框 | 瀏覽器 |
| console.log(msg) | 瀏覽器控制檯打印輸出信息 | 瀏覽器 |
| prompt(info) | 瀏覽器彈出輸入框，用戶可以輸入 | 瀏覽器 |
2.3 變量
2.3.1 變量概述
- 什麼是變量
變量是用於存放數據的容器。我們通過變量名獲取數據，甚至修改數據。
- 變量在內存中存儲
本質：變量是程序在內存中申請的一塊用來存放數據的空間。
2.3.2 變量的使用
變量在使用時分爲兩步：1.聲明變量 2.賦值
-
聲明變量
//聲明變量 var age；//聲明一個名稱爲age的變量- var是一個js關鍵字，用來聲明變量（variable：變量）。使用該關鍵字聲明變量後，計算機會自動爲變量分配內存空間、
- age是程序員定義的變量名，通過改變量名來訪問內存中分配的空間
-
賦值
age = 10; //給age這個變量賦值爲10- = 用來將右邊的值 賦給左邊的變量空間中
- 變量值是程序員保存到變量空間裏的值
-
變量的初始化
var age = 18;//聲明變量同時賦值爲18聲明一個變量並賦值，稱之爲變量的初始化。
2.3.3 變量語法擴展
-
更新變量
一個變量被重新賦值後，它原有的值會覆蓋，變量值將以最後一次賦的值爲準。
-
同時聲明多個變量時，只需要寫一個
var，多個變量名之間用,隔開var age = 10, name = 'lemon', sex = 'man'; -
聲明變量特殊情況
情況 說明 結果 var age;console.log(age); 只聲明 不賦值 undefined console.log(age); 不聲明 不賦值 直接使用 報錯 age = 10;console.log(age); 不聲明 只賦值 10
2.3.4 變量命名規範
- 由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號($)組成 ，如：usrAge,num01,__name
- 嚴格區分大小寫。var app; 和 var App;是兩個變量
- 不能 以數字開頭。19age是錯誤的
- 不能 是關鍵字、保留字。例如：var、for、while
- 變量名原則上必須有意義
- 遵守駝峯命名法，首字母小寫，後面單詞的首字母需要大寫。myNameIsBug
3. 數據類型
3.1 數據類型簡介
-
爲什麼需要數據類型
在計算機中，不用的數據所需佔用的存儲空間是不同的，爲了便於把數據分成內存大小不用的數據，充分利用存儲空間，於是定義了不同的數據類型。簡單來說，數據類型就是數據的類別型號。
-
變量的數據類型
變量是用來存儲值的容器，具有名字和數據類型。變量的數據類型決定了如何將代表這些值的位存儲到計算機的內存中。JavaScript是一種弱類型或者說動態語言。這意味着不用提前聲明變量的類型，在程序運行過程中，類型會被自動確定。
var age = 10; //數值類型 var name = 'lemon' //字符類型在代碼運行時，變量的數據類型是由JS引擎根據
=右邊變量值的數據類型來判斷的，運行完畢後，變量就確定了數據類型。JavaScript擁有動態類型，同時也意味着相同的變量可用作不同的類型：
var x = 10; //數值 var x = 'lemon' //字符 -
數據類型的分類
JS把數據類型分爲兩類：
- 簡單數據類型（Number,String,Boolean,Undefined,Null）
- 複雜數據類型（object）
3.2 簡單(基本)數據類型
JavaScript中的簡單數據類型及其說明如下：
| 簡單數據類型 | 說明 | 默認值 |
|---|---|---|
| Number | 數字型，包含 整型值和浮點型值，如21、0.21 | 0 |
| Boolean | 布爾值類型，如 true、false，等價於1和0 | false |
| String | 字符串類型 | “” |
| Undefined | var a;聲明瞭變量a但未賦值 ， a = undefined | undefined |
| Null | 空值 | null |
3.2.1 數字型 Number
JavaScript數字類型既可以用來保存整數值，也可以保存小數（浮點數）。
var age = 21; //整數
var Age = 21.3747; //浮點數
-
數字型進制
//八進制 在數字前加 0 表示八進制 var num = 010; // 010 -> 8 //十六進制 在數字前加 0x 表示十六進制 var num = 0xa; // 0xa -> 10 -
數字型範圍
-
JavaScript中數值的最大值和最小值
alert(Number.MAX_VALUE); //1.7976931348623157e+308 alert(Number.MIN_VALUE); //5e-324 -
數字型三個特殊值
alert(Infinity); alert(-Infinity); alert(NaN);- Infinity:代表無窮大，大於任何數值
- -Infinity：代表無窮小，小於任何數值
- NaN, Not a number， 代表一個非數值
-
isNaN() 判斷是否爲數字
console.log(isNaN(12));//false 是數字返回 false console.log(isNaN('lemon')) //true 非數值爲true
3.2.2 字符串型 String
字符串型爲引號中的任意文本，其語法爲雙引號""和單引號''
-
字符串引號嵌套
js可以用單引號嵌套雙引號，反之亦可,不能一單一雙使用
var strMsg = 'i love "u"'; var strMsg1 = "i love 'u'"; -
字符串轉義字符
轉義字符以
\開頭，常用如下：轉義符 解釋說明 \n 換行符 \ 斜槓 ’ 單引號 " 雙引號 \t tab \b 空格 -
字符串長度
字符串是由若干字符串組成的，字符的數量就是字符串的長度。通過字符串的
length屬性可以獲取整個字符串的長度var name = 'lemon'; console.log(name.length); // 5 -
字符串拼接
-
多個字符串之間可以使用
+進行拼接，其拼接方式爲 字符串 + 任意類型 = 新字符串 -
拼接前會將所有內容轉化爲字符串，在進行拼接
// string + string alert('hello ' + 'world'); // hello world // numberString alert('5' + '20'); // 520 // numberString + number alert('5' + 21); // 521
-
undefined 與數字相加 結果爲 NaN
3.3 獲取變量數據類型
typeof用來獲取檢測變量的數據類型
var num = 10;
console.log(typeof num); //number
console.log(typeof 'lemon'); //string
console.log(typeof true); //boolean
3.4 數據類型轉換
把一種數據類型的變量轉換成另外一種數據類型。
3.4.1 轉換爲字符串
-
toString()
var num = 1; alert(num.toString()); -
String()強制轉化
var num = 1; alert(String(num)); -
+拼接字符串
3.4.2 轉換爲數字型
以數字開頭的字符串
-
parseInt(string)函數
parseInt('520') -
parseFloat(string)函數
parseFloat("13.14") -
Number()強制轉換
3.4.3 轉換爲布爾型
Boolean()函數
代表空、否定的值會轉化爲false，如 ’‘、0、NaN、null、undefined
其餘值均爲true
4. 運算符
4.1 常用運算符
| 運算符 | 描述 |
|---|---|
| + | 加 |
| - | 減 |
| * | 乘 |
| / | 除 |
| % | 取餘（模） |
| ++ | 遞增 |
| – | 遞減 |
| < | 小於號 |
| > | 大於號 |
| >= | 大於等於號 |
| <= | 小於等於號 |
| ==（瞭解） | 判等號（會轉型） |
| != | 不等號 |
| === ! == | 全等 要求值 和 數據類型都一致 |
| && | 邏輯與 |
| || | 邏輯或 |
| ！ | 邏輯非 |
| = | 直接賦值 |
| +=、-= | 加等、減等 |
| *=、/=、%= |
4.2 運算符優先級
| 優先級 | 運算符 | 順序 |
|---|---|---|
| 1 | 括號 | () |
| 2 | 一元運算符 | ++ – ! |
| 3 | 算術運算符 | 先* / % 後+ - |
| 4 | 關係運算符 | > >= < <= |
| 5 | 相等運算符 | == != === ! == |
| 6 | 邏輯運算符 | 先&& 後 || |
| 7 | 賦值運算符 | = |
| 逗號運算符 | , |
5. 流程控制
5.1 流程控制
在一個程序執行的過程中，各條代碼的執行順序對程序的結果有直接影響。
簡單理解，流程控制就是來控制代碼的順序以達到目的
流程控制主要有三種結構，分別是順序結構、分支結構和循環結構
5.2 順序流程控制
順序結構是程序中最簡單、最基本的流程控制，他沒有特定的語法結構，程序會按照代碼的先後順序，一次執行，程序中大多數代碼都是這樣執行的。
5.3 分支流程控制if語句
由上到下執行代碼的過程中，根據不同的條件，執行不同的路徑代碼（執行代碼多選一的過程），從而得到不同的結果
js語言提供了兩種分支結構語句
- if 語句
- switch 語句
5.3.1 單分支語句
if(條件表達式){
//執行語句
}
if 條件表達式結果爲真true 則執行大括號中的執行語句；若條件表達式爲假 false 則不執行括號中的語句
5.3.2 雙分支語句
if(條件表達式){
//執行語句1
}else{
//執行語句2
}
條件表達式爲真 執行 執行語句1 ；爲假則執行 執行語句2 。最終只能執行一條語句
5.3.3 多分支語句
if(條件表達式1){
//執行語句1
}else if (條件表達式2){
//執行語句2
}else{
//其他語句
}
5.4 三元表達式 ? :
條件表達式 ? 表達式1 : 表達式2
條件表達式爲真 返回 表達式1 的值，否則 返回 表達式2 的值
5.5 分支流程控制switch語句
switch 語句是多分支語句，他用於不同的條件來執行不同的代碼。當要針對變量 設置一系列的特定值的選項時，就可以使用switch。
switch(表達式/變量){
case value1:
//語句1;
break;
case value2:
//語句2;
break;
case value3:
//語句3;
break;
...
case valuen:
//語句n;
break;
default:
//最後的語句
}
6. 循環
重複執行某些語句
在js中，主要有三種類型的循環語句：
- for 循環
- while 循環
- do while 循環
6.1 for循環
被重複執行的語句稱爲循環體
for (初始化變量; 條件表達式（終止條件）; 操作表達式){
//循環體
}
6.2 while循環
while(條件表達式){
//語句
}
6.3 do while循環
do {
//循環體
}while(條件表達式)
6.4 continue break
continue ： 跳出本次循環，進行下一次循環
break ： 跳出整個循環