什么是JavaScript？
- JavaScript簡稱JS葵第，是前端開發(fā)的一門腳本語言(解釋型語言)
- 解釋型語言：程序執(zhí)行之前鳍咱，不需要對代碼進行編譯绒极，在運行時邊解析邊執(zhí)行的語言
-
瀏覽器工作原理
- 編譯型語言：程序執(zhí)行之前，需要一個專門的編譯過程伦乔，把程序編譯成機器語言的文件厉亏，比如exe文件
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)系就像老婆和老婆餅一樣
- 1994年網(wǎng)景公司發(fā)布歷史上第一個比較成熟的瀏覽器(Navigator 0.9), 但是只能瀏覽不能
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
- BOM(Browser Object Model)：JavaScript操作瀏覽器的部分功能的API
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的最后, 因為
<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)容
- 在瀏覽器彈窗中顯示內(nèi)容
alert("hello world");
prompt("請輸入內(nèi)容：");
confirm("你好嗎?");
- 在頁面中顯示內(nèi)容
document.write("hello world2");
- 注意點：
- JS中嚴格區(qū)分大小寫
alert("hello world"); // 正確 Alert("hello world"); // 錯誤- 每一條JS語句以分號(;)結(jié)尾
- 如果不寫分號洗鸵，瀏覽器會自動添加，但是會消耗一些系統(tǒng)資源
- 并且有些時候瀏覽器會加錯分號仗嗦，所以在開發(fā)中分號必須寫
- JS中會忽略多個空格和換行
alert ( "hello world" );
