javascript脚本书写的位置

1 行内

1.1 出现的位置

在标签里面写触发事件

1.2 特点

只能适用于当前标签,其他标签用不了,可扩展性很差

1.3 示例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>行内title>
head>
<body>
   <button onclick="alert('点击我试试')">点击我button>  
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12

1.4 的运行效果截图

在这里插入图片描述

2 内部

2.1 出现的位置

在body标签后面,html标签里面写script标签

2.2 特点

可以控制多个标签

只能适用于当前html网页文件里面的所有标签,

不可被其他html网页复用,因此复用性比较差

且写在一个html文件里面显得耦合性有点高

2.3 示例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>内部title>
head>
<body>
   <button id="btn1">点击我button>  
body>
<script>
    var ele=document.getElementById("btn1");
    ele.onclick=function(){
        alert('内部js脚本测试');
    };
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.4 运行效果截图

在这里插入图片描述

3 外部

3.1 出现的位置

在js文件夹下面写文件后缀名为.js的文件,在.js文件写相应的js代码

3.2 特点

一般采用这个,因为复用性很高,且耦合性也较低

3.3 示例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>外部title>
head>
<body>
   <button id="btn1">点击我button>  
body>
<script src="js/demo.js">script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13

3.4 示例html文件

var ele=document.getElementById("btn1");
ele.onclick=function(){
    alert('外部js脚本测试');
};
1
2
3
4

3.4 运行效果截图

在这里插入图片描述

相关阅读:
好物周刊#7：炫酷的浏览器标签页
pytest7.4版本的一个变更，可能会影响你的项目
一分钟带你了解智能遥测终端机RTU
cors 跨域问题 git pages 前后端分离 vue nest 问题解决+总结
HJ33整数与IP地址间的转换
.NET MAUI 社区工具包 1.3版本发布
Vue defineProps 与 props
【CSS】自定义下拉框
装饰者模式
RHEL7同步ntp时间

原文地址：https://blog.csdn.net/SSS4362/article/details/126713202