2. Добавление / удаление классов:

javascript

Copy

Download

const element = document.querySelector('div');

// Добавить класс

element.classList.add('active', 'highlight');

// Удалить класс

element.classList.remove('active');

// Переключить класс (если есть — удалит, если нет — добавит)

element.classList.toggle('hidden');

// Проверить наличие класса

if (element.classList.contains('active')) {

console.log('Элемент активен');

}

5. Как получить значение атрибута элемента? Как добавить атрибут для элемента?

Получение атрибута:

javascript

Copy

Download

const link = document.querySelector('a');

// Получить стандартный атрибут

const href = link.getAttribute('href');

// Получить data-атрибут

const userId = link.dataset.userId; // для data-user-id

Установка атрибута:

javascript

Copy

Download

// Установить стандартный атрибут

link.setAttribute('href', 'https://google.com');

// Установить data-атрибут

link.dataset.userId = '123'; // станет data-user-id="123"

Удаление атрибута:

javascript

Copy

Download

link.removeAttribute('title');

6. Как получить значение, введенное в элемент input? Как получить значение, выбранное в элементе select?

1. Получение значения из <input>:

html

Copy

Download

Run

<input type="text" id="username">

javascript

Copy

Download

const input = document.getElementById('username');

// Получить текущее значение

const value = input.value;

console.log(value); // то, что ввел пользователь

2. Получение значения из <select>:

html

Copy

Download

Run

<select id="city">

<option value="msk">Москва</option>

<option value="spb">Санкт-Петербург</option>

</select>

javascript

Copy

Download

const select = document.getElementById('city');

// Получить выбранное значение

const selectedValue = select.value;

console.log(selectedValue); // "msk" или "spb"

// Получить текст выбранного option

const selectedOption = select.options[select.selectedIndex];

console.log(selectedOption.text); // "Москва" или "Санкт-Петербург"

Практическое занятие 1: Основы JavaScript

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

Цель: Познакомиться с разными типами данных и операциями с ними.

Код:

javascript

Copy

Download

function runTask1() {

let result = "";

// Числовая переменная

let num = 10;

num += 5;

result += `<p>Числовая переменная: 10 + 5 = ${num}</p>`;

// Строковая переменная

let str = "Hello";

str += " World!";

result += `<p>Строковая переменная: "${str}"</p>`;

// Булева переменная

let bool = true;

result += `<p>Логическое отрицание true: ${!bool}</p>`;

// Массив

let arr = [1, 2, 3];

arr.push(4);

result += `<p>Массив после push(4): [${arr.join(', ')}]</p>`;

// Объект

let obj = { name: "John", age: 25 };

result += `<p>Значение свойства name: "${obj.name}"</p>`;

document.getElementById('task1-result').innerHTML = result;

}

Разбор:

1. Создаются переменные разных типов:

   • num - число (инициализируется 10, затем увеличивается на 5)

   • str - строка (к "Hello" добавляется " World!")

   • bool - булево значение (демонстрируется логическое отрицание)

   • arr - массив (добавляется элемент с помощью push())

   • obj - объект (доступ к свойству name)

2. Результаты операций собираются в строку result с HTML-разметкой.

3. Строка результата выводится в элемент с id="task1-result".

Вывод: Это задание демонстрирует базовые операции с основными типами данных в JavaScript.

Задание 2: Работа с массивом

Цель: Научиться перебирать массивы разными способами.

Код:

javascript

Copy

Download

function runTask2() {

let result = "<p>Перебор массива:</p>";

// for

result += "<p><strong>Цикл for:</strong><br>";

for (let i = 0; i < numbersArray.length; i++) {

result += `${numbersArray[i]}, `;

}

result += "</p>";

// for...in

result += "<p><strong>Цикл for...in:</strong><br>";

for (let index in numbersArray) {

result += `${numbersArray[index]}, `;

}

result += "</p>";

// forEach

result += "<p><strong>Метод forEach:</strong><br>";

numbersArray.forEach(num => {

result += `${num}, `;

});

result += "</p>";

document.getElementById('task2-result').innerHTML = result;

}

Разбор:

1. Используется глобальный массив numbersArray, заполненный случайными числами при загрузке страницы.

2. Демонстрируются три способа перебора массива:

   • Классический цикл for

   • Цикл for...in (перебирает индексы массива)

   • Метод forEach (современный способ перебора)

3. Для каждого способа формируется строка с элементами массива.

Вывод: Задание показывает разные подходы к итерации по массивам, что важно для выбора оптимального способа в разных ситуациях.

Задание 3: Поиск числа в массиве

Цель: Научиться проверять наличие элемента в массиве и добавлять его при отсутствии.

Код:

javascript

Copy

Download

function checkNumberInArray() {

const input = document.getElementById('number-input');

const number = parseInt(input.value);

const resultDiv = document.getElementById('task3-result');

if (isNaN(number)) {

resultDiv.innerHTML = "<p>Пожалуйста, введите число!</p>";

return;

}

if (numbersArray.includes(number)) {

resultDiv.innerHTML = `<p>Число ${number} найдено в массиве.</p>`;

} else {

numbersArray.push(number);

resultDiv.innerHTML = `<p>Число ${number} добавлено в массив. Новый массив: [${numbersArray.join(', ')}]</p>`;

}

}

Разбор:

1. Получаем значение из input и преобразуем его в число.

2. Проверяем, что введено действительно число (isNaN).

3. Проверяем наличие числа в массиве с помощью метода includes().

4. Если число найдено - выводим сообщение, если нет - добавляем число в массив и выводим обновленный массив.

Вывод: Демонстрирует работу с пользовательским вводом и основные операции с массивами.

Задание 4: Работа с объектом

Цель: Познакомиться с созданием и использованием объектов.

Код:

javascript

Copy

Download

function runTask4() {

document.getElementById('task4-result').innerHTML = `

<p>Создан объект:</p>

<pre>${JSON.stringify(sampleObject, null, 2)}</pre>

`;

}

Разбор:

1. Используется глобальный объект sampleObject, созданный при загрузке страницы.

2. Объект преобразуется в строку с помощью JSON.stringify() с отступами для красивого вывода.

3. Результат выводится в элемент с id="task4-result".

Вывод: Показывает структуру объекта и способ его красивого отображения на странице.

Задание 5: Стрелочная функция для объекта

Цель: Научиться получать значения свойств объекта.

Код:

javascript

Copy

Download

function getPropertyValue() {

const property = document.getElementById('property-input').value;

const resultDiv = document.getElementById('task5-result');

const getValue = (obj, key) => {

const value = obj[key];

console.log(`Значение свойства "${key}":`, value);

return value !== undefined ? value : "Свойство не найдено";

};

const value = getValue(sampleObject, property);

resultDiv.innerHTML = `<p>Значение свойства "${property}": ${JSON.stringify(value)}</p>`;

}

Разбор:

1. Получаем имя свойства из input.

2. Создаем стрелочную функцию getValue, которая:

   • Получает значение свойства объекта по ключу

   • Логирует значение в консоль

   • Возвращает значение или сообщение, если свойство не найдено

3. Вызываем функцию для введенного свойства и выводим результат.

Вывод: Демонстрирует доступ к свойствам объекта и использование стрелочных функций.

Практическое занятие 2: Работа с DOM и формами

Задание 1: Получить текст элемента

Цель: Научиться получать содержимое DOM-элемента.

Код:

javascript

Copy

Download

document.getElementById('copy-text-btn').addEventListener('click', function() {

const sourceElement = document.getElementById('source-element');

const textToCopy = sourceElement.textContent;

document.getElementById('dom-task1-result').innerHTML =

`<p>Текст элемента: "${textToCopy}"</p>`;

// Далее идет код для задания 2...

});

Разбор:

1. Добавляем обработчик события click на кнопку.

2. Получаем элемент с id="source-element".

3. Извлекаем его текстовое содержимое с помощью свойства textContent.

4. Выводим полученный текст в элемент с id="dom-task1-result".

Вывод: Показывает базовый способ работы с содержимым DOM-элементов.

Задание 2: Создать новый элемент

Цель: Научиться динамически создавать элементы DOM.

Код:

javascript

Copy

Download

const newParagraph = document.createElement('p');

newParagraph.textContent = textToCopy;

newParagraph.id = 'new-paragraph';

newParagraph.style.marginTop = '10px';

newParagraph.style.padding = '10px';

newParagraph.style.backgroundColor = '#e8f8f0';

const container = document.getElementById('new-paragraph-container');

container.innerHTML = '';

container.appendChild(newParagraph);

document.getElementById('dom-task2-result').innerHTML =

`<p>Новый абзац создан и добавлен на страницу</p>`;

Разбор:

1. Создаем новый элемент <p> с помощью document.createElement().

2. Устанавливаем его содержимое (текст из предыдущего задания).

3. Задаем id и стили через свойство style.

4. Находим контейнер, очищаем его и добавляем созданный элемент.

5. Выводим сообщение о выполнении.

Вывод: Демонстрирует динамическое создание и добавление элементов на страницу.

Задания 3-5: Работа с формой

Цель: Научиться динамически управлять формами и валидировать данные.

Основной код:

javascript

Copy

Download

const formControlBtn = document.getElementById('form-control-btn');

const formContainer = document.getElementById('form-container');

let currentForm = null;

let isFormVisible = true;

formControlBtn.addEventListener('click', function() {

const method = document.querySelector('input[name="toggle-method"]:checked').value;

if (method === 'display') {

// Метод display: none

if (!currentForm) {

createForm();

formControlBtn.textContent = 'Скрыть форму';

isFormVisible = true;

} else {

if (isFormVisible) {

currentForm.style.display = 'none';

formControlBtn.textContent = 'Показать форму';

} else {

currentForm.style.display = 'block';

formControlBtn.textContent = 'Скрыть форму';

}

isFormVisible = !isFormVisible;

}

} else {

// Метод удаления/создания

if (currentForm) {

currentForm.remove();

currentForm = null;

formControlBtn.textContent = 'Создать форму';

document.getElementById('dom-task3-5-result').innerHTML =

`<p>Форма удалена</p>`;

} else {

createForm();

formControlBtn.textContent = 'Удалить форму';

}

}

});

function createForm() {

if (currentForm) return;

const form = document.createElement('form');

form.id = 'dynamic-form';

const input = document.createElement('input');

input.type = 'email';

input.placeholder = 'Введите ваш email';

input.id = 'email-input';

input.required = true;

const button = document.createElement('button');

button.type = 'button';

button.textContent = 'Проверить email';

form.appendChild(input);

form.appendChild(button);

formContainer.appendChild(form);

currentForm = form;

// Валидация email

button.addEventListener('click', function() {

const email = input.value.trim();

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (emailRegex.test(email)) {

alert('Email валиден!');

input.style.borderColor = '';

} else {

alert('Пожалуйста, введите корректный email');

input.style.borderColor = 'red';

}

});

document.getElementById('dom-task3-5-result').innerHTML =

`<p>Форма создана и добавлена на страницу</p>`;

}

Разбор: