Лабораторная работа №3

JavaScript основы

Введение в программирование на JavaScript и работа с DOM

Цель работы

Изучить основы языка JavaScript, научиться работать с DOM (Document Object Model), освоить обработку событий, понять принципы динамического изменения веб-страниц и создать интерактивные элементы интерфейса.

Задачи лабораторной работы

Изучить синтаксис и основные конструкции JavaScript
Освоить работу с переменными, типами данных и операторами
Научиться работать с DOM-элементами
Реализовать обработку событий пользователя
Создать динамические изменения контента страницы
Разработать интерактивные компоненты интерфейса

Что такое JavaScript?

JavaScript — это высокоуровневый, интерпретируемый язык программирования, который делает веб-страницы интерактивными. Он выполняется прямо в браузере и позволяет создавать динамический контент, управлять мультимедиа, анимировать изображения и многое другое.

🌐

Клиентский язык

Выполняется в браузере пользователя

⚡

Динамичность

Изменяет страницу без перезагрузки

🎯

Событийность

Реагирует на действия пользователя

🔧

Универсальность

Работает на любой платформе

Основные концепции JavaScript

📦 Переменные и типы данных

let, const, var
Числа, строки, булевы значения
Массивы и объекты
null и undefined

🔀 Управляющие конструкции

Условные операторы (if/else)
Циклы (for, while, do-while)
Switch-case
Тернарный оператор

⚙️ Функции

Объявление функций
Стрелочные функции
Параметры и возврат значений
Область видимости

🎨 DOM манипуляции

Поиск элементов
Изменение содержимого
Работа с атрибутами
Создание элементов

Подключение JavaScript к HTML

<!-- Внутренний скрипт -->
<script>
    console.log('Hello, JavaScript!');
</script>

<!-- Внешний скрипт -->
<script src="script.js"></script>

<!-- С атрибутом defer (загружается параллельно, выполняется после парсинга DOM) -->
<script src="script.js" defer></script>

<!-- С атрибутом async (загружается параллельно, выполняется сразу) -->
<script src="script.js" async></script>

Первая программа на JavaScript

// Переменные и типы данных
let message = "Привет, мир!";
const pi = 3.14159;
let count = 42;
let isActive = true;

// Вывод в консоль
console.log(message);

// Взаимодействие с пользователем
alert("Добро пожаловать!");
let userName = prompt("Как вас зовут?");
let isConfirmed = confirm("Вы готовы начать?");

// Работа с DOM
document.getElementById('output').textContent = message;
document.querySelector('.button').addEventListener('click', function() {
    alert('Кнопка нажата!');
});

Интерактивная демонстрация

Попробуйте JavaScript прямо сейчас!

1. Изменение текста

Исходный текст

2. Изменение стилей

Цветной блок

3. Калькулятор

Результат:

4. Список задач

События в JavaScript

Событие	Описание	Пример использования
`click`	Клик мышью	Кнопки, ссылки
`mouseover`	Наведение курсора	Подсказки, эффекты
`keydown`	Нажатие клавиши	Горячие клавиши
`submit`	Отправка формы	Валидация данных
`load`	Загрузка страницы	Инициализация
`change`	Изменение значения	Формы, селекты
`scroll`	Прокрутка	Параллакс, анимации
`focus`	Получение фокуса	Поля ввода

DOM методы

Поиск элементов

                            getElementById('id')
                            getElementsByClassName('class')
                            getElementsByTagName('tag')
                            querySelector('.selector')
                            querySelectorAll('.selector')
                        

Изменение содержимого

                            element.textContent = 'text'
                            element.innerHTML = '<b>HTML</b>'
                            element.value = 'value'
                        

Работа с атрибутами

                            element.getAttribute('attr')
                            element.setAttribute('attr', 'value')
                            element.removeAttribute('attr')
                            element.hasAttribute('attr')
                        

Работа с классами

                            element.classList.add('class')
                            element.classList.remove('class')
                            element.classList.toggle('class')
                            element.classList.contains('class')
                        

Создание элементов

                            document.createElement('div')
                            element.appendChild(child)
                            element.removeChild(child)
                            element.insertBefore(new, ref)
                        

Стили

                            element.style.color = 'red'
                            element.style.display = 'none'
                            element.style.backgroundColor
                            getComputedStyle(element)
                        

Ключевые навыки

📝

Синтаксис JS

Основы языка и структуры данных

🎯

DOM API

Манипуляция элементами страницы

⚡

События

Обработка действий пользователя

🔧

Отладка

Использование DevTools