Как работает javascript в браузере

Как работает JavaScript [Объясняю визуально]

JavaScript — один из самых любимых и в то же время ненавистных языков в мире. Его любят, потому что он мощный. Вы можете создать полнофункциональное приложение, просто изучив JavaScript и ничего более. А также его ненавидят, потому что иногда он ведет себя совершенно неожиданным образом. И это может расстроить или даже заставить вас возненавидеть его.

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

Контекст выполнения

«Все в JavaScript происходит внутри контекста выполнения (Execution Context)»

Было бы круто, чтобы вы запомнили эту фразу, потому что она очень важна. Скажем, что этот контекст выполнения является большим контейнером, вызываемым, когда браузер хочет запустить какой-то код JavaScript.

В этом контейнере есть два компонента: 1. Компонент памяти. 2. Компонент кода.

Компонент памяти также известен как переменная среды. В этом компоненте памяти переменные и функции хранятся в виде пар ключ-значение.

Компонент кода — это место в контейнере, где код выполняется по одной строке за раз. У этого компонента кода тоже есть необычное название, а именно «Поток выполнения» (Thread of Execution).

JavaScript — это синхронный однопоточный язык. Все потому, что он может выполнять только одну команду за раз и в определенном порядке.

Выполнение кода

Возьмем простой пример:

var a = 2; var b = 4; var sum = a + b; console.log(sum);

В этом простом примере мы инициализируем две переменные, a и b, и сохраняем 2 и 4 соответственно. Затем мы складываем значение a и b и сохраняем его в переменной суммы.

Посмотрим, как JavaScript выполнит код в браузере.

Браузер создает глобальный контекст выполнения с двумя компонентами, а именно с памятью и компонентами кода.

Браузер выполнит код JavaScript в два этапа.

1. Фаза выделения памяти
2. Этап выполнения кода

На этапе выделения памяти JavaScript сканирует весь код и выделяет память для всех переменных и функций в коде. Для переменных JavaScript будет хранить undefined на этапе выделения памяти, а для функций он сохранит весь код функции, который мы рассмотрим в следующем примере.

Теперь, на 2-м этапе, то есть при выполнении кода, он начинает проходить весь код построчно. Когда он встречает var a = 2, он присваивает значение 2 переменной ‘a’. До сих пор значение «а» не было определено.

То же самое и с переменной b. Он присваивает 4 переменной «b». Затем он вычисляет и сохраняет значение суммы в памяти, равное 6. Теперь, на последнем шаге, он выводит значение суммы в консоль, а затем уничтожает глобальный контекст выполнения по мере завершения нашего кода.

Как вызываются функции в контексте выполнения?

Функции в JavaScript, если сравнивать их с другими языками программирования, работают по-другому.

Возьмем простой пример:

var n = 2; function square(num) < var ans = num * num; return ans; >var square2 = square(n); var square4 = square(4);

В приведенном выше примере есть функция, которая принимает в качестве аргумента число и возвращает его квадрат.

JavaScript создаст глобальный контекст выполнения и выделит память для всех переменных и функций на первом этапе, когда мы запустим код, как показано ниже.

Что касается функций, он сохранит всю функцию в памяти.

А вот и самое интересное: когда JavaScript запускает функции, он создает контекст выполнения внутри глобального контекста выполнения.

Когда он встречает var a = 2, он присваивает значение 2 переменной ‘n’. Строка номер 2 — это функция, и поскольку функции была выделена память ранее, все сразу перейдет к строке номер 6.

Переменная square2 вызовет функцию square, а javascript создаст новый контекст выполнения.

Этот новый контекст выполнения для функции square выделит память всем переменным, присутствующим в функции на этапе выделения памяти.

После выделения памяти всем переменным внутри функции код будет выполняться построчно. Будет получено значение num, равное 2 для первой переменной, а затем вычислено ans. После вычисления ans возвратится значение, которое будет присвоено square2.

Как только функция вернет значение, она уничтожит свой контекст выполнения по завершении работы.

Теперь он будет следовать аналогичной процедуре для строки номер 7 или переменной square4, как показано ниже.

Как только весь код будет выполнен, глобальный контекст выполнения также будет уничтожен, и именно так JavaScript будет выполнять код.

Стек вызовов

Когда функция вызывается в JavaScript, JS создает контекст выполнения. Контекст выполнения будет усложняться, поскольку мы добавляем функции внутрь функции.

JavaScript управляет созданием и удалением контекста выполнения кода с помощью стека вызовов. Стек — это упорядоченный набор элементов, в котором добавление новых элементов и удаление существующих элементов всегда происходит «с одной стороны». Первый элемент, добавленный в стек, будет удален оттуда последним. Этот принцип называется FILO.

Стек вызовов — это механизм, позволяющий отслеживать свое место в скрипте, вызывающем несколько функций.

function a() < function insideA() < return true; >insideA(); > a();

Мы создаем функцию «a», которая вызывает другую функцию «insideA», которая возвращает значение true. Я знаю, что код бессмысленный и ничего не делает, но он поможет нам понять, как JavaScript обрабатывает коллбеки (функции обратного вызова).

JavaScript создаст глобальный контекст выполнения. Глобальный контекст выполнения выделит память для функции ‘a’ и вызовет ‘function a’ на этапе выполнения кода. Контекст выполнения создается для функции a, которая размещается над глобальным контекстом выполнения в стеке вызовов.

Функция a назначит память и вызовет функцию insideA. Контекст выполнения создается для функции insideA и помещается над стеком вызовов ‘function a’. Теперь эта функция insideA вернет true и будет удалена из стека вызовов. Поскольку внутри ‘function a’ нет кода, контекст выполнения будет удален из стека вызовов.

Наконец, глобальный контекст выполнения также удаляется из стека вызовов.

• js
• как работает javascript

Инструкция по включению или отключению JavaScript

При полном или частичном цитировании гиперссылка на сайт www.vyatsu.ru обязательна!

JavaScript — это язык программирования, с помощью которого страницы сайтов в браузере становятся интерактивными. Например, при наведении указателя мыши появляется контекстная подсказка, меняется фон или размер фотографии, при отправке формы проверяется заполнение обязательных полей и многое другое. Для полноценной работы и корректного отображения сервисов Яндекса в вашем браузере должна быть включена поддержка JavaScript.

Яндекс.Браузер

1. Нажмите кнопку → Настройки.
2. Нажмите ссылку Показать дополнительные настройки внизу страницы.
3. В блоке Личные данные нажмите кнопку Настройки содержимого.
4. В разделе JavaScript установите значение Разрешить JavaScript на всех сайтах или Запретить JavaScript на всех сайтах.
5. Нажмите кнопку Готово, чтобы сохранить изменения.

Internet Explorer

1. Нажмите кнопку и выберите пункт Свойства браузера.
2. Перейдите на вкладку Безопасность и выберите зону Интернет, затем нажмите кнопку Другой.
3. Чтобы отключить JavaScript: в разделе Сценарии → Активные сценарии и Выполнять сценарии приложений Java выберите пункт Отключить. Чтобы включить JavaScript: в разделе Сценарии → Активные сценарии и Выполнять сценарии приложений Java выберите пункт Включить.
4. Чтобы сохранить изменения, нажмите кнопку ОК в окне Параметры безопасности — зона Интернета, затем нажмите кнопку Применить в окне Свойства браузера.

Microsoft Edge

1. Нажмите сочетание клавиш Win + R.
2. В окне Выполнить введите команду gpedit.msc и нажмите клавишу Enter.
3. Нажмите Конфигурация компьютера → Административные шаблоны → Компоненты Windows → Microsoft Edge → Позволяет запускать сценарии, например JavaScript.
4. В открывшемся меню выберите опцию Включено или Отключено и нажмите кнопку Ок.

Google Chrome

1. Нажмите кнопку → Настройки.
2. Нажмите ссылку Показать дополнительные настройки внизу страницы.
3. В блоке Личные данные нажмите кнопку Настройки контента.
4. В разделе JavaScript установите значение Разрешить всем сайтам использовать JavaScript или Запретить выполнение JavaScript на всех сайтах.
5. Нажмите кнопку Готово, чтобы сохранить изменения.

Mozilla Firefox

Примечание. Определите версию вашего браузера — для этого просто перейдите на страницу http://yandex.ru/internet/.

• Версия 23 и выше
• Версии 22 и ниже

В Mozilla Firefox версии 23 и выше вручную включать JavaScript не требуется — опция включена по умолчанию.

Чтобы отключить JavaScript, выполните следующие действия:

1. В адресной строке браузера введите команду about:config.
2. В открывшемся окне нажмите кнопку Я обещаю, что буду осторожен!.
3. В строке Поиск введите javascript.enabled.
4. Правой кнопкой мыши выделите строки с состоянием по умолчанию и нажмите Переключить.

Примечание. Чтобы включить JavaScript обратно, выполните перечисленные выше действия, только на шаге №4 выделите строки с состоянием установлено пользователем .

1. В меню Инструменты выберите пункт Настройки.
2. Чтобы отключить JavaScript, перейдите в раздел Содержимое и отключите опцию Использовать JavaScript. Чтобы включить JavaScript, перейдите в раздел Содержимое и поставьте флажок Использовать JavaScript.
3. Нажмите кнопку ОК, чтобы сохранить изменения.

Opera

Примечание. Определите версию вашего браузера — для этого просто перейдите на страницу http://yandex.ru/internet/.

• Версия 15 и выше
• Версия с 10.5 по 14

1. Нажмите сочетание клавиш Alt + P.
2. На вкладке Сайты в блоке JavaScript установите значение Разрешить выполнение JavaScriptили Запретить выполнение JavaScript.

1. В меню Настройки выберите пункт Общие настройки.
2. В открывшемся окне перейдите на вкладку Дополнительно. Выберите пункт меню Содержимое и отключите опции (Включить JavaScript и Включить Java).
3. Чтобы сохранить изменения, нажмите кнопку ОК.

Safari

1. В меню Safari нажмите Настройки → Безопасность.
2. В разделе Веб-контент, если необходимо, отключите опцию Включить JavaScript.

Включение JavaScript в Mozilla Firefox и Internet Explorer

Для нормальной работы с системой управления Ural.CMS Вам потребуется включить в браузере поддержку JavaScript. По умолчанию при стандартных настройках данная функция включена.

Включение JavaScript в Internet Explorer

Для включения поддержки JavaScript в Internet Explorer Вам необходимо:

1. Выбрать в панели инструментов «Сервис»

2. Открыть пункт меню «Свойства обозревателя»

3. Выбрать вкладку «Безопасность», далее нажать кнопку «Другой»

4. Найти пункт «Активные сценарии» — включить

6. Если информация изложенная выше не помогла, то попробуйте установить в браузере стандартные настройки (по умолчанию) — данная функция также доступна во вкладке «Безопасность».

Включение JavaScript в Mozilla Firefox

Для включения поддержки JavaScript в Mozilla Firefox Вам необходимо:

1. Выбрать в меню браузера «Инструменты», в выпавшем списке выбрать «Настройки»

2. В разделе «Настройки» выбрать вкладку «Содержимое», включить «Использовать JavaScript»

3. Сохранить настройки используя кнопку «OK»

Если указанные выше действия не помогли и сценарии JavaScript до сих пор не работают, то необходимо проверить настройки антивирусной программы, установленной на Вашем компьютере, в частности добавить адрес редактора сайта в список доверительных сайтов.

Как поймать баг в коде: отладка в браузере

Теперь шагнём дальше — изучим отладку скриптов в браузере и посмотрим, чем она может нам помочь.

Что такое отладка

Отладка — это поиск и исправление ошибок в программе. Например, мы написали скрипт, добавили его на страницу, настроили запуск по нажатию кнопки — а при нажатии ничего не происходит. При этом в консоли нет никаких ошибок — все команды верные, браузер просто что-то делает, а результата нет. Отладка нужна как раз для того, чтобы найти ошибку и исправить её.

Варварская отладка

Самый примитивный вариант отладки — добавить в код на JavaScript метод console.log(), поместив в скобки нужные данные для отладки. Console.log() — это просто способ вывести в консоль какой-нибудь текст.

Например, внутри функции можно сказать: console.log(‘Вызвана такая-то функция’) — и в нужный момент мы увидим, что функция вызвалась (или нет).

Минус этого подхода в том, что в коде появляется много отладочного мусора. А ещё, если мы не предусмотрели логирование для какой-то функции, то мы не поймаем в ней ошибку.

К счастью, помимо console.log() человечество изобрело много удобных инструментов отладки.

Что нужно для отладки

Для несложных проектов на JavaScript проще всего использовать встроенный отладчик в браузере Google Chrome. Единственное ограничение — он работает только с файлами скриптов, а не со встроенным в страницу кодом. Это значит, что если код скрипта находится внутри HTML-файла внутри тега , то отладка не сработает.

Чтобы открыть панель отладки в Chrome, нажимаем ⌘+⌥+I и переходим на вкладку Sources (Источники):

Открываем скрипт

Допустим, мы хотим посмотреть, как работает скрипт из задачи про выпечку и как он перебирает все варианты.

Всё, что у нас есть, — это код. Чтобы мы смогли его отладить, его нужно положить в отдельный файл скрипта, присоединить к HTML-документу и запустить в браузере.

Открываем любой текстовый редактор, например Sublime Text, вставляем код скрипта и сохраняем файл как temp.js. Имя может быть любым, а после точки всегда должно стоять js — так браузер поймёт, что перед нами скрипт.

После этого в новом файле вставляем шаблон пустой HTML-страницы и подключаем наш скрипт — добавляем в раздел такую строку:

Получиться должно что-то вроде такого:

Сохраняем этот код как HTML-файл, например index.html, и кладём в ту же папку, что и скрипт. Теперь заходим в папку и дважды щёлкаем по HTML-файлу, чтобы открыть эту страницу в браузере:

На странице ничего нет, но нам нужна не страница, а скрипт, поэтому находим слева наш файл temp.js и нажимаем на него — откроется код скрипта. Теперь можно начинать отладку:

Добавляем точки остановки

Точка остановки — это место, в котором наш скрипт должен остановиться и ждать дальнейших действий программиста. Их ещё называют брейкпоинты, от английского breakpoint — точка, где всё останавливается.

Когда скрипт доходит до этой точки, он ставит скрипт на паузу. При этом все данные и значения переменных скрипта остаются в памяти — в них можно заглянуть.

Брейкпоинт нужен для того, чтобы выполнить скрипт по шагам, начиная с первой команды. Чтобы его установить, нажимаем на номер строки с первой командой — в нашем случае это строка 2:

Обновим страницу и увидим, что скрипт начал работу и остановился. Но он остановился не на второй строке, а на шестой — всё потому, что это первая строка в скрипте, где происходит какое-то действие. Дело в том, что просто объявление новых переменных не влияет на работу скрипта, поэтому он ищет первую команду с действием. В нашем случае — это цикл for:

Пошаговая отладка

Чтобы посмотреть на работу скрипта по шагам, надо нажимать F9 или стрелку вправо с точкой на панели отладки:

Каждый раз, как мы будем нажимать F9 или эту кнопку, скрипт будет переходить к следующей команде, выполнять её и снова становиться на паузу:

Добавляем переменные для отслеживания

Если просто выполнять скрипт по шагам, то мы увидим, какие команды и в каком порядке выполняются, но не будем знать, какие значения лежат в переменных на каждом шагу. Их можно увидеть, просто наведя курсор на любую переменную — над ней появится всплывающая подсказка с текущим значением. Но так работать неудобно — проще сразу видеть значения всех переменных.

Чтобы добавить переменную и видеть её значение во время выполнения, в панели отладки в разделе Watch нажимаем плюсик, вводим имя переменной, выбираем её из списка и нажимаем энтер:

Теперь видно, что на этом шаге значение переменной a равно нулю:

Точно так же добавим остальные переменные: i, b, c. Так мы увидим, что первые два цикла только начались, а внутренний прошёл уже три итерации:

Так, нажимая постоянно F9, мы прогоним весь скрипт до конца и посмотрим, при каких значениях какие условия выполняются и как находится решение:

Но у такого подхода есть минус — если вложенных циклов много или скрипт очень большой, то на пошаговое выполнение уйдёт много времени. Чтобы не перебирать всё вручную, ставят дополнительные брейкпойнты в нужных местах.

Отладка брейкпойнтами

Допустим, нам важно понять, в какой момент скрипт находит и выдаёт решение. Глядя в код, мы понимаем, что как только скрипт дошёл до команды console.log() — он нашёл очередное решение. Это значит, что мы можем поставить брейкпоинт только на эту строчку и не прогонять вручную весь скрипт: он сам остановится, когда дойдёт до неё, а мы сможем посмотреть значения переменных в этот момент.

1. Нажимаем снова на строку 2 и убираем предыдущую точку остановки.
2. Ставим брейкпоинт на строку 20 — там, где происходит вывод решения в консоль.
3. Нажимаем F8.

После этого скрипт продолжит работу сам и снова остановится, как только дойдёт до этой строки. Обратите внимание на значения переменных — они меняются к каждой остановке, а значит, скрипт работает как обычно, но останавливается в нужном нам месте:

Таких точек остановки можно поставить сколько угодно и в любой момент — на каждой из них отладчик остановится и покажет текущее состояние скрипта.

Зачем это всё

Отладка нужна, чтобы найти ошибки в программе. Если мы видим, что на очередном шаге в переменной находится не то, что мы ожидали увидеть, значит, что-то в коде идёт не так. Мы ставим брейкпоинт на начало нужных команд, запускаем отладку и находим команду, которая приводит к ошибке.

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

Веб-разработка — это новый чёрный

На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.