在页面中引入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 防止表单重复提交代码
Jan 21 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
vue跨域解决方法
Oct 15 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
使用JS获取页面上的所有标签
Oct 18 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 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
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
如何使用python写截屏小工具
2020/09/29 Python
英国玛莎百货澳大利亚:Marks & Spencer Australia
2019/08/30 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
儿子婚宴答谢词
2014/01/09 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
保卫工作个人总结
2015/03/03 职场文书
感恩教师节主题班会
2015/08/12 职场文书
班主任工作总结范文
2015/08/13 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
详解nodejs内置模块
2021/05/06 NodeJs
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python