LearnJS

Первый скрипт на JavaScript

В прошлых уроках мы разобрали, что такое JavaScript и как его подключить к HTML. Теперь напишем первый простой скрипт и посмотрим, как он работает в браузере.

Пока нам не нужны сложные конструкции, переменные, функции и условия. На старте важнее понять общий принцип: мы пишем команду, браузер ее читает и выполняет.

Подготовка файлов

Создадим обычную HTML-страницу и отдельный JavaScript-файл. Структура проекта может быть такой:

project/
  index.html
  script.js

В файле index.html напишем базовую разметку и подключим script.js перед закрывающим тегом </body>:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первый скрипт</title>
</head>
<body>
  <h1>Моя первая страница с JavaScript</h1>

  <script src="script.js"></script>
</body>
</html>

Теперь весь JavaScript-код будем писать в файле script.js. Это удобнее, чем держать код прямо внутри HTML.

Первый скрипт через alert()

Откроем файл script.js и добавим одну строку:

alert('Привет, JavaScript!');

Сохраняем файл, открываем index.html в браузере и видим всплывающее окно с сообщением.

Что здесь происходит:

  • alert() - это встроенная функция браузера;
  • текст внутри круглых скобок будет показан пользователю;
  • текст нужно писать в кавычках;
  • точка с запятой в конце строки завершает команду.

Функция alert() удобна для первых примеров, потому что результат сразу видно на странице. Но постоянно использовать ее в реальной разработке не нужно: всплывающие окна мешают пользователю и останавливают выполнение страницы до закрытия окна.

Вывод в консоль через console.log()

Еще один частый способ проверить работу скрипта - вывести сообщение в консоль разработчика.

Заменим код в script.js:

console.log('Скрипт подключен и работает');

Теперь при открытии страницы всплывающего окна не будет. Сообщение появится в консоли браузера.

Чтобы открыть консоль, нажмите F12 и перейдите во вкладку Console. В разных браузерах внешний вид панели может немного отличаться, но смысл один: здесь можно смотреть сообщения, ошибки и результаты выполнения кода.

console.log() часто используют во время разработки. С его помощью удобно проверять, дошел ли браузер до нужной строки кода, какое значение хранится в переменной или почему что-то работает не так.

Порядок выполнения кода

JavaScript выполняет код сверху вниз. Если в файле несколько команд, браузер выполнит их по порядку.

console.log('Первая строка');
console.log('Вторая строка');
console.log('Третья строка');

В консоли сообщения появятся в таком же порядке:

Первая строка
Вторая строка
Третья строка

Это простое правило важно запомнить сразу. Позже мы будем изучать условия, циклы и функции, и там порядок выполнения кода станет еще важнее.

Можно совместить оба способа вывода:

console.log('Скрипт начал работу');
alert('Привет!');
console.log('Окно alert закрыто');

Сначала сообщение появится в консоли, потом откроется окно alert(). Пока окно не закрыто, следующая строка не выполнится. После закрытия окна браузер продолжит работу и выведет второе сообщение в консоль.

Частые ошибки новичков

Если скрипт не работает, чаще всего причина простая. На первых уроках стоит проверить несколько вещей.

1. Неверный путь к файлу

Если в HTML указано:

<script src="script.js"></script>

то файл script.js должен лежать рядом с index.html. Если он находится в папке js, путь должен быть другим:

<script src="js/script.js"></script>

2. Текст написан без кавычек

alert(Привет);

Так писать нельзя. Браузер решит, что Привет - это не текст, а имя какой-то переменной. Правильный вариант:

alert('Привет');

3. Пропущена закрывающая скобка

console.log('Привет';

В этом примере не хватает закрывающей круглой скобки. Правильно так:

console.log('Привет');

4. Файл не сохранен

Иногда код написан правильно, но изменения не сохранены. Перед обновлением страницы всегда проверяйте, что файл сохранен в редакторе.

Что дальше

Мы написали первый скрипт, подключили его к HTML и вывели сообщения двумя способами: через alert() и console.log(). Этого достаточно, чтобы начать практиковаться и проверять, выполняется ли JavaScript на странице.

Дальше разберем консоль разработчика подробнее: как ее открывать, зачем она нужна и как с ее помощью искать ошибки в коде.