Урок 5 · Слайд 1

⚡

Что такое JavaScript?

Мозги любого сайта

HTML — скелет. CSS — одежда. JavaScript — мозги! Это JS заставляет кнопки нажиматься, картинки появляться, данные считаться. Каждый браузер умеет запускать JS!

script.js

        // Самая простая программа

        console.log("Привет, мир!");

        // Переменные

        let имя = "Алиса";

        let возраст = 12;

        console.log("Меня зовут " + имя);

        console.log("Мне " + возраст + " лет");

📖 Словарик

JavaScript

Язык программирования для браузера.

"JS оживляет сайты и добавляет интерактивность"

console.log

Выводит текст в консоль разработчика (F12).

"console.log('тест') — мой лучший друг при отладке"

Переменная

Именованная коробка для хранения значения.

"let name = 'Алиса' создаёт переменную"

Урок 5 · Слайд 2

📦

Типы данных

Что может хранить переменная?

script.js

        // Строка (String)

        let имя = "Алиса";

        // Число (Number)

        let возраст = 12;

        let рост = 1.65;

        // Булево (Boolean)

        let онЛюбитКотов = true;

        // Массив (Array)

        let хобби = ["код", "игры", "музыка"];

        console.log(хобби[0]); // "код"

        // Объект (Object)

        let ученик = { имя: "Боб", класс: 6 };

📖 Словарик

Строка (String)

Текст в кавычках. Строки можно складывать.

"'Привет' + ' мир' = 'Привет мир'"

Массив (Array)

Список значений. Индексы начинаются с нуля!

"хобби[0] — первый элемент массива"

Объект (Object)

Набор пар ключ:значение.

"ученик.имя достаёт имя из объекта"

Урок 5 · Слайд 3

🔀

Условия и циклы

Принимаем решения и повторяем действия

script.js

        // Условие if/else

        let баллы = 85;

        if (баллы >= 90) {

          console.log("Отлично! 🏆");

        } else if (баллы >= 70) {

          console.log("Хорошо! 👍");

        } else {

          console.log("Нужно поработать 💪");

        }

        // Цикл for

        for (let i = 1; i <= 5; i++) {

          console.log("Шаг " + i);

        }

        // Шаг 1, Шаг 2 ... Шаг 5

📖 Словарик

if/else

Выбор действия в зависимости от условия.

"Если баллы > 90 — отлично, иначе — хорошо"

Цикл for

Повторяет код нужное число раз.

"for повторил 'Шаг' 5 раз подряд"

Условие

Выражение, которое равно true или false.

"баллы >= 90 — это условие"

Урок 5 · Слайд 4

🎯

Функции

Блоки кода, которые можно вызывать много раз

script.js

        // Создаём функцию

        function поздороваться(имя) {

          return "Привет, " + имя + "!";

        }

        // Вызываем функцию

        let результат = поздороваться("Алиса");

        console.log(результат); // "Привет, Алиса!"

        // Стрелочная функция (современный стиль)

        const сложить = (a, b) => a + b;

        console.log(сложить(3, 5)); // 8

📖 Словарик

Функция

Блок кода с именем, который можно вызывать много раз.

"function сложить() — объявление функции"

Параметр

Переменная в скобках функции — входные данные.

"имя — параметр функции поздороваться"

return

Возвращает результат из функции.

"return 8 отдаёт число 8 тому кто вызвал функцию"

Урок 5 · Слайд 5

🌐

Работа с DOM

JavaScript меняет страницу прямо на глазах

HTML

          <h1 id="заголовок">

            Начальный текст

          </h1>

          <button id="кнопка">

            Нажми меня!

          </button>

script.js

          let з = document

            .getElementById("заголовок");

          let к = document

            .getElementById("кнопка");

          з.textContent = "Изменился! 🎉";

          к.addEventListener("click", () => {

            з.style.color = "#FF6B6B";

          });

📖 Словарик

DOM

Представление HTML как дерева объектов в JS.

"DOM позволяет JS менять страницу"

getElementById

Находит элемент страницы по его ID.

"document.getElementById('btn') нашёл кнопку"

addEventListener

Добавляет обработчик события (клик, ввод и т.д.).

"addEventListener('click') слушает клик на кнопку"

Урок 5 · Слайд 6

🧮

Мини-проект: калькулятор

Складываем два числа на странице

HTML

          <input id="a"

            type="number"

            placeholder="Число 1">

          <input id="b"

            type="number"

            placeholder="Число 2">

          <button id="btn">Сложить</button>

          <p id="result">Результат: ?</p>

JavaScript

          document.getElementById("btn")

           .addEventListener("click", () => {

            let a = Number(document

              .getElementById("a").value);

            let b = Number(document

              .getElementById("b").value);

            let sum = a + b;

            document.getElementById("result")

              .textContent = "= " + sum;

          });

📖 Словарик

input.value

Значение из поля ввода (всегда строка!).

"input.value всегда строка — не забудь Number()"

Number()

Преобразует строку в число.

"Number('5') даёт число 5, а не строку '5'"

textContent

Текст внутри HTML-элемента.

"element.textContent = 'новый текст' меняет содержимое"

Урок 5 · Слайд 7

🎮

Квест: угадай число

Напиши игру самостоятельно!

Создай игру «Угадай число» — компьютер загадывает число от 1 до 100, а игрок пытается угадать!

подсказка

        // Загадываем случайное число

        let секрет = Math.floor(Math.random() * 100) + 1;

        let попыток = 0;

        // При нажатии "Проверить":

        let guess = Number(input.value);

        попыток++;

        if (guess < секрет) showHint("Больше! ⬆️");

        else if (guess > секрет) showHint("Меньше! ⬇️");

        else showHint("Угадал! 🏆 Попыток: " + попыток);

1

Создай HTML с input, кнопкой и блоком для подсказки

2

Загадай случайное число через Math.random()

3

Сравни ввод пользователя с секретным числом

4

Покажи подсказку: больше, меньше или угадал!

5

Считай количество попыток и покажи при победе 🏆