JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨立運行，它需要被嵌入 HTML 中，然后瀏覽器才能執行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內部方式
內部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎 - 引入方式</title>
 </head>
 <body>
   <!-- 內聯形式：通過 script 標簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來傳智播學習前端技術！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨立的以 .js 結尾的文件中，然后通過 <script>標簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來傳智播學習前端技術！')

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎 - 引入方式</title>
 </head>
 <body>
   <!-- 外部形式：通過 script 的 src 屬性引入獨立的 .js 文件 -->
   <script src="demo.js"></script>
 </body>
 </html>

注意：如果 script 標簽使用 src 屬性引入了某 .js 文件，那么標簽的代碼會被忽略！！！如下代碼所示：

avaScript代碼與HTML+CSS一起實現動態網頁的效果，那如何將JavaScript代碼嵌入到HTML代碼中呢，下面我們用HBuilder編輯器來講解3種引入方式：

1. 使用<script>..…</script>標簽對

將js代碼直接寫在script標簽對里。Script標簽既可以寫在head標簽里面也可以寫在body標簽里面。

注意：

如果JavaScript代碼放置于<head>標簽中：主要用于完成所需的后臺任務

如果JavaScript代碼置于<body>標簽中，用于顯示內容。

2. 引入外部的JavaScript文件

這種方式一般在企業工作中會用的多，因為保證了js代碼和html代碼的分別獨立，相互干擾性小（低耦合）。

mylife.js文件如下：直接寫入js代碼，js文件中一定不能再出現<script>..…</script>b標簽對！

3. 偽URL引入

這種方式一般以“JavaScript: XXXXX”的格式出現，后面直接跟js代碼。

如果你想了解更多“JavaScript”方面的知識，請持續關注我：吉爾JIL程序員，歡迎想學習的朋友咨詢我！

ypeScript是由微軟開發的自由和開源的編程語言，它是JavaScript語言的超集，主要增加了類型檢查的能力，目標是為了支持大型項目的開發，原生的JavaScript可以原封不動在TypeScript語言里使用。TypeScript的語言很像Java這樣的后端語言，轉換到TypeScript讓你開啟了全棧能力的征程。

但是直接從JavaScript切換到TypeScript并非沒有代價，可以參考從 JavaScript 遷移到 TypeScript - TypeScript 中文手冊掌握切換的一般步驟，不過按照指導操作我還是遇到別的問題，本文以《WebGL編程指南》一書的示例代碼為例介紹我遇到的問題以及解決辦法。

注意使用TypeScript編寫的代碼并不能直接運行，還是需要編譯成JavaScript才行，首先使用npm命令全局安裝TypeScript。

npm install -g typescript

安裝成功后，cmd執行tsc -v如果成功打印版本則表示安裝成功。

當我嘗試把《WebGL編程指南》中的代碼轉換到TypeScript進行練習時，執行tsc命令編譯報錯，提示找不到getWebGLContext這個方法，這個方法是本書作者提供的js庫cuon-utils.js中的方法。

示例代碼位置：
《WebGL編程指南》第2章WebGL入門中的一個示例“最短的WebGL程序：清空繪圖區”，16頁。
源碼倉庫鏈接：https://github.com/GrayMind/WebGL-Programming-Guide.git/

解決這個問題可以通過在tsconfig.json這個TypeScript工程管理配置中設置，在include中引入lib這個目錄即可，這樣TypeScript就能識別提示不存在的方法了，再次執行tsc命令編譯就不會報錯了，getWebGLContext方法就可以正常使用了（不過TypeScript做了檢查，需要把第二個參數傳入，默認為false）。

{
    "compilerOptions": {
        "outDir": "./built",
        "allowJs": true,
        "target": "es6"
    },
    "include": [
        "./src/*", 
        "./lib/*",      // 這里引入lib目錄，TypeScript就會包含引入其中的js文件了
    ]
}

還有些細節的地方需要變動，這里列出全部代碼并在變動的地方添加了注釋。

HelloCanvas.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最短的WebGL程序：清空繪圖區</title>
</head>
<!-- 原來body中的onload="main()"不再需要了 -->
<body>
    <canvas id="webgl" width="400" height="400">
        您的瀏覽器不支持WebGL
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <!-- script元素要增加type="module"來支持模塊的import export -->
    <script type="module" src="./built/src/HelloCanvas.js"></script>
</body>
</html>

HelloCanvas.ts：

在線咨詢

上一篇：清新漂亮簡約好看的個人博客網站模板
下一篇：第五節 css浮動屬性 #前端開發

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript代碼怎樣引入到HTML中？

您的項目需求