JavaScript оживляет страницу

Третий язык веба — JavaScript. HTML даёт странице содержимое, CSS — внешний вид, а JavaScript заставляет её что-то делать: реагировать на нажатия, менять то, что показано на странице, проверять формы или загружать новые данные. В отличие от HTML и CSS, JavaScript — язык программирования: вы пишете инструкции, которые браузер выполняет одну за другой.

На странице теперь есть кнопка, пустой абзац под ней и третий файл, script.js, который страница подключает строкой <script src="script.js"></script> в конце index.html. Вот весь скрипт:

const button = document.querySelector("#hello");
const message = document.querySelector("#message");

button.addEventListener("click", function () {
    message.textContent = "Привет! Добро пожаловать на мою страницу.";
});

Простыми словами:

• Первая строка находит на странице кнопку (элемент с id="hello") и даёт ей имя button.
• Вторая строка находит пустой абзац с id="message" и называет его message.
• Остальное означает: когда кто-то нажмёт на кнопку, положи в абзац текст в кавычках.

Нажмите на кнопку в окне предпросмотра и посмотрите, как появится текст. Пока не переживайте из-за всех этих скобок и точек с запятой. На этом пути вы научитесь сами писать HTML, CSS и JavaScript, по одному языку за раз, начиная с самого начала.