1.3JS的引入方式

最新推荐文章于 2024-05-28 11:44:38 发布

BookerABC

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量139

点赞数

分类专栏： javaScript 文章标签： javascript 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/booker009/article/details/128536017

版权

javaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

内嵌式引入

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

BookerABC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.3JS的引入方式

1我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低。2 JS代码和HTML代码混合在一个文件中,可阅读性差。将JS代码放入外部JS文件中,通过script标签引入。2每个JS文件的引入都要使用一个独立的script标签。1在一个页面上可以同时引入多个JS文件。3内嵌式和链接式的引入不能使用同一标签。代码复用度高,更易于维护代码。
复制链接

扫一扫