編寫第一個JavaScript程序


編寫第一個程序

在 HTML 頁面中嵌入 JavaScript 腳本需要使用 <script> 標簽,用戶可以在 <script> 標簽中直接編寫 JavaScript 代碼,具體步驟如下。

第 1 步,新建 HTML 文檔,保存為 test.html。

第 2 步,在 <head> 標簽內插入一個 <script> 標簽。

第 3 步,為 <script> 標簽設置type="text/javascript"屬性。

現代瀏覽器默認 <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 對象的方法,調用該方法將彈出一個提示對話框,顯示參數字符串 "Hi, JavaScript!"。

第3步,保存 JavaScript 文件。在此建議把 JavaScript 文件和網頁文件放在同一個目錄下。

JavaScript 文件不能夠獨立運行,需要導入到網頁中,通過瀏覽器來執行。使用 <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 代碼。

如果嵌入了代碼,則只會下載並執行外部 JavaScript 文件,嵌入代碼將被忽略。

執行 JavaScript 程序

瀏覽器在解析 HTML 文檔時,將根據文檔流從上到下逐行解析和顯示。

JavaScript 代碼也是 HTML 文檔的組成部分,因此 JavaScript 腳本的執行順序也是根據 <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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM