Введение в JavaScript
JavaScript (JS) — это язык программирования, который делает сайты интерактивными. Если HTML — это структура, а CSS — внешность, то JavaScript — это поведение: реакции на клики, отправка форм, подгрузка данных без перезагрузки страницы, анимации и многое другое.
1. Что может JavaScript?
- Реагировать на действия пользователя (клики, движения мыши, нажатия клавиш)
- Изменять содержимое страницы (текст, картинки, стили) без перезагрузки
- Отправлять запросы на сервер и получать данные (API, fetch)
- Хранить данные в браузере (localStorage, cookies)
- Создавать анимации и игры
2. Где выполняется JavaScript?
Раньше JavaScript выполнялся только в браузере. Сейчас его можно запускать где угодно:
- В браузере — самый частый случай. JS-код встроен в веб-страницу и выполняется на компьютере пользователя.
- На сервере (Node.js) — можно писать серверную часть на JavaScript.
- В мобильных приложениях (React Native) — писать приложения для телефонов.
- В десктопных приложениях (Electron) — например, VS Code написан на JavaScript.
3. Как подключить JavaScript к странице?
Внешний файл (рекомендуется)
JS-код лежит в отдельном файле с расширением .js. В HTML подключается через тег <script>.
<script src="script.js"></script>Внутренний скрипт (тег <script>)
JS-код пишется прямо внутри HTML в теге <script>. Подходит для маленьких примеров.
<script>
alert('Привет, мир!');
</script>Инлайновый (в атрибутах) — не рекомендуется
JS-код пишется прямо в HTML-атрибутах (onclick, onmouseover). Это плохая практика.
<button onclick="alert('Привет')">Нажми</button>- Раньше его ставили в
<head>, но это замедляло загрузку страницы. - Сейчас лучше ставить перед закрывающим тегом
</body>— тогда страница сначала отрисуется, а потом загрузится и выполнится JS. - Современное решение:
<script defer>или<script async>— их можно ставить и в<head>.
4. Первая программа: alert
Функция alert() показывает всплывающее окно с сообщением.
alert('Привет, мир!');✅ При нажатии появляется всплывающее окно
5. Вывод в консоль: console.log
Функция console.log() выводит сообщение в консоль браузера. Используется для отладки.
console.log('Привет, консоль!');✅ Откройте консоль браузера (F12 → Console) и нажмите на кнопку
6. Консоль браузера
Консоль — это инструмент разработчика, где можно:
- Выполнять JS-код в реальном времени
- Видеть ошибки и предупреждения
- Отлаживать скрипты
Как открыть консоль: Нажмите F12 (или Ctrl+Shift+I), затем выберите вкладку «Console».
alert('Привет!') или 2 + 2. Это живой JavaScript!