jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

replace

Browse source
This commit is contained in:
Ilya Kantor 2017-03-19 17:09:37 +03:00
parent e2443e8de6
commit 75e30539ef
73 changed files with 195 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

6
2-ui/1-document/01-browser-environment/article.md
View file

@ -1,14 +1,14 @@
# Browser environment, specs
The Javascript language was initially created for web browsers. But as of now, it evolved and became a language with many uses and platforms.
The JavaScript language was initially created for web browsers. But as of now, it evolved and became a language with many uses and platforms.
A platform may be either a browser or a web-server or a washing machine or another *host*. Each of them provides platform-specific functionality. The Javascript standard called that a *host environment*.
A platform may be either a browser or a web-server or a washing machine or another *host*. Each of them provides platform-specific functionality. The JavaScript standard called that a *host environment*.
That host environment provides additional objects and functions to the language core. Web browsers provide means to control web pages. Node.JS provides server-side features. There are other host environments too.
[cut]
Here's a bird-eye view of what we have when Javascript runs in a web-browser:
Here's a bird-eye view of what we have when JavaScript runs in a web-browser:
![](windowObjects.png)

8
2-ui/1-document/02-dom-nodes/article.md
View file

@ -8,7 +8,7 @@ libs:
The essential part of HTML is tags, right?
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called "children". And the text inside it is an object as well. All these objects are accessible using Javascript, we'll see that now.
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called "children". And the text inside it is an object as well. All these objects are accessible using JavaScript, we'll see that now.
## An example of DOM
@ -48,7 +48,7 @@ For instance, the `<title>` tag has the text `"About elks"`.
Please note the special characters in text nodes:
- a newline: `↵` (in Javascript known as `\n`)
- a newline: `↵` (in JavaScript known as `\n`)
- a space: `␣`
Spaces and newlines -- are totally valid characters, they form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains come spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only).
@ -221,7 +221,7 @@ The best way to study them is to click around. Most values are in-place editable
## Interaction with console
As we explore the DOM, we also may want to apply Javascript to it. Like: get a node and run some code to modify it, to see how it looks. Here are few tips to travel between the Elements tab and the console.
As we explore the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see how it looks. Here are few tips to travel between the Elements tab and the console.
- Select the first `<li>` in the Elements tab.
- Press `key:Esc` -- it will open console right below the Elements tab.
@ -238,7 +238,7 @@ Or we can just output it in the console and explore "at-place", like `document.b
![](domconsole1.png)
That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using Javascript.
That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript.
The browser developer tools are a great help in development: we can explore DOM, try things and see what goes wrong.

12
2-ui/1-document/05-basic-dom-node-properties/article.md
View file

@ -63,10 +63,10 @@ alert( document.body instanceof Node ); // true
alert( document.body instanceof EventTarget ); // true
```
As we can see, DOM nodes are regular Javascript objects. They use prototype-based classes for inheritance. That's easy to see by outputting an element with `console.dir(elem)`. There you can see `HTMLElement.prototype`, `Element.prototype` and so on.
As we can see, DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance. That's easy to see by outputting an element with `console.dir(elem)`. There you can see `HTMLElement.prototype`, `Element.prototype` and so on.
```smart header="`console.dir(elem)` versus `console.log(elem)`"
Most browsers support two commands in their developer tools: `console.log` and `console.dir`. They output their arguments to the console. For Javascript objects these commands usually do the same.
Most browsers support two commands in their developer tools: `console.log` and `console.dir`. They output their arguments to the console. For JavaScript objects these commands usually do the same.
But for DOM elements they are different:
@ -77,7 +77,7 @@ Try it on `document.body`.
```
````smart header="IDL in the spec"
In the specification classes are described using not Javascript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
In the specification classes are described using not JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand.
The most important difference is that all properties are given with their types. For instance, `DOMString`, `boolean` and so on.
@ -353,7 +353,7 @@ For text nodes we can imagine a reason to read or modify them, but why comments?
<!-- /if -->
```
...Then Javascript can read it and process embedded instructions.
...Then JavaScript can read it and process embedded instructions.
## textContent: pure text
@ -407,14 +407,14 @@ In most cases, we expect the text from a user, and want to treat it as text. We
The "hidden" attribute and the DOM property specifies whether the element is visible or not.
We can use it in HTML or assign using Javascript, like this:
We can use it in HTML or assign using JavaScript, like this:
```html run height="80"
<div>Both divs below are hidden</div>
<div hidden>With the attribute "hidden"</div>
<div id="elem">Javascript assigned the property "hidden"</div>
<div id="elem">JavaScript assigned the property "hidden"</div>
<script>
elem.hidden = true;

6
2-ui/1-document/06-attributes-and-properties/article.md
View file

@ -12,7 +12,7 @@ But the mapping is not one-to-one! In this chapter we'll see that 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 own own.
DOM nodes are regular Javascript objects. We can alter them.
DOM nodes are regular JavaScript objects. We can alter them.
For instance, let's create a new property in `document.body`:
@ -46,7 +46,7 @@ document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY
```
So, DOM properties and methods behave just like those of regular Javascript objects:
So, DOM properties and methods behave just like those of regular JavaScript objects:
- They can have any value.
- They are case-sensitive (write `elem.nodeType`, not `elem.NoDeTyPe`).
@ -242,7 +242,7 @@ If we need the value of `href` or anything else exactly as written in the HTML,
When writing HTML, we use a lot of standard attributes. But what about non-standard, custom ones? First, let's see whether they are useful or not? What for?
Sometimes non-standard attributes are used to pass custom data from HTML to Javascript, or "mark" elements.
Sometimes non-standard attributes are used to pass custom data from HTML to JavaScript, or "mark" elements.
Like this:

4
2-ui/1-document/07-modifying-document/article.md
View file

@ -32,7 +32,7 @@ Here's how it will look:
*/!*
```
That was an HTML example. Now let's create the same `div` with Javascript (assuming that the styles are still in the HTML or an external CSS).
That was an HTML example. Now let's create the same `div` with JavaScript (assuming that the styles are still in the HTML or an external CSS).
## Creating an element
@ -410,7 +410,7 @@ The syntax:
<p>The end</p>
```
The call to `document.write(html)` writes the `html` into page "right here and now". The `html` string can be dynamically generated, so it's kind of flexible. We can use Javascript to create a full-fledged webpage and write it.
The call to `document.write(html)` writes the `html` into page "right here and now". The `html` string can be dynamically generated, so it's kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.
The method comes from times when there were no DOM, no standards... Really old times. It still lives, because there are scripts using it.

10
2-ui/1-document/08-styles-and-classes/article.md
View file

@ -1,6 +1,6 @@
# Styles and classes
Before we get to Javascript ways of dealing with styles and classes -- here's an important rule. Hopefully it's obvious enough, but we still have to mention it.
Before we get to JavaScript ways of dealing with styles and classes -- here's an important rule. Hopefully it's obvious enough, but we still have to mention it.
There are generally two ways to style an element:
@ -9,11 +9,11 @@ There are generally two ways to style an element:
[cut]
CSS is always the preferred way -- not only for HTML, but in Javascript as well.
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".
For instance, `style` is acceptable if we calculate coordinates of an element dynamically and want to set them from Javascript, like this:
For instance, `style` is acceptable if we calculate coordinates of an element dynamically and want to set them from JavaScript, like this:
```js
let top = /* complex calculations */;
@ -28,7 +28,7 @@ For other cases, like making the text red, adding a background icon -- describe
Changing a class is one of the most often actions in scripts.
In the ancient time, there was a limitation in Javascript: a reserved word like `"class"` could not be an object property. That limitation does not exist now, but at that time it was impossible to have a `"class"` property, like `elem.class`.
In the ancient time, there was a limitation in JavaScript: a reserved word like `"class"` could not be an object property. That limitation does not exist now, but at that time it was impossible to have a `"class"` property, like `elem.class`.
So for classes the similar-looking property `"className"` was introduced: the `elem.className` corresponds to the `"class"` attribute.
@ -283,7 +283,7 @@ Visited links may be colored using `:visited` CSS pseudoclass.
But `getComputedStyle` does not give access to that color, because otherwise an arbitrary page could find out whether the user visited a link by creating it on the page and checking the styles.
Javascript we may not see the styles applied by `:visited`. And also, there's a limitation in CSS that forbids to apply geometry-changing styles in `:visited`. That's to guarantee that there's no side way for an evil page to test if a link was visited and hence to break the privacy.
JavaScript we may not see the styles applied by `:visited`. And also, there's a limitation in CSS that forbids to apply geometry-changing styles in `:visited`. That's to guarantee that there's no side way for an evil page to test if a link was visited and hence to break the privacy.
```
## Summary

4
2-ui/1-document/09-size-and-scroll/article.md
View file

@ -1,8 +1,8 @@
# Element size and scrolling
There are many Javascript properties that allow to read information about element width, height and other geometry features.
There are many JavaScript properties that allow to read information about element width, height and other geometry features.
We often need them when moving or positioning elements in Javascript, to correctly calculate coordinates.
We often need them when moving or positioning elements in JavaScript, to correctly calculate coordinates.
[cut]

2
2-ui/1-document/index.md
View file

@ -1,3 +1,3 @@
# Document
Here we'll learn to manipulate a web-page using Javascript.
Here we'll learn to manipulate a web-page using JavaScript.