14. Немного JavaScript
Сегодня ты познакомишься с языком, который делает сайты живыми! Его зовут JavaScript (сокращённо JS).
Если HTML — это скелет сайта, CSS — это его одежда, то JavaScript — это мозг!
Что умеет JavaScript
- Показывать сообщения.
- Реагировать, когда ты нажимаешь кнопки или двигаешь мышкой.
- Менять текст, цвет и картинки прямо на странице.
Первое сообщение
Создай новый файл script.js или просто вставь код в HTML между тегами <script> и </script>:
<script>
alert('Привет! Добро пожаловать на мой сайт!');
</script>
Когда ты откроешь страницу в браузере, появится окно с сообщением. Да, ты только что заставил сайт заговорить с тобой!
Подключаем отдельный файл
Можно хранить код JavaScript в отдельном файле — это удобнее:
<script src="script.js"></script>
А в файле script.js напиши:
alert('Это мой первый JavaScript!');
Теперь код будет работать точно так же, но станет аккуратнее.
Реакция на действия
JavaScript может слушать, что делает пользователь. Например — клик по кнопке.
<button onclick="alert('Ты нажал кнопку!')">Нажми меня!</button>
Когда нажмёшь кнопку — появится сообщение!
Изменим текст с помощью JS
JavaScript может менять текст прямо на странице.
<h2 id="title">Привет!</h2>
<button onclick="document.getElementById('title').innerText = 'Ты изменил текст!'">Измени текст</button>
Здесь мы использовали команду document.getElementById() — она ищет элемент с определённым ID и может его изменить.
Меняем цвет
Попробуем сделать, чтобы при нажатии цвет текста менялся:
<p id="text">Я люблю кодить!</p>
<button onclick="document.getElementById('text').style.color = 'red'">Красный</button>
<button onclick="document.getElementById('text').style.color = 'blue'">Синий</button>
Теперь при нажатии кнопки текст меняет цвет!
Мини-проект
Сделай свой первый «реагирующий» сайт:- Добавь приветственное сообщение при загрузке страницы.
- Сделай кнопку, которая меняет цвет фона.
- Добавь надпись, которая меняется при клике.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой умный сайт</title>
</head>
<body>
<h1 id="hi">Привет!</h1>
<button onclick="document.body.style.background='lightblue'">Изменить фон</button>
<button onclick="document.getElementById('hi').innerText='Ты классный! '">Сообщение</button><script>
alert('Добро пожаловать на мой сайт!');
</script>
</body>
</html>
Теперь твой сайт не просто страница — он реагирует на тебя!
Забавный факт
JavaScript появился в 1995 году, и его придумали всего за 10 дней! Теперь без него не работает почти ни один сайт в мире.Главное запомни
- JavaScript делает сайт интерактивным.
- alert() показывает сообщение.
- onclick — это действие при нажатии кнопки.
- document.getElementById() помогает менять элементы на странице.
Проверь себя
- Что делает команда alert()?
- Какой атрибут добавляют к кнопке, чтобы она реагировала?
- Как изменить текст с помощью JavaScript?