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

С указанием даты и времени: Аргументы можно передавать в разном формате, но самый надежный — это комбинация числовых значений.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

└──

├──

│ ├──

│ └──