JS基礎篇1--初始js

阿新 • • 發佈：2021-10-13

1 - 初始JavaScript

1.1 JavaScript 是什麼

布蘭登·艾奇（Brendan Eich，1961年～）。神奇的大哥用10天完成 JavaScript 設計。最初命名為 LiveScript，後來在與 Sun 合作之後將其改名為 JavaScript。

JavaScript 是世界上最流行的語言之一，是一種執行在客戶端的指令碼語言（Script 是指令碼的意思）
指令碼語言：不需要編譯，執行過程中由 js 直譯器( js 引擎）逐行來進行解釋並執行
現在也可以基於 Node.js 技術進行伺服器端程式設計

1.2 JavaScript的作用

表單動態校驗（密碼強度檢測）（ JS 產生最初的目的）
網頁特效
服務端開發(Node.js)
桌面程式(Electron)
App(Cordova)
控制硬體-物聯網(Ruff)
遊戲開發(cocos2d-js)

1.4 瀏覽器執行 JS 簡介

瀏覽器分成兩部分：渲染引擎和 JS 引擎

渲染引擎	用來解析HTML與CSS，俗稱核心，比如 chrome 瀏覽器的 blink ，老版本的 webkit
JS 引擎	也稱為 JS 直譯器。用來讀取網頁中的JavaScript程式碼，對其處理後執行，比如 chrome 瀏覽器的 V8

瀏覽器本身並不會執行JS程式碼，而是通過內建 JavaScript 引擎(直譯器) 來執行 JS 程式碼 。JS 引擎執行程式碼時逐行解釋每一句原始碼（轉換為機器語言），然後由計算機去執行，所以 JavaScript 語言歸為指令碼語言，會逐行解釋執行。

1.5 JS 的組成

ECMAScript

ECMAScript 是由ECMA 國際（原歐洲計算機制造商協會）進行標準化的一門程式語言，這種語言在全球資訊網上應用廣泛，它往往被稱為 JavaScript或 JScript，但實際上後兩者是 ECMAScript 語言的實現和擴充套件。

ECMAScript：規定了JS的程式設計語法和基礎核心知識，是所有瀏覽器廠商共同遵守的一套JS語法工業標準。

更多參看MDN: MDN手冊

DOM——文件物件模型

文件物件模型（DocumentObject Model，簡稱DOM），是W3C組織推薦的處理可擴充套件標記語言的標準程式設計介面。通過 DOM 提供的介面可以對頁面上的各種元素進行操作（大小、位置、顏色等）
BOM——瀏覽器物件模型

瀏覽器物件模型(Browser Object Model，簡稱BOM) 是指瀏覽器物件模型，它提供了獨立於內容的、可以與瀏覽器視窗進行互動的物件結構。通過BOM可以操作瀏覽器視窗，比如彈出框、控制瀏覽器跳轉、獲取解析度等。

1.6 JS 初體驗

JS 有3種書寫位置，分別為行內、內嵌和外部。

行內式
```
<input type="button" value="點我試試" onclick="alert('Hello World')" />
```
- 可以將單行或少量 JS 程式碼寫在HTML標籤的事件屬性中（以 on 開頭的屬性），如：onclick
- 注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
- 可讀性差，在html中編寫JS大量程式碼時，不方便閱讀；
- 引號易錯，引號多層巢狀匹配時，非常容易弄混；
- 特殊情況下使用
內嵌式
```
<script>
    alert('Hello  World~!');
</script>
```
- 可以將多行JS程式碼寫到 <script> 標籤中
- 內嵌 JS 是學習時常用的方式
外部JS檔案
```
<script src="my.js"></script>
```
- 利於HTML頁面程式碼結構化，把大段 JS程式碼獨立到 HTML 頁面之外，既美觀，也方便檔案級別的複用
- 引用外部 JS檔案的 script 標籤中間不可以寫程式碼
- 適合於JS 程式碼量比較大的情況

2 - JavaScript註釋

2.1 單行註釋

為了提高程式碼的可讀性，JS與CSS一樣，也提供了註釋功能。

JS中的註釋主要有兩種，分別是**單行註釋**和**多行註釋**。

單行註釋的註釋方式如下：

// 我是一行文字，不想被 JS引擎 執行，所以 註釋起來

**//**  用來註釋單行文字（  快捷鍵   ctrl  +  /   ）

2.2 多行註釋

多行註釋的註釋方式如下：

/*
  獲取使用者年齡和姓名
  並通過提示框顯示出來
*/

/* */ 用來註釋多行文字（預設快捷鍵 alt + shift + a ）
快捷鍵修改為： ctrl + shift + /

vscode → 首選項按鈕 → 鍵盤快捷方式 → 查詢原來的快捷鍵 → 修改為新的快捷鍵 → 回車確認

3 - JavaScript輸入輸出語句

為了方便資訊的輸入輸出，JS中提供了一些輸入輸出語句，其常用的語句如下：

方法	說明	歸屬
alert(msg)	瀏覽器彈出警示框	瀏覽器
console.log(msg)	瀏覽器控制檯列印輸出資訊	瀏覽器
prompt(info)	瀏覽器彈出輸入框，使用者可以輸入	瀏覽器

注意：alert() 主要用來顯示訊息給使用者，console.log() 用來給程式設計師自己看執行時的訊息。

4 - 變數的概念

4.1 什麼是變數

白話：變數就是一個裝東西的盒子。

通俗：變數是用於存放資料的容器。我們通過變數名獲取資料，甚至資料可以修改。

4.2 變數在記憶體中的儲存

本質：變數是程式在記憶體中申請的一塊用來存放資料的空間。類似我們酒店的房間，一個房間就可以看做是一個變數。

5 - 變數的使用

變數的宣告
變數的賦值

5.1 宣告變數

//  宣告變數  
var age; //  宣告一個 名稱為age 的變數

var 是一個 JS關鍵字，用來宣告變數( variable 變數的意思 )。使用該關鍵字宣告變數後，計算機會自動為變數分配記憶體空間，不需要程式設計師管
age 是程式設計師定義的變數名，我們要通過變數名來訪問記憶體中分配的空間

5.2 賦值

age = 10; // 給 age  這個變數賦值為 10

= 用來把右邊的值賦給左邊的變數空間中此處代表賦值的意思
變數值是程式設計師儲存到變數空間裡的值

5.3 變數的初始化

var age  = 18;  // 宣告變數同時賦值為 18

宣告一個變數並賦值， 我們稱之為變數的初始化。

5.4 變數語法擴充套件

更新變數

一個變數被重新復賦值後，它原有的值就會被覆蓋，變數值將以最後一次賦的值為準。
```
var age = 18;

age = 81;   // 最後的結果就是81因為18 被覆蓋掉了          
```
同時宣告多個變數

同時宣告多個變數時，只需要寫一個 var，多個變數名之間使用英文逗號隔開。
```
var age = 10,  name = 'zs', sex = 2;       
```

宣告變數特殊情況

情況	說明	結果
var age ; console.log (age);	只宣告不賦值	undefined
console.log(age)	不宣告不賦值直接使用	報錯
age = 10; console.log (age);	不宣告只賦值	10

5.5 變數命名規範

規則
由字母(A-Za-z)、數字(0-9)、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
嚴格區分大小寫。var app; 和 var App; 是兩個變數
不能以數字開頭。 18age 是錯誤的
不能是關鍵字、保留字。例如：var、for、while
變數名必須有意義。 MMD BBD nl → age
遵守駝峰命名法。首字母小寫，後面單詞的首字母需要大寫。 myFirstName

6 - 資料型別

6.1 資料型別簡介

為什麼需要資料型別

在計算機中，不同的資料所需佔用的儲存空間是不同的，為了便於把資料分成所需記憶體大小不同的資料，充分利用儲存空間，於是定義了不同的資料型別。
簡單來說，資料型別就是資料的類別型號。比如姓名“張三”，年齡18，這些資料的型別是不一樣的。
變數的資料型別

變數是用來儲存值的所在處，它們有名字和資料型別。變數的資料型別決定了如何將代表這些值的位儲存到計算機的記憶體中。JavaScript 是一種弱型別或者說動態語言。這意味著不用提前宣告變數的型別，在程式執行過程中，型別會被自動確定。
```
var age = 10;        // 這是一個數字型
var areYouOk = '是的';   // 這是一個字串     
```
在程式碼執行時，變數的資料型別是由 JS引擎根據 = 右邊變數值的資料型別來判斷的，執行完畢之後，變數就確定了資料型別。

JavaScript 擁有動態型別，同時也意味著相同的變數可用作不同的型別：
```
var x = 6;           // x 為數字
var x = "Bill";      // x 為字串    
```
資料型別的分類

JS 把資料型別分為兩類：
- 簡單資料型別（Number,String,Boolean,Undefined,Null）
- 複雜資料型別（object)

6.2 簡單資料型別

簡單資料型別（基本資料型別）

JavaScript 中的簡單資料型別及其說明如下：

數字型 Number

JavaScript 數字型別既可以用來儲存整數值，也可以儲存小數(浮點數）。
```
var age = 21;       // 整數
var Age = 21.3747;  // 小數     
```
1. 數字型進位制
  
  最常見的進位制有二進位制、八進位制、十進位制、十六進位制。
```
  // 1.八進位制數字序列範圍：0~7
 var num1 = 07;   // 對應十進位制的7
 var num2 = 019;  // 對應十進位制的19
 var num3 = 08;   // 對應十進位制的8
  // 2.十六進位制數字序列範圍：0~9以及A~F
 var num = 0xA;   
```
  現階段我們只需要記住，在JS中八進位制前面加0，十六進位制前面加 0x
2. 數字型範圍
  
  JavaScript中數值的最大和最小值
```
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
```
  - 最大值：Number.MAX_VALUE，這個值為： 1.7976931348623157e+308
  - 最小值：Number.MIN_VALUE，這個值為：5e-32
3. 數字型三個特殊值
```
alert(Infinity);  // Infinity
alert(-Infinity); // -Infinity
alert(NaN);       // NaN
```
  - Infinity ，代表無窮大，大於任何數值
  - -Infinity ，代表無窮小，小於任何數值
  - NaN ，Not a number，代表一個非數值
4. isNaN
  
  用來判斷一個變數是否為非數字的型別，返回 true 或者 false
```
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum);            // false ，21 不是一個非數字
var usrName = "andy";
console.log(isNaN(userName));  // true ，"andy"是一個非數字
```
字串型 String

字串型可以是引號中的任意文字，其語法為雙引號 "" 和單引號''
```
var strMsg = "我愛北京天安門~";  // 使用雙引號表示字串
var strMsg2 = '我愛吃豬蹄~';    // 使用單引號表示字串
// 常見錯誤
var strMsg3 = 我愛大肘子;       // 報錯，沒使用引號，會被認為是js程式碼，但js沒有這些語法
```
因為 HTML 標籤裡面的屬性使用的是雙引號，JS 這裡我們更推薦使用單引號。
1. 字串引號巢狀
  
  JS 可以用單引號巢狀雙引號，或者用雙引號巢狀單引號 (外雙內單，外單內雙)
```
var strMsg = '我是"高帥富"程式猿';   // 可以用''包含""
var strMsg2 = "我是'高帥富'程式猿";  // 也可以用"" 包含''
//  常見錯誤
var badQuotes = 'What on earth?"; // 報錯，不能 單雙引號搭配
```
2. 字串轉義符
  
  類似HTML裡面的特殊字元，字串中也有特殊字元，我們稱之為轉義符。
  
  轉義符都是 \ 開頭的，常用的轉義符及其說明如下：
  
  轉義符解釋說明
  
  \n 換行符，n 是 newline 的意思
  
  \ \ 斜槓 \
  
  ' ' 單引號
  
  " ”雙引號
  
  \t tab 縮排
  
  \b 空格，b 是 blank 的意思
3. 字串長度
  
  字串是由若干字元組成的，這些字元的數量就是字串的長度。通過字串的 length 屬性可以獲取整個字串的長度。
```
var strMsg = "我是帥氣多金的程式猿！";
alert(strMsg.length); // 顯示 11
```
4. 字串拼接
  - 多個字串之間可以使用 + 進行拼接，其拼接方式為字串 + 任何型別 = 拼接之後的新字串
  - 拼接前會把與字串相加的任何型別轉成字串，再拼接成一個新的字串
```
//1.1 字串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 數值字串 "相加"
alert('100' + '100'); // 100100
//1.3 數值字串 + 數值
alert('11' + 12);     // 1112 
```
    - + 號總結口訣：數值相加，字元相連
5. 字串拼接加強
```
console.log('pink老師' + 18);           // 只要有字元就會相連 
var age = 18;
// console.log('pink老師age歲啦');       // 這樣不行哦
console.log('pink老師' + age);          // pink老師18
console.log('pink老師' + age + '歲啦');  // pink老師18歲啦
```
  - 經常會將字串和變數來拼接，變數可以很方便地修改裡面的值
  - 變數是不能新增引號的，因為加引號的變數會變成字串
  - 如果變數兩側都有字串拼接，口訣“引引加加 ”，刪掉數字，變數寫加中間
布林型Boolean

布林型別有兩個值：true 和 false ，其中 true 表示真（對），而 false 表示假（錯）。

布林型和數字型相加的時候， true 的值為 1 ，false 的值為 0。
```
console.log(true + 1);  // 2
console.log(false + 1); // 1
```

轉義符	解釋說明
\n	換行符，n 是 newline 的意思
\ \	斜槓 \
'	' 單引號
"	”雙引號
\t	tab 縮排
\b	空格，b 是 blank 的意思

Undefined和 Null

一個聲明後沒有被賦值的變數會有一個預設值undefined ( 如果進行相連或者相加時，注意結果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一個宣告變數給 null 值，裡面存的值為空（學習物件時，我們繼續研究null)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

6.3 獲取變數資料型別

獲取檢測變數的資料型別

typeof 可用來獲取檢測變數的資料型別
```
var num = 18;
console.log(typeof num) // 結果 number      
```
不同型別的返回值

字面量

字面量是在原始碼中一個固定值的表示法，通俗來說，就是字面量表示如何表達這個值。
- 數字字面量：8, 9, 10
- 字串字面量：'黑馬程式設計師', "大前端"
- 布林字面量：true，false

6.4 資料型別轉換

什麼是資料型別轉換

使用表單、prompt 獲取過來的資料預設是字串型別的，此時就不能直接簡單的進行加法運算，而需要轉換變數的資料型別。通俗來說，就是把一種資料型別的變數轉換成另外一種資料型別。

通常會實現3種方式的轉換：
- 轉換為字串型別
- 轉換為數字型
- 轉換為布林型
轉換為字串

toString() 和 String() 使用方式不一樣。
三種轉換方式，更多第三種加號拼接字串轉換方式，這一種方式也稱之為隱式轉換。
轉換為數字型（重點）

注意 parseInt 和 parseFloat 單詞的大小寫，這2個是重點
隱式轉換是我們在進行算數運算的時候，JS 自動轉換了資料型別
轉換為布林型

代表空、否定的值會被轉換為 false ，如 ''、0、NaN、null、undefined

其餘值都會被轉換為 true

console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

7 - 解釋型語言和編譯型語言

7.1 概述

計算機不能直接理解任何除機器語言以外的語言，所以必須要把程式設計師所寫的程式語言翻譯成機器語言才能執行程式。程式語言翻譯成機器語言的工具，被稱為翻譯器。

翻譯器翻譯的方式有兩種：一個是編譯，另外一個是解釋。兩種方式之間的區別在於翻譯的時間點不同
編譯器是在程式碼執行之前進行編譯，生成中間程式碼檔案
直譯器是在執行時進行及時解釋，並立即執行(當編譯器以解釋方式執行的時候，也稱之為直譯器)

7.2 執行過程

類似於請客吃飯：

	編譯語言：首先把所有菜做好，才能上桌吃飯

	解釋語言：好比吃火鍋，邊吃邊涮，同時進行

8 - 關鍵字和保留字

8.1 識別符號

標識(zhi)符：就是指開發人員為變數、屬性、函式、引數取的名字。

識別符號不能是關鍵字或保留字。

8.2 關鍵字

關鍵字：是指 JS本身已經使用了的字，不能再用它們充當變數名、方法名。

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

8.3 保留字

保留字：實際上就是預留的“關鍵字”，意思是現在雖然還不是關鍵字，但是未來可能會成為關鍵字，同樣不能使用它們當變數名或方法名。

包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。

注意：如果將保留字用作變數名或函式名，那麼除非將來的瀏覽器實現了該保留字，否則很可能收不到任何錯誤訊息。當瀏覽器將其實現後，該單詞將被看做關鍵字，如此將出現關鍵字錯誤。