1.3JS的引入方式

灰太狼 2023-09-30 18:22 4阅读 0赞

内嵌式引入

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="utf-8" />
                    <title></title>
                    
                    <script type="text/javascript">
                            
                            /*定义一个函数(方法)*/
                            function fun1(){
                                    /*弹窗提示一点信息 */
                                    alert("你好")
                            }
                            
                            
                    </script>
            </head>
            <body>
                    
                    <input type="button" value="点我呀" onclick="fun1()" />
                    
            </body>
    </html>

![a639a7beb9d2e34e2f561c947124136e.gif][]

![4d9e630d8ea4b0e26530c9618bd47432.gif][]

缺点:

1我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低

2 JS代码和HTML代码混合在一个文件中,可阅读性差

链接式引入

![483c147382b561fb6df2d67d34d4e9be.png][]

将JS代码放入外部JS文件中,通过script标签引入

<!DOCTYPE html>
    <html>
            <head>
                    <meta charset="UTF-8">
                    <title></title>
                    
                    <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>

![de10c24c2ce5f1c1a323fc0fc3cbc76a.gif][]

![01dd1c22e4259967c0890a8d4474ef01.gif][]

优点:

代码复用度高,更易于维护代码

注意事项:

1在一个页面上可以同时引入多个JS文件

2每个JS文件的引入都要使用一个独立的script标签

3内嵌式和链接式的引入不能使用同一标签

[a639a7beb9d2e34e2f561c947124136e.gif]: https://img-blog.csdnimg.cn/img_convert/a639a7beb9d2e34e2f561c947124136e.gif
[4d9e630d8ea4b0e26530c9618bd47432.gif]: https://img-blog.csdnimg.cn/img_convert/4d9e630d8ea4b0e26530c9618bd47432.gif
[483c147382b561fb6df2d67d34d4e9be.png]: https://img-blog.csdnimg.cn/img_convert/483c147382b561fb6df2d67d34d4e9be.png
[de10c24c2ce5f1c1a323fc0fc3cbc76a.gif]: https://img-blog.csdnimg.cn/img_convert/de10c24c2ce5f1c1a323fc0fc3cbc76a.gif
[01dd1c22e4259967c0890a8d4474ef01.gif]: https://img-blog.csdnimg.cn/img_convert/01dd1c22e4259967c0890a8d4474ef01.gif