JS高程2.在HTML中使用Javascript(2)

1.延迟脚本defer

  在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但是延迟执行。<script>中的脚本会延迟到浏览器遇到</html>标签后再执行。

注:

  (1)html5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。

  在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。

  (2)html5规定,defer属性只适用于外部脚本文件,因此html会忽略给嵌入脚本设置defer属性。

  ie4~ie7还支持对嵌入脚本的defer属性,但是ie8开始则完全支持html5的规范。

  (3)有些浏览器会忽略defer属性,像平常一样处理脚本,为此,把延迟脚本放在页面的底部仍然是最佳的选择。

2.异步脚本async

  async属性可以不让页面等待脚本的下载和执行,从而异步加载页面的其他内容。为此,建议异步脚本不要在加载期间修改DOM。

注:

  async只适用于外部脚本文件,并告诉浏览器立即下载文件。但是defer不同的是,标记问async的脚本并不按照指定它们的先后顺序执行。

  异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。

3.在XHTML(Extensible HyperText Markup Language)中的用法比html严格很多。

eg:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Test</title>
 6     <script type="text/javascript">
 7      function compare(a,b){
 8          if(a <b){
 9              alert("A is less than B");
10          }
11          else if(a > b){
12              alert("A is greater than B");
13          }
14          else{
15              alert("A is equal to B");
16          }
17      }
18 </script>
19 </head>
20 <body>
21     <button type="button" onclick="compare(3,10)">Try it</button>
22 </body>
23 </html>

运行结果:

 

同样的代码在xhtml中是无效的,结果如下:

  因为比较语句a < b中的小于号“<”号在xhtml中将被当做开始一个新标签来解析。但是作为标签来讲,小于号后面不能跟空格,因此导致语法错误。

P15~P17内容后续理解。

时间: 2024-08-10 17:22:00

JS高程2.在HTML中使用Javascript(2)的相关文章

JS高程2.在HTML中使用Javascript(1)

1.使用<script>元素向HTML页面中插入Javascript HTML4.01中<script>标签有6个属性: (1)async:可选.表示立即下载脚本,不影响页面中其他资源的下载.只对外部脚本文件有效. (2)charset:可选.表示通过scr属性指定的代码的字符集.(因为大多数浏览器会忽略它,所以很少人用) (3)defer:可选.表示脚本会延迟到文档完全被解析和显示之后在执行.只对外部脚本有效.IE7及更早的嵌入式脚本也支持该属性. (4)language:已废弃

【读书】《高程3》CH2--在HTML中使用JavaScript

在HTML中使用JavaScript <script>元素 向HTML页面插入JavaScript的主要方法,就是使用<script>元素.<script>定义了下列几个属性: type:可选.表示编写代码使用的脚步语言的内容类型(也称为MIMI类型).通常这个属性是text/javascript,不过不是必须的. src:可选.表示包含要执行的代码的外部文件. async:可选.表示应该立即下载脚步,但不妨碍页面中的其他操作(只对外部脚步有效). defer:可选.表

第2章 两种调用JS的方法——在HTML中使用JavaScript

一. <script>标记 第一种方法是把 <sript></script>直接放到head和script两个标记之间(title下面,</head>上面) <head>... <title>demo</title> <script type=”text/java script”> /*type属性常被忽略掉.脚本默认是js,所以<script type=”text/java script”>可直接

JS基础知识回顾:在HTML中使用JavaScript

想HTML页面中插入JavaScript的主要方法就是使用<script>元素. HTML4.01当中为<script>元素定义了下列6个属性: language(已废弃):原来用于表示编写代码使用的脚本语言,如JavaScript.JavaScript1.2.VBScript等,由于大多数浏览器会忽略此属性,因此就没有必要再用了: type(可选):可以看成是language的替代属性,表示编写代码使用的脚本语言的内容类型,也被称作MIME类型,在未指定此属性的情况下会被默认为t

在SharePoint解决方案中使用JavaScript (1) – 引用.js文件

本文是系列文章的第一篇. 在SharePoint解决方案中使用JavaScript (0) ? 作为在SharePoint应用程序中使用JavaScript的第一步,就是要知道如何将一个写好的.js文件,引用到页面上.嗯,你可能觉得这个话题太简单了,"引用一个.js文件不就是在页面上方加一个<script>标签吗?"但是我们要考虑的事情,可通常要比这复杂得多.比如,我们大部分的.js文件,可能都是需要放置在网站中的所有页面上的,修改网站里面的每一个.aspx显然不是好主意,

《JS高程》事件学习笔记

事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. ------------------------------------------------------------------------------------------------------------- 一.事件流 事件流:描述的是页面中接收事件的顺序. IE:事件冒泡流,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档): NetScape:事件捕获流,即不太具体的节

JS高程读书笔记-第一、二章-内附在线思维导图和quizlet卡片

之前在kindle上买了高程,今天又到了纸质的<JavaScript语言精粹>,<高性能JavaScript>,<JavaScipt设计模式>,开始读书之旅啦. 我在思考如何才能高效的理解书中的内容,练习代码肯定是必要的. 同时我想思维导图+quizlet卡片复习是可以尝试的方法,思维导图可以理出清楚的脉络,再将需要记忆的知识点放在卡片中进行记忆. 前两章的思维导图如图,在线交互式的在:https://www.processon.com/view/link/56f35d

JavaScript高级程序设计(2)在HTML中使用JavaScript

本章内容:使用<script>元素.嵌入脚本与外部脚本.文档模式对JavaScript的影响.考虑禁用JavaScript的场景. 1.<script>元素 向HTML页面中插入JavaScript的主要方法,就是使用<script>元素.HTML4.01为<script>定义了下列属性: async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示应该通过src属

js-js实现,在HTML中使用JavaScript,基本概念

Js实现: 1.JavaScript实现的组成: 核心(ECMAScript):由ECMA-262定义,提供核心语言功能 文档对象模型(DOM)提供访问和操作网页内容的方法以及接口 浏览器对象模型(BOM):提供与浏览器交互的方法以及接口 在HTML中使用JavaScript 1.<script>元素: <async>:可选的,表示应该立即下载脚本,但不应该妨碍页面中的其他操作,比如下载其他资源.但这只对外部脚本有效 <charset>:可选.表示通过src属性指定的代