JavaScript

Intro

Введение в JavaScript

JavaScript — мультипарадигменный язык программирования. Поддерживает стили:
- объектно-ориентированный
- императивный
- функциональный
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений.
Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
JavaScript является интерпретируемым языком

Синтаксис

Инструкции

alert("Вычисление выражения")
var a = 5 + 8
alert(a)

alert("Вычисление выражения"); var a = 5 + 8; alert(a);

alert("Вычисление выражения");
var a = 5 + 8;
alert(a);

Переменные и константы

Объявление переменных

var myIncome;
// другой вариант
let myIncome2;
// еще вариант
myIncome3;

Объявление переменных

a1 = 1;
console.log(a1);
var a2 = 2;
console.log(a2);
let a3 = 3;
console.log(a3);

1
2
3

Объявление переменных

c = 1;
console.log(c);
var c = 2;
console.log(c);
let c = 2; (0)
console.log(c);

Uncaught SyntaxError: redeclaration of var c

Названия переменных: correct

$commision
someVariable
product_Store
income2
myIncome_from_deposit

Названия переменных: wrong

222lol
@someVariable
my%percent

var for;

Инициализация

var income = 300;
income = 400;
console.log(income);

let price = 76;
price = 54;
console.log(price);

400
54

Константы

const rate = 10;

const rate = 10;
rate = 23; (0)

Uncaught TypeError: invalid assignment to const 'rate'

const rate; (0)

Uncaught SyntaxError: missing = in const declaration

Типы данных

Примитивные типы
- String: представляет строку
- Number: представляет числовое значение
- Boolean: представляет логическое значение true или false
- undefined: указывает, что значение не установлено
- null: указывает на неопределенное значение
object: объектный тип

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

Целые числа. Диапазон используемых чисел: от -2^53 до 2^53.
Дробные числа (числа с плавающей точкой). Для чисел с плавающей точкой используется тот же диапазон: от -2^53 до 2^53.

Строки

var helloWorld = "Привет мир";
var helloWorld2 = 'Привет мир';

var helloWorld = 'Привет мир"; (0)

Uncaught SyntaxError: '' literal not terminated before end of scrip

var companyName = "Бюро \"Рога и копыта\"";

var companyName1 = "Бюро 'Рога и копыта'";
var companyName2 = 'Бюро "Рога и копыта"';

Тип `Boolean`

var isAlive = true;
var isDead = false;

`undefined`

var isAlive;
console.log(isAlive);

undefined

`null` и `undefined`

null: означает, что переменная имеет некоторое неопределенное значение
undefined: означает, что переменная не имеет значения (фактически: отсутствие чего-либо)

`null` и `undefined`

var isAlive;
console.log(isAlive);
isAlive = null;
console.log(isAlive);
isAlive = undefined; // снова установим тип undefined
console.log(isAlive);

undefined
null
undefined

`object`

var user = {};

var user = {name: "Tom", age:24};
console.log(user.name);

Tom

Слабая типизация

var xNumber; // тип `undefined`
console.log(xNumber);
xNumber = 45; // тип `number`
console.log(xNumber);
xNumber = "45"; // тип `string`
console.log(xNumber);

undefined
45
45

Слабая типизация

var xNumber = 45; // тип `number`
var yNumber = xNumber + 5;
console.log(yNumber);

xNumber = "45"; // тип `string`
var zNumber = xNumber + 5
console.log(zNumber);

50
455

Операторы

Оператор `typeof`

var name = "Tom";
console.log(typeof name);
var income = 45.8;
console.log(typeof income);
var isEnabled = true;
console.log(typeof isEnabled);
var undefVariable;
console.log(typeof undefVariable);

string
number
boolean
undefined

Математические операторы

+
-
*
/
%
++
--

Операции присваивания

=
+=
-=
*=
/=
%=

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

== - оператор равенства (значения)
=== - оператор тождественности (типы и значения)
!=
!==
<
>
<=
>=

Логические операции

&&
||
!

Конкатенация

var name = "Том";
var surname = "Сойер"
var fullname = name + " " + surname;
console.log(fullname);

Том Сойер

Конкатенация

var name = "Том";
var fullname = name + 256;
console.log(fullname);

Том256

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

var number1 = "46";
var number2 = "4";
var result = number1 + number2;
console.log(result);

`parseInt()`

var number1 = "46";
var number2 = "4";
var result = parseInt(number1) + parseInt(number2);
console.log(result);

`parseFloat()`

var number1 = "46.07";
var number2 = "4.98";
var result = parseFloat(number1) + parseFloat(number2);
console.log(result);

51.05

Исключительные случаи

var num1 = "123hello";
var num2 = parseInt(num1);
console.log(num2);

`NaN` и `isNaN()`

var num1 = "javascript";
var num2 = "22";
var result = isNaN(num1);
console.log(result);

result = isNaN(num2);
console.log(result);

true
false

Другие системы счисления

var num1 = "110";
var num2 = parseInt(num1, 2);
console.log(num2);

Массивы

var myArray = new Array();

var myArray = [];

var people = ["Tom", "Alice", "Sam"];
console.log(people);

[ "Tom", "Alice", "Sam" ]

Массивы

var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);

undefined

Массивы

var people = ["Tom", "Alice", "Sam"];
console.log(people[7]);
people[7] = "Bob";
console.log(people[7]);

undefined
Bob

Массивы

var objects = ["Tom", 12, true, 3.14, false];
console.log(objects);

[ "Tom", 12, true, 3.14, false ]

spread-оператор

let numbers = [1, 2, 3, 4];
console.log(...numbers);
console.log(numbers);

1 2 3 4
[1, 2, 3, 4]

Многомерные массивы

var numbers1 = [0, 1, 2, 3, 4, 5 ]; // одномерный массив
var numbers2 = [[0, 1, 2], [3, 4, 5]]; // двумерный массив

Условные конструкции

Проверка на наличие значения

var myVar = 89;
if (myVar) {
    // действия
}

Проверка на `undefined`

if (typeof myVar != "undefined") {
    // действия
}

`true` или `false`

`true` или `false`?

(undefined) ? true : false

false

`true` или `false`?

(null) ? true : false

false

`true` или `false`?

(true) ? true : false

true

(false) ? true : false

false

`true` или `false`?

(0) ? true : false

false

(NaN) ? true : false

false

`true` или `false`?

('') ? true : false

false

`true` или `false`?

(new Boolean(false)) ? true : false

true

Циклы

for
while
do..while
for..in - предназначен для перебора коллекций, например, массивов
for..of - предназначен для перебора массивов и объектов

Функции

function имя_функции([параметр [, ...]]) {
    // Инструкции
}

function display() {
    document.write("функция в JavaScript");
}

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        function display() {
            document.write("функция в JavaScript");
        }
        display();
    </script>
</body>
</html>

Анонимные функции

var display = function() { // определение функции
    document.write("функция в JavaScript");
}
display();

функция в JavaScript

function goodMorning() {
    document.write("Доброе утро");
}
function goodEvening() {
    document.write("Добрый вечер");
}
var message = goodMorning;
message();
message = goodEvening;
message();

Доброе утро
Добрый вечер

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

function display(x) { // определение функции
    var z = x * x;
    console.log(x + " в квадрате равно " + z);
}
display(5); // вызов функции

5 в квадрате равно 25

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

function sum(a, b, c) {
    let d = a + b + c;
    console.log(d);
}

sum(1, 2, 3);
let nums = [4, 5, 6];
sum(...nums);

6
15

Необязательные параметры

function display(x, y) {
    if(x === undefined) x = 8;
    if(y === undefined) y = 5;
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);

40
30
24

Необязательные параметры

function display(x = 5, y = 10) {
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);

50
60
24

Необязательные параметры

function display(x = 5, y = 10 + x) {
    let z = x * y;
    console.log(z);
}
display();
display(6);
display(6, 4);

75
96
24

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

function display(season, ...temps) {
    console.log(season);
    for (index in temps) {
        console.log(temps[index]);
    }
}
display("Весна", -2, -3, 4, 2, 5);
display("Лето", 20, 23, 31);

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

Весна
-2
-3
4
2
5
Лето
20
23
31;

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

var y = 6;
var z = square(y);
console.log(y + " в квадрате равно " + z);

function square(x) {
    return x * x;
}

6 в квадрате равно 36

Функции в качестве параметров

function sum(x, y) {
    return x + y;
}

function subtract(x, y) {
    return x - y;
}

function operation(x, y, func) {
    var result = func(x, y);
    console.log(result);
}

console.log("Sum");
operation(10, 6, sum);
console.log("Subtract");
operation(10, 6, subtract);

Sum
16
Subtract
4

Возвращение функции из функции

function menu(n) {
    if (n == 1)
        return function(x, y) { return x + y;}
    else if(n == 2)
        return function(x, y) { return x - y;}
    else if(n == 3)
        return function(x, y) { return x * y;}
    return undefined;
}

for (var i=1; i < 5; i++) {
    var action = menu(i);
    if (action !== undefined) {
        var result = action(5, 4);
        console.log(result);
    }
}

9
1
20

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

global
local

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

var x = 5; (1)
let d = 8; (1)
function displaySquare() {
    var z = x * d; (2)
    console.log(z);
}
displaySquare()

Сокрытие переменных

var a = 89;
function displaySquare() {
    var a = 10;
    console.log(a);
}
displaySquare();

`let`

let b = 10;
function displayZ() {
    let b = 20;
    {
        let b = 30;
        console.log("Block:", b);
    }
    console.log("Function:", b);
}

displayZ();
console.log("Global:", b);

Block: 30
Function: 20
Global: 10

`var`

var c = 10;
function displaySquare() {
    var c = 20;
    {
        var c = 30;
        console.log("Block:", c);
    }
    console.log("Function:", c);
}
displaySquare()
console.log("Global:", c)

Block: 30
Function: 30
Global: 10

`const`

const z = 10;
function displayZ() {
    const z = 20;
    {
        const z = 30;
        console.log("Block:", z);
    }
    console.log("Function:", z);
}

displayZ();
console.log("Global:", z);

Block: 30
Function: 20
Global: 10

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

function bar() {
    foo = "25";
}
bar();
console.log(foo);

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

function bar() {
    var foo = "25";
}
bar();
console.log(foo);

Uncaught ReferenceError: foo is not defined

strict mode

"use strict";
function bar() {
    foo = "25";
}

bar();
console.log(foo);

Uncaught ReferenceError: assignment to undeclared variable foo

Замыкания

Функции IIFE

Паттерн Модуль

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

Переопределение функций

Hoisting

console.log(foo);

Uncaught ReferenceError: foo is not defined

Hoisting

console.log(foo);
var foo = "Tom";

undefined

Hoisting

var c = a * b;
var a = 7;
var b = 3;
console.log(c);

NaN

Hoisting

display();

function display() {
    console.log("Hello Hoisting");
}

Hello Hoisting

Hoisting

display();

var display = function () {
    console.log("Hello Hoisting");
}

TypeError: display is not a function

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

Стрелочные функции

ООП

Строки

Браузерный компонент `window`

`window`

Window Objects

`window`

BOM visualization

BOM

Метод `alert()`

alert("hello world");

Метод `confirm()`

var result = confirm("Завершить выполнение программы?");
if (result === true) {
    document.write("Работа программы завершена");
} else {
    document.write("Программа продолжает работать");
}

Метод `prompt()`

var age = prompt("Введите свой возраст:");
document.write("Вам " + age + " лет");

Метод `open()`

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');

Метод `close()`

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');

function closeWindow() {
    popup.close();
}

setTimeout(closeWindow, 10000);

Метод `moveTo()`

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
popup.moveTo(50, 50);

Метод `resizeTo()`

var popup = window.open('https://rakovets.by', 'Rakovets', 'width=400, height=400, resizable=yes');
popup.resizeTo(500, 350); // 500 - ширина и 350 - высота

Таймеры

Функция `setTimeout()`

var timerId = setTimeout(someFunction, period);

function timerFunction() {
    document.write("выполнение функции setTimeout");
}
setTimeout(timerFunction, 3000);

function timerFunction() {
    document.write("выполнение функции setTimeout");
}
var timerId = setTimeout(timerFunction, 3000);
clearTimeout(timerId);

Функция `setInterval()`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="time"></div>
    <script>
        function updateTime() {
            document.getElementById("time").innerHTML = new Date().toTimeString();
        }
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

Функция `requestAnimationFrame()`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #rect {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: #50c878;
        }
    </style>
</head>
<body>
    <div id="rect"></div>
    <script>
        var square = document.getElementById("rect");
        var angle = 0;
        function rotate() {
            angle = (angle + 2) % 360;
            square.style.transform = "rotate(" + angle + "deg)";
            window.requestAnimationFrame(rotate);
        }
        var id = window.requestAnimationFrame(rotate);
    </script>
</body>
</html>

Функция `requestAnimationFrame()`

window.cancelAnimationFrame(id);

DOM

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h2>Page Header</h2>
    <div>
        <h3>Block Header</h3>
        <p>Text</p>
    </div>
</body>
</html>

DOM

Виды узлов (Node)

Element: HTML-элемент
Attr: атрибут HTML-элемента
Document: корневой узел HTML-документа
DocumentType: DTD или тип схемы XML-документа
DocumentFragment: место для временного хранения частей документа
EntityReference: ссылка на сущность XML-документа

Виды узлов (Node)

ProcessingInstruction: инструкция обработки веб-страницы
Comment: элемент комментария
Text: текст элемента
CDATASection: секция CDATA в документе XML
Entity: необработанная сущность DTD
Notation: нотация, объявленная в DTD

Методы для поиска элементов

getElementById(value)
getElementsByTagName(value)
getElementsByClassName(value)
querySelector(value)
querySelectorAll(value)

Поиск элементов

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <h3 id="header">Block Header</h3>
        <p>Text</p>
    </div>
    <script>
        var headerElement = document.getElementById("header");
        document.write("Текст заголовка: " + headerElement.innerText);
    </script>
</body>
</html>

Поиск элементов

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <h3>Заголовок</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        var pElements = document.getElementsByTagName("p");

        for (var i = 0; i < pElements.length; i++) {
            document.write("Текст параграфа: " + pElements[i].innerText + "<br/>");
        }
    </script>
</body>
</html>

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

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

Объект `Node`

DOM element types

Объект `Node`

childNodes: содержит коллекцию дочерних узлов
firstChild: возвращает первый дочерний узел текущего узла
lastChild: возвращает последний дочерний узел текущего узла
previousSibling: возвращает предыдущий элемент, который находится на одном уровне с текущим
nextSibling: возвращает следующий элемент, который находится на одном уровне с текущим

Объект `Node`

ownerDocument: возвращает корневой узел документа
parentNode: возвращает элемент, который содержит текущий узел
nodeName: возвращает имя узла
nodeType: возвращает тип узла в виде числа. 1 - элемент, 2 - атрибут, 3 - текст
nodeValue: возвращает или устанавливает значение узла в виде простого текста

Объект `Node`

DOM node relationships

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="article">
        <h3>Заголовок статьи</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        var articleDiv = document.querySelector("div.article");
        // создаем элемент
        var elem = document.createElement("h2");
        // создаем для него текст
        var elemText = document.createTextNode("Привет мир");
        // добавляем текст в элемент в качестве дочернего элемента
        elem.appendChild(elemText);
        // добавляем элемент в блок div
        articleDiv.appendChild(elem);
    </script>
</body>
</html>

Другие методы

node.cloneNode()
node.removeChild(removalNode)`
node.replaceChild(newNode, oldNode)

Объект `Element`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="article">
        <h3>Заголовок статьи</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        function getChildren(elem) {
            for(var i in elem.childNodes) {
                if(elem.childNodes[i].nodeType===1) {
                    console.log(elem.childNodes[i].tagName);
                    getChildren(elem.childNodes[i]);
                }
            }
        }
        var root = document.documentElement;
        console.log(root.tagName);
        getChildren(root);
    </script>
</body>
</html>

Свойства `innerText` и `innerHTML`

var pElement = document.querySelectorAll("div.article p")[0];
pElement.innerText = "hello";
pElement.textContent = "hello";

var articleDiv = document.querySelector("div.article");
articleDiv.innerHTML ="<h2>Hello World!!!</h2><p>bla bla bla</p>";

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

getAttribute(attr): возвращает значение атрибута attr
setAttribute(attr, value): устанавливает для атрибута attr значение value. Если атрибута нет, то он добавляется
removeAttribute(attr): удаляет атрибут attr и его значение

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div class="article" style="color:red;">
        <h3>Заголовок статьи</h3>
        <p>Первый абзац</p>
        <p>Второй абзац</p>
    </div>
    <script>
        var articleDiv = document.querySelector("div.article");
        // получаем атрибут style
        var styleValue = articleDiv.getAttribute("style");
        console.log("До изменения атрибута: " + styleValue);
        // удаляем атрибут
        articleDiv.removeAttribute("style");
        // добавляем заново атрибут style
        articleDiv.setAttribute("style", "color:blue;");
        styleValue = articleDiv.getAttribute("style");
        console.log("После изменения атрибута: " + styleValue);
    </script>
</body>
</html>

Размеры и позиция элементов

offsetWidth
offsetHeight
clientWidth
clientHeight

Events

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

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="rect" onclick="displayMessage()" style="width:50px;height:50px;background-color:blue;">
    </div>
    <script>
        function displayMessage() {
            alert('Нажато');
        }
    </script>
</body>
</html>

Передача параметров обработчику события

<a href="page1.html" onclick="handler(this)">Страница 1</a>
<script>
    function handler(obj) {
        alert(obj.href);
    }
</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #rect {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="rect" onclick="handler(event)"></div>
    <script>
        function handler(e) {
            alert(e.type);
        }
    </script>
</body>
</html>

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

Встроенные обработчики

<div id="rect" onclick="handler(event)"></div>

Минусы

Код HTML смешивается с кодом JavaScript, в связи с чем становится труднее разрабатывать, отлаживать и поддерживать приложение.
Обработчики событий можно задать только для уже созданных на web-странице элементов. Динамически создаваемые элементы в этом случае лишаются возможности обработки событий.
К элементу для одного события может быть прикреплен только один обработчик.
Нельзя удалить обработчик без изменения кода

Свойства обработчиков событий

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #rect {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="rect">
    </div>
    <script>
        function handler(e) {
            alert(e.type);
        }
        document.getElementById("rect").onclick = handler;
    </script>
</body>
</html>

Слушатели событий

EventTarget.addEventListener() для добавления слушателя
EventTarget.removeEventListener() для удаления слушателя

Слушатели событий

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        #rect {
            width: 50px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="rect">
    </div>
    <script>
        var rect = document.getElementById("rect");
        rect.addEventListener("click", function(e) {
            alert(e.type);
        });
    </script>
</body>
</html>

Плюсы

var clicks = 0;

function handlerOne(e) {
    alert(e.type);
}

function handlerTwo(e) {
    clicks++;
    var newNode = document.createElement("p");
    newNode.textContent = "произошло нажатие " + clicks;
    document.body.appendChild(newNode);
}

var rect = document.getElementById("rect");
// прикрепляем первый обработчик
rect.addEventListener("click", handlerOne);
// прикрепляем второй обработчик
rect.addEventListener("click", handlerTwo);

Объект `Event`

bubbles: возвращает true, если событие является восходящим. Например, если событие возникло на вложенном элементе, то оно может быть обработано на родительском элементе.
cancelable: возвращает true, если можно отменить стандартную обработку события.
currentTarget: определяет элемент, к которому прикреплен обработчик события.

Объект `Event`

defaultPrevented: возвращает true, если был вызван у объекта Event метод preventDefault().
eventPhase: определяет стадию обработки события.
target: указывает на элемент, на котором было вызвано событие.
timeStamp: хранит время возникновения события.
type: указывает на имя события.

Распространение событий

Восходящие: событие распространяется вверх по дереву DOM от дочерних узлов к родительским.
Нисходящие: событие распространяется вниз по дереву DOM от родительских узлов к дочерним, пока не достигнет того элемента, на котором это событие и возникло.

Распространение событий

Eventflow

Остановка восходящего

var redRect = document.getElementById("redRect");
redRect.addEventListener("click", function(e){
    console.log("Событие на redRect");
    e.stopPropagation();
});

Включение нисходящего

var redRect = document.getElementById("redRect");
redRect.addEventListener("click", function() {console.log("Событие на redRect");}, true);
var blueRect = document.getElementById("blueRect");
blueRect.addEventListener("click", function() {console.log("Событие на blueRect");}, true);
document.body.addEventListener("click", function() {console.log("Событие на body");}, true);

JavaScript

Intro

Введение в JavaScript

Синтаксис

Инструкции

Комментарии

Переменные и константы

Объявление переменных

Объявление переменных

Объявление переменных

Названия переменных: correct

Названия переменных: wrong

Инициализация

Константы

Типы данных

Типы данных

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

Строки

Тип Boolean

undefined

null и undefined

null и undefined

object

Слабая типизация

Слабая типизация

Операторы

Оператор typeof

Математические операторы

Операции присваивания

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

Логические операции

Конкатенация

Конкатенация

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

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

parseInt()

parseFloat()

Исключительные случаи

NaN и isNaN()

Другие системы счисления

Массивы

Массивы

Массивы

Массивы

Массивы

spread-оператор

Многомерные массивы

Условные конструкции

Проверка на наличие значения

Проверка на undefined

true или false

true или false?

true или false?

true или false?

true или false?

true или false?

true или false?

Циклы

Циклы

Функции

Функции

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

Анонимные функции

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

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

Необязательные параметры

Необязательные параметры

Необязательные параметры

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

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

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

Функции в качестве параметров

Возвращение функции из функции

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

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

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

Сокрытие переменных

let

var

const

Тип `Boolean`

`undefined`

`null` и `undefined`

`null` и `undefined`

`object`

Оператор `typeof`

`parseInt()`

`parseFloat()`

`NaN` и `isNaN()`

Проверка на `undefined`

`true` или `false`

`true` или `false`?

`true` или `false`?

`true` или `false`?

`true` или `false`?

`true` или `false`?

`true` или `false`?

`let`

`var`

`const`

Браузерный компонент `window`

`window`

`window`

Метод `alert()`

Метод `confirm()`

Метод `prompt()`

Метод `open()`

Метод `close()`

Метод `moveTo()`

Метод `resizeTo()`

Функция `setTimeout()`

Функция `setInterval()`

Функция `requestAnimationFrame()`

Функция `requestAnimationFrame()`

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

Объект `Node`

Объект `Node`

Объект `Node`

Объект `Node`

Объект `Element`

Свойства `innerText` и `innerHTML`

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

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

Объект `Event`

Объект `Event`

Объект `Event`