《javascript高级程序设计(第3版)》-1
javascript有下列三个不同的部分组成:
- ECMAScript,由ECMA-262定义,提供核心语言功能
- 文档对象模型(DOM),提供访问和操作网页内容的方法和接口
- 浏览器对象模型(BOM),提供与浏览器交互的方法和接口
<script>定义了下列6个属性
- async: 可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效
- charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
- defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对潜入脚本也支持这个属性。
- language:已废弃。原来用于表示编写代码使用的脚本语言(如JavaScript、JavaScript1.2或VBScirpt)。大多数浏览器会忽略这个属性,因此也没有必要在用。
- src:可选。表示包含要执行代码的外部文件。
- type:可选。可以看成是language的替代属性;表示编写代码使用脚本语言的内容类型(也称为MIME类型)。
text/javascript和text/ecmascript都已经不被推荐使用,但习惯用的还是text/javascript。实际上服务器在传送JavaScript时使用的MIME类型通常是application/x-javascript,但在type中设置这个值却可能导致脚本被忽略。在非IE浏览器还可以使用以下值:application/javascript和application/ecmascript。目前type值依旧还是text/javascript,如果没有指定,默认值仍为text/javascript。
<script>标签的位置
按照管理,所有<script>元素都应该放在页面的元素中,这样的目的是把所有外部文件(包含css,js)的引用都放在相同的地方。可是,在文档的元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成后,才能开始呈现页面的内容(浏览器在遇到标签时才开始呈现内容)。对于那些大型网站,有很多JavaScript代码的页面,这无疑会导致浏览器呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现在一般将JavaScript引用放在元素中,放在页面内容后面,这样用户会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
引用外部文件的好处
- 可维护性:把所有的JavaScript文件都放在一个文件夹中,维护起来轻松许多。而且开发人员也能够在不触及HTML标记的情况下,集中精力编辑JavaScript代码。
- 可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说,如果有两个页面都是用同一个文件,那么这个文件只需下载一次。因此可以加快页面加载的速度。
- 适应未来:通过外部文件包含JavaScript无须使用XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。
文档模式
- 最初的两种文档模式是:混杂模式(quirks mode)和标准模式(standards mode)。混杂模式会让IE的行为与(包含非标准特性的)IE5相同,而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。如果在文档开始处没有发现文档类型声明,则所有浏览器都会默认开启混杂模式。
- IE提出一种所谓的准标准模式(almost standards mode)。这种模式下的浏览器特性有很多是符合标准的,但也不尽然。不标准的地方主要表现在处理图片间隙的时候(在表格中使用图片时问题最明显)。
- 对于标准模式可以采用以下任何一种文档类型来开启:
<!-- 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 PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!-- HTML 5 -->
<!DOCTYPE html>
- 对于准标准模式,则可以通过使用过渡型(transitional)或框架集型(frameset)文档类型来触发。
<!-- 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 Transitional//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">
- 准标准模式和标准模式非常接近,他们差异几乎可以忽略不急。因此,当有人提到“标准模式”时,有可能是指这两种模式中的任何一种。
<noscript>元素
在不支持JavaScript的浏览器中显示替代的内容,这个元素可以包含能够出现在文档中的任何HTML元素(<script>元素除外)。包含在<noscript>元素中的内容只有在下列情况下才会显示出来:
- 浏览器不支持脚本
- 浏览器支持脚本,但脚本被禁用
符合上述任何一个条件,浏览器都会显示<noscript>中的内容,除此之外,浏览器不会呈现<noscript>中的内容。
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
</head>
<body>
<noscript>
<p>
本页面需要浏览器支持(启用)JavaScript。
</p>
</noscript>
</body>
</html>
这个页面会在脚本无效的情况下向用户显示“本页面需要浏览器支持(启用)JavaScript。”而在启用了脚本的浏览器中,用户永远不会看到它—-尽管它是页面的一部分。
小结
- 在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。
- 所有<script>元素都会按照它们在页面中出现的先后顺序依次进行解析。在不使用defer和async属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。
- 由于浏览器会先解析完不实用defer属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,变迁前面。
- 使用defer属性可以让脚本在文档完全呈现之后再执行,延迟脚本总是按照指定它们的顺序执行。
- 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
《javascript高级程序设计(第3版)》-1的更多相关文章
- 1<<33这种写法是错的!!!
1<<33不能这么写,1默认int类型,应该改为(long long)1<<33
- mysql 5.6.33 重置密码后报错
[root@ Desktop]# mysql -uroot -p Enter password: Welcome to the MySQL monitor. Commands end with ; o ...
- 【C语言】++(a++)的写法是错的
http://bbs.csdn.net/topics/390764053 a++得到的是一个右值,++操作需要的是一个左值. ------------------------------------- ...
- [C语言]易错知识点、小知识点复习(1)
1. 计算机只能识别由0和1组成的二进制指令,需要将用高级语言(如C.C++)编写的源程序(.c..cpp)编译成二进制目标文件(.obj).一个程序可以根据需要写在不同的文件里,编译是以文件为单位进 ...
- js自执行函数的几种不同写法的比较
经常需要一个函数自执行,可惜这一种写法是错的: function(){alert(1);}(); 原因是前半段“function(){alert(1);}”被当成了函数声明,而不是一个函数表达式,从 ...
- 菜鸟的Xamarin.Forms前行之路——从新建项目到APP上架各种报错问题解决方法合集(不定时更新)
出自:博客园-半路独行 原文地址:http://www.cnblogs.com/banluduxing/p/7425791.html 本文出自于http://www.cnblogs.com/banlu ...
- django migrate报错:1005 - Can't create table xxx (errno: 150 "Foreign key constraint is incorrectly formed")
自从mysql升级,以及使用mariaDB以来,很多不曾更新django中model的外键, 今天,按以前的思路写完外键之后, migrate命令报错: 1005 - Can't create tab ...
- 《C++primer》v5 第2章 变量和基本类型 读书笔记 习题答案
2.1 int,long long ,short 可表示范围和占用内存空间不同.具体与计算机有关. 无符号类型只能表示0和正数,带符号类型可以表示负数,0,正数. float是单精度,一般占用4个字节 ...
- Go第七篇之规范的接口
接口本身是调用方和实现方均需要遵守的一种协议,大家按照统一的方法命名参数类型和数量来协调逻辑处理的过程. Go 语言中使用组合实现对象特性的描述.对象的内部使用结构体内嵌组合对象应该具有的特性,对外通 ...
- 作为一个新手的Oracle(DBA)学习笔记【转】
一.Oracle的使用 1).启动 *DQL:数据查询语言 *DML:数据操作语言 *DDL:数据定义语言 DCL:数据控制语言 TPL:事务处理语言 CCL:指针控制语言 1.登录 Win+R—cm ...
随机推荐
- idea下增加scala
1 idea工具下,下载scala插件 2 idea下新建scala工程 File——New——module 如果按照上图,设置后点击下载,出现下图下载过慢情况下, 这里我选择了等待,大概等了半小时才 ...
- Android错误:can not get file data of lua/start_v2.op [LUA ERROR] [string "require "lua/start_v2””] 已解决
错误: can not get file data of lua/start_v2.op [LUA ERROR] [string "require "lua/start_v2””] ...
- xampp服务器搭建和使用
1.安装完XAMPP后会出现Apache端口被占用的问题,一下方法解决 错误信息如下: Error: Apache shutdown unexpectedly. 9:37:01 [Apache] T ...
- 7个Node.js的Web框架
NodeJS也就是Node,是众所周知的使用javascript构建Web应用框架,它启动一个服务器非常简单,如下: var http = require('http'); http.createSe ...
- 哈夫曼(Huffman)树+哈夫曼编码
前天acm实验课,老师教了几种排序,抓的一套题上有一个哈夫曼树的题,正好之前离散数学也讲过哈夫曼树,这里我就结合课本,整理一篇关于哈夫曼树的博客. 主要摘自https://www.cnblogs.co ...
- 王者荣耀交流协会第二次Scrum立会
会议时间:2017年10月21号 17:00-17:22,时长22分钟. 会议地点:首尔名家里面的大桌子(PS:感谢组长大大请我们吃饭~)立会内容:每位同学汇报了今日工作(高远博与王超同学在今日有 ...
- 20135313_exp4
实验四 GUI界面的设计和运用 20135313吴子怡 一.实验目的 结合项目,为每个密码学算法设计能够提供使用者用户体验的操作界面,实现加解密.求得消息摘要的功能. 二.代码举例(备注:其 ...
- HDU 5875 Function 优先队列+离线
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5875 Function Time Limit: 7000/3500 MS (Java/Others) ...
- lintcode-391-数飞机
391-数飞机 给出飞机的起飞和降落时间的列表,用 interval 序列表示. 请计算出天上同时最多有多少架飞机? 注意事项 如果多架飞机降落和起飞在同一时刻,我们认为降落有优先权. 样例 对于每架 ...
- WebService(二)
使用eclipse开发webservice的服务器端以及客户端的简单实例 1.服务端 在eclipse中像建立一个web项目一样,new->Dynamic Web Project A.建一个需要 ...