remove cut
This commit is contained in:
parent
37f1936622
commit
be007e78ef
99 changed files with 0 additions and 198 deletions
|
@ -4,8 +4,6 @@ A code editor is the place where programmers spend most of their time.
|
|||
|
||||
There are two archetypes: IDE and lightweight editors. Many people feel comfortable choosing one tool of each type.
|
||||
|
||||
[cut]
|
||||
|
||||
## IDE
|
||||
|
||||
The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) means a powerful editor with many features that usually operates on a "whole project". As the name suggests, that's not just an editor, but a full-scale "development environment".
|
||||
|
|
|
@ -10,8 +10,6 @@ Most often developers lean towards Chrome or Firefox for development, because th
|
|||
|
||||
Developer tools are really powerful, there are many features. To start, we'll learn how to open them, look at errors and run JavaScript commands.
|
||||
|
||||
[cut]
|
||||
|
||||
## Google Chrome
|
||||
|
||||
Open the page [bug.html](bug.html).
|
||||
|
|
|
@ -7,8 +7,6 @@ But, we need a working environment to run our scripts, and, just because this bo
|
|||
So first, let's see how to attach a script to a webpage. For server-side environments, you can just execute it with a command like `"node my.js"` for Node.JS.
|
||||
|
||||
|
||||
[cut]
|
||||
|
||||
## The "script" tag
|
||||
|
||||
JavaScript programs can be inserted in any part of an HTML document with the help of the `<script>` tag.
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
The first thing to study is the building blocks of the code.
|
||||
|
||||
[cut]
|
||||
|
||||
## Statements
|
||||
|
||||
Statements are syntax constructs and commands that perform actions.
|
||||
|
|
|
@ -6,8 +6,6 @@ That had the benefit of never breaking existing code. But the downside was that
|
|||
|
||||
It had been so until 2009 when ECMAScript 5 (ES5) appeared. It added new features to the language and modified some of the existing ones. To keep the old code working, most modifications are off by default. One needs to enable them explicitly with a special directive `"use strict"`.
|
||||
|
||||
[cut]
|
||||
|
||||
## "use strict"
|
||||
|
||||
The directive looks like a string: `"use strict"` or `'use strict'`. When it is located on the top of the script, then the whole script works the "modern" way.
|
||||
|
|
|
@ -6,8 +6,6 @@ Most of the time, a JavaScript application needs to work with information. Here
|
|||
|
||||
Variables are used to store this information.
|
||||
|
||||
[cut]
|
||||
|
||||
## A variable
|
||||
|
||||
A [variable](https://en.wikipedia.org/wiki/Variable_(computer_science)) is a "named storage" for data. We can use variables to store goodies, visitors and other data.
|
||||
|
|
|
@ -12,8 +12,6 @@ Programming languages that allow such things are called "dynamically typed", mea
|
|||
|
||||
There are seven basic data types in JavaScript. Here we'll study the basics, and in the next chapters we'll talk about each of them in detail.
|
||||
|
||||
[cut]
|
||||
|
||||
## A number
|
||||
|
||||
```js
|
||||
|
|
|
@ -6,8 +6,6 @@ For example, `alert` automatically converts any value to a string to show it. Ma
|
|||
|
||||
There are also cases when we need to explicitly convert a value to put things right.
|
||||
|
||||
[cut]
|
||||
|
||||
```smart header="Not talking about objects yet"
|
||||
In this chapter we don't cover objects yet. Here we study primitives first. Later, after we learn objects, we'll see how object conversion works in the chapter <info:object-toprimitive>.
|
||||
```
|
||||
|
|
|
@ -4,8 +4,6 @@ Many operators are known to us from school. They are addition `+`, a multiplicat
|
|||
|
||||
In this chapter we concentrate on aspects that are not covered by school arithmetic.
|
||||
|
||||
[cut]
|
||||
|
||||
## Terms: "unary", "binary", "operand"
|
||||
|
||||
Before we move on, let's grasp the common terminology.
|
||||
|
|
|
@ -7,8 +7,6 @@ Many comparison operators we know from maths:
|
|||
- Equality check is written as `a == b` (please note the double equation sign `=`. A single symbol `a = b` would mean an assignment).
|
||||
- Not equals. In maths the notation is <code>≠</code>, in JavaScript it's written as an assignment with an exclamation sign before it: <code>a != b</code>.
|
||||
|
||||
[cut]
|
||||
|
||||
## Boolean is the result
|
||||
|
||||
Just as all other operators, a comparison returns a value. The value is of the boolean type.
|
||||
|
|
|
@ -4,8 +4,6 @@ This part of the tutorial aims to cover JavaScript "as is", without environment-
|
|||
|
||||
But still we use a browser as the demo environment. So we should know at least a few user-interface functions. In this chapter we'll get familiar with the browser functions `alert`, `prompt` and `confirm`.
|
||||
|
||||
[cut]
|
||||
|
||||
## alert
|
||||
|
||||
Syntax:
|
||||
|
|
|
@ -4,8 +4,6 @@ Sometimes we need to perform different actions based on a condition.
|
|||
|
||||
There is the `if` statement for that and also the conditional (ternary) operator for conditional evaluation which we will be referring as the “question mark” operator `?` for simplicity.
|
||||
|
||||
[cut]
|
||||
|
||||
## The "if" statement
|
||||
|
||||
The `if` statement gets a condition, evaluates it and, if the result is `true`, executes the code.
|
||||
|
|
|
@ -6,8 +6,6 @@ Although they are called "logical", they can be applied to values of any type, n
|
|||
|
||||
Let's see the details.
|
||||
|
||||
[cut]
|
||||
|
||||
## || (OR)
|
||||
|
||||
The "OR" operator is represented with two vertical line symbols:
|
||||
|
|
|
@ -6,8 +6,6 @@ For example, when we need to output goods from a list one after another. Or just
|
|||
|
||||
*Loops* are a way to repeat the same part of code multiple times.
|
||||
|
||||
[cut]
|
||||
|
||||
## The "while" loop
|
||||
|
||||
The `while` loop has the following syntax:
|
||||
|
|
|
@ -4,8 +4,6 @@ A `switch` statement can replace multiple `if` checks.
|
|||
|
||||
It gives a more descriptive way to compare a value with multiple variants.
|
||||
|
||||
[cut]
|
||||
|
||||
## The syntax
|
||||
|
||||
The `switch` has one or more `case` blocks and an optional default.
|
||||
|
|
|
@ -6,8 +6,6 @@ For example, we need to show a nice-looking message when a visitor logs in, logs
|
|||
|
||||
Functions are the main "building blocks" of the program. They allow the code to be called many times without repetition.
|
||||
|
||||
[cut]
|
||||
|
||||
We've already seen examples of built-in functions, like `alert(message)`, `prompt(message, default)` and `confirm(question)`. But we can create functions of our own as well.
|
||||
|
||||
## Function Declaration
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
In JavaScript, a function is not a "magical language structure", but a special kind of value.
|
||||
|
||||
[cut]
|
||||
|
||||
The syntax that we used before is called a *Function Declaration*:
|
||||
|
||||
```js
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
This chapter briefly recaps the features of JavaScript that we've learned by now, paying special attention to subtle moments.
|
||||
|
||||
[cut]
|
||||
|
||||
## Code structure
|
||||
|
||||
Statements are delimited with a semicolon:
|
||||
|
|
|
@ -6,8 +6,6 @@ All modern browsers and most other environments support "debugging" -- a special
|
|||
|
||||
We'll be using Chrome here, because it's probably the most feature-rich in this aspect.
|
||||
|
||||
[cut]
|
||||
|
||||
## The "sources" pane
|
||||
|
||||
Your Chrome version may look a little bit different, but it still should be obvious what's there.
|
||||
|
|
|
@ -6,8 +6,6 @@ That is actually an art of programming -- to take a complex task and code it in
|
|||
|
||||
One thing to help is the good code style.
|
||||
|
||||
[cut]
|
||||
|
||||
## Syntax
|
||||
|
||||
A cheatsheet with the rules (more details below):
|
||||
|
|
|
@ -13,8 +13,6 @@ Novice developers sometimes use them even better than programmer ninjas.
|
|||
|
||||
Read them carefully and find out who you are -- a ninja, a novice, or maybe a code reviewer?
|
||||
|
||||
[cut]
|
||||
|
||||
|
||||
```warn header="Irony detected"
|
||||
Many try to follow ninja paths. Few succeed.
|
||||
|
|
|
@ -4,8 +4,6 @@ Automated testing will be used in further tasks.
|
|||
|
||||
It's actually a part of the "educational minimum" of a developer.
|
||||
|
||||
[cut]
|
||||
|
||||
## Why we need tests?
|
||||
|
||||
When we write a function, we can usually imagine what it should do: which parameters give which results.
|
||||
|
|
|
@ -5,8 +5,6 @@ As we know from the chapter <info:types>, there are seven language types in Java
|
|||
|
||||
In contrast, objects are used to store keyed collections of various data and more complex entities. In JavaScript, objects penetrate almost every aspect of the language. So we must understand them first before going in-depth anywhere else.
|
||||
|
||||
[cut]
|
||||
|
||||
An object can be created with figure brackets `{…}` with an optional list of *properties*. A property is a "key: value" pair, where `key` is a string (also called a "property name"), and `value` can be anything.
|
||||
|
||||
We can imagine an object as a cabinet with signed files. Every piece of data is stored in its file by the key. It's easy to find a file by its name or add/remove a file.
|
||||
|
|
|
@ -4,8 +4,6 @@ Memory management in JavaScript is performed automatically and invisibly to us.
|
|||
|
||||
What happens when something is not needed any more? How does the JavaScript engine discover it and clean it up?
|
||||
|
||||
[cut]
|
||||
|
||||
## Reachability
|
||||
|
||||
The main concept of memory management in JavaScript is *reachability*.
|
||||
|
|
|
@ -5,8 +5,6 @@ By specification, object property keys may be either of string type, or of symbo
|
|||
|
||||
Till now we've only seen strings. Now let's see the advantages that symbols can give us.
|
||||
|
||||
[cut]
|
||||
|
||||
## Symbols
|
||||
|
||||
"Symbol" value represents a unique identifier.
|
||||
|
|
|
@ -13,8 +13,6 @@ And, in the real world, a user can *act*: select something from the shopping car
|
|||
|
||||
Actions are represented in JavaScript by functions in properties.
|
||||
|
||||
[cut]
|
||||
|
||||
## Method examples
|
||||
|
||||
For the start, let's teach the `user` to say hello:
|
||||
|
|
|
@ -7,8 +7,6 @@ There are special methods in objects that do the conversion.
|
|||
|
||||
In the chapter <info:type-conversions> we've seen the rules for numeric, string and boolean conversions of primitives. But we left a gap for objects. Now, as we know about methods and symbols it becomes possible to close it.
|
||||
|
||||
[cut]
|
||||
|
||||
For objects, there's no to-boolean conversion, because all objects are `true` in a boolean context. So there are only string and numeric conversions.
|
||||
|
||||
The numeric conversion happens when we subtract objects or apply mathematical functions. For instance, `Date` objects (to be covered in the chapter <info:date>) can be subtracted, and the result of `date1 - date2` is the time difference between two dates.
|
||||
|
|
|
@ -4,8 +4,6 @@ The regular `{...}` syntax allows to create one object. But often we need to cre
|
|||
|
||||
That can be done using constructor functions and the `"new"` operator.
|
||||
|
||||
[cut]
|
||||
|
||||
## Constructor function
|
||||
|
||||
Constructor functions technically are regular functions. There are two conventions though:
|
||||
|
|
|
@ -4,8 +4,6 @@ JavaScript allows us to work with primitives (strings, numbers etc) as if they w
|
|||
|
||||
They also provide methods to call and such. We will study those soon, but first we'll see how it works, because, of course, primitives are not objects (and here we will make it even more clear).
|
||||
|
||||
[cut]
|
||||
|
||||
Let's look at the key distinction between primitives and objects.
|
||||
|
||||
A primitive
|
||||
|
|
|
@ -4,8 +4,6 @@ In JavaScript, the textual data is stored as strings. There is no separate type
|
|||
|
||||
The internal format for strings is always [UTF-16](https://en.wikipedia.org/wiki/UTF-16), it is not tied to the page encoding.
|
||||
|
||||
[cut]
|
||||
|
||||
## Quotes
|
||||
|
||||
Let's recall the kinds of quotes.
|
||||
|
|
|
@ -8,8 +8,6 @@ It is not convenient to use an object here, because it provides no methods to ma
|
|||
|
||||
There exists a special data structure named `Array`, to store ordered collections.
|
||||
|
||||
[cut]
|
||||
|
||||
## Declaration
|
||||
|
||||
There are two syntaxes for creating an empty array:
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
Arrays provide a lot of methods. To make things easier, in this chapter they are split into groups.
|
||||
|
||||
[cut]
|
||||
|
||||
## Add/remove items
|
||||
|
||||
We already know methods that add and remove items from the beginning or the end:
|
||||
|
|
|
@ -7,8 +7,6 @@ Arrays by themselves are iterable. But not only arrays. Strings are iterable too
|
|||
|
||||
Iterables are widely used by the core JavaScript. As we'll see many built-in operators and methods rely on them.
|
||||
|
||||
[cut]
|
||||
|
||||
## Symbol.iterator
|
||||
|
||||
We can easily grasp the concept of iterables by making one of our own.
|
||||
|
|
|
@ -6,8 +6,6 @@ Objects allow us to pack many pieces of information into a single entity and arr
|
|||
|
||||
*Destructuring assignment* is a special syntax that allows us to "unpack" arrays or objects into a bunch of variables, as sometimes they are more convenient. Destructuring also works great with complex functions that have a lot of parameters, default values, and soon we'll see how these are handled too.
|
||||
|
||||
[cut]
|
||||
|
||||
## Array destructuring
|
||||
|
||||
An example of how the array is destructured into variables:
|
||||
|
|
|
@ -4,8 +4,6 @@ Let's meet a new built-in object: [Date](mdn:js/Date). It stores the date, time
|
|||
|
||||
For instance, we can use it to store creation/modification times, or to measure time, or just to print out the current date.
|
||||
|
||||
[cut]
|
||||
|
||||
## Creation
|
||||
|
||||
To create a new `Date` object call `new Date()` with one of the following arguments:
|
||||
|
|
|
@ -25,8 +25,6 @@ alert(user); // {name: "John", age: 30}
|
|||
|
||||
Luckily, there's no need to write the code to handle all this. The task has been solved already.
|
||||
|
||||
[cut]
|
||||
|
||||
## JSON.stringify
|
||||
|
||||
The [JSON](http://en.wikipedia.org/wiki/JSON) (JavaScript Object Notation) is a general format to represent values and objects. It is described as in [RFC 4627](http://tools.ietf.org/html/rfc4627) standard. Initially it was made for JavaScript, but many other languages have libraries to handle it as well. So it's easy to use JSON for data exchange when the client uses JavaScript and the server is written on Ruby/PHP/Java/Whatever.
|
||||
|
|
|
@ -10,8 +10,6 @@ Recursion is a programming pattern that is useful in situations when a task can
|
|||
|
||||
When a function solves a task, in the process it can call many other functions. A partial case of this is when a function calls *itself*. That's called *recursion*.
|
||||
|
||||
[cut]
|
||||
|
||||
## Two ways of thinking
|
||||
|
||||
For something simple to start with -- let's write a function `pow(x, n)` that raises `x` to a natural power of `n`. In other words, multiplies `x` by itself `n` times.
|
||||
|
|
|
@ -10,8 +10,6 @@ For instance:
|
|||
|
||||
In this chapter we'll learn how to do the same. And, more importantly, how to feel comfortable working with such functions and arrays.
|
||||
|
||||
[cut]
|
||||
|
||||
## Rest parameters `...`
|
||||
|
||||
A function can be called with any number of arguments, no matter how it is defined.
|
||||
|
|
|
@ -11,8 +11,6 @@ Also, what happens when a function travels to another place in the code and is c
|
|||
|
||||
Different languages behave differently here, and in this chapter we cover the behaviour of JavaScript.
|
||||
|
||||
[cut]
|
||||
|
||||
## A couple of questions
|
||||
|
||||
Let's consider two situations to begin with, and then study the internal mechanics piece-by-piece, so that you'll be able to answer the following questions and more complex ones in the future.
|
||||
|
|
|
@ -13,8 +13,6 @@ But `var` is a very different beast, that originates from very old times. It's g
|
|||
|
||||
If you don't plan meeting such scripts you may even skip this chapter or postpone it, but then there's a chance that it bites you later.
|
||||
|
||||
[cut]
|
||||
|
||||
From the first sight, `var` behaves similar to `let`. That is, declares a variable:
|
||||
|
||||
```js run
|
||||
|
|
|
@ -3,8 +3,6 @@
|
|||
|
||||
There's one more way to create a function. It's rarely used, but sometimes there's no alternative.
|
||||
|
||||
[cut]
|
||||
|
||||
## Syntax
|
||||
|
||||
The syntax for creating a function:
|
||||
|
|
|
@ -10,8 +10,6 @@ There are two methods for it:
|
|||
These methods are not a part of JavaScript specification. But most environments have the internal scheduler and provide these methods. In particular, they are supported in all browsers and Node.JS.
|
||||
|
||||
|
||||
[cut]
|
||||
|
||||
## setTimeout
|
||||
|
||||
The syntax:
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
JavaScript gives exceptional flexibility when dealing with functions. They can be passed around, used as objects, and now we'll see how to *forward* calls between them and *decorate* them.
|
||||
|
||||
[cut]
|
||||
|
||||
## Transparent caching
|
||||
|
||||
Let's say we have a function `slow(x)` which is CPU-heavy, but its results are stable. In other words, for the same `x` it always returns the same result.
|
||||
|
|
|
@ -9,8 +9,6 @@ When using `setTimeout` with object methods or passing object methods along, the
|
|||
|
||||
Suddenly, `this` just stops working right. The situation is typical for novice developers, but happens with experienced ones as well.
|
||||
|
||||
[cut]
|
||||
|
||||
## Losing "this"
|
||||
|
||||
We already know that in JavaScript it's easy to lose `this`. Once a method is passed somewhere separately from the object -- `this` is lost.
|
||||
|
|
|
@ -9,8 +9,6 @@ Till now we were only talking about binding `this`. Now let's make a step furthe
|
|||
|
||||
We can bind not only `this`, but also arguments. That's rarely done, but sometimes can be handy.
|
||||
|
||||
[cut]
|
||||
|
||||
The full syntax of `bind`:
|
||||
|
||||
```js
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
Let's revisit arrow functions.
|
||||
|
||||
[cut]
|
||||
|
||||
Arrow functions are not just a "shorthand" for writing small stuff.
|
||||
|
||||
JavaScript is full of situations where we need to write a small function, that's executed somewhere else.
|
||||
|
|
|
@ -5,8 +5,6 @@ As we know, objects can store properties.
|
|||
|
||||
Till now, a property was a simple "key-value" pair to us. But an object property is actually more complex and tunable thing.
|
||||
|
||||
[cut]
|
||||
|
||||
## Property flags
|
||||
|
||||
Object properties, besides a **`value`**, have three special attributes (so-called "flags"):
|
||||
|
|
|
@ -7,8 +7,6 @@ The first kind is *data properties*. We already know how to work with them. Actu
|
|||
|
||||
The second type of properties is something new. It's *accessor properties*. They are essentially functions that work on getting and setting a value, but look like regular properties to an external code.
|
||||
|
||||
[cut]
|
||||
|
||||
## Getters and setters
|
||||
|
||||
Accessor properties are represented by "getter" and "setter" methods. In an object literal they are denoted by `get` and `set`:
|
||||
|
|
|
@ -6,8 +6,6 @@ For instance, we have a `user` object with its properties and methods, and want
|
|||
|
||||
*Prototypal inheritance* is a language feature that helps in that.
|
||||
|
||||
[cut]
|
||||
|
||||
## [[Prototype]]
|
||||
|
||||
In JavaScript, objects have a special hidden property `[[Prototype]]` (as named in the specification), that is either `null` or references another object. That object is called "a prototype":
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
In modern JavaScript we can set a prototype using `__proto__`, as described in the previous article. But it wasn't like that all the time.
|
||||
|
||||
[cut]
|
||||
|
||||
JavaScript has had prototypal inheritance from the beginning. It was one of the core features of the language.
|
||||
|
||||
But in the old times, there was another (and the only) way to set it: to use a `"prototype"` property of the constructor function. And there are still many scripts that use it.
|
||||
|
|
|
@ -9,8 +9,6 @@ There are also other ways to get/set a prototype, besides those that we already
|
|||
- [Object.getPrototypeOf(obj)](mdn:js/Object.getPrototypeOf) -- returns the `[[Prototype]]` of `obj`.
|
||||
- [Object.setPrototypeOf(obj, proto)](mdn:js/Object.setPrototypeOf) -- sets the `[[Prototype]]` of `obj` to `proto`.
|
||||
|
||||
[cut]
|
||||
|
||||
For instance:
|
||||
|
||||
```js run
|
||||
|
|
|
@ -11,8 +11,6 @@ In JavaScript there are several well-known programming patterns to make classes
|
|||
|
||||
The `class` construct will be described in the next chapter, but in JavaScript it's a "syntax sugar" and an extension of one of the patterns that we'll study here.
|
||||
|
||||
[cut]
|
||||
|
||||
|
||||
## Functional class pattern
|
||||
|
||||
|
|
|
@ -3,8 +3,6 @@
|
|||
|
||||
The "class" construct allows to define prototype-based classes with a clean, nice-looking syntax.
|
||||
|
||||
[cut]
|
||||
|
||||
## The "class" syntax
|
||||
|
||||
The `class` syntax is versatile, we'll start with a simple example first.
|
||||
|
|
|
@ -5,8 +5,6 @@ Classes can extend one another. There's a nice syntax, technically based on the
|
|||
|
||||
To inherit from another class, we should specify `"extends"` and the parent class before the brackets `{..}`.
|
||||
|
||||
[cut]
|
||||
|
||||
Here `Rabbit` inherits from `Animal`:
|
||||
|
||||
```js run
|
||||
|
|
|
@ -4,8 +4,6 @@ The `instanceof` operator allows to check whether an object belongs to a certain
|
|||
|
||||
Such a check may be necessary in many cases, here we'll use it for building a *polymorphic* function, the one that treats arguments differently depending on their type.
|
||||
|
||||
[cut]
|
||||
|
||||
## The instanceof operator [#ref-instanceof]
|
||||
|
||||
The syntax is:
|
||||
|
|
|
@ -6,8 +6,6 @@ Usually, a script "dies" (immediately stops) in case of an error, printing it to
|
|||
|
||||
But there's a syntax construct `try..catch` that allows to "catch" errors and, instead of dying, do something more reasonable.
|
||||
|
||||
[cut]
|
||||
|
||||
## The "try..catch" syntax
|
||||
|
||||
The `try..catch` construct has two main blocks: `try`, and then `catch`:
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue