Learning JavaScript - JavaScript Essentials for Modern Application Development by Ethan Brown
Learning JavaScript JAVASCRIPT ESSENTIALS FOR MODERN APPLICATION DEVELOPMENT by Ethan Brown
我的GitHub 文件： https://github.com/Li-YangZhong/learning_javascript_by_ethan_brown
I certainly hold no animosity toward amateurs: everyone has to start somewhere, programming is a profitable skill, and a career in programming has many advantages.
To the new programmer, the amateur, I say this: there is no shame in being an amateur. There is some shame in staying an amateur (if you make programming your profession, certainly). If you want to practice programming, practice it. Learn everything you can, from every source you can. Keep an open mind and—perhaps most importantly—question everything. Question every expert. Question every experienced programmer. Constantly ask “Why?”
You are learning JavaScript at a very exciting time. The Web is leaving its infancy (technically speaking), and web development isn’t the confusing, complicated Wild West that it was 5 and 10 years ago. Standards like HTML5 and ES6 are making it easier to learn web development, and easier to develop high-quality applications.
Node.js is extending the reach of JavaScript beyond the browser, and now it is a viable choice for system scripting, desktop application development, backend web development, and even embedded applications.
Cascading Style Sheets (CSS) also use JavaScript syntax for block comments (inline comments are not supported in CSS).
HTML (like CSS) doesn’t have inline comments, and its block comments are different than JavaScript. They are surrounded by the unwieldy <!-- and -->
Ctrl+Shift+J /*open and close Console in the Chrome browser*/
https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js
From https://www.bootcdn.cn/jquery/
To create a subdirectory called test, type:
$ mkdir test
Two periods .. are a shortcut for “parent directory.” So to go “up” a directory, type:
$ cd ..
Beginners are often confused by git add; the name makes it seem like you’re adding files to the repository. Those changes can be new files, but just as likely they’re changes to files already in the repository. In other words, you’re adding changes, not files (and a new file is just a special type of change).
verify that npm and Node are functioning on your system using the following commands:
node -v
npm -v
Install the popular Underscore package to see how it works by running the following:
$ npm install underscore
If we wanted to install a specific version of Underscore, we can specify the version number explicitly:
$ npm install underscore@1.8.0
When you install local packages, you should add either the--saveor--saveDevflag; if you don’t, the package will be installed, but not listed in the package.json file.
Eric@Lenovo MINGW64 /d/sync_with_github/learning_javascript_by_ethan_brown (master)
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See npm help json for definitive documentation on these fields
and exactly what they do.
Use npm install <pkg> afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (learning_javascript_by_ethan_brown)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository: (https://github.com/Li-YangZhong/learning_javascript_by_ethan_brown.git)
keywords:
author:
license: (ISC)
About to write to D:\sync_with_github\learning_javascript_by_ethan_brown\package.json:
{
"name": "learning_javascript_by_ethan_brown",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Li-YangZhong/learning_javascript_by_ethan_brown.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Li-YangZhong/learning_javascript_by_ethan_brown/issues"
},
"homepage": "https://github.com/Li-YangZhong/learning_javascript_by_ethan_brown#readme"
}
Is this OK? (yes)
The idea of dependency management is that the dependency versions referenced in package.json are all that’s necessary to re-create (download and install) the dependencies themselves.
使用npm init命令创建package.json
使用npm install --save underscore将安装的module的信息写入package.json文件
使用npm install命令重新下载安装所有package.json文件中包含的modules
First, you’ll install Gulp globally with:
$ npm install -g gulp
You’ll only need to install Gulp globally once for each system you develop on. Then, for each project, you’ll need a local Gulp, so from your project root, run npm install --save-dev gulp (Gulp is an example of a dev dependency: your app won’t need it to run, but you’ll use it to help with your development process).
Eric@Lenovo MINGW64 /d/sync_with_github/learning_javascript_by_ethan_brown (master)
$ cnpm install -g gulp
Downloading gulp to C:\Users\Eric\AppData\Roaming\npm\node_modules\gulp_tmp
Copying C:\Users\Eric\AppData\Roaming\npm\node_modules\gulp_tmp\_gulp@4.0.2@gulp to C:\Users\Eric\AppData\Roaming\npm\node_modules\gulp
Installing gulp's dependencies to C:\Users\Eric\AppData\Roaming\npm\node_modules\gulp/node_modules
[1/4] vinyl-fs@^3.0.0 installed at node_modules\_vinyl-fs@3.0.3@vinyl-fs
[2/4] gulp-cli@^2.2.0 installed at node_modules\_gulp-cli@2.2.0@gulp-cli
platform unsupported glob-watcher@5.0.3 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
[3/4] glob-watcher@^5.0.3 installed at node_modules\_glob-watcher@5.0.3@glob-watcher
[4/4] undertaker@^1.2.1 installed at node_modules\_undertaker@1.2.1@undertaker
All packages installed (287 packages installed from npm registry, used 7s(network 7s), speed 394.44kB/s, json 268(356.75kB), tarball 2.2MB)
[gulp@4.0.2] link C:\Users\Eric\AppData\Roaming\npm\gulp@ -> C:\Users\Eric\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js
https://docs.npmjs.com/uninstalling-packages-and-dependencies
https://babeljs.io/docs/en/usage
There are several JavaScript linters out there, but my preference is Nicholas Zakas’s ESLint. Install ESLint:
npm install -g eslint
Before we start using ESLint, we need to create an .eslintrc configuration file for our project. Each project you work on may have different technologies or standards, and the .eslintrc allows ESLint to lint your code accordingly.
The easiest way to create an .eslintrc file is to run eslint --init, which will interactively ask you some questions and create a default file for you.
Variables, constants, and literals are the mechanisms available to us in JavaScript for holding data.
A variable is essentially a named value, and as the name implies, the value can change at any time.
let specifically declares a variable, and you can only do it once.
It is conventional (but not required) for constants that refer to a specific number or string to be named with all uppercase letters and underscores. This makes them easy to spot in your code, and is a visual cue that you shouldn’t try to change their value.
The advantage of using constants is that it makes it harder to accidentally change the value of something that shouldn’t be changed.
Identifiers’ naming rules:
• Identifiers must start with a letter, dollar sign ($), or underscore (_).
• Identifiers consist of letters, numbers, the dollar sign ($), and underscore (_).
• Unicode characters are allowed (for example, π or ö).
• Identifiers cannot be a reserved word.
Note that the dollar sign is not a special character the way it is in some other languages: it’s simply another character you can use in identifier names (many libraries, such as jQuery, have taken advantage of this, and used the dollar sign by itself as an identifier).
The word literal means that you’re providing the value directly in the program. Essentially, a literal is a way to create a value; JavaScript takes the literal value you provide and creates a data value from it.
JavaScript is able to distinguish the identifier from the literal by the use of quotation marks (numbers don’t need any sort of quotation because identifiers can’t start with a number).
You can use a literal anywhere you can use an identifier (where a value is expected).
In JavaScript, values are either primitives or objects. Primitive types (such as string and number) are immutable.
There are six primitive types:
• Number
• String
• Boolean
• Null
• Undefined
• Symbol
the primitive types number, string, and boolean have corresponding object types, Number, String, and Boolean. These corresponding objects don’t actually store a value (that’s what the primitive does), but rather provide functionality that’s related to the corresponding primitive.
No matter what literal format you use (decimal, hexadecimal, exponential, etc.), the number that gets created is stored in the same format: a double.
Strings in JavaScript represent Unicode text. Unicode is a computing industry standard for representing text data, and includes code points for every character or symbol in most known human languages (including “languages” that might surprise you, such as Emoji).
In JavaScript, string literals are represented with single quotes, double quotes, or backticks.2 The backtick was introduced in ES6 to enable template strings.
Quotation marks can be escaped with a backslash\
人生很短，千万别将就。
The contents of an object are called properties (or members), and properties consist of a name (or key) and value. Property names must be strings or symbols, and values can be any type (including other objects).
We mentioned earlier in this chapter that numbers, strings, and booleans have corresponding object types (Number, String, and Boolean). These objects serve two purposes: to store special values (such as Number.INFINITY), and to provide functionality in the form of function. Consider the following:
const s = "hello";
s.toUpperCase(); // "HELLO"
This example makes it look like s is an object (we accessed a function property as if it were). But we know better: s is a primitive string type. So how is this happening?
What JavaScript is doing is creating a temporary String object (which has a function toUpperCase, among others). As soon as the function has been called, JavaScript discards the object. To prove the point, let’s try to assign a property to a string:
const s = "hello";
s.rating = 3; // no error...success?
s.rating; // undefined
JavaScript allows us to do this, making it seem like we’re assigning a property to the string s. What’s really happening, though, is that we’re assigning a property to the temporary String object that’s created. That temporary object is immediately discarded, which is why s.rating is undefined.
In JavaScript, arrays are a special type of object. Unlike regular objects, array contents have a natural order (element 0 will always come before element 1), and keys are numeric and sequential.
JavaScript Object Notation (JSON), a JavaScript-like data syntax used quite frequently, does not allow trailing commas.
A block statement is just a series of statements enclosed in curly braces that is treated by JavaScript as a single unit.
Broadly speaking, control flow can be broken into two subcategories: conditional (or branching) control flow and loop control flow. Conditional control flow (if and
if…else, and switch) represent a fork in the road: there are two or more paths to take, and we take one, but we don’t double back. Loop control flow (while, do…while, and for loops) repeat their bodies until a condition is met.
A block statement is a statement…so wherever you can use a statement, you can use a block statement.
A for loop can always be written as a while loop. In other words:
for([initialization]; [condition]; [final-expression])
statement
is equivalent to:
[initialization]
while([condition]) {
statement
[final-expression]
}
The advantage of the for loop is that all of the loop control information is right there on the first line, making it very clear what’s happening. Also, with a for loop, initializing variables with let confines them to the body of the for loop ; if you convert such a for statement to a while statement, the control variable(s) will, by necessity, be available outside of the loop body.
An expression is a special kind of statement that evaluates to a value.
I was quite surprised to encounter the following passage in Code Complete:
Pat yourself on the back for reading this book. You’re already learning more than most people in the software industry because one book is more than most programmers read each year (DeMarco and Lister 1999). A little reading goes a long way toward professional advancement. If you read even one good programming book every two months, roughly 35 pages a week, you’ll soon have a firm grasp on the industry and distinguish yourself from nearly everyone around you.
From https://blog.codinghorror.com/programmers-dont-read-books-but-you-should/
JavaScript considers the following values to be falsy:
• undefined
• null
• false
• 0
• NaN
• ‘’ (an empty string)
If you need the exclusive OR (XOR) of two variables x and y, you can use the equivalent expression(x || y) && x !== y.
JavaScript is often described as a prototype-based language — to provide inheritance, objects can have a prototype object, which acts as a template object that it inherits methods and properties from.
An object’s prototype object may also have a prototype object, which it inherits methods and properties from, and so on. This is often referred to as a prototype chain, and explains why different objects have properties and methods defined on other objects available to them.
From https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object_prototypes
The first step to writing robust, high-quality software is acknowledging that it will have errors. The second step is anticipating those errors and handling them in a reasonable fashion.
It’s very common to name functions that return a boolean (or are designed to be used in a boolean context) with an initial is.
A common way to achieve asynchronous execution is to pass a function (usually called a callback, and often abbreviated cb) into another function. This function is invoked (called) when the enclosing function is done with whatever it’s doing.
https://momentjs.com/
https://momentjs.com/timezone/docs/
Numeral.js
A javascript library for formatting and manipulating numbers.
SleepPhones is a headband that goes over your eyes and ears and that has inside two ultraflat earphones so you can listen to books as you fall asleep.
一份用代码写出来的简历
http://gloony.me/
All jQuery methods return a jQuery object, which allows you to chain calls. Chaining allows for very powerful and compact manipulation of multiple elements.
The official documentation is comprehensive, but can be daunting for the beginner. Shelley Powers’ Learning Node is a good place to start if you’re interested in Node development.
Two ways of accessing object properties (member access with dot notation, and computed member access with square brackets)
Other learning resources:
Where MDN is a great HTML reference, if you’re new to HTML5 (or even if you’re not), you should read Mark Pilgrim’s Dive Into HTML5. WHATWG maintains an excellent “living standard” HTML5 specification; it is usually where I turn first for really hard-to-answer HTML questions. Finally, the official specifications for HTML and CSS are located on the W3C website; they are dry, difficult-to-read documents, but sometimes it’s your only recourse for the very hardest problems.
To track the availability of ES6 features in Node (and various browsers), see the excellent guide maintained by @kangax.
http://kangax.github.io/compat-table/es6/
The Node documentation is very high-quality and comprehensive, and it should be your first choice for authoritative documentation about Node modules (such as http, https, and fs). The npm documentation is comprehensive and useful, particularly the page on the package.json file.
The Mozilla Developer Network (MDN) maintains an excellent, thorough, up-to-date, and free online JavaScript reference, which will be referenced liberally throughout this book.
https://developer.mozilla.org/en-US/docs/Web/JavaScript
ECMAScript® 2015 Language Specification
From http://www.ecma-international.org/ecma-262/6.0/
https://2ality.com/p/about.html
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
重难点
mixin
prototype
__proto__
Symbol
closure
Scope
.then and .catch handler of Promise
event propagation
Object.keys