JavaScript代碼怎樣引入到HTML中？

avaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過(guò) <script> 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
1.內(nèi)部方式
內(nèi)部方式是通過(guò)<script>標(biāo)簽包裹JavaScript代碼,從而引入HTML頁(yè)面中，示例代碼如下：

<!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>JavaScript 基礎(chǔ) - 引入方式</title>
 </head>
 <body>
   <!-- 內(nèi)聯(lián)形式：通過(guò) script 標(biāo)簽包裹 JavaScript 代碼 -->
   <script>
     alert('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')
   </script>
 </body>
 </html>

2.外部形式

一般將 JavaScript 代碼寫在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過(guò) <script>標(biāo)簽的 <src>屬性引入，示例代碼如下：

// demo.js
document.write('嗨，歡迎來(lái)傳智播學(xué)習(xí)前端技術(shù)！')

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

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

avaScript代碼與HTML+CSS一起實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)的效果，那如何將JavaScript代碼嵌入到HTML代碼中呢，下面我們用HBuilder編輯器來(lái)講解3種引入方式：

1. 使用<script>..…</script>標(biāo)簽對(duì)

將js代碼直接寫在script標(biāo)簽對(duì)里。Script標(biāo)簽既可以寫在head標(biāo)簽里面也可以寫在body標(biāo)簽里面。

注意：

如果JavaScript代碼放置于<head>標(biāo)簽中：主要用于完成所需的后臺(tái)任務(wù)

如果JavaScript代碼置于<body>標(biāo)簽中，用于顯示內(nèi)容。

2. 引入外部的JavaScript文件

這種方式一般在企業(yè)工作中會(huì)用的多，因?yàn)楸ＷC了js代碼和html代碼的分別獨(dú)立，相互干擾性小（低耦合）。

mylife.js文件如下：直接寫入js代碼，js文件中一定不能再出現(xiàn)<script>..…</script>b標(biāo)簽對(duì)！

3. 偽URL引入

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

如果你想了解更多“JavaScript”方面的知識(shí)，請(qǐng)持續(xù)關(guān)注我：吉爾JIL程序員，歡迎想學(xué)習(xí)的朋友咨詢我！

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

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

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

npm install -g typescript

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

當(dāng)我嘗試把《WebGL編程指南》中的代碼轉(zhuǎn)換到TypeScript進(jìn)行練習(xí)時(shí)，執(zhí)行tsc命令編譯報(bào)錯(cuò)，提示找不到getWebGLContext這個(gè)方法，這個(gè)方法是本書作者提供的js庫(kù)cuon-utils.js中的方法。

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

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

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

還有些細(xì)節(jié)的地方需要變動(dòng)，這里列出全部代碼并在變動(dòng)的地方添加了注釋。

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程序：清空繪圖區(qū)</title>
</head>
<!-- 原來(lái)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"來(lái)支持模塊的import export -->
    <script type="module" src="./built/src/HelloCanvas.js"></script>
</body>
</html>

HelloCanvas.ts：

在線咨詢

上一篇：清新漂亮簡(jiǎn)約好看的個(gè)人博客網(wǎng)站模板
下一篇：第五節(jié) css浮動(dòng)屬性 #前端開發(fā)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

JavaScript代碼怎樣引入到HTML中？

您的項(xiàng)目需求