Giter Club home page Giter Club logo

javascript-lessons's Introduction

作者简介

阿里云后端开发专家,熟悉云原生及Java核心技术,在分布式、微服务、编排调度场景有较丰富的实战经验,业务上对工业智能制造、影院运营管理、协同办公管理有不错的理解。

这里坚持原创,分享学习和工作的经验。欢迎交流、欢迎提问、欢迎转载(但需注明出处)。

个人经历

时间 经历
2020 - now 阿里云,工业智能制造,开发砖家
2017 - 2020 阿里影业,影院运营管理,开发砖家
2017 - 2017 极客学院,JS闯关记,前端布道师
2012 - 2017 菜航,协同办公管理,攻城狮
2010 - 2012 科域,企业资源管理,程序猿
2009 - 2010 乱入,销售代表,物流操作员
2013 - 2016 硕士,中国民航大学
2005 - 2009 本科,湖北大学
2002 - 2005 高中,嘉鱼一中
1980 - 1990 出生,摩羯兔男

联系方式

我的微信公众号是:劼哥舍。想要找我聊天,可以加个人微信号:shi0090(记得备注GitHub来源,以及简单自我介绍)

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-《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

发现一个问题

变量和数据类型

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

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

isNaN(testNumber) // true

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

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

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


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

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

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

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

append() & appendChild()

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

原型链章节建议

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

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

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

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

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

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

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

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.