javascript脚本书写的位置

最新推荐文章于 2024-11-11 19:29:13 发布

SSS4362

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量273

点赞数 2

分类专栏： javascript基础知识文章标签： javascript 前端书写的位置行内、内部、外部解释型语言

本文链接：https://blog.csdn.net/SSS4362/article/details/126713202

版权

javascript基础知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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.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>

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>

3.4 示例html文件

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

3.4 运行效果截图

在这里插入图片描述