Где писать JavaScript код
Изначально JavaScript код размещается внутри тега <script>. Позже мы создадим отдельный JavaScript файл и подключим его с помощью этого же тега. Стандартная практика – писать JavaScript код в отдельных файлах и подключать их к HTML-странице. Это позволяет разделять код по файлам (аналогично CSS). Можно создавать несколько JavaScript файлов и подключать их к одной или нескольким HTML-страницам. Сначала будем писать код внутри тега <script>, затем подключим отдельный файл.
Вывод информации в HTML
JavaScript позволяет выводить информацию как внутри тега <body>, так и в консоли разработчика. Рассмотрим устаревший, но важный метод вывода информации внутри тега <body>.
Для вывода информации используется глобальный объект document. Он позволяет управлять DOM-структурой (набором HTML-тегов). Метод document.write() позволяет вывести текст внутри HTML-документа. Например: document.write("JavaScript говорит привет");. После обновления страницы, увидим выведенный текст. Текст добавляется после тега <script>.
Этот метод редко используется, так как не позволяет выводить информацию внутри определённого HTML-тега. Он выводит информацию сразу после тега <script>. Вместо него используются другие методы, которые мы рассмотрим позже. Сейчас закомментируем эту строку кода.
Работа с консолью разработчика
Более удобный метод – использование объекта console. Он позволяет выводить информацию для разработчика.
Вызов console.log() с передачей строки выводит информацию в консоль. Например: console.log("JavaScript говорит привет");. В консоли разработчика (правая кнопка мыши, «Просмотреть код», вкладка «Консоль») увидим выведенное сообщение. В правой части консоли отображается ссылка на файл и строку кода, выведшую сообщение.
Консоль часто используется для просмотра содержимого объектов или массивов. Она предоставляет дополнительные функции: переход к файлу, изменение кода, просмотр информации об объектах.
Методы вывода в консоль
Помимо console.log(), существует метод console.info(), функционально идентичный console.log().
Также есть методы:
- console.error(): выводит сообщение об ошибке (красным цветом). Показывает строку кода, вызвавшую ошибку, и дополнительную информацию об объекте (если передавался).
- console.warn(): выводит предупреждение (желтым цветом). Предупреждения указывают на потенциальные проблемы, которые не обязательно являются критическими ошибками.
Ошибки следует исправлять, иначе программа может не работать. Предупреждения желательно исправлять, но это необязательно. Консоль полезна для быстрого поиска и устранения ошибок в коде.
Подключение JavaScript файла
Вместо встраивания кода в тег <script>, создадим отдельный JavaScript файл (например, main.js) и подключим его к HTML-странице.
Внутри main.js пишем JavaScript код без тегов <script>. Подключаем файл с помощью атрибута src в теге <script>: <script src=»js/main.js»></script>.
При обновлении страницы, код из main.js выполнится. Если код не обновляется, возможно, файл находится в кэше. Для принудительной перезагрузки, нужно зажать клавишу Shift и нажать кнопку перезагрузки.
Мы рассмотрели методы вывода информации в HTML и консоль разработчика. В дальнейшем изучим другие способы вывода информации (всплывающие окна, вывод внутри HTML-тегов).