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 相关文章推荐
js中的replace方法使用介绍
Oct 28 Javascript
JQuery弹出层示例可自定义
May 19 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
详解vue-loader在项目中是如何配置的
Jun 04 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 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
实现树状结构的两种方法
2006/10/09 PHP
php mail to 配置详解
2014/01/16 PHP
用PHP代码给图片加水印
2015/07/01 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
2017/12/23 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python opencv之SIFT算法示例
2018/02/24 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
pytorch实现查看当前学习率
2020/06/24 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
建筑工程管理专业自荐信范文
2013/12/28 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
初级会计求职信范文
2014/02/15 职场文书
机动车登记业务委托书
2014/10/08 职场文书
趣味运动会口号
2015/12/24 职场文书
教师听课学习心得体会
2016/01/15 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技