在页面中引入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 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
基于jQuery实现点击弹出层实例代码
Jan 01 Javascript
node.js操作mysql简单实例
May 25 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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 foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
QML实现钟表效果
2020/06/02 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
中国双语服务优势的在线购票及活动平台:247tickets
2018/10/26 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
优秀党员事迹材料
2014/12/18 职场文书
预备党员个人总结
2015/02/14 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
课改心得体会范文
2016/01/25 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS