JavaScript高级程序设计(第3版)学习笔记 概述


Posted in Javascript onOctober 11, 2012

在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼,只是常常没有过多久,很多美轮美奂的用法就又模糊起来,希望通过对JavaScript高级程序设计(第3版)的专题学习笔记,能够较为系统的将基础知识梳理一次,也能够将自己平常学习与工作过程中遇到的一些美妙用法记录下来,便于自己再次学习,当然,也希望可以给有需要的朋友们一些力所能及的帮助。

相关术语

先简要说一下和JavaScript相关的一些背景术语,就不详细讨论JavaScript的历史了,想了解的朋友可以参考原书。

  • ECMA:欧洲计算机制造商协会(Standard ECMA-262European Computer Manufacturers Association)。
  • TC39:ECMA第39号技术委员会(Technical Committee#39),由来自一些关注脚本语言发展的公司的程序员组成,负责制定一种通用、跨平台、供应商中立的脚本语言。
  • ECMAScript:由ECMA制定,在ECMA-262中定义的脚本语言标准。ECMAScript只是一个脚本语言标准,你尽可以在自己的环境中取实现它,这个环境,就称为ECMAScript的宿主环境,Web浏览器可以说是ECMAScript目前最重要的宿主环境了,而不同的Web浏览器,对ECMAScript标准的支持也不尽相同。除Web浏览器,Adobe ActionScript也实现了ECMAScript。一般的宿主环境,除了实现ECMAScript标准,也会有各自的扩展,以便与环境更好的交互。
  • ES3、ES5:ECMAScript目前最新的版本是5.1版,发布于2011年7月,可以从其官方网站免费下载。最主要的两个版本是第3版和第5版,分别简称为ES3和ES5,目前五大浏览器(IE、Firefox、Chrome、Safari、Opera)都已经开始不同程度的支持ES5了,但目前在Web浏览器上兼容性最好的还是第3版。介于向后兼容和安全上的考虑,第5版提供了普通和严格两种模式,后面会再讨论相关内容。
  • LiveScript、JavaScript、JScript:LiveScript是Netscape最初开发JavaScript时的名称,在发布时,为了赶上Java的时髦,临时修改为JavaScript了,而JScript则是微软为了防止版权冲突而给自己的脚本语言起的名称。对于开发者来说,他们都只是ECMAScript的实现。一般来说,JavaScript的除了实现ECMAScript外,还会包括针对浏览器的扩展(BOM:浏览器对象模型)和针对XML/HTML API的扩展(DOM:文档对象模型)。
  • DOM:文档对象模型(Document Object Model),DOM标准由负责制定WEB通信标准的W3C(World Web Consortium,万维网联盟)制定。DOM并非针对JavaScript的,很多别的语言也都实现了DOM。目前DOM共有三级标准(DOM1、DOM2、DOM3),有时,也将DOM标准之前称为DOM0级,现代浏览器几乎全部支持DOM2级标准,也部分支持DOM3级标准了。
  • BOM:浏览器对象模型(Browser Object Model)。

使用JavaScript

  在HTML中使用JavaScript的方式主要有:

  1. 使用<script>标签元素引入外部文件(推荐),将代码写入外部文件中。
  2. 使用<script>标签元素嵌入JavaScript代码。
  3. 直接在HTML中嵌入JavaScript代码,比如在HTML元素中的事件处理程序。

<script>标签元素:

属性 是否必填 适用范围 说明
async 可选 外部文件 表示应该立即下载脚本,但不应妨碍页面中的其它操作,比如下载资源或其它脚本文件
charset 可选 外部文件 表示通过src指定的代码的字符集
defer 可选 外部文件,IE4-7也支持嵌入代码 表示脚本可以延迟到文档完全解析和显示之后再执行
language 可选(已废弃)   原用于表示编写代码的脚本语言
src 可选,使用外部文件时为必填选项 外部文件 表示包含要执行的外部文件
type 可选,默认text/javascript   可以看成是language的替代属性,表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。

 说明:

(1)外部文件

A、在XHTML文档中,导入外部文件时,可以使用简写方式<script/>但是在HTML中只能<script></script>。

B、导入外部文件时,src属性是必须的,这个时候嵌入在<script></script>中的代码(如果有)会被忽略。

C、src属性也可以指定来自外部域的JavaScript文件,这一点让<script>元素异常强大,也备受争议,因为可能会让人恶意注入脚本。

D、外部文件只需要包含<script></script>中的代码即可,不需要包括<script>元素本身;外部文件一般扩展名为.js,但这不是强制的。

(2)在<script>元素中内嵌代码时,只需要指定type属性,但代码中不能出现</script>字符串,否则会解析出错。例如:

<script type="text/javascript"> 
//document.writeln('</script>');会将字符串中的</script>作为前面的标签结束符来解析,从而出现异常 
document.writeln('</scr'+'ipt>');//通过将</script>分开,从而避免作为<script>的结束标签解析 
</script>

(3)关于type属性,虽然text/javascript和java/ecmascript都已经不被推荐使用,但一直以来使用的都还是test/javascript,实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,但在type中设置这个值可能导致脚本被忽略,另外,在非IE浏览器中还可以使用application/javascript和application/ecmascript。type如果没有指定,默认值为text/javascript。

(4)只要不包含async和defer,浏览器会按照<script>在页面中出现的顺序依次解析;设置了defer时,会立即下载<script>元素,但是延迟执行,在规范中,要求多个含defer属性的脚本顺序执行且在DOMContentLoaded事件前执行,但是在实现中不一定满足这些要求;在HTML5中添加了async属性,和defer类似,也只是适用于外部文件,告诉浏览器立即下载文件,但延迟执行,不同的是,多个含async的脚本即便在规范中也没有规定执行的顺序,异步脚本再load事件前执行,但可能在DOMContentLoaded之前或之后执行。

(5)在阅读之前的代码或者用一些IDE生成代码时,常常可以看到下面的结构:

<script type="text/javascript"> 
//<![CDATA[ 
// 这里首先是以//开始的JavaScript注释 
// 然后<![CDATA[...]]>结构是XHTML(XML)的一个特殊区域,区域内的文本不需要做任何解析,以防止XHTML将代码中的类似小于号“<”的这种特殊符号解析为元素标签 
// 若不使用CDATA结构,则需要转义成相应实体,比如小于号(<)需要使用(<) 
// 对于不兼容XHTML的,由于最开始的//注释,也能够平稳退化 
//]]> 
</script>

一些常用的HTML转义:
显示 说明 实体名称 实体编号
  半方大的空白
  全方大的空白
  不断行的空白    
小于 < <
> 大于 > >
& &符号 & &
" 双引号 " "

有些不支持JavaScript的浏览器,可以将JavaScript代码包含在一个HTML注释中(由于所有主流浏览器均支持JavaScript,所以不再推荐使用):

<script><!-- 
//--></script>

对于一些老旧浏览器或者禁用了JavaScript的浏览器,还可以使用<noscript></noscript>元素来呈现相关的说明。

文档模式

在IE5.5中开始引入文档模式的概念,通过使用通过文档类型(doctype)切换实现的,最初包括混杂模式(quirks mode)和标准模式(standards mode),混杂模式让IE的行为与包括非标准特性的IE5相同,标准模式则让IE的行为更接近标准行为。在IE引入文档模式之后,其他浏览器也纷纷仿效。之后,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"> 
<!-- HTML5 --> 
<!DOCTYPE html>

通过过渡性或框架集型来触发准标准模式:
<!-- 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">

参考书籍

[1]Professional JavaScript for Web Developers 3rd Edition:JavaScript高级程序设计(第3版)[美]Nicholas C.Zakes 著 李松峰 曹力译 人民邮电出版社。

Javascript 相关文章推荐
Javascript 判断 object 的特定类转载
Feb 01 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
html中创建并调用vue组件的几种方法汇总
Nov 17 Javascript
javascript测试题练习代码
Oct 10 #Javascript
jQuery插件开发全解析
Oct 10 #Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 #Javascript
关于jQuery UI 使用心得及技巧
Oct 10 #Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 #Javascript
jQuery提交表单ajax查询实例代码
Oct 07 #Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 #Javascript
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
javascript下function声明一些小结
2007/12/28 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python中dict使用方法详解
2019/07/17 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Pycharm修改python路径过程图解
2020/05/22 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
浅谈python 类方法/静态方法
2020/09/18 Python
python Paramiko使用示例
2020/09/21 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
资产经营总监岗位职责范文
2013/12/01 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
win10清理dns缓存
2022/04/19 数码科技