WEB start

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

hit counter

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

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

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


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

Дополнительные материалы

JavaScript. DOM

Обновлено: 29.08.2018 20:48

Программирование на языке 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 как форматы обмена данными.

Подробнее




Похожие статьи