Условие
В файле
script.js
уже лежит программа: она собирает адрес страницы и текст приветствия,
затем показывает их в
#out.
Текст на странице может выглядеть «почти правильно», но способ сборки строк
не тот, что изучали в уроке про шаблонные строки.
Писать программу заново не нужно - найдите
catalogUrl
и
welcomeText
и подумайте: переменные сейчас склеиваются снаружи или должны
попасть внутрь строки - как в уроке про шаблонные строки?
HTML и CSS не меняйте. Сверяйтесь с вкладкой
«Результат».
Что нужно сделать
-
Исправьте сборку адреса
(
catalogUrl): переменная раздела должна попасть внутрь строки, а не склеиваться с ней снаружи. Вспомните шаблонную строку из урока. -
Исправьте сборку приветствия
(
welcomeText): имя и раздел - тоже внутрь одной строки, а не кусками через+. - Когда обе строки собраны правильно, на странице должен быть текст как во вкладке «Результат».
Подсказка для новичка
Не дописывайте новые строки снизу и не пишите программу с нуля.
Правите только уже существующие объявления в
script.js.
Сравните вид кавычек и знаков между частями строки с тем, что было в уроке.
Подробнее - в «Дополнительной информации».
Стартовый код
Код с ошибками уже в редакторе слева. Исправьте сборку строк, сверьте с вкладкой «Результат» и нажмите Проверить. Кнопка Помощник - если совсем застряли.
Вот так должно получиться
В блоке #out URL и приветствие:
Как пользоваться IDE
- Предпросмотр — как выглядит ваша страница.
- Результат — какой итог должен получиться.
- Описание задачи — полное условие и справка.
- Задание — краткие шаги 1–2–3 снизу.
- Помощник — подсказки по шагам.
- Черновик — ссылка на ваш код.
- Сброс кода — стартовый шаблон.
Свойства этой задачи
<!DOCTYPE html>- объявление документа HTML5.<html lang="ru">- корневой тег страницы; атрибут lang="ru" - язык интерфейса.<head>- служебная «шапка»: кодировка, title, подключение CSS.<meta charset="UTF-8" />- кодировка символов (кириллица отображается корректно).<title>- текст на вкладке браузера («Интерполяция»).<link rel="stylesheet" href="style.css" />- подключает файл style.css к странице. Без этой строки стили из CSS не применяются.<body>- видимая часть страницы: всё, что пользователь видит в превью.<p id="out" aria-live="polite">- абзац с id="out".<script src="script.js">- подключает JavaScript-файл script.js.body → font-family: Arial, sans-serif- семейство шрифта: Arial, sans-serif. Задаёт, каким шрифтом рисовать текст.body → margin: 24px- внешний отступ 24px. Отодвигает блок от краёв родителя / страницы.body → background: #eff6ff- цвет (или заливка) фона: #eff6ff.#out → font-family: ui-monospace, monospace- семейство шрифта: ui-monospace, monospace. Задаёт, каким шрифтом рисовать текст.#out → font-size: 18px- размер шрифта: 18px.#out → line-height: 1.5- межстрочный интервал: 1.5.#out → color: #1e3a8a- цвет текста: #1e3a8a.#out → margin: 0- внешний отступ 0. Отодвигает блок от краёв родителя / страницы.#out → padding: 20px 22px- внутренний отступ 20px 22px - пространство между рамкой и содержимым.#out → background: #fff- цвет (или заливка) фона: #fff.#out → border: 1px solid #93c5fd- рамка: 1px solid #93c5fd (толщина, стиль линии, цвет).#out → border-radius: 8px- скругление углов: 8px.const- объявление константы (ссылку нельзя переназначить).textContent- текстовое содержимое элемента.`...`- шаблонная строка (обратные кавычки).
Слева файлы редактора: script.js (здесь ищите ошибки), index.html и style.css (готовая разметка и стили - менять не нужно).
Обычные кавычки и склейка
Строки в обычных кавычках
('
или
")
можно соединять знаком
+.
При нескольких переменных получается длинная цепочка кусков.
Откройте
catalogUrl
и
welcomeText
- похоже ли это на такой старый способ?
Шаблонная строка
В уроке изучали другой вид кавычек - обратные
(`).
Внутри такой строки переменную можно «встроить» прямо в текст
(специальная запись с
${…}).
Спросите себя: какие кавычки стоят у
catalogUrl
и
welcomeText
сейчас - и какие нужны по уроку?
Как искать ошибки
1) Найдите объявление адреса страницы.
2) Найдите объявление приветствия.
3) Сравните способ сборки с темой «шаблонные строки».
Вывод в
#out
уже есть - его можно оставить.
Новые строки дописывать не нужно.