Инструкции к выполнению

Пошаговое руководство по работе с JavaScript и созданию интерактивных веб-страниц

📋 Подготовка к работе

  1. Создайте рабочую папку

    Создайте папку "lab3_javascript" для файлов лабораторной работы

  2. Подготовьте редактор кода

    Откройте VS Code, Sublime Text или любой другой редактор

  3. Откройте консоль разработчика

    В браузере нажмите F12 или Ctrl+Shift+I для доступа к DevTools

  4. Создайте базовые файлы

    index.html, style.css и script.js

🎯 Этап 1: Базовая структура HTML с JavaScript

Создайте HTML-файл с подключенным JavaScript:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Lab 3</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Лабораторная работа №3</h1>
    <div id="content">
        <p id="demo">Исходный текст</p>
        <button id="myButton">Нажми меня</button>
    </div>
    
    <!-- Подключение JavaScript перед закрывающим body -->
    <script src="script.js"></script>
</body>
</html>

📝 Этап 2: Первый JavaScript код

Задание 1: Hello World и консоль

Создайте файл script.js и добавьте базовый код:

// Вывод в консоль браузера
console.log('Hello, JavaScript!');
console.log('Лабораторная работа №3');

// Различные типы сообщений в консоли
console.info('Информационное сообщение');
console.warn('Предупреждение');
console.error('Сообщение об ошибке');

// Вывод объекта в консоль
const student = {
    name: 'Иван',
    age: 20,
    course: 2
};
console.table(student);

// Измерение времени выполнения
console.time('Timer');
for (let i = 0; i < 1000000; i++) {
    // Какие-то вычисления
}
console.timeEnd('Timer');

🔢 Этап 3: Переменные и типы данных

Задание 2: Работа с переменными

Изучите объявление переменных и типы данных:

// Объявление переменных
let name = 'JavaScript';     // Строка (можно изменять)
const version = 'ES6';       // Константа (нельзя изменять)
var oldStyle = true;         // Устаревший способ (не рекомендуется)

// Типы данных
let number = 42;             // Number
let text = "Текст";          // String
let isActive = true;         // Boolean
let nothing = null;          // Null
let notDefined;              // Undefined
let symbol = Symbol('id');   // Symbol
let bigInt = 123n;           // BigInt

// Массивы
let colors = ['red', 'green', 'blue'];
let mixed = [1, 'text', true, null];

// Объекты
let person = {
    firstName: 'Иван',
    lastName: 'Иванов',
    age: 25,
    isStudent: true
};

// Проверка типа
console.log(typeof number);      // "number"
console.log(typeof text);        // "string"
console.log(typeof isActive);    // "boolean"
console.log(Array.isArray(colors)); // true

🎯 Этап 4: Работа с DOM

Задание 3: Поиск и изменение элементов

Научитесь находить элементы на странице и изменять их:

// Поиск элементов
const title = document.getElementById('title');
const buttons = document.getElementsByClassName('button');
const paragraphs = document.getElementsByTagName('p');
const firstButton = document.querySelector('.button');
const allButtons = document.querySelectorAll('.button');

// Изменение содержимого
const demo = document.getElementById('demo');
demo.textContent = 'Новый текст';                    // Только текст
demo.innerHTML = '<strong>Жирный текст</strong>';   // HTML-содержимое

// Изменение атрибутов
const link = document.querySelector('a');
link.href = 'https://example.com';
link.setAttribute('target', '_blank');
link.removeAttribute('title');

// Изменение стилей
demo.style.color = 'red';
demo.style.fontSize = '20px';
demo.style.backgroundColor = '#f0f0f0';
demo.style.padding = '10px';

// Работа с классами
demo.classList.add('highlight');
demo.classList.remove('old-class');
demo.classList.toggle('active');
const hasClass = demo.classList.contains('highlight');

⚡ Этап 5: События

Задание 4: Обработка событий пользователя

Добавьте интерактивность с помощью событий:

// Способ 1: addEventListener (рекомендуется)
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Кнопка нажата!');
});

// Способ 2: Стрелочная функция
button.addEventListener('click', () => {
    console.log('Клик по кнопке');
});

// Способ 3: Отдельная функция
function handleClick(event) {
    console.log('Клик!', event);
    console.log('Элемент:', event.target);
    console.log('Координаты:', event.clientX, event.clientY);
}
button.addEventListener('click', handleClick);

// Различные события
const input = document.getElementById('myInput');

input.addEventListener('focus', () => {
    console.log('Поле получило фокус');
});

input.addEventListener('blur', () => {
    console.log('Поле потеряло фокус');
});

input.addEventListener('input', (e) => {
    console.log('Введено:', e.target.value);
});

// События мыши
const box = document.getElementById('box');

box.addEventListener('mouseenter', () => {
    box.style.backgroundColor = 'yellow';
});

box.addEventListener('mouseleave', () => {
    box.style.backgroundColor = 'white';
});

// Отмена стандартного поведения
const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
    e.preventDefault(); // Отменяет отправку формы
    console.log('Форма не отправлена');
});

🔄 Этап 6: Условия и циклы

Задание 5: Управляющие конструкции

Используйте условные операторы и циклы:

// Условный оператор if-else
let age = 18;
if (age >= 18) {
    console.log('Совершеннолетний');
} else if (age >= 14) {
    console.log('Подросток');
} else {
    console.log('Ребенок');
}

// Тернарный оператор
let status = age >= 18 ? 'Взрослый' : 'Несовершеннолетний';

// Switch-case
let day = 3;
switch(day) {
    case 1:
        console.log('Понедельник');
        break;
    case 2:
        console.log('Вторник');
        break;
    case 3:
        console.log('Среда');
        break;
    default:
        console.log('Другой день');
}

// Цикл for
for (let i = 0; i < 5; i++) {
    console.log('Итерация:', i);
}

// Цикл while
let count = 0;
while (count < 3) {
    console.log('Count:', count);
    count++;
}

// Цикл do-while
let num = 0;
do {
    console.log('Число:', num);
    num++;
} while (num < 3);

// Перебор массива
const fruits = ['яблоко', 'банан', 'апельсин'];

// forEach
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

// for...of (для значений)
for (let fruit of fruits) {
    console.log(fruit);
}

// for...in (для индексов/ключей)
for (let index in fruits) {
    console.log(index, fruits[index]);
}

⚙️ Этап 7: Функции

Задание 6: Создание и использование функций

Научитесь создавать функции разными способами:

// Объявление функции (Function Declaration)
function greet(name) {
    return `Привет, ${name}!`;
}
console.log(greet('Мир'));

// Функциональное выражение (Function Expression)
const add = function(a, b) {
    return a + b;
};
console.log(add(5, 3));

// Стрелочная функция (Arrow Function)
const multiply = (a, b) => a * b;
console.log(multiply(4, 5));

// Стрелочная функция с телом
const calculate = (a, b, operation) => {
    switch(operation) {
        case '+': return a + b;
        case '-': return a - b;
        case '*': return a * b;
        case '/': return a / b;
        default: return 0;
    }
};

// Параметры по умолчанию
function createUser(name = 'Гость', age = 0) {
    return {
        name: name,
        age: age
    };
}

// Rest параметры
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

// Callback функции
function processData(data, callback) {
    const result = data.toUpperCase();
    callback(result);
}

processData('hello', function(result) {
    console.log('Результат:', result);
});

// Функция высшего порядка
function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5));  // 10
console.log(triple(5));  // 15

🎨 Этап 8: Практическое задание - Интерактивная форма

Задание 7: Создание формы с валидацией

Создайте интерактивную форму регистрации с проверкой данных:

HTML структура:

<form id="registrationForm">
    <div class="form-group">
        <label for="username">Имя пользователя:</label>
        <input type="text" id="username" required>
        <span class="error" id="usernameError"></span>
    </div>
    
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <span class="error" id="emailError"></span>
    </div>
    
    <div class="form-group">
        <label for="password">Пароль:</label>
        <input type="password" id="password" required>
        <span class="error" id="passwordError"></span>
    </div>
    
    <div class="form-group">
        <label for="confirmPassword">Подтвердите пароль:</label>
        <input type="password" id="confirmPassword" required>
        <span class="error" id="confirmError"></span>
    </div>
    
    <button type="submit">Зарегистрироваться</button>
</form>

<div id="successMessage" style="display: none;">
    Регистрация успешна!
</div>

JavaScript валидация:

document.getElementById('registrationForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Получаем значения полей
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    
    // Флаг валидности
    let isValid = true;
    
    // Очищаем предыдущие ошибки
    document.querySelectorAll('.error').forEach(error => {
        error.textContent = '';
    });
    
    // Проверка имени пользователя
    if (username.length < 3) {
        document.getElementById('usernameError').textContent = 
            'Имя должно содержать минимум 3 символа';
        isValid = false;
    }
    
    // Проверка email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        document.getElementById('emailError').textContent = 
            'Введите корректный email';
        isValid = false;
    }
    
    // Проверка пароля
    if (password.length < 6) {
        document.getElementById('passwordError').textContent = 
            'Пароль должен содержать минимум 6 символов';
        isValid = false;
    }
    
    // Проверка совпадения паролей
    if (password !== confirmPassword) {
        document.getElementById('confirmError').textContent = 
            'Пароли не совпадают';
        isValid = false;
    }
    
    // Если все проверки пройдены
    if (isValid) {
        document.getElementById('registrationForm').style.display = 'none';
        document.getElementById('successMessage').style.display = 'block';
        
        // Сохраняем данные (например, в localStorage)
        const userData = {
            username: username,
            email: email,
            registrationDate: new Date().toISOString()
        };
        localStorage.setItem('user', JSON.stringify(userData));
        
        console.log('Пользователь зарегистрирован:', userData);
    }
});

🎮 Этап 9: Мини-игра на JavaScript

Задание 8: Создание игры "Угадай число"

Реализуйте простую игру с использованием всех изученных концепций:

// HTML
<div id="gameContainer">
    <h2>Игра "Угадай число"</h2>
    <p>Я загадал число от 1 до 100. Попробуй угадать!</p>
    <input type="number" id="guessInput" min="1" max="100">
    <button id="guessButton">Угадать</button>
    <p id="message"></p>
    <p>Попыток: <span id="attempts">0</span></p>
    <button id="resetButton" style="display: none;">Новая игра</button>
</div>

// JavaScript
let randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
let gameWon = false;

const guessInput = document.getElementById('guessInput');
const guessButton = document.getElementById('guessButton');
const message = document.getElementById('message');
const attemptsSpan = document.getElementById('attempts');
const resetButton = document.getElementById('resetButton');

guessButton.addEventListener('click', makeGuess);
guessInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') makeGuess();
});

resetButton.addEventListener('click', resetGame);

function makeGuess() {
    if (gameWon) return;
    
    const userGuess = parseInt(guessInput.value);
    
    if (isNaN(userGuess) || userGuess < 1 || userGuess > 100) {
        message.textContent = 'Введите число от 1 до 100!';
        message.style.color = 'red';
        return;
    }
    
    attempts++;
    attemptsSpan.textContent = attempts;
    
    if (userGuess === randomNumber) {
        message.textContent = `🎉 Поздравляю! Вы угадали число ${randomNumber} за ${attempts} попыток!`;
        message.style.color = 'green';
        gameWon = true;
        guessButton.disabled = true;
        guessInput.disabled = true;
        resetButton.style.display = 'inline-block';
    } else if (userGuess < randomNumber) {
        message.textContent = '📈 Загаданное число больше!';
        message.style.color = 'blue';
    } else {
        message.textContent = '📉 Загаданное число меньше!';
        message.style.color = 'blue';
    }
    
    guessInput.value = '';
    guessInput.focus();
}

function resetGame() {
    randomNumber = Math.floor(Math.random() * 100) + 1;
    attempts = 0;
    gameWon = false;
    
    attemptsSpan.textContent = '0';
    message.textContent = '';
    guessInput.value = '';
    guessInput.disabled = false;
    guessButton.disabled = false;
    resetButton.style.display = 'none';
    guessInput.focus();
}

✅ Этап 10: Тестирование и отладка

  1. Используйте консоль браузера

    Проверяйте вывод console.log() и ошибки в консоли

  2. Установите точки останова

    В DevTools во вкладке Sources можно поставить breakpoints

  3. Проверьте в разных браузерах

    Chrome, Firefox, Safari, Edge

  4. Валидация кода

    Используйте ESLint или встроенные инструменты IDE

Отладка в консоли:

// Отладочные команды
console.log('Значение:', variable);
console.dir(object);                    // Детальный вывод объекта
console.trace();                        // Стек вызовов
debugger;                               // Точка останова в коде

// Группировка сообщений
console.group('Группа сообщений');
console.log('Сообщение 1');
console.log('Сообщение 2');
console.groupEnd();

// Условный вывод
console.assert(condition, 'Ошибка: условие не выполнено');

// Очистка консоли
console.clear();

💡 Полезные советы

  • Всегда используйте const и let вместо var
  • Используйте строгий режим: 'use strict'; в начале файла
  • Именуйте переменные и функции понятно (camelCase для JS)
  • Комментируйте сложную логику
  • Избегайте глобальных переменных
  • Используйте === вместо == для сравнения
  • Обрабатывайте ошибки с помощью try-catch
  • Разделяйте код на функции для лучшей читаемости
  • Используйте современные возможности ES6+
  • Регулярно сохраняйте и тестируйте код