В этом разделе вы найдете серию упражнений, направленных на отработку навыков изменения атрибута `href` у ссылок с использованием JavaScript. Каждое задание представляет собой практическую задачу, где вам предстоит дополнить JavaScript код, чтобы добиться желаемого результата. Задания расположены от простого к сложному, начиная с базовых операций и постепенно переходя к более комплексным сценариям. Внимательно читайте описание каждого задания и используйте подсказки, если возникнут затруднения.
Список тем
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Задание 1: Изменение `href` на абсолютный URL
Измените значение атрибута `href` у ссылки с идентификатором `myLink` на абсолютный URL "https://www.example.com".
HTML
Восстановить HTML
<a href="/relative-path" id="myLink">Ссылка</a>JavaScript
document.input__1("myLink").input__2 = "https://www.example.com";
Используйте метод `document.getElementById()` для доступа к элементу ссылки и свойство `href` для изменения атрибута.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 2: Изменение `href` на относительный URL
Измените значение атрибута `href` у ссылки с идентификатором `myLink` на относительный URL "/new-page".
HTML
Восстановить HTML
<a href="https://www.google.com" id="myLink">Ссылка</a>JavaScript
document.input__1("myLink").input__2 = "/new-page";
Аналогично предыдущему заданию, используйте `document.getElementById()` и свойство `href`, но укажите относительный путь.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 3: Изменение `href` у нескольких ссылок
Измените атрибут `href` у всех ссылок с классом `nav-link` на "#top".
HTML
Восстановить HTML
<a href="/page1" class="nav-link">Ссылка 1</a>
<a href="/page2" class="nav-link">Ссылка 2</a>
<a href="/page3" class="nav-link">Ссылка 3</a>JavaScript
const links = document.input__1(".nav-link");
links.forEach(function(link) {
link.input__2 = "#top";
});
Используйте `document.querySelectorAll()` для выбора всех ссылок с классом `nav-link` и затем переберите их, чтобы изменить `href` у каждой.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 4: Изменение `href` в зависимости от текста ссылки
Для всех ссылок с классом `dynamic-link`, если текст ссылки содержит слово "Главная", измените `href` на "/"; если содержит "Контакты", измените на "/contacts".
HTML
Восстановить HTML
<a href="#" class="dynamic-link">Главная страница</a>
<a href="#" class="dynamic-link">О нас</a>
<a href="#" class="dynamic-link">Контакты</a>JavaScript
const links = document.input__1(".dynamic-link");
links.forEach(function(link) {
if (link.input__2.input__3("Главная")) {
link.input__4 = "/";
} else if (link.textContent.input__5("Контакты")) {
link.input__6 = "/contacts";
}
});
Используйте `document.querySelectorAll()` для выбора ссылок. Внутри цикла `forEach` используйте условные операторы `if` и `else if` для проверки `textContent` ссылки и изменения `href`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 5: Изменение `href` при клике на кнопку
При клике на кнопку с id `changeButton`, измените `href` у ссылки с id `targetLink` на "https://yandex.ru".
HTML
Восстановить HTML
<button id="changeButton">Изменить ссылку</button>
<a href="#" id="targetLink">Яндекс</a>JavaScript
const button = document.input__1("changeButton");
const link = document.input__2("targetLink");
button.addEventListener("click", function() {
link.input__3 = "https://yandex.ru";
});
Сначала получите доступ к кнопке и ссылке по их id. Затем добавьте обработчик события `click` на кнопку. Внутри обработчика измените `href` ссылки.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 6: Получение и изменение `href` с использованием `getAttribute` и `setAttribute`
Получите текущий `href` атрибут ссылки с id `myLink` с помощью `getAttribute`, выведите его в консоль, а затем установите новый `href` на "/catalog" используя `setAttribute`.
HTML
Восстановить HTML
<a href="/products" id="myLink">Товары</a>JavaScript
const link = document.input__1("myLink");
const currentHref = link.input__2("href");
console.log(currentHref);
link.input__3("href", "/catalog");
Используйте `document.getElementById()` для доступа к ссылке. Примените `getAttribute("href")` для получения значения и `setAttribute("href", "/catalog")` для установки нового значения.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 7: Изменение `href` на основе данных из `data-` атрибута
Для ссылки с id `dataLink`, прочитайте значение `data-url` атрибута и установите его как `href` ссылки.
HTML
Восстановить HTML
<a href="#" id="dataLink" data-url="/profile">Профиль</a>JavaScript
const link = document.input__1("dataLink");
const dataUrl = link.dataset.input__2;
link.input__3 = dataUrl;
Используйте `document.getElementById()` для доступа к ссылке. Получите значение `data-url` атрибута через `dataset.url` и присвойте его свойству `href`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 8: Изменение `href` с использованием стрелочной функции в обработчике событий
При клике на кнопку с id `arrowButton`, измените `href` у ссылки с id `targetLink` на "https://vk.com", используя стрелочную функцию в обработчике события.
HTML
Восстановить HTML
<button id="arrowButton">Изменить ссылку</button>
<a href="#" id="targetLink">ВКонтакте</a>JavaScript
const button = document.input__1("arrowButton");
const link = document.input__2("targetLink");
button.addEventListener("click", () => {
link.input__3 = "https://vk.com";
});
Аналогично заданию 5, но используйте стрелочную функцию в `addEventListener`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 9: Изменение `href` на основе значения из `input` поля
Получите значение из поля ввода с id `urlInput` и установите его как `href` для ссылки с id `dynamicLink` при клике на кнопку `setUrlButton`.
HTML
Восстановить HTML
<input type="text" id="urlInput" placeholder="Введите URL">
<button id="setUrlButton">Установить URL</button>
<a href="#" id="dynamicLink">Динамическая ссылка</a>JavaScript
const inputField = document.input__1("urlInput");
const button = document.input__2("setUrlButton");
const link = document.input__3("dynamicLink");
button.addEventListener("click", function() {
const newUrl = inputField.input__4;
link.input__5 = newUrl;
});
Получите доступ к кнопке, ссылке и полю ввода по их id. Добавьте обработчик `click` на кнопку. Внутри обработчика получите значение из поля ввода (`value`) и установите его в `href` ссылки.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Задание 10: Изменение `href` только для внешних ссылок
Для всех ссылок на странице, если `href` начинается с "http" (внешняя ссылка), измените его на "https://external-redirect.com?url=[исходный href]".
HTML
Восстановить HTML
<a href="/local-page">Локальная страница</a>
<a href="http://example.com">Внешняя ссылка 1</a>
<a href="https://google.com">Внешняя ссылка 2</a>JavaScript
const links = document.input__1('a');
const redirectUrl = "https://external-redirect.com?url=";
links.forEach(function(link) {
if (link.input__2.input__3("http")) {
const originalHref = link.input__4;
link.input__5 = redirectUrl + originalHref;
}
});
Используйте `document.querySelectorAll('a')` для выбора всех ссылок. Переберите их. Внутри цикла проверьте, начинается ли `href` с "http" (`startsWith`). Если да, то сформируйте новый URL и установите его в `href`.
Заполнить ответами все поля
Результат
Лог
Выполнить
Отметить решенным
Показать подсказку
Загрузка...