для начинающих
Эти инструкции помогут вам создать файл 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, так и в фактическом имени файла. Заглавные буквы имеют значение! - Вы определенно сохранили все свои файлы.