
- •1. Что такое ecmaScript?
- •2. Что такое типизация и какую типизацию использует JavaScript?
- •3. Типы данных в JavaScript
- •5. Стрелочные функции
- •6. Объекты в JavaScript
- •Вопросы для оценки самостоятельной работы:
- •2. Добавление / удаление классов:
- •Управление формой:
- •Создание формы:
- •Валидация email:
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;
}
Разбор:
Создаются переменные разных типов:
num - число (инициализируется 10, затем увеличивается на 5)
str - строка (к "Hello" добавляется " World!")
bool - булево значение (демонстрируется логическое отрицание)
arr - массив (добавляется элемент с помощью push())
obj - объект (доступ к свойству name)
Результаты операций собираются в строку result с HTML-разметкой.
Строка результата выводится в элемент с 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;
}
Разбор:
Используется глобальный массив numbersArray, заполненный случайными числами при загрузке страницы.
Демонстрируются три способа перебора массива:
Классический цикл for
Цикл for...in (перебирает индексы массива)
Метод forEach (современный способ перебора)
Для каждого способа формируется строка с элементами массива.
Вывод: Задание показывает разные подходы к итерации по массивам, что важно для выбора оптимального способа в разных ситуациях.
Задание 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>`;
}
}
Разбор:
Получаем значение из input и преобразуем его в число.
Проверяем, что введено действительно число (isNaN).
Проверяем наличие числа в массиве с помощью метода includes().
Если число найдено - выводим сообщение, если нет - добавляем число в массив и выводим обновленный массив.
Вывод: Демонстрирует работу с пользовательским вводом и основные операции с массивами.
Задание 4: Работа с объектом
Цель: Познакомиться с созданием и использованием объектов.
Код:
javascript
Copy
Download
function runTask4() {
document.getElementById('task4-result').innerHTML = `
<p>Создан объект:</p>
<pre>${JSON.stringify(sampleObject, null, 2)}</pre>
`;
}
Разбор:
Используется глобальный объект sampleObject, созданный при загрузке страницы.
Объект преобразуется в строку с помощью JSON.stringify() с отступами для красивого вывода.
Результат выводится в элемент с 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>`;
}
Разбор:
Получаем имя свойства из input.
Создаем стрелочную функцию getValue, которая:
Получает значение свойства объекта по ключу
Логирует значение в консоль
Возвращает значение или сообщение, если свойство не найдено
Вызываем функцию для введенного свойства и выводим результат.
Вывод: Демонстрирует доступ к свойствам объекта и использование стрелочных функций.
Практическое занятие 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...
});
Разбор:
Добавляем обработчик события click на кнопку.
Получаем элемент с id="source-element".
Извлекаем его текстовое содержимое с помощью свойства textContent.
Выводим полученный текст в элемент с 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>`;
Разбор:
Создаем новый элемент <p> с помощью document.createElement().
Устанавливаем его содержимое (текст из предыдущего задания).
Задаем id и стили через свойство style.
Находим контейнер, очищаем его и добавляем созданный элемент.
Выводим сообщение о выполнении.
Вывод: Демонстрирует динамическое создание и добавление элементов на страницу.
Задания 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>`;
}
Разбор: