для начинающих

Эти инструкции помогут вам создать файл JavaScript, добавить его на свою веб-страницу и проверить, что он работает.

1 | Создайте файл JavaScript

В своем проекте в той же папке, что и ваша страница index.html, создайте новый файл с именем my-project.js. Весь код JavaScript вашего проекта должен быть написан в .js файлах.

2 | Добавьте тестовый код в файл

В свой новый файл my-project.js добавьте следующий код:

console.log('It works!');

Этот код покажет сообщение «Работает!» в окне вывода разработчика вашего браузера, которое мы скоро рассмотрим.

3 | Добавьте файл на свою веб-страницу

В вашем index.html файле добавьте тег script, чтобы загрузить новый код JavaScript. Тег скрипта должен быть последней строкой кода перед закрывающим тегом body.

Это строка, которую вам нужно добавить:

<script src="my-project.js"></script>

А это пример HTML-файла, включающего новую строку:

<!doctype html>
<html>
    <head>
        <title>Example Page</title>
    </head>
    <body>
        <h1>Welcome to my Example Page</h1>
        <p>This is some page content.</p>
        <script src="my-project.js"></script>
    </body>
</html>

4 | Сохраните ваши файлы

Убедитесь, что вы сохранили все свои файлы, особенно новый my-project.js и изменения в index.html.

5 | Откройте веб-страницу в Google Chrome

В браузере папок обычной операционной системы найдите свой index.html файл. Щелкните файл правой кнопкой мыши и выберите «Открыть в Google Chrome».

6 | Откройте консоль разработчика.

В Chrome нажмите на меню параметров в правом верхнем углу, которое выглядит как три маленькие точки. Перейдите в Дополнительные инструменты, затем нажмите Инструменты разработчика.

В инструментах разработчика щелкните вкладку Консоль, и вы увидите сообщение «Работает!»

Если вы не видите сообщение, вам необходимо дважды проверить, правильно ли вы выполнили шаги.

Краткое резюме

Вот все шаги в упрощенном виде:

  • Создайте новый файл JavaScript с некоторым console.log() тестовым кодом.
  • Загрузите файл JavaScript с помощью тега сценария в вашем HTML.
  • Используйте Инструменты разработчика, чтобы убедиться, что сообщение отображается.

После успешного отображения тестового сообщения вы можете добавить в файл любой другой код JavaScript, который хотите.

Общие проблемы

Если ваше сообщение не появляется, проверьте следующее:

  • В вашем коде JavaScript нет ошибок.
  • В вашем HTML-коде нет ошибок.
  • У вас есть оба открывающего <script> и закрывающего </script> тега.
  • Теги скрипта были добавлены на каждую HTML-страницу, в которую должен быть включен JavaScript (мы добавили его только в index.html).
  • Имя файла my-project.js пишется совершенно одинаково как в HTML, так и в фактическом имени файла. Заглавные буквы имеют значение!
  • Вы определенно сохранили все свои файлы.