DOM

API WEB - уведомлений (Notifications)
WEB - уведомления (Notifications)

API уведомлений (notifications) позволяет веб-страницам управлять показом уведомлений конечным пользователям. Они находятся за пределами окна просмотра, поэтому их можно отображать даже тогда, когда пользователь переключает вкладки или перемещается в другое приложение. API разработан с учётом совместимости с существующими системами уведомлений на разных платформах.

На поддерживаемых платформах показ системного уведомления обычно включает в себя два этапа.

Во-первых, пользователь должен предоставить разрешение для отображения системных уведомлений, что обычно делается, когда приложение или сайт инициализируются с использованием метода Notification.requestPermission (). Это вызовет диалог запроса , где пользователь может разрешить уведомления из этого источника, блокировать уведомления из этого источника или не выбирать в этот момент. После того, как выбор сделан, настройка обычно сохраняется для текущего сеанса.

Во-вторых, с помощью конструктора Notification () создается новое уведомление. Ему должен быть передан в качестве аргумента заголовок сообщения и, возможно, - объект options для указания дополнительных параметров, таких как направление текста, основной текст, значок для отображения, звук уведомления для воспроизведения и многое другое.

Запрос разрешения

Notification.requestPermission()

Проверить статус разрешения

Notification.permission

Создание уведомления

Для этого используется конструктор уведомления. Этот конструктор предполагает, что в уведомлении будет отображаться заголовок и некоторые параметры для улучшения уведомления, такие как иконка или тело текста.

var notification = new Notification('Need support', {
body: 'Call us...'
});

Методы, свойства и события

API веб-уведомлений принимает два параметра: строку, содержащую заголовок уведомления, и необязательный объект настроек. Настройки, которые мы можем указать:
- body: Строка, используемая для дальнейшего уточнения цели уведомления.
- lang: Указывает язык уведомления. Его значение должно соответствовать стандарту BCP 47. Примеры действительных строк - en-US и it-IT.
- dir: Определяет направление текста сообщения. Его значение может быть автоматически означающим, что направление основано на настройках браузера, ltr, чтобы указать направление слева направо (для европейских языков) или rtl, чтобы указать направление справа налево (для некоторых азиатских языков).
- tag: Строка, которая используется как идентификатор, который можно использовать для извлечения, замены или удаления уведомления.
- icon: Указывает URL-адрес изображения, которое будет использоваться в качестве значка уведомления.
Чтобы создать экземпляр объекта Notification, мы должны написать инструкцию следующим образом:

var note = new Notification('Need support', {
body: 'Call us...'
});

Настройки доступны как свойства для чтения экземпляра объекта notification.

Кроме того, объект Notification предоставляет свойство, называемое разрешением (permission). Разрешение содержит строку, представляющую текущей статус разрешения на отображение уведомлений.

Его значение может быть одним из следующих:
- denied, что означает, что пользователь отклонил уведомления
- granted, что означает, что пользователь дал разрешение
- default, что означает, что выбор пользователя неизвестен
Этот API предоставляет два метода: requestPermission() и close(). Как следует из названия, первый используется для запроса разрешения на показ уведомлений пользователю, в то время как последний программно закрывает уведомление.

requestPermission () - это метод объекта Notification, который принимает необязательный параметр - callback функцию, которая выполняется, когда пользователь принимает или отклоняет разрешение. Выбор пользователя передается в эту функцию в качестве параметра, и значение может быть: granted, denied, default.

close () является методом, который не принимает никаких параметров.

Иногда может потребоваться выполнить действие в тот момент, как только изменится статус уведомления. Например, мы можем захотеть узнать, нажал ли пользователь уведомление или когда уведомление закрывается. Для этого мы можем привязать программу-обработчик к одному из четырех событий:
- onclick: вызывается, когда пользователь нажимает на уведомление.
- onclose: вызывается, как только пользователь или броузер закрывает уведомление.
- onerror: вызывается, если с уведомлением возникает ошибка.
- onshow: вызывается, когда отображается уведомление.
Пример использования этих событий.

var note = new Notification('Need support', {
body: 'Call us...'
});
note.onshow = function () {
console.log ("Отображено уведомление");
};

DOM - обработка событий (Events)

Браузер отслеживает события которые происходят в его окне. События могут быть привязаны к определенному элементу, группе элементов, или к окну браузера.

События могут генерироваться как пользователем (например: перемещение мышки) так и системой (например: законцилась анимация )

События могут быть разных типов, например:

нажатия клавиш мыши, перемещение курсора
нажатие клавиш клавиатуры
изменение размеров окна браузеа (закрытие окна)
загрузка страницы в окно
заполнение формы
воспроизведение видео
возникновение ошибок.

Реакция на события описывается через бработчики событий (events listeners или event handlers).

Браузер постоянно отслеживает все события, при его возникновении (event firing) он ищет назначенную этому событию фукцию-обработчик события и запускает её (если она найдена).

То есть: события, как правило, используются в сочетании с функциями, функция не будет выполняться до возникновения события (например, до того, как пользователь нажал на кнопку).

Типы событий

События, связанные с мышью (mouse events)

Событие	Описание	DOM
onclick	Клик левой кнопкой мыши	2
oncontextmenu	Клик правой кнопкой мышки	3
ondblclick	Два клика подряд левой кнопкой	2
onmousedown	Нажатие левой кнопки мышки	2
onmouseenter	Курсор попал на элемент	2
onmouseleave	Курсор ушёл с элемента	2
onmousemove	Курсор переместился, находясь над элементом	2
onmouseover	Курсор находится над элементом или его дочерними элементами	2
onmouseout	Курсор ушёл с области самого элемента или одного из его дочерних элементов	2
onmouseup	Отпускание левой кнопки мышки	2

События клавиатуры (keyboard events)

Событие	Описание	DOM
onkeydown	Нажатие кнопки клавиатурв	2
onkeypress	Нажатие и отпускание кнопки клавиатуры	2
onkeyup	Отпускание кнопки клавиатуры	2

События объекта frame (frame/window events)

Собвтие	Описание	DOM
onabort	Загрузка документа в фрейм прервана	2
onbeforeunload	Начало загрузки документа в фрейм	2
onerror	Ошибка загрузки файла в фрейм	2
onhashchange	Изменился параметр anchor фрейма	3
onload	Загрузка документа в фрейм	2
onpageshow	Событие происходит, когда пользователь переходит на веб-страницу	3
onpagehide	Событие происходит, когда пользователь уходит с веб-страницы	3
onresize	Событие возникает, когда размер окна документа изменяется	2
onscroll	Событие происходит при прокрутке элемента	2
onunload	Событие происходит после выгрузки страницы (для <body>)	2

События, связанные с формой (form events)

Событие	Описание	DOM
onblur	Событие происходит, когда элемент теряет фокус	2
onchange	Событие происходит, когда изменилось содержимое элемента формы (для <input>, <keygen>, <select> и <textarea>)	2
onfocus	Событие возникает, когда элемент получает фокус	2
onfocusin	Событие возникает, когда элемент собирается получить фокус	2
onfocusout	Событие происходит, когда элемент теряет фокус	2
oninput	Событие возникает, когда элемент получает пользовательский ввод	3
oninvalid	Событие oninvalid происходит, когда элемент <input> недопустим.	3
onreset	Событие происходит, когда форма сбрасывается	2
onsearch	Событие возникает, когда пользователь что-то пишет в поле поиска (для <input = "search">)	3
onselect	Событие происходит после выбора пользователем текста (для <input> и <textarea>)	2
onsubmit	Событие происходит при отправке формы	2

События drag/drop

Событие	Описание	DOM
ondrag	Событие возникает, когда элемент перетаскивается	3
ondragend	Событие происходит, когда пользователь закончил перетаскивание элемента	3
ondragenter	Событие возникает, когда элемент перетаскивания входит в целевую точку	3
ondragleave	Событие происходит, когда элемент перетаскивания оставляет целевую точку	3
ondragover	Событие происходит, когда элемент перетаскивания находится над целевой точкой перетаскивания	3
ondragstart	Событие возникает, когда пользователь начинает перетаскивать элемент	3
ondrop	Событие происходит, когда перетаскиваемый элемент выбрасывается в целевой точке	3

Clipboard - события

Событие	Описание	DOM
oncopy	Событие происходит, когда пользователь копирует содержимое элемента
oncut	Событие происходит, когда пользователь вырезает содержимое элемента
onpaste	Событие возникает, когда пользователь вставляет некоторый контент в элемент

Print - события

Событие	Описание	DOM
onafterprint	Событие происходит, когда страница начала печать, или если диалоговое окно печати закрывается	3
onbeforeprint	Событие происходит, когда страница будет напечатана	3

Media - события

Событие	Описание	DOM
onabort	The event occurs when the loading of a media is aborted	3
oncanplay	The event occurs when the browser can start playing the media (when it has buffered enough to begin)	3
oncanplaythrough	The event occurs when the browser can play through the media without stopping for buffering	3
ondurationchange	The event occurs when the duration of the media is changed	3
onemptied	The event occurs when something bad happens and the media file is suddenly unavailable (like unexpectedly disconnects)	3
onended	The event occurs when the media has reach the end (useful for messages like "thanks for listening")	3
onerror	The event occurs when an error occurred during the loading of a media file	3
onloadeddata	The event occurs when media data is loaded	3
onloadedmetadata	The event occurs when meta data (like dimensions and duration) are loaded	3
onloadstart	The event occurs when the browser starts looking for the specified media	3
onpause	The event occurs when the media is paused either by the user or programmatically	3
onplay	The event occurs when the media has been started or is no longer paused	3
onplaying	The event occurs when the media is playing after having been paused or stopped for buffering	3
onprogress	The event occurs when the browser is in the process of getting the media data (downloading the media)	3
onratechange	The event occurs when the playing speed of the media is changed	3
onseeked	The event occurs when the user is finished moving/skipping to a new position in the media	3
onseeking	The event occurs when the user starts moving/skipping to a new position in the media	3
onstalled	The event occurs when the browser is trying to get media data, but data is not available	3
onsuspend	The event occurs when the browser is intentionally not getting media data	3
ontimeupdate	The event occurs when the playing position has changed (like when the user fast forwards to a different point in the media)	3
onvolumechange	The event occurs when the volume of the media has changed (includes setting the volume to "mute")	3
onwaiting	The event occurs when the media has paused but is expected to resume (like when the media pauses to buffer more data)	3

Animation - события

Событие	Описание	DOM
animationend	The event occurs when a CSS animation has completed	3
animationiteration	The event occurs when a CSS animation is repeated	3
animationstart	The event occurs when a CSS animation has started	3

Transition - события

Событие	Описание	DOM
transitionend	The event occurs when a CSS transition has completed	3

Server-Sent - события

Событие	Описание	DOM
onerror	The event occurs when an error occurs with the event source
onmessage	The event occurs when a message is received through the event source
onopen	The event occurs when a connection with the event source is opened

Другие события

Событие	Описание	DOM
onmessage	The event occurs when a message is received through or from an object (WebSocket, Web Worker, Event Source or a child frame or a parent window)	3
onmousewheel	Deprecated. Use the onwheel event instead
ononline	The event occurs when the browser starts to work online	3
onoffline	The event occurs when the browser starts to work offline	3
onpopstate	The event occurs when the window's history changes	3
onshow	The event occurs when a <menu> element is shown as a context menu	3
onstorage	The event occurs when a Web Storage area is updated	3
ontoggle	The event occurs when the user opens or closes the <details> element	3
onwheel	The event occurs when the mouse wheel rolls up or down over an element	3

Touch - события

Событие	Описание	DOM
ontouchcancel	The event occurs when the touch is interrupted
ontouchend	The event occurs when a finger is removed from a touch screen
ontouchmove	The event occurs when a finger is dragged across the screen
ontouchstart	The event occurs when a finger is placed on a touch screen

Объект event

Когда происходит событие, браузер создает объект 'event', помещает в него детали события и передает его в качестве аргумента обработчику.

пример ниже выводит на консоль все свойства текущего объека event, созданного баузеом при клике мышкой по элементу ELEMENT .

function myFunc2(evnt){ console.log('Event: ', evnt); }

ELEMENT.addEventListener('click', myFunc2);

Константы

Константа	Описание	DOM
CAPTURING_PHASE	The current event phase is the capture phase (1)	1
AT_TARGET	The current event is in the target phase, i.e. it is being evaluated at the event target (2)	2
BUBBLING_PHASE	The current event phase is the bubbling phase (3)	3

Свойства

Свойство	Описание	DOM
bubbles	Returns whether or not a specific event is a bubbling event	2
cancelable	Returns whether or not an event can have its default action prevented	2
currentTarget	Returns the element whose event listeners triggered the event	2
defaultPrevented	Returns whether or not the preventDefault() method was called for the event	3
eventPhase	Returns which phase of the event flow is currently being evaluated	2
isTrusted	Returns whether or not an event is trusted	3
target	Returns the element that triggered the event	2
timeStamp	Returns the time (in milliseconds relative to the epoch) at which the event was created	2
type	Returns the name of the event	2
view	Returns a reference to the Window object where the event occured	2

Методы

Метод	Описание	DOM
preventDefault()	Cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur	2
stopImmediatePropagation()	Prevents other listeners of the same event from being called	3
stopPropagation()	Prevents further propagation of an event during event flow	2

Объект - MouseEvent

Свойство	Описание	DOM
altKey	Возвращает, была ли нажата клавиша «ALT» при запуске события мыши	2
button	Возвращает, какая кнопка мыши была нажата при запуске события мыши	2
buttons	Возвращает, какие кнопки мыши были нажаты при запуске события мыши	3
clientX	Возвращает горизонтальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено	2
clientY	Возвращает вертикальную координату указателя мыши относительно текущего окна, когда событие мыши было запущено	2
ctrlKey	Возвращает, была ли нажата клавиша CTRL при запуске события мыши	2
detail	Возвращает число, указывающее, сколько раз щелкнули мышь	2
metaKey	Возвращает, была ли нажата клавиша «META» при срабатывании события	2
pageX	Возвращает горизонтальную координату указателя мыши относительно документа, когда событие мыши было запущено
pageY	Возвращает вертикальную координату указателя мыши относительно документа, когда событие мыши было запущено
relatedTarget	Возвращает элемент, связанный с элементом, вызвавшим событие мыши	2
screenX	Возвращает горизонтальную координату указателя мыши относительно экрана, когда событие было вызвано	2
screenY	Возвращает вертикальную координату указателя мыши относительно экрана, когда событие было инициировано	2
shiftKey	Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события	2
which	Возвращает, какая кнопка мыши была нажата при запуске события мыши	2

Объект - KeyboardEvent

Свойство	Описание	DOM
altKey	Возвращает, была ли нажата клавиша «ALT» при срабатывании события	2
ctrlKey	Возвращает, была ли нажата клавиша CTRL при срабатывании события клавиатуры	2
charCode	Возвращает код символа Юникода клавиши, которая вызвала событие onkeypress	2
key	Возвращает для нажатой клавиши её значение	3
location	Возвращает местоположение ключа на клавиатуре или устройстве	3
metaKey	Возвращает, была ли нажата клавиша «meta» при запуске события	2
shiftKey	Возвращает, была ли нажата клавиша «SHIFT» при срабатывании события	2
which	Возвращает код символа Юникода ключа, вызвавшего событие onkeypress, или код ключа Unicode ключа, вызвавшего событие onkeydown или onkeyup	2

HashChangeEvent - объект

Property	Описание	DOM
newURL	Returns the URL of the document, after the hash has been changed
oldURL	Returns the URL of the document, before the hash was changed

PageTransitionEvent - объект

Property	Описание	DOM
persisted	Returns whether the webpage was cached by the browser

FocusEvent - объект

Property	Описание	DOM
relatedTarget	Returns the element related to the element that triggered the event	3

AnimationEvent - объект

Property	Описание	DOM
animationName	Returns the name of the animation
elapsedTime	Returns the number of seconds an animation has been running

TransitionEvent - объект

Property	Описание	DOM
propertyName	Returns the name of the CSS property associated with the transition
elapsedTime	Returns the number of seconds a transition has been running

WheelEvent - объект

Property	Описание	DOM
deltaX	Returns the horizontal scroll amount of a mouse wheel (x-axis)	3
deltaY	Returns the vertical scroll amount of a mouse wheel (y-axis)	3
deltaZ	Returns the scroll amount of a mouse wheel for the z-axis	3
deltaMode	Returns a number that represents the unit of measurements for delta values (pixels, lines or pages)	3

Регистрация обработчика событий

Зарегистриовать обработчик событий можно разными способами.

Присвоить значение специальному атрибуту (onclick, onkeypress, onmouseenter,...) при описании HTMl тега. Например:

<button id='myButton1' onclick="alert('My event!');">Press me</button>

Можно его изменить с помощью соответствующего свойства объекта element:

document.getElementById('myButton1').onclick = 'alert("New action")'

Можно использовать метод объекта element - addEventListener(event, listener). Например:

document.getElementById('myButton1').addEventListener('click', click2); function click2(){ alert('Listener 1 - click2()'); }

или

document.getElementById('myButton1').addEventListener('click', () => { alert ('Listener 1!!'); });

Если в этом примере ипользовать оба способа, то к элементу id=myButton1 , к событию click будут привязаны сразу 2 обработчика.

Удаление обработчика событий

Обработчик событий, который привязан к элементу через его атрибут, можно удалить, переопределив значение атрибута.

Привязать обработчик к элементу

<button id="myButton1" onclick='alert("Event listener connected")'>Click me</button>

или

document.getElementById('myButton1').onclick='alert("Event listener connected")';

Удалить его

document.getElementById('myButton1').onclick='';

Можно использовать метод элемента removeEventListener(событие, имя_обработчика)

Привязать

function myFunc2(){ alert("Listener myFunc2() response"); } document.getElementById('myButton1').addEventListener('click', myFunc2);

Удалить

document.getElementById('myButton1').removeEventListener('click', myFunc2);

Удалить все обработчики событий у элемента можно, например, клонировав элемент (метод cloneNode()) , при этом обработчики событий не клонируются.

function removeAllEventListeners(elmntID){ var oldElement = document.getElementById(elmntID); var newElement = oldElement.cloneNode(true); oldElement.parentNode.replaceChild(newElement, oldElement); // cleanup out1 out1.innerHTML = ''; }

Events bubbling, capturing

event.target - элемент, который инициировал событие.

event.currentTarget - текущий элемент, обрабатывающий событие.

event bubbling (event propagation) - обработка события, котоое инициировал элемент, всеми его родительскими элементами (снизу вверх или от дочернего элемента).

event capturing -

event.eventPhase - фаза обработки события (capturing=1, bubbling=3)

Стандартные события DOM проходят фазы обработки событий (event.eventPhase):

Константа	Значение	Описание
Event.NONE	0	Ни одно событие не обрабатывается
Event.CAPTURING_PHASE	1	Событие передаётся через объекты-предки целевого элемента (event.target). Этот процесс начинается с объекта Window, затем - Document, затем HTMLHtmlElement и т. д. через элементы до тех пор, пока не будет достигнут непоседственно родительский элемент. Обработчики событий, зарегистрированные для Capturing (при вызове EventTarget.addEventListener (EVENT, HANDLER, useCapture)), запускаются на этом этапе.
Event.AT_TARGET	2	Событие достигло целевого элемента. В это время вызываются обработчики событий, зарегистрированные для этой фазы. Если Event.bubbles принимает значение false, обработка события завершается после завершения этой фазы.
Event.BUBBLING_PHASE	3	Событие распространяется к предкам целевого элемента, в обратном порядке, начиная с его непосредственного родителя, и в конечном итоге достигает объекта Window. Этот процесс называется bubbling происходит только в том случае, если Event.bubbles принимает значение true. Обработчики событий, зарегистрированные для этой фазы, запускаются в это время.

Capturing phase - событие переходит к элементу
Target phase - событие достигло целевого элемента
Bubbling phase - событие "поднимается" от элемента

DOM - объекты CSS

Определения

Свойство (property) - название стиля.

Значение (value) - значение свойства.

Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

Правило (rule или набор правил -rule set)- селектор стиля плюс блок стилей.

Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может быть находиться одна декларация или несколько, разделённых символом (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

Объект DOM - Style

Отражает свойства стилей элемента (inline styles). Отражает те свойства стилей, которые заданы атрибутом style.

Задать атрибут style (нужно иметь в виду, что если этот атрибут уже был задан, его старое значение будет удалено)

element.setAttribute("style", "background-color: red;");

Удалить атрибут (и все inline стили элемента)

element.removeAttribute("style")

Модифицировать параметры атрибута style (изменение свойс объекта style для элемента).

element.style.backgroundColor = "red";

Свойства объекта style

Свойство	Описание	Версия CSS
alignContent	Устанавливает или возвращает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все свободное пространство	3
alignItems	Устанавливает или возвращает выравнивание элементов внутри гибкого контейнера	3
alignSelf	Устанавливает или возвращает выравнивание для выбранных элементов внутри гибкого контейнера	3
animation	Сокращённое свойство для всех свойств анимации, приведённых ниже, за исключением свойства animationPlayState	3
animationDelay	Устанавливает или возвращает, когда анимация начнется	3
animationDirection	Устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах	3
animationDuration	Устанавливает или возвращает количество секунд или миллисекунд, которое требуется анимации для завершения одного цикла	3
animationFillMode	Устанавливает или возвращает значения, которые применяются анимацией за пределами времени ее выполнения	3
animationIterationCount	Устанавливает или возвращает количество раз, когда должна воспроизводиться анимация	3
animationName	Устанавливает или возвращает имя для анимации @keyframes	3
animationTimingFunction	Устанавливает или возвращает кривую скорости анимации	3
animationPlayState	Устанавливает или возвращает, работает анимация или приостановлена	3
background	Устанавливает или возвращает все свойства фона в одной директиве	1
backgroundAttachment	Устанавливает или возвращает фиксированное фоновое изображение или прокручивает страницу	1
backgroundColor	Устанавливает или возвращает фоновый цвет элемента	1
backgroundImage	Устанавливает или возвращает фоновое изображение для элемента	1
backgroundPosition	Устанавливает или возвращает начальную позицию фонового изображения	1
backgroundRepeat	Устанавливает или возвращает как повторять (мозаику) фоновое изображение	1
backgroundClip	Устанавливает или возвращает область рисования фона	3
backgroundOrigin	Устанавливает или возвращает область позиционирования фоновых изображений	3
backgroundSize	Устанавливает или возвращает размер фонового изображения	3
backfaceVisibility	Устанавливает или возвращает, должен ли элемент быть видимым, если он не обращен к экрану	3
border	Устанавливает или возвращает borderWidth, borderStyle и borderColor в одном объявлении	1
borderBottom	Устанавливает или возвращает все свойства borderBottom в одном объявлении	1
borderBottomColor	Устанавливает или возвращает цвет нижней границы	1
borderBottomLeftRadius	Устанавливает или возвращает форму границы нижнего левого угла	3
borderBottomRightRadius	Устанавливает или возвращает форму границы нижнего правого угла	3
borderBottomStyle	Устанавливает или возвращает стиль нижней границы	1
borderBottomWidth	Устанавливает или возвращает ширину нижней границы	1
borderCollapse	Устанавливает или возвращает, должна ли граница таблицы быть свернута в одну границу или нет	2
borderColor	Устанавливает или возвращает цвет границы элемента (может иметь до четырех значений)	1
borderImage	Стеновое свойство для установки или возврата всех свойств borderImage	3
borderImageOutset	Устанавливает или возвращает величину, на которую область изображения границы выходит за пределы поля	3
borderImageRepeat	Устанавливает или возвращает, следует ли повторять, округлять или растягивать границу изображения	3
borderImageSlice	Устанавливает или возвращает внутренние смещения границы изображения	3
borderImageSource	Устанавливает или возвращает изображение, которое будет использоваться в качестве границы	3
borderImageWidth	Устанавливает или возвращает ширину границы изображения	3
borderLeft	Устанавливает или возвращает все свойства borderLeft в одном объявлении	1
borderLeftColor	Устанавливает или возвращает цвет левой границы	1
borderLeftStyle	Устанавливает или возвращает стиль левой границы	1
borderLeftWidth	Устанавливает или возвращает ширину левой границы	1
borderRadius	Сокращенное свойство для установки или возврата радиусавсех четырех границ	3
borderRight	Устанавливает или возвращает все свойства borderRight в одном объявлении	1
borderRightColor	Устанавливает или возвращает цвет правой границы	1
borderRightStyle	Устанавливает или возвращает стиль правой границы	1
borderRightWidth	Устанавливает или возвращает ширину правой границы	1
borderSpacing	Устанавливает или возвращает пробел между ячейками в таблице	2
borderStyle	Устанавливает или возвращает стиль границы элемента (может иметь до четырех значений)	1
borderTop	Устанавливает или возвращает все свойства borderTop в одном объявлении	1
borderTopColor	Устанавливает или возвращает цвет верхней границы	1
borderTopLeftRadius	Устанавливает или возвращает форму границы верхнего левого угла	3
borderTopRightRadius	Устанавливает или возвращает форму границы верхнего правого угла	3
borderTopStyle	Устанавливает или возвращает стиль верхней границы	1
borderTopWidth	Устанавливает или возвращает ширину верхней границы	1
borderWidth	Устанавливает или возвращает ширину границы элемента (может иметь до четырех значений)	1
bottom	Устанавливает или возвращает нижнее положение позиционированного элемента	2
boxDecorationBreak	Устанавливает или возвращает поведение фона и границы элемента при разрыве страницы или для встроенных элементов при разрыве строки.	3
boxShadow	Прикрепляет к коробке одну или несколько отбрасываемых теней	3
boxSizing	Позволяет определить для определенных элементов способ размещения в определенной области	3
captionSide	Устанавливает или возвращает позицию заголовка таблицы	2
clear	Устанавливает или возвращает позицию элемента относительно плавающих объектов	1
clip	Устанавливает или возвращает часть видимого элемента	2
color	Устанавливает или возвращает цвет текста	1
columnCount	Устанавливает или возвращает количество столбцов, на которые элемент должен быть разделен	3
columnFill	Устанавливает или возвращает способ заполнения столбцов	3
columnGap	Устанавливает или возвращает промежуток между столбцами	3
columnRule	Стеновое свойство для установки или возврата всех свойств columnRule	3
columnRuleColor	Устанавливает или возвращает цвет линии-разделителя между столбцами	3
columnRuleStyle	Устанавливает или возвращает стиль линии-разделителя между столбцами	3
columnRuleWidth	Устанавливает или возвращает ширину линии-разделителя между столбцами	3
columns	Сокращенное свойство для установки или возврата columnWidth и columnCount	3
columnSpan	Устанавливает или возвращает, сколько столбцов должен занимать элемент	3
columnWidth	Устанавливает или возвращает ширину столбцов	3
content	Используется с: :before and :after псевдоэлементами, для вставки сгенерированного содержимого	2
counterIncrement	Увеличивает один или несколько счетчиков	2
counterReset	Создает или сбрасывает один или несколько счетчиков	2
cursor	Устанавливает или возвращает тип курсора для отображения указателя мыши	2
direction	Устанавливает или возвращает направление текста	2
display	Устанавливает или возвращает тип отображения элемента	1
emptyCells	Устанавливает или возвращает, показывать границу и фон пустых ячеек, или нет	2
filter	Устанавливает или возвращает фильтры изображений (визуальные эффекты, такие как размытие и насыщенность)	3
flex	Устанавливает или возвращает длину элемента относительно остальных	3
flexBasis	Устанавливает или возвращает начальную длину гибкого элемента	3
flexDirection	Устанавливает или возвращает направление гибких элементов	3
flexFlow	Сокращенное свойство свойств flexDirection и flexWrap	3
flexGrow	Устанавливает или возвращает, насколько элемент будет расти относительно остальных	3
flexShrink	Устанавливает или возвращает, как элемент будет уменьшаться относительно остальных	3
flexWrap	Устанавливает или возвращает, устанавливать ли свойство wrap для flex - элементов	3
cssFloat	Устанавливает или возвращает горизонтальное выравнивание элемента	1
font	Устанавливает или возвращает fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily в одном объявлении	1
fontFamily	Устанавливает или возвращаетсемейство шрифта	1
fontSize	Устанавливает или возвращает размер текста	1
fontStyle	Устанавливает или возвращает стиль шрифта	1
fontVariant	Устанавливает или возвращает модификацию шрифта	1
fontWeight	Устанавливает или возвращает толщину линии шрифта	1
fontSizeAdjust	Preserves the readability of text when font fallback occurs	3
fontStretch	Выбирает нормальное, сжатое или расширенное написание из семейства шрифтов	3
hangingPunctuation	Указывает, может ли знак пунктуации быть помещен вне блока строки	3
height	Устанавливает или возвращает высоту элемента	1
hyphens	Устанавливает, как разделять слова для улучшения макета абзацев	3
icon	Предоставляет автору возможность стилизовать элемент под иконку	3
imageOrientation	Определяет поворот вправо или в направлении по часовой стрелке, который браузер применяет к изображению	3
justifyContent	Устанавливает или возвращает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство	3
left	Устанавливает или возвращает левую позицию позиционируемого элемента	2
letterSpacing	Устанавливает или возвращает пробел между символами в тексте	1
lineHeight	Устанавливает или возвращает расстояние между строками в тексте	1
listStyle	Устанавливает или возвращает listStyleImage, listStylePosition и listStyleType в одном объявлении	1
listStyleImage	Устанавливает или возвращает изображение для маркера элемента списка	1
listStylePosition	Устанавливает или возвращает позицию для маркера элемента списка	1
listStyleType	Устанавливает или возвращает типмаркера списка	1
margin	Устанавливает или возвращает внешние отступы элемента (может иметь до четырех значений)	1
marginBottom	Устанавливает или возвращает нижний отступ элемента	1
marginLeft	Устанавливает или возвращает левый отступ элемента	1
marginRight	Устанавливает или возвращает правый отступ элемента	1
marginTop	Устанавливает или возвращает верхний отступ элемента	1
maxHeight	Устанавливает или возвращает максимальную высоту элемента	2
maxWidth	Устанавливает или возвращает максимальную ширину элемента	2
minHeight	Устанавливает или возвращает минимальную высоту элемента	2
minWidth	Устанавливает или возвращает минимальную ширину элемента	2
navDown	Устанавливает или возвращает, куда следует перемещаться при использовании клавиши со стрелкой вниз	3
navIndex	Устанавливает или возвращает порядок табуляции для элемента	3
navLeft	Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой влево	3
navRight	Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой вправо	3
navUp	Устанавливает или возвращает туда, куда следует перемещаться при использовании клавиши навигации со стрелкой	3
opacity	Устанавливает или возвращает уровень непрозрачности для элемента	3
order	Устанавливает или возвращает порядок гибкого элемента относительно остальных	3
orphans	Устанавливает или возвращает минимальное количество строк для элемента, который должен быть оставлен в нижней части страницы, когда разрыв страницы происходит внутри элемента	2
outline	Устанавливает или возвращает все свойства обводки (контура) в одном объявлении	2
outlineColor	Устанавливает или возвращает цвет контура вокруг элемента	2
outlineOffset	Смещает контур и вытягивает его за пределы края	3
outlineStyle	Устанавливает или возвращает стиль контура вокруг элемента	2
outlineWidth	Устанавливает или возвращает ширину контура вокруг элемента	2
overflow	Устанавливает или возвращает, что делать с содержимым, которое отображается вне поля элемента	2
overflowX	Указывает, что делать с левыми / правыми краями содержимого, если он переполняет область содержимого элемента	3
overflowY	Указывает, что делать с верхними / нижними краями содержимого, если оно переполняет область содержимого элемента	3
padding	Устанавливает или возвращает внутренние отступы элемента (может иметь до четырех значений)	1
paddingBottom	нижний отступ	1
paddingLeft	левый отступ	1
paddingRight	правый отступ	1
paddingTop	верхний отступ	1
pageBreakAfter	Устанавливает или возвращает поведение разрыва страницы после элемента	2
pageBreakBefore	Устанавливает или возвращает поведение разрыва страницы до элемента	2
pageBreakInside	Устанавливает или возвращает поведение разрыва страницы внутри элемента	2
perspective	Устанавливает или возвращает перспективу просмотра 3D-элементов	3
perspectiveOrigin	Устанавливает или возвращает нижнюю позицию трехмерных элементов	3
position	Устанавливает или возвращает тип метода позиционирования, используемый для элемента (статический, относительный, абсолютный или фиксированный)	2
quotes	Устанавливает или возвращает тип кавычек для встроенных котировок	2
resize	Устанавливает или возвращает, может ли пользователь изменять размер элемента	3
right	Устанавливает или возвращает правое положение позиционируемого элемента	2
tableLayout	Устанавливает или возвращает способ компоновки ячеек, строк и столбцов таблицы	2
tabSize	Устанавливает или возвращает длину (колич пробелов) символа табуляции	3
textAlign	Устанавливает или возвращает горизонтальное выравнивание текста	1
textAlignLast	Устанавливает или возвращает, как последняя строка блока или строка прямо перед выравниванием принудительной строки выравнивается, когда выравнивание текста - "justify"	3
textDecoration	Устанавливает или возвращает оформление текста	1
textDecorationColor	Устанавливает или возвращает цвет оформления текста	3
textDecorationLine	Устанавливает или возвращает тип строки в текстовом оформлении	3
textDecorationStyle	Устанавливает или возвращает стиль линии для оформления текста	3
textIndent	Устанавливает или возвращает отступ первой строки текста	1
textJustify	Устанавливает или возвращает метод выравнивания, используемый, когда text-align установлено "justify"	3
textOverflow	Устанавливает или возвращает то, что должно произойти, когда текст переполняет содержащий элемент	3
textShadow	Устанавливает или возвращает теневой эффект текста	3
textTransform	Устанавливает или возвращает капитализацию текста	1
top	Устанавливает или возвращает верхнее положение позиционированного элемента	2
transform	Применяет преобразование 2D или 3D к элементу	3
transformOrigin	Устанавливает или возвращает позицию преобразованных элементов	3
transformStyle	Устанавливает или возвращает способ отображения вложенных элементов в 3D-пространстве	3
transition	Стеновое свойство для установки или возврата четырех свойств перехода (transition)	3
transitionProperty	Устанавливает или возвращает свойство CSS, для которого применяется эффект перехода	3
transitionDuration	Устанавливает или возвращает количество секунд или миллисекунд, которое требуется для перехода	3
transitionTimingFunction	Устанавливает или возвращает кривую скорости эффекта перехода	3
transitionDelay	Устанавливает или возвращает, когда эффект перехода начнется	3
unicodeBidi	Устанавливает или возвращает, должен ли текст переопределяться для поддержки нескольких языков в одном документе	2
verticalAlign	Устанавливает или возвращает вертикальное выравнивание содержимого в элементе	1
visibility	Устанавливает или возвращает, должен ли элемент быть видимым	2
whiteSpace	Устанавливает или возвращает способ обработки вкладок, разрывов строк и пробелов в тексте	1
width	Устанавливает или возвращает ширину элемента	1
wordBreak	Устанавливает или возвращает правила нарушения строки для не-CJK-скриптов	3
wordSpacing	Устанавливает или возвращает расстояние между словами в тексте	1
wordWrap	Позволяет разбивать длинные, неразделяемые слова и перенести на следующую строку	3
widows	Устанавливает или возвращает минимальное количество строк для элемента, который должен быть видимым в верхней части страницы	2
zIndex	Устанавливает или возвращает порядок по вертикали позиционированного элемента	2

Объект styleSheet (CSSStyleSheet)

Объект «StyleSheet» позволяет просматривать листы стилей документа, добавлять или удалять правила в одном из них.

Получить перечень листов стилей для документа

var styleSheetList = document.styleSheets;

Добавить элемент STYLE - создать из него новый объект CSSStyleSheet

document.createElement('style'); css1.type = 'text/css'; css1.innerText = 'body { background: #FEE; } '; document.head.appendChild(css1);

Добавить элемент LINK - добавить из файла стили и на этой базесоздать новый объект CSSStyleSheet

var s = document.createElement('link'); s.type = 'text/css'; s.rel = 'stylesheet'; s.href = 'file.css'; document.head.appendChild(s); var myCSSStyleSheetObj = Object.create(document.styleSheets[0])

Свойства

Свойство	Описание
cssRules[]	Возвращает массив, содержащий все правила CSS таблицы
cssText	Свойство Read / Write, содержащее все содержимое таблицы стилей.
disabled	Свойство Read / write, которое указывает, отключена ли таблица стилей или нет. Значение по умолчанию - false.
href	Свойство «Read/write», которое содержит URL-адрес листа стилей
media	Указывает устройство для таблицы стилей. Значение по умолчанию - «экран».
ownerNode	Ссылки на узел дерева документов, который содержит текущую таблицу стилей. Для обычных HTML-страниц ownerNode обычно возвращает элемент LINK или STYLE в таблице стилей.
ownerRule	Для таблиц стилей, которые определяются с помощью правила @import, возвращается объект CSSImportRule.
owningElement	Ссылки на узел дерева документов, который содержит текущую таблицу стилей. IE только свойство. В NS6 + / Firefox эквивалент «ownerNode».
parentStyleSheet	Для таблиц стилей, которые включены на странице с помощью правила @page, @import родительский стиль StyleSheet ссылается на таблицу стилей верхнего уровня. Для стандартных таблиц стилей LINK или STYLE это свойство возвращает null.
rules[]	Возвращает массив, содержащий все правила CSS таблицы стилей. IE только. В NS6 + / Firefox вместо этого используется cssRules []. С помощью правил [] можно добавлять, удалять или изменять существующие правила в таблице стилей.
title	Возвращает значение атрибута title таблицы стилей, если оно определено.
type	Возвращает значение атрибута type таблицы стилей.

Методы

Метод	Описание
addRule(selector, declaration, [index])	Метод для IE? который добавляет новое правило в styleSheet/ Параметр selector - селектор правила ("p", "div b"), declaration - набор свойств правила ("background-color: yellow; color: brown"). Необязательный параметр - "index" позволяет указать позицию нового правила в таблице стилей.
removeRule([index])	Метод, который удаляет первое правило таблицы стилей. Необязательный индекс (целое число) позволяет удалить определенное правило на основе его позиции в коллекции правил [].
deleteRule(index)	Удаляет правило из таблицы стилей, основываясь на его позиции в коллекции cssRules []. Параметр «index» (integer) используется, чтобы указать эту позицию.
insertRule(rule, index)	Вставляет новое правило в таблицу стилей, где параметр «rule» - это строка, содержащая все добавляемое правило (например: #myid {color: red; border: 1px solid black}) и «index» - целое число, определяющее положение внутри cssRules [].

Объект CSS Rules

Свойство	Описание
cssText	Возвращает содержимое правила css целиком, от селектора до соответствующих объявлений CSS. Полезное свойство для простого поиска внутри правила, позволяющее увидеть как селектор, так и все сразу правила.
length	Возвращает длину объекта CSS Rule (cssRules.length или rules.length), другими словами, количество правил в таблице стилей.
parentStyleSheet	Возвращает объект styleSheet, который содержит текущее правило.
selectorText	Возвращает часть правила - селектор.
style	Даёт доступ для чтения-записи к отдельным атрибутам, заданным в правиле. Аналогично inline объекту "style" элемента DOM.

DOM объект - Element

Объект DOM - Элемент

Этот объект порождается каждым HTML тэгом документа, таким образос каждый элемент (узел) дерева DOM наследует все его свойства и методы.

Далее имеется в виду, что node (узел в дереве объектов DOM) может быть типа: element (узел типа: HTML элемент ), text node (узел типа: текст), attribute node (узел типа: атрибут элемента).

Свойства и методы

Свойство / Метод	Описание
accessKey	Задаёт или возвращает accesskey атрибут элемента
addEventListener()	Добавляет к элементу обработчик событий
appendChild()	Добавляет новый дочерний узел к эдементу дерева DOM , после всех существующих дочерних элементов
attributes	Возвращает список атрибутов элемента
blur()	Уводит фокус с элемента
childElementCount	Возвращает количество дочерних элементов
childNodes	Возвращает коллекцию дочерних элементов, включая тексты(text nodes) и комментарии
children	Возвращает коллекцию дочерних элементов, не включая тексты(text nodes) и комментарии
classList	Возвращает список классов элемента
className	Задаёт или возвращает значение атрибута class
click()	Симулирует событие mouse-click для элемента
clientHeight	Возвращает высоту элемента, включая отступы
clientLeft	Возвращает ширину левой границы элемента
clientTop	Возвращает ширину верхней границы элемента
clientWidth	Возвращает ширину элемента, включая отступы
cloneNode()	Клонирует элемент
compareDocumentPosition()	Сравнивает позицию элемента с позицией другого
contains()	Возвращает true , если данный узел - родитель узла - аргумента (содержит его), иначе - e false
contentEditable	Делает элемент релактируемым
dir	Задаёт иои возвращает значение атрибута dir
firstChild	Возврашает первый дочерний узел элемента
firstElementChild	Возврашает первый дочерний элемент
focus()	Перемщает фокус на элемент
getAttribute()	Возвращает указанное значение атрибута узла элемента
getAttributeNode()	Возвращает указанный узел атрибута
getElementsByClassName()	Возвращает коллекцию всех дочерних элементов с указанным именем класса
getElementsByTagName()	Возвращает коллекцию всех дочерних элементов с указанным именем тега
getFeature()
hasAttribute()	Возвращает true, если элемент имеет указанный атрибут, иначе false
hasAttributes()	Возвращает true, если элемент имеет какие-либо атрибуты, иначе false
hasChildNodes()	Возвращает true, если элемент имеет какие-либо дочерние узлы, иначе false
id	Устанавливает или возвращает значение атрибута id элемента
innerHTML	Устанавливает или возвращает содержимое элемента
insertBefore()	Вставляет новый дочерний узел перед указанным, существующим дочерним узлом
isContentEditable	Возвращает true, если содержимое элемента редактируемое, иначе false
isDefaultNamespace()	Возвращает true, если указанное namespaceURI является значением по умолчанию, иначе false
isEqualNode()	Проверяет, идентичны ли два элемента
isSameNode()
isSupported()	Возвращает true, если указанная функция поддерживается элементом
lang	Устанавливает или возвращает значение атрибута lang элемента
lastChild	Возвращает последний дочерний узел элемента
lastElementChild	Возвращает последний дочерний элемент элемента
namespaceURI	Возвращает URI пространства имен элемента
nextSibling	Возвращает следующий узел на том же уровне дерева узлов
nextElementSibling	Возвращает следующий элемент на том же уровне дерева узлов
nodeName	Возвращает имя узла
nodeType	Возвращает тип узла узла
nodeValue	Устанавливает или возвращает значение узла
normalize()	Соединяет смежные текстовые узлы и удаляет пустые текстовые узлы в элементе
offsetHeight	Возвращает высоту элемента, включая внутренние отступы, границу и полосу прокрутки
offsetWidth	Возвращает ширину элемента, включая прописку, границу и полосу прокрутки
offsetLeft	Возвращает позицию горизонтального смещения элемента
offsetParent	Возвращает смещение родительского элемента
offsetTop	Возвращает координату вертикального смещения элемента
ownerDocument	Возвращает корневой элемент (объект document) для элемента
parentNode	Возвращает родительский узел элемента
parentElement	Возвращает родительский узел типа элемент для элемента
previousSibling	Returns the previous node at the same node tree level
previousElementSibling	Возвращает предыдущий узел на том же уровне дерева узлов
querySelector()	Возвращает первый дочерний элемент, который соответствует указанному CSS-селектору элемента
querySelectorAll()	Возвращает все дочерние элементы, которые соответствуют указанному CSS-селектору элемента
removeAttribute()	Удаляет указанный атрибут из элемента
removeAttributeNode()	Удаляет указанный узел атрибута и возвращает удаленный узел
removeChild()	Удаляет дочерний узел из элемента
replaceChild()	Заменяет дочерний узел в элементе
removeEventListener()	Удаляет обработчик событий, который был присоединен с помощью метода addEventListener ()
scrollHeight	Возвращает всю высоту элемента, включая отступы
scrollLeft	Устанавливает или возвращает количество пикселей, на которое содержимое элемента прокручивается по горизонтали
scrollTop	Устанавливает или возвращает количество пикселей, на которое элемент содержимого прокручивается по вертикали
scrollWidth	Возвращает всю ширину элемента, включая отступы
setAttribute()	Устанавливает или изменяет указанный атрибут на указанное значение
setAttributeNode()	Устанавливает или изменяет указанный узел атрибута
style	Устанавливает или возвращает значение атрибута style элемента
tabIndex	Устанавливает или возвращает значение атрибута tabindex элемента
tagName	Возвращает имя тега элемента
textContent	Устанавливает или возвращает текстовое содержимое узла и его потомков
title	Устанавливает или возвращает значение атрибута title элемента
toString()	Преобразует элемент в строку

nodelist.item()	Возвращает узел по указанному индексу в NodeList
nodelist.length	Возвращает количество узлов в NodeList

Пример:

(распечатать все свойства объекта ELEMENT )

<html>

<head>

function myFunction() {

var outString = "<h3>All element properties:</h3>"

myObj = document.getElementById("demo");

// loop - all obbject properties

outString += "<table width='30%' border='1'><tr><th>N</th><th>Свойство </th><th>Значение</th></tr>";

i = 0;

for(let key in myObj){

outString += "<tr> <td>" + i++ + "</td>" + "<td>" + key + "</td>" + "<td>" + myObj[key] + "</td></tr>";

}

outString += "</table>";

document.getElementById("demo").innerHTML = outString;

}

</script>

</head>

<body>

<button onclick="myFunction()">Получить свойства</button>

<br>

<br>

<button onclick="document.getElementById('demo').innerHTML = ''">Очистить DIV</button>

</body>

</html>

Основные ипы узлов DOM (node type)

Константа - тип узла	Значение	Описание
Node.ELEMENT_NODE	1	Узел типа element
Node.TEXT_NODE	3	Узел типа текст
Node.COMMENT_NODE	8	Узел типа comment
Node.DOCUMENT_NODE	9	Узел типа: document
Node.DOCUMENT_TYPE_NODE	10	Узел типа DocumentType <!DOCTYPE html> для HTML5 документов

DOM объект - window

Обект - Window*

Property	Description
closed	Returns a Boolean value indicating whether a window has been closed or not
defaultStatus	Sets or returns the default text in the statusbar of a window
document	Returns the Document object for the window (See Document object)
frameElement	Returns the <iframe> element in which the current window is inserted
frames	Returns all <iframe> elements in the current window
history	Returns the History object for the window (See History object)
innerHeight	Returns the inner height of a window's content area
innerWidth	Returns the inner width of a window's content area
length	Returns the number of <iframe> elements in the current window
localStorage	Returns a reference to the local storage object used to store data. Stores data with no expiration date
location	Returns the Location object for the window (See Location object)
name	Sets or returns the name of a window
navigator	Returns the Navigator object for the window (See Navigator object)
opener	Returns a reference to the window that created the window
outerHeight	Returns the outer height of a window, including toolbars/scrollbars
outerWidth	Returns the outer width of a window, including toolbars/scrollbars
pageXOffset	Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
pageYOffset	Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window
parent	Returns the parent window of the current window
screen	Returns the Screen object for the window (See Screen object)
screenLeft	Returns the horizontal coordinate of the window relative to the screen
screenTop	Returns the vertical coordinate of the window relative to the screen
screenX	Returns the horizontal coordinate of the window relative to the screen
screenY	Returns the vertical coordinate of the window relative to the screen
sessionStorage	Returns a reference to the local storage object used to store data. Stores data for one session (lost when the browser tab is closed)
scrollX	An alias of pageXOffset
scrollY	An alias of pageYOffset
self	Returns the current window
status	Sets or returns the text in the statusbar of a window
top	Returns the topmost browser window

Window Object Methods

Method	Description
alert()	Displays an alert box with a message and an OK button
atob()	Decodes a base-64 encoded string
blur()	Removes focus from the current window
btoa()	Encodes a string in base-64
clearInterval()	Clears a timer set with setInterval()
clearTimeout()	Clears a timer set with setTimeout()
close()	Closes the current window
confirm()	Displays a dialog box with a message and an OK and a Cancel button
focus()	Sets focus to the current window
getComputedStyle()	Gets the current computed CSS styles applied to an element
getSelection()	Returns a Selection object representing the range of text selected by the user
matchMedia()	Returns a MediaQueryList object representing the specified CSS media query string
moveBy()	Moves a window relative to its current position
moveTo()	Moves a window to the specified position
open()	Opens a new browser window
print()	Prints the content of the current window
prompt()	Displays a dialog box that prompts the visitor for input
resizeBy()	Resizes the window by the specified pixels
resizeTo()	Resizes the window to the specified width and height
scroll()	Deprecated. This method has been replaced by the scrollTo() method.
scrollBy()	Scrolls the document by the specified number of pixels
scrollTo()	Scrolls the document to the specified coordinates
setInterval()	Calls a function or evaluates an expression at specified intervals (in milliseconds)
setTimeout()	Calls a function or evaluates an expression after a specified number of milliseconds
stop()	Stops the window from loading

Записаться на курс

* По материалам сайта www.w3schools.com

DOM объект Document

Объект DOM - document

Свойство / Метод	Описание
document.activeElement	Возвращает текущий сфокусированный элемент в документе
document.addEventListener()	Прикрепляет обработчик события к документу
document.adoptNode()	Принимает узел из другого документа
document.anchors	Возвращает коллекцию всех <a> элементов в документе с атрибутом name
document.applets	Возвращает коллекцию всех элементов <applet> в документе
document.baseURI	Возвращает абсолютный базовый URI документа
document.body	Устанавливает или возвращает тело документа (элемент <body>)
document.close()	Закрывает выходной поток, ранее открытый с помощью document.open ()
document.cookie	Возвращает все пары файлов cookie имя-значение в документе
document.createAttribute()	Создает узел атрибута - attribute node
document.createComment()	Создает узел типа Comment
document.createDocumentFragment()	Создает чистый узел типа DocumentFragment node
document.createElement()	Создает узел типа: Element node
document.createTextNode()	Создает узел типа: Text node
document.doctype	Возвращает декларацию типа документа, связанную с документом
document.documentElement	Возвращает элемент типа Document (элемент <html>)
document.documentMode	Возвращает режим, используемый браузером для рендеринга документа
document.documentURI	возвращает URI документа
document.domain	Возвращает доменное имя сервера, который загрузил документ

document.embeds	Возвращает коллекцию всех <embed> элементов документа
document.forms	Возвращает коллекцию всех элементов <form> в документе
document.getElementById()	Возвращает элемент с атрибутом ID с указанным значением
document.getElementsByClassName()	Возвращает NodeList, содержащий все элементы с указанным именем класса
document.getElementsByName()	Возвращает NodeList, содержащий все элементы с указанным именем
document.getElementsByTagName()	Возвращает NodeList, содержащий все элементы с указанным именем тега
document.hasFocus()	Возвращает логическое значение (true - false), указывающее, имеет ли документ фокус
document.head	Возвращает элемент <head> документа
document.images	Возвращает коллекцию всех элементов <img> в документе
document.implementation	Возвращает объект DOMImplementation, который обрабатывает этот документ
document.importNode()	Импортирует узел из другого документа
document.inputEncoding	Возвращает кодировку, набор символов, используемый для документа
document.lastModified	Возвращает дату и время последнего изменения документа.
document.links	Возвращает коллекцию всех элементов <a> и <area> в документе с атрибутом href
document.normalize()	Удаляет пустые текстовые узлы и соединяет соседние узлы
document.normalizeDocument()	Удаляет пустые текстовые узлы и соединяет соседние узлы
document.open()	Открывает выходной поток HTML для сбора вывода из документа document.write ()
document.querySelector()	Возвращает первый элемент, который соответствует указанному селектору (ам ) CSS в документе
document.querySelectorAll()	Возвращает статический NodeList, содержащий все элементы, которые соответствуют указанному селектору (ам) CSS в документе
document.readyState	Возвращает (loading) статус загрузки документа
document.referrer	Возвращает URL-адрес документа, который загружал текущий документ
document.removeEventListener()	Удаляет обработчик событий из документа (который был присоединен с помощью метода addEventListener ())
document.renameNode()	Переименовывает указанный узел
document.scripts	Возвращает коллекцию элементов <script> в документе
document.strictErrorChecking	Устанавливает или возвращает, выполняется ли проверка ошибок или нет
document.title	Устанавливает или возвращает заголовок документа
document.URL	Возвращает полный URL-адрес документа HTML
document.write()	Записывает HTML-выражения или код JavaScript в документ
document.writeln()	То же, что и write (), но добавляет символ новой строки после каждого предложения

DOM объект Window

Обект - Window*

Property	Description
closed	Returns a Boolean value indicating whether a window has been closed or not
defaultStatus	Sets or returns the default text in the statusbar of a window
document	Returns the Document object for the window (See Document object)
frameElement	Returns the <iframe> element in which the current window is inserted
frames	Returns all <iframe> elements in the current window
history	Returns the History object for the window (See History object)
innerHeight	Returns the inner height of a window's content area
innerWidth	Returns the inner width of a window's content area
length	Returns the number of <iframe> elements in the current window
localStorage	Returns a reference to the local storage object used to store data. Stores data with no expiration date
location	Returns the Location object for the window (See Location object)
name	Sets or returns the name of a window
navigator	Returns the Navigator object for the window (See Navigator object)
opener	Returns a reference to the window that created the window
outerHeight	Returns the outer height of a window, including toolbars/scrollbars
outerWidth	Returns the outer width of a window, including toolbars/scrollbars
pageXOffset	Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window
pageYOffset	Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window
parent	Returns the parent window of the current window
screen	Returns the Screen object for the window (See Screen object)
screenLeft	Returns the horizontal coordinate of the window relative to the screen
screenTop	Returns the vertical coordinate of the window relative to the screen
screenX	Returns the horizontal coordinate of the window relative to the screen
screenY	Returns the vertical coordinate of the window relative to the screen
sessionStorage	Returns a reference to the local storage object used to store data. Stores data for one session (lost when the browser tab is closed)
scrollX	An alias of pageXOffset
scrollY	An alias of pageYOffset
self	Returns the current window
status	Sets or returns the text in the statusbar of a window
top	Returns the topmost browser window

Window Object Methods

Method	Description
alert()	Displays an alert box with a message and an OK button
atob()	Decodes a base-64 encoded string
blur()	Removes focus from the current window
btoa()	Encodes a string in base-64
clearInterval()	Clears a timer set with setInterval()
clearTimeout()	Clears a timer set with setTimeout()
close()	Closes the current window
confirm()	Displays a dialog box with a message and an OK and a Cancel button
focus()	Sets focus to the current window
getComputedStyle()	Gets the current computed CSS styles applied to an element
getSelection()	Returns a Selection object representing the range of text selected by the user
matchMedia()	Returns a MediaQueryList object representing the specified CSS media query string
moveBy()	Moves a window relative to its current position
moveTo()	Moves a window to the specified position
open()	Opens a new browser window
print()	Prints the content of the current window
prompt()	Displays a dialog box that prompts the visitor for input
resizeBy()	Resizes the window by the specified pixels
resizeTo()	Resizes the window to the specified width and height
scroll()	Deprecated. This method has been replaced by the scrollTo() method.
scrollBy()	Scrolls the document by the specified number of pixels
scrollTo()	Scrolls the document to the specified coordinates
setInterval()	Calls a function or evaluates an expression at specified intervals (in milliseconds)
setTimeout()	Calls a function or evaluates an expression after a specified number of milliseconds
stop()	Stops the window from loading

Записаться на курс

* По материалам сайта www.w3schools.com

DOM объекты браузера

Объект - navigator

Объект навигатора содержит информацию о браузере.

Объект Navigator можно получить, используя свойство объекта window - window.navigator.

window.navigator

или (для текущего окна)

navigator

Получить в цикле все свойства объекта navigator

function displProp(){ document.open(); for(let prop in window.navigator){ myString = eval("window.navigator." + prop); document.write("

" + prop + " : " + myString + "

"); } document.close(); }

Основные свойства объекта navigator

Свойство	Описание
appCodeName	Возвращает кодовое имя браузера
appName	Возвращает имя браузера
appVersion	Возвращает информацию о версии браузера
cookieEnabled	Определяет, включены ли cookie в браузере
geolocation	Возвращает объект Geolocation, который можно использовать для определения местоположения пользователя
language	Возвращает язык браузера
onLine	Определяет, находится ли браузер в сети
platform	Возвращает, для какой платформы скомпилирован браузер
product	Возвращает имя движка браузера
userAgent	Возвращает заголовок пользовательского агента, отправленный браузером на сервер

Методы объекта navigator

Метод	Описание
javaEnabled()	Указывает, поддерживает ли браузер Java
taintEnabled()	Удалено в версии 1.2 JavaScript. Указывает, включен ли браузер в tainting

Посмотреть список плагинов браузера

for (i=0; i<navigator.plugins.length; i++) { document.write("<tr><td>"); document.write(navigator.plugins[i].name); document.write("</td><td>"); document.write(navigator.plugins[i].filename); document.write("</td><td>"); document.write(navigator.plugins[i].description); document.write("</td></tr>"); }

Объект - location

Свойство объекта window - location используется для доступа к URL-адресу документа, загруженного в настоящее время в окне, а также предоставляет информацию об общих функциональных возможностях навигации документа.

Его уникальность заключается в том, что он является свойством как объекта window, так и документа, поэтому window.location и document.location указывают на тот же объект.

Объект location может даже анализировать текущий URL-адрес на дискретные сегменты, которые затем могут быть доступны и обработаны как набор свойств.

Объект - location: свойства

Свойство	Описание
hash	Хеш URL-адреса, часть - anchor.
host	Имя сервера и номер порта.
hostname	Имя сервера без номера порта
href	Полный URL-адрес загруженной страницы.
pathname	Каталог и имя файла URL.
port	Номер порта
protocol	Используемый протокол.
search	Строка запроса URL-адреса, начиная с вопросительного знака.

Объект - location: методы

Метод	Описание
assign()	Загружает новый документ
reload()	Перезагружает текущий документ
replace()	Заменяет текущий документ новым

Получить все свойства location

window.frames["out"].document.open(); for(let prop in window.location){ myString = eval("window.location." + prop); window.frames["out"].document.write("

" + prop + " : " + myString + "

"); } window.frames["out"].document.close();

Объект screen

Содержит информацию об экране посетителя.

Основные методы

Свойства	Описание
availHeight	Возвращает высоту экрана (исключая панель задач Windows)
availWidth	Возвращает ширину экрана (исключая панель задач Windows)
colorDepth	Возвращает глубину бит цветовой палитры для отображения изображений
height	Возвращает общую высоту экрана
pixelDepth	Возвращает разрешение цвета (в битах на пиксель) экрана
width	Возвращает общую ширину экрана

Пример. Открыть новое окно, размеры которого рассчитываются в зависимости от размеров экрана.

winHeight = window.screen.availHeight/2; winWidth = window.screen.availWidth/2; // Строка - параметры нового окна newWinParams = "fullscreen=no, scrollbars=no, menubar=no, location=no, titlebar=no, toolbar=no, resizable=no, status=no, left=0, top=0, height=" + winHeight + ", width=" + winWidth ; win1 = window.open("","",newWinParams); // Вписать в новое окно кнопку "ЗАКРЫТЬ" win1.document.write("");

Объект history

Объект history содержит URL-адреса, которые посетил пользователь (в окне браузера).

Объект history является частью объекта window и доступен через свойство window.history.

Основные свойства

Свойства	Описание
length	Возвращает количество URL-адресов в списке

Основные методы

Метод	Описание
back()	Загружает предыдущий URL-адрес по списку адресов посещённых страниц
forward()	Загружает следующий URL-адрес по списку адресов посещённых страниц
go()	Загружает определенный URL из списка адресов посещённых страниц

Пример: перейти на страничку назад

window.history.back()

jQuery - DOM навигация

jQuery - навигация по дереву объектов DOM*

Method	Description
add()	Adds elements to the set of matched elements
addBack()	Adds the previous set of elements to the current set
andSelf()	Deprecated in version 1.8. An alias for addBack()
children()	Returns all direct children of the selected element
closest()	Returns the first ancestor of the selected element
contents()	Returns all direct children of the selected element (including text and comment nodes)
each()	Executes a function for each matched element
end()	Ends the most recent filtering operation in the current chain, and return the set of matched elements to its previous state
eq()	Returns an element with a specific index number of the selected elements
filter()	Reduce the set of matched elements to those that match the selector or pass the function's test
find()	Returns descendant elements of the selected element
first()	Returns the first element of the selected elements
has()	Returns all elements that have one or more elements inside of them
is()	Checks the set of matched elements against a selector/element/jQuery object, and return true if at least one of these elements matches the given arguments
last()	Returns the last element of the selected elements
map()	Passes each element in the matched set through a function, producing a new jQuery object containing the return values
next()	Returns the next sibling element of the selected element
nextAll()	Returns all next sibling elements of the selected element
nextUntil()	Returns all next sibling elements between two given arguments
not()	Remove elements from the set of matched elements
offsetParent()	Returns the first positioned parent element
parent()	Returns the direct parent element of the selected element
parents()	Returns all ancestor elements of the selected element
parentsUntil()	Returns all ancestor elements between two given arguments
prev()	Returns the previous sibling element of the selected element
prevAll()	Returns all previous sibling elements of the selected element
prevUntil()	Returns all previous sibling elements between two given arguments
siblings()	Returns all sibling elements of the selected element
slice()	Reduces the set of matched elements to a subset specified by a range of indices

Записаться на курс

* По материалам сайта www.w3schools.com

WEB - Основы современных интернет-технологий
Основы современных интернет-технологий

Введение

Интернет сегодня - это всемирная сеть, которая объединяет миллионы компьютеров, расположенных в разных частях света. Функционирование этой сети обеспечивает организация ISOC (The Internet Society) - это американская некоммерческая организация (Reston, Virginia, U.S.), основанная в 1992 году. Штаб-квартира ISOC находится в городе Рестон, Вирджиния, США , ISOC имеет фиоиалы в Женеве, Швейцария. Члены ISOC - более чем 140 организаций и более 80 000 индивидуальных членов.

Подключение компьютеров в интернет, обмен данными между ними регламентируется определённым набором правил - протоколов. Такая стандартизация позволяеразличным независимым разработчикам и потребителям интернет-контента пользоваться этой сетью, публиковать в сети различного рода информмацию, создавать сетевые сервисы и тд..

Набор этих правил регламентируется и публикуются организацией - IETF ( Internet Engineering Task Force - Fremont, California, United States). Эти стандарты (интернет-протоколы - TCP/IP stack) публикутся в форме специальных документов - RFC (Requests For Comments), которые общедоступны.

В пространстве Интернет можно выделить компьютеры, на которых установлены специальные программы которые умеют предоставлять различные Интернет-услуги. Они называются Серверами (Server). Так, например, на каком-то компьютере может быть установлен WEB сервер ( Apacheб IIS,... ). В этом случае компьютер сможет публиковать в Интернет WEB - сайты.

На других компьютерах, которые тоже входят в Интернет, могут стоять специальные программы, которые умеют полцчать определённый тип услуг - клиенты. Например, программы типа Chrome, IE, Opera и другие браузеры умеют запрашивать у WEB серверов WEB странички и показывать их на экране компьютера.

Протоколы TCP/IP

Подробное описание стека протоколов TCP/IP выходит за рамки нашего обсуждения.

Для WEB - разработчика достаточно иметь общее представленте о некоторых из них.

Протоколы TCP (Transmission Control Protocol), IP (Internet Protocol) обеспечивают адресацию компьютеров в пространстве Интарнет, доставку пакетов (единицу информации). Каждому компьютеру в Интернет присваивается уникальный адрес IP, состоящий из 4-х наборов цифр. Например адрес 8.8.8.8 принадлежит DNS серверу Google.

Распределением этих адресов занимается InterNic (International Network Information Center).

Протокол DNS.

Для удобства использования Интернет-адресов их цифровые значения часто заменяют на более читабельные текстовые адреса - DNS - имена. Специальные сервера (DNS - Server) поддерживают в пространстве Интернет распеделённую иерархическую базу данных DNS имён.

Основная задача этой базы данных - приводить в соответсвие цифровые IP - адреса текстовым DNS именам. Для общения компьютеров в Интенет необходимы именно цифровые IP адреса.

Протокол DND даёт пользователям возможность не запоминать цифры, а запоминать дружественные текстовые имена в качестве адресов в Интернет.

Пространство DNS имён представляет собой дерево. От корня этого дерева имён отходят ветки - домены верхнего уровня. У каждого из них есть дочерние втки - домены следующих уровней. Распределением DNS имён и поддержкой доменов верхнего уровня - TLD (Top Level Domains) занимается ICANN (Internet Corporation for Assigned Names and Numbers). Управление доменами следующих подуровней делегировано другим организациям.

Протокол FTP позволяет обмениваться файлами через Интернет.

Протоколы POP, SMTP, IMAP позволяют обмениваться почтовыми сообщениями.

Протокол HTTP описывает правила взаимодействия WEB сервера с его клиентом - браузером.

Разработка WEB сайтов

Стандарты для разработчиков WEB регулируются организацией W3C (World Wide Web Consortium).

Это, например, CGI, CSS, DOM, HTML.
- Технологии Front-end, Back-end.
- WEB страница. WEB сайт. Принципы построения и функционирования.
Основные этапы построения сайта
- Планирование сайта, выбор и регистрация имени домена.
- Контент сайта. Планирование и подготовка содержимого сайта.
- Дизайн сайта. Проработка логики построения сайта. Разработка схемы навигации. Меню.
- Разработка графического дизайна. Выбор платформы сайта. Создание сайта.
- Выбор хостинга. Размещение сайта на WEB – хостинге.
- Тестирование сайта.
- Оптимизация сайта. Теги META, Ссылки сайта (SEF). Карта сайта (sitemap). Подготовка для поисковых роботов. Регистрация в поисковиках. SEO. Аналитика, продвижение сайта в интернет.
Программирование для WEB
- WEB - сервера. WEB - браузеры. Обзор языков HTML, JavaScript, PHP
Записаться на курс

Программирование на JavaScript, DOM

Программирование на языке JavaScript

JavaScript - это язык программирования, который позволяет сделать сайт интерактивным (игры, реакция сайта на нажатие кнопок, динамическое изменение элемнтов и их стилей, анимация).

Как выполняется программа на JavaScript

Вставка кода в HTML документ.

Тег <SCRIPT> , атрибуты тегов - обработчики событий.

Внешние файлы.

Отладка программы на JavaScript

Отладочная панель Chrome. DOM. Chrome Console.

Метод console.log()

Основные возможности JavaScript

Изменение элементов DOM (изменение, динамическое создение элементов)

Изменение стилей элементов

Управление окнами, сообщения, работа с таймером

Синтаксис языка. Основы

Предложения языка, разделители, точка с запятой, операторы, переменные, комментарии.

Предложения языка JavaScript состоят из операторов. Операторы языка согут разделяться символом ; или переводом строки.

Переменные - это контейнеры, в которых можно хранить значения. Для начала переменная декларируется, например ключевым словом var, за которой следует имя переменной.

В качестве имени переменной в JavaScript не могут использоваться зарезервированные ключевые слова языка.

Например:

var myName; myName = 'Bob';

Типы переменных

Тип переменной	Опиание	Пример
String	Строка. Последовательность символов называемая строкой. При декларации переменной строка заключается в кавычки.	var myVariable = 'Bob';
Number	Число. Числовая переменная	var myVar = 10;
Boolean	Переменная, принимающая значение true (истина) или false (ложь)	var myFlag = true;
Array	Структура данных, которая позволяет под одним именем (идентификатором) хранить сразу несколько значений.	var myArr1 = [1,'Bob','Steve',10]; Можно ссылаться на каждый элемент массива: var myArr1[0], var myArr1[1], и тд.
Object	Объект	var myVariable = document.querySelector('h1');

Декларация, область действия переменных, константы

Общие правила построения имен переменных (идентификаторов):

Имена могут содержать буквы, цифры, символы подчеркивания и знаки доллара.
Имена должны начинаться с буквы
Имена также могут начинаться с $ и _ (но мы не будем использовать его в этом уроке)
Имена чувствительны к регистру (y и Y - разные переменные)
Зарезервированные слова (например, ключевые слова JavaScript) не могут использоваться как имена

Для декларации переменных в языке Javascript используются операторы:

var, let.

Обасть дествия переменноЙ, задекларированной через var, - фунуция, в которой она люъявлена и дочерние функции. Если такая переменная описана вне функций, то оласть её действия - глобальная.

Оператор let позволяет объявлять переменные, область видимости которых ограничена блоком операторов, оператором или выражением, в котором он используется. Это не похоже на оператор var, который определяет переменную глобально или локально для целой функции независимо от области блока.

Для декларации констант используется оператор const. В отличие от переменных, значение константы не пожет быть изменено после декларирования.

Зарезервированные ключевые слова

Список всех зарезервированных слов в JavaScript приведен в следующей таблице. Они не могут использоваться как переменные JavaScript, функции, методы, метки меток или любые имена объектов.

abstract	else	instanceof	switch
boolean	enum	int	synchronized
break	export	interface	this
byte	extends	long	throw
case	false	native	throws
catch	final	new	transient
char	finally	null	true
class	float	package	try
const	for	private	typeof
continue	function	protected	var
debugger	goto	public	void
default	if	return	volatile
delete	implements	short	while
do	import	static	with
double	in	super

Оператор typeof

typeof undefined // "undefined"
typeof 0 // "number"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object"
typeof null // "object"
typeof alert // "function"

Конверсия типов переменных

Функции: String(value), Number(value), Boolean(value)

Комментарии JavaScript

Для комментариев JavaScript использует последовательности символов:

// или /*... */

Операторы языка JavaScript (арифметические, логические, побитовые)

Работа с объектами DOM

DOM - Document Object Model - это WEB стандарт, по которому браузером строится иерархическая структура объектов.

Эта модель состоит из объектов - узлов (nodes) разного типа:

Сам документ является узлом типа "document node"
Все элементы HTML являются узлами типа "element node"
Все атрибуты HTML являются узлами типа "attribute node"
Текст внутри элементов HTML - это узлы типа "text node" (текстовая строка - значение атрибута или содержимое элемента)
Комментарии - узлы комментариев - "comment nodes"

Браузер, на основании HTML и спецификации DOM, строит в памяти модель документа, например:

Модель DOM описывает:

Элементы HTML как объекты
Свойства всех элементов HTML
Методы доступа ко всем элементам HTML
События для всех элементов HTML

Полная документация DOM доступна, например, на сайте www.w3.org

Основные возможности языка JavaScript:

изменять все элементы HTML на странице
изменить все атрибуты HTML элементов на странице
изменять все стили CSS на странице
удалить существующие элементы и атрибуты HTML
добавлять новые HTML-элементы и атрибуты
реагировать на все существующие HTML-события на странице
создавать новые HTML-события на странице

Иерарахия объектов. window -> document -> element.

Свойства. Методы. События, обработчики событий. Коллекции.

Поиск элемента по дереву объектов (Traversing DOM).

Методы объекта document, которые чаще всего используются для поиска элементов на странице:

Основные объекты

DOM Document

Подробнее

DOM Window

Подробнее

DOM Element

Подробнее

Программа на языке JavaScript

Условные операторы

if

if (условие){ Операторы, которые выполняются при условии ИСТИНА }

if (условие){ Операторы, которые выполняются при условии ИСТИНА } else{ Операторы, которые выполняются при условии ЛОЖЬ }

if (условие1){ Операторы, которые выполняются при условии1 ИСТИНА } else if (условие2){ Операторы, которые выполняются при условии2 ИСТИНА } else if (условие3){ Операторы, которые выполняются при условии3 ИСТИНА } else{ Операторы, которые выполняются в случае, если все условия - ЛОЖЬ }

switch

switch (выражение)
{
case значение1: операторы
break;

case значение2: операторы
break;
...

case значениеn: операторы
break;

default: операторы
}

Циклы

while

while (выражениеn){
операторы цикла, которые выполняются, пока выражение = true
}

do{
операторы цикла, которые выполняются, пока выражение = true;
} while (выражение);

for

for (инициализация переменной цикла; проверка окончания цикла; приращение переменной цикла){
операторы цикла, которые выполняются, пока выражение = true
}

for (variablename in object){
операторы цикла
}

Выход из цикла.

Операторы break, continue, метки.

Операторы - подробнее

Массивы в JavaScript

Подробнее

Работа со строками

Подробнее

Функции в языке JavaScript

Функции, область действия переменных.

function functionname(parameter-list)
{
statements
}

Декларация функции

function mult(a,b) {
var result = a * b;
return result;
}

Вызов функции

mult(4,7);
mult(20,20);
mult(0.5,3);

Различия в декларации переменных операторами var и let. Константы - const

Обработка событий

DOM Events

Подробнее

DOM - работа со стилями (CSS)

Определения

Свойство (property) - название стиля.

Значение (value) - значение свойства.

Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

Правило (rule или набор правил -rule set)- селектор стиля плюс блок стилей.

Объект DOM - Style

Отражает свойства стилей элемента (inline styles). Отражает те свойства стилей, которые заданы атрибутом style.

Объект styleSheet (CSSStyleSheet)

Подробнее

Объекты браузера

Navigator
Screen
History
Location

Подробнее

Объекты в языке JavaScript

Возможности использования объектов.

Их методы и свойства.

Подробнее

Работа с датами, таймер

Объект Date

Подробнее

Методы объекта window для управления временными промежутками

setTimeout(function, milliseconds)

setInterval(function, milliseconds)

Регулярные выражения

Регулярные выражения представляют собой шаблоны для поиска в текстовых строках (такой поиск называется сопоставлением с этим шаблоном).

Подробнее

Объект Math

Math - встроенный объект, который предоставляет для использования основные математические константы и функции.

В отличие от других глобальных объектов, объект Math не является конструктором. Все свойства и методы объекта Math являются статическими. Вы ссылаетесь на константу "ПИ" через Math.PI и вызываете функцию синуса через Math.sin(x), где x является аргументом метода. Константы в JavaScript определены с полной точностью действительных чисел.

Подробнее

AJAX

Работа с технологией AJAX.

JSON и XML как форматы обмена данными.

Подробнее

Наши преимущества

Регистрация на сайте

DOM

WEB - уведомления (Notifications)

Методы, свойства и события

DOM - обработка событий (Events)

Типы событий

События, связанные с мышью (mouse events)

События клавиатуры (keyboard events)

События объекта frame (frame/window events)

События, связанные с формой (form events)

События drag/drop

Clipboard - события

Print - события

Media - события

Animation - события

Transition - события

Server-Sent - события

Другие события

Touch - события

Объект event

Константы

Свойства

Методы

Объект - MouseEvent

Объект - KeyboardEvent

HashChangeEvent - объект

PageTransitionEvent - объект

FocusEvent - объект

AnimationEvent - объект

TransitionEvent - объект

WheelEvent - объект

Регистрация обработчика событий

Удаление обработчика событий

Events bubbling, capturing

DOM - объекты CSS

Определения

Объект DOM - Style

Свойства объекта style

Объект styleSheet (CSSStyleSheet)

Свойства

Методы

Объект CSS Rules

Объект DOM - Элемент

Свойства и методы

Основные ипы узлов DOM (node type)

Обект - Window*

Window Object Methods

Объект DOM - document

Обект - Window*

Window Object Methods

DOM объекты браузера

Объект - navigator

Получить в цикле все свойства объекта navigator

Основные свойства объекта navigator

Методы объекта navigator

Посмотреть список плагинов браузера

Объект - location

Объект - location: свойства

Объект - location: методы

Получить все свойства location

Объект screen

Основные методы

Объект history

Основные свойства

Основные методы

jQuery - навигация по дереву объектов DOM*

Основы современных интернет-технологий

Введение

Протоколы TCP/IP

Разработка WEB сайтов

Основные этапы построения сайта

Программирование для WEB

Программирование на языке JavaScript

Как выполняется программа на JavaScript

Отладка программы на JavaScript

Основные возможности JavaScript

Синтаксис языка. Основы

Типы переменных

Декларация, область действия переменных, константы