在页面中引入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 25 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
javascript的几种写法总结
Sep 30 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
vue实现计算器功能
Feb 22 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
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python实现简易内存监控
2018/06/21 Python
python实现推箱子游戏
2020/03/25 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python函数参数分类原理详解
2020/05/28 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
美国婴儿用品及配件购买网站:Munchkin
2019/04/03 全球购物
大学生演讲稿范文
2014/01/11 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
珍惜水资源建议书
2014/03/12 职场文书
幼儿生日活动方案
2014/08/27 职场文书
办理房产证委托书
2014/09/18 职场文书
办理护照工作证明
2014/10/10 职场文书
小学庆六一主持词
2015/06/30 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python