Подключение и выполнение JavaScript кода в браузере. Базовый синтаксис языка
В данном курсе код JavaScript будет запускаться в среде браузера, поэтому для дальнейшей разработки необходимо иметь базовое представление о структуре веб-страницы. Типичная веб-страница представляет собой текстовый файл в формате HTML (HyperText Markup Language) — язык разметки, который используется для формирования структуры веб-страниц. Любой документ на языке HTML представляет собой набор элементов, причём начало и конец каждого элемента обозначается специальными пометками — тегами. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега ). Атрибуты указываются в открывающем теге. Вот примеры фрагментов HTML-документа:
Текст между двумя тегами — открывающим и закрывающим. href="http://www.example.com">Здесь элемент содержит атрибут href, то есть гиперссылку. А вот пример пустого элемента: . Это тег переноса строки и поэтому у него нет ни содержания, ни закрывающего тега. Разметка HTML позволяет располагать контент страницы в необходимом вам порядке. Базовый шаблон HTML страницы выглядит так
charset="utf-8"> Заголовок Страницы Само содержание страницы Чтобы придать стиль отображения содержимому страницы, например, изменить цвет фона или размер шрифта, используется язык стилей CSS (Cascading Style Sheets, или каскадные таблицы стилей). Этот язык тоже имеет свой собственный синтаксис. Подробнее о HTML можно прочитать здесь, а о CSS — здесь. А JavaScript, в свою очередь, находит в браузерах широкое применение как язык сценариев для придания интерактивности веб-страницам.
Добавление JavaScript на страницу и запуск в браузере
Так как это курс сфокусирован на изучении самого языка JavaScript, понимание его основных концепций и тонкостей разработки на нём, то в рамках данного курса будет достаточно понимания того, каким образом можно добавить код JavaScript на HTML страницу, для дальнейшего его выполнения при запуске этой страницы в браузере. Код JavaScript можно встроить на HTML страницу с помощью тега , например
charset="utf-8"> Заголовок Страницы Само содержание страницы alert( "Код JavaScript запустился!" ); В данном случае тег содержит сам исполняемый код. Когда браузер доходит на странице до этого тега, он его не отображает, а выполняет. В данном коде вызывается встроенный в браузер метод alert(«Сообщение») , который отображает на странице модальное окно с указанным сообщением.
Чаще всего, программа JavaScript, которую необходимо выполнить на странице, содержит в себе много кода. Поэтому вместе того, чтобы добавлять его напрямую на HTML страницу, его выносят в отдельный файл с расширением .js и отдельно подключают к странице следующим образом:
charset="utf-8"> Заголовок Страницы Само содержание страницы src="/path/script.js"> В данном случае подключение происходит тоже с помощью тега , только в этом случае, вместо вставки в него кода, к нему добавляется атрибут src в котором прописывается путь к файлу JavaScript. Этот путь может быть как абсолютным, так и относительным к текущей странице. Когда браузер дойдет до этого тега, то сначала он загрузит этот файл, а потом выполнит. Исходники страниц с встроенным и внешним скриптом можно скачать по этой ссылке и потом запустить соответствующие HTML-страницы в браузере.
Базовый синтаксис JavaScript
Как и у других языков программирования, у JavaScript есть свой синтаксис. Исходный код скриптов сканируется слева направо и преобразуется в последовательность найденных элементов, которые несут в себе определенный смысл для языка JavaScript, например, ключевые слова ( if , else , while , return и прочие), литералы ( true , false , null и т.д.), пробелы, окончания строк или комментарии. А также JavaScript чувствителен к регистру и использует кодировку символов Unicode.
Каждая программа — это набор команд. В JavaScript команды разделяются точкой с запятой ( ; ). Если в коде после той или иной инструкции не стоит точка с запятой, то во время разбора кода, они будут расставляться автоматически, что может привести к некоторым ошибкам или неочевидной работе программы.
Чтобы упросить чтение и понимание кода используются комментарии. С их помощью можно добавлять подсказки, заметки, предложения или предупреждения. Для оформления однострочных комментариев используются // , многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */ .
// Это однострочный комментарий alert("Привет!"); /* Этот комментарий располагается на нескольких линиях. Обратите внимание, что вам не нужно обрывать комментарий, пока вы его не закончите*/ alert("Пока!"); /*Такой комментарий тоже может быть однострочным*/ При этом нельзя вкладывать друг в друга комментарии, это приведет к синтаксической ошибке
/* Нельзя вкладывать /* комментарии */ друг в друга */ > Uncaught SyntaxError: Unexpected identifier Дата изменения: February 26, 2023
Поделиться
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!
Как выполнить код в браузере
Когда браузер получает веб-страницу с кодом html и javascript, то он ее интерпретирует. Результат интерпретации в виде различных элементов — кнопок, полей ввода, текстовых блоков и т.д., мы видим перед собой в браузере. Интерпретация веб-страницы происходит последовательно сверху вниз.
Когда браузер встречает на веб-странице элемент с кодом javascript, то вступает в действие встроенный интерпретатор javascript. И пока он не закончит свою работу, дальше интерпретация веб-страницы не идет.
Рассмотрим небольшой пример и для этого определим файл index.html со следующим кодом:
METANIT.COM Первый заголовок
Второй заголовок
Здесь три вставки кода javascript — один в секции и по одному после каждого заголовка.
Откроем веб-страницу в браузере и мы увидим, что браузер последовательно выполняет код веб-страницы:
Здесь мы видим, что вначале выполняется код javascript из секции head, который выводит на веб-страницу некоторый текст:
document.write("Начальный текст");
Далее выводится первый стандартный html-элемент :
Первый заголовок
После этого выполняется вторая вставка кода на javascript:
document.write("Первый текст");
Затем выводится второй html-элемент :
Второй заголовок
И в конце выполняется последняя вставка кода на javascript:
document.write("Второй текст");
После этого браузер закончит интерпретацию веб-страницы, и веб-страница окажется полностью загружена. Данный момент очень важен, поскольку может влиять на производительность. Поэтому нередко вставки кода javascript идут перед закрывающим тегом
