Git Product home page Git Product logo

javascript-lessons's Introduction

《JavaScript 闯关记》

2017年9月24号更新:《JavaScript闯关记》视频版已经在极客学院上线啦,你只需花一张电影票的钱(29元),就可以观赏总时长3小时12分的 JavaScript 大片,真的不要太划算哦。详情可参见《JavaScript闯关记》视频版硬广

为何写作此课程

stone 主要负责基于 Web 的企业内部管理系统的开发,虽然能够熟练地使用 JavaScript,但随着对 JavaScript 的理解越来越深,才发现自己尚未掌握其精髓。

2015年,公司请来 大胡子姜志辉 为我们培训 JS Dota 课程,让我对 JavaScript 有了全新的认识,他一步步引导我们手写 jQuery、Backbone 等 JavaScript 主流框架,更是激发了我对 JavaScript 浓厚的兴趣。

俗话说「教是最好的学」,我是公司的兼职教员,正好借此机会梳理自己 JavaScript 知识体系,深入研究每个知识点,整理成培训课程分享给大家。

本课程之所以叫做《JavaScript 闯关记》,是因为部分章节精心设计了挑战关卡,通过提供更多的实战机会,让大家可以循序渐进地、有目的地、有挑战地开展学习。

课程结构及目录

以下目录只是初步构想,课程结构及内容会根据实际情况随时进行调整。

初级

中级

实践

课程内容来源

本课程内容主要基于以下书籍整理,如需了解更多细节,可自行查阅原著。

《编写可维护的 JavaScript》
https://book.douban.com/subject/21792530

《JavaScript 语言精粹》
https://book.douban.com/subject/3590768

《JavaScript DOM 编程艺术》
https://book.douban.com/subject/6038371

《JavaScript 权威指南(第6版)》
https://book.douban.com/subject/10549733

《JavaScript 高级程序设计(第3版)》
https://book.douban.com/subject/10546125

勘误及提问

如果您在学习本课程时发现错误,或者想提关于本课程的技术问题,可以通过以下方式联系我。

微信公众号:劼哥舍
邮件:[email protected]
微博:http://weibo.com/stone0090
GitHub:https://github.com/stone0090

更多

关注微信公众号「劼哥舍」回复「答案」,获取关卡详解。
关注 https://github.com/stone0090/javascript-lessons,获取最新动态。

javascript-lessons's People

Contributors

hiyangguo avatar jokerlzd avatar stone0090 avatar zhenya-zhu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

javascript-lessons's Issues

一个微不足道的文字错误 ; )

一个微不足道的文字错误 ; )


1.1-Introduction 简介 中,在 JavaScript 起源 标题下最后一段文字:

JavaScript 从一个简单的输入验证器发展成为一门强大的編程语言,完全出乎人们的意料。

其中的“編程语言”的“編”写成繁体了!(或见截图)
js

希望作者改一下。
文章写得很棒,已关注微信,作者加油,期待更多精彩的文章!

1.1-《JavaScript 闯关记》简介

简介

JavaScript 是面向 Web 的编程语言,绝大多数现代网站都使用了 JavaScript,并且所有的现代 Web 浏览器(电脑,手机,平板)均包含了 JavaScript 解释器。 这使得 JavaScript 能够称得上史上使用最广泛的编程语言。 JavaScript 也是前端开发工程师必须掌握的三种技能之一:描述网页内容的 HTML、描述网页样式的 CSS、以及描述网页行为的 JavaScript。

JavaScript 是一门 动态的、弱类型的、面向对象的、解释型的 编程语言,非常适合面向对象和函数式的编程风格。JavaScript 的语法来自于 Java,它的一等函数(first-class function)来自于 Scheme,它的基于原型(prototype-based)的继承来自于 Self。但学习本课程不必去了解那些(Java/Scheme/Slef)语言或熟悉那些术语。

JavaScript 起源

时间:1995年

人物:Brendan Eich(布兰登·艾奇)

背景:那个时候,绝大多数因特网用户都是用速度仅为28.8kbit/s的「猫」上网,为了完成简单的表单验证,必须把表单数据发送到服务器端才能确定用户是否没有填写某个必填域、是否输入了无效的值,每次操作需等待30秒以上才会有结果,这无疑是在慢性自杀。

事件:当时走在技术革新最前沿的 Netscape 公司指派 Brendan Eich 开发一种客户端语言,用来处理这种简单的验证,它就是 JavaScript。JavaScript 原名 LiveScript,Netscape 为了搭上媒体热炒 Java 的顺风车,才把 LiveScript 改名为 JavaScript。(所以 Java 和 JavaScript 的关系,就相当于雷锋和雷峰塔的关系。)

自此以后,JavaScript 逐渐成为市面上常见浏览器必备的一项特色功能。如今,JavaScript 的用途早已不再局限于简单的数据验证,而是具备了与浏览器窗口及其内容等几乎所有方面交互的能力。今天的 JavaScript 已经成为一门功能全面的编程语言,能够处理复杂的计算和交互,拥有了闭包、匿名(lambda,拉姆达)函数,甚至元编程等特性。

JavaScript 从一个简单的输入验证器发展成为一门强大的编程语言,完全出乎人们的意料。应该说,它既是一门非常简单的语言,又是一门非常复杂的语言。说它简单,是因为学会使用它只需片刻功夫;而说它复杂,是因为要真正掌握它则需要数年时间。

JavaScript 实现

随着 JavaScript 的普及,微软公司在 IE 浏览器中也加入了名为 JScript 的 JavaScript 实现,由于没有标准规定 JavaScript 的语法和特性,导致市面上存在多个版本的 JavaScript 实现,且互不兼容,因此 JavaScript 标准化问题被提上了议事日程。

1997年,欧洲计算机制造商协会(ECMA,European Computer Manufactures Association)定义了名为ECMAScript(发音为 ek-ma-script)的脚本语言标准,它是通用的,与平台无关的语言标准。自此以后,浏览器开发商开始致力于将 ECMAScript 作为各自 JavaScript 实现的基础。虽然基础相同,但具体实现在不同浏览器上却略有差异。

JavaScript 和 ECMAScript 通常被人们用来表达相同的含义,但 JavaScript 的含义却比 ECMAScript 中规定的要多得多。一个完整的 JavaScript 实现应该由下面三个不同的部分组成。

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

核心(ECMAScript)

ECMAScript 标准由 语法、数据类型、语句、关键字、保留字、运算符、对象 组成。它与 Web 浏览器没有任何依赖关系,并且这门语言本身并不包含输入和输出定义。ECMAScript 定义的只是这门语言的基础,而在此基础之上可以构建更完善的脚本语言。

Web 浏览器只是 ECMAScript 实现的宿主环境之一,其他宿主环境包括 Node 和 Adobe Flash。宿主环境不仅提供基本的 ECMAScript 实现,同时也会提供该语言的扩展(例如:DOM、BOM),这些扩展则利用 ECMAScript 的核心类型和语法提供更多更具体的功能。

JavaScript 是 Web 浏览器对 ECMAScript 标准的实现,ActionScript 是 Adobe Flash 对 ECMAScript 标准的实现。

ECMAScript 历史

1997年,ECMAScript 1版发布。

1998年6月,ECMAScript 2版发布。

1999年12月,ECMAScript 3版发布。

2000年,ECMAScript 4开始酝酿,最终这个版本没有通过。

2009年12月,ECMAScript 5版发布。

2011年6月,ECMAscript 5.1版发布,成为国际标准。

2015年6月,ECMAScript 6正式通过,成为国际标准。

扩展阅读「阮一峰 的《ECMAScript 6入门》」
http://es6.ruanyifeng.com/#docs/intro

3.0版是一个巨大的成功,在业界得到广泛支持,成为通行标准,奠定了 JavaScript 语言的基本语法,以后的版本完全继承。直到今天,初学者一开始学习 JavaScript,其实就是在学3.0版的语法。

文档对象模型(DOM)

文档对象模型(DOM,Document Object Model)是用于 HTML 的应用程序编程接口(API),它把整个页面映射为一个多层节点结构。HTML 页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。看下面这个 HTML 页面:

<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

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

由于 Netscape 和 微软实现的 DOM 互不兼容,负责制定 Web 通信标准的 W3C(World Wide Web Consortium,万维网联盟)开始着手规划 DOM。

DOM 1级:

  • DOM 核心:映射文档结构,简化对文档中任意部分的操作和访问。
  • DOM HTML:在 DOM 核心的基础上,添加了针对 HTML 的对象和方法。

DOM 2级:

  • DOM 视图:定义了跟踪不同文档视图的接口。
  • DOM 事件:定义了事件和事件处理的接口。
  • DOM 样式:定义了基于 CSS 为元素应用样式的接口。
  • DOM 遍历和范围:定义了遍历和操作文档树的接口。

DOM 3级:

  • DOM 加载和保存:引入了以统一方式加载和保存文档的方法。
  • DOM 验证:新增了验证文档的方法。
  • DOM 核心扩展。

注意:

  1. DOM 并不是只针对 JavaScript 的,很多别的语言也都实现了 DOM。
  2. DOM 0级标准是不存在的,它只是 DOM 历史坐标中的一个参照点而已。

浏览器对象模型(BOM)

浏览器对象模型(BOM,Browser Object Model)是用于浏览器的应用程序编程接口(API),它把整个浏览器窗口映射为一个对象。从根本上讲,BOM 只处理浏览器窗口和框架,但人们习惯上也把所有针对浏览器的 JavaScript 扩展算作 BOM 的一部分,例如:

  • 弹出新浏览器窗口的功能。
  • 移动、缩放和关闭浏览器窗口的功能。
  • 提供浏览器详细信息的 navigator 对象。
  • 提供浏览器所加载页面的详细信息的 localtion 对象。
  • 提供用户显示器分辨率详细信息的 screen 对象。
  • 对 cookies 的支持。
  • XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。

BOM 最让人头疼的是没有相关的规范和标准,每个浏览器都有独有的实现,这个问题在 HTML5 中得到了解决,HTML5 致力于把很多 BOM 功能写入正式规范。

小结

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

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

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

扩展阅读「Standard ECMA-262 5.1 Edition 」
http://www.ecma-international.org/ecma-262/5.1/

扩展阅读「ECMAScript 5浏览器兼容一览表」
http://caniuse.mojijs.com/Home/Html/item/key/es5/index.html

更多

您还可以在 GitHubStar 该课程,查看章节目录,获取最新内容。
https://github.com/stone0090/javascript-lessons

append() & appendChild()

Hello Stone,使用代码里面document.body.append(div); 时无法插入div,改为appendChild后成功显示。
我的理解是因为append是jQuery的,在原生态JS代码里所以无法显示,需要改代码为document.body.appendChild(div);?不知道理解的对不对,学习JS中还是小白,请大神指教。

闭包那一章有疑惑,望解答

javascript-lessons/2.4-Scope&Closure/README.md
您好,今天刚好重新看了javascript权威指南,根据此书8.2章中的解释

当函数以函数调用时,根据ECMAScript3和非严格的ECMAScript5对函数调用的规定,调用上下文(this的值)是全局对象,然而,在严格模式下,调用上下文则是undefined

而您所说指向调用函数的那个对象,函数也是一个对象,当在一个函数中调用另一个函数时,this仍然指向的是全局对象,您看是否有歧义
BTW,能否提个建议把构造函数中的this做下解释,这段我也看了好久才看懂...

发现一个问题

变量和数据类型

object 先则调用对象的 valueOf() 方法,然后依照前面的规则转换返回的值。如果转换的结果是 NaN,则调用对象的toString() 方法,然后再次依照前面的规则转换返回的字符串值

var testNumber = {
  valueOf: function () {
    return 'This is string'
  },
  toString: function () {
    return '123'
  }
}

isNaN(testNumber) // true

按着这条所写,应该返回false,因为123并不是NaN

原型链章节建议

个人认为,在介绍原生对象的原型时,应当加上一句话

所有的内置构造函数(以及大部分自定义的构造函数)都具有一个继承自Object.prototype的原型,Object.prototype没有原型

这样更容易理解原型链问题

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.