• 技术文章 >web前端 >js教程

    页面内引入js有哪些方法

    php中世界最好的语言php中世界最好的语言2018-04-18 15:18:35原创1009

    这次给大家带来页面内引入js有哪些方法,页面内引入js的注意事项有哪些,下面就是实战案例,一起来看一下。

    在页面中引入js有两种基本方式:在页面中嵌入js、引用外部js文件。

    一、在页面中嵌入js

    这是在页面使用js最简单的方式了,一般我在写个小测试的情况下会用这种方式。

    把script元素写在</body>前面,script元素的内容就是js代码。像这样:

    <script>
    // 在这里写js
    function test(){
    alert('说点什么呢'); 
    }
    test();
    </script>

    二、引用外部js文件

    引用外部js文件,可以使js文件和HTML文件相分离、一个js文件可被多个HTML文件使用、维护起来也更方便等等。

    用法是把script元素的src属性,设置为js文件的URL即可,如:

    <script src="js/test.js"></script>

    三、script元素在HTML文件中的位置

    如果把script元素放在head元素里,就像这样:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <script src="xxx.js"></script>
    </head>
    <body>
    <!--页面内容-->
    </body>
    </html>

    这样做的话,待浏览器经过下载、解析、执行完js文件之后,才会呈现页面内容。如果一个页面需要很多个js文件,那么浏览器可能会出现短暂的“白板”,用户体验不好。

    所以,我们应该把js文件放在</body>的前面,这样浏览器会先展现页面给用户。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <!--<script src="xxx.js"></script>-->
    </head>
    <body>
    <!--页面内容-->
    <script src="xxx.js"></script>
    </body>
    </html>

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    HTML标签与DOM节点结合

    js禁止浏览器后退事件

    JS点击循环切换播放图片

    以上就是页面内引入js有哪些方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 方法 哪些
    上一篇:js链表使用详解 下一篇:node.js操作音视频文件进行加密
    Web大前端开发直播班

    相关文章推荐

    • JavaScript经典基础详解之函数• 聊聊V8的内存管理与垃圾回收算法• 你能搞懂JS的this指向问题吗?看看这篇文章• 值得了解的几个实用JavaScript优化小技巧• 浅析Angular中怎么用 Api 代理

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网