1.3JS的引入方式
内嵌式引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--内嵌式引入方式
1在head标签中,用一对script标签,嵌入JS代码
2type属性可以省略不写
-->
<script type="text/javascript">
/*定义一个函数(方法)*/
function fun1(){
/*弹窗提示一点信息 */
alert("你好")
}
</script>
</head>
<body>
<input type="button" value="点我呀" onclick="fun1()" />
</body>
</html>
缺点:
1我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低
2 JS代码和HTML代码混合在一个文件中,可阅读性差
链接式引入
将JS代码放入外部JS文件中,通过script标签引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--链接式 引入外部JS文件
提高的代码复用度
降低了代码维护的难度
1 一个页面可以同时引入多个不同的JS文件
2 script标签一点用于引入外部JS文件,就不能在中间定义内嵌式代码
3 一个页面上可以用多个script标签 位置也不是非得放到head标签中不可
4src属性可以指向一个网络路径,就是第三种引入方式
-->
<script type="text/javascript" src="js/myjs.js"></script>
<script type="text/javascript" src="js/myjs2.js"></script>
<!--<script type="text/javascript" src="URL网络路径"></script>
</head>
<body>
<input type="button" value="点我呀" onclick="fun1()" />
<input type="button" value="点我呀2" onclick="fun2()" />
<input type="button" value="点我呀3" onclick="fun3()" />
<script >
function fun3(){
alert("总能见到你")
}
</script>
</body>
</html>
优点:
代码复用度高,更易于维护代码
注意事项:
1在一个页面上可以同时引入多个JS文件
2每个JS文件的引入都要使用一个独立的script标签
3内嵌式和链接式的引入不能使用同一标签
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了