在页面中引入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 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
Sep 21 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
js字符串操作总结(必看篇)
Nov 22 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
js实现随机抽奖
Mar 19 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
如何实现动态删除javascript函数
2007/05/27 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
nodejs require js文件入口,在package.json中指定默认入口main方法
2018/10/10 NodeJs
vue 实现锚点功能操作
2020/08/10 Javascript
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
python中lambda与def用法对比实例分析
2015/04/30 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
python读取指定字节长度的文本方法
2019/08/27 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
教育学专业毕业生的自我评价
2013/11/21 职场文书
家长写给孩子的评语
2014/04/18 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
对Keras自带Loss Function的深入研究
2021/05/25 Python
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫