在页面中引入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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
别了 JavaScript中的isXX系列
Aug 01 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
动态加载js、css的实例代码
May 26 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
Javascript webpack动态import
Apr 19 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网站在线人数统计
2008/04/09 PHP
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
javascript如何实现create方法
2019/11/04 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python切片知识解析
2016/03/06 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python 实现二维列表转置
2019/12/02 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
高等教育学自荐书范文
2014/02/10 职场文书
嘉宾邀请函
2015/01/31 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
百日宴上的祝酒词
2015/08/10 职场文书