在页面中引入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方法和技巧大全
Dec 27 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
js字符串转成JSON
Nov 07 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
简单两步使用node发送qq邮件的方法
Mar 01 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP通过COM使用ADODB的简单例子
2006/12/31 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
浅谈Python中的数据类型
2015/05/05 Python
python安装与使用redis的方法
2016/04/19 Python
python先序遍历二叉树问题
2017/11/10 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
PyCharm中Matplotlib绘图不能显示UI效果的问题解决
2020/03/12 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
回门宴新郎答谢词
2014/01/12 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
会计求职信范文
2014/05/24 职场文书
企业员工薪酬方案
2014/06/04 职场文书
心理学专业求职信
2014/06/16 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
服务承诺书
2015/01/19 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
企业愿景口号
2015/12/25 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python