《Professional JavaScript for Web Developers》day02

1.在HTML中使用JavaScript

1.1 <script>元素

HTML4.01为<script>定义了下列6个属性。

1)async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

2)charset:可选。表示通过src属性指定的代码的字符集(大多数浏览器会忽略它的值,因此这个属性很少有人用。)

3)defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。

4)src:可选。表示包含要执行代码的外部文件。

5)language:已废弃。原来用于表示编写代码使用的脚本语言。

6)type:可选。可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(即MIME类型)目前type属性的值依然还是text-JavaScript。不过,这个属性并不是必须的,如果没有指定这个属性,默认值仍是text-JavaScript

1.1.1 标签的位置

现代web应用程序一般都把全部JavaScript应用放在<body>元素中页面内容的后面,如下所示:

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example.js"></script>
</body>
</html>

这样,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。 而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了

1.1.2 延迟脚本

HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕再运行。因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

因为有些浏览器会忽略这个属性,因此把延迟脚本放在页面底部仍是最佳选择。

1.1.3 异步脚本

HMTL5为<script>元素定义了async属性。这个属性与defer类似,都用于改变处理脚本的行为。且只适用于外部脚本,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定他们的先后顺序执行。

<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

以上代码中,第二个脚本可能会在第一个脚本之前执行。因此,确保两者之间互不依赖非常重要。指定async的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面的其他内容。为此,建议异步脚本不要在加载期间修改DOM

在XHTML中,要把async属性设置为 async = “async”

1.1.4 在XHMTL中的用法:略

1.1.5 不推荐使用的语法:略

1.2 文档模式

IE5.5引入了文档模式的概念,而这个概念是通过文档类型(doctype)切换实现的。

最初的两种文档模式是:混杂模式和标准模式。这两种模式主要影响CSS内容的呈现,但在某些情况下,也会影响JavaScript的解释执行。

在之后,IE又提出一种所谓的准标准模式。不标准的地方主要体现在处理图片间隙的时候(在表格中使用图片时,问题最明显)

如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法,因为不同浏览器在这种模式下的行为差异非常大,如果不适用某些hack技术,跨浏览器的行为根本就没有一致性可言。

对标准模式,可以通过使用下面任何一种文档类型来开启:

<!-- HTML 4.01 严格型 -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBILC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<!-- HTML 5 -->
<!DOCTYPE hmtl>

而对于准标准模式,则可以通过使用过渡型或框架集型文档类型来触发,如下所示:

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//En" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitonal//EN" "http://www.w3.org/TR/xhtml1/DTD/Xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/Xhtml1-frameset.dtd">

准标准模式与标准模式非常接近,它们的差异几乎可以忽略不计。因此,当有人提到“标准模式”时,有可能是指这两种模式中的任何一种。

1.3 <noscript>元素

早期浏览器都面临一个特殊的问题,即当浏览器不支持JavaScript时如何让页面平稳的退化。对这个问题最终解决方案就是创造一个<noscript>元素,用以在不支持JavaScript的浏览器中显示代替的内容。这个元素可以包换出现在文档<body>中的任何HMTL元素(<script>除外)包含在<noscript>元素中的内容只有在下列情况下才显示出来:

1)浏览器不支持脚本

2)浏览器支持脚本,但脚本被禁用。

符合上述任何一个条件,浏览器都会显示<noscript>中的内容。而在除此之外的其他情况下,浏览器不会呈现<noscript>中的内容

<html>
<head>
<title>Example HTML page</title>
     <script type="text/javascript" defer="defer" src="example1.js"></script>
</head>
<body>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript。
</noscript>
<body>
</html>

《Professional JavaScript for Web Developers》day02的更多相关文章

  1. 《Professional JavaScript for Web Developers》day01

    <professional JavaScript for Web Developers>day01 1.JavaScript简介 1.1JavaScript简史:略 1.2JavaScri ...

  2. 《Professional JavaScript for Web Developers》day03

    <Professional JavaScript for Web Developers>day03 1.1ECMAScript语法 1.1.1 区分大小写 1.1.2 标识符 按照惯例,E ...

  3. Professional JavaScript for Web Developers 4th Edition

    Professional JavaScript for Web Developers 4th Edition learning notes / 学习笔记 https://github.com/xgqf ...

  4. Professional JavaScript for Web Developers 3rd Edition ---读书笔记

    1. DOMContentLoaded DOM树构建完成时触发该事件 load 页面加载完毕触发 原生js document.addEventListener('DOMContentLoaded', ...

  5. Translation perface: <<Professional JavaScript for Web Developers, 3rd Edition>>

    It is a huge pitty to breaking translating this book. Sincerly speaking, I am striken by this great ...

  6. Professional JavaScript for Web Developers P226

    我是这么理解的: (object.getName = object.getName),这条语句在执行结束后,返回的是右操作数object.getName: 但是关键是这个右操作数现在放在哪里 ?  我 ...

  7. Professional JavaScript for Web Developers P224-P225

    然后第二段代码执行过程中,有1个global variabe object,1个createFunction activation object,10个anonymous function1 acti ...

  8. 《PHP与MySQL WEB开发》读书笔记

    <PHP与MySQL WEB开发>读书笔记 作者:[美]Luke Welling PHP输出的HereDoc语法: echo <<<theEnd line 1 line ...

  9. 《白帽子讲Web安全》- 学习笔记

    一.为何要了解Web安全 最近加入新公司后,公司的官网突然被Google标记为了不安全的诈骗网站,一时间我们信息技术部门成为了众矢之的,虽然老官网并不是我们开发的(因为开发老官网的前辈们全都跑路了). ...

随机推荐

  1. Oracle 12.2报错ORA-15032、ORA-15410或ORA-15411解决

    现象:在Oracle 12.2.0.1 RAC环境,在其ASM实例中,如果添加不同大小或者不同数量的LUN到failgroup中,会报错: ORA-15032: not all alterations ...

  2. 使用Epplus生成Excel 图表

    1.  前言 这是我最近项目刚要的需求,然后在网上找了半天的教材  但是很不幸,有关于Epplus的介绍真的太少了,然后经过了我的不断研究然后不断的采坑,知道现在看到Excel都想吐的时候,终于成功的 ...

  3. U面经Prepare: Print Binary Tree With No Two Nodes Share The Same Column

    Give a binary tree, elegantly print it so that no two tree nodes share the same column. Requirement: ...

  4. HDU 1520 树形DP入门

    HDU 1520 [题目链接]HDU 1520 [题目类型]树形DP &题意: 某公司要举办一次晚会,但是为了使得晚会的气氛更加活跃,每个参加晚会的人都不希望在晚会中见到他的直接上司,现在已知 ...

  5. svn 安装

    SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需要程序员有效的管理代码,在需要的时候可以迅速,准确取出相应的版本. Subversion是什么? ...

  6. Nodejs在Ubuntu的部署和配置 samba

    在Ubuntu上安装samba 在10.04上安装samba时,先把samba卸载,不然会影响后面的安装. 0.卸载samba sudo apt-get remove samba-common sud ...

  7. js选中变色,不选中鼠标放上变色

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  8. Unity3d中角色模型和角色名字保持相对位置

    3D游戏中,经常遇到这样的情况.角色模型上需要显示角色名字或者血条等信息. 如果用一个摄像机会有可能出现名字或血条显示不正常等问题,所以我采用两个摄像机.一个渲染名字或血条等UI,另一个渲染角色模型. ...

  9. CentOS 7 Tomcat 8 9 基于APR库性能优化

    Tomcat可以使用Apache Portable Runtime来提供卓越的性能及可扩展性,更好地与本地服务器技术的集成.Apache Portable Runtime是一个高度可移植的库,位于Ap ...

  10. Vuex 2.0 深入简出

    最近面试充斥了流行框架Vue的各种问题,其中Vuex的使用就相当有吸引力.下面我就将自己深入简出的心得记录如下: 1.在vue-init webpack project (创建vue项目) 2.src ...