在页面中引入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 相关文章推荐
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
node.js实现端口转发
Apr 14 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
详解vue 组件之间使用eventbus传值
Oct 25 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
[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
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
JavaScript 学习初步 入门教程
2010/03/25 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
bootstrap table实例详解
2017/01/06 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
高中数学教学反思
2014/01/30 职场文书
升国旗仪式主持词
2014/03/19 职场文书
体育之星事迹材料
2014/05/11 职场文书
2014年教研工作总结
2014/12/06 职场文书
护士求职自荐信
2015/03/25 职场文书
个人合作协议范本
2015/08/06 职场文书
初中政治教学工作总结
2015/08/13 职场文书
《灰雀》教学反思
2016/02/19 职场文书