==分享一個寫博客 首行縮進2個字符的命令: ==
  
<開頭語:JavaScript 是面向 Web 編程語言,並獲得了所有網頁瀏覽器的支持,是目前使用最廣泛的腳本編程語言之一,也是網頁設計和 Web 應用必須掌握的基本工具。
JavaScript 不能獨立運行,只能在宿主環境中執行,一般情況下可以把JS(JavaScript)網頁中藉助瀏覽器環境來運行!
🤔知識點:
在 HTML 中頁面中嵌入 JavaScript 腳本需要使用< script > 標籤,用戶可以在標籤內直接編寫JS代碼,用法如下:
<script type="text/JavaScript">
設計過程:
第1步:新建HTML文檔,保存爲 Javascript.html
第2步:在< head >標籤中插入一個 < script > 標籤
第3步:爲< script > 標籤設置 type=”text/JavaScript“屬性
第4步:在標籤內輸入代碼如下:
網頁效果:
人生中第一個JS就這樣橫空出世了!!!
😋知識點:
JavaScript 程序不僅可以直接放在 HTML 文檔中,也可以放在JavaScript文件中。
JavaScript文件 是 文本文件,擴展名爲 “.js” 使用任何文本編輯器都可以編輯!
👥實例設計:
第1步,新建文本,保存爲xxx.js 注意:擴展名爲.js,他表示是JavaScript類型的文件。
第2步,打開js文件,在其中編寫如下JavaScript 代碼。
alert("hi,javaScript");
上面代碼中 alert()表示window對象的方法,調用該方法將彈出一個提示對話框顯示參數字符串”hi ,JavaScript“
第四步新建HTML 輸入 < script type=“text/JavaScript” src=文件路徑>調用外部樣式如下:
網頁效果將彈出一個提示框並顯示 “hi ,Javascript!”
注:使用script標籤默認文件爲js,不管加載的是不是後綴名.js都會按js腳本來解析!
😀知識點
瀏覽器在解析HTML文檔時,會根據文檔流從上到下逐行解析和顯示。
JS 代碼也是 HTML 文檔的組合部分,因此js腳本執行順也是根據< Script >標籤的位置來確定的。
實例設計:
使用瀏覽器測試下面的示例代碼,會看到 Javascript 代碼從上到下逐步被解析的過程。
網頁彈窗將由以上代碼從上到下的解析並顯示顯示
☘知識點:
< script > 標籤有一個布爾型屬性 defer。設置該屬性能夠延遲 js 文件到頁面解析完畢後再運行。
實例設計
在下面的實例中,外部文件js 包含的腳本將延遲到瀏覽器解析完網頁之後再執行。
瀏覽器顯示網頁標題再彈出提示框。如果不設置 defer 屬性則執行順序是相反的。
defer 屬性只適用於外部 js 文件,不適合於< script >標籤包含的 js 腳本。
🙈知識點:
在默認情況下,網頁都是同步加載外部 js 文件,如果js文件較大,就會影響後面HTML代碼的解析,在上面第三小結中介紹過一種解決方法:最後加載js文件。
現在可以爲< Script > 標籤設置 async 屬性 ,然後再瀏覽器異步加載js文件,即再加載的js文件時,瀏覽器不會暫停,而是繼續解析,這樣能節省時間,提升響應速度
實例設計
以 上面 第四小結 示例爲例,如果爲標籤設置 async 屬性,然後在瀏覽器中預覽,則會看到網頁標題和段落文本同步,或者先顯示出來,或同步彈出提示框。如果不設置 async 屬性 ,只有先彈出提示文本之後,纔開始解析並顯示網頁標題和段落文本。
代碼如下:
async 是 HTML5 新增布爾型屬性,通過設置 async 屬性,就不用顧慮標籤的放置位置,用戶可以根據習慣繼續把很多大型js庫文件放在head 標籤內。
🌈知識點:
代碼塊就是使用 < script >標籤包含的JavaScript代碼段。
實例設計:
【實例1】在下面的實例代碼中,使用兩個< script >標籤分別定義兩個 JS 代碼段。
瀏覽器在解析這個HTML文檔時,如果遇到第一個< script >標籤,則JavaScript 解析器會等到這個代碼塊的代碼都加載完,
先對代碼塊進行預編譯,然後在執行。執行完畢繼續解析後面的代碼,同時js解釋器也準備好處理下一個代碼塊。
【實例2】如果在一個 js 代碼塊中調用後面的代碼塊中聲明的變量或函數就會提示語法錯誤。例如:當 js 解釋器執行下面代碼時就會提示語法錯誤,顯示變量a未定義如下:
<script>
// JavaScript 代碼塊1
alert (a);
</script>
<script>
// JavaScript 代碼塊2
var a = 1;
</script>
以上爲錯誤的代碼塊順序
如果把如下倆個代碼放在一起就不會出現上述錯誤。