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中？

您的项目需求