Что такое JavaScript?
Что такое JavaScript?
Добро пожаловать на курс MDN по JavaScript для начинающих! В этой статье мы рассмотрим JavaScript на высоком уровне, ответим на такие вопросы, как “Что это такое?” и “Что с его помощью можно делать?”, а также убедимся, что вам понятно назначение JavaScript.
| Необходимые условия: | Базовая компьютерная грамотность, базовое понимание HTML и CSS. |
|---|---|
| Цель: | Получить представление о том, что такое JavaScript, что он может делать и как он вписывается в веб-сайт. |
Высокоуровневое определение
JavaScript – это язык сценариев или программирования, который позволяет реализовать сложные функции на веб-страницах. Каждый раз, когда веб-страница делает нечто большее, чем просто сидит и отображает статичную информацию для просмотра – отображает своевременные обновления контента, интерактивные карты, анимированную 2D/3D графику, прокручивающиеся видеомагнитофоны и т.д. – вы можете быть уверены, что JavaScript, вероятно, задействован. Это третий слой слоеного пирога стандартных веб-технологий, два из которых (HTML и CSS) мы рассмотрели гораздо более подробно в других частях Учебной области.
-
Это язык разметки, который мы используем для структурирования и придания смысла нашему веб-контенту, например, для определения абзацев, заголовков и таблиц данных или для вставки изображений и видео на страницу. Это язык правил стиля, который мы используем для стилизации нашего HTML-контента, например, для задания цветов фона и шрифтов, а также для размещения контента в несколько колонок. Это язык сценариев, который позволяет вам создавать динамически обновляемый контент, управлять мультимедиа, анимировать изображения и практически все остальное. (Ладно, не все, но удивительно, чего можно достичь с помощью нескольких строк кода JavaScript).
Эти три слоя прекрасно накладываются друг на друга. Возьмем для примера простую текстовую метку. Мы можем разметить ее с помощью HTML, чтобы придать ей структуру и цель:
Затем мы можем добавить немного CSS, чтобы придать ей красивый вид:
И, наконец, мы можем добавить немного JavaScript для реализации динамического поведения:
Попробуйте нажать на последнюю версию текстовой метки и посмотреть, что произойдет (обратите внимание, что вы также можете найти эту демонстрацию на GitHub – посмотреть исходный код или запустить ее в реальном времени)!
JavaScript может делать гораздо больше, чем это – давайте рассмотрим подробнее.
Итак, что же он может на самом деле?
Основной язык JavaScript на стороне клиента состоит из некоторых общих функций программирования, которые позволяют вам делать такие вещи, как:
- Хранить полезные значения внутри переменных. Например, в приведенном выше примере мы просим ввести новое имя и сохраняем его в переменной name.
- Операции над фрагментами текста (в программировании их называют “строками”). В приведенном выше примере мы берем строку “Player 1: ” и присоединяем ее к переменной name, чтобы создать полный текст метки, например, “Player 1: Chris”.
- Выполнение кода в ответ на определенные события, происходящие на веб-странице. Мы использовали событие click в нашем примере выше, чтобы определить момент нажатия на метку и затем запустить код, который обновляет текстовую метку.
- И многое другое!
Однако еще более интересным является функциональность, созданная поверх языка JavaScript на стороне клиента. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные суперспособности, которые вы можете использовать в своем коде JavaScript.
API – это готовые наборы строительных блоков кода, которые позволяют разработчику реализовать программы, которые иначе было бы трудно или невозможно реализовать. Они делают для программирования то же самое, что готовые мебельные комплекты для строительства дома – гораздо проще взять готовые панели и скрепить их винтами, чтобы сделать книжную полку, чем самостоятельно разрабатывать дизайн, искать подходящее дерево, вырезать все панели нужного размера и формы, найти винты нужного размера, а затем собрать их вместе, чтобы сделать книжную полку.
Обычно они делятся на две категории.
Браузерные API встроены в ваш веб-браузер и способны предоставлять данные из окружающей компьютерной среды или делать полезные сложные вещи. Например:
- API DOM (Document Object Model) позволяет манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т.д. Каждый раз, когда вы видите, что на странице появляется всплывающее окно или отображается новый контент (как мы видели выше в нашей простой демонстрации), это и есть DOM в действии.
- API геолокации извлекает географическую информацию. Именно так Google Maps может определить ваше местоположение и нанести его на карту.
- API Canvas и WebGL позволяют создавать анимированную 2D- и 3D-графику. С помощью этих веб-технологий люди делают удивительные вещи – см. Chrome Experiments и webglsamples. Такие API, как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, например, воспроизводить аудио и видео прямо на веб-странице или захватывать видео с веб-камеры и показывать его на чужом компьютере (попробуйте нашу простую демонстрацию Snapshot, чтобы понять идею).
Примечание: Многие из приведенных выше демонстрационных примеров не будут работать в старых браузерах – при проведении экспериментов лучше использовать современные браузеры, такие как Firefox, Chrome, Edge или Opera. Вам нужно будет более подробно рассмотреть кроссбраузерное тестирование, когда вы приблизитесь к созданию производственного кода (т.е. реального кода, который будут использовать реальные клиенты).
API сторонних разработчиков не встроены в браузер по умолчанию, и вам обычно приходится брать их код и информацию откуда-то из Интернета. Например:
- API Twitter позволяет вам делать такие вещи, как отображение последних твитов на вашем сайте.
- API Google Maps и API OpenStreetMap позволяют встраивать пользовательские карты на ваш сайт и другие подобные функции.
Примечание: Эти API являются продвинутыми, и мы не будем рассматривать их в этом модуле. Вы можете узнать о них гораздо больше в нашем модуле “Веб-интерфейсы API на стороне клиента”.
Там же вы найдете и многое другое! Однако пока не стоит слишком радоваться. Вы не сможете создать следующий Facebook, Google Maps или Instagram, изучив JavaScript за 24 часа – сначала нужно изучить много основ. И именно поэтому вы здесь – давайте двигаться дальше!
Что JavaScript делает на вашей странице?
Здесь мы фактически начнем рассматривать некоторый код, а также изучим, что на самом деле происходит, когда вы запускаете JavaScript на своей странице.
Давайте вкратце вспомним, что происходит, когда вы загружаете веб-страницу в браузер (впервые об этом говорилось в статье Как работает CSS). Когда вы загружаете веб-страницу в браузере, вы запускаете свой код (HTML, CSS и JavaScript) в среде выполнения (вкладка браузера). Это похоже на фабрику, которая принимает сырье (код) и выдает продукт (веб-страницу).
Очень распространенное использование JavaScript – динамическое изменение HTML и CSS для обновления пользовательского интерфейса с помощью API Document Object Model (как упоминалось выше). Обратите внимание, что код в ваших веб-документах обычно загружается и выполняется в том порядке, в котором он появляется на странице. Ошибки могут возникать, если JavaScript загружается и выполняется до HTML и CSS, которые он должен изменить. Способы обхода этой проблемы будут описаны далее в статье, в разделе “Стратегии загрузки сценариев”.
Безопасность браузера
Каждая вкладка браузера имеет свой отдельный бакет для выполнения кода (в технических терминах эти бакеты называются “средами выполнения”) – это означает, что в большинстве случаев код на каждой вкладке выполняется совершенно отдельно, и код на одной вкладке не может напрямую повлиять на код на другой вкладке или на другом сайте. Это хорошая мера безопасности – если бы это было не так, то пираты могли бы начать писать код для кражи информации с других сайтов, и другие подобные плохие вещи.
Примечание: Существуют способы безопасной передачи кода и данных между различными сайтами/вкладками, но это продвинутые техники, которые мы не будем рассматривать в этом курсе.
Порядок выполнения JavaScript
Когда браузер сталкивается с блоком JavaScript, он обычно запускает его в порядке сверху вниз. Это означает, что вам нужно быть внимательным к тому, в каком порядке вы располагаете те или иные элементы. Например, давайте вернемся к блоку JavaScript, который мы видели в нашем первом примере:
Здесь мы выделяем текстовый абзац (строка 1), затем прикрепляем к нему слушателя событий (строка 3), чтобы при нажатии на абзац выполнялся блок кода updateName() (строки 5-8). Блок кода updateName() (такие блоки кода многократного использования называются “функциями”) запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.
Если поменять местами порядок первых двух строк кода, он перестанет работать – вместо этого в консоли разработчика браузера появится ошибка – TypeError: para is undefined . Это означает, что объект para еще не существует, поэтому мы не можем добавить к нему слушателя событий.
Примечание: Это очень распространенная ошибка – вы должны быть уверены, что объекты, на которые ссылается ваш код, существуют, прежде чем пытаться что-то с ними сделать.
Интерпретированный и скомпилированный код
В контексте программирования вы можете слышать термины “интерпретированный” и “компилированный”. В интерпретируемых языках код выполняется сверху вниз, и результат выполнения кода возвращается немедленно. Вам не нужно преобразовывать код в другую форму, прежде чем браузер выполнит его. Код поступает в удобной для программиста текстовой форме и обрабатывается непосредственно из нее.
JavaScript – это легкий интерпретируемый язык программирования. Веб-браузер получает код JavaScript в оригинальной текстовой форме и запускает сценарий на его основе. С технической точки зрения, большинство современных интерпретаторов JavaScript фактически используют технику, называемую компиляцией “точно в срок”, для повышения производительности; исходный код JavaScript компилируется в более быстрый двоичный формат во время использования сценария, чтобы его можно было выполнить как можно быстрее. Однако JavaScript по-прежнему считается интерпретируемым языком, поскольку компиляция выполняется во время выполнения, а не заранее.
У обоих типов языка есть свои преимущества, но сейчас мы не будем их обсуждать.
Код на стороне сервера в сравнении с кодом на стороне клиента
Вы также можете слышать термины “серверный” и “клиентский” код, особенно в контексте веб-разработки. Код на стороне клиента – это код, который выполняется на компьютере пользователя: при просмотре веб-страницы загружается код на стороне клиента, затем он выполняется и отображается браузером. В этом модуле мы говорим о JavaScript на стороне клиента.
Код на стороне сервера, с другой стороны, выполняется на сервере, затем его результаты загружаются и отображаются в браузере. Примерами популярных серверных веб-языков являются PHP, Python, Ruby, ASP.NET и даже JavaScript! JavaScript также может использоваться как серверный язык, например, в популярной среде Node.js – вы можете узнать больше о серверном JavaScript в нашей теме Динамические веб-сайты – Программирование на стороне сервера.
Динамический и статический код
Слово динамический используется как для описания JavaScript на стороне клиента, так и для описания языков на стороне сервера – оно относится к способности обновлять отображение веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новое содержимое по мере необходимости. Код на стороне сервера динамически генерирует новое содержимое на сервере, например, извлекает данные из базы данных, тогда как JavaScript на стороне клиента динамически генерирует новое содержимое внутри браузера на клиенте, например, создает новую таблицу HTML, заполняет ее данными, запрашиваемыми с сервера, а затем отображает таблицу на веб-странице, показываемой пользователю. В этих двух контекстах смысл немного отличается, но они связаны, и оба подхода (серверный и клиентский) обычно работают вместе.
Веб-страница без динамически обновляемого содержимого называется статической – она просто показывает одно и то же содержимое все время.
Как вы добавляете JavaScript на свою страницу?
Внутренний JavaScript
Прежде всего, создайте локальную копию нашего примера файла apply-javascript.html. Сохраните его в какой-нибудь удобной директории.
- Откройте файл в веб-браузере и в текстовом редакторе. Вы увидите, что HTML создает простую веб-страницу, содержащую кнопку, которую можно нажать.
- Затем перейдите в текстовый редактор и добавьте в head – непосредственно перед закрывающим
- тега: Примечание: Если ваш пример не работает, пройдитесь по шагам еще раз и проверьте, все ли вы сделали правильно. Сохранили ли вы локальную копию начального кода как файл .html? Добавили ли вы свой элемент ju
Сначала создайте новый файл в той же директории, что и HTML-файл образца. Назовите его script.js – убедитесь, что он имеет расширение имени файла .js, так как именно так он распознается как JavaScript.Замените текущий элемент на следующий:
Примечание: Вы можете увидеть эту версию на GitHub как apply-javascript-external.html и script.js (посмотрите ее и вживую).
Встроенные обработчики JavaScript
Обратите внимание, что иногда вы можете встретить кусочки реального кода JavaScript, живущего внутри HTML. Это может выглядеть примерно так:
- Вы можете попробовать эту версию нашей демонстрации ниже.
- Эта демонстрация имеет точно такую же функциональность, как и в предыдущих двух разделах, за исключением того, что элемент включает встроенный обработчик onclick, чтобы функция выполнялась при нажатии кнопки.
Однако, пожалуйста, не делайте этого. Это плохая практика – загрязнять HTML JavaScript, и это неэффективно – вам придется включать атрибут onclick=”createParagraph()” в каждую кнопку, к которой вы хотите применить JavaScript.
Использование addEventListener вместо этого
Вместо того чтобы включать JavaScript в HTML, используйте чистую конструкцию JavaScript. Функция querySelectorAll() позволяет выбрать все кнопки на странице. Затем вы можете перебрать все кнопки, назначив для каждой из них обработчик с помощью функции addEventListener(). Код для этого показан ниже:
Это может быть немного длиннее, чем атрибут onclick, но это будет работать для всех кнопок – независимо от того, сколько их на странице, сколько их добавляется или удаляется. JavaScript не нужно изменять.
Примечание: Попробуйте отредактировать свою версию apply-javascript.html и добавить в файл еще несколько кнопок. При перезагрузке вы должны обнаружить, что все кнопки при нажатии создают абзац. Здорово, да?
Стратегии загрузки скриптов
Существует ряд проблем, связанных с тем, как заставить скрипты загружаться в нужное время. Все не так просто, как кажется! Распространенной проблемой является то, что весь HTML на странице загружается в том порядке, в котором он появляется. Если вы используете JavaScript для манипулирования элементами страницы (точнее, объектной модели документа), ваш код не будет работать, если JavaScript будет загружен и разобран до HTML, с которым вы пытаетесь что-то сделать.
В приведенных выше примерах кода, во внутреннем и внешнем примерах, JavaScript загружается и выполняется в шапке документа, до того как будет разобрано тело HTML. Это может привести к ошибке, поэтому мы использовали некоторые конструкции, чтобы обойти это.
Во внутреннем примере вы можете увидеть эту конструкцию вокруг кода:
Это слушатель событий, который слушает событие DOMContentLoaded браузера, означающее, что тело HTML полностью загружено и разобрано. JavaScript внутри этого блока не будет выполняться до наступления этого события, поэтому ошибка исключена (о событиях вы узнаете позже в курсе).
Во внешнем примере мы используем более современную функцию JavaScript для решения проблемы – атрибут defer, который указывает браузеру продолжить загрузку содержимого HTML после достижения элемента тега.
В этом случае скрипт и HTML будут загружаться одновременно, и код будет работать.
Примечание: Во внешнем примере нам не нужно было использовать событие DOMContentLoaded, потому что атрибут defer решил проблему за нас. Мы не использовали решение defer для внутреннего примера JavaScript, потому что defer работает только для внешних скриптов.
Старомодным решением этой проблемы было размещение элемента сценария в нижней части тела (например, непосредственно перед элементом
тег), чтобы он загружался после разбора всего HTML. Проблема этого решения заключается в том, что загрузка/разбор сценария полностью блокируется до тех пор, пока не будет загружен HTML DOM. На больших сайтах с большим количеством JavaScript это может вызвать серьезные проблемы с производительностью, замедляя работу сайта.
async и defer
На самом деле есть две современные функции, которые мы можем использовать, чтобы обойти проблему блокировки скрипта – async и defer (которые мы рассмотрели выше). Давайте рассмотрим разницу между ними.
Скрипты, загруженные с помощью атрибута async, будут загружать скрипт без блокировки страницы во время его получения. Однако после завершения загрузки скрипт будет выполнен, что заблокирует отображение страницы. Вы не получаете гарантии, что скрипты будут выполняться в определенном порядке. Лучше всего использовать async, когда сценарии на странице выполняются независимо друг от друга и не зависят от других сценариев на странице.
Скрипты, загруженные с атрибутом defer, будут загружаться в том порядке, в котором они появляются на странице. Они не будут запускаться до тех пор, пока не загрузится все содержимое страницы, что полезно, если ваши скрипты зависят от наличия DOM (например, они изменяют один или несколько элементов на странице).