js第一天

一、JavaScript
js是一種通常運(yùn)行在瀏覽器的腳本編程語(yǔ)言溜宽，前端唯一的語(yǔ)言

二、js的組成

1.ECMAScript-JavaScript語(yǔ)言基礎(chǔ)

2.Web APIs

2.1-DOM：document object model（頁(yè)面文檔對(duì)象模型--瀏覽器幫我們實(shí)體化的一個(gè)對(duì)象：document）
2.2-BOM: browser object model（瀏覽器對(duì)象模型--瀏覽器幫我們實(shí)體化的一個(gè)對(duì)象：browser）

3. 作用（做什么腥沽？）

監(jiān)聽(tīng)用戶(hù)的行為诞吱，并讓網(wǎng)頁(yè)作出對(duì)應(yīng)的反饋
網(wǎng)頁(yè)特效（動(dòng)畫(huà)效果）
表單驗(yàn)證 (針對(duì)表單數(shù)據(jù)的合法性進(jìn)行判斷)
數(shù)據(jù)交互 (獲取后臺(tái)的數(shù)據(jù), 渲染到前端)
服務(wù)端編程 (node.js)

JavaScript的組成（有什么耘擂？）

ECMAScript規(guī)范:
規(guī)定了js基礎(chǔ)語(yǔ)法核心知識(shí)淡诗。
比如：變量缭保、分支語(yǔ)句痘番、循環(huán)語(yǔ)句捉片、對(duì)象等等
Web APIs(可操作的實(shí)體對(duì)象) :
DOM： 操作文檔，比如對(duì)頁(yè)面元素進(jìn)行移動(dòng)汞舱、大小伍纫、添加刪除等操作
BOM： 操作瀏覽器，比如頁(yè)面彈窗昂芜，檢測(cè)窗口寬度莹规、存儲(chǔ)數(shù)據(jù)到瀏覽器等等
注意 DOM屬于BOM
DOM：document object model （瀏覽器幫我們實(shí)體化為了一個(gè)對(duì)象：document）
BOM：browser object model（瀏覽器幫我們實(shí)體化為了一個(gè)對(duì)象：window）

權(quán)威網(wǎng)站： MDN

JavaScript 書(shū)寫(xiě)位置

目標(biāo)：知道如何向頁(yè)面添加 JavaScript

1. -內(nèi)聯(lián) JavaScript

代碼寫(xiě)在標(biāo)簽內(nèi)部
語(yǔ)法：

注意： 此處作為了解即可，我們并不推薦泌神，但是后面vue中會(huì)看到這種使用模式

2. -內(nèi)部 JavaScript

直接寫(xiě)在html文件里良漱，用script標(biāo)簽包住
規(guī)范：script標(biāo)簽寫(xiě)在</body>上面

原因一：JavaScript如果 期望修改其下方的 html， 那么它可能由于 html 尚未被加載而失效

原因二：因?yàn)閟cript可能會(huì)修改dom元素欢际，那么繼續(xù)解析文檔沒(méi)有多大意義母市，為了提升性能，瀏覽器會(huì)阻塞文檔解析

拓展： alert(‘你好损趋，js’) 頁(yè)面彈出警告對(duì)話(huà)框

注意事項(xiàng)

js書(shū)寫(xiě)位置患久，應(yīng)該在所有的html標(biāo)簽元素之后
我們將 <script> 放在HTML文件的底部附近的原因是瀏覽器會(huì)按照代碼在文件中的順序加載 HTML。
如果先加載的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加載而失效蒋失。
因此返帕，將 JavaScript 代碼放在 HTML頁(yè)面的底部附近通常是最好的策略。

3. -外部 JavaScript

代碼寫(xiě)在以.js結(jié)尾的文件里
語(yǔ)法：通過(guò)script標(biāo)簽高镐，引入到html頁(yè)面中溉旋。

注意事項(xiàng)

1. script標(biāo)簽中間無(wú)需寫(xiě)代碼，否則會(huì)被忽略嫉髓！
2. 外部JavaScript會(huì)使代碼更加有序观腊，更易于復(fù)用，且沒(méi)有了腳本的混合算行，HTML 也會(huì)更加易讀梧油，因此這是個(gè)好的習(xí)慣。

JavaScript 注釋

注釋是編寫(xiě)程序時(shí)州邢，寫(xiě)程序的人給一個(gè)語(yǔ)句儡陨、程序段、函數(shù)等的解釋或提示量淌，能提高程序代碼的可讀性骗村。注釋只是為了提高可讀性，不會(huì)被計(jì)算機(jī)編譯
1.單行注釋
符號(hào)：//
作用：//右邊這一行的代碼會(huì)被忽略
快捷鍵：ctrl + /
2.塊注釋
符號(hào)：/* /
作用：在/ 和 */ 之間的所有內(nèi)容都會(huì)被忽略

JavaScript 結(jié)束符

1.結(jié)束符
代表語(yǔ)句結(jié)束
英文分號(hào) ;
可寫(xiě)可不寫(xiě)（現(xiàn)在不寫(xiě)結(jié)束符的程序員越來(lái)越多）
換行符（回車(chē)）會(huì)被識(shí)別成結(jié)束符 ,所以一個(gè)完整的語(yǔ)句呀枢，不要手動(dòng)換行
因此在實(shí)際開(kāi)發(fā)中有許多人主張書(shū)寫(xiě) JavaScript 代碼時(shí)省略結(jié)束符
但為了風(fēng)格統(tǒng)一胚股，要寫(xiě)結(jié)束符就每句都寫(xiě)，要么每句都不寫(xiě)（按照?qǐng)F(tuán)隊(duì)要求.）

JavaScript 輸入輸出語(yǔ)法

什么是語(yǔ)法：

人和計(jì)算機(jī)打交道的規(guī)則約定
我們要按照這個(gè)規(guī)則去寫(xiě)
我們程序員需要操控計(jì)算機(jī)裙秋，需要計(jì)算機(jī)能看懂

          向body內(nèi)輸出內(nèi)容
          如果輸出的內(nèi)容寫(xiě)的是標(biāo)簽琅拌，也會(huì)被解析成網(wǎng)頁(yè)元素

1.png

         頁(yè)面彈出警告對(duì)話(huà)框

2.png

          控制臺(tái)輸出語(yǔ)法，程序員調(diào)試使用

3.png

       顯示一個(gè)對(duì)話(huà)框摘刑，對(duì)話(huà)框中包含一條文字信息进宝，用來(lái)提示用戶(hù)輸入文字，獲取的輸入內(nèi)容是字符串

4.png

變量

變量是什么枷恕？

目標(biāo)：理解變量是計(jì)算機(jī)存儲(chǔ)數(shù)據(jù)的“容器”
問(wèn)題1：用戶(hù)輸入的數(shù)據(jù)我們?nèi)绾未鎯?chǔ)起來(lái)党晋？

變量：

1.白話(huà)：變量就是一個(gè)裝東西的盒子。
2.通俗：變量是計(jì)算機(jī)中用來(lái)存儲(chǔ)數(shù)據(jù)的“容器”徐块，它可以讓計(jì)算機(jī)變得有記憶隶校。

3. 注意：變量不是數(shù)據(jù)本身，它們僅僅是一個(gè)用于存儲(chǔ)數(shù)值的容器蛹锰∩罡欤可以理解為是一個(gè)個(gè)用來(lái)裝東西的紙箱子

   
   
   5.png

變量的基本使用

目標(biāo)：掌握變量的聲明方式

1. 聲明變量：
   要想使用變量，首先需要?jiǎng)?chuàng)建變量（專(zhuān)業(yè)說(shuō)法： 聲明變量）
   語(yǔ)法：

   
   
   6.png
   
   

   聲明變量有兩部分構(gòu)成：聲明關(guān)鍵字铜犬、變量名（標(biāo)識(shí)）
   let 即關(guān)鍵字 (let: 允許舞终、許可轻庆、讓、要)敛劝，所謂關(guān)鍵字是系統(tǒng)提供的專(zhuān)門(mén)用來(lái)聲明（定義）變量的詞語(yǔ)

舉例：

7.png

age 即變量的名稱(chēng)余爆，也叫標(biāo)識(shí)符

變量賦值：

定義了一個(gè)變量后，你就能夠初始化它（賦值）夸盟。在變量名之后跟上一個(gè)“=”蛾方，然后是數(shù)值。

           注意：是通過(guò)變量名來(lái)獲得變量里面的數(shù)據(jù)

8.png

          也可以聲明變量的時(shí)候同時(shí)給變量初始化上陕。

9.png

更新變量：

變量賦值后桩砰，還可以通過(guò)簡(jiǎn)單地給它一個(gè)不同的值來(lái)更新它。

             注意： let 不允許多次聲明一個(gè)變量释簿。

10.png

聲明多個(gè)變量：

11.png

1.怎么理解變量亚隅？它的主要作用是什么？
一個(gè)容器庶溶，用來(lái)存放數(shù)據(jù)的
2.變量是通過(guò)那個(gè)關(guān)鍵字來(lái)聲明變量煮纵？如何賦值？
變量通過(guò) let 來(lái)聲明 通過(guò) = 實(shí)現(xiàn)賦值
3.變量通過(guò)變量名來(lái)獲得里面的數(shù)據(jù)
4.可以同時(shí)聲明多個(gè)變量

12.png

字面量

字面量： 字面上的一個(gè)數(shù)量偏螺；所見(jiàn)即所得行疏，的一個(gè)常量

比如： let num = 1 ; 這個(gè) 1 就是一個(gè)字面量（常量）
又比如： let str = “字符串”； let boolean = true;
與之對(duì)比的是另外一種寫(xiě)法（后面會(huì)學(xué)套像，先看一下就好）：
let num = new Number(1);
let str = new String(“字符串”)酿联；
這種并不是所見(jiàn)即所得的值，而是需要通過(guò)計(jì)算機(jī)運(yùn)行之后凉夯，才能得到常量货葬；所以不是字面量

變量的本質(zhì)

內(nèi)存：計(jì)算機(jī)中存儲(chǔ)數(shù)據(jù)的地方采幌，相當(dāng)于一個(gè)大空間

13.png

變量命名規(guī)則與規(guī)范

規(guī)則：必須遵守劲够，不遵守報(bào)錯(cuò)
規(guī)范：建議，不遵守不會(huì)報(bào)錯(cuò)休傍，但不符合業(yè)內(nèi)通識(shí)

1. 規(guī)則：
   不能用關(guān)鍵字
   關(guān)鍵字：有特殊含義的字符征绎，JavaScript 內(nèi)置的一些英語(yǔ)詞匯。例如：let磨取、var人柿、if、for等
   只能用下劃線(xiàn)忙厌、字母凫岖、數(shù)字、$組成逢净，且數(shù)字不能開(kāi)頭
   字母嚴(yán)格區(qū)分大小寫(xiě)哥放，如 Age 和 age 是不同的變量
2. 規(guī)范：
   起名要有意義
   遵守小駝峰命名法
   第一個(gè)單詞首字母小寫(xiě)歼指，后面每個(gè)單詞首字母大寫(xiě)。例：userName

數(shù)據(jù)類(lèi)型

計(jì)算機(jī)世界中的萬(wàn)事萬(wàn)物都是數(shù)據(jù)甥雕。
計(jì)算機(jī)程序可以處理大量的數(shù)據(jù)踩身，為什么要給數(shù)據(jù)分類(lèi)？

1. 更加充分和高效的利用內(nèi)存

2. 也更加方便程序員的使用數(shù)據(jù)
   

   比如：
   14.png
   
   基本數(shù)據(jù)類(lèi)型
   

   引用數(shù)據(jù)類(lèi)型

   
   
   15.png
   
   即我們數(shù)學(xué)中學(xué)習(xí)到的數(shù)字社露，可以是整數(shù)挟阻、小數(shù)、正數(shù)峭弟、負(fù)數(shù)附鸽。
   JavaScript 中的正數(shù)、負(fù)數(shù)孟害、小數(shù)等 統(tǒng)一稱(chēng)為 數(shù)字類(lèi)型

       注意： JS 是弱數(shù)據(jù)類(lèi)型拒炎，變量到底屬于那種類(lèi)型，只有賦值之后挨务，我們才能確認(rèn)
        Java是強(qiáng)數(shù)據(jù)類(lèi)型   例如  int  a = 3    必須是整數(shù)
   

16.png

字符串類(lèi)型（string）

通過(guò)單引號(hào)（ ''） 击你、雙引號(hào)（ ""）或反引號(hào)( ` )包裹的數(shù)據(jù)都叫字符串，單引號(hào)和雙引號(hào)沒(méi)有本質(zhì)上的區(qū)別谎柄，推薦使用單引號(hào)丁侄。

17.png

注意事項(xiàng)：

1. 無(wú)論單引號(hào)或是雙引號(hào)必須成對(duì)使用
2. 單引號(hào)/雙引號(hào)可以互相嵌套，但是不以自已嵌套自已（口訣：外雙內(nèi)單朝巫，或者外單內(nèi)雙）
3. 必要時(shí)可以使用轉(zhuǎn)義符 \鸿摇，輸出單引號(hào)或雙引號(hào)

字符串拼接：

18.png

模板字符串

1.作用
拼接字符串和變量
在沒(méi)有它之前，要拼接變量比較麻煩

19.png

2.符號(hào)
在英文輸入模式下按鍵盤(pán)的tab鍵上方那個(gè)鍵（1左邊那個(gè)鍵）
內(nèi)容拼接變量時(shí)劈猿，用 ${} 包住變量

20.png

布爾類(lèi)型（boolean）

表示肯定或否定時(shí)在計(jì)算機(jī)中對(duì)應(yīng)的是布爾類(lèi)型數(shù)據(jù)拙吉。
它有兩個(gè)固定的值 true 和 false，表示肯定的數(shù)據(jù)用 true（真）揪荣，表示否定的數(shù)據(jù)用 false（假）筷黔。

21.png

未定義類(lèi)型（undefined）

1-未定義是比較特殊的類(lèi)型，只有一個(gè)值 undefined仗颈。
什么情況出現(xiàn)未定義類(lèi)型佛舱？
只聲明變量，不賦值的情況下挨决，變量的默認(rèn)值為 undefined请祖，一般很少【直接】為某個(gè)變量賦值為 undefined。
2-工作中的使用場(chǎng)景：
我們開(kāi)發(fā)中經(jīng)常聲明一個(gè)變量脖祈，等待傳送過(guò)來(lái)的數(shù)據(jù)肆捕。
如果我們不知道這個(gè)數(shù)據(jù)是否傳遞過(guò)來(lái)，此時(shí)我們可以通過(guò)檢測(cè)這個(gè)變量是不是undefined盖高，就判斷用戶(hù)是否有數(shù)據(jù)傳遞過(guò)來(lái)慎陵。

22.png

3-未定義是比較特殊的類(lèi)型掏秩，只有一個(gè)值 undefined。

1.png

null（空類(lèi)型）

2.png

null 表示 值為 空
null 和 undefined 區(qū)別：
undefined 表示沒(méi)有賦值
null 表示賦值了荆姆，但是內(nèi)容為空
null 開(kāi)發(fā)中的使用場(chǎng)景：
官方解釋?zhuān)喊?null 作為尚未創(chuàng)建的對(duì)象
大白話(huà)： 將來(lái)有個(gè)變量里面存放的是一個(gè)對(duì)象蒙幻，但是對(duì)象還沒(méi)創(chuàng)建好，可以先給個(gè)null

控制臺(tái)輸出語(yǔ)句和檢測(cè)數(shù)據(jù)類(lèi)型

1.控制臺(tái)輸出語(yǔ)句：
控制臺(tái)語(yǔ)句經(jīng)常用于測(cè)試結(jié)果來(lái)使用胆筒。
可以看出數(shù)字型和布爾型顏色為藍(lán)色邮破，字符串和undefined顏色為灰色

3.png

2. 通過(guò) typeof 關(guān)鍵字檢測(cè)數(shù)據(jù)類(lèi)型

   
   
   4.png

類(lèi)型轉(zhuǎn)換

JavaScript是弱數(shù)據(jù)類(lèi)型： JavaScript也不知道變量到底屬于那種數(shù)據(jù)類(lèi)型，只有賦值了才清楚仆救。
坑： 使用表單抒和、prompt 獲取過(guò)來(lái)的數(shù)據(jù)默認(rèn)是字符串類(lèi)型的，此時(shí)就不能直接簡(jiǎn)單的進(jìn)行加法運(yùn)算彤蔽。
此時(shí)需要轉(zhuǎn)換變量的數(shù)據(jù)類(lèi)型摧莽。
通俗來(lái)說(shuō)，就是把一種數(shù)據(jù)類(lèi)型的變量轉(zhuǎn)換成我們需要的數(shù)據(jù)類(lèi)型顿痪。

5.png

隱式轉(zhuǎn)換

某些運(yùn)算符被執(zhí)行時(shí)镊辕，系統(tǒng)內(nèi)部自動(dòng)將數(shù)據(jù)類(lèi)型進(jìn)行轉(zhuǎn)換，這種轉(zhuǎn)換稱(chēng)為隱式轉(zhuǎn)換蚁袭。
規(guī)則：

• 號(hào)兩邊只要有一個(gè)是字符串征懈，都會(huì)把另外一個(gè)轉(zhuǎn)成字符串
  除了+以外的算術(shù)運(yùn)算符 比如 - * / 等都會(huì)把數(shù)據(jù)轉(zhuǎn)成數(shù)字類(lèi)型
  缺點(diǎn)：
  轉(zhuǎn)換類(lèi)型不明確，靠經(jīng)驗(yàn)才能總結(jié)
  小技巧：
  +號(hào)作為正號(hào)解析可以轉(zhuǎn)換成Number

  
  
  6.png

顯式轉(zhuǎn)換

編寫(xiě)程序時(shí)過(guò)度依靠系統(tǒng)內(nèi)部的隱式轉(zhuǎn)換是不嚴(yán)謹(jǐn)?shù)目模驗(yàn)殡[式轉(zhuǎn)換規(guī)律并不清晰卖哎，大多是靠經(jīng)驗(yàn)總結(jié)的規(guī)律。
為了避免因隱式轉(zhuǎn)換帶來(lái)的問(wèn)題删性，通常需要對(duì)數(shù)據(jù)進(jìn)行顯示轉(zhuǎn)換亏娜。
概念：
自己寫(xiě)代碼告訴系統(tǒng)該轉(zhuǎn)成什么類(lèi)型
轉(zhuǎn)換為數(shù)字型

1. Number(數(shù)據(jù))

• 轉(zhuǎn)成數(shù)字類(lèi)型
  如果字符串內(nèi)容里有非數(shù)字，轉(zhuǎn)換失敗時(shí)結(jié)果為 NaN（Not a Number）即不是 一個(gè)數(shù)字
  NaN也是number類(lèi)型的數(shù)據(jù)蹬挺，代表非數(shù)字

2. parseInt(數(shù)據(jù))

• 只保留整數(shù)

3. parseFloat(數(shù)據(jù))

• 可以保留小數(shù)

4. String(數(shù)據(jù))

• 變量.toString(進(jìn)制)