什么是JavaScript？
- JavaScript簡稱JS，是前端開發的一門腳本語言(解釋型語言)
解釋型語言：程序執行之前，不需要對代碼進行編譯，在運行時邊解析邊執行的語言
-
-
編譯型語言：程序執行之前，需要一個專門的編譯過程，把程序編譯成機器語言的文件，比如exe文件
JavaScript作用
- HTML 提供網頁上顯示的內容（結構）
- CSS 美化網頁（樣式）
- JavaScript 控制網頁行為（行為）
JavaScript發展史
- JavaScript起源于Netscape公司的LiveScript語言
- 1994年網景公司發布歷史上第一個比較成熟的瀏覽器(Navigator 0.9), 但是只能瀏覽不能交互
- 1995年為了解決表單有效性驗證就要與服務器進行多次地往返交互問題，網景公司錄用Brendan Eich(布蘭登·艾奇)，他在 10 天內開發出 LiveScript 語言
- 在 Netscape Navigator 2.0 即將正式發布前，Netscape 將LiveScript 更名為 JavaScript， 目的是為了蹭Java的熱度
- 所以Java和 JavaScript之間的關系就像老婆和老婆餅一樣
JavaScript組成
- ECMAScript：JavaScript的語法標準
- ECMA是European Computer Manufacturers Association的縮寫，即歐洲計算機制造商協會
- ECMAScript是ECMA制定的腳本語言的標準, 規定了一種腳本語言實現應該包含的基本內容
- JavaScript是腳本語言的一種,所以JavaScript也必須遵守ECMAScript標準,包含ECMAScript標準中規定的基本內容
- DOM(Document Object Model)：JavaScript操作網頁上的元素(標簽)的API
-
BOM(Browser Object Model)：JavaScript操作瀏覽器的部分功能的API
JavaScript書寫格式
- 和CSS書寫格式一樣, JavaScript也有三種書寫格式, 分別是"行內式"、"內嵌式"、"外鏈式"
- 和CSS書寫格式一樣, JavaScript三種書寫格式中也推薦大家使用"外鏈式", 遵守結構、樣式、行為分離
- 行內式格式(不推薦)
<div onclick="alert('hello world');">我是div</div>
- 內嵌式格式
</body>
... ...
<script type="text/javascript">
alert("hello world");
</script>
</body>
- 內嵌式注意點
- 通常將js代碼放在body的最后, 因為
HTML是從上至下加載, 而js代碼通常是給標簽添加交互(操作元素), 所以需要先加載HTML, 否則如果執行js代碼時HTML還未被加載, 那么js代碼將無法添加交互(操作元素); - HTML頁面中出現<script>標簽后，就會讓頁面暫停等待腳本的解析和執行。無論當前腳本是內嵌式還是外鏈式，頁面的下載和渲染都必須停下來等待腳本的執行完成才能繼續, 所以如果把js代碼寫在head中, 那么js代碼沒有執行完畢之前后續網頁無法查看
- 如果不愿意把js代碼放在body的最后, 也可以放在head標簽中, 但是為了保證執行js代碼時HTML一定已經被加載了, 那么需要添加一些額外代碼.(不推薦)
- 通常將js代碼放在body的最后, 因為
<head>
<script>
window.onload = function () { // 必須添加這句
alert("hello world");
}
</script>
</head>
- 外鏈式格式
<script type="text/javascript" src="01-js書寫格式.js"></script>
- 外鏈式注意點
- 外鏈式的script代碼塊中不能編寫js代碼, 即便寫了也不會執行
<script type="text/javascript" src="01-js書寫格式.js">
alert("hello world"); // 不會被執行
</script>
- 由于
每次加載外鏈式的js文件都會發送一次請求, 這樣非常消耗性能, 所以在企業開發中推薦將多個JS文件合成為一個JS文件,以提升網頁的性能和加載速度
JS中的常見輸出方式
- 在控制臺中顯示內容
console.log("hello world3");
console.error("錯誤信息");
console.warn("警告信息");
- 在瀏覽器彈窗中顯示內容
alert("hello world");
prompt("請輸入內容：");
confirm("你好嗎?");
- 在頁面中顯示內容
document.write("hello world2");
- 注意點：
- JS中嚴格區分大小寫
alert("hello world"); // 正確
Alert("hello world"); // 錯誤
- 每一條JS語句以分號(;)結尾
- 如果不寫分號，瀏覽器會自動添加，但是會消耗一些系統資源
- 并且有些時候瀏覽器會加錯分號，所以在開發中分號必須寫
- JS中會忽略多個空格和換行
alert
(
"hello world"
);
學習交流方式:
1.微信公眾賬號搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學習交流群:
302942894 / 289964053 / 11550038
