В этой части учебника мы изучаем собственно JavaScript, сам язык.
Но нам нужна рабочая среда для запуска наших скриптов, и, поскольку это онлайн-книга, то браузер будет хорошим выбором. В этой главе мы сократим количество специфичных для браузера команд (например, alert ) до минимума, чтобы вы не тратили на них время, если планируете сосредоточиться на другой среде (например, Node.js). А на использовании JavaScript в браузере мы сосредоточимся в следующей части учебника.
Итак, сначала давайте посмотрим, как выполнить скрипт на странице. Для серверных сред (например, Node.js), вы можете выполнить скрипт с помощью команды типа «node my.js» . Для браузера всё немного иначе.
Тег «script»
Программы на JavaScript могут быть вставлены в любое место HTML-документа с помощью тега .
Перед скриптом.
. После скрипта.
Вы можете запустить пример, нажав на кнопку «Play» в правом верхнем углу блока с кодом выше.
Тег содержит JavaScript-код, который автоматически выполнится, когда браузер его обработает.
Современная разметка
Тег имеет несколько атрибутов, которые редко используются, но всё ещё могут встретиться в старом коде:
Старый стандарт HTML, HTML4, требовал наличия этого атрибута в теге . Обычно он имел значение type=»text/javascript» . На текущий момент этого больше не требуется. Более того, в современном стандарте HTML смысл этого атрибута полностью изменился. Теперь он может использоваться для JavaScript-модулей. Но это тема не для начального уровня, и о ней мы поговорим в другой части учебника.
Атрибут language : language=…>
Этот атрибут должен был задавать язык, на котором написан скрипт. Но так как JavaScript является языком по умолчанию, в этом атрибуте уже нет необходимости.
Обёртывание скрипта в HTML-комментарии.
В очень древних книгах и руководствах вы сможете найти комментарии внутри тега , например, такие:
Этот комментарий скрывал код JavaScript в старых браузерах, которые не знали, как обрабатывать тег . Поскольку все браузеры, выпущенные за последние 15 лет, не содержат данной проблемы, такие комментарии уже не нужны. Если они есть, то это признак, что перед нами очень древний код.
Внешние скрипты
Если у вас много JavaScript-кода, вы можете поместить его в отдельный файл.
Файл скрипта можно подключить к HTML с помощью атрибута src :
Здесь /path/to/script.js – это абсолютный путь от корневой папки до необходимого файла. Корневой папкой может быть корень диска или корень сайта, в зависимости от условий работы сайта. Также можно указать относительный путь от текущей страницы. Например, src=»https://learn.javascript.ru/script.js» или src=»https://learn.javascript.ru/script.js» будет означать, что файл «script.js» находится в текущей папке.
Можно указать и полный URL-адрес. Например:
Для подключения нескольких скриптов используйте несколько тегов:
JavaScript в браузере — JS: DOM API
В этом уроке мы изучим . Это тег, с помощью которого мы связываем JavaScript с веб-страницами одним из двух способов:
Инлайн-скриптинг
Внешний скриптинг
Инлайн-скрипты
Слово inline означает, что мы размещаем JavaScript прямо внутри HTML. Этот метод подходит для базовых сценариев с небольшим количеством кода:
constgreeting='hello, world!';// Он выводит приветствие на экран в модальном окне браузераalert(greeting);// На странице может быть любое количество этих тегов
В примере используется функция alert() . Она выводит на экран модальное окно с указанным текстом. В реальном коде alert() почти не используется, но ее иногда используют для обучения. Нажмите сюда , чтобы увидеть результат выполнения этой функции.
Чаще всего, таким способом подключаются скрипты внешних сервисов, например, систем аналитик . Выглядит это так:
// Код минифицирован, чтобы занимать как можно меньше места // Это ускоряет загрузку(function(i,s,o,g,r,a,m)i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() (i[r].q=i[r].q||[]).push(arguments)>,i[r].l=1*newDate();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)>)(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create','UA-XXXXX-Y','auto');ga('send','pageview');
Если вы откроете исходный код этой страницы, то увидите множество тегов с аналогичными вставками внутри HTML. Большинство этих вставок находится ближе к началу HTML, поскольку для аналитических систем важно загружать их как можно раньше, чтобы отслеживать действия пользователя.
Внешние скрипты
Во фронтенд-приложениях инлайн-скриптинг не используется. Весь код грузится через подключаемые файлы. Загружаются внешние скрипты следующим образом:
Обычно такой javascript-код проходит предварительную обработку системами сборки, например Webpack. Они оптимизируют код для браузеров, делают его меньше, удаляют ненужное и разбивают на файлы для ускорения загрузки. Подробнее об этом тут.
Порядок выполнения
По умолчанию тег выполняется в том порядке, в котором он появляется в HTML. Это работает одинаково независимо от того, работаем ли мы с внешним файлом или инлайн-скриптом. Поэтому местоположение имеет большое значение. Чем дальше мы разместим скрипт, тем быстрее пользователь увидит страницу на экране. Оптимально, все скрипты должны находиться непосредственно перед
.
Порядок загрузки можно контролировать с помощью атрибутов defer и async . Об этом можно прочитать здесь .
REPL
Есть и третий способ запуска JavaScript-кода на странице, который отлично подходит для отладки и экспериментов.
В браузере существует аналог REPL — Node.js. Чтобы воспользоваться им, найдите DevTools в меню браузера и запустите его. В нижней части экрана появится раздел с вкладкой Console. На этой вкладке вы можете выполнять любой код JavaScript, как и в серверном REPL.
Но это еще не все. Консоль связана со страницей, на которой она находится. Другими словами, отсюда мы можем управлять содержимым экрана. Обязательно обращайтесь к ней время от времени. Она понадобится нам для экспериментов в будущих уроках.
Особенности браузерного JavaScript
Браузерный и серверный JavaScript — это один и тот же язык. То есть Node.js по сути не относится к отдельным языкам программирования. Но у каждой среды есть свои особенности, о которых необходимо знать.
Модули
Большинство встроенных модулей в Node.js недоступны в браузере. Поэтому их приходится заменять библиотеками. Некоторые модули доступны как глобальные объекты. Например, URL доступен в браузере по умолчанию.
Версии
Версию JavaScript на сервере определяет программист, который ставит конкретную версию Node.js.
При фронтенд-разработке невозможно контролировать версию JavaScript, потому что мы не знаем, через какой браузер люди будут загружать страницу с нашим кодом. Что если это будет браузер, встроенный в телевизор или машину?
Вот поэтому нам не следует использовать новейшие возможности JavaScript в фронтенде. Эти функции могут не поддерживаться браузерами, поэтому некоторые пользователи вместо страницы увидят ошибки. Как решить эту проблему, мы узнаем в следующих уроках.
Браузер и контент
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
130 курсов, 2000+ часов теории
1000 практических заданий в браузере
360 000 студентов
Наши выпускники работают в компаниях:
Отладка в браузере
Давайте отвлечёмся от написания кода и поговорим о его отладке.
Отладка – это процесс поиска и исправления ошибок в скрипте. Все современные браузеры и большинство других сред разработки поддерживают инструменты для отладки – специальный графический интерфейс, который сильно упрощает отладку. Он также позволяет по шагам отследить, что именно происходит в нашем коде.
Мы будем использовать браузер Chrome, так как у него достаточно возможностей, в большинстве других браузеров процесс будет схожим.
Панель «Исходный код» («Sources»)
Версия Chrome, установленная у вас, может выглядеть немного иначе, однако принципиальных отличий не будет.
Кнопка-переключатель откроет вкладку со списком файлов.
Кликните на неё и выберите hello.js в дереве файлов. Вот что появится:
Интерфейс состоит из трёх зон:
В зоне File Navigator (панель для навигации файлов) показаны файлы HTML, JavaScript, CSS, включая изображения, используемые на странице. Здесь также могут быть файлы различных расширений Chrome.
Зона Code Editor (редактор кода) показывает исходный код.
Наконец, зона JavaScript Debugging (панель отладки JavaScript) отведена для отладки, скоро мы к ней вернёмся.
Чтобы скрыть список ресурсов и освободить экранное место для исходного кода, щёлкните по тому же переключателю .
Консоль
При нажатии на клавишу Esc в нижней части экрана вызывается консоль, где можно вводить команды и выполнять их клавишей Enter .
Результат выполнения инструкций сразу же отображается в консоли.
Например, результатом 1+2 будет 3 , а вызов функции hello(«debugger») ничего не возвращает, так что результатом будет undefined :
Точки останова (breakpoints)
Давайте разберёмся, как работает код нашей тестовой страницы. В файле hello.js щёлкните на номере строки 4 . Да-да, щёлкайте именно по самой цифре, не по коду.
Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии.
Вот что в итоге должно получиться (синим это те места, по которым вы должны щёлкнуть):
Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.
Пока исполнение поставлено «на паузу», мы можем просмотреть текущие значения переменных, выполнить команды в консоли, другими словами, выполнить отладку кода.
В правой части графического интерфейса мы видим список точек останова. А когда таких точек выставлено много, да ещё и в разных файлах, этот список поможет эффективно ими управлять:
Быстро перейдите к точке останова в коде (нажав на неё на правой панели).
Временно отключите точку останова, сняв с неё галочку.
Удалите точку останова, щёлкнув правой кнопкой мыши и выбрав Remove (Удалить).
…и так далее.
Условные точки останова
Щелчок правой кнопкой мыши по номеру строки позволяет создать условную точку останова. Она сработает только в тот момент, когда выражение, которое вы должны указать при создании такой точки, истинно.
Это удобно, когда нам нужно остановиться только при определённом значении переменной или для определённых параметров функции.
Команда debugger
Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:
function hello(name) < let phrase = `Привет, $!`; debugger; //
Такая команда сработает только если открыты инструменты разработки, иначе браузер ее проигнорирует.
Остановимся и оглядимся
В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).
Выполнение прервётся на четвёртой строчке (где находится точка останова):
Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:
Watch – показывает текущие значения для любых выражений. Вы можете нажать на + и ввести выражение. Отладчик покажет его значение, автоматически пересчитывая его в процессе выполнения.
Call Stack – показывает цепочку вложенных вызовов. В текущий момент отладчик находится внутри вызова hello() , вызываемого скриптом в index.html (там нет функции, поэтому она называется “анонимной”). Если вы нажмёте на элемент стека (например, «anonymous»), отладчик перейдёт к соответствующему коду, и нам представляется возможность его проанализировать.
Scope показывает текущие переменные. Local показывает локальные переменные функций, а их значения подсвечены прямо в исходном коде. В Global перечисляются глобальные переменные (то есть вне каких-либо функций). Там также есть ключевое слово this , которое мы ещё не изучали, но скоро изучим.
Пошаговое выполнение скрипта
А теперь давайте пошагаем по нашему скрипту.
Для этого есть кнопки в верхней части правой панели. Давайте рассмотрим их.
Возобновляет выполнение кода. Если больше нет точек останова, то выполнение просто продолжается, без контроля отладчиком.
Вот, что мы увидим, кликнув на неё:
Выполнение кода возобновилось, дошло до другой точки останова внутри say() , и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Сейчас мы внутри say() .
Выполняет следующую инструкцию. Если мы нажмём на неё сейчас, появится alert .
Нажатие на эту кнопку снова и снова приведёт к пошаговому выполнению всех инструкций скрипта одного за другим.
– «Step over»: выполнить следующую команду, но не заходя внутрь функции, быстрая клавиша F10 .
Работает аналогично предыдущей команде «Step», но ведёт себя по-другому, если следующая инструкция является вызовом функции (имеется ввиду: не встроенная, как alert , а объявленная нами функция).
Если сравнить, то команда «Step» переходит во вложенный вызов функцию и приостанавливает выполнение в первой строке, в то время как «Step over» выполняет вызов вложенной функции незаметно для нас, пропуская её внутренний код.
Затем выполнение приостанавливается сразу после вызова функции.
Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.
– «Step into», быстрая клавиша F11 .
Это похоже на «Step», но ведёт себя по-другому в случае асинхронных вызовов функций. Если вы только начинаете изучать JavaScript, то можете не обращать внимания на разницу, так как у нас ещё нет асинхронных вызовов.
На будущее просто помните, что команда «Step» игнорирует асинхронные действия, такие как setTimeout (вызов функции по расписанию), которые выполняются позже. «Step into» входит в их код, ожидая их, если это необходимо. См. DevTools manual для получения более подробной информации.
– «Step out»: продолжить выполнение до завершения текущей функции, быстрая клавиша Shift + F11 .
Продолжает выполнение и останавливает его в самой последней строке текущей функции. Это удобно, когда мы случайно вошли во вложенный вызов, используя , но это нас не интересует, и мы хотим продолжить его до конца как можно скорее.
– активировать/деактивировать все точки останова(breakpoints).
Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.
– включить/отключить автоматическую паузу в случае ошибки.
При включении, если открыты инструменты разработчика, ошибка при выполнении скрипта автоматически приостанавливает его. Затем мы можем проанализировать переменные в отладчике, чтобы понять, что пошло не так. Поэтому, если наш скрипт умирает с ошибкой, мы можем открыть отладчик, включить эту опцию и перезагрузить страницу, чтобы увидеть, где он умирает и каков контекст в этот момент.
Continue to here
Щелчок правой кнопкой мыши по строке кода открывает контекстное меню с отличной опцией под названием «Continue to here» («продолжить до этого места»).
Это удобно, когда мы хотим перейти на несколько шагов вперёд к строке, но лень устанавливать точку останова (breakpoint).
Логирование
Чтобы вывести что-то на консоль из нашего кода, существует функция console.log .
Например, это выводит в консоль значения от 0 до 4 :
Как выполнить код в браузере
Когда браузер получает веб-страницу с кодом html и javascript, то он ее интерпретирует. Результат интерпретации в виде различных элементов - кнопок, полей ввода, текстовых блоков и т.д., мы видим перед собой в браузере. Интерпретация веб-страницы происходит последовательно сверху вниз.
Когда браузер встречает на веб-странице элемент с кодом javascript, то вступает в действие встроенный интерпретатор javascript. И пока он не закончит свою работу, дальше интерпретация веб-страницы не идет.
Рассмотрим небольшой пример и для этого определим файл index.html со следующим кодом: