Merge branch 'master' into patch-1
This commit is contained in:
Ilya Kantor
GitHub
commit
c771595a32
11 changed files with 23 additions and 21 deletions
|
|
@ -95,7 +95,7 @@ To attach several scripts, use multiple tags:
|
|||
```smart
|
||||
As a rule, only the simplest scripts are put into HTML. More complex ones reside in separate files.
|
||||
|
||||
The benefit of a separate file is that the browser will download it and then store in its [cache](https://en.wikipedia.org/wiki/Web_cache).
|
||||
The benefit of a separate file is that the browser will download it and then store it in its [cache](https://en.wikipedia.org/wiki/Web_cache).
|
||||
|
||||
After this, other pages that want the same script will take it from the cache instead of downloading it. So the file is actually downloaded only once.
|
||||
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ let my-name; // a hyphen '-' is not allowed in the name
|
|||
Variables named `apple` and `AppLE` -- are two different variables.
|
||||
```
|
||||
|
||||
````smart header="Non-english letters are allowed, but not recommended"
|
||||
````smart header="Non-English letters are allowed, but not recommended"
|
||||
It is possible to use any language, including cyrillic letters or even hieroglyphs, like this:
|
||||
|
||||
```js
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ In most cases the distinction is unnoticeable, because operators are suited to t
|
|||
|
||||
Remember these two special numeric values?
|
||||
|
||||
- `Infinite` (and `-Infinite`) is a special numeric value that is greater (less) than anything.
|
||||
- `Infinity` (and `-Infinity`) is a special numeric value that is greater (less) than anything.
|
||||
- `NaN` represents an error.
|
||||
|
||||
They belong to the type `number`, but are not "normal" numbers, so there are special functions to check for them:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Arrays
|
||||
|
||||
Objects allow to store keyed collections of values. That's fine.
|
||||
Objects allow you to store keyed collections of values. That's fine.
|
||||
|
||||
But quite often we find that we need an *ordered collection*, where we have a 1st, a 2nd, a 3rd element and so on. For example, we need that to store a list of something: users, goods, HTML elements etc.
|
||||
|
||||
|
|
@ -121,7 +121,7 @@ A stack is usually illustrated as a pack of cards: new cards are added to the to
|
|||
|
||||
For stacks, the latest pushed item is received first, that's also called LIFO (Last-In-First-Out) principle. For queues, we have FIFO (First-In-First-Out).
|
||||
|
||||
Arrays in JavaScript can work both as a queue and as a stack. They allow to add/remove elements both to/from the beginning or the end.
|
||||
Arrays in JavaScript can work both as a queue and as a stack. They allow you to add/remove elements both to/from the beginning or the end.
|
||||
|
||||
In computer science the data structure that allows it is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue).
|
||||
|
||||
|
|
@ -431,7 +431,7 @@ alert( "1,2" + 1 ); // "1,21"
|
|||
|
||||
## Summary
|
||||
|
||||
Array is a special kind of objects, suited to store and manage ordered data items.
|
||||
Array is a special kind of object, suited to storing and managing ordered data items.
|
||||
|
||||
- The declaration:
|
||||
|
||||
|
|
|
|||
|
|
@ -119,6 +119,8 @@ function f() {
|
|||
|
||||
f(1); // 1
|
||||
```
|
||||
````
|
||||
|
||||
As we remember, arrow functions don't have their own `this`. Now we know they don't have the special `arguments` object either.
|
||||
|
||||
## Spread operator [#spread-operator]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Attributes and properties
|
||||
|
||||
When the browser loads the page, it "reads" (another word: "parses") HTML text and generates DOM objects from it. For element nodes most standard HTML attributes automatically become properties of DOM objects.
|
||||
When the browser loads the page, it "reads" (another word: "parses") the HTML and generates DOM objects from it. For element nodes, most standard HTML attributes automatically become properties of DOM objects.
|
||||
|
||||
For instance, if the tag is `<body id="page">`, then the DOM object has `body.id="page"`.
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ So, DOM properties and methods behave just like those of regular JavaScript obje
|
|||
|
||||
## HTML attributes
|
||||
|
||||
In HTML language, tags may have attributes. When the browser reads HTML text and creates DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them.
|
||||
In HTML, tags may have attributes. When the browser parses the HTML to create DOM objects for tags, it recognizes *standard* attributes and creates DOM properties from them.
|
||||
|
||||
So when an element has `id` or another *standard* attribute, the corresponding property gets created. But that doesn't happen if the attribute is non-standard.
|
||||
|
||||
|
|
@ -83,9 +83,9 @@ Here we can see it:
|
|||
</body>
|
||||
```
|
||||
|
||||
So, if an attribute is non-standard, there won't be DOM-property for it. Is there a way to access such attributes?
|
||||
So, if an attribute is non-standard, there won't be a DOM-property for it. Is there a way to access such attributes?
|
||||
|
||||
Sure. All attributes are accessible using following methods:
|
||||
Sure. All attributes are accessible by using the following methods:
|
||||
|
||||
- `elem.hasAttribute(name)` -- checks for existence.
|
||||
- `elem.getAttribute(name)` -- gets the value.
|
||||
|
|
@ -138,7 +138,7 @@ Please note:
|
|||
1. `getAttribute('About')` -- the first letter is uppercase here, and in HTML it's all lowercase. But that doesn't matter: attribute names are case-insensitive.
|
||||
2. We can assign anything to an attribute, but it becomes a string. So here we have `"123"` as the value.
|
||||
3. All attributes including ones that we set are visible in `outerHTML`.
|
||||
4. The `attributes` collection is iterable and has all attributes with `name` and `value`.
|
||||
4. The `attributes` collection is iterable and has all the attributes of the element (standard and non-standard) as objects with `name` and `value` properties.
|
||||
|
||||
## Property-attribute synchronization
|
||||
|
||||
|
|
|
|||
|
|
@ -64,9 +64,9 @@ The `offsetParent` is the nearest ancestor that is:
|
|||
2. or `<td>`, `<th>`, `<table>`,
|
||||
2. or `<body>`.
|
||||
|
||||
In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's left-upper corner.
|
||||
In most practical cases we can use `offsetParent` to get the nearest CSS-positioned ancestor. And `offsetLeft/offsetTop` provide x/y coordinates relative to it's upper-left corner.
|
||||
|
||||
In the example below the inner `<div>` has `<main>` as `offsetParent` and `offsetLeft/offsetTop` shifts from its left-upper corner (`180`):
|
||||
In the example below the inner `<div>` has `<main>` as `offsetParent` and `offsetLeft/offsetTop` shifts from its upper-left corner (`180`):
|
||||
|
||||
```html run height=10
|
||||
<main style="position: relative" id="main">
|
||||
|
|
@ -265,11 +265,11 @@ Please note that the described difference is only about reading `getComputedStyl
|
|||
Elements have the following geometry properties:
|
||||
|
||||
- `offsetParent` -- is the nearest positioned ancestor or `td`, `th`, `table`, `body`.
|
||||
- `offsetLeft/offsetTop` -- coordinates relative to the left-upper edge of `offsetParent`.
|
||||
- `offsetLeft/offsetTop` -- coordinates relative to the upper-left edge of `offsetParent`.
|
||||
- `offsetWidth/offsetHeight` -- "outer" width/height of an element including borders.
|
||||
- `clientLeft/clientTop` -- the distance from the left-upper outer corner to its left-upper inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too.
|
||||
- `clientLeft/clientTop` -- the distance from the upper-left outer corner to its upper-left inner corner. For left-to-right OS they are always the widths of left/top borders. For right-to-left OS the vertical scrollbar is on the left so `clientLeft` includes its width too.
|
||||
- `clientWidth/clientHeight` -- the width/height of the content including paddings, but without the scrollbar.
|
||||
- `scrollWidth/scrollHeight` -- the width/height of the content including the scrolled out parts. Also includes paddings, but not the scrollbar.
|
||||
- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its left-upper corner.
|
||||
- `scrollLeft/scrollTop` -- width/height of the scrolled out part of the element, starting from its upper-left corner.
|
||||
|
||||
All properties are read-only except `scrollLeft/scrollTop`. They make the browser scroll the element if changed.
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ This handler is assigned to `<div>`, but also runs if you click any nested tag l
|
|||
</div>
|
||||
```
|
||||
|
||||
Isn't it a bit strange? Why the handler on `<div>` runs if the actual click was on `<em>`?
|
||||
Isn't it a bit strange? Why does the handler on `<div>` run if the actual click was on `<em>`?
|
||||
|
||||
## Bubbling
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ The bubbling principle is simple.
|
|||
|
||||
**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**
|
||||
|
||||
Let's say, we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
|
||||
Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
|
||||
|
||||
```html run autorun
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ function checkPhoneKey(key) {
|
|||
<input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="Phone, please" type="tel">
|
||||
```
|
||||
|
||||
Please note that special keys like `key:Backspace`, `key:Left`, `key:Right`, `key:Ctrl+V` do not work in the input. That's a side-effect effect of the strict filter `checkPhoneKey`.
|
||||
Please note that special keys like `key:Backspace`, `key:Left`, `key:Right`, `key:Ctrl+V` do not work in the input. That's a side-effect of the strict filter `checkPhoneKey`.
|
||||
|
||||
Let's relax it a little bit:
|
||||
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ if (window == top) { // current window == window.top?
|
|||
|
||||
## The sandbox attribute
|
||||
|
||||
The `sandbox` attribute allows to forbid certain actions inside an `<iframe>`, to run an untrusted code. It "sandboxes" the iframe by treating it as coming from another origin and/or applying other limitations.
|
||||
The `sandbox` attribute allows for the exclusion of certain actions inside an `<iframe>` in order to prevent it executing untrusted code. It "sandboxes" the iframe by treating it as coming from another origin and/or applying other limitations.
|
||||
|
||||
By default, for `<iframe sandbox src="...">` the "default set" of restrictions is applied to the iframe. But we can provide a space-separated list of "excluded" limitations as a value of the attribute, like this: `<iframe sandbox="allow-forms allow-popups">`. The listed limitations are not applied.
|
||||
|
||||
|
|
|
|||
|
|
@ -262,7 +262,7 @@ function step3(error, script) {
|
|||
|
||||
See? It does the same, and there's no deep nesting now, because we made every action a separate top-level function.
|
||||
|
||||
It works, but the code looks like a torn apart spreadsheet. It's difficult to read, you probably noticed that. One needs to eye-jump between pieces while reading it. That's inconvenient, especially the reader is not familiar with the code and doesn't know where to eye-jump.
|
||||
It works, but the code looks like a torn apart spreadsheet. It's difficult to read, you probably noticed that. One needs to eye-jump between pieces while reading it. That's inconvenient, especially if the reader is not familiar with the code and doesn't know where to eye-jump.
|
||||
|
||||
Also the functions named `step*` are all of a single use, they are created only to avoid the "pyramid of doom". No one is going to reuse them outside of the action chain. So there's a bit of a namespace cluttering here.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue