什么是JavaScript？
- JavaScript簡稱JS，是前端開發(fā)的一門腳本語言(解釋型語言)
- 解釋型語言：程序執(zhí)行之前，不需要編譯就可以直接運行, 運行時再邊解析邊執(zhí)行的語言
- 編譯型語言：程序執(zhí)行之前，需要一個專門的編譯過程，把程序編譯成為機器語言的文件，比如exe文件
- 解釋型語言：程序執(zhí)行之前，不需要編譯就可以直接運行, 運行時再邊解析邊執(zhí)行的語言
User Interface 用戶界面，我們所看到的瀏覽器
Browser engine 瀏覽器引擎，用來查詢和操作渲染引擎
Rendering engine 用來顯示請求的內(nèi)容，負責解析HTML、CSS，并把解析的內(nèi)容顯示出來
Networking 網(wǎng)絡(luò)，負責發(fā)送網(wǎng)絡(luò)請求
JavaScript Interpreter(解析者) JavaScript解析器，負責執(zhí)行JavaScript的代碼
UI Backend UI后端，用來繪制類似組合框和彈出窗口
Data Persistence(持久化) 數(shù)據(jù)持久化，數(shù)據(jù)存儲 cookie、HTML5中的sessionStorage
JavaScript作用
- HTML 提供網(wǎng)頁上顯示的內(nèi)容（結(jié)構(gòu)）
- CSS 美化網(wǎng)頁（樣式）
- JavaScript 控制網(wǎng)頁行為（行為）
JavaScript發(fā)展史
- JavaScript起源于Netscape公司的LiveScript語言
- 1994年網(wǎng)景公司發(fā)布歷史上第一個比較成熟的瀏覽器(Navigator 0.9), 但是只能瀏覽不能交互
- 1995年為了解決表單有效性驗證就要與服務(wù)器進行多次地往返交互問題，網(wǎng)景公司錄用Brendan Eich(布蘭登·艾奇)，他在 10 天內(nèi)開發(fā)出 LiveScript 語言
- 在 Netscape Navigator 2.0 即將正式發(fā)布前，Netscape 將LiveScript 更名為 JavaScript， 目的是為了蹭Java的熱度
- 所以Java和 JavaScript之間的關(guān)系就像老婆和老婆餅一樣
JavaScript組成
- ECMAScript：JavaScript的語法標準
- ECMA是European Computer Manufacturers Association的縮寫，即歐洲計算機制造商協(xié)會
- ECMAScript是ECMA制定的腳本語言的標準, 規(guī)定了一種腳本語言實現(xiàn)應(yīng)該包含的基本內(nèi)容
- JavaScript是腳本語言的一種,所以JavaScript也必須遵守ECMAScript標準,包含ECMAScript標準中規(guī)定的基本內(nèi)容
- DOM(Document Object Model)：JavaScript操作網(wǎng)頁上的元素(標簽)的API
- DOM可以把HTML看做是文檔樹，通過DOM提供的API可以對樹上的節(jié)點進行操作
- BOM(Browser Object Model)：JavaScript操作瀏覽器的部分功能的API
-
通過BOM可以操作瀏覽器窗口，比如：彈出框、控制瀏覽器跳轉(zhuǎn)、獲取分辨率等
-
JavaScript書寫格式
- 和CSS書寫格式一樣, JavaScript也有三種書寫格式, 分別是"行內(nèi)式"、"內(nèi)嵌式"、"外鏈式"
- 和CSS書寫格式一樣, JavaScript三種書寫格式中也推薦大家使用"外鏈式", 遵守結(jié)構(gòu)、樣式、行為分離
- 行內(nèi)式格式(不推薦)
<div onclick="alert('hello world');">我是div</div>
- 內(nèi)嵌式格式
</body>
... ...
<script type="text/javascript">
alert("hello world");
</script>
</body>
- 內(nèi)嵌式注意點
- 通常將js代碼放在body的最后, 因為
HTML是從上至下加載, 而js代碼通常是給標簽添加交互(操作元素), 所以需要先加載HTML, 否則如果執(zhí)行js代碼時HTML還未被加載, 那么js代碼將無法添加交互(操作元素); - HTML頁面中出現(xiàn)<script>標簽后，就會讓頁面暫停等待腳本的解析和執(zhí)行。無論當前腳本是內(nèi)嵌式還是外鏈式，頁面的下載和渲染都必須停下來等待腳本的執(zhí)行完成才能繼續(xù), 所以如果把js代碼寫在head中, 那么js代碼沒有執(zhí)行完畢之前后續(xù)網(wǎng)頁無法查看
- 如果不愿意把js代碼放在body的最后, 也可以放在head標簽中, 但是為了保證執(zhí)行js代碼時HTML一定已經(jīng)被加載了, 那么需要添加一些額外代碼.(不推薦)
- 通常將js代碼放在body的最后, 因為
<head>
<script>
window.onload = function () { // 必須添加這句
alert("hello world");
}
</script>
</head>
- 外鏈式格式
<script type="text/javascript" src="01-js書寫格式.js"></script>
- 外鏈式注意點
- 外鏈式的script代碼塊中不能編寫js代碼, 即便寫了也不會執(zhí)行
<script type="text/javascript" src="01-js書寫格式.js">
alert("hello world"); // 不會被執(zhí)行
</script>
- 由于
每次加載外鏈式的js文件都會發(fā)送一次請求, 這樣非常消耗性能, 所以在企業(yè)開發(fā)中推薦將多個JS文件合成為一個JS文件,以提升網(wǎng)頁的性能和加載速度
JS中的常見輸出方式
- 在瀏覽器彈窗中顯示內(nèi)容
alert("hello world");
prompt("請輸入內(nèi)容：");
confirm("你好嗎?");
- 在頁面中顯示內(nèi)容
document.write("hello world2");
- 在控制臺中顯示內(nèi)容
console.log("hello world3");
console.error("錯誤信息");
console.warn("警告信息");
- 注意點：
- 和C語言一樣, JS中嚴格區(qū)分大小寫
alert("hello world"); // 正確
Alert("hello world"); // 錯誤
- 和C語言一樣, 每一條JS語句以分號(;)結(jié)尾
- 如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統(tǒng)資源
- 并且有些時候瀏覽器會加錯分號，所以在開發(fā)中分號必須寫
- JS中會忽略多個空格和換行
alert
(
"hello world"
);
