🚀 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 — чтобы задачи не исчезали после перезагрузки страницы.