JavaScript: От Основ до Full-Stack Разработки

console.log(colors); // Выведет: ["красный", "желтый", "синий"]

Добавление и удаление элементов (основные методы):

Массивы в JavaScript динамичны, то есть их размер может изменяться. Для этого существуют специальные методы:

push(element): Добавляет один или несколько элементов в конец массива. Возвращает новую длину массива.javascriptlet numbers = [1, 2];

numbers.push(3); // numbers теперь: [1, 2, 3]

numbers.push(4, 5); // numbers теперь: [1, 2, 3, 4, 5]

let newLength = numbers.push(6);

console.log(numbers); // [1, 2, 3, 4, 5, 6]

console.log(newLength); // 6

pop(): Удаляет последний элемент из массива и возвращает его.javascriptlet fruits = ["яблоко", "банан", "апельсин"];

let lastFruit = fruits.pop();

console.log(fruits); // ["яблоко", "банан"]

console.log(lastFruit); // "апельсин"

unshift(element): Добавляет один или несколько элементов в начало массива. Возвращает новую длину массива.javascriptlet numbers = [2, 3];

numbers.unshift(1); // numbers теперь: [1, 2, 3]

numbers.unshift(0, -1); // numbers теперь: [-1, 0, 1, 2, 3]

let newLength = numbers.unshift(-2);

console.log(numbers); // [-2, -1, 0, 1, 2, 3]

console.log(newLength); // 6

shift(): Удаляет первый элемент из массива и возвращает его.javascriptlet fruits = ["яблоко", "банан", "апельсин"];

let firstFruit = fruits.shift();

console.log(fruits); // ["банан", "апельсин"]

console.log(firstFruit); // "яблоко"

Методы для работы с частью массива:

splice(startIndex, deleteCount, item1, item2, …): Очень мощный метод, который может удалять, добавлять или заменять элементы в массиве.startIndex: Индекс, с которого начинать изменения.

deleteCount: Количество элементов для удаления (0 – если нужно только добавить).

item1, item2, …: Элементы для добавления (если они есть).

Возвращает массив удаленных элементов (если они были).

javascriptlet numbers = [1, 2, 3, 4, 5];

// Удалить 2 элемента, начиная с индекса 2

let removed = numbers.splice(2, 2);

console.log(numbers); // [1, 2, 5] (удалены 3 и 4)

console.log(removed); // [3, 4]

// Вставить элементы, не удаляя ничего, начиная с индекса 1

numbers.splice(1, 0, "a", "b");

console.log(numbers); // [1, "a", "b", 2, 5]

// Заменить 1 элемент, начиная с индекса 3, на новый элемент

numbers.splice(3, 1, "X");

console.log(numbers); // [1, "a", "b", "X", 5]

slice(startIndex, endIndex): Создает новый массив, содержащий копию части исходного массива. Не изменяет исходный массив.startIndex: Индекс, с которого начинать копирование.

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

javascriptlet letters = ["a", "b", "c", "d", "e"];

// Скопировать элементы с индекса 1 до индекса 4 (не включая 4)

let subset1 = letters.slice(1, 4);

console.log(subset1); // ["b", "c", "d"]

console.log(letters); // ["a", "b", "c", "d", "e"] (исходный массив не изменился)

// Скопировать элементы с индекса 2 до конца

let subset2 = letters.slice(2);

console.log(subset2); // ["c", "d", "e"]

// Использование отрицательных индексов (отсчет с конца)

let lastTwo = letters.slice(-2); // Два последних элемента

console.log(lastTwo); // ["d", "e"]

Другие полезные методы массивов:

concat(array1, array2, …): Объединяет два или более массивов в новый массив.javascriptlet arr1 = [1, 2];

let arr2 = [3, 4];

let combined = arr1.concat(arr2, [5, 6]);

console.log(combined); // [1, 2, 3, 4, 5, 6]

console.log(arr1); // [1, 2] (исходный массив не изменился)

Синтаксис с spread-оператором (…) (let combined = […arr1, …arr2];) часто предпочтительнее для объединения массивов, так как он более современный и гибкий.

join(separator): Объединяет все элементы массива в одну строку, используя указанный separator. Если separator не указан, используется запятая.javascriptlet words = ["Hello", "world", "!"];

let sentence = words.join(" "); // Объединяем через пробел

console.log(sentence); // "Hello world !"

let numbersString = [1, 2, 3].join("-");

console.log(numbersString); // "1-2-3"

includes(element): Проверяет, есть ли элемент в массиве. Возвращает true или false.javascriptlet numbers = [1, 2, 3, 4];

console.log(numbers.includes(3)); // true

console.log(numbers.includes(5)); // false

indexOf(element): Возвращает индекс первого вхождения элемента в массив. Если элемент не найден, возвращает -1.javascriptlet fruits = ["apple", "banana", "apple", "orange"];

console.log(fruits.indexOf("banana")); // 1

console.log(fruits.indexOf("apple")); // 0 (индекс первого вхождения)

console.log(fruits.indexOf("grape")); // -1

reverse(): Инвертирует порядок элементов в массиве на месте (изменяет исходный массив) и возвращает ссылку на измененный массив.javascriptlet letters = ["a", "b", "c"];

letters.reverse();

console.log(letters); // ["c", "b", "a"]

Итерация по массивам (уже видели for…of, но есть и другие способы):

С помощью for цикла:javascriptlet animals = ["cat", "dog", "elephant"];

for (let i = 0; i < animals.length; i++) {

console.log(`Animal at index ${i}: ${animals[i]}`);

}

forEach(callbackFunction): Выполняет функцию callbackFunction один раз для каждого элемента массива. callbackFunction получает три аргумента: element, index, array.javascriptlet fruits = ["apple", "banana", "cherry"];

fruits.forEach(function(fruit, index, arr) {

console.log(`Fruit at index ${index}: ${fruit}`);

// console.log(arr); // Можно получить доступ к самому массиву

});

// С использованием стрелочной функции:

fruits.forEach((fruit, index) => {

console.log(`Fruit #${index + 1}: ${fruit}`);

});

6.2. Объекты (Objects): Хранение данных в формате “ключ-значение”

Термин: Объект (Object) – это неупорядоченная коллекция свойств. Каждое свойство состоит из ключа (key) и значения (value), которые связаны парой двоеточия :. Ключи обычно являются строками (или символами), а значения могут быть любого типа данных (включая другие объекты или массивы).

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

Создание объекта:

Объекты создаются с помощью фигурных скобок {}.

javascript

// Пустой объект

let emptyObject = {};

// Объект "человек"

let person = {

name: "Алиса", // Свойство: ключ "name", значение "Алиса"

age: 30, // Свойство: ключ "age", значение 30

isStudent: false, // Свойство: ключ "isStudent", значение false

city: "Москва", // Свойство: ключ "city", значение "Москва"

hobbies: ["чтение", "путешествия"] // Свойство: значение – массив

};

// Объект "автомобиль"

let car = {

brand: "Toyota",

model: "Camry",

year: 2022,

// Свойство, значение которого – другой объект

engine: {

type: "Petrol",

volume: 2.5

},

// Свойство, значение которого – функция (метод объекта)

start: function() {

console.log("Двигатель запущен!");

}

};

Доступ к свойствам объекта:

Есть два основных способа:

Точечная нотация (Dot Notation): объект.ключ (наиболее распространенный и предпочтительный способ).javascriptconsole.log(person.name); // Выведет: Алиса

console.log(person.age); // Выведет: 30

console.log(car.brand); // Выведет: Toyota

console.log(car.engine.type); // Доступ к свойству вложенного объекта. Выведет: Petrol

Скобочная нотация (Bracket Notation): объект[ключ] (обязательна, если ключ – переменная или содержит специальные символы/пробелы).javascriptconsole.log(person["name"]); // Выведет: Алиса

console.log(person["city"]); // Выведет: Москва

// Пример, когда скобочная нотация обязательна:

let propertyName = "age";

console.log(person[propertyName]); // Работает! Получим 30.

// person.propertyName выдало бы ошибку или undefined,

// так как искалось бы свойство с ключом "propertyName".

// Если ключ содержит пробелы или спецсимволы, скобочная нотация необходима:

let anotherPerson = {

"first name": "Иван",

"last-name": "Петров"

};

console.log(anotherPerson["first name"]); // "Иван"

// console.log(anotherPerson.first name); // Ошибка!

Изменение и добавление свойств:

Свойства объекта можно изменять или добавлять новые, используя точечную или скобочную нотацию.

javascript

let user = { name: "Петр" };

// Изменение свойства

user.name = "Петр Иванов";

console.log(user.name); // Петр Иванов

// Добавление нового свойства

user.age = 25;

user["isAdmin"] = false; // Добавление через скобочную нотацию

console.log(user); // { name: "Петр Иванов", age: 25, isAdmin: false }

Удаление свойств:

Используется оператор delete.

javascript

let product = { id: 1, name: "Ноутбук", price: 1000 };

delete product.price;

console.log(product); // { id: 1, name: "Ноутбук" }

Методы объектов (функции внутри объектов):

Функции, которые являются свойствами объекта, называются методами.

javascript

let calculator = {

a: 10,

b: 5,

add: function() { // Метод add

return this.a + this.b; // this ссылается на объект calculator

},

subtract: function() { // Метод subtract

return this.a – this.b;

}

};

console.log(calculator.add()); // Выведет: 15

console.log(calculator.subtract()); // Выведет: 5

// Можно вызывать методы объекта:

calculator.result = calculator.add();

console.log(calculator.result); // 15

Термин: this – контекст выполнения. В методах объекта this обычно ссылается на сам объект, который вызывает этот метод. Понимание this – одна из ключевых (и иногда непростых) тем в JavaScript.

Перебор свойств объекта:

for…in цикл: Как мы уже видели, перебирает ключи объекта.javascriptlet book = {

title: "Война и мир",

author: "Лев Толстой",

year: 1869

};

for (let key in book) {

console.log(`${key}: ${book[key]}`);

}

// Вывод:

// title: Война и мир

// author: Лев Толстой

// year: 1869

Object.keys(obj): Возвращает массив ключей объекта. Далее можно использовать forEach или for…of.javascriptlet car = { brand: "BMW", model: "X5", year: 2023 };

let carKeys = Object.keys(car); // ["brand", "model", "year"]

console.log(carKeys);

carKeys.forEach(key => {

console.log(`${key}: ${car[key]}`);

});

Object.values(obj): Возвращает массив значений объекта.javascriptlet car = { brand: "BMW", model: "X5", year: 2023 };

let carValues = Object.values(car); // ["BMW", "X5", 2023]

console.log(carValues);

carValues.forEach(value => {

console.log(value);

});

Object.entries(obj): Возвращает массив пар [ключ, значение].javascriptlet car = { brand: "BMW", model: "X5", year: 2023 };

let carEntries = Object.entries(car);

// carEntries будет: [ ["brand", "BMW"], ["model", "X5"], ["year", 2023] ]

console.log(carEntries);

carEntries.forEach(entry => {

let key = entry[0];

let value = entry[1];

console.log(`${key}: ${value}`);

});

// С деструктуризацией (очень удобно!):

carEntries.forEach(([key, value]) => {

console.log(`${key} –> ${value}`);

});

6.3. Объект Math

Термин: Объект Math – это встроенный объект JavaScript, содержащий математические константы и функции для выполнения базовых и сложных математических вычислений. Его свойства и методы доступны напрямую, без необходимости его создавать.

Популярные свойства:

Math.PI: Число Пи (≈ 3.14159)

Math.E: Основание натурального логарифма (≈ 2.71828)

Популярные методы:

Math.round(x): Округляет число x до ближайшего целого.javascriptconsole.log(Math.round(4.7)); // 5

console.log(Math.round(4.4)); // 4

console.log(Math.round(4.5)); // 5

Math.floor(x): Округляет число x вниз до ближайшего целого.javascriptconsole.log(Math.floor(4.7)); // 4

console.log(Math.floor(4.4)); // 4

console.log(Math.floor(-4.4)); // -5 (округляет вниз, т.е. к меньшему числу)

Math.ceil(x): Округляет число x вверх до ближайшего целого.javascriptconsole.log(Math.ceil(4.7)); // 5

console.log(Math.ceil(4.4)); // 5

console.log(Math.ceil(-4.4)); // -4 (округляет вверх, т.е. к большему числу)

Math.abs(x): Возвращает абсолютное значение (модуль) числа x.javascriptconsole.log(Math.abs(-10)); // 10

console.log(Math.abs(10)); // 10

Math.sqrt(x): Возвращает квадратный корень из x.javascriptconsole.log(Math.sqrt(9)); // 3

console.log(Math.sqrt(2)); // 1.4142135623730951

Math.pow(base, exponent): Возвращает base в степени exponent.javascriptconsole.log(Math.pow(2, 3)); // 8 (2 в кубе)

console.log(Math.pow(5, 2)); // 25 (5 в квадрате)

Math.random(): Возвращает псевдослучайное число с плавающей точкой между 0 (включительно) и 1 (не включительно).javascriptconsole.log(Math.random()); // Например: 0.123456789…

console.log(Math.random()); // Другое случайное число

Генерация случайного целого числа в диапазоне: Часто нужно получить случайное целое число, например, от 0 до 9.javascript// Случайное целое от 0 до 9 (включительно)

let min = 0;

let max = 9;

let randomInt = Math.floor(Math.random() * (max – min + 1)) + min;

console.log(randomInt); // Будет число от 0 до 9

Math.random() * (max – min + 1): Создает случайное число от 0 до max – min + 1 (не включая верхнюю границу).

Math.floor(…): Округляет вниз, чтобы получить целое число.

+ min: Сдвигает диапазон, чтобы он начинался с min.

6.4. Объект Date

Термин: Объект Date – это встроенный объект JavaScript, который используется для работы с датами и временем. Он позволяет создавать, получать и устанавливать компоненты даты и времени (год, месяц, день, час, минута, секунда).

Создание объекта Date:

Без аргументов: Создает объект Date с текущей датой и временем.javascriptlet now = new Date();

console.log(now); // Выведет текущую дату и время в формате, зависящем от локали

С указанием даты и времени: Аргументы можно передавать в разном формате, но самый надежный – это комбинация числовых значений.javascript// new Date(год, месяц, день, час, минута, секунда, миллисекунда)

// Месяцы нумеруются с 0 (январь) до 11 (декабрь)!

let specificDate = new Date(2023, 10, 21, 14, 30, 0, 0); // 21 Ноября 2023, 14:30:00

console.log(specificDate); // Выведет: Tue Nov 21 2023 14:30:00 GMT+0000 (Coordinated Universal Time) – формат может отличаться

Важно: Месяцы в Date нумеруются с 0 (январь) по 11 (декабрь). Это частый источник ошибок.

С указанием строки: Можно передать строку, но формат строки может интерпретироваться по-разному разными браузерами, поэтому этот способ менее надежен.javascriptlet dateFromString = new Date("2023-11-21T14:30:00"); // ISO 8601 формат, более надежный

console.log(dateFromString);

Получение компонентов даты и времени:

Объект Date имеет множество методов для получения отдельных частей даты/времени:

getFullYear(): Возвращает год (4 цифры).

getMonth(): Возвращает месяц (0-11). Помните про 0-индексацию!

getDate(): Возвращает день месяца (1-31).

getDay(): Возвращает день недели (0 – воскресенье, 1 – понедельник, …, 6 – суббота).

getHours(): Возвращает час (0-23).

getMinutes(): Возвращает минуты (0-59).

getSeconds(): Возвращает секунды (0-59).

getTime(): Возвращает количество миллисекунд, прошедших с 1 января 1970 года (Unix Timestamp). Полезно для сравнения дат или измерения интервалов.

javascript

let myDate = new Date(2024, 0, 15, 10, 0, 0); // 15 Января 2024, 10:00:00

console.log("Год:", myDate.getFullYear()); // 2024

console.log("Месяц:", myDate.getMonth()); // 0 (Январь)

console.log("День месяца:", myDate.getDate()); // 15

console.log("День недели:", myDate.getDay()); // 1 (Понедельник)

console.log("Час:", myDate.getHours()); // 10

console.log("Минуты:", myDate.getMinutes()); // 0

console.log("Секунды:", myDate.getSeconds()); // 0

console.log("Timestamp:", myDate.getTime()); // Большое число миллисекунд

Установка компонентов даты и времени:

Также есть методы для установки значений:

setFullYear(year)

setMonth(month)

setDate(date)

setHours(hours, minutes, seconds, ms) (можно установить все сразу)

setTime(milliseconds)

javascript

let today = new Date();

today.setFullYear(2025);

today.setMonth(0); // Устанавливаем январь

today.setDate(1);

console.log(today); // Дата станет 1 Января 2025 года

Сравнение дат:

Даты можно сравнивать, используя обычные операторы сравнения (<, >, <=, >=). Сравнение происходит по их значению в миллисекундах (getTime()).

javascript

let date1 = new Date(2024, 0, 15);

let date2 = new Date(2024, 0, 16);

if (date1 < date2) {

console.log("date1 раньше date2"); // Выполнится

}

Практическое задание:

Создайте массив studentScores с несколькими числами (оценками).Добавьте новую оценку в конец массива с помощью push().

Удалите последнюю оценку с помощью pop() и сохраните ее в переменной droppedScore.

Добавьте оценку 100 в начало массива с помощью unshift().

Удалите первую оценку с помощью shift() и сохраните ее.

Используйте splice(), чтобы заменить оценку с индексом 2 на 95.

Используйте slice(), чтобы создать новый массив topScores из двух лучших оценок (предполагая, что они в конце массива).

Используйте includes(), чтобы проверить, есть ли в studentScores оценка 70.

Используйте indexOf() для поиска первой оценки 80.

Используйте join() для преобразования массива studentScores в строку с разделителем “-“.

Переберите массив studentScores с помощью forEach() и выведите каждую оценку.

Создайте объект bookInfo со свойствами title, author, publicationYear, genre.Выведите название книги, используя точечную нотацию.

Выведите автора, используя скобочную нотацию и переменную propertyName = "author".

Измените publicationYear на более поздний.

Добавьте новое свойство isBestseller со значением true.

Удалите свойство genre.

Используйте for…in для перебора оставшихся свойств объекта и вывода их в консоль.

Используйте Object.values() для получения массива значений объекта и выведите его.

Используйте Object.entries() для получения пар ключ-значение и переберите их с помощью forEach() и деструктуризации.

Используя Math.random(), Math.floor() и Math.max(), Math.min(), напишите функцию getRandomInt(min, max), которая возвращает случайное целое число в заданном диапазоне (включая min и max).

Создайте объект userProfile со свойствами firstName, lastName. Напишите метод getFullName(), который возвращает полное имя, используя this.

Создайте объект currentDate типа Date.Выведите текущий год, месяц (не забудьте добавить 1, чтобы получить номер месяца от 1 до 12), день месяца.

Установите дату на 1 число следующего месяца.

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

Следующая глава будет посвящена тому, как эти знания связать с внешним миром – как JavaScript взаимодействует с HTML-документом на странице.

Глава 7: Взаимодействие с Веб-Страницей: DOM.

В предыдущих главах мы освоили основы языка JavaScript: переменные, типы данных, операторы, условия, циклы и функции. Мы также научились работать с коллекциями данных – массивами и объектами. Теперь пришло время соединить JavaScript с тем, что видит пользователь – с веб-страницей.

Термин: DOM (Document Object Model) – это объектно-ориентированное представление HTML-документа. DOM (Document Object Model) представляет собой независимый от платформы и языка интерфейс программирования, который предоставляет возможность программам и скриптам взаимодействовать с HTML-, XHTML- и XML-документами. С его помощью можно получать доступ к содержимому документов, а также изменять их структуру, контент и визуальное представление.

Представьте DOM как дерево, где каждый узел дерева представляет собой часть HTML-документа: тег, атрибут, текст внутри тега. JavaScript может получить доступ к этому “дереву” и манипулировать им – изменять содержимое, стили, структуру, реагировать на действия пользователя.

Когда браузер загружает HTML-страницу, он создает DOM-представление этой страницы. JavaScript, запущенный в браузере, может взаимодействовать с этим DOM.

7.1. Что такое DOM (Структура дерева)

DOM не устанавливает жестких рамок для структуры документа. Любой документ, имеющий определенную структуру, может быть представлен в виде древовидной структуры узлов. Каждый узел в этой структуре соответствует элементу, текстовому фрагменту, графическому объекту или другому компоненту документа. Узлы связаны между собой иерархическими отношениями, подобными «родитель-потомок».

DOM представляет HTML-документ в виде иерархической структуры:

Документ (Document): Корневой узел всего DOM. В JavaScript это глобальный объект document.

Элементы (Elements): Каждый HTML-тег (например, , ,

,

,

) является узлом-элементом в DOM.

Атрибуты (Attributes): Атрибуты HTML-тегов (например, src в теге , href в теге , class или id) также являются узлами, но они обычно связаны с узлами-элементами.

Текстовые узлы (Text Nodes): Текст внутри HTML-элементов (например, “Привет, мир!” внутри тега

) также является узлом.

Пример HTML-структуры и ее DOM-представления:

html

Заголовок

Это первый параграф.

Это второй параграф.

DOM-представление этой структуры можно схематично показать так:

Document

└──

├──

│ ├──

│ └──