You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Сам по себе язык JavaScript не предусматривает работы с браузером, он вообще не знает про HTML.
3
+
Сам по себе язык JavaScript не предусматривает работы с браузером.
4
+
5
+
Он вообще не знает про HTML. Но позволяет легко расширять себя новыми функциями и объектами.
4
6
5
-
Но в браузере есть ряд специальных объектов, которые образуют Document Object Model (DOM) и дают доступ к документу, а также объекты Browser Object Model (BOM), которые позволяют использовать различные возможности браузера, такие как коммуникация с сервером, открытие новых окон и т.п.
6
7
[cut]
7
8
9
+
8
10
На рисунке ниже схематически отображена структура, которая получается если посмотреть на совокупность браузерных объектов с "высоты птичьего полёта".
9
11
10
12
<imgsrc="windowObjects.png">
11
13
12
-
Как видно из рисунка, на вершине стоит `window`, который играет роль *глобального объекта*, но вместе с этим даёт доступ к функционалу по управлению окном браузера, у него есть методы `window.focus()`, `window.open()` и другие.
13
-
Все остальные объекты делятся на 3 группы.
14
+
Как видно из рисунка, на вершине стоит `window`.
15
+
16
+
У этого объекта двоякая позиция -- он с одной стороны является глобальным объектом в JavaScript, с другой -- содержит свойства и методы для управления окном браузера, открытия новых окон, например:
17
+
18
+
```js
19
+
//+ run
20
+
// открыть новое окно/вкладку с URL http://ya.ru
21
+
window.open('http://ya.ru');
22
+
```
14
23
15
24
## Объектная модель документа (DOM)
16
25
17
26
Глобальный объект `document` даёт возможность взаимодействовать с содержимым страницы.
18
27
19
-
Он и громадное количество его свойств, методов и связанных с ним интерфейсов описаны в [стандарте W3C DOM](http://www.w3.org/DOM/DOMTR).
28
+
Пример использования:
29
+
```js
30
+
//+ run
31
+
document.body.style.background='red';
32
+
alert('Элемент BODY стал красным, а сейчас обратно вернётся');
33
+
document.body.style.background='';
34
+
```
35
+
36
+
Он и громадное количество его свойств и методов описаны в [стандарте W3C DOM](http://www.w3.org/DOM/DOMTR).
20
37
21
38
По историческим причинам когда-то появилась первая версия стандарта DOM Level 1, затем придумали ещё свойства и методы, и появился DOM Level 2, на текущий момент поверх них добавили ещё DOM Level 3 и готовится DOM 4.
22
39
23
40
Современные браузеры также поддерживают некоторые возможности, которые не вошли в стандарты, но де-факто существуют давным-давно и отказываться от них никто не хочет. Их условно называют "DOM Level 0".
24
41
25
42
Также информацию по работе с элементами страницы можно найти в стандарте [HTML 5](http://www.w3.org/TR/html5/Overview.html).
26
43
44
+
Мы подробно ознакомимся с DOM далее в этой части учебника.
45
+
27
46
## Объектная модель браузера (BOM)
28
47
29
48
BOM -- это объекты для работы с чем угодно, кроме документа.
@@ -32,14 +51,19 @@ BOM -- это объекты для работы с чем угодно, кро
32
51
<ul>
33
52
<li>Объект [navigator](https://developer.mozilla.org/en/DOM/window.navigator) содержит общую информацию о браузере и операционной системе. Особенно примечательны два свойства: `navigator.userAgent` -- содержит информацию о браузере и `navigator.platform` -- содержит информацию о платформе, позволяет различать Windows/Linux/Mac и т.п.</li>
34
53
<li>Объект [location](https://developer.mozilla.org/en-US/docs/Web/API/Window.location) содержит информацию о текущем URL страницы и позволяет перенаправить посетителя на новый URL.</li>
35
-
<li>Функции `alert/confirm/prompt` -- тоже входят в BOM.
36
-
</li>
54
+
<li>Функции `alert/confirm/prompt` -- тоже входят в BOM.</li>
37
55
</ul>
38
56
39
-
Большинство возможностей BOM стандартизированы в [HTML 5](http://www.w3.org/TR/html5/Overview.html), но браузеры любят изобрести что-нибудь своё, особенное.
57
+
Пример использования:
58
+
```js
59
+
//+ run
60
+
alert(location.href); // выведет текущий адрес
61
+
```
62
+
63
+
Большинство возможностей BOM стандартизированы в [HTML 5](http://www.w3.org/TR/html5/Overview.html), хотя различные браузеры и предоставляют зачастую что-то своё, в дополнение к стандарту.
40
64
41
-
## Объекты и функции JavaScript
65
+
## Итого
42
66
43
-
JavaScript -- объекты и методы языка JavaScript, который даёт возможность управлять всем этим. Именно их описывает стандарт EcmaScript.
67
+
Итак, у нас есть DOM, BOM и, собственно, язык JavaScript, который даёт возможность управлять всем этим.
44
68
45
-
Далее в этом курсе мы будем, преимущественно, изучать DOM, поскольку именно документ занимает центральную роль в организации интерфейса, и работа с ним -- сложнее всего.
69
+
Далее мы приступим к изучению DOM, поскольку именно документ занимает центральную роль в организации интерфейса, и работа с ним -- сложнее всего.
0 commit comments