Условие
В файле
script.js
уже лежит программа: она должна показать на странице
Ширина левой границы: 2px.
Сейчас предпросмотр пустой - код падает с ошибками.
Писать программу заново не нужно: откройте
script.js,
внимательно прочитайте строки и найдите, что не так.
Вспомните темы урока: как в JavaScript объявляют переменные,
зачем нужен единый стиль имени
(camelCase)
и чем отличается объявление, которое позволяет потом
изменить значение.
Сверяйтесь с вкладкой «Результат».
Что нужно сделать
- Посмотрите на первую строку: каким словом объявлена переменная? Вспомните из урока - в JavaScript для этого есть только несколько специальных слов. Если видите «чужое» слово - замените его на подходящее.
-
Сравните имя переменной в разных строках.
Если где-то написано через подчёркивания, а где-то «склеено»
без них - для языка это уже две разные переменные.
Выберите один стиль
camelCaseи сделайте имя одинаковым везде (удобный ориентир - строка сtextContent). - Ниже значение переменной меняется. Подумайте: какое объявление это допускает, а какое - нет. Когда всё верно, на странице появится Ширина левой границы: 2px.
Ожидаемый вид
На странице текст: Ширина левой границы: 2px. Сверьте с вкладкой «Результат».
Подсказка для новичка
Не дописывайте новые строки снизу и не копируйте «эталон» из головы.
Правите только уже существующие строки в
script.js.
Читайте код сверху вниз: сначала объявление, потом присваивание,
потом вывод. Если что-то «не бьётся» между строками - там и ошибка.
Справка по темам урока - в «Дополнительной информации».
Стартовый код
Код уже в редакторе слева (с ошибками). HTML и CSS не меняйте.
Найдите и исправьте ошибки в
script.js,
сверьте с вкладкой «Результат»
и нажмите Проверить.
Кнопка Помощник - если совсем застряли (лучше сначала подумать самим).
Вот так должно получиться
Правильный текст на странице:
Как пользоваться 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: #fff7ed- цвет (или заливка) фона: #fff7ed.#out → font-family: ui-monospace, monospace- семейство шрифта: ui-monospace, monospace. Задаёт, каким шрифтом рисовать текст.#out → font-size: 18px- размер шрифта: 18px.#out → line-height: 1.5- межстрочный интервал: 1.5.#out → color: #9a3412- цвет текста: #9a3412.#out → margin: 0- внешний отступ 0. Отодвигает блок от краёв родителя / страницы.#out → padding: 20px 22px- внутренний отступ 20px 22px - пространство между рамкой и содержимым.#out → background: #fff- цвет (или заливка) фона: #fff.#out → border: 1px solid #fdba74- рамка: 1px solid #fdba74 (толщина, стиль линии, цвет).#out → border-radius: 8px- скругление углов: 8px.document.getElementById("out")- найти элемент с id="out" в DOM.textContent- текстовое содержимое элемента (безопасно для обычного текста).var/let/const- три слова, которыми в JS объявляют переменные.camelCase- стиль имени: слова склеивают, каждое следующее с большой буквы, без подчёркиваний.
Слева файлы редактора: script.js (здесь ищите ошибки), index.html и style.css (готовая разметка и стили - менять не нужно).
Как объявляют переменные
В современном JavaScript переменную объявляют одним из трёх слов:
var,
let
или
const.
Слова из других языков (например
int,
final
и похожие) сюда не подходят - браузер просто не поймёт строку.
Откройте первую строку в редакторе и спросите себя:
«Это одно из трёх слов JS - или что-то чужое?»
camelCase - стиль имён
В JavaScript имена принято писать в
camelCase:
слова склеивают, каждое следующее - с большой буквы
(как «левая + Граница + Ширина»).
Стиль через подчёркивания
(snake_case)
- это уже другое имя.
Если объявили одним способом, а ниже обратились другим -
программа «не видит» переменную.
Когда значение меняют
Одно объявление позволяет потом записать новое значение, другое - нет (ссылку нельзя переназначить). Посмотрите в коде: есть ли строка, где той же переменной присваивают другое число? От этого зависит, какое слово объявления подходит.
Как искать ошибки
Идите сверху вниз и задавайте себе вопросы:
1) слово объявления - из урока JS?
2) имя в объявлении, в присваивании и в
textContent
- одно и то же?
3) можно ли менять значение после объявления?
Новые строки дописывать не нужно - правьте то, что уже есть.