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`:
|
||||
|
|
|
@ -6,8 +6,6 @@ A platform may be a browser, or a web-server, or a washing machine, or another *
|
|||
|
||||
A host environment provides platform-specific objects and functions additional to the language core. Web browsers give a means to control web pages. Node.JS provides server-side features, and so on.
|
||||
|
||||
[cut]
|
||||
|
||||
Here's a bird's-eye view of what we have when JavaScript runs in a web-browser:
|
||||
|
||||

|
||||
|
|
|
@ -11,8 +11,6 @@ DOM allows to do anything with elements and their contents, but first we need to
|
|||
|
||||
All operations on DOM start with the `document` object. From it we can access any node.
|
||||
|
||||
[cut]
|
||||
|
||||
Here's a picture of links that allow to travel between DOM nodes:
|
||||
|
||||

|
||||
|
|
|
@ -3,8 +3,6 @@
|
|||
DOM navigation properties are great when elements are close to each other. What if they are not? How to get an arbitrary element of the page?
|
||||
|
||||
There are additional searching methods for that.
|
||||
[cut]
|
||||
|
||||
## document.getElementById or just id
|
||||
|
||||
If an element has the `id` attribute, then there's a global variable by the name from that `id`.
|
||||
|
|
|
@ -4,8 +4,6 @@ Let's get a more in-depth look at DOM nodes.
|
|||
|
||||
In this chapter we'll see more into what they are and their most used properties.
|
||||
|
||||
[cut]
|
||||
|
||||
## DOM node classes
|
||||
|
||||
DOM nodes have different properties depending on their class. For instance, an element node corresponding to tag `<a>` has link-related properties, and the one corresponding to `<input>` has input-related properties and so on. Text nodes are not the same as element nodes. But there are also common properties and methods between all of them, because all classes of DOM nodes form a single hierarchy.
|
||||
|
|
|
@ -6,8 +6,6 @@ For instance, if the tag is `<body id="page">`, then the DOM object has `body.id
|
|||
|
||||
But the attribute-property mapping is not one-to-one! In this chapter we'll pay attention to separate these two notions, to see how to work with them, when they are the same, and when they are different.
|
||||
|
||||
[cut]
|
||||
|
||||
## DOM properties
|
||||
|
||||
We've already seen built-in DOM properties. There's a lot. But technically no one limits us, and if it's not enough -- we can add our own.
|
||||
|
|
|
@ -6,8 +6,6 @@ Here we'll see how to create new elements "on the fly" and modify the existing p
|
|||
|
||||
First we'll see a simple example and then explain the methods.
|
||||
|
||||
[cut]
|
||||
|
||||
## Example: show a message
|
||||
|
||||
For a start, let's see how to add a message on the page that looks nicer than `alert`.
|
||||
|
|
|
@ -7,8 +7,6 @@ There are generally two ways to style an element:
|
|||
1. Create a class in CSS and add it: `<div class="...">`
|
||||
2. Write properties directly into `style`: `<div style="...">`.
|
||||
|
||||
[cut]
|
||||
|
||||
CSS is always the preferred way -- not only for HTML, but in JavaScript as well.
|
||||
|
||||
We should only manipulate the `style` property if classes "can't handle it".
|
||||
|
|
|
@ -4,8 +4,6 @@ There are many JavaScript properties that allow us to read information about ele
|
|||
|
||||
We often need them when moving or positioning elements in JavaScript, to correctly calculate coordinates.
|
||||
|
||||
[cut]
|
||||
|
||||
|
||||
## Sample element
|
||||
|
||||
|
|
|
@ -4,8 +4,6 @@ How to find out the width of the browser window? How to get the full height of t
|
|||
|
||||
From the DOM point of view, the root document element is `document.documentElement`. That element corresponds to `<html>` and has geometry properties described in the [previous chapter](info:size-and-scroll). For some cases we can use it, but there are additional methods and peculiarities important enough to consider.
|
||||
|
||||
[cut]
|
||||
|
||||
## Width/height of the window
|
||||
|
||||
Properties `clientWidth/clientHeight` of `document.documentElement` is exactly what we want here:
|
||||
|
|
|
@ -9,8 +9,6 @@ Most JavaScript methods deal with one of two coordinate systems:
|
|||
|
||||
It's important to understand the difference and which type is where.
|
||||
|
||||
[cut]
|
||||
|
||||
## Window coordinates: getBoundingClientRect
|
||||
|
||||
Window coordinates start at the left-upper corner of the window.
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
*An event* is a signal that something has happened. All DOM nodes generate such signals (but events are not limited to DOM).
|
||||
|
||||
[cut]
|
||||
|
||||
Here's a list of the most useful DOM events, just to take a look at:
|
||||
|
||||
**Mouse events:**
|
||||
|
|
|
@ -10,8 +10,6 @@ For instance:
|
|||
|
||||
If we handle an event in JavaScript, often we don't want browser actions. Fortunately, it can be prevented.
|
||||
|
||||
[cut]
|
||||
|
||||
## Preventing browser actions
|
||||
|
||||
There are two ways to tell the browser we don't want it to act:
|
||||
|
|
|
@ -6,8 +6,6 @@ Custom events can be used to create "graphical components". For instance, a root
|
|||
|
||||
Also we can generate built-in events like `click`, `mousedown` etc, that may be good for testing.
|
||||
|
||||
[cut]
|
||||
|
||||
## Event constructor
|
||||
|
||||
Events form a hierarchy, just like DOM element classes. The root is the built-in [Event](http://www.w3.org/TR/dom/#event) class.
|
||||
|
|
|
@ -4,8 +4,6 @@ Mouse events come not only from "mouse manipulators", but are also emulated on t
|
|||
|
||||
In this chapter we'll get into more details about mouse events and their properties.
|
||||
|
||||
[cut]
|
||||
|
||||
## Mouse event types
|
||||
|
||||
We can split mouse events into two categories: "simple" and "complex"
|
||||
|
|
|
@ -14,8 +14,6 @@ Each event may be useful:
|
|||
|
||||
Let's explore the details of these events.
|
||||
|
||||
[cut]
|
||||
|
||||
## DOMContentLoaded
|
||||
|
||||
The `DOMContentLoaded` event happens on the `document` object.
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
Let's dive into more details about events that happen when mouse moves between elements.
|
||||
|
||||
[cut]
|
||||
|
||||
## Mouseover/mouseout, relatedTarget
|
||||
|
||||
The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves.
|
||||
|
|
|
@ -6,8 +6,6 @@ So if we want to track any input into an `<input>` field, then keyboard events a
|
|||
|
||||
Keyboard events should be used when we want to handle keyboard actions (virtual keyboard also counts). For instance, to react on arrow keys `key:Up` and `key:Down` or hotkeys (including combinations of keys).
|
||||
|
||||
[cut]
|
||||
|
||||
|
||||
## Teststand [#keyboard-test-stand]
|
||||
|
||||
|
|
|
@ -6,8 +6,6 @@ For instance:
|
|||
- Show/hide additional controls or information depending on where in the document the user is.
|
||||
- Load more data when the user scrolls down till the end of the page.
|
||||
|
||||
[cut]
|
||||
|
||||
Here's a small function to show the current scroll:
|
||||
|
||||
```js autorun
|
||||
|
|
|
@ -4,8 +4,6 @@ Forms and control elements, such as `<input>` have a lot of special properties a
|
|||
|
||||
Working with forms can be much more convenient if we know them.
|
||||
|
||||
[cut]
|
||||
|
||||
## Navigation: form and elements
|
||||
|
||||
Document forms are members of the special collection `document.forms`.
|
||||
|
|
|
@ -10,8 +10,6 @@ Losing the focus generally means: "the data has been entered", so we can run the
|
|||
|
||||
There are important peculiarities when working with focus events. We'll do the best to cover them here.
|
||||
|
||||
[cut]
|
||||
|
||||
## Events focus/blur
|
||||
|
||||
The `focus` event is called on focusing, and `blur` -- when the element loses the focus.
|
||||
|
|
|
@ -6,8 +6,6 @@ The method `form.submit()` allows to initiate form sending from JavaScript. We c
|
|||
|
||||
Let's see more details of them.
|
||||
|
||||
[cut]
|
||||
|
||||
## Event: submit
|
||||
|
||||
There are two main ways to submit a form:
|
||||
|
|
|
@ -4,8 +4,6 @@ Bezier curves are used in computer graphics to draw shapes, for CSS animation an
|
|||
|
||||
They are actually a very simple thing, worth to study once and then feel comfortable in the world of vector graphics and advanced animations.
|
||||
|
||||
[cut]
|
||||
|
||||
## Control points
|
||||
|
||||
A [bezier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) is defined by control points.
|
||||
|
|
|
@ -4,8 +4,6 @@ CSS animations allow to do simple animations without JavaScript at all.
|
|||
|
||||
JavaScript can be used to control CSS animation and make them even better with a little of code.
|
||||
|
||||
[cut]
|
||||
|
||||
## CSS transitions [#css-transition]
|
||||
|
||||
The idea of CSS transitions is simple. We describe a property and how its changes should be animated. When the property changes, the browser paints the animation.
|
||||
|
|
|
@ -4,8 +4,6 @@ JavaScript animations can handle things that CSS can't.
|
|||
|
||||
For instance, moving along a complex path, with a timing function different from Bezier curves, or an animation on a canvas.
|
||||
|
||||
[cut]
|
||||
|
||||
## setInterval
|
||||
|
||||
From the HTML/CSS point of view, an animation is a gradual change of the style property. For instance, changing `style.left` from `0px` to `100px` moves the element.
|
||||
|
|
|
@ -9,8 +9,6 @@ window.open('http://javascript.info/')
|
|||
|
||||
... And it will open a new window with given URL. Most modern browsers are configured to open new tabs instead of separate windows.
|
||||
|
||||
[cut]
|
||||
|
||||
## Popup blocking
|
||||
|
||||
Popups exist from really ancient times. The initial idea was to show another content without closing the main window. As of now, there are other ways to do that: JavaScript is able to send requests for server, so popups are rarely used. But sometimes they are still handy.
|
||||
|
|
|
@ -4,8 +4,6 @@ The "Same Origin" (same site) policy limits access of windows and frame to each
|
|||
|
||||
The idea is that if we have two windows open: one from `john-smith.com`, and another one is `gmail.com`, then we wouldn't want a script from `john-smith.com` to read our mail.
|
||||
|
||||
[cut]
|
||||
|
||||
## Same Origin [#same-origin]
|
||||
|
||||
Two URLs are said to have the "same origin" if they have the same protocol, domain and port.
|
||||
|
|
|
@ -4,8 +4,6 @@ The "clickjacking" attack allows an evil page to click on a "victim site" *on be
|
|||
|
||||
Many sites were hacked this way, including Twitter, Facebook, Paypal and other sites. They are all fixed, of course.
|
||||
|
||||
[cut]
|
||||
|
||||
## The idea
|
||||
|
||||
The idea is very simple.
|
||||
|
|
|
@ -6,8 +6,6 @@ In JavaScript regular expressions are implemented using objects of a built-in `R
|
|||
|
||||
Please note that regular expressions vary between programming languages. In this tutorial we concentrate on JavaScript. Of course there's a lot in common, but they are a somewhat different in Perl, Ruby, PHP etc.
|
||||
|
||||
[cut]
|
||||
|
||||
## Regular expressions
|
||||
|
||||
A regular expression (also "regexp", or just "reg") consists of a *pattern* and optional *flags*.
|
||||
|
|
|
@ -7,8 +7,6 @@ There are two sets of methods to deal with regular expressions.
|
|||
|
||||
The structure is a bit messed up, so we'll first consider methods separately, and then -- practical recipes for common tasks.
|
||||
|
||||
[cut]
|
||||
|
||||
## str.search(reg)
|
||||
|
||||
We've seen this method already. It returns the position of the first match or `-1` if none found:
|
||||
|
|
|
@ -4,8 +4,6 @@ Consider a practical task -- we have a phone number `"+7(903)-123-45-67"`, and w
|
|||
|
||||
A character class is a special notation that matches any symbol from the set.
|
||||
|
||||
[cut]
|
||||
|
||||
For instance, there's a "digit" class. It's written as `\d`. We put it in the pattern, and during the search any digit matches it.
|
||||
|
||||
For instance, the regexp `pattern:/\d/` looks for a single digit:
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
Several characters or character classes inside square brackets `[…]` mean to "search for any character among given".
|
||||
|
||||
[cut]
|
||||
|
||||
## Sets
|
||||
|
||||
For instance, `pattern:[eao]` means any of the 3 characters: `'a'`, `'e'`, or `'o'`.
|
||||
|
|
|
@ -4,8 +4,6 @@ Quantifiers are very simple from the first sight, but in fact they can be tricky
|
|||
|
||||
We should understand how the search works very well if we plan to look for something more complex than `pattern:/\d+/`.
|
||||
|
||||
[cut]
|
||||
|
||||
Let's take the following task as an example.
|
||||
|
||||
We have a text and need to replace all quotes `"..."` with guillemet marks: `«...»`. They are preferred for typography in many countries.
|
||||
|
|
|
@ -7,8 +7,6 @@ That has two effects:
|
|||
1. It allows to place a part of the match into a separate array item when using [String#match](mdn:js/String/match) or [RegExp#exec](mdn:/RegExp/exec) methods.
|
||||
2. If we put a quantifier after the parentheses, it applies to the parentheses as a whole, not the last character.
|
||||
|
||||
[cut]
|
||||
|
||||
## Example
|
||||
|
||||
In the example below the pattern `pattern:(go)+` finds one or more `match:'go'`:
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
Capturing groups may be accessed not only in the result, but in the replacement string, and in the pattern too.
|
||||
|
||||
[cut]
|
||||
|
||||
## Group in replacement: $n
|
||||
|
||||
When we are using `replace` method, we can access n-th group in the replacement string using `$n`.
|
||||
|
|
|
@ -4,8 +4,6 @@ Alternation is the term in regular expression that is actually a simple "OR".
|
|||
|
||||
In a regular expression it is denoted with a vertical line character `pattern:|`.
|
||||
|
||||
[cut]
|
||||
|
||||
For instance, we need to find programming languages: HTML, PHP, Java or JavaScript.
|
||||
|
||||
The corresponding regexp: `pattern:html|php|java(script)?`.
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
The caret `pattern:'^'` and dollar `pattern:'$'` characters have special meaning in a regexp. They are called "anchors".
|
||||
|
||||
[cut]
|
||||
|
||||
The caret `pattern:^` matches at the beginning of the text, and the dollar `pattern:$` -- in the end.
|
||||
|
||||
For instance, let's test if the text starts with `Mary`:
|
||||
|
|
|
@ -2,8 +2,6 @@
|
|||
|
||||
The multiline mode is enabled by the flag `pattern:/.../m`.
|
||||
|
||||
[cut]
|
||||
|
||||
It only affects the behavior of `pattern:^` and `pattern:$`.
|
||||
|
||||
In the multiline mode they match not only at the beginning and end of the string, but also at start/end of line.
|
||||
|
|
|
@ -10,8 +10,6 @@ That may even be a vulnerability. For instance, if JavaScript is on the server,
|
|||
|
||||
So the problem is definitely worth to deal with.
|
||||
|
||||
[cut]
|
||||
|
||||
## Example
|
||||
|
||||
The plan will be like this:
|
||||
|
|
|
@ -8,8 +8,6 @@ Let's return to the problem mentioned in the chapter <info:callbacks>.
|
|||
|
||||
Promises provide a couple of recipes to do that.
|
||||
|
||||
[cut]
|
||||
|
||||
In this chapter we cover promise chaining.
|
||||
|
||||
It looks like this:
|
||||
|
|
|
@ -6,8 +6,6 @@ But we need something like a "base environment" to run our scripts, and browser
|
|||
|
||||
So we'll start with attaching a script to the webpage. For other environments like Node.JS there are other ways to run it.
|
||||
|
||||
[cut]
|
||||
|
||||
[todo remove defer/async from here and move to 2nd part?]
|
||||
|
||||
## The "script" tag
|
||||
|
|
|
@ -4,8 +4,6 @@
|
|||
|
||||
Здесь мы разберём, как браузер обычно работает с одновременно возникающими событиями и какие есть исключения из общего правила.
|
||||
|
||||
[cut]
|
||||
|
||||
## Главный поток
|
||||
|
||||
В каждом окне выполняется только один *главный* поток, который занимается выполнением JavaScript, отрисовкой и работой с DOM.
|
||||
|
|
|
@ -8,8 +8,6 @@
|
|||
|
||||
Этот материал не строго обязателен для изучения, он специфичен именно для Drag'n'Drop.
|
||||
|
||||
[cut]
|
||||
|
||||
## Документ
|
||||
|
||||
Как пример задачи -- возьмём документ с иконками браузера ("объекты переноса"), которые можно переносить в компьютер ("цель переноса"):
|
||||
|
|
|
@ -8,8 +8,6 @@ In particular, a function can make a sub-call *itself*. That's called *a recursi
|
|||
|
||||
We'll fiddle around that advanced case to better learn how functions work.
|
||||
|
||||
[cut]
|
||||
|
||||
[smart header="A topic you already know?"]
|
||||
Recursion is a general programming term. If you are already familiar with it, then you may list the page to the next chapter. Please read on if you are new to functions or just prefer not to skip parts.
|
||||
[/smart]
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue