Урок 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 = 'Алиса' создаёт переменную"

let

Ключевое слово для создания переменной. Значение можно менять позже.

"«После let пишем имя и знак = и значение»"

Урок 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)

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

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

Boolean (true / false)

Логический тип данных: только два значения — правда или ложь.

"онЛюбитКотов = true — да, он любит котов"

[0], [1], [2]… (индекс)

Номер элемента в массиве. Нумерация серди с нуля, а не с единицы!

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

Урок 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 — это условие"

else if

Проверяет следующее условие, если предыдущее не выполнилось.

"если не 90+ — else if проверит есть ли 70+"

i++ (инкремент)

Увеличивает переменную на 1. То же что i = i + 1.

"i++ на каждом шаге цикла считает: 1, 2, 3…"

>=, <=, ==, != (операторы сравнения)

Сравнивают числа. >= — больше или равно, <= — меньше или равно.

"85 >= 70 — истина (true), возвращает true"

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

🎯

Функции

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

script.js

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

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

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

        }

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

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

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

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

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

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

📖 Словарик

Функция

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

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

Параметр

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

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

return

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

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

const

Ключевое слово для константы — значение нельзя переназначить. В отличие от let.

"const PI = 3.14 — число нельзя изменить"

() => (стрелочная функция)

Короткая запись функции. (a, b) => a + b равнозначно function(a, b) { return a + b; }

"const сложить = (a, b) => a + b — современный стиль"

Урок 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') слушает клик на кнопку"

.style.color

Свойство стиля элемента. Через .style можно менять любое CSS-свойство из JS.

"element.style.color = '#FF6B6B' окрасило текст в красный"

textContent

Текстовое содержимое элемента. Чтение и запись текста внутри тега.

"з.textContent = 'Изменился!' поменяло текст заголовка"

Урок 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 = 'новый текст' меняет содержимое"

placeholder

Атрибут HTML-атрибут: серое подсказочное сообщение в пустом поле ввода.

"placeholder='Число 1' показывает подсказку до ввода"

type="number"

Атрибут поля ввода: разрешает вводить только числа. Браузер покажет числовую клавиатуру.

"<input type='number'> не даст ввести буквы"

.value

Текущее значение поля ввода. Всегда возвращает строку — поэтому нужно Number().

"input.value = '42' — строка, Number(input.value) = 42 — число"

Урок 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

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

📖 Словарик

Math.random()

Возвращает случайное число от 0 до 1 (0.0000… до 0.9999…). Часть встроенного объекта Math.

"Math.random() * 100 даёт число от 0 до 99.99"

Math.floor()

Округляет число вниз до целого. floor = пол. То есть из 99.87 сделает 99.

"Math.floor(3.9) = 3, Math.floor(99.1) = 99"

++ (инкремент)

Увеличивает переменную на 1. попыток++ равнозначно попыток = попыток + 1.

"попыток++ на каждой попытке считает: 1, 2, 3…"

Math (объект)

Встроенный объект JS с математическими функциями: round, floor, ceil, abs, max, min…

"Math.max(3, 7, 1) = 7 — наибольшее число"