JavaScript 基礎(chǔ)語法 01
學(xué)習(xí)任務(wù)
學(xué)完JavaScript 基礎(chǔ)語法內(nèi)容后，我們可以完成下面的交互效果，可以實(shí)現(xiàn)如下4個(gè)功能。
計(jì)算機(jī)組成
軟件
應(yīng)用軟件：瀏覽器(Chrome/IE/Firefox)、QQ、Sublime、Word
系統(tǒng)軟件：Windows、Linux、mac OSX
硬件
三大件：CPU、內(nèi)存、硬盤 -- 主板
輸入設(shè)備：鼠標(biāo)、鍵盤、手寫板、攝像頭等
輸出設(shè)備：顯示器、打印機(jī)、投影儀等
網(wǎng)頁、網(wǎng)站和應(yīng)用程序
網(wǎng)頁：?jiǎn)为?dú)的一個(gè)頁面
網(wǎng)站：一些列相關(guān)的頁面組成到一起
應(yīng)用程序：可以和用戶產(chǎn)生交互，并實(shí)現(xiàn)某種功能。
什么是編程
編程：讓計(jì)算機(jī)根據(jù)你設(shè)定好的流程去做事。
例如：你可以通過指令的方式讓計(jì)算機(jī)去做事情
這個(gè)時(shí)候計(jì)算會(huì)去播放歌曲真的愛你。但是計(jì)算機(jī)并不認(rèn)識(shí)上面的英文單詞和漢字。
計(jì)算機(jī)在執(zhí)行指令之前會(huì)把指令轉(zhuǎn)換成二進(jìn)制的形式，例如下面的形式：
我們不可能直接去拿二進(jìn)制去編寫指令(程序)，這樣太痛苦了，所以在和計(jì)算機(jī)進(jìn)行交互的時(shí)候，我們可以通過一些高級(jí)語言，這些語言非常接近人類的語言。
前端開發(fā)必備的編程語言是 JavaScript，JavaScript 是由瀏覽器加載和執(zhí)行的。
VSCode 插件
漢化：Chinese (Simplified) Language Pack for Visual Studio Code
不同類型的文件圖標(biāo)：Material Icon Theme
路徑的只能提示：Path Intellisense
自動(dòng)重命名結(jié)束標(biāo)簽：Auto Rename Tag
測(cè)試用 Web 服務(wù)器：Live Server
JavaScript 介紹
為什么要學(xué)習(xí) JavaScript
我們?cè)谥耙呀?jīng)學(xué)習(xí)了 HTML 和 CSS 這兩個(gè)技術(shù)，這兩個(gè)技術(shù)能做的是頁面的靜態(tài)效果，如果想實(shí)現(xiàn)頁面上的一些功能或者交換效果，比如輪播圖、數(shù)據(jù)格式驗(yàn)證等，就要用到 JavaScript。簡(jiǎn)而言之：
HTML - 頁面的結(jié)構(gòu)
CSS - 頁面的樣式
JavaScript - 頁面的行為
什么是 JavaScript
JavaScript 是一種運(yùn)行在瀏覽器的編程語言。
編程語言就是跟計(jì)算機(jī)交流的語言，通過編程語言指揮計(jì)算機(jī)完成某件事情。常見的編程語言: java、c、c#、php。
跟其它編程語言不同的是 JavaScript?運(yùn)行在瀏覽器
編程語言最終都會(huì)被某種翻譯器轉(zhuǎn)換成 CPU 能夠執(zhí)行的指令
擴(kuò)展閱讀：JavaScript的歷史、JavaScript 20年
JavaScript 的組成
ECMAScript - 簡(jiǎn)稱 ES，用來規(guī)范 JavaScript 的語法的，具有多個(gè)版本：
ECMAScript 1.0（1997年6月）
ECMAScript 2.0（1998年6月）
ECMAScript 3.0（1999年12月）
ECMAScript 4（ECMAScript 5）
2008年7月發(fā)布前被廢棄
ECMAScript 5.1（ES5，2009年12月）
該版本力求澄清第3版中的歧義，并添加了新的功能。新功能包括：原生JSON對(duì)象、繼承的方法、高級(jí)屬性的定義以及引入嚴(yán)格模式。
ECMAScript 2015（ES6，2015年6月）
此后按照年號(hào)每年更新一個(gè)版本
DOM - 文檔對(duì)象模型，用來操作頁面上的標(biāo)簽的
BOM - 瀏覽器對(duì)象模型，用來操作瀏覽器的部分功能的
JavaScript 能做什么
JavaScript 發(fā)展到現(xiàn)在幾乎無所不能。
Atwood 定律：
any Application that can be written in JavaScript, willeventually be written in JavaScript.
任何能被 JavaScript 實(shí)現(xiàn)的應(yīng)用最終都會(huì)由 JavaScript 實(shí)現(xiàn).
網(wǎng)站/Web 應(yīng)用
服務(wù)端開發(fā)(Node.js)
命令行工具(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物聯(lián)網(wǎng)(Ruff)
游戲開發(fā)(cocos2d-js)
JavaScript 應(yīng)用演示
http://impress.github.io/impress.js/
http://naotu.baidu.com/
https://codecombat.com/
https://ide.codemao.cn/
以下需要科學(xué)上網(wǎng)
https://developers.google.com/blockly/
https://blockly-games.Appspot.com blockly迷宮
JavaScript 初體驗(yàn)
JavaScript 和 CSS 一樣，也有三種書寫位置：
內(nèi)嵌式
外鏈?zhǔn)?/p>
行內(nèi)式
內(nèi)嵌式
創(chuàng)建一個(gè) HTML 文件，例如：index.html
在 HTML 文件的末尾，body 標(biāo)簽結(jié)束之前
在瀏覽器中運(yùn)行 HTML 文件即可看到效果
外鏈?zhǔn)?/h1>
創(chuàng)建一個(gè) HTML 文件，例如：index.html
創(chuàng)建一個(gè)以 .js 結(jié)尾的文件，例如：index.js
在 HTML 文件中引用剛剛創(chuàng)建好的 js 文件
在新建的 js 文件中輸入以下代碼
在瀏覽器中運(yùn)行 HTML 文件
注意：
引用外部 js 文件的 script 標(biāo)簽中不可以寫JavaScript代碼
行內(nèi)式(了解)
點(diǎn)擊按鈕，就會(huì)執(zhí)行 js 代碼
總結(jié)
實(shí)際工作/項(xiàng)目中都會(huì)使用外鏈?zhǔn)?/p>
前期學(xué)習(xí) JavaScript 為了方便會(huì)使用內(nèi)嵌式
行內(nèi)式了解，以后見到內(nèi)嵌式的代碼能看懂
輸入輸出方法
在初體驗(yàn)中我們使用了 alert() 方法彈出一個(gè)消息提示，在 JavaScript 中，有多個(gè)可以彈出/輸出消息的方法，在我們的仿 siri 項(xiàng)目中會(huì)用到其中的一些，比如：alert()、讓用戶輸入內(nèi)容的彈出框。
下面我們一起來學(xué)習(xí)幾個(gè)常用的輸入輸出方法。
輸出方法
alert()
作用：這個(gè)方法用于在瀏覽器上彈出消息提示框
用法：
注意：這里的“消息提示”，既可以用英文狀態(tài)下的單引號(hào)也可以用雙引號(hào)。
console.log()
作用：可以在瀏覽器的開發(fā)者工具(F12打開)的控制臺(tái)中輸出消息，這樣做的目的是為了將來方便調(diào)試程序，未來我們會(huì)經(jīng)常用 console.log()。
在開發(fā)者工具的控制臺(tái)還可以直接書寫 JavaScript 代碼看輸出的結(jié)果。
用法：
輸入方法
confirm()
作用：在瀏覽器里彈出一個(gè)確認(rèn)框，比如刪除提示
用法：
prompt()
作用：在瀏覽器里彈出一個(gè)輸入框，讓用戶輸入內(nèi)容
用法：
變量和常量
變量
如果我們使用 prompt() 方法讓用戶輸入了數(shù)據(jù)，我們又想要把用戶輸入的數(shù)據(jù)保存起來，怎么辦呢？
什么是變量
一個(gè)變量，就是一個(gè)用于存放數(shù)值的容器。這個(gè)數(shù)值可能是一個(gè)用于累加計(jì)算的數(shù)字，或者是一個(gè)句子中的字符串。變量的獨(dú)特之處在于它存放的數(shù)值是可以改變的。
變量是計(jì)算機(jī)內(nèi)存中存儲(chǔ)數(shù)據(jù)的標(biāo)識(shí)符，根據(jù)變量名稱可以獲取或修改內(nèi)存中存儲(chǔ)的數(shù)據(jù)
定義變量
語法
定義變量有兩個(gè)關(guān)鍵詞 var/let，var 是過去定義變量的方式，let 是現(xiàn)在定義變量的方式。它們之間的區(qū)別需要學(xué)習(xí)完作用域之后再來解釋。
使用 var/let 關(guān)鍵字，告訴瀏覽器，我們要定義一個(gè)變量，使用=號(hào)告訴瀏覽器，我們要把左邊的數(shù)據(jù)存儲(chǔ)到變量里面，當(dāng)我們想使用這個(gè)數(shù)據(jù)的時(shí)候，就可以直接使用這個(gè)變量代替這個(gè)實(shí)際數(shù)據(jù)。
定義變量可以分為兩個(gè)過程：變量聲明和變量賦值：
變量是變化的量，我們可以重新給變量賦值：
變量可以一次定義多個(gè)并同時(shí)賦值
數(shù)據(jù)如何在內(nèi)存中存儲(chǔ)的
下面我們來了解是如何通過變量名稱找到內(nèi)存中對(duì)應(yīng)的數(shù)據(jù)的。
變量的命名規(guī)則和規(guī)范
規(guī)則 - 必須遵守的，不遵守會(huì)報(bào)錯(cuò)
由字母、數(shù)字、下劃線、$符號(hào)組成，不能以數(shù)字開頭
不能是關(guān)鍵字和保留字，例如：for、while。
區(qū)分大小寫
使用 let 定義的變量名不能重復(fù)會(huì)沖突，使用 var 定義的變量名可以重復(fù)。
規(guī)范 - 建議遵守的，不遵守不會(huì)報(bào)錯(cuò)
變量名必須有意義
遵守駝峰命名法。首字母小寫，后面單詞的首字母需要大寫。例如：userName、userPassword
下面哪些變量名不合法
關(guān)鍵字
關(guān)鍵字是在JavaScript語法中，具有特殊意義的單詞，比如我們學(xué)習(xí)過的用于聲明變量的var
保留字
JavaScript 是不斷發(fā)展的，以前的功能用了以前的關(guān)鍵字，將來要加入新的功能的時(shí)候，可能要用到新的關(guān)鍵字，所有 JavaScript 在一開始的時(shí)候就保留了部分單詞，以便將來把保留的單詞作為關(guān)鍵字
案例
1. 交換兩個(gè)變量的值
2. 不使用臨時(shí)變量，交換兩個(gè)數(shù)值變量的值
常量
常量跟變量非常相似，也是通過一個(gè)標(biāo)識(shí)符來訪問內(nèi)容中的數(shù)據(jù)，但是跟變量不同的是常量中的數(shù)據(jù)是不可以修改的。
常量用來存儲(chǔ)不可修改的數(shù)據(jù)，例如：數(shù)據(jù)中的 π。
如果在某個(gè)位置 PI 的值被別人修改了，未來圓的面積會(huì)計(jì)算錯(cuò)誤。
使用 const 定義的常量是不能被修改的，我們可以嘗試一下：
常量的命名一般都大寫，代表常量。
關(guān)于變量和常量我們先說到這里，下一小節(jié)，我們?cè)賮斫榻B JavaScript 中的數(shù)據(jù)類型
