Пошук уроків, статей та іншого контенту
Покрокова інструкція для створення першої програми на JavaScript
Створимо першу маленьку JavaScript-програму.
Вона:
збереже ім'я користувача;
сформує привітання;
виведе його у Console;
покаже його на сторінці.
Створіть index.html:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>My First JavaScript App</title>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="greeting"></h1>
</body>
</html>Поруч створіть:
app.jsДодайте:
const userName = "Олексій";
const message = `Привіт, ${userName}!`;
console.log(message);
const greeting = document.querySelector("#greeting");
greeting.textContent = message;Відкрийте index.html у браузері.
Ви побачите:
Привіт, Олексій!const userName = "Олексій";Створюємо змінну userName.
const message = `Привіт, ${userName}!`;Створюємо текст із використанням значення змінної.
console.log(message);Виводимо його у Console.
const greeting = document.querySelector("#greeting");Знаходимо HTML-елемент:
<h1 id="greeting"></h1>Після цього:
greeting.textContent = message;змінюємо його текст.
Наприклад:
const userName = "Марія";
const courseName = "JavaScript";
const message = `Привіт, ${userName}! Ласкаво просимо на курс ${courseName}.`;
console.log(message);
document.querySelector("#greeting").textContent = message;Це проста, але вже справжня програма: вона має дані, виконує операції та змінює інтерфейс.
Файл не підключено. Перевірте:
<script src="app.js" defer></script>Неправильний id.
HTML:
<h1 id="title"></h1>JavaScript:
document.querySelector("#greeting");Назви не збігаються.
Забули лапки.
Неправильно:
const name = Олексій;Правильно:
const name = "Олексій";Ви створили просту JavaScript-програму, яка:
зберігає дані
→ формує нове значення
→ виводить його в Console
→ змінює HTMLБільші програми працюють за значно складнішими правилами, але фундаментальна ідея залишається тією самою: програма отримує дані, обробляє їх і виконує певні дії.