JS引入方式

EmoGP

已于 2024-09-06 15:31:30 修改

阅读量545

点赞数 12

分类专栏：前端文章标签： javascript 前端开发语言

于 2024-09-06 15:30:34 首次发布

本文链接：https://blog.csdn.net/qq_43494013/article/details/141960789

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

目录标题

- 一、内部脚本方式引入
- 二、外部脚本方式引入

JS有两种引入方式：

内部脚本方式引入
外部脚本方式引入

一、内部脚本方式引入

在页面中,通过一对script标签引入JS代码
script代码放置位置具备一定的随意性,一般放在head标签中居多

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小标题</title>
<style>
/* 通过选择器确定样式的作用范围 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
<script>
function suprise(){
alert("Hello,我是惊喜")
}
</script>
 </head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>

效果：
在这里插入图片描述

二、外部脚本方式引入

内部脚本仅能在当前页面上使用,代码复用度不高
可以将脚本放在独立的js文件中,通过script标签引入外部脚本文件
一对script标签要么用于定义内部脚本,要么用于引入外部js文件,不能混用
一个html文档中,可以有多个script标签

抽取脚本代码到独立的js文件中

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小标题</title>
<style>
/* 通过选择器确定样式的作用范围 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
 border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
<script src="button.js" type="text/javascript"></script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>