remove cut
This commit is contained in:
Ilya Kantor
parent
37f1936622
commit
be007e78ef
99 changed files with 0 additions and 198 deletions
|
|
@ -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:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue