🚀 JavaScript: Углублённый практикум (90 минут)
Для тех, кто уже знает переменные, условия и циклы — но хочет писать реальный код
🎯 Что мы изучим за 90 минут:
• Работа с массивами и объектами (не просто теория, а где это нужно).
• Функции — объявление, вызов, передача в другие функции.
• Работа с DOM — создание, удаление, изменение элементов.
• Обработка событий (click, input, submit).
• Асинхронность: setTimeout, setInterval.
• Мини-проект: «Список задач» (ToDo) на чистом JS.
📌 Как работать: открываем VS Code или Notepad++, создаём файл `.html`, пишем код внутри тега <script>, сохраняем и открываем в браузере (F12 → Console, чтобы смотреть вывод).
💡 Все функции объявляются отдельно, имеют имена. Никакой магии — только понятный код.
📦 Блок 1. Массивы: методы map, filter, reduce (20 мин)
Введение в функциональное программирование (без магии)
Метод map — создаёт новый массив, применяя функцию к каждому элементу.
// 1. Объявляем функцию, которая умножает число на 2
function umnozhitNaDva(chislo) {
return chislo * 2;
}
// 2. Дан массив чисел
var numbers = [1, 2, 3, 4, 5];
// 3. Применяем map, передавая нашу функцию
var udvoennye = numbers.map(umnozhitNaDva);
// 4. Выводим результат в консоль
console.log(udvoennye); // [2, 4, 6, 8, 10]
Метод filter — оставляет только те элементы, для которых функция вернула true.
// 1. Функция проверяет, чётное ли число
function proverkaNaChetnost(chislo) {
if (chislo % 2 === 0) {
return true;
} else {
return false;
}
}
// 2. Применяем filter
var chetnye = numbers.filter(proverkaNaChetnost);
console.log(chetnye); // [2, 4]
Метод reduce — сворачивает массив в одно значение (сумма, произведение).
// 1. Функция складывает два числа и возвращает сумму
function summirovanie(accumulator, current) {
return accumulator + current;
}
// 2. Применяем reduce, начальное значение = 0
var summa = numbers.reduce(summirovanie, 0);
console.log(summa); // 15
✏️ Задание 1 (5 мин): Дан массив `[5, 12, 8, 130, 44]`. С помощью `filter` оставить числа больше 10, с помощью `map` умножить их на 2, с помощью `reduce` найти сумму результата. Вывести в консоль. Все функции объявить отдельно!
✅ Решение задания 1
var arr = [5, 12, 8, 130, 44];
// Функция проверяет, больше ли число 10
function bolsheDesyati(chislo) {
return chislo > 10;
}
// Функция умножает число на 2
function umnozhitNaDva(chislo) {
return chislo * 2;
}
// Функция складывает два числа
function summirovanie(accumulator, current) {
return accumulator + current;
}
// Шаг 1: оставляем числа > 10
var filtered = arr.filter(bolsheDesyati); // [12, 130, 44]
// Шаг 2: умножаем на 2
var mapped = filtered.map(umnozhitNaDva); // [24, 260, 88]
// Шаг 3: складываем
var result = mapped.reduce(summirovanie, 0); // 372
console.log(result); // 372
📌 Блок 2. Объекты: копирование, добавление, удаление свойств (15 мин)
Без деструктуризации — только понятные операции
// Исходный объект
var user = { name: "Анна", age: 25, city: "Москва" };
// Копируем объект в новый и добавляем поле email
var userWithEmail = {
name: user.name,
age: user.age,
city: user.city,
email: "anna@example.com"
};
console.log(userWithEmail);
// Создаём объект без поля city (копируем только нужные поля)
var userWithoutCity = {
name: user.name,
age: user.age
};
console.log(userWithoutCity);
✏️ Задание 2 (5 мин): Дан объект `{ title: "Война и мир", author: "Толстой", year: 1869, pages: 1225 }`. Создать новый объект, убрав поле `pages` и добавив поле `genre: "Роман"`. Вывести в консоль.
✅ Решение задания 2
var book = { title: "Война и мир", author: "Толстой", year: 1869, pages: 1225 };
var newBook = {
title: book.title,
author: book.author,
year: book.year,
genre: "Роман"
};
console.log(newBook);
⚡ Блок 3. Функции: обычные, стрелочные, колбэки (15 мин)
Пишем чистые и переиспользуемые функции
// Обычная функция с именем
function multiply(a, b) {
return a * b;
}
console.log(multiply(3, 4)); // 12
// Стрелочная функция (тоже с именем)
const multiplyArrow = (a, b) => {
return a * b;
};
console.log(multiplyArrow(3, 4)); // 12
// Функция, которая принимает другую функцию как параметр (колбэк)
function processUserInput(callback) {
var name = prompt("Введите имя:");
callback(name);
}
// Отдельная функция для вывода приветствия
function sayHello(name) {
console.log("Привет, " + name + "!");
}
// Передаём функцию sayHello в processUserInput
processUserInput(sayHello);
// Замыкание: функция запоминает переменную из внешней области
function createCounter() {
var count = 0;
function increment() {
count = count + 1;
return count;
}
return increment;
}
var counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
✏️ Задание 3 (5 мин): Написать функцию `createGreeting(greetingWord)`, которая возвращает функцию, принимающую имя и выводящую `"greetingWord, имя!"`. Все функции должны иметь имена. Пример: `var sayHello = createGreeting("Здравствуйте"); sayHello("Анна")` → `"Здравствуйте, Анна!"`.
✅ Решение задания 3
function createGreeting(greetingWord) {
function greet(name) {
console.log(greetingWord + ", " + name + "!");
}
return greet;
}
var sayHello = createGreeting("Здравствуйте");
sayHello("Анна"); // Здравствуйте, Анна!
🖱️ Блок 4. DOM: создание, поиск, события (20 мин)
Управляем страницей из JavaScript
// Найти элемент по id и изменить текст
var title = document.getElementById("mainTitle");
title.textContent = "Новый заголовок!";
// Создать новый элемент
var newDiv = document.createElement("div");
newDiv.textContent = "Я создан через JS!";
document.body.appendChild(newDiv);
// Обработчик клика (функция объявлена отдельно)
function showAlert() {
alert("Кнопка нажата!");
}
var button = document.querySelector("#myButton");
button.addEventListener("click", showAlert);
✏️ Задание 4 (10 мин): Создать пустую HTML-страницу с одной кнопкой "Добавить параграф". При каждом клике на кнопку в конец страницы добавляется новый параграф с текстом "Новый элемент №X" (где X — счётчик). Использовать `addEventListener` и `createElement`.
✅ Решение задания 4
<!DOCTYPE html>
<html>
<head>
<title>Добавление параграфов</title>
</head>
<body>
<button id="addBtn">Добавить параграф</button>
<div id="container"></div>
<script>
var counter = 0;
var container = document.getElementById("container");
var btn = document.getElementById("addBtn");
function addParagraph() {
counter = counter + 1;
var p = document.createElement("p");
p.textContent = "Новый элемент №" + counter;
container.appendChild(p);
}
btn.addEventListener("click", addParagraph);
</script>
</body>
</html>
⏳ Блок 5. setTimeout, setInterval (10 мин)
Задержки и повторяющиеся действия
// Функция, которая выполнится через 2 секунды
function delayedMessage() {
console.log("Прошло 2 секунды");
}
setTimeout(delayedMessage, 2000);
// Повторяющееся действие (каждые 3 секунды)
var count = 0;
function repeatMessage() {
count = count + 1;
console.log("Прошло " + (count * 3) + " секунд");
if (count === 3) {
clearInterval(interval);
}
}
var interval = setInterval(repeatMessage, 3000);
✏️ Задание 5 (5 мин): Написать таймер обратного отсчёта от 5 до 1 в консоли с интервалом 1 секунда, после 0 вывести "Старт!".
✅ Решение задания 5
var count = 5;
function tick() {
console.log(count);
count = count - 1;
if (count < 0) {
clearInterval(timer);
console.log("Старт!");
}
}
var timer = setInterval(tick, 1000);
📋 Мини-проект: ToDo на чистом JS (15 мин)
Соединяем всё вместе: массив, DOM, события, функции
var tasks = [];
// Функция отрисовки списка задач
function renderTasks() {
var list = document.getElementById("taskList");
list.innerHTML = ""; // очищаем список
for (var i = 0; i < tasks.length; i++) {
var li = document.createElement("li");
li.textContent = tasks[i];
// Кнопка удаления
var delBtn = document.createElement("button");
delBtn.textContent = "Удалить";
delBtn.setAttribute("data-index", i);
delBtn.onclick = deleteTask;
li.appendChild(delBtn);
list.appendChild(li);
}
}
// Функция удаления задачи
function deleteTask(event) {
var index = event.target.getAttribute("data-index");
tasks.splice(index, 1);
renderTasks();
}
// Функция добавления задачи
function addTask() {
var input = document.getElementById("taskInput");
if (input.value.trim() !== "") {
tasks.push(input.value);
input.value = "";
renderTasks();
}
}
// Навешиваем обработчик на кнопку добавления
var addBtn = document.getElementById("addBtn");
addBtn.onclick = addTask;
✏️ Финальное задание (на дом или в классе): Реализовать полноценный ToDo с возможностью отмечать задачи как выполненные (стиль перечёркивания), добавить фильтр (все / активные / выполненные).
🏁 Итоги практикума
Что мы теперь умеем
✅ Массивы: map, filter, reduce
✅ Копирование и изменение объектов
✅ Обычные и стрелочные функции
✅ Создание и удаление DOM-элементов
✅ Обработка событий (click, input)
✅ setTimeout, setInterval, таймеры
✅ Полноценный ToDo на чистом JS
🎉 За 90 минут вы прошли путь от основ до создания реального приложения. Теперь вы готовы изучать React, Vue или Node.js.
📚 Дальше: попробуйте добавить в ToDo сохранение в localStorage — чтобы задачи не исчезали после перезагрузки страницы.