在页面中引入js的两种方法(推荐)


Posted in Javascript onAugust 29, 2017

在页面中引入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>

以上这篇就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript背投广告代码的完善
Apr 08 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
Nov 11 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 #Javascript
使用canvas进行图像编辑的实例
Aug 29 #Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 #jQuery
js使用html2canvas实现屏幕截取的示例代码
Aug 28 #Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 #Javascript
Angular4开发解决跨域问题详解
Aug 28 #Javascript
JavaScript实现各种排序的代码详解
Aug 28 #Javascript
You might like
PHP初学者头疼问题总结
2006/07/08 PHP
用PHP将数据导入到Foxmail
2006/10/09 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
PHP实现分布式memcache设置web集群session同步的方法
2018/04/10 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
javascript每日必学之循环
2016/02/19 Javascript
javascript中的面向对象
2017/03/30 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
python实现简易云音乐播放器
2018/01/04 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
网吧消防安全制度
2014/01/28 职场文书
公司活动方案范文
2014/03/06 职场文书
家长写给老师的建议书
2014/03/13 职场文书
停水通知
2015/04/16 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
初中生入团申请书范文(五篇)
2019/10/16 职场文书
详解python的异常捕获
2022/03/03 Python