本教程全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容。
内容上从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。
本教程适合初学者当作 JavaScript 语言入门教程,学完后就可以承担实际的网页开发工作,也适合当作日常使用的参考手册。
JavaScript 后续新增的 ES6 语法,请看《ES6 标准入门教程》。
JavaScript 教程 https://wangdoc.com/javascript
本教程全面介绍 JavaScript 核心语法,覆盖了 ES5 和 DOM 规范的所有内容。
内容上从最简单的讲起,循序渐进、由浅入深,力求清晰易懂。所有章节都带有大量的代码实例,便于理解和模仿,可以用到实际项目中,即学即用。
本教程适合初学者当作 JavaScript 语言入门教程,学完后就可以承担实际的网页开发工作,也适合当作日常使用的参考手册。
JavaScript 后续新增的 ES6 语法,请看《ES6 标准入门教程》。
我在git bash中执行./deploy.sh,得到结果为iv undefined,请问deploy.sh后面有什么参数需要设置呢,我想把您的工程运行起来,作为一个网站方便查询,谢谢!
事件 -》鼠标事件-》3.5 有一行代码错误
代码如下:
function showCoords(evt) {
console.log(
'screenX value: ' + evt.screenX + '\n'
'screenY value: ' + evt.screenY + '\n'
);
}
控制台输出语句中 少了一个 + 符号 ;
只有目录,无法快速定位想要找的内容,希望加上内容检索功能
在《比较运算符》这章,您说对象与字符串进行 ==
比较时,对象转为字符串,以下是您文档中的代码:
// 对象与字符串比较时,对象转为字符串
[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'
阮前辈您好,在阅读 History 对象
章节时,
我调出控制台试验 History 对象
的一些属性和方法,
然后按照文中的写法,发现代码不能正常运行,
诸如
History.length
History.back();
...
后面得知,History
应该写成 history
😯
您好,阮一峰老师,我可以给这个教程制作一个teadocs版本吗,我的微信是iamnotahacker,可以加一下吗?
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。
// <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
阮老师您好,我在阅读 属性描述对象 这一章时,发现了几处错误。
Obj
改成 obj
。以下引用您的原文:var obj = { p: 'a' }; Object.getOwnPropertyDescriptor(obj, 'toString') // undefined
上面代码中,
toString
是Obj
对象继承的属性,Object.getOwnPropertyDescriptor
无法获取。
Object.defineProperties()
的第三个参数,这个函数只有两个参数啊,您可能是想说 Object.defineProperty()
的第三个参数。以下引用您的原文:`Object.defineProperty()`和`Object.defineProperties()`的第三个参数,是一个属性对象。它的writable、configurable、enumerable这三个属性的默认值都为false。
foo
属性名,而下面的说明文字里面使用的是 obj.p
。以下引用您的原文:var obj = {}; Object.defineProperty(obj, 'foo', {}); Object.getOwnPropertyDescriptor(obj, 'foo') // { // value: undefined, // writable: false, // enumerable: false, // configurable: false // }
上面代码中,定义
obj.p
时用了一个空的属性描述对象,就可以看到各个元属性的默认值。
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
属性是不可遍历的。
数据类型>对象>1.4表达式还是语句
原文=>V8 引擎规定,如果行首是大括号,一律解释为对象。
经测试=>V8 引擎规定,如果行首是大括号,一律解释为代码块。
JavaScript 模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。
/*--------------------
:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。
为了解决上面的缺点,可以
-------------------------*/
但是,JavaScript 不是一种模块化编程语言,ES6 才开始支持“类”和“模块”。下面介绍传统的做法,如何利用对象实现模块的效果。
通过您的文章真的学到了很多,非常感谢。
在1.1节概述中,有一点小小的错误,通过document.getElementsByTagName()这样的方式获取到的并非NodeList实例,而是HTMLCollection的实例。
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^指数部分
这两个部分不对应啊,哪个是第二部分哪个是第三部分,请阮老师明示
数据类型一章中有“null:表示空值,即此处的值为空。”
tyoeof null 的结果是object
阮老师,通过您这种方法实现多重继承,会让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
阮老师,您好,从您的许多开源文档中我学到的很多的基础知识,非常感谢,我也希望在从中获取的同时也贡献自己的一部分力量。
在 CSS 操作这一篇中关于 StyleSheet 接口这一部分存在一些小问题,我在 MDN 上面查到 StyleSheet 接口是 CSSStyleSheet 接口的父接口,其中 disabled, href, media, ownerNode, parentStyleSheet, title, type 属于 StyleSheet 实例的属性,而 cssRules, ownerRule 属于 CSSStypeSheet 实例的属性。目前在文档里面未体现两个接口之间的关系
:)
有时候会在看到某个地方时会想参考其他章节,但是目前目录是固定的,只能翻到页顶点击目录。希望以后可以目录随页面滚动。
document.getElementsByTagName返回一个 NodeList 集合
地址:https://wangdoc.com/javascript/dom/nodelist.html
document.getElementsByTagName方法返回的是HTMLCollection实例
下面两段话引用你文中的开头:
上面代码会先输出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
异步操作一章中的Promise对象章节中的第4小节(Promise.prototype.then()), "then方法可以接受两个回调函数,第一个是异步操作成功时(变为fulfilled状态)时的回调函数" 多了一个"时"字.
老师你好,此教程怎样在本地环境安装部署,需要配置什么环境??
阮老师,在读‘’Document 节点‘’这一章节中,看到文章开始有说document是文档的根节点,文章下面又说document.documentElement返回的文档的根节点。到底哪个正确呢。看MDN说document.documentElement返回的文档的根元素。可w3c的文档上又说获取根节点的两种方式中有document.documentElement。这些要怎么理解呢。
附录:网页元素接口 => img => 第9点 事件属性
地址:https://wangdoc.com/javascript/elements/image.html#事件属性
描述错误:“图像加载完成,会触发onerror属性指定的回调函数。”
应该是:“图片加载过中发生错误,会触发onerror属性指定的回调函数。”
在 数据类型中的布尔值 章节中,有一段是下面这样的:
下列运算符会返回布尔值:
两元逻辑运算符: && (And),|| (Or)
前置逻辑运算符: ! (Not)
相等运算符:===,!==,==,!=
比较运算符:>,>=,<,<=
我在MDN上看到的是 &&
运算符 和 ||
运算符实际上返回一个指定操作数的值,这里是否表达有歧义?
此章节下面的数组的空位
这一小节中,如下图片处,我怎么觉得是 数组空位影响了length属性
这三个事件都是ClipboardEvent接口的实例。ClipboardEvent有一个实例属性clipboardData,是一个 DataTransfer 对象,存放剪贴的数据。具体的 API 接口和操作方法,请参见《触摸事件》的 DataTransfer 对象部分。
好像不是在《触摸事件》 而是在拖拉事件
Math.pow(2, -1076) // 0
最近刚刚拜读了您的javascript教程,感觉受益匪浅
想继续学习nodejs,不知您的node教程是否已经上线?如果可以的话,能否提供下链接?
谢谢
楼主真的厉害能坚持写
附录:网页元素接口 => form => htmlformelement-的实例属性
地址:https://wangdoc.com/javascript/elements/form.html#htmlformelement-的实例属性
文本:acceptCharset:字符串,表示服务器所能接受的字符编码,多个编码格式之间或空格分隔。
"多个编码格式之间或空格分隔" 中间漏了 "使用逗号"。
大概是:"多个编码格式之间使用逗号或空格分隔"
async,general。。。看晕逼了。
旧版的 http://javascript.ruanyifeng.com/introduction/intro.html
然后好像访问的时候,速度不如以前了。是因为最近服务器被攻击的原因吗?
JSON.stringify
方法会忽略对象的不可遍历属性。
建议改为
JSON.stringify
方法会忽略对象中不可遍历的属性。
防止歧义。
`(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属性值,不一致 !
https://wangdoc.com/javascript/features/conversion.html
强制转换主要指使用Number、String和Boolean三个函数,手动将各种类型的值,分布转换成数字、字符串或者布尔值。
强制转换主要指使用Number、String和Boolean三个函数,手动将各种类型的值,【分布】转换成数字、字符串或者布尔值。
分布 应该是错别字吧
在您的章节函数部分拷来的两段代码,有些不理解。
if (false) {
function f() {}
}
f() // 不报错
if (false) {
var f = function () {};
}
f() // undefined
个人感觉两个例子中,由于变量提升,f被声明了,但是但是未能进入条件语句,所以f值为undefined,调用f会报错。
本人js小学生,阮老师忠粉,还请阮老师指教一二。
event.origin: 消息发向的网址
应该是:发送消息窗口的源,消息发送方窗口的网址,而不是发向的网址
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.