wangdoc / javascript-tutorial

JavaScript 教程 https://wangdoc.com/javascript

本教程全面介绍 JavaScript 核心语法，覆盖了 ES5 和 DOM 规范的所有内容。

内容上从最简单的讲起，循序渐进、由浅入深，力求清晰易懂。所有章节都带有大量的代码实例，便于理解和模仿，可以用到实际项目中，即学即用。

本教程适合初学者当作 JavaScript 语言入门教程，学完后就可以承担实际的网页开发工作，也适合当作日常使用的参考手册。

JavaScript 后续新增的 ES6 语法，请看《ES6 标准入门教程》。

javascript-tutorial's Issues

希望右边目录能够随页面滚动

有时候会在看到某个地方时会想参考其他章节，但是目前目录是固定的，只能翻到页顶点击目录。希望以后可以目录随页面滚动。

希望将来能有react全家桶教程。

:)

还是更喜欢旧版的那个页面样式

旧版的 http://javascript.ruanyifeng.com/introduction/intro.html
然后好像访问的时候，速度不如以前了。是因为最近服务器被攻击的原因吗？

hoping to change the html backgroundcolor to gray to fit for code background

Location对象/URL 的编码和解码 中有格式错误

https://wangdoc.com/javascript/bom/location.html#url-%E7%9A%84%E7%BC%96%E7%A0%81%E5%92%8C%E8%A7%A3%E7%A0%81
1，“逗号”后圆括号里用的是单引号。
2，下文中写的是“单引号”，但后面括号中是反引号`，并且出现了格式错误。但不敢确定作者本意想写单引号还是反引号，故没提pull request，提个issue。

null不是object类型么？

数据类型一章中有“null：表示空值，即此处的值为空。”
tyoeof null 的结果是object

浏览器模型-同源限制-3.2window.postMessage()

event.origin: 消息发向的网址
应该是：发送消息窗口的源，消息发送方窗口的网址，而不是发向的网址

node教程

最近刚刚拜读了您的javascript教程，感觉受益匪浅

想继续学习nodejs，不知您的node教程是否已经上线？如果可以的话，能否提供下链接？

谢谢

文档错误

document.getElementsByTagName返回一个 NodeList 集合
地址：https://wangdoc.com/javascript/dom/nodelist.html
document.getElementsByTagName方法返回的是HTMLCollection实例

文档描述有误

数据类型>对象>1.4表达式还是语句
原文=>V8 引擎规定，如果行首是大括号，一律解释为对象。
经测试=>V8 引擎规定，如果行首是大括号，一律解释为代码块。

JavaScript 教程 /事件/ 其他常见事件/剪贴板事件

这三个事件都是ClipboardEvent接口的实例。ClipboardEvent有一个实例属性clipboardData，是一个 DataTransfer 对象，存放剪贴的数据。具体的 API 接口和操作方法，请参见《触摸事件》的 DataTransfer 对象部分。

好像不是在《触摸事件》 而是在拖拉事件

错别字

https://wangdoc.com/javascript/features/conversion.html
强制转换主要指使用Number、String和Boolean三个函数，手动将各种类型的值，分布转换成数字、字符串或者布尔值。

强制转换主要指使用Number、String和Boolean三个函数，手动将各种类型的值，【分布】转换成数字、字符串或者布尔值。

分布 应该是错别字吧

很好，很全，但是很简练

文档描述错误

附录：网页元素接口 => img => 第9点 事件属性
地址：https://wangdoc.com/javascript/elements/image.html#事件属性

描述错误：“图像加载完成，会触发onerror属性指定的回调函数。”
应该是：“图片加载过中发生错误，会触发onerror属性指定的回调函数。”

请问能不能转pdf 方便做笔记

CSS 操作 > 关于 StyleSheet 接口和 CSSStyleSheet 接口

阮老师，您好，从您的许多开源文档中我学到的很多的基础知识，非常感谢，我也希望在从中获取的同时也贡献自己的一部分力量。
在 CSS 操作这一篇中关于 StyleSheet 接口这一部分存在一些小问题，我在 MDN 上面查到 StyleSheet 接口是 CSSStyleSheet 接口的父接口，其中 disabled, href, media, ownerNode, parentStyleSheet, title, type 属于 StyleSheet 实例的属性，而 cssRules, ownerRule 属于 CSSStypeSheet 实例的属性。目前在文档里面未体现两个接口之间的关系

1.2 数值精度部分不正确

https://wangdoc.com/javascript/types/number.html#%E6%95%B0%E5%80%BC%E7%B2%BE%E5%BA%A6

其中写道

第1位：符号位，0表示正数，1表示负数
第2位到第12位（共11位）：指数部分
第13位到第64位（共52位）：小数部分（即有效数字）

下面又写道

(-1)^符号位 * 1.xx...xx * 2^指数部分

这两个部分不对应啊，哪个是第二部分哪个是第三部分，请阮老师明示

JavaScript教程 - 面向对象编程 - 类的继承 - 多重继承 的instanceof失真问题

阮老师，通过您这种方法实现多重继承，会让s instanceif M2为false，那不是让instanceof失真了么

=> 问题的位置

疑惑的源代码：

function M1() {
  this.hello = 'hello';
}

function M2() {
  this.world = 'world';
}

function S() {
  M1.call(this);
  M2.call(this);
}

// 继承 M1
S.prototype = Object.create(M1.prototype);
// 继承链上加入 M2
Object.assign(S.prototype, M2.prototype);

// 指定构造函数
S.prototype.constructor = S;

var s = new S();
s.hello // 'hello'
s.world // 'world'

测试：

s instanceof M1
=> true

s instanceof M2
=> false

s instanceof S
=> true

关于运算符会返回布尔值的问题

在 数据类型中的布尔值 章节中，有一段是下面这样的：

下列运算符会返回布尔值：
两元逻辑运算符： && (And)，|| (Or)
前置逻辑运算符： ! (Not)
相等运算符：===，!==，==，!=
比较运算符：>，>=，<，<=

我在MDN上看到的是 &&运算符 和 || 运算符实际上返回一个指定操作数的值，这里是否表达有歧义？

事件-》鼠标事件-》代码错误

事件 -》鼠标事件-》3.5 有一行代码错误

代码如下：
function showCoords(evt) {
console.log(
'screenX value: ' + evt.screenX + '\n'
'screenY value: ' + evt.screenY + '\n'
);
}

控制台输出语句中 少了一个 + 符号 ；

NodeList接口

通过您的文章真的学到了很多，非常感谢。
在1.1节概述中，有一点小小的错误，通过document.getElementsByTagName()这样的方式获取到的并非NodeList实例，而是HTMLCollection的实例。

请教一个关于 左移位运算 的问题

我认为第二张图的结果表明，左移运算符的最高位即符号位参与了移动，该如何理解呢？
运行环境: Google chrome 版本: 68.0.3440.84

请教一个问题

老师你好，此教程怎样在本地环境安装部署，需要配置什么环境？？

歧义：标准库-JSON对象 3.1 JSON.stringify方法会忽略对象的不可遍历属性。

JSON.stringify方法会忽略对象的不可遍历属性。
建议改为
JSON.stringify方法会忽略对象中不可遍历的属性。

防止歧义。

内容匹配失误

属性描述对象章节的几处错误

阮老师您好，我在阅读 属性描述对象 这一章时，发现了几处错误。

1. Object.getOwnPropertyDescriptor() 部分有一处大小写拼写错误，建议将代码后面说明文字中的 Obj 改成 obj。以下引用您的原文：

var obj = { p: 'a' };

Object.getOwnPropertyDescriptor(obj, 'toString')
// undefined

上面代码中，toString是Obj对象继承的属性，Object.getOwnPropertyDescriptor无法获取。

2. Object.defineProperty()，Object.defineProperties() 部分有一处描述不清楚，文中说 Object.defineProperties()的第三个参数，这个函数只有两个参数啊，您可能是想说 Object.defineProperty()的第三个参数。以下引用您的原文：

`Object.defineProperty()`和`Object.defineProperties()`的第三个参数，是一个属性对象。它的writable、configurable、enumerable这三个属性的默认值都为false。

3. Object.defineProperty()，Object.defineProperties() 部分有一处属性名有歧义，代码中使用的是 foo 属性名，而下面的说明文字里面使用的是 obj.p。以下引用您的原文：

var obj = {};
Object.defineProperty(obj, 'foo', {});
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
//   value: undefined,
//   writable: false,
//   enumerable: false,
//   configurable: false
// }

上面代码中，定义 obj.p 时用了一个空的属性描述对象，就可以看到各个元属性的默认值。

4. Object.prototype.propertyIsEnumerable() 部分有一个知识点有错误，从您描述来看， obj.propertyIsEnumerable('toString') 之所以返回 false，是因为 obj.toString 属性是不可遍历的。而实际情况是，obj.propertyIsEnumerable 方法只能检测实例本身的属性是否可遍历，对于继承的属性，不管是否可遍历，一律返回 false。以下引用您的原文：

实例对象的propertyIsEnumerable方法返回一个布尔值，用来判断某个属性是否可遍历。

var obj = {};
obj.p = 123;

obj.propertyIsEnumerable('p') // true
obj.propertyIsEnumerable('toString') // false

上面代码中，obj.p是可遍历的，而继承自原型对象的obj.toString属性是不可遍历的。

厉害

楼主真的厉害能坚持写

History 对象章节书写有误

阮前辈您好，在阅读 History 对象 章节时，
我调出控制台试验 History 对象 的一些属性和方法，

然后按照文中的写法，发现代码不能正常运行，
诸如

History.length
History.back();
...

后面得知，History 应该写成 history 😯

对象与原始类型值进行 == 比较的问题

在《比较运算符》这章，您说对象与字符串进行 == 比较时，对象转为字符串，以下是您文档中的代码：

// 对象与字符串比较时，对象转为字符串
[1] == '1' // true
// 等同于 String([1]) == '1'
[1, 2] == '1,2' // true
// 等同于 String([1, 2]) == '1,2'

我经过测试发现不是这样的。我发现当使用 == 运算符将对象与原始类型值 (Boolean Number String) 进行比较的时候，都是将对象转换为 Number 类型，然后再进行比较的：

var arr = [1]
arr.valueOf = function () {
  return 1
}
arr.toString = function () {
  return 'hello'
}

arr == '1' // true
// 等同于 Number(arr) == '1'
// 等同于 arr.valueOf() == '1'
// 等同于 1 == '1'
// 等同于 1 === Number('1')

var arr = [1]
arr.valueOf = function () {
  return 0
}
arr.toString = function () {
  return 'hello'
}

arr == '' // true
// 等同于 Number(arr) == ''
// 等同于 arr.valueOf() == ''
// 等同于 0 == ''
// 等同于 0 === Number('')

您文档中的代码应该改成这样：

// 对象与字符串比较时，对象转为数值
[1] == '1' // true
// 等同于 Number([1]) == '1'
// 等同于 [1].valueOf() == '1'
// 由于 [1].valueOf() 返回的是一个对象，所以需要调用 [1].toSting()
// 等同于 [1].toString() == '1'
// 等同于 '1' == '1'

[1, 2] == '1,2' // true
// 等同于 Number([1, 2]) == '1,2'
// 等同于 [1, 2].valueOf().toString() == '1,2'
// 等同于 '1,2' == '1,2'

标准库>array对象 3.16链式使用 得不到文章描述的输出内容

文本小错误

• https://wangdoc.com/javascript/types/number.html#%E6%95%B0%E5%80%BC%E8%8C%83%E5%9B%B4
  -1075 次方还是能展示的。和 -1074 次方结果一样

Math.pow(2, -1076) // 0  

关于“数组”章节

此章节下面的数组的空位 这一小节中，如下图片处，我怎么觉得是 数组空位影响了length属性

deploy.sh执行

我在git bash中执行./deploy.sh，得到结果为iv undefined，请问deploy.sh后面有什么参数需要设置呢，我想把您的工程运行起来，作为一个网站方便查询，谢谢！

文档描述小问题

附录：网页元素接口 => form => htmlformelement-的实例属性
地址：https://wangdoc.com/javascript/elements/form.html#htmlformelement-的实例属性

文本：acceptCharset：字符串，表示服务器所能接受的字符编码，多个编码格式之间或空格分隔。

"多个编码格式之间或空格分隔" 中间漏了 "使用逗号"。
大概是："多个编码格式之间使用逗号或空格分隔"

代码书写错误

`(function($, window, document) {

function go(num) {
}

function handleEvents() {
}

function initialize() {
}

function dieCarouselDie() {
}

//attach to the global scope
window.finalCarousel = {
init : initialize,
destroy : dieCouraselDie
}

})( jQuery, window, document );`
问题：
function dieCarouselDie() {
}与destroy : dieCouraselDie 函数名与destroy属性值，不一致 ！

表单事件

很小且不影响阅读的文本问题

异步操作一章中的Promise对象章节中的第4小节(Promise.prototype.then()), "then方法可以接受两个回调函数，第一个是异步操作成功时（变为fulfilled状态）时的回调函数" 多了一个"时"字.

Node 接口中 NodeValue描述错误

出错地址

错误位置：
/***********
只有文本节点（text）和注释节点（comment）有文本值，因此这两类节点的nodeValue可以返回结果，其他类型的节点一律返回null。同样的，也只有这两类节点可以设置nodeValue属性的值，其他类型的节点设置无效。
*************/

阮老师，属性节点的nodeValue经测试可以返回结果并且可以设置。

测试地址

您好，阮一峰老师，我可以给这个教程制作一个teadocs版本吗？

您好，阮一峰老师，我可以给这个教程制作一个teadocs版本吗，我的微信是iamnotahacker，可以加一下吗?

沙发

面向对象编程 - 对象的继承 - 5. 模块，下面的描述是否少了点内容？

位置

• JavaScript教程
  • 面向对象编程
    • 对象的继承
      • 5.模块

JavaScript 模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。
/*--------------------
："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。

为了解决上面的缺点，可以
-------------------------*/
但是，JavaScript 不是一种模块化编程语言，ES6 才开始支持“类”和“模块”。下面介绍传统的做法，如何利用对象实现模块的效果。

定时器一章中关于介绍setTimeout(),介绍是不是不严谨?

下面两段话引用你文中的开头:
上面代码会先输出1和3，然后等待1000毫秒再输出2。注意，console.log(2)必须以字符串的形式，作为setTimeout的参数。
这段是你文中的描述,上面你又说
上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。

我查询了一下MDN上的描述,.
这是一个替代语法，你可以使用字符串代替function ，在delay毫秒之后执行字符串 (使用该语法是不推荐的, 原因和使用 eval()一样，有安全风险)。
console.log(2)不作为字符串也可以输出结果.
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

阮老师，有考虑过 H5 和 CSS3 的基础教程吗

不能进行搜索吗

只有目录，无法快速定位想要找的内容，希望加上内容检索功能

函数声明问题

在您的章节函数部分拷来的两段代码，有些不理解。

if (false) {
  function f() {}
}
f() // 不报错

1. 为什么在chrome中运行是报错的？

if (false) {
  var f = function () {};
}
f() // undefined

2. 为什么在chrome中运行也是报错的？

• 个人感觉两个例子中，由于变量提升，f被声明了，但是但是未能进入条件语句，所以f值为undefined，调用f会报错。

• 本人js小学生，阮老师忠粉，还请阮老师指教一二。

新的教程缺少 Web API 的知识，是不再更新维护了吗？

看晕逼了。

async，general。。。看晕逼了。

错别字

// <a id="test" href="http://user:[email protected]:8081/index.html?bar=1#foo">test</a>
...
// 原文
a.password // "passwd"
...
// 个人更正
a.password // "passed"

https://github.com/wangdoc/javascript-tutorial/blob/master/docs/elements/a.md
line: 32

这不就是阮一峰的教程吗？

http://javascript.ruanyifeng.com/grammar/basic.html

根节点问题

阮老师，在读‘’Document 节点‘’这一章节中，看到文章开始有说document是文档的根节点，文章下面又说document.documentElement返回的文档的根节点。到底哪个正确呢。看MDN说document.documentElement返回的文档的根元素。可w3c的文档上又说获取根节点的两种方式中有document.documentElement。这些要怎么理解呢。