• 前端之从头开始学《红宝石》


    目录

    本书结构

    第 1 章  “ JavaScript 简介 ”

    1.1  JavaScript 简史

    1.2  JavaScript 实现

    1.3  JavaScript 版本

    1.4  小结

    第 2 章  “ 在 HTML 中使用 JavaScript ”

    2.1 script 元素

    2.2 嵌入代码与外部文件

    2.3 文档模式

    2.4 noscript 元素

    2.5 小结

    第 3 章  “ 基本概念 ”

    3.1 语法

    3.2 关键字和保留字

    3.3 变量

    3.4 数据类型

    3.5 操作符

    3.6 语句

    3.7 函数

    3.8 小结

    第 4 章  “ 变量、作用域和内存问题 ”

    第 5 章  “ 引用类型 ”

    第 6 章  “ 面向对象的程序设计 ”

    第 7 章  “ 函数表达式 ”

    第 8 章  “ BOM ”

    第 9 章  “ 客户端检测 ”

    第 10 章  “ DOM ”

    第 11 章  “ DOM 扩展 ”

    第 12 章  “ DOM2 和 DOM3 ”

    第 13 章  “ 事件 ”

    第 14 章  “ 表单脚本 ”

    第 15 章  “ 引用类型 ”

    第 16 章  “ HTML5 脚本编程 ”

    第 17 章  “ 错误处理与调试 ”

    第 18 章  “ JavaScript 与 XML ”

    第 19 章  “ E4X ”

    第 20 章  “ JSON ”

    第 21 章  “ Ajax 与 Comet ”

    第 22 章  “ 高级技巧 ”

    第 23 章  “ 离线应用与客户端存储 ”

    第 24 章  “ 最佳实践 ”

    第 25 章  “ 新兴的 API ”


    JavaScript 高级程序设计 , 前端界简称为 : 红宝石 之书


             创作此篇文章的目的呢就是希望和大家伙一起从头将此书捋一遍 ,

        夯实巩固自己的 JavaScript 基础 , 地基不稳 ,如何建高楼呢 ?

    一起加油努力吧 ,毕竟这个行业你要是不卷 ,很容易就会被替代了 。。

    内容提要 :

        全书从 JavaScript 语言实现的各个组成部分 —— 语言核心、DOM、BOM、事件模型

    讲起,深入浅出地探讨了面向对象编程、Ajax 与 Comet 服务器端通信 ,

    HTML5 表单、媒体、Canvas( 包括 WebGL )及 Web Workers、地理定位、

    跨文档传递消息、客户端存储( 包括 IndexedDB )等新 API ,

    还介绍了离线应用和与维护、性能、部署相关的最佳开发实践。

    本书附录展望了未来的 API 和 ECMAScript Harmony 规范。

        本书适合有一定编程经验的 Web 应用开发人员阅读,也可作为高校及社会实用技术培训相关专业课程的教材。

    前言

        JavaScript 是一种非常松散的面向对象语言,也是 Web 开发中极受欢迎的一门语言。

    JavaScript 尽管它的语法和编程风格与 Java 都很相似,但它却不是 Java 的 “轻量级” 版本,甚至与 Java 没有任何关系。

        JavaScript 是一种全新的动态语言,它植根子全球数亿网民都在使用的 Web 浏览器之中,致力于增强网站和 Web 应用程序的交互性。


    本书结构

    本书共 25 章,各章简介如下。


    第 1 章  “ JavaScript 简介 ”

        讲述了 JavaScript 的起源:因何而生,如何发展,现状如何。

    涉及的概念主要有 JavaScript 与 ECMAScript 之间的关系、

    DOM ( Document Object Model,文档对象模型 )、

    BOM ( Browser Object Model ,浏览器对象模型 ) 。

        此外 ,还将讨论 ECMA ( European Computer Manufacturer’s Association ,

    欧洲计算机制造商协会 ) 和 W3C ( World Wide Web Consortium ,万维网联盟 )

    制定的一些相关标准。

    本章内容

    •   JavaScript 历史回顾
    •   JavaScript 是什么
    •   JavaScript 与 ECMAScript 的关系
    •   JavaScript 的不同版本

            JavaScript 诞生于 1995 年。当时,它的主要目的是处理以前由服务器端语言(如 Perl)负责的一些输入验证操作。在 JavaScript 问世之前,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域,是否输入了无效的值。

            如今,JavaScript 的用途早已不再局限于简单的数据验证,而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。

    1.1  JavaScript 简史

        当时就职于 Netscape 公司的 布兰登 · 艾奇 ( Brendan Eich ) ,开始着手为计划于 1995年2月发布的 Netscape Navigator 2 开发一种名为 LiveScript 的脚本语言——该语言将同时在浏览器和服务器中使用 ( 它在服务器上的名字叫 LiveWire ) 。为了赶在发布日期前完成 LiveScript 的开发,Netscape 与 Sun 公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕, Netscape 为了搭上媒体热炒 Java 的顺风车,临时把 LiveScript 改名为 JavaScript

        1997 年,以 JavaScript 1.1 为蓝本的建建议被提交给了 欧洲计算机制造商协会 ( ECMA,European Computer Manufacturers Association )。该协会指定 39号技术委员会 ( TC39,Technical Committee #39 ) 负责“标准化一种通用、跨平台、供用应商中立的脚本语言的语法和语义” ( http://www.ecma international.org/memento/TC39.htm ) 。TC39由来自 Netscape、Sun、微软、Borland及其他关注脚本语言发展的公司的程序员组成,他们经过数月的努力完成了 ECMA-262 —— 定义一种名为 ECMAScript ( 发音为“ek-ma-script” )

    的 新脚本语言的标准。

    1.2  JavaScript 实现

    一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

    • 核心(ECMAScript)
    • 文档对象模型(DOM)
    • 浏览器对象模型(BOM) 

    1.2.1  ECMAScript

            我们常见的 Web 浏览器只是 ECMAScript 实现可能的 宿主环境 之一。宿主环境不仅提供基本的 ECMAScript 实现,同时也会提供该语言的扩展,以便语言与环境之间对接交互。而这些扩展 —— 如 DOM,则利用 ECMAScript 的核心类型和语法提供更多更具体的功能,以便实现针对环境的操作。

        其他宿主环境包括 Node ( 一种服务端 JavaScript平台 ) 和 Adobe Flash。
            既然 ECMA-262 标准没有参照 Web 浏出览器,那它都规定了些什么内容呢?

    大致说来,它规定了这门语言的下列组成部分 :

    • 语法
    • 类型
    • 语句
    • 关键字
    • 保留字
    • 运算符 / 操作符
    • 对象

        1.  ECMAScript 的版本

        2. 什么是 ECMAScript 兼容

        3. Web 浏览器对 ECMAScript 的支持

    1.2.2  文档对象模型( DOM )

            文档对象模型 ( DOM,Document Object Model ) 是是针对 XML 但经过扩展用于 HTML 的应用程序编程接口 ( API,Application Programming Interface ) 。DOM 把整个页面映射为一个多层节点结构。

        HTML 或 XML 页面中的每个组成部分都是某种类型的节点, 这些节点又包含着不同类型的数据。看下面这个 HTML 页面 :

    1. <html>
    2. <head>
    3. <title>Sample Pagetitle>
    4. head>
    5. <body>
    6. <p>hello world!p>
    7. body>
    8. html>

    这段代码可以用 DOM 绘制成一个节点层次图 :

          通过 DOM 创建的这个表示文档的属性图,开发人员获得了控制页面内容和结构的主动权。借助 DOM 提供的 API , 开发人员可以轻松自如地删除、添加、替换和修改任何节点。 

      1. 为什么要使用 DOM

      2. DOM 级别

            DOM1级 ( DOM Level1 ) 于 1998年10月 成为 W3C 的推荐标准。DOM1 级由两个模块组成:DOM 核心 ( DOM Core ) 和 DOM HTML。其中, DOM 核心规定的是如何映射基于 XML 的文档结构,以便 简化对文档中任意部分的访问和操作。DOM HTML 模块则在 DOM 核心的基础上加以扩展,添加了针对 HTML 的对象和方法。

        请读者注意,DOM 并不只是针对 JavaScript 的,很多别的语言也都实现了 DOM。不过,在 Web 浏览器中,基于 ECMAScript 实现的 DOM 的确已经成为 JavaScript 这门语言的一个重要组成部分。

      3. 其他 DOM 标准

      4. Web 浏览器对 DOM 的支持 

    1.2.3  浏览器对象模型( BOM )

            IE 3.0 和 Netscape Navigator 3.0 有一个共同的特色,那就是支持可以访问和操作浏览器窗口的浏览器对象模型( BOM,Browser Object Model )。

       BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

    • 弹出新的浏览器窗口的功能;
    • 移动、关闭浏览器窗口以及调整窗口大小(缩放)的功能;
    • 提供 Web 浏览器详细信息的 navigator 定位对象;
    • 提供浏览器所加载页面的详细信息的 location 对象;
    • 提供用户显示器屏幕分辨率详细信息的 screen 屏幕对象;
    • 对 cookie 的支持;
    • IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

    ( 像 XMLHttpRequest 和 IE的 ActiveXObject 这样的自定义对象。 )

    1.3  JavaScript 版本

            请注意,只有 Netscape / Mozilla 浏览器才遵循这种编号模式。例如,IE的 JScript 就采用了另一种版本命名方案。换句话说,JScript 的版本号与上表中 JavaScript 的版本号之间不存在任何对应关系。而且,大多数浏览器在提及对 JavaScript 的支持情况时,一般都以 ECMAScript 兼容性和对 DOM 的支持情况为准。

    1.4  小结

          JavaScript 是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成 :

    • ECMAScript,由 ECMA-262 定义,提供核心语言功能;
    • 文档对象模型 ( DOM ) ,提供访问和操作网页内容的方法和接口;
    • 浏览器对象模型 ( BOM ) ,提供与浏览器交互的方法和接口。

          JavaScript 的这三个组成部分,在当前五个主要浏览器 ( IE、Firefox、Chrome、Safari 和Opera ) 中都得到了不同程度的支持。其中,所有浏览器对 ECMAScript 第 3 版的支持大体上都还不错,而对 ECMAScript5 的支持程度越来越高,但对 DOM 的支持则彼此相差比较多。对已经正式纳入 HTML5 标准的 BOM 来说,尽管各浏览器都实现了某些众所周知的共同特性,但其他特性还是会因浏览器而异。


    第 2 章  “ 在 HTML 中使用 JavaScript ”

        介绍了如何在 HTML 中使用 JavaScript 创建动态网页。

    这一章不仅展示了在网页中嵌入 JavaScript 的各种方式,还讨论了 JavaScript 内容类型

    ( content-type ) 及其与 “ 字符串。例如,浏览器在加载下面所示的代码时就会产生一个错误 :

            因为按照解析嵌入式代码的规则,当浏览器遇到字符串 ”" 时,就会认为那是结束的  标签。而通过转义字符 “ \ ” 解决这个问题,例如 :

        这样写代码浏览器可以接受,因而也就不会导致错误了。 

            如果要通过 之间的那些 JavaScript 代码即可。与解析嵌入式 JavaScript 代码一样,在解析外部  JavaScript  文件(包含下载该文件)时,页面的处理也会暂时停止。

            需要注意的是,带有 src 属性的 标签之间再包含额外的 JavaScript 代码。如果包含了嵌人的代码,则只会下载并执行外部脚本文件,嵌人的代码会被忽略。
            另外,通过