JavaScript 快速入門基礎詳解!!

在這裏插入圖片描述

==分享一個寫博客 首行縮進2個字符的命令: ==

  

<開頭語:JavaScript 是面向 Web 編程語言,並獲得了所有網頁瀏覽器的支持,是目前使用最廣泛的腳本編程語言之一,也是網頁設計和 Web 應用必須掌握的基本工具。

JavaScript 不能獨立運行,只能在宿主環境中執行,一般情況下可以把JS(JavaScript)網頁中藉助瀏覽器環境來運行!

1.編寫JavaScript第一個程序!

🤔知識點:

在 HTML 中頁面中嵌入 JavaScript 腳本需要使用< script > 標籤,用戶可以在標籤內直接編寫JS代碼,用法如下:

<script type="text/JavaScript">

設計過程:

第1步:新建HTML文檔,保存爲 Javascript.html

第2步:在< head >標籤中插入一個 < script > 標籤

第3步:爲< script > 標籤設置 type=”text/JavaScript“屬性

第4步:在標籤內輸入代碼如下:
在這裏插入圖片描述
網頁效果:
在這裏插入圖片描述
人生中第一個JS就這樣橫空出世了!!!

2.新建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腳本來解析!

3.執行JS文件

😀知識點

  瀏覽器在解析HTML文檔時,會根據文檔流從上到下逐行解析和顯示。
JS 代碼也是 HTML 文檔的組合部分,因此js腳本執行順也是根據< Script >標籤的位置來確定的。

實例設計:

使用瀏覽器測試下面的示例代碼,會看到 Javascript 代碼從上到下逐步被解析的過程。
在這裏插入圖片描述

網頁彈窗將由以上代碼從上到下的解析並顯示顯示
在這裏插入圖片描述

在這裏插入圖片描述

4.延遲執行JS文件

☘知識點:

< script > 標籤有一個布爾型屬性 defer。設置該屬性能夠延遲 js 文件到頁面解析完畢後再運行。

實例設計

在下面的實例中,外部文件js 包含的腳本將延遲到瀏覽器解析完網頁之後再執行。
瀏覽器顯示網頁標題再彈出提示框。如果不設置 defer 屬性則執行順序是相反的。

在這裏插入圖片描述

defer 屬性只適用於外部 js 文件,不適合於< script >標籤包含的 js 腳本。

5.異步加載 JS 文件

🙈知識點:

在默認情況下,網頁都是同步加載外部 js 文件,如果js文件較大,就會影響後面HTML代碼的解析,在上面第三小結中介紹過一種解決方法:最後加載js文件。
現在可以爲< Script > 標籤設置 async 屬性 ,然後再瀏覽器異步加載js文件,即再加載的js文件時,瀏覽器不會暫停,而是繼續解析,這樣能節省時間,提升響應速度

實例設計

以 上面 第四小結 示例爲例,如果爲標籤設置 async 屬性,然後在瀏覽器中預覽,則會看到網頁標題和段落文本同步,或者先顯示出來,或同步彈出提示框。如果不設置 async 屬性 ,只有先彈出提示文本之後,纔開始解析並顯示網頁標題和段落文本。
在這裏插入圖片描述
代碼如下:
在這裏插入圖片描述

async 是 HTML5 新增布爾型屬性,通過設置 async 屬性,就不用顧慮標籤的放置位置,用戶可以根據習慣繼續把很多大型js庫文件放在head 標籤內。

6.JavaScript代碼塊

🌈知識點:

代碼塊就是使用 < 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>

以上爲錯誤的代碼塊順序

如果把如下倆個代碼放在一起就不會出現上述錯誤。
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章