JavaScript簡單編程實例學習
在 HTML 頁面中嵌入 JavaScript 腳本需要使用 <script> 標簽,用戶可以在 <script> 標簽中直接編寫 JavaScript 代碼,具體步驟如下。
第 1 步,新建 HTML 文檔,保存為 test.html。
第 2 步,在 <head> 標簽內插入一個 <script> 標簽。
第 3 步,為 <script> 標簽設置type="text/javascript"屬性。
現(xiàn)代瀏覽器默認 <script> 標簽的腳本類型為 JavaScript,因此可以省略 type 屬性;如果考慮到兼容早期版本瀏覽器,則需要設置 type 屬性。
第 4 步,在 <script> 標簽內輸入 JavaScript 代碼:document.write("<h1>Hi,JavaScript!</h1>");
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一個JavaScript程序</title> <script type="text/javascript"> document.write("<h1>Hi,JavaScript!</h1>"); </script> </head> <body></body> </html>
新建 JavaScript 文件
JavaScript 程序不僅可以直接放在 HTML 文檔中,也可以放在 JavaScript 文件中。
JavaScript 文件是文本文件,擴展名為.js,使用任何文本編輯器都可以編輯。新建 JavaScript 文件的步驟如下。
第1步,新建文本文件,保存為 test.js。注意,擴展名為.js,它表示該文本文件是 JavaScript 類型的文件。
第2步,打開 test.js 文件,在其中編寫如下 JavaScript 代碼。
alert("Hi,JavaScript!");
在上面代碼中,alert() 表示 Window 對象的方法,調用該方法將彈出一個提示對話框,顯示參數(shù)字符串 "Hi, JavaScript!"。
第3步,保存 JavaScript 文件。在此建議把 JavaScript 文件和網頁文件放在同一個目錄下。
JavaScript 文件不能夠獨立運行,需要導入到網頁中,通過瀏覽器來執(zhí)行。使用 <script> 標簽可以導入 JavaScript 文件。
第4步,新建 HTML 文檔,保存為 test.html。
第5步,在 <head> 標簽內插入一個 <script> 標簽。定義 src 屬性,設置屬性值為指向外部 JavaScript 文件的 URL 字符串。代碼如下:
<script type="text/javascript" src="test.js"></script>
第6步,保存網頁文檔,在瀏覽器中會彈出 “Hi,JavaScript!”
定義 src 屬性的 <script> 標簽不應再包含 JavaScript 代碼。
如果嵌入了代碼,則只會下載并執(zhí)行外部 JavaScript 文件,嵌入代碼將被忽略。
執(zhí)行 JavaScript 程序
瀏覽器在解析 HTML 文檔時,將根據(jù)文檔流從上到下逐行解析和顯示。
JavaScript 代碼也是 HTML 文檔的組成部分,因此 JavaScript 腳本的執(zhí)行順序也是根據(jù) <script> 標簽的位置來確定的。
示例
使用瀏覽器測試下面示例,會看到 JavaScript 代碼從上到下逐步被解析的過程。
<!DOCTYPE html> <script> alert("頂部腳本"); </script> <html> <head> <meta charset="UTF-8"> <title>test</title> <script> alert("頭部腳本"); </script> </head> <body> <h1>網頁標題</h1> <script> alert("頁面腳本"); </script> <p>正文內容</p> </body> <script> alert("底部腳本"); </script> </html>
以上就是本次給大家整理的全部相關知識點,希望能夠給大家?guī)韼椭?/p>
相關文章
JavaScript使用原型和原型鏈實現(xiàn)對象繼承的方法詳解
這篇文章主要介紹了JavaScript使用原型和原型鏈實現(xiàn)對象繼承的方法,簡單講述了javascript原型與原型鏈的原理,并結合實例形式詳細分析了javascript中對象繼承的常見實現(xiàn)技巧,需要的朋友可以參考下2017-04-04教你JS更簡單的獲取表單中數(shù)據(jù)(formdata)
這篇文章主要介紹了JS更簡單的獲取表單中數(shù)據(jù)(formdata),本文給大家分享的js獲取表單數(shù)據(jù)更簡潔,通過兩種方法結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2023-05-05JavaScript中訪問id對象 屬性的方式訪問屬性(實例代碼)
下面小編就為大家?guī)硪黄狫avaScript中訪問id對象 屬性的方式訪問屬性(實例代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10詳解webpack之scss和postcss-loader的配置
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01