首页 > 其他分享 >1.3JS的引入方式

1.3JS的引入方式

时间:2023-01-03 17:13:29浏览次数:34  
标签:文件 内嵌式 1.3 标签 代码 JS 引入

 内嵌式引入

<!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内嵌式和链接式的引入不能使用同一标签

 

标签:文件,内嵌式,1.3,标签,代码,JS,引入
From: https://www.cnblogs.com/2324hh/p/17022808.html

相关文章

  • FetchError: request to https://registry.npmjs.org/swiper failed, reason: connect
    安装swiper插件时,报错,经过下边方法解决后,重新安装swiper,成功! FetchError:requesttohttps://registry.npmjs.org/swiperfailed,reason:connectECONNREFUSED127.0......
  • 基于Mock.js,使用C#生成模拟数据
    获取某前端框架,使用 Mock.js生成模拟数据,想要对api进行改造,并且保留原始数据,需要使用C#重写后端api的数据模拟的内容:Random.guid()uuid:'@uuid',id:'@id......
  • 小程序pako.js GZIP定义解压和压缩的方法 及小程序不能使用window.abot和window.btoa
    今天做了一个小程序幕帘弹框,接口请求返回的是一段压缩了的字符串,我使用了pako.jsGZIP来解压缩,首先安装pako依赖npminstallpakopako.jsGZIP定义解压和压缩的方法解......
  • 前端JS绕过、MIME类型绕过
    文件上传漏洞—前端JS绕过、MIME类型绕过文件上传漏洞的相关讲解基于upload-labs靶场,搭建教程见​​文件上传漏洞靶机搭建教程​​前端JS绕过浏览器访问​​http://127.0.......
  • React 用axios 获取遍历json 引入swiper轮播图
    结构展示:功能展示:1.使用swiper轮播插件,2.自动轮播,当前图片高亮小按钮首先引入swiper和配置环境1.npminstall--saveswiper2.在src文件夹index.js下引入样式,避免打包失败im......
  • 闲话 23.1.3
    闲话我今天下午看着补罢(例行推歌:パラレルガール/雄之助feat.初音ミク是好好听的雄氏老方!抓耳朵又有节奏感!已经在单曲循环了!反正我也不是A层写这个也就图个热闹......
  • js Window对象
    //此属性表示窗口是否以全屏显示。Window.fullScreen//返回一个对history对象的引用。Window.history//history.back();//等同于点击浏览器的回退......
  • js 数组方法
    //定义一个数组varfruits=['香蕉','芒果','橘子','荔枝','樱桃'];//添加元素到数组的末尾,改变原数组varnewLength=fruits.push('香橙');//console.l......
  • js String对象学习
    //charAt()方法从一个字符串中返回指定的字符。letstr='WinterWang'console.log(str.charAt(1))//i//includes()方法用于判断一个字符串是否包含在另一......
  • js 语句
    //try...catch语句标记要尝试的语句块,并指定一个出现异常时抛出的响应。//try如果出现以下情况,catch就抛出一个异常问题所在try{nonExistentFunction();......