Язык JavaScript

1. Язык JavaScript

JavaScript был создан в 1995 году в компании Netscape разработчиком Брендоном Айком
(Brendon Eich) в качестве языка сценариев в браузере Netscape Navigator 2. Первоначально язык
назывался LiveScript, но был переименован в JavaScript.
Первоначально JavaScript обладал довольно небольшими возможностями. Его цель состояла
лишь в том, чтобы добавить немного поведения на веб-страницу.
Появление HTML5 и технологии Node.js открыло перед JavaScript гораздо больше возможностей.
Также он применяется как язык серверной стороны. Раньше JavaScript применялся только на
веб-странице, а на стороне сервера надо было использовать такие технологии, как PHP, ASP.NET,
Ruby, Java, сейчас благодаря Node.js можно обрабатывать все запросы к серверу с помощью
JavaScript.
Увеличение мощности устройств и повсеместное распространение стандарта HTML5 привело к
тому, что для создания приложений для смартфонов, планшетов и настольных компьютеров мы
также можем использовать JavaScript.
Под руководством организации ECMA был разработан стандарт ECMAScript. В принципе сами
термины JavaScript и ECMAScript являются во многом взаимозаменяемыми и относятся к одному
и тому же языку.
JavaScript является интерпретируемым языком.

2. Первая программа на JavaScript

3. Пример простейшей программы

4. Основы синтаксиса JavaScript

Код JavaScript состоит из инструкций. Каждая инструкция представляет некоторое действие. И для отделения
инструкций друг от друга в javascript после инструкции ставится точка с запятой:

5. Другой вариант записи инструкций

6. Комментарии (однострочные)

7. Комментарии (многострочные)

8. Внешний JavaScript-файл

Создадим в каталоге app новый подкаталог js. В этом подкаталоге создадим новый текстовый файл, который назовем
myscript.js. Файлы с кодом javascript имеют расширение .js.
Структура программы на JavaScript
Подключение файла myscript.js на веб-страницу index.html:

9. Преимущества внешних JavaScript-файлов :

• Мы можем повторно использовать один и тот же код на нескольких веб-страницах
• Внешние javascript-файлы бразуер может кэшировать, за счет этого при следующем обращении к
странице браузер снижает нагрузку на сервер, а браузеру надо загрузить меньший объем
информации
• Код веб-страницы становится "чище". Он содержит только html-разметку, а код поведения
хранится во внешних файлах. В итоге можно отделить работу по созданию кода html-страницы от
написания кода javascript
• Поэтому, как правило, предпочтительнее использовать код javascript во внешних файлах, а не в
прямых вставках на веб-страницу с помощью элемента script.

10. Консоль браузера и console.log

При работе с JavaScript консоль браузера позволяет производить отладку программы. Чтобы открыть консоль в Google
Chrome, надо перейти в меню Дополнительные инструменты (More Tools) -> Инструменты разработчика (Developer
tools):

11. Консоль

После этого внизу браузера откроется консоль:
Выражения JavaScript можно вводить в консоль браузера:

12. console.log() из браузера в консоль

13. Переменные

Для создания переменных применяются операторы var и let:
Правило формирования имени. Каждая переменная имеет имя. Имя представляет собой произвольный набор
алфавитно-цифровых символов, знака подчеркивания (_) или знака доллара ($), причем названия не должны
начинаться с цифровых символов. То есть мы можем использовать в названии буквы, цифры, подчеркивание. Все
остальные символы запрещены.
Правильные названия переменных:
Неправильные названия переменных:
Список зарезервированных слов в JavaScript:
await, break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, export, extends, false, finally, for,
function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield

14. Присвоение переменной значения

15.

Изменение значения переменной

16. Константы

17. Типы данных

• String: представляет строку
• Number: представляет числовое значение
• BigInt: предназначен для представления очень больших целых чисел
• Boolean: представляет логическое значение true или false
• Undefined: представляет одно специальное значение - undefined и указывает, что
значение не установлено
• Null: представляет одно специальное значение - null и указывает на отсутствие
значения
• Symbol: представляет уникальное значение, которое часто применяется для обращения
к свойствам сложных объектов
• Object: представляет комплексный объект

18. Числовые данные

Number
Тип Number представляет числа в JavaScript, которые могут быть целыми или дробными:
• Целые числа, например, 35. Мы можем использовать как положительные, так и отрицательные числа. Диапазон
используемых чисел: от -253 до 253
• Дробные числа (числа с плавающей точкой), например, 3.5575. Опять же можно использовать как
положительные, так и отрицательные числа. Для чисел с плавающей точкой используется тот же диапазон: от 253 до 253
Тип BigInt
Тип BigInt добавлен в последних стандартах JavaScript для представления очень больших целых чисел, которые
выходят за пределы диапазона типа number. Для определения числа как значения типа BigInt в конце числа
добавляется суффикс n.

19. Логический тип. Строки

Тип Boolean
Тип Boolean представляет булевые или логические значения true (верно) и false (ложно):
Строки String
Тип String представляет строки. Для определения строк применяются кавычки, причем, можно использовать
как двойные, так одинарные, так и косые кавычки. Единственно ограничение: тип закрывающей кавычки
должен быть тот же, что и тип открывающей, то есть либо обе двойные, либо обе одинарные.

20. Особенности использования строк

Если внутри строки встречаются кавычки, то их нужно экранировать слешем.
Можно внутри строки использовать другой тип кавычек:
Использование косых кавычек позволяет применять интерполяцию (встраивание данных в строку).

21. null, undefined, object

undefined указывает, что значение не определено или не установлено. Например, когда инициализируется
переменная без присвоения ей начального значения, она представляет тип undefined:
Присвоение значение null означает, что у переменной отсутствует значение:
object
Тип object представляет сложный объект. Простейшее определение объекта представляют фигурные скобки:

22. Типизация

JavaScript является языком со слабой типизацией. Это значит, что переменные могут динамически менять тип.
Пример работы с разными типами:
Оператор typeof

23. Математические операции

сложение
вычитание
умножение
деление
деление по модулю
инкремент
возведение в степень
декремент

24. Операторы

название
обозначение
пример использования
сравнение
> , <, >=, <=
равенство
==, !=
let income = 100;
let strIncome = "100";
let result = income == strIncome;
console.log(result); //true
тождественность
===, !==
let income = 100;
let strIncome = "100";
let result = income === strIncome;
console.log(result); // false
P= 5>2;
P= 5<=2;
// true
// false
логическое И
&&
P= (5>2)&&(6<12) // true
P= (5>2)&&(6>12) // false
логическое ИЛИ
||
P= (5>2)||(6<12)
P= (5>2)||(6>12)
// true
// true
логическое НЕ
!
P= ! (5>2)
// false

25. Операторы присвоения

название
обозначение
пример использования
простое присвоение
=
P= 12;
// 12
присвоение со сложением
+=
P= 12;
P+= 4;
// 12
// 16
присвоение с вычитанием
-=
P= 12;
P-= 4;
// 12
// 8
присвоение с умножением
*=
P= 12;
P*= 4;
// 12
// 48
присвоение с делением
/=
P= 12;
P/= 4;
// 12
// 3
присвоение с возведением в
степень
**=
P= 12;
P**=2;
// 12
// 144
получение остатка от деления с
последующим присвоением
%=
P= 12;
P%=5;
// 12
// 2
присвоение с логическим И
&&=
let x = true, y = false;
x &&= y;
// false
присвоение с логическим ИЛИ
||=
let x = true, y = false;
x II= y;
// true

26. Побитовые операторы

название
обозначение
пример использования
побитовое И
&
a= 5;
b= 6;
p=a&b;
// двоичное представление: 101
// двоичное представление: 110
// двоичное представление: 100
// десятеричное представление: 4
побитовое ИЛИ
|
a= 5;
b= 6;
p=a|b;
// двоичное представление: 101
// двоичное представление: 110
// двоичное представление: 111
// десятеричное представление: 7
побитовое НЕ
~
a= 5;
p=~a;
// двоичное представление: 101
// двоичное представление: 010
// десятеричное представление: 2
исключающее ИЛИ
^
a= 5;
b= 6;
p=a^b;
// двоичное представление: 101
// двоичное представление: 110
// двоичное представление: 011
// десятеричное представление: 3

27. Условные операторы ?:, ??, =??

Тернарная операция
Оператор ?? (nullish coalescing operator) позволяет
проверить значение на null и undefined.
Оператор =??

28. Преобразования данных

При сложении преобразования в JavaScript производятся по принципу:
• Если оба операнда представляют числа, то происходит обычное арифметическое сложение
• Если предыдущее условие не выполняется, то оба операнда преобразуются в строки и производится
объединение строк.
parseInt() преобразовывает строку в целое число

29. NaN и isNaN

Если parseInt() не может выполнить преобразование,
то она возвращает значение NaN (Not a Number).
Функция isNaN() возвращает true, если
строка не является числом, иначе false:
Преобразование в другой системе исчисления

30. Преобразование в действительное число

parseFloat()
Функция String() позволяет получить строковое представление значения

31. УСЛОВНЫЕ КОНСТРУКЦИИ

if (условие) {
действия, если условие истинно
}
if (условие) {
действия, если условие истинно
}
else {
действия, если условие ложно
}
Проверка наличия значения

32. Многовариантный выбор

Альтернативные условия и else if
Конструкция switch..case

33. ЦИКЛ С ПАРАМЕТРОМ

for ([инициализация счетчика]; [условие]; [изменение счетчика])
{
// действия
}
Неполное объявления цикла:
Применение нескольких счетчиков в цикле

34. Условные циклы

ЦИКЛ С ПРЕДУСЛОВИЕМ
ЦИКЛ С ПОСТУСЛОВИЕМ
while (условное выражение)
{
инструкции
}
do {
break – выход из цикла
инструкции
}
while (условное выражение);
continue – пропуск итерации

35. Специализированные циклы

Цикл for..in предназначен для
перебора свойств объектов
for (свойство in объект) {
// действия
}
Цикл for...of предназначен для
перебора набора данных

36. Функции

function имя_функции([параметр [, ...]]){
инструкции
}
Анонимные функции
Динамическое
присвоение функций

37. Параметры функции

Передача нескольких параметров
Параметры и значения по умолчанию

38. Неопределенное количество параметров

Массив arguments
Переменное количество значений
Функция в качестве параметра

39. Результат функции

Оператор return
Возвращение функции из функции

40. Область видимости переменных

Глобальные переменные
Переменная var
Определение локальной области видимости
• { } создают блок кода (может быть безымянным, именнованным
(функция), условная или циклическая конструкция);
• var определяет локальные переменные уровня функции;
• let определяет локальные переменные уровня блока кода;
• const определяет константы уровня блока кода.

41. Переменная let и константы

переменные let, определенные внутри блока кода, можно использовать только внутри
этого блока кода
константы const, определенные внутри блока кода, можно использовать только внутри
этого блока кода

42. Скрытие переменных var

Дублирование переменной
Переопределение переменной

43. Скрытие let и const

Объявление let в разных блоках
Результат работы
Объявление const в разных блоках

44. Необъявленные переменные

Переменная стала глобальной
Переменная не инициализированна
Переменная объявлена локально

45. Рекурсивные функции

Вычисление факториала
Числа Фибоначи

46. Передача по значению и по ссылке

Передача параметров по значению:
строки, числа, логические
значения передаются в функцию
по значению
Передача параметров по ссылке:
Объекты и массивы передаются
по ссылке

47. ООП. Объекты

Создание нового объекта
Определение свойств объекта

48.

Методы объекта
Определение метода после инициализации
Упрощенное определение метода
Определение
метода при
инициализации

49. Синтаксис массивов

Обращение:
user.name
user["name"]

50. Динамическое определение имен свойств и методов

определение имени свойства вне объекта
объекты с произвольными названиями свойств
Удаление свойств и методов
(альтернатива delete user["name"];)

51. Вложенные объекты и массивы в объектах

Объект страна
Варианты обращений к свойствам объекта:
country.capital.name
country["capital"]["name"]
country.capital["name"]
Пример обращения к вложенным объектам

52. Копирование объектов

Создание ссылки на объект
Метод Object.assign
Метод Object.assign() принимает два параметра:
Object.assign(target, ...sources)
target - объект, в который надо скопировать свойства;
...sources - набор объектов, из которых надо скопировать свойства.
Возвращает метод объект target, в который скопированы свойства
из объектов sources.
Копирование из одного объекта
Копирование из
нескольких объектов

53. Копирование объекта с помощью spread-оператора

spread-оператор ... позволяет разложить объект на различные пары свойство-значение, которые
можно передать другому объекту
Копирование свойств-объектов
Если одним из свойств объекта выступает
вложенный объект, то при копировании как
spread-оператором, так и
методом Object.assign будут копироваться
ссылки на вложенные объекты
Сравнение объектов с помощью ==
производится на основе сравнения ссылок

54. Проверка наличия методов и свойств

Инициализация объекта
метод hasOwnProperty()
оператор in: "свойство|метод" in объект;
Проверка на значение undefined

55. Перебор методов и свойств

С помощью цикла for мы можем перебрать
объект как обычный массив
Результат выполнения алгоритма

56. Функции Object.entries, Object.keys, Object.values

Object.entries() возвращает массив пар
"название_свойства - значение"
Object.keys() позволяет получить массив названий всех свойств объекта
Object.values() возвращает массив, который содержит все
значения свойств объекта

57. Конструкторы объектов

конструктор тип Object
Типизированный конструктор как функция, в которой можно установить
свойства и методы. Для установки свойств и методов используется
ключевое слово this
Оператор instanceof позволяет проверить, с
помощью какого конструктора создан объект
Создание объекта с
ключевым словом new

58. Расширение объектов. Prototype

Каждая функция имеет свойство prototype, представляющее прототип функции.
Например, свойство User.prototype представляет прототип объектов User. Любые свойства и
методы, определенные в User.prototype, будут общими для всех объектов User.
Определение
конструктора
Добавление новых свойств и методов

59. Коллизия со значением свойств

Статическое свойство maxAge
Переопределение свойства maxAge

60. Инкапсуляция

Инкапсуляция представляет сокрытие
состояния объекта от прямого доступа извне
объявляется локальная переменная
_age вместо свойства age

61. Наследование

62. Пример применения наследования

Определение объектов
Результат работы программы

63. ООП. Классы

Создание класса с помощью ключевого слова class
Поведение класса и его методы
Свойства и поля класса

64. Конструктор класса

Конструктор определяется с помощью метода с
именем constructor.
Цель конструктора - инициализация объекта
некоторыми начальными данными

65. Приватные поля и методы

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

66. Наследование

Наследование позволяет одним классам получить функционал других классов и тем самым сократить
объем кода. Для наследования одного класса от другого применяется ключевое слово extends.
class Base{};
class Derived extends Base{};
Объявление классов
Применение дочерних классов

67. Определение конструктора в классе-наследнике и ключевое слово super

если дочерний класс определяет
конструктор, то в нем должен быть
вызван конструктор базового класса;
конструктор базового класса должен
вызываться до обращения к свойствам
текущего объекта через this

68. Работа с браузером и BOM

Browser Object Model и объект window
Объект window представляет собой окно веб-браузера, в котором размещаются веб-страницы.
window является глобальным объектом, поэтому при доступе к его свойствам и методам
необязательно использовать его имя.

69. Управление окнами

Метод alert() выводит окно с сообщением.
Метод confirm() отображает окно с сообщением, в котором пользователь должен подтвердить действие двух
кнопок OK и Отмена.

70.

Метод prompt() позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные,
возвращает введенное пользователем значение.
Если пользователь нажмет на кнопку отмены, то
метод возвратит значение null.

71. Открытие, закрытие и позиционирование окон

Метод open() открывает определенный ресурс в новом окне или вкладке браузера
Метод open() принимает ряд параметров:
open(url, target, windowFeatures)
url – передается путь к ресурсу;
target – тип нового окна (например, _self: страница
открывается в текущей вкладке; _blank: страница открывается
в новой вкладке или в отдельном окне);
windowFeatures - стилевые характеристик окна.
Метод close() закрывает окно. Метод moveTo() позволяет переместить окно на новую позицию.

72. История браузера. Объект history

Объект history предназначен для хранения истории посещений веб-страниц в браузере, доступен через объект
window. Все сведения о посещении пользователя хранятся в специальном стеке (history stack). С помощью
свойства length можно узнать количество веб-станиц в стеке.
Для перемещения по страницам в истории в объекте history определены методы back() (перемещение к
прошлой посмотренной странице) и forward() (перемещение к следующей просмотренной странице).
В объекте history определен специальный метод go(), который позволяет перемещаться вперед и назад по
истории на определенное число страниц.

73. Объект location

Объект location содержит информацию о расположении текущей веб-страницы: URL, информацию о
сервере, номер порта, протокол. Свойства объекта:
href: полная строка запроса к ресурсу;
pathname: путь к ресурсу;
origin: общая схема запроса;
protocol: протокол;
port: порт, используемый ресурсом;
host: хост;
hostname: название хоста;
hash: если строка запроса содержит символ решетки (#), то данное свойство возвращает ту часть строки,
которая идет после этого символа;
search: если строка запроса содержит знак вопроса (?), например, то данное свойство возвращает ту часть
строки, которая идет после знака вопроса.
Методы объекта:
assign(url): загружает ресурс, который находится по пути url;
reload(forcedReload): перезагружает текущую веб-страницу. Параметр forcedReload указывает, надо ли
использовать кэш браузера. Если параметр равен true, то кэш не используется;
replace(url): заменяет текущую веб-станицу другим ресурсом, который находится по пути url. В отличие от
метода assign, который также загружает веб-станицу с другого ресурса, метод replace не сохраняет
предыдущую веб-страницу в стеке истории переходов history, поэтому мы не сможем вызвать метод
history.back() для перехода к ней.

74. Объект navigator

Объект navigator содержит информацию о браузере и операционной системе, в которой браузер запущен.
Свойство userAgent хранит полную строку юзер-агента (например, Mozilla/5.0 (Windows NT 6.3; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36).
Ищется информация о браузере

75. Объект geolocation

Объект navigator хранит свойство geolocation, с помощью которого можно получить географическое положение
пользователя. Для получения положения используется метод getCurrentPosition(). Этот метод принимает два
параметра: функцию, которая срабатывает при удачном запуске, и функцию, которая срабатывает при ошибке
запроса геоданных.

76. Таймеры

Для одноразового выполнения действий через промежуток времени предназначена функция setTimeout(). Она
может принимать два параметра someFunction, period. Параметр period указывает на промежуток, через который
будет выполняться функция из параметра someFunction. А в качестве результата функция возвращает id таймера. Для
остановки таймера применяется функция clearTimeout().
Функции setInterval() и clearInterval() работают аналогично функциям setTimeout() и clearTimeout() с той
лишь разницей, что setInterval() постоянно выполняет определенную функцию через промежуток времени.
Метод requestAnimationFrame() действует аналогично setInterval() за тем исключением, что он больше
предназначен под анимацию, работу с графикой и имеет ряд оптимизаций, которые улучшают его
производительность.
Здесь через каждую секунду вызывается
функция updateTime(), которая обновляет
содержимое поля <div id="time" >,
устанавливая в качестве его кода html
текущее время.

77. Введение в DOM

Для JavaScript веб-страница доступна в виде объектной модели документа (document object model).
Простейшая страница
Древовидная модель страницы

78. Виды узлов

Element: html-элемент;
Attr: атрибут html-элемента;
Document: корневой узел html-документа;
DocumentType: DTD или тип схемы XML-документа;
DocumentFragment: место для временного хранения частей документа;
EntityReference: ссылка на сущность XML-документа;
ProcessingInstruction: инструкция обработки веб-страницы;
Comment: элемент комментария;
Text: текст элемента;
CDATASection: секция CDATA в документе XML;
Entity: необработанная сущность DTD;
Notation: нотация, объявленная в DTD.

79. Объект document. Поиск элементов

Объект document определен в глобальном объекте window.
Для поиска элементов на странице применяются
методы:
getElementById(value): выбирает элемент, у
которого атрибут id равен value. Если элемента
с таким идентификатором нет, то
возвращается null;
getElementsByTagName(value): выбирает все
элементы, у которых тег равен value;
getElementsByClassName(value): выбирает все
элементы, которые имеют класс value;
querySelector(value): выбирает первый
элемент, который соответствует css-селектору
value;
querySelectorAll(value): выбирает все
элементы, которые соответствуют cssселектору value.
С помощью вызова document.getElementById("header")
находится элемент, у которого id="header". А с помощью
свойства innerText получается текст найденного элемента.

80. Свойства объекта document

Получение всех ссылок на странице
documentElement: предоставляет доступ к
корневому элементу <html>;
body: предоставляет доступ к элементу <body>
на веб-странице;
images: содержит коллекцию всех объектов
изображений (элементов img);
links: содержит коллекцию ссылок - элементов
<a> и <area>, у которых определен атрибут href;
anchors: предоставляет доступ к коллекции
элементов <a>, у которых определен атрибут
name;
forms: содержит коллекцию всех форм на вебстранице.

81. Объект Node. Навигация по DOM

Каждый отдельный узел представлен объектом Node. Этот
объект предоставляет ряд свойств:
childNodes: содержит коллекцию дочерних узлов;
firstChild: возвращает первый дочерний узел текущего узла;
lastChild: возвращает последний дочерний узел текущего узла;
previousSibling: возвращает предыдущий элемент, который
находится на одном уровне с текущим;
nextSibling: возвращает следующий элемент, который
находится на одном уровне с текущим;
ownerDocument: возвращает корневой узел документа;
parentNode: возвращает элемент, который содержит текущий
узел;
nodeName: возвращает имя узла;
nodeType: возвращает тип узла в виде числа;
nodeValue: возвращает или устанавливает значение узла в
виде простого текста.
С помощью метода document.querySelector("div.article")
выбирается элемент div с классом article и совершается
проход по его дочерним узлам.

82. Создание, добавление и удаление элементов веб-страницы

Для создания элементов объект document имеет
следующие методы:
createElement (elementName): создает
элемент html, тег которого передается в
качестве параметра. Возвращает созданный
элемент;
createTextNode (text): создает и возвращает
текстовый узел. В качестве параметра
передается текст узла.
appendChild(newNode): добавляет новый узел
newNode в конец коллекции дочерних узлов;
insertBefore(newNode, referenceNode):
добавляет новый узел newNode перед узлом
referenceNode.
Создается элемент заголовка h2 и текстовый узел,
узел добавляется в элемент заголовка. Заголовок
добавляется в один из элементов веб-страницы.

83.

Для копирования уже имеющихся узлов у объекта Node можно использовать метод cloneNode(). В метод
cloneNode() в качестве параметра передается логическое значение: если передается true, то элемент будет
копироваться со всеми дочерними узлами; если передается false - то копируется без дочерних узлов.
Для удаления элемента вызывается метод removeChild() объекта Node.
Для замены элемента применяется метод replaceChild(newNode, oldNode) объекта Node. Этот метод в
качестве первого параметра принимает новый элемент, который заменяет старый элемент oldNode,
передаваемый в качестве второго параметра.