01JavaScript入門

JS 的組成

image.png

ECMAScript

ECMAScript 是由ECMA 國際（原歐洲計算機制造商協(xié)會）進行標準化的一門編程語言添怔，這種語言在萬維網(wǎng)上應用廣泛，它往往被稱為 JavaScript或 JScript弟劲，但實際上后兩者是 ECMAScript 語言的實現(xiàn)和擴展。

image.png

DOM——文檔對象模型

? 文檔對象模型（DocumentObject Model姥芥，簡稱DOM）兔乞，是W3C組織推薦的處理可擴展標記語言的標準編程接口。通過 DOM 提供的接口可以對頁面上的各種元素進行操作（大小凉唐、位置庸追、顏色等）
BOM——瀏覽器對象模型

? 瀏覽器對象模型(Browser Object Model，簡稱BOM) 是指瀏覽器對象模型台囱，它提供了獨立于內(nèi)容的淡溯、可以與瀏覽器窗口進行互動的對象結(jié)構(gòu)。通過BOM可以操作瀏覽器窗口簿训，比如彈出框咱娶、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等强品。

JS 初體驗

行內(nèi)式

<input type="button" value="點我試試" onclick="alert('Hello World')" />

可以將單行或少量 JS 代碼寫在HTML標簽的事件屬性中（以 on 開頭的屬性）膘侮，如：onclick
注意單雙引號的使用：在HTML中我們推薦使用雙引號, JS 中我們推薦使用單引號
可讀性差，在html中編寫JS大量代碼時的榛，不方便閱讀琼了；
引號易錯，引號多層嵌套匹配時夫晌，非常容易弄混表伦；
特殊情況下使用

內(nèi)嵌式
```
<script>
    alert('Hello  World~!');
</script>
```
- 可以將多行JS代碼寫到 script 標簽中
- 內(nèi)嵌 JS 是學習時常用的方式
外部JS文件
```
<script src="my.js"></script>
```
- 利于HTML頁面代碼結(jié)構(gòu)化谦去，把大段 JS代碼獨立到 HTML 頁面之外，既美觀蹦哼，也方便文件級別的復用
- 引用外部 JS文件的 script 標簽中間不可以寫代碼
- 適合于JS 代碼量比較大的情況

4 - JavaScript注釋

flex子項目占的份數(shù)
align-self控制子項自己在側(cè)軸的排列方式
order屬性定義子項的排列順序（前后順序）

4.1 單行注釋

為了提高代碼的可讀性鳄哭，JS與CSS一樣，也提供了注釋功能纲熏。
JS中的注釋主要有兩種妆丘，分別是 單行注釋 和 多行注釋。

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

// 我是一行文字局劲，不想被 JS引擎 執(zhí)行勺拣，所以 注釋起來

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

4.2 多行注釋

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

/*
  獲取用戶年齡和姓名
  并通過提示框顯示出來
*/

/* */  用來注釋多行文字（ 默認快捷鍵  alt +  shift  + a ）

快捷鍵修改為： ctrl + shift + /

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

5 - JavaScript輸入輸出語句

為了方便信息的輸入輸出，JS中提供了一些輸入輸出語句鱼填，其常用的語句如下：

方法	說明	歸屬
alert(msg)	瀏覽器彈出警示框	瀏覽器
console.log(msg)	瀏覽器控制臺打印輸出信息	瀏覽器
prompt(info)	瀏覽器彈出輸入框药有，用戶可以輸入	瀏覽器

注意：alert() 主要用來顯示消息給用戶，console.log() 用來給程序員自己看運行時的消息苹丸。

6 - 變量的概念

6.1 什么是變量

白話：變量就是一個裝東西的盒子愤惰。

通俗：變量是用于存放數(shù)據(jù)的容器。我們通過變量名獲取數(shù)據(jù)赘理，甚至數(shù)據(jù)可以修改宦言。

image.png

### 6.2 變量在內(nèi)存中的存儲
本質(zhì)：變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間。類似我們酒店的房間商模，一個房間就可以看做是一個變量奠旺。

7 - 變量的使用

變量的聲明
變量的賦值

7.1 聲明變量

//  聲明變量  
var age; //  聲明一個 名稱為age 的變量

var 是一個 JS關(guān)鍵字，用來聲明變量( variable 變量的意思 )施流。使用該關(guān)鍵字聲明變量后响疚，計算機會自動為變量分配內(nèi)存空間，不需要程序員管
age 是程序員定義的變量名瞪醋，我們要通過變量名來訪問內(nèi)存中分配的空間

7.2 賦值

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

= 用來把右邊的值賦給左邊的變量空間中此處代表賦值的意思
變量值是程序員保存到變量空間里的值

7.3 變量的初始化

var age  = 18;  // 聲明變量同時賦值為 18
// 聲明一個變量并賦值忿晕， 我們稱之為變量的初始化。

7.4 變量語法擴展

更新變量

? 一個變量被重新復賦值后趟章，它原有的值就會被覆蓋杏糙，變量值將以最后一次賦的值為準。
```
var age = 18;

age = 81;   // 最后的結(jié)果就是81因為18 被覆蓋掉了          
```
同時聲明多個變量

? 同時聲明多個變量時蚓土，只需要寫一個 var宏侍，多個變量名之間使用英文逗號隔開。
```
var age = 10,  name = 'zs', sex = 2;       
```

聲明變量特殊情況

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

7.5 變量命名規(guī)范

規(guī)則：

由字母(A-Za-z)蜀漆、數(shù)字(0-9)谅河、下劃線(_)、美元符號( $ )組成，如：usrAge, num01, _name
嚴格區(qū)分大小寫绷耍。var app; 和 var App; 是兩個變量
不能以數(shù)字開頭吐限。 18age 是錯誤的
不能是關(guān)鍵字、保留字褂始。例如：var诸典、for、while
變量名必須有意義崎苗。 MMD BBD nl → age

image.png

8 - 數(shù)據(jù)類型

8.1 數(shù)據(jù)類型簡介

為什么需要數(shù)據(jù)類型

? 在計算機中狐粱，不同的數(shù)據(jù)所需占用的存儲空間是不同的，為了便于把數(shù)據(jù)分成所需內(nèi)存大小不同的數(shù)據(jù)胆数，充分利用存儲空間肌蜻，于是定義了不同的數(shù)據(jù)類型。
簡單來說必尼，數(shù)據(jù)類型就是數(shù)據(jù)的類別型號蒋搜。比如姓名“張三”，年齡18判莉，這些數(shù)據(jù)的類型是不一樣的豆挽。
變量的數(shù)據(jù)類型

? 變量是用來存儲值的所在處，它們有名字和數(shù)據(jù)類型骂租。變量的數(shù)據(jù)類型決定了如何將代表這些值的位存儲到計算機的內(nèi)存中祷杈。JavaScript 是一種弱類型或者說動態(tài)語言斑司。這意味著不用提前聲明變量的類型渗饮，在程序運行過程中，類型會被自動確定：
```
var age = 10;        // 這是一個數(shù)字型
var areYouOk = '是的';   // 這是一個字符串     
```
? 在代碼運行時宿刮，變量的數(shù)據(jù)類型是由 JS引擎根據(jù) = 右邊變量值的數(shù)據(jù)類型來判斷的互站，運行完畢之后，變量就確定了數(shù)據(jù)類型僵缺。JavaScript 擁有動態(tài)類型胡桃，同時也意味著相同的變量可用作不同的類型：
```
var x = 6;           // x 為數(shù)字
var x = "Bill";      // x 為字符串    
```
數(shù)據(jù)類型的分類

JS 把數(shù)據(jù)類型分為兩類：
- 簡單數(shù)據(jù)類型（Number,String,Boolean,Undefined,Null）
- 復雜數(shù)據(jù)類型（object)

8.2 簡單數(shù)據(jù)類型

簡單數(shù)據(jù)類型（基本數(shù)據(jù)類型）

JavaScript 中的簡單數(shù)據(jù)類型及其說明如下：

數(shù)字型 Number

? JavaScript 數(shù)字類型既可以保存整數(shù)，也可以保存小數(shù)(浮點數(shù)）磕潮。
```
var age = 21;       // 整數(shù)
var Age = 21.3747;  // 小數(shù)     
```
1. 數(shù)字型進制
  
  最常見的進制有二進制翠胰、八進制、十進制自脯、十六進制之景。
```
  // 1.八進制數(shù)字序列范圍：0~7
 var num1 = 07;   // 對應十進制的7
 var num2 = 019;  // 對應十進制的19
 var num3 = 08;   // 對應十進制的8
  // 2.十六進制數(shù)字序列范圍：0~9以及A~F
 var num = 0xA;   
```
  現(xiàn)階段我們只需要記住，在JS中八進制前面加0膏潮，十六進制前面加 0x
2. 數(shù)字型范圍
  
  JavaScript中數(shù)值的最大和最小值
  - 最大值：Number.MAX_VALUE锻狗，這個值為： 1.7976931348623157e+308
  - 最小值：Number.MIN_VALUE，這個值為：5e-32

數(shù)字型三個特殊值
- Infinity ，代表無窮大轻纪，大于任何數(shù)值
- -Infinity 油额，代表無窮小，小于任何數(shù)值
- NaN 刻帚，Not a number潦嘶，代表一個非數(shù)值
isNaN

用來判斷一個變量是否為非數(shù)字的類型，返回 true 或者 false

[圖片上傳失敗...(image-eb1c73-1603530263976)]

  var usrAge = 21;
var isOk = isNaN(userAge);
  console.log(isNum);          // false 崇众，21 不是一個非數(shù)字
var usrName = "andy";
  console.log(isNaN(userName));// true 衬以，"andy"是一個非數(shù)字

字符串型 String

? 字符串型可以是引號中的任意文本，其語法為雙引號 "" 和單引號''

var strMsg = "我愛北京天安門~";  // 使用雙引號表示字符串
var strMsg2 = '我愛吃豬蹄~';    // 使用單引號表示字符串
// 常見錯誤
var strMsg3 = 我愛大肘子;       // 報錯校摩，沒使用引號看峻，會被認為是js代碼，但js沒有這些語法

? 因為 HTML 標簽里面的屬性使用的是雙引號衙吩，JS 這里我們更推薦使用單引號互妓。

字符串引號嵌套

? JS 可以用單引號嵌套雙引號，或者用雙引號嵌套單引號 (外雙內(nèi)單坤塞，外單內(nèi)雙)

var strMsg = '我是"高帥富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帥富'程序猿";  // 也可以用"" 包含''
//  常見錯誤
var badQuotes = 'What on earth?"; // 報錯冯勉，不能 單雙引號搭配

字符串轉(zhuǎn)義符

? 類似HTML里面的特殊字符，字符串中也有特殊字符摹芙，我們稱之為轉(zhuǎn)義符灼狰。

? 轉(zhuǎn)義符都是 \ 開頭的，常用的轉(zhuǎn)義符及其說明如下：

轉(zhuǎn)義符	解釋說明
\n	換行符浮禾，n 是 newline 的意思
\ \	斜杠 \
'	' 單引號
"	”雙引號
\t	tab 縮進
\b	空格交胚，b 是 blank 的意思

字符串長度

? 字符串是由若干字符組成的，這些字符的數(shù)量就是字符串的長度盈电。通過字符串的 length 屬性可以獲取整個字符串的長度蝴簇。
```
var strMsg = "我是帥氣多金的程序猿！";
alert(strMsg.length); // 顯示 11
```
字符串拼接
- 多個字符串之間可以使用 + 進行拼接匆帚，其拼接方式為字符串 + 任何類型 = 拼接之后的新字符串
- 拼接前會把與字符串相加的任何類型轉(zhuǎn)成字符串熬词，再拼接成一個新的字符串
```
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 數(shù)值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 數(shù)值字符串 + 數(shù)值
alert('11' + 12);     // 1112 
```
  - + 號總結(jié)口訣：數(shù)值相加，字符相連
字符串拼接加強
```
console.log('pink老師' + 18);        // 只要有字符就會相連 
var age = 18;
console.log('pink老師age歲啦');      // 這樣不行哦
console.log('pink老師' + age);         // pink老師18
console.log('pink老師' + age + '歲啦'); // pink老師18歲啦
```
- 經(jīng)常會將字符串和變量來拼接吸重，變量可以很方便地修改里面的值
- 變量是不能添加引號的互拾，因為加引號的變量會變成字符串
- 如果變量兩側(cè)都有字符串拼接，口訣“引引加加 ”嚎幸，刪掉數(shù)字颜矿，變量寫加中間

布爾型Boolean

? 布爾類型有兩個值：true 和 false ，其中 true 表示真（對）鞭铆，而 false 表示假（錯）或衡。

? 布爾型和數(shù)字型相加的時候焦影， true 的值為 1 ，false 的值為 0封断。
```
console.log(true + 1);  // 2
console.log(false + 1); // 1
```

Undefined和 Null

? 一個聲明后沒有被賦值的變量會有一個默認值undefined ( 如果進行相連或者相加時斯辰，注意結(jié)果）

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

? 一個聲明變量給 null 值，里面存的值為空（學習對象時坡疼，我們繼續(xù)研究null)

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

8.3 獲取變量數(shù)據(jù)類型

獲取檢測變量的數(shù)據(jù)類型

? typeof 可用來獲取檢測變量的數(shù)據(jù)類型
```
var num = 18;
console.log(typeof num) // 結(jié)果 number      
```
? 不同類型的返回值

[圖片上傳失敗...(image-4056e6-1603530263976)]
字面量

? 字面量是在源代碼中一個固定值的表示法彬呻，通俗來說，就是字面量表示如何表達這個值柄瑰。
- 數(shù)字字面量：8, 9, 10
- 字符串字面量：'黑馬程序員', "大前端"
- 布爾字面量：true闸氮，false

8.4 數(shù)據(jù)類型轉(zhuǎn)換

? 什么是數(shù)據(jù)類型轉(zhuǎn)換？

? 使用表單教沾、prompt 獲取過來的數(shù)據(jù)默認是字符串類型的蒲跨，此時就不能直接簡單的進行加法運算，而需要轉(zhuǎn)換變量的數(shù)據(jù)類型授翻。通俗來說或悲，就是把一種數(shù)據(jù)類型的變量轉(zhuǎn)換成另一種數(shù)據(jù)類型，通常會實現(xiàn)3種方式的轉(zhuǎn)換：

轉(zhuǎn)換為字符串類型
轉(zhuǎn)換為數(shù)字型
轉(zhuǎn)換為布爾型

轉(zhuǎn)換為字符串

[圖片上傳失敗...(image-c7b6c4-1603530263976)]
- toString() 和 String() 使用方式不一樣堪唐。
- 三種轉(zhuǎn)換方式巡语，更多第三種加號拼接字符串轉(zhuǎn)換方式，這一種方式也稱之為隱式轉(zhuǎn)換淮菠。
轉(zhuǎn)換為數(shù)字型（重點）

[圖片上傳失敗...(image-adb0cc-1603530263976)]
- 注意 parseInt 和 parseFloat 單詞的大小寫男公，這2個是重點
- 隱式轉(zhuǎn)換是我們在進行算數(shù)運算的時候，JS 自動轉(zhuǎn)換了數(shù)據(jù)類型

轉(zhuǎn)換為布爾型

[圖片上傳失敗...(image-435364-1603530263976)]

代表空合陵、否定的值會被轉(zhuǎn)換為 false 枢赔，如 ''、0曙寡、NaN糠爬、null寇荧、undefined

其余值都會被轉(zhuǎn)換為 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

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

9.1 概述

計算機不能直接理解任何除機器語言以外的語言举庶，所以必須要把程序員所寫的程序語言翻譯成機器語言才能執(zhí)行程序。程序語言翻譯成機器語言的工具揩抡，被稱為翻譯器户侥。

image.png

翻譯器翻譯的方式有兩種：一個是編譯，另外一個是解釋峦嗤。兩種方式之間的區(qū)別在于翻譯的時間點不同
編譯器是在代碼執(zhí)行之前進行編譯蕊唐，生成中間代碼文件
解釋器是在運行時進行及時解釋，并立即執(zhí)行(當編譯器以解釋方式運行的時候烁设，也稱之為解釋器)

執(zhí)行過程

image.png

類似于請客吃飯：
編譯語言：首先把所有菜做好替梨，才能上桌吃飯
解釋語言：好比吃火鍋钓试，邊吃邊涮，同時進行

10 - 關(guān)鍵字和保留字

10.1 標識符

標識(zhi)符：就是指開發(fā)人員為變量副瀑、屬性弓熏、函數(shù)、參數(shù)取的名字糠睡。

標識符不能是關(guān)鍵字或保留字挽鞠。

10.2 關(guān)鍵字

關(guān)鍵字：是指 JS本身已經(jīng)使用了的字筷转，不能再用它們充當變量名磅摹、方法名。

包括：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 等。

10.3 保留字

保留字：實際上就是預留的“關(guān)鍵字”排拷，意思是現(xiàn)在雖然還不是關(guān)鍵字侧漓，但是未來可能會成為關(guān)鍵字，同樣不能使用它們當變量名或方法名监氢。
包括：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 等。
注意：如果將保留字用作變量名或函數(shù)名呀洲，那么除非將來的瀏覽器實現(xiàn)了該保留字紊选，否則很可能收不到任何錯誤消息。當瀏覽器將其實現(xiàn)后两嘴，該單詞將被看做關(guān)鍵字丛楚，如此將出現(xiàn)關(guān)鍵字錯誤。

01JavaScript入門

JS 的組成

ECMAScript

DOM——文檔對象模型

BOM——瀏覽器對象模型

JS 初體驗

4 - JavaScript注釋

4.1 單行注釋

4.2 多行注釋

5 - JavaScript輸入輸出語句

6 - 變量的概念

6.1 什么是變量

7 - 變量的使用

7.1 聲明變量

7.2 賦值

7.3 變量的初始化

7.4 變量語法擴展

7.5 變量命名規(guī)范

8 - 數(shù)據(jù)類型

8.1 數(shù)據(jù)類型簡介

8.2 簡單數(shù)據(jù)類型

8.3 獲取變量數(shù)據(jù)類型

8.4 數(shù)據(jù)類型轉(zhuǎn)換

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

9.1 概述

執(zhí)行過程

10 - 關(guān)鍵字和保留字

10.1 標識符

10.2 關(guān)鍵字

10.3 保留字