学习 JavaScript(二)在 HTML 中使用 JS
基本用法
在 HTML 中使用 <script>
元素引入 Javascript , <script>
有以下 4 个常用属性:
- async: 异步加载,只对外部脚步有效。
- defer: 规定是否对脚本执行进行延迟,直到页面加载为止。如果脚本不会改变文档的内容,可将 defer 属性加入到
<script>
标签中,以便加快处理文档的速度,同样只对外部脚步有效。 - src: 引入外部脚本文件.
- type:规定脚本的 MIME 类型。
MIME :多用途Internet邮件扩展(MIME,Multipurpose Internet Mail Extensions)类型 是一种标准化的方式来表示文档的性质和格式。 MIME 类型由两部分组成:媒介类型和子类型。对于 JavaScript,其 MIME 类型是 "text/javascript"。
以上四个常用的属性,只有 type 是必选的,其他的都是可选。如果要通过引入外部脚本, 那么 src 属性是必需的。
<script type="text/javascript">
function sayScript(){
alert('Hell Word')
}
</script>
嵌入代码和外部文件
嵌入代码就是写在 <script>
标签内部的代码,比如:
<script type="text/javascript">
function sayScript(){
alert('Hell Word')
}
</script>
而外部文件则是通过 src 属性进行引入的,比如:
<script src='./hello.js' type="text/javascript"></script>
外部文件相比直接嵌入代码,有以下优点:
- 可维护,写在专门管理 JS 的文件夹下,开发人员能专心对付 JS 。
- 可缓存,如果有两个 HTML 引入同一个 JS 文件,就可以只让浏览器下载一次,起到缓存的作用。
但是,外部文件有它的缺点,就是外部文件如果在我们的控制范围之外,容易遭受攻击。比如,引用一个心怀不轨的人开发的组件,被他修改起来是相当容易的。
脚本解析的顺序
1.传统做法:将外部文件放在 标签中,页面等到 JavaScript 文件加载完毕,遇到 标签才开始加载页面。
<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
<script src="index.js"></script>
</head>
<body>
//主体内容
</body>
</html>
2.比较取巧的办法:将 JavaScript 代码放到 中,用户会因为看到了仅仅加载了空白的页面就会感觉到页面打开变快了。
<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
</head>
<body>
<script src="index.js"></script>
//主体内容
</body>
</html>
3.手动延迟加载:在 <script>
标签中加入 defer 属性,作用是让页面加载完毕后再加载 JavaScript 文件。 defer 的意思就是“推迟”,光看字面上的意思就能理解。
<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
<script src="index.js" defer="defer"></script>
</head>
<body>
//主体内容
</body>
</html>
4.异步脚本:HTML5 给 <script>
标签定义了 async 属性,这个属性和 defer 的作用类似,不同的是, defer 一般是按照 <script>
的排列顺序执行加载的,而 async 不按套路走。
<!DOCTYPE html>
<html lang="en">
<head>
<title>KurryLuo 的个人站</title>
<script src="index1.js" defer="defer"></script>
<script src="index2.js" defer="defer"></script>
</head>
<body>
//主体内容
</body>
</html>
上面代码中的 index2.js 可能比 index1.js 先加载,所以两者之间最好不要有任何联系,比如复用组件。同时,这两个脚步在加载时,也尽量不要修改 DOM 节点。
欢迎大家关注微信公众号:可视化技术( visteacher )
不仅有前端和可视化,还有算法、源码分析、书籍相送
各个分享平台的 KurryLuo 都是在下。
用心学习,认真生活,努力工作!
学习 JavaScript(二)在 HTML 中使用 JS的更多相关文章
- JavaScript:学习笔记(1)——在HTML中使用JS
在HTML中使用JavaScript <script>元素 1.直接在网页中嵌入JS代码 说明: 请不要在代码的任何地方出现</script>字符串 这是由于解析嵌入式代码的规 ...
- 轻松学习JavaScript二十七:DOM编程学习之事件模型
在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- Spring学习(二)——Spring中的AOP的初步理解[转]
[前面的话] Spring对我太重要了,做个关于web相关的项目都要使用Spring,每次去看Spring相关的知识,总是感觉一知半解,没有很好的系统去学习一下,现在抽点时间学习一下Spring. ...
- Spring学习(二)——Spring中的AOP的初步理解
[前面的话] Spring对我太重要了,做个关于web相关的项目都要使用Spring,每次去看Spring相关的知识,总是感觉一知半解,没有很好的系统去学习一下,现在抽点时间学习一下Spring.不知 ...
- Java学习笔记二十:Java中的内部类
Java中的内部类 一:什么是内部类: (1).什么是内部类呢? 内部类( Inner Class )就是定义在另外一个类里面的类.与之对应,包含内部类的类被称为外部类. (2).那为什么要将一个类定 ...
- 深入学习JavaScript(二)
函数表达式和函数声明 函数声明 function 函数名(参数){函数体} 函数表达式 function 函数名(可选)(参数){函数体} 示例: function foo(){} // 声明,因为它 ...
- JavaScript二维码生成——qrcode.js
在开发中,有时候,我们需要根据不同的内容来动态生成二维码,则可以使用qrcode.js这个小插件来实现. 1.qrcode.js文件内容: (1)未压缩(qrcode.js): /** * @file ...
- nodejs学习(二) ---- express中使用模板引擎jade
系列教程,上一节教程 express+nodejs快速创建一个项目 在创建一个项目后,views目录下的文件后缀为 .jade . 打开 index.jade,具体内容如下图(忽略 header.j ...
- 学习javaScript必知必会(1)~js介绍、函数、匿名函数、自调用函数、不定长参数
一.简单了解一下JavaScript(js) 1.什么是js? js:是网景公司开发的,是基于客户端浏览器, 面向(基于)对象.事件驱动式的页面脚本语言. 2.什么场景下使用到js? 表单验证.页面特 ...
随机推荐
- 解决iframe在移动端(主要iPhone)上的问题
前言 才发现已经有一段时间没有写博客了,就简单的说了最近干了啥吧.前段时间忙了杂七杂八的事情,首先弄了个个人的小程序,对的,老早就写了篇从零入手微信小程序开发,然后到前段时间才弄了个简单的个人小程序, ...
- JDK及JRE目录结构
JDK文件结构及目录: c:\jdk1.7.0: JDK安装根目录,包括版权.许可证和READEME文件,还包含ser.zip记录Java平台档案. c:\jdk1.7.0\bin 包含在Java开发 ...
- Flask入门之结构重组(瘦身)-第13讲笔记
1. pip list Flask 0.10.1 Flask-Bootstrap 3.3.5.6 Flask-SQLAlchemy 2 Flask-Script 2.0.5 Flask-WTF 0.1 ...
- Cookie熟知
Cookie能干什么 会话(cookie,session)技术的一种.因为http协议是无状态的,每次都是基于一个请求一个响应.每次请求和响应都跟上次没有关系.我们需要记录之前对话信息.cookie技 ...
- Servlet知识点总结
一, ServletAPI中有4个Java包: 1.javax.servlet:其中包含定义Servlet和Servlet容器之间契约的类和接口 2.javax.servlet.http:其中包含定义 ...
- iOS webservice接口soap协议调用遇到的问题
这是第一次调webservice的接口,并且后台没太做过移动端的接口,所以遇到了很多让人崩溃的困难.吃一堑长一智,所以这种时候懒得写博客的我就要趁着这股热乎劲把这次的过程记录下来啦~ 首先要做的就是, ...
- Myeclipse10破解版安装包
下载地址;http://pan.baidu.com/s/1pLka0un
- posix,perl正则表达式区别
1.正则表达式(Regular Expression,缩写为regexp,regex或regxp),又称正规表达式.正规表示式或常规表达式或正规化表示法或正规表示法,是指一个用来描述或者匹配一系列符合 ...
- spring security oauth2
https://connect.qq.com/manage.html#/ http://wiki.connect.qq.com/%E7%BD%91%E7%AB%99%E5%BA%94%E7%94%A8 ...
- ScalaPB(5):用akka-stream实现reactive-gRPC
在前面几篇讨论里我们介绍了scala-gRPC的基本功能和使用方法,我们基本确定了选择gRPC作为一种有效的内部系统集成工具,主要因为下面gRPC支持的几种服务模式: .Unary-Call:独立 ...