WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

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

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


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

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)

    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

    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>

    <script>

    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>

    <DIV id="demo"></DIV>

    <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 объекты браузера

    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, функции, методы, метки меток или любые имена объектов.

    abstractelseinstanceofswitch
    booleanenumintsynchronized
    breakexportinterfacethis
    byteextendslongthrow
    casefalsenativethrows
    catchfinalnewtransient
    charfinallynulltrue
    classfloatpackagetry
    constforprivatetypeof
    continuefunctionprotectedvar
    debuggergotopublicvoid
    defaultifreturnvolatile
    deleteimplementsshortwhile
    doimportstaticwith
    doubleinsuper

    Оператор 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, которые чаще всего используются для поиска элементов на странице:

    • getElementById()
    • getElementsByClassName()
    • getElementsByName()
    • getElementsByTagName()
    • querySelector()
    • querySelectorAll()



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

    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)- селектор стиля плюс блок стилей.

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

    Объект DOM - Style

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

    Объект styleSheet (CSSStyleSheet)

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


     Подробнее 


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

    • Navigator
    • Screen
    • History
    • Location


     Подробнее 



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

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

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

     Подробнее 


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

    Объект Date 

     Подробнее 


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

    setTimeout(function, milliseconds)

    setInterval(function, milliseconds)


    Cookies


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

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

    Подробнее


    Объект Math

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

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

    Подробнее



    AJAX

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

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

    Подробнее