MDNjavascript中级教程
Intr o duc ing Ja va Sc ript o bjec ts
1. Intro
2. Client-side w eb APIs
3. 深⼊ Ja va Sc r ipt
4. Ja va Sc r ipt 数据结构
5. 如何正确判断相等性网页app
6. Clo sur es
Intr o duc ing Ja va Sc ript o bjec ts
1. Intro
在 JavaScript 中,⼤多数事物都是对象, 从作为核⼼功能的字符串和数组,到建⽴在 JavaScript 之上的浏
览器 API。你甚⾄可以⾃⼰创建对象,将相关的函数和变量封装打包成便捷的数据容器。理解这种⾯向对象 (object-oriented, OO) 的特性对于进⼀步学习 JavaScript 语⾔知识是必不可少的。这个模块将帮助你了解“对象”,先详细介绍对象的设计思想和语法,再说明如何创建对象。
链接到章节预备知识
开始这个模块之前,你应当已经对 HTML 和 CSS 有所了解。我们建议你通读 HTML ⼊门和 CSS ⼊门模块,再开始了解 JavaScript。
详细了解 JavaScript 对象之前,你应当已经对 JavaScript 基础有所熟悉。尝试这个模块之前,请通读 JavaScript 第⼀步和构成 JavaScript 的“砖块”。
注意:如果你使⽤的电脑/平板/其他设备上⽆法创建⾃⼰的⽂件,你可以使⽤在线编程⽹站如 JSBin 或 Thimble,来试验⽂章中的(⼤多数)代码。
链接到章节指南
对象基础
在了解 JavaScript 对象的第⼀篇⽂章中,我们将介绍 JavaScript 对象的语法,并回顾先前课程中讲过的某些 JavaScript 功能。你会发现,你已经在使⽤的很多功能本质上都是对象。
适合初学者的⾯向对象 JavaScript
了解基础后,我们将关注⾯向对象 JavaScript (OOJS)。本⽂将介绍⾯向对象编程 (OOP) 的基本理论,然后讲解 JavaScript 如何通过构造器(constructor) 函数模拟对象类别 (class)、如何创建对象实例 (instance)。
对象原型
通过原型 (prototype) 这种机制,JavaScript 中的对象从其他对象继承功能特性;这种继承机制与经典的⾯向对象编程语⾔不同。本⽂将探讨这些差别,解释原型链如何⼯作,并了解如何通过 prototype 属性向已有的构造器添加⽅法。
JavaScript 中的继承
了解了 OOJS 的⼤多数细节之后,本⽂将介绍如何创建“⼦”对象类别(构造器)并从“⽗”类别中继承功能。此外,我们还会针对何时何处使⽤ OOJS 给出建议。
使⽤ JSON 数据
JavaScript Object Notation (JSON) 是⼀种将结构化数据表达为 JavaScript 对象的标准格式,其常⽤于
在⽹站上表达或传输数据(⽐如:从服务器向客户端发送数据,使之显⽰在⽹页上)。你会经常遇到它,因此本⽂将告诉你如何在 JavaScript 中使⽤ JSON 数据,包括访问 JSON 对象中的数据条⽬、编写⾃⼰的 JSON 数据等等。
在前⾯的⽂章中我们了解了 JavaScript 对象基本理论和语法,为你打下坚实的基础。本⽂中你需要进⾏实战练习,通过构建⾃定义 JavaScript 对象的实践过程,编写⼀个有趣⽽“多彩”的程序——“彩⾊弹跳球”。
2. Client-side w eb APIs
当你给⽹页或者⽹页应⽤编写客户端的JavaScript时, 你很快会遇上应⽤程序接⼝(API )—— 这些编程特性可⽤来操控⽹站所基于的浏览器与操作系统的不同⽅⾯,或是操控由其他⽹站或服务端传来的数据。在这个单元⾥,我们将⼀同探索什么是API,以及如何使⽤⼀些在你开发中将经常遇见的API。
链接到章节预备知识
若想深⼊理解这个单元的内容, 你必须能够以⾃⼰的能⼒较好地学完之前的⼏个章节 (First steps, Building blocks, and JavaScript objects).这⼏部分涉及到了许多简单的API的使⽤, 如果没有它们我们将很难做⼀些实际的事情。在这个教程中,我们会认为你懂得JavaScript的核⼼知识,⽽且我们将更深⼊地探索常见的⽹页API。
若你知道 HTML 和 CSS 的基本知识,也会对理解这个单元的内容⼤有裨益。
注意:如果你正在使⽤⼀台⽆法创建你⾃⾝⽂件的电脑、平板或其他设备,你可以尝试使⽤⼀些在线⽹页编辑器如JSBin或者Thimble,来尝试编辑⼀些代码⽰例。
链接到章节向导
Web API简介
⾸先, 我们将从⼀个更⾼的⾓度来看这些API —它们是什么,它们怎么起作⽤的,你该怎么在⾃⼰的代码中使⽤它们以及他们是怎么构成的? 我们依旧会再来看⼀看这些API有哪些主要的种类和他们会有哪些⽤处。
操作⽂档
当你在制作WEB页⾯和APP时,⼀个你最经常想要做的事就是通过⼀些⽅法来操作WEB⽂档。这其中最常见的⽅法就是使⽤⽂档对象模型Document Object Model (DOM),它是⼀系列⼤量使⽤了 Document object的API来控制HTML和样式信息。通过这篇⽂章,我们来看看使⽤DOM⽅⾯的⼀些细节, 以及其他⼀些有趣的API能够通过⼀些有趣的⽅式改变你的环境。
从服务器获取数据
在现代⽹页及其APP中另外⼀个很常见的任务就是与服务器进⾏数据交互时不再刷新整个页⾯,这看起来微不⾜道,但却对⼀个⽹页的展现和交互上起到了很⼤的作⽤,在这篇⽂章⾥,我们将阐述这个概念,然后来了解实现这个功能的技术,例如 XMLHttpRequest 和 Fetch API.(抓取API)。
第三⽅ API
到⽬前为⽌我们所涉及的API都是浏览器内置的,但并不代表所有。许多⼤⽹站如Google Maps, Twitter, Facebook, PayPal等,都提供他们的API给开发者们去使⽤他们的数据(⽐如在你的博客⾥展⽰你分享的推特内容)或者服务(如在你的⽹页⾥展⽰定制的⾕歌地图或接⼊Facebook 登录功能)。这篇⽂章介绍了浏览器API和第三⽅API 的差别以及⼀些最新的典型应⽤。
绘制图形
浏览器包含多种强⼤的图形编程⼯具,从可缩放⽮量图形语⾔Scalable Vector Graphics (SVG) language,到HTML绘制元素 <canvas> 元素(The Canvas API and WebGL). 这篇⽂章提供了部分canvas的简介,以及让你更深⼊学习的资源。
视频和⾳频 API
HTML5能够通过元素标签嵌⼊富媒体——<video> and <audio>——⽽将有⾃⼰的API来控制回放,搜索
等功能。本⽂向您展⽰了如何创建⾃定义播放控制等常见的任务。
现代web浏览器拥有很多不同的技术,能够让你存储与⽹站相关的数据,并在需要时调⽤它们,能够让你长期保存数据、保存离线⽹站及其他实现其他功能。本⽂解释了这些功能的基本原理。
3. 深⼊ Ja va Sc r ipt
引⾔
为什么会有这⼀篇“重新介绍”呢?因为 JavaScript 堪称世界上被⼈误解最深的编程语⾔。虽然常被嘲为“玩具语⾔”,但在它看似简洁的外⾐下,还隐藏着强⼤的语⾔特性。 JavaScript ⽬前⼴泛应⽤于众多知名应⽤中,对于⽹页和移动开发者来说,深⼊理解 JavaScript 就尤有必要。
先从这门语⾔的历史谈起是有必要的。在1995 年 Netscape ⼀位名为 Brendan Eich 的⼯程师创造了 JavaScript,随后在 1996 年
初,JavaScript ⾸先被应⽤于 Netscape 2 浏览器上。最初的 JavaScript 名为 LiveScript,后来因为 Sun Microsystem 的 Java 语⾔的兴起和⼴泛使⽤,Netscape 出于宣传和推⼴的考虑,将它的名字从最初的 LiveScript 更改为 JavaScript——尽管两者之间并没有什么共同点。这便是之后混淆产⽣的根源。
⼏个⽉后,Microsoft 随着 IE 3 推出了⼀个与之基本兼容的语⾔ JScript。⼜⼏个⽉后,Netscape 将 JavaScript 提交⾄ Ecma
International(⼀个欧洲标准化组织), ECMAScript 标准第⼀版便在 1997 年诞⽣了,随后在 1999 年以 ECMAScript 第三版的形式进⾏了更新,从那之后这个标准没有发⽣过⼤的改动。由于委员会在语⾔特性的讨论上发⽣分歧,ECMAScript 第四版尚未推出便被废除,但随后于2009 年 12 ⽉发布的 ECMAScript 第五版引⼊了第四版草案加⼊的许多特性。第六版标准已经于2015年六⽉发布。
注意: 为熟悉起见,从这⾥开始我们将⽤ “JavaScript” 替代 ECMAScript 。
与⼤多数编程语⾔不同,JavaScript 没有输⼊或输出的概念。它是⼀个在主机环境(host environment)下运⾏的脚本语⾔,任何与外界沟通的机制都是由主机环境提供的。浏览器是最常见的主机环境,但在⾮常多的其他程序中也包含 JavaScript 解释器,如 Adobe Acrobat、Photoshop、SVG 图像、Yahoo! 的 Widget 引擎,以及 Node.js 之类的服务器端环境。JavaScript 的实际应⽤远不⽌这些,除此之外还有NoSQL 数据库(如开源的 Apache CouchDB)、嵌⼊式计算机,以及包括 GNOME (注:GNU/Linux 上最流⾏的 GUI 之⼀)在内的桌⾯环境等等。
链接到章节概览
JavaScript 是⼀种⾯向对象的动态语⾔,它包含类型、运算符、标准内置( built-in)对象和⽅法。它的语法来源于 Java 和 C,所以这两种语⾔的许多语法特性同样适⽤于 JavaScript。需要注意的⼀个主要区别是 JavaScript 不⽀持类,类这⼀概念在 JavaScript 通过对象原型(object prototype)得到延续(有关 ES6 类的内容参考这⾥Classes)。另⼀个主要区别是 JavaScript 中的函数也是对象,JavaScript 允许函数在包含可执⾏代码的同时,能像其他对象⼀样被传递。
先从任何编程语⾔都不可缺少的组成部分——“类型”开始。JavaScript 程序可以修改值(value),这些值都有各⾃的类型。JavaScript 中的类型包括:
Number(数字)
String(字符串)
Boolean(布尔)
Function(函数)
Object(对象)
Symbol (第六版新增)
…哦,还有看上去有些…奇怪的 undefined(未定义)类型和 null(空)类型。此外还有Array(数组)类型,以及分别⽤于表⽰⽇期和正则表达式的 Date(⽇期)和 RegExp(正则表达式),这三种类型都是特殊的对象。严格意义上说,Function(函数)也是⼀种特殊的对象。所以准确来说,JavaScript 中的类型应该包括这些:
Number(数字)
String(字符串)
Boolean(布尔)
Symbol(符号)(第六版新增)
如果给定的字符串不存在数值形式,函数会返回⼀个特殊的值 NaN(Not a Number 的缩写):
parseInt("hello", 10); // NaN
要⼩⼼NaN:如果把 NaN 作为参数进⾏任何数学运算,结果也会是 NaN:
NaN + 5; //NaN
可以使⽤内置函数 isNaN() 来判断⼀个变量是否为 NaN:
isNaN(NaN); // true
JavaScript 还有两个特殊值:Infinity(正⽆穷)和 -Infinity(负⽆穷):
1 / 0; // Infinity
-1 / 0; // -Infinity
可以使⽤内置函数 isFinite() 来判断⼀个变量是否是⼀个有穷数, 如果类型为Infinity, -Infinity 或 NaN则返回false:
isFinite(1/0); // false
isFinite(Infinity); // false
isFinite(NaN); // false
isFinite(-Infinity); // false
isFinite(0); // true
isFinite(2e64); // true
isFinite("0"); // true,如果是纯数值类型的检测,则返回false:Number.isFinite("0");
备注: parseInt() 和 parseFloat() 函数会尝试逐个解析字符串中的字符,直到遇上⼀个⽆法被解析成数字的字符,然后返回该字符前所有数字字符组成的数字。使⽤运算符 "+" 将字符串转换成数字,只要字符串中含有⽆法被解析成数字的字符,该字符串都将被转换成 NaN。请你⽤这两种⽅法分别解析“10.2abc”这⼀字符串,⽐较得到的结果,理解这两种⽅法的区别。
链接到章节字符串
JavaScript 中的字符串是⼀串Unicode 字符序列。这对于那些需要和多语种⽹页打交道的开发者来说是
个好消息。更准确地说,它们是⼀串UTF-16编码单元的序列,每⼀个编码单元由⼀个 16 位⼆进制数表⽰。每⼀个Unicode字符由⼀个或两个编码单元来表⽰。
如果想表⽰⼀个单独的字符,只需使⽤长度为 1 的字符串。
通过访问字符串的 长度(编码单元的个数)属性可以得到它的长度。
"hello".length; // 5
这是我们第⼀次碰到 JavaScript 对象。我们有没有提过你可以像 objects ⼀样使⽤字符串?是的,字符串也有methods(⽅法)能让你操作字符串和获取字符串的信息。
"hello".charAt(0); // "h"
"hello, world".replace("hello", "goodbye"); // "goodbye, world"
"hello".toUpperCase(); // "HELLO"
链接到章节其他类型
JavaScript 中 null 和 undefined 是不同的,前者表⽰⼀个空值(non-value),必须使⽤null关键字才能
访问,后者是“undefined(未定义)”类型的对象,表⽰⼀个未初始化的值,也就是还没有被分配的值。我们之后再具体讨论变量,但有⼀点可以先简单说明⼀下,JavaScript 允许声明变量但不对其赋值,⼀个未被赋值的变量就是 undefined 类型。还有⼀点需要说明的是,undefined 实际上是⼀个不允许修改的常量。
JavaScript 包含布尔类型,这个类型的变量有两个可能的值,分别是 true 和 false(两者都是关键字)。根据具体需要,JavaScript 按照如下规则将变量转换成布尔类型:
false、0、空字符串("")、NaN、null 和 undefined 被转换为 false

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。