Написать код в браузере

Обновлено: 21.11.2024

Добро пожаловать на курс MDN по JavaScript для начинающих! В этой статье мы рассмотрим JavaScript с высокого уровня, отвечая на такие вопросы, как «Что это такое?» и "Что вы можете с этим сделать?", а также убедиться, что вы согласны с назначением JavaScript.

< th scope="row">Цель:

Общее определение

JavaScript – это язык сценариев или программирования, который позволяет вам реализовывать сложные функции на веб-страницах. Каждый раз, когда веб-страница делает больше, чем просто сидит и отображает статическую информацию, которую вы можете посмотреть, – отображает своевременные обновления контента, интерактивные карты, анимированная 2D/3D-графика, прокручиваемые видео-музыкальные автоматы и т. д. — можете поспорить, что JavaScript, вероятно, задействован. Это третий слой слоеного пирога стандартных веб-технологий, два из которых (HTML и CSS) мы рассмотрели более подробно в других частях Области обучения.

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

Эти три слоя хорошо накладываются друг на друга. В качестве примера возьмем простую текстовую метку. Мы можем разметить его с помощью HTML, чтобы придать ему структуру и назначение:

Затем мы можем добавить немного CSS, чтобы все выглядело красиво:

И, наконец, мы можем добавить JavaScript для реализации динамического поведения:

Попробуйте нажать на эту последнюю версию текстовой метки, чтобы увидеть, что произойдет (обратите внимание, что вы можете найти эту демонстрацию на GitHub — посмотрите исходный код или запустите ее вживую)!

JavaScript может гораздо больше — давайте рассмотрим, что подробнее.

Так что же он на самом деле может сделать?

Основной клиентский язык JavaScript состоит из некоторых общих функций программирования, которые позволяют вам делать такие вещи, как:

  • Сохраняйте полезные значения внутри переменных. Например, в приведенном выше примере мы просим ввести новое имя, а затем сохранить это имя в переменной с именем name .
  • Операции с фрагментами текста (известными в программировании как "строки"). В приведенном выше примере мы берем строку «Игрок 1:» и присоединяем ее к переменной имени, чтобы создать полную текстовую метку, например. «Игрок 1: Крис».
  • Выполнение кода в ответ на определенные события, происходящие на веб-странице. Мы использовали событие щелчка в нашем примере выше, чтобы определить, когда нажата кнопка, а затем запустить код, который обновляет текстовую метку.
  • И многое другое!

Однако еще более интересна функциональность, созданная на основе клиентского языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют дополнительные возможности для использования в коде JavaScript.

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

Обычно они делятся на две категории.

Браузерные API встроены в ваш веб-браузер и могут предоставлять данные из окружающей компьютерной среды или выполнять полезные сложные действия. Например:

  • API DOM (объектная модель документа) позволяет управлять HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к странице и т. д.Каждый раз, когда вы видите, как на странице появляется всплывающее окно или отображается какой-то новый контент (например, как мы видели выше в нашей простой демонстрации), это DOM в действии.
  • API геолокации извлекает географическую информацию. Именно так Google Карты могут определить ваше местоположение и нанести его на карту.
  • API Canvas и WebGL позволяют создавать анимированную 2D- и 3D-графику. Люди делают удивительные вещи, используя эти веб-технологии — см. Chrome Experiments и webglsamples. такие как HTMLMediaElement и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, например воспроизводить аудио и видео прямо на веб-странице или захватывать видео с веб-камеры и отображать его на чужом компьютере (попробуйте нашу простую демонстрацию Snapshot, чтобы получить представление ).

Примечание. Многие из приведенных выше демонстраций не будут работать в старых браузерах. При экспериментировании рекомендуется использовать для запуска кода современный браузер, такой как Firefox, Chrome, Edge или Opera. более подробно о кросс-браузерном тестировании, когда вы приблизитесь к созданию производственного кода (т. е. реального кода, который будут использовать реальные клиенты).

Сторонние API по умолчанию не встроены в браузер, и вам, как правило, приходится брать их код и информацию из Интернета. Например:

  • API Twitter позволяет вам делать такие вещи, как отображение ваших последних твитов на вашем веб-сайте.
  • API Карт Google и API OpenStreetMap позволяют встраивать пользовательские карты на веб-сайт и выполнять другие подобные функции.

Примечание. Эти API являются расширенными, и мы не будем рассматривать ни один из них в этом модуле. Вы можете узнать больше об этом в нашем модуле клиентских веб-API.

Есть и многое другое! Однако пока не переусердствуйте. Вы не сможете создать следующий Facebook, Google Maps или Instagram после изучения JavaScript в течение 24 часов — сначала нужно изучить много основ. И именно поэтому вы здесь — давайте двигаться дальше!

Что делает JavaScript на вашей странице?

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

Давайте кратко повторим историю того, что происходит, когда вы загружаете веб-страницу в браузере (впервые об этом говорилось в нашей статье «Как работает CSS»). Когда вы загружаете веб-страницу в свой браузер, вы запускаете свой код (HTML, CSS и JavaScript) внутри среды выполнения (вкладка браузера). Это похоже на фабрику, которая получает сырье (код) и выпускает продукт (веб-страницу).

Очень часто JavaScript используется для динамического изменения HTML и CSS для обновления пользовательского интерфейса с помощью API объектной модели документа (как упоминалось выше). Обратите внимание, что код в ваших веб-документах обычно загружается и выполняется в том порядке, в котором он появляется на странице. Ошибки могут возникнуть, если JavaScript загружается и запускается до HTML и CSS, которые он предназначен для изменения. Вы узнаете, как обойти это позже в статье, в разделе Стратегии загрузки скриптов.

Безопасность браузера

Каждая вкладка браузера имеет свою отдельную корзину для запуска кода (в техническом плане эти области называются «средами выполнения») — это означает, что в большинстве случаев код на каждой вкладке запускается совершенно отдельно, а код в одной tab не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было не так, пираты могли бы начать писать код для кражи информации с других веб-сайтов и других подобных вещей.

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

Порядок выполнения JavaScript

Когда браузер встречает блок JavaScript, он обычно запускает его по порядку, сверху вниз. Это означает, что вам нужно быть осторожным в том, в каком порядке вы размещаете элементы. Например, давайте вернемся к блоку JavaScript, который мы видели в нашем первом примере:

Здесь мы выбираем текстовый абзац (строка 1), а затем присоединяем к нему прослушиватель событий (строка 3), чтобы при нажатии на абзац запускался блок кода updateName() (строки 5–8). Блок кода updateName() (эти типы повторно используемых блоков кода называются «функциями») запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.

Если вы поменяете порядок первых двух строк кода, он больше не будет работать — вместо этого вы получите сообщение об ошибке в консоли разработчика браузера — TypeError: para is undefined . Это означает, что объект para еще не существует, поэтому мы не можем добавить к нему прослушиватель событий.

Примечание. Это очень распространенная ошибка — вам нужно убедиться, что объекты, на которые есть ссылки в вашем коде, существуют, прежде чем вы попытаетесь что-то с ними сделать.

Интерпретируемый и скомпилированный код

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

С другой стороны, скомпилированные языки преобразуются (компилируются) в другую форму до того, как они будут запущены компьютером. Например, C/C++ компилируются в машинный код, который затем запускается компьютером. Программа выполняется из двоичного формата, который был сгенерирован из исходного кода исходной программы.

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

У обоих типов языка есть преимущества, но мы не будем их сейчас обсуждать.

Код на стороне сервера и код на стороне клиента

Вы также можете слышать термины "код на стороне сервера" и "код на стороне клиента", особенно в контексте веб-разработки. Код на стороне клиента — это код, который запускается на компьютере пользователя — при просмотре веб-страницы код на стороне клиента загружается, затем запускается и отображается в браузере. В этом модуле мы явно говорим о клиентском JavaScript.

Динамический и статический код

Слово "динамический" используется для описания как клиентского JavaScript, так и серверного языка. Оно означает возможность обновлять отображение веб-страницы/приложения, чтобы отображать разные элементы в различных обстоятельствах, генерируя новый контент по мере необходимости. . Серверный код динамически генерирует новый контент на сервере, например. извлечение данных из базы данных, тогда как клиентский JavaScript динамически генерирует новый контент внутри браузера на клиенте, например. создание новой таблицы HTML, заполнение ее данными, запрошенными с сервера, а затем отображение таблицы на веб-странице, показанной пользователю. Значение немного отличается в двух контекстах, но связано, и оба подхода (на стороне сервера и на стороне клиента) обычно работают вместе.

Веб-страница без динамически обновляемого содержимого называется статической — на ней постоянно отображается одно и то же содержимое.

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

Для настройки CodeMirror в соответствии с вашим приложением и расширения его функций доступны богатый программный API и система тем CSS.

Это CodeMirror

Получить текущую версию: 5.65.2.
Вы можете посмотреть код,
прочитать примечания к выпуску,
или изучить руководство пользователя.

Возможности

  • По умолчанию поддерживается более 100 языков.
  • Мощная компонуемая система языковых режимов (XML) привязки клавиш, интерфейс привязок Emacs и Sublime Text и сопоставление тегов
  • Поддержка разделенных представлений
  • Возможность изменять размер в соответствии с содержимым и блокировать виджеты.
  • Программируемые промежутки
  • Создание диапазонов стилизованного текста, поддержки только для чтения или атомарной поддержки.
  • Многие другие методы и дополнения.

Сообщество

CodeMirror — это проект с открытым исходным кодом, распространяемый по лицензии MIT. Этот редактор используется в инструментах разработки для Firefox, Chrome и Safari, в Light Table, Adobe Brackets, Bitbucket и многих других проектах.

Разработка и отслеживание ошибок происходят на github (альтернативный репозиторий git). Пожалуйста, прочитайте эти указатели перед отправкой сообщения об ошибке. Используйте запросы на вытягивание для отправки исправлений. Все дополнения должны быть выпущены под той же лицензией MIT, которую использует CodeMirror.

Обсуждение проекта ведется на дискуссионном форуме. Объявления, связанные с проектом, такие как новые версии, размещаются на форуме в категории «объявления». При необходимости вы можете напрямую связаться с сопровождающим. Мы стремимся быть инклюзивным, гостеприимным сообществом. Чтобы сделать это явным, у нас есть кодекс поведения, который применяется к общению по проекту.

Поддержка браузера

Поддерживаются настольные версии следующих браузеров в стандартном режиме (рекомендуется HTML5):

Требования: Базовая компьютерная грамотность, базовое понимание HTML и CSS.
Познакомиться с тем, что такое JavaScript, что он может делать и как он вписывается в веб-сайт.
Firefoxверсия 4 и выше
Chromeлюбая версия
Safariверсия 5.2 и выше
Internet Explorer/Edge8 и выше
Opera9 и выше

Поддержка современных мобильных браузеров является экспериментальной. Последние версии браузера iOS и Chrome для Android должны работать достаточно хорошо.

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

Почему онлайн-редакторы кода?

Есть несколько причин, по которым следует рассмотреть возможность использования онлайн-редакторов кода. Правда, однако, в том, что использование онлайновой IDE (скорее всего) не заменит вашу локально установленную. Хотя многие онлайн-среды удивительно надежны и способны справиться с большей частью работы, которую вы на них возлагаете, они просто не настолько надежны и функциональны, как настольные установки. Тем не менее, есть несколько причин, чтобы рассмотреть возможность его использования.

  • Вы путешествуете, и вам нужен доступ к вашему коду в любом месте.
  • Вы должны делиться фрагментами и интерактивными частями кода.
  • Ваше время ограничено, и вам нужно решение, практически не требующее настройки.
  • Ваш бюджет ограничен. Онлайн-редакторы кода могут иметь больше возможностей, чем рабочая станция, к которой у вас есть доступ.
  • Ваша команда должна сотрудничать в режиме реального времени. Многие сетевые IDE имеют встроенные инструменты для совместной работы, которые работают без установки.

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

1. PlayCode

PlayCode – это удобный универсальный онлайн-редактор кода. С его помощью вы можете открывать несколько файлов, которые работают вместе в одном проекте, точно так же, как если бы вы работали с несколькими файлами в типичной структуре каталогов, используя Sublime Text или VS Code. В PlayCode есть готовые шаблоны для пользователей, а также результаты в реальном времени и встроенная отладка консоли прямо в браузере. Пользователи могут редактировать и работать без входа в систему для быстрых исправлений и прочего, но также могут войти в систему, чтобы сохранить работу и использовать PlayCode на разных компьютерах.

2. JSFiddle

JSFiddle — еще один популярный онлайн-редактор кода, который во многом похож на PlayCode. Разработанный специально для кодировщиков JavaScript, JSFiddle не обязательно предназначен для работы над целыми проектами, но, как говорит информационная панель в верхней части самого редактора, он лучше всего подходит для «демонстраций для документов, отчетов об ошибках для проблем Github, представления ответов на код на Переполнение стека, совместная работа над кодом в реальном времени, размещение фрагментов кода» или просто «песочница», в которой вы можете поиграть со своим кодом.

3. CodePen

CodePen, вероятно, считается онлайн-редактором кода среди онлайн-редакторов кода. Это не только дает вам инструменты для совместной работы, экспериментов и обмена, но вы также получаете живые результаты и возможность поиска в их базе данных и репозитории фрагментов, которые другие авторы размещают, чтобы вы могли экспериментировать и учиться на их работах. . Это также забавное место, чтобы увидеть, что некоторые люди делают с кодом новыми и интересными способами.Кроме того, фрагменты CodePen индексируются Google, и много раз вы окажетесь здесь, когда ищете решение, прежде чем отправиться в Stack Overflow, а иногда и после, потому что именно там люди часто пишут и делятся решениями в реальном времени.< /p>

4. StackBlitz

StackBlitz — хорошая штука. Мы очень впечатлены тем, что это приложение предлагает разработчикам, потому что оно содержит множество инструментов, с помощью которых вы можете запустить свой проект с нуля. Одним щелчком мыши. Если вы посмотрите на изображение выше, все файлы, зависимости и даже общие URL-адреса были сгенерированы с помощью одной кнопки «Начать новую рабочую область — React (JavaScript)». Благодаря возможности сохранять, делиться и даже подключаться к вашей учетной записи GitHub, StackBlitz заслуживает внимания. StackBlitz — это не служба обмена фрагментами кода или изолированная программная среда для кодирования, а надежная IDE для тех, кто предпочитает онлайн-редакторы кода.

Кроме того, и мы не можем не сказать об этом, он основан на VS Code. Таким образом, вы запускаете самую популярную IDE и редактор кода в своем браузере, и каждый проект получает собственное место на сервере. Вы можете обновиться, если хотите, но даже бесплатная версия работает хорошо (хотя и немного медленнее при загрузке, но этого следует ожидать от бесплатных планов). Прочтите об этом, и мы думаем, вы согласитесь, что из всех онлайн-редакторов кода стоит внимательно изучить его.

5. Облако AWS9

Как один из первых пользователей Cloud9 лет назад, когда это был проект с открытым исходным кодом на c9.io, мы настоятельно рекомендуем этот продукт. На самом деле, он очень похож на описанный выше StackBlitz. Когда Amazon приобрела C9, они подключили его к своему облаку как часть набора сервисов AWS. AWS Cloud9 — это, безусловно, надежная полнофункциональная онлайн-среда разработки, и информационная аннотация на их веб-сайте отлично объясняет, почему именно на нее стоит обратить внимание.

AWS Cloud9 — это облачная интегрированная среда разработки (IDE), которая позволяет писать, запускать и отлаживать код с помощью всего лишь браузера. Он включает в себя редактор кода, отладчик и терминал. Cloud9 поставляется с предварительно упакованными необходимыми инструментами для популярных языков программирования, включая JavaScript, Python, PHP и т. д., поэтому вам не нужно устанавливать файлы или настраивать компьютер для разработки для запуска новых проектов. Поскольку ваша IDE Cloud9 основана на облаке, вы можете работать над своими проектами из своего офиса, дома или любого другого места, используя компьютер, подключенный к Интернету. Cloud9 также обеспечивает беспроблемный опыт разработки бессерверных приложений, позволяя легко определять ресурсы, отлаживать и переключаться между локальным и удаленным выполнением бессерверных приложений. С помощью Cloud9 вы можете быстро поделиться своей средой разработки со своей командой, что позволит вам объединять программы и отслеживать входные данные друг друга в режиме реального времени.

6. JSBin

Если вы когда-либо видели или использовали PasteBin, JSBin будет вам знаком. Он похож по структуре, стилю и полезности, JSBin в основном является сайтом для обмена кодом. Мы считаем, что определенно лучше зарегистрировать здесь учетную запись, чтобы оставаться в системе. Причина в том, что JSBin автоматически сохраняет ваш прогресс в любом коде, с которым вы работаете. Даже если вы просто экспериментируете, чтобы увидеть, что делают фрагменты, вы не потеряете свою работу. JSBin — простой редактор без излишеств. И если это то, что вам нужно, лучше уже не придумаешь.

7. Редактор темы WordPress

WordPress может быть не первым, что вы думаете об онлайн-редакторах кода. Но это определенно то, что нужно учитывать. В WordPress 4.9 WP Core был обновлен для включения CodeMirror. Подсветка синтаксиса и предупреждения об ошибках для любых изменений, внесенных в области кода, теперь являются базовыми для WordPress. Основное место для этого находится в области Внешний вид — Редактор темы, но он также отображается в любой области виджетов (например, в виджете Пользовательский HTML) или в настройщике темы в Пользовательский CSS<. /em> вкладка. Хотя это определенно не полноценная IDE, мы абсолютно точно можем рекомендовать редактор WP CodeMirror как способ проверки ошибок и обновления фрагментов кода без работы с FTP и различными системами управления файлами.

Подведение итогов работы с онлайн-редакторами кода

Большинство онлайн-редакторов кода не заменят вашу локальную среду разработки. Это не их работа. В основном. Однако они могут предоставить надежный и простой способ редактирования кода, обмена фрагментами, создания резервных копий и экспериментов с новыми функциями в безопасном и надежном месте в режиме реального времени. Между полноценными IDE, такими как StackBlitz, службами обмена фрагментами, такими как JSBin, и даже просто качественными онлайн-редакторами кода, такими как интеграция с WordPress CodeMirror, если вы никогда не пробовали онлайн-редактирование, самое время начать.

Кратко

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

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

И что еще лучше, так это то, что он разрабатывается как веб-стандарт рабочей группой и группой сообщества W3C WebAssembly при активном участии всех основных поставщиков браузеров.

Руководства

Начните с прочтения основных концепций WebAssembly — что это такое, почему он так полезен, как он вписывается в веб-платформу (и не только) и как его использовать.

Когда вы написали код на C/C++, вы можете затем скомпилировать его в .wasm с помощью такого инструмента, как Emscripten. Давайте посмотрим, как это работает.

Основным вариантом использования WebAssembly является использование существующей экосистемы библиотек C и предоставление разработчикам возможности использовать их в Интернете.

Если вы написали код на Rust, вы можете скомпилировать его в WebAssembly! В этом руководстве вы узнаете все, что вам нужно знать, чтобы скомпилировать проект Rust в wasm и использовать его в существующем веб-приложении.

Если у вас есть .wasm, в этой статье рассказывается, как получить, скомпилировать и создать его экземпляр, объединив API JavaScript WebAssembly с API Fetch или XHR.

Загрузив модуль .wasm, вы захотите его использовать. В этой статье мы покажем вам, как использовать WebAssembly через JavaScript API WebAssembly.

Экспортированные функции WebAssembly — это отражения функций WebAssembly в JavaScript, которые позволяют вызывать код WebAssembly из JavaScript. В этой статье описывается, что это такое.

В этой статье объясняется текстовый формат wasm. Это низкоуровневое текстовое представление модуля .wasm, отображаемое в инструментах разработчика браузера при отладке.

В этой статье содержится руководство по преобразованию модуля WebAssembly, написанного в текстовом формате, в двоичный файл .wasm.

Справочник по API

Справочная документация по набору операторов потока управления WebAssembly.

Этот объект действует как пространство имен для всех функций, связанных с WebAssembly.

Читайте также: