目录
1.行内式
在
HTML
标签的内部属性中
编写
JS代码
，
比如事件的引入
代码：
<body>
<div onclick="alert('你触发了点击事件')">行内式引入javascript</div>
</body>
结果：
2.内嵌式
在HTML页面中
编写一个script标签，在这个标签里
编写JS代码
代码：
<body>
<div>内嵌式引入javascript</div>
<script>
const test = document.querySelector('div');
test.onclick = function(){
alert('你触发了点击事件');
}
</script>
</body>
结果：
3.外链式
建立外部.js文件，编写JS代码，然后引入到HTML页面中
代码：
demo.js代码
const test = document.querySelector('div');
test.onclick = function(){
alert('你触发了点击事件');
}html代码
<body>
<div>外链式引入javascript</div>
<script src="./demo.js" type="text/javascript"></script>
</body>
结果：
补充：E6中新增的模块（module）使用
在导出文件中用export导出变量、函数或者类等
在导入文件中用import进行导入
script标签中的type属性为’module’
代码：
demo2.js代码
export const x = '--变量打印--这是es6新增的module';
export function show(){
console.log('--方法调用--这是es6新增的module');
}html代码
<body>
<div>es6中新增的module使用</div>
<script type="module">
import {x,show} from './demo2.js'
console.log(x);
show();
</script>
</body>
结果：
ps：模块并不是对象，模块的使用分为两个部分：定义模块和使用模块，一般位于不同的文件中，模块的调用要比导入js文件更加强大。