在页面中引入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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
js实现进度条的方法
Feb 13 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 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
日本十大惊悚动漫
2020/03/04 日漫
PHP 中的批处理的实现
2007/06/14 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
python中set常用操作汇总
2016/06/30 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python mysql断开重连的实现方法
2019/07/26 Python
CSS+jQuery实现的在线答题功能
2015/04/25 HTML / CSS
html5画布旋转效果示例
2014/01/27 HTML / CSS
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
安全生产管理责任书
2014/04/16 职场文书
活动总结怎么写
2014/04/28 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
网络销售员岗位职责
2015/04/11 职场文书
停水通知
2015/04/16 职场文书
《迟到》教学反思
2016/02/24 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL