Что такое код api


Содержание

Что такое api и зачем его используют разработчики??

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

Но даже если вы далеки от написания и использования кодов, то я все равно рекомендую ознакомиться с данной статьей. Поскольку принципы, заложенные в ЭйПиАй могут найти применение и в обычной жизни.

Для начала расшифруем аббревиатуру.

API, которая буквально означает интерфейс прикладного программирования (Application Programming Interface).

Даже специалисты считают это определение малоинформативным, поэтому, если вам оно не понятно, – не переживайте. Сейчас я попытаюсь рассказать подробнее о назначении этого программного сервиса. Именно такое определение мне лично кажется более точным.

Аналогия функциональности API

Чтобы понять, как работает API вам нужно представить себе менеджера компании, которая берется за разные строительные проекты. Возможно, было бы неплохо иметь собственный автопарк и грузоподъемное оборудование, склад с материалами, бригаду каменщиков, облицовщиков, своих сметчиков и инженеров, дизайнеров. Но и в этом случае не всегда удается охватить все виды работ: например заказчик желает мозаику, систему умный дом или двери из дуба – а ваша компания такого делать не умеет.

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

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

Так же организатору следует позаботиться о том, чтобы нанятые бригады не мешали друг другу. А еще луче помогали или совместно использовали один ресурс (автокран, готовый цементный раствор). Пожалуй, со стройкой достаточно.

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

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

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

Что входит в API и как он работает?

Безусловно, практически невозможно или очень сложно связать воедино разрозненные ресурсы, несовместимые данные и ПО создаваемое на разных языках. Но если разработчики желают чтобы их продукт (приложение, операционная система или сервис) развивался и совместно работал с другими программами и устройствами, то они должны предусмотреть разработку своих модулей исходя из концепции API.

Элементами такого программного интерфейса, являются:

  • классы защищенных или открытых данных, элементов кодов
  • отдельно прописанные процедуры, представляющие собой автономно работоспособный блок программы;
  • функций, подразумевающих работу с переменными
  • структуры
  • констант (наиболее часто используемая форма данных, настроек или образов);

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

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

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

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

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

Возвращаюсь к нашему строительному примеру можно провести аналогию. Сигнатура это визитка (например, бригада выполняет укладку кафеля). А семантика – это бланк оформления заявки (От вас требуется указать точное место, площадь поверхности, предоставить плитку. Мы ее качественно клеим за N-сот рублей). Я думаю в общих чертах понятно, что такое api? Теперь поговорим о том, где применяется.

Сферы использования API

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

  • Windows API
  • Linux Kernel API
  • OS/2 API
  • Amiga ROM Kernel
  • POSIX
  • Cocoa

А так же для звуковых и графических интерфейсов, среди которых вам наверняка встречались DirectX, OpenGL, GDI+, SDL, GTK, Qt. Точно сформулировать, для каких задач предназначен АПИ невозможно. Сфера его применения ограничивается только фантазией разработчика, благо для этого существуют все возможности.

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

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

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

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

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

Документирование API

При фразе «Документирование API» многие приходят в ужас, так как, на первый взгляд, это кажется очень трудным, страшным и тяжёлым. Документ по ГОСТу сразу кажется небольшой детской сказкой на этом фоне. Но не так страшен чёрт, как его малюют! Я не говорю, что документирование API — это легко и просто. Да этому нельзя научиться из одной короткой статьи или видео, но если придёт понимание этой темы, то и на изучение этой темы уйдёт гораздо меньше времени. Да–к, что же такое API? И как его задокументировать? В данной статье рассмотрена эта очень непростая тема.

Что такое API?

API (application programming interface) — это набор готовых классов, функций, процедур, структур и констант, предоставляемые самим приложением или операционной системой для взаимодействия с внешними программами.
Например, у вас есть кот Барсик, который любит лежать на обеденном столе. Вам это не нравится. Вы говорите Барсику: «Барсик, брысь со стола!». Барсик хоть и нехотя, но слезает со стола. Так вот, API — это набор команд, благодаря которым кот Барсик понял хозяина, что ему следует слезь со стола. Другой пример, если программу (модуль, библиотеку) рассматривать как чёрный ящик, то API — это множество «ручек», которые доступны пользователю данного ящика и которые он может вертеть и дёргать.
При этом пользователю необязательно понимать и знать, что такое API. API это «язык» общения между двумя программами и необходим программистам. API создаётся чтобы приложения созданные разными разработчикам корректно существовали вместе и могли взаимодействовать друг с другом. Компоненты образуют иерархию, в результате которой высокоуровневые компоненты используют API низкоуровневых компонентов, а те, в свою очередь, используют API ещё более низкоуровневых компонентов. По такому принципу построены протоколы передачи данных по Интернет. Каждый уровень пользуется функциональностью предыдущего («нижележащего») уровня и, в свою очередь, предоставляет нужную функциональность следующему («вышележащему») уровню.
На рисунке ниже представлена схема СЭД «Кодекс: Документооборот», в которой отображено API для внешних систем, а также для внутренних в данной СЭД.

API библиотеки функций и классов включает в себя описание сигнатур и семантики функций.

Сигнатура функции

Сигнатура функции — это часть общего объявления функции, позволяющая средствам трансляции идентифицировать функцию среди других. В различных языках программирования существуют разные представления о сигнатуре функции, что также тесно связано с возможностями перегрузки функций в этих языках.
Например, в языке программирования C++ простая функция однозначно опознаётся компилятором по её имени и последовательности типов её аргументов, что составляет сигнатуру функции в этом языке. Если функция является методом некоторого класса, то в сигнатуре будет участвовать и имя класса.
В языке программирования Java сигнатуру метода составляет его имя и последовательность типов параметров; тип возвращаемого значения в сигнатуре не участвует.
В СЭД «Кодекс: Документооборот» используется API на основе web-технологий REST-API, на её примере рассмотрим формирование вызова любого GET\POST запроса.

Пример формирования вызова любого GET\POST запроса

Семантика функции

Семантика функции — это описание того, что данная функция делает. Семантика функции включает в себя описание того, что является результатом вычисления функции, как и отчего этот результат зависит. Обычно результат выполнения зависит только от значений аргументов функции, но в некоторых модулях есть понятие состояния. Полным описанием семантики функций является исполняемый код функции или математическое определение функции.
Ниже, для примера, рассмотрена одна из функций СЭД «Кодекс: Документооборот».

/Documents/GetDocLinkedObjects GET
Возвращает список связанных документов по переданному идентификатору.

Таблица 1 — Идентификатор документа

Параметр Тип Описание
uid Guid Идентификатор документа

Возвращаемое значение – список связей с документом.

Таблица 2 — Список связей с документом

Свойство Тип Описание
DocUID Guid Идентификатор связанного элемента
DirectionType DirectionType Тип связанности (тип подчинения)
LinkType Integer Идентификатор типа связи (из справочника LINK_TYPES)
LinkTypeName String Наименование типа связи
OperatorUID Guid Идентификатор автора, создавшего связь

Проблема документирования API

Документация API — это техническая (программная) документация, в которой указано как использовать API.
При этом эту документацию нужно поддерживать в актуальном стоянии чаще, чем любую другую. Ведь от актуальности документации API зависит качество разработки продукта. Однако, есть еще проблема разработки самого API системы. Любая система развивается, добавляются функции, изменяются существующие вызовы и методы. Но необходимо помнить о том, что с нашей системой могут быть интегрированы другие системы. И если изменения затронут API, то такая интеграция «развалится», при следующем обновлении произойдёт нарушение механизмов взаимодействия. Поэтому в документировании API можно выделить две основные проблемы:

  1. Сложность написания документации API, так как это очень трудная тема. Неясно как писать, что писать и прочее. При написании возникает очень много вопросов. Тем более, если человек до этого никогда не имел дело с документированием API.
  2. Поддержка документации API в актуальном состоянии.

Проблема стандартизации API

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

  1. Пример полного запроса.
  2. Примеры ожидаемого ответа.
  3. Список кодов ошибок.
  4. Удобный для поиска Web–интерфейс.
  5. Предупреждения об изменении версии и расписание устаревания.

Способы создания документации API

  1. Создать текстовый документ.
    Это, конечно, самый простой вариант, в котором можно сделать максимально подборные описания, но такой документ сложно поддерживать в актуальном состоянии, на его создание уйдёт куча времени, да и использовать его в других сферах (например, тестирование) нельзя.
  2. Создать документацию с помощью специализированных программ (спецификаций).
    Их нельзя сделать такими подробными, как тестовый документ, но зато можно настроить автогенерацию (изменение кода приложения документации автоматически с учётом изменений), которая позволит быть документации API всегда в актуальном состоянии, что очень важно. Поэтому сейчас большинство компаний выбирает именно этот способ. Повторюсь, ведь от актуальности документации API зависит качество разработки ПО.

Одни из самых популярных спецификаций — это RAML, Swagger и API Blueprint.
Например, если программирование Системы происходи в MS Visual Studio, то в ней автоматически генерируется Xml (представлена на картинке ниже), с помощью которой уже можно создать в любой другой спецификации документацию API.

В данной статье разберём спецификацию Swagger, так как, на мой взгляд, она является более удобной для работы.
Когда понимание документирование API будет «на уровне», то можно уже выбрать любую другую программу, которая нравится больше, а для начала можно начать и с Swagger.

Swagger

Для учебных целей можно открыть Swagger Editor, в котором можно попробовать создавать документацию API.
Сайт: http://editor.swagger.io/
Swagger Editor состоит из двух блоков: код (слева), документация API (блок справа (зависит от блока слева)).

Типы аннотаций, использованные для описания методов:

  • Get — означает, что для доступа к методу должен использоваться http-метод GET. Существуют аналогичные аннотации для всех http-методов: Post, Put и другие.
  • Parameter — используется для описания параметров метода.
  • Response — используется для описания ответа API.
  • Schema — используется для описания формата выходных данных.

Документация API

В Swagger генерация происходит автоматически.
Полученная документация содержит описание всех типов данных, возвращаемых API, список доступных методов c подробным описанием.

Описание метода API содержит его url, описание всех параметров, а также все варианты ответов. Т.к. мы ссылались на модель Post в описании ответа, мы можем видеть ссылку на эту модель и даже пример ответа API, сгенерированный на основании описания модели.

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

Что такое API в веб-приложениях и зачем он нужен

Начнем с основ: что такое API? Аббревиатура расшифровывается как Application Programming Interface, или интерфейс для программирования приложений. Название, вроде бы, говорит само за себя, но лучше рассмотреть более детальное объяснение.

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

В случае веб-приложений, API может отдавать данные в отличном от стандартного HTML формате, благодаря чему им удобно пользоваться при написании собственных приложений. Сторонние общедоступные API чаще всего отдают данные в одном из двух форматов: XML или JSON. На случай, если вы решили сделать API для своего приложения, запомните, что JSON намного более лаконичен и прост в чтении, чем XML, а сервисы, предоставляющие доступ к данным в XML-формате, постепенно отказываются от последнего.


API в веб-приложениях на примерах

Некое приложение – например, Github – имеет свой API, которым могут воспользоваться другие разработчики. То, как они будут пользоваться им зависит от возможностей, которые предоставляет API и от того, насколько хорошо работает фантазия у разработчиков. API Гитхаба позволяет, например, получать информацию о пользователе, его аватаре, читателях, репозиториях и множество других полезных и интересных сведений.

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

На основе API строятся такие вещи, как карты 2GIS, всевозможные мобильные и десктопные клиенты для Twitter и Vkontakte. Все их функции стали возможными именно благодаря тому, что соответствующие сервисы имеют качественные и детально документированные API.

Стандартный запрос данных от стороннего API выглядит примерно так:

На случай, если кто-то еще не знает, стоит заметить, что curl не имеет никакого отношения к API и используется в операционных системах для отправки и получения данных через терминал. Более подробно на Википедии.

Подобным образом можно посылать запрос на любом языке, в том числе и на Ruby. Ответом на запрос будет примерно такая информация:

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

Записаться Хочешь узнать ещё больше? Записывайся
на обучение к нашим менторам

Зачем нужен API вашему приложению?

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

Мобильное приложение! Да-да, множество мобильных приложений для различных сервисов работают при использовании API этих самых сервисов. Вы описали API, сделали простенькое мобильное приложение и клиент со смартфоном будет получать информацию в свое устройство именно через API. Это удобно, это разумно, это имеет смысл.

Опенсорс. Все становится лучше, если использовать опенсорс :) На самом деле, если у вашего приложения сложилась определенная аудитория, которая пользуется им, почему бы не обернуть это себе на пользу? Ну и на пользу аудитории, конечно же, тоже. Создайте API, при помощи которого ваши пользователи при желании смогут создать новые клиенты для вашего приложения, новые сервисы на его основе и, быть может, раскроют новые его грани.

Максимальное разделение фронтенда и бэкенда. Например, при использовании фронтенд-фреймворков. О том, как подключить фронтенд-приложение на Angular.js к API мы даже написали целую статью.

Одного API недостаточно

Создать полноценный API для своего приложения – лишь половина дела. Как вы предполагаете обращаться к API? Как к нему будут обращаться ваши пользователи?

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

Еще раз воспользуемся Github для приведения примера: для работы с АПИ этого прекрасного сервиса (а интерфейс у него предоставляет обширнейшие возможности) создано несколько библиотек на различных языках, например гем Octokit. В документации к таким библиотекам (и приведенному в качестве примера гему) любой заинтересованный разработчик сможет отыскать все необходимые способы получения информации от Гитхаба и отправки её обратно через API сервиса.

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

Полезные ссылки

По ссылкам ниже вы сможете прочитать о том, почему API – это хорошо и о том, что такое RESTful API и зачем придерживаться подхода REST.

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

Мы рассказываем, как стать более лучшим разработчиком, как поддерживать и эффективно применять свои навыки. Информация о вакансиях и акциях эксклюзивно для более чем 8000 подписчиков. Присоединяйся!

  • mkdev
  • Менторы
  • Специализации
  • Статьи
  • О проекте
  • Что такое менторство
  • Как проходит обучение
  • Цены
  • FAQ
  • Impressum
  • Аккаунт
  • Записаться
  • Войти
  • Соцсети

© Copyright 2014 — 2020 mkdev | Privacy Policy | Lang: Russian

Как подружить маркетолога с API и самому научиться делать интеграции

Содержание:

Эту статью подготовил Рома Молочко, наш маркетолог. Он отлично разбирается в интеграциях, сам настраивает передачу данных в любой сервис и сегодня он готов поделиться своим кунг-фу с вами. Не обещаем, что будет легко (хотя мы старались), но полезно будет точно.

Кому будет полезно

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

Чем поможет этот навык

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

На пальчиках — что такое API

API проще понять на примере. Чтобы соединить два устройства, вы используете кабель или любую другую беспроводную связь, причем эта связь имеет за собой определенную функциональность: передача данных, синхронизация и тд. Кабель или Bluetooth работают словно API-интерфейс: соединяют две или более систем для достижения определенной цели или функциональности. Такую связь называют интеграцией.

Несколько близких примеров интеграций: коллтрекинг, отправка лидов в CRM, сбор данных для Google Analytics — все эти примеры используют Javascript API, хоть это и не относят к интеграциям.

Однако есть интеграции, так называемые «однокнопочные». Обычно они встроены в сам сервис, который предоставляет готовую интеграцию. Например:

Итак, API — это набор функций, который связывает (интегрирует) программные продукты. Это не точное определение, но достаточное для понимания маркетологу его задач.

Иногда вы можете встретить API c добавкой «REST». REST — это просто стандарт, не более того. Не обращайте на это внимания.

Начинаем разбираться

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

Почти все API популярных сервисов построены на http-запросах. Давайте начнем именно с них. Почти каждый раз, когда вы заходите на какой либо сайт: http://carrotquest.io , вы совершаете http-запрос по адресу: carrotquest.io. Ваш браузер получает в ответ содержание, которое вы видите в браузере при загрузке страницы.

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

Передача данных происходит за счет запросов. Сам запрос может иметь определенную информацию и содержание. Чтобы разобраться, что такое запрос, давайте вернемся к примерам. Представьте, что вы отправляете письмо с определенным текстом. Письмо — это запрос, текст — содержание. Адресат может вам в ответ отправить свое письмо или наоборот — ничего не ответить. Такая же логика работает с запросами. Есть информация, которую надо только отправить, а иногда надо получить ответ по требованию. Обе задачи решаются запросами.

Но есть небольшое отличие от бумажной рассылки писем — адресат всегда отправляет уведомление о получении. Такую роль выполняют статусы. Вы наверняка встречались с “ошибкой 404” или “502 bad gateway” при загрузке веб-страниц в браузере. Это и есть статус. Кроме того, адресат вместе со статусом может отправить подробности. Например, что ошибка в параметрах или эта версия API устарела.

Вообще, про статусы вам нужно знать главное: 200 ОК — все хорошо, запрос ушел без ошибок; любой другой, который начинается не с 2**, надо гуглить. Вот список всех статусов .

Теперь поговорим про содержание. В случаях, когда вы загружаете веб-страницу, вы получаете в содержании HTML. Работая с API, вы будете в основном работать с JSON или XML. Иногда в качестве содержания бывает просто текст, такое тоже возможно.

Почти в 90% случаев в качестве содержания в запросе будет формат JSON. Поэтому в основном вы будете работать именно с ним. Также стоит познакомится с форматом XML. Ваша задача самостоятельно изучить материал про эти форматы в статьях ниже. Причем не обязательно разбираться, как оперировать данными в содержании, но обязательно понимать структуру и какие данные есть.

Илон Маск рекомендует:  Что такое код ncurses_noecho

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

Что вы должны знать из статей:

  1. из чего состоит структура запроса,
  2. что такое POST и GET, чем отличаются,
  3. какие структуры данных можно отправлять в запросе,
  4. что такое JSON, XML.


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

Заглянем в API

Почти в каждом API есть слово «методы» — это, грубо говоря, функциональная возможность API. Например, вот так выглядят методы в amoCRM.

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

Довольно часто, копаясь в API, вы можете встретить классификацию методов по GET и POST. Для нас это подсказка, что в GET мы получаем данные, а в POST изменяем данные внутри, создавая, дополняя или перемещая информацию.

Заглянем в один из методов. Откроем метод «Записать событие» в Carrot developers:

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

Вроде, все логично:

Название события (event) — у созданного события должно быть имя.

Идентификатор пользователя (ID) — пользователь, в которого нужно записать событие.

НО здесь может быть справедливый вопрос: где мне взять id пользователя, чтобы записать в него событие?

Вам нужно об этом позаботится заранее. Отправляя запрос, у вас должен быть доступ к нужному id пользователя. Например, вы хотите отправлять события из AmoCRM в Google Analytics, что у пользователя изменился статус сделки. Для этого нужно, чтобы в amoCRM в сделке был записан client_id пользователя. Один из способов взять client_id — отправить вместе с заявкой, взяв client_id из cookie пользователя.

Рассмотрим метод более детально.

  • URL — адрес, на который отправляем запрос.
  • Аргументы — данные, которые отправляем в запросе.
  • Ответ — после отправки мы всегда получаем ответ. Напоминаем, что 200 — это ОК, запрос успешно отправлен. Другой статус с ‘error’ — ошибка. Вы можете загуглить ошибку и разобраться, в чем проблема.

Мы рекомендуем всегда передавать аргументы в виде структуры JSON. Это выдерживает стиль и не создают путаницу. + Низкая вероятность ошибки в синтаксисе:

Webhook и микросервисы

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

Например, в amoCRM это может быть смена статуса сделки, а в Carrot quest — определенное событие пользователя.

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

Справедливый вопрос: что мне делать с этой структурой, если она не подходит ни под одно API и вообще не подходит мне?

Любую структуру можно преобразовать в новый запрос, который подходит под API другого сервиса. По сути, задача сводится к следующему: взять данные из вебхука, собрать эти данные в новый запрос под определенный метод другого API. Таким посредником обычно служит отдельно написанный код (так называемый микросервис), который принимает вебхуки и отправляет новые запросы.

Нет разницы на чьей стороне работает микросервис: на вашей или на стороне клиента, т.е. на каком сервере. Вопрос может быть актуальным, если микросервис оказывает нагрузку, поэтому посоветуйтесь с разработчиками, если задумаетесь над реализацией.

Кроме того, существуют облачные решения для интеграций. Например, AWS Lambda.

Где еще понадобятся микросервисы

Почти каждый раз, когда надо связать два метода из разных API. Например, из API одного сервиса методом GET мы получаем данные о пользователе, потом собираем новый запрос и отправляем его методом POST по API другого сервиса.

Готовые или «однокнопочные » интеграции как раз и есть такие же микросервисы, которые объединяют два разных API, но с интерфейсом и возможностью задавать свои настройки.

Если вы научились сами писать микросервисы — вы почти освоили все, что нужно по API для основных задач у маркетолога.

Где не понадобятся микросервисы

Если вам не нужно связывать два разных API, то запрос достаточно сформировать от отправителя. Разберем это опять на примере интеграции «Отправка лидов в CRM из форм сайта». В данном случае запрос формируется и исполняется на стороне браузера пользователя, когда он оставляет заявку.

В случае же связывания двух API, необходим посредник, который «переведет» один запрос в другой.

Javascript API

Если сервис работает с вебом, то, скорее всего, у него оно есть. JS API расширяет возможности работы с сайтом и его пользователями. Частый случай использования в Carrot quest — запись свойств и событий с сайта, которые нельзя собрать, используя стандартные возможности мастера сбора данных.

Здесь есть два пути.

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

Попробуйте сначала научится разбираться в документации JS API, как все устроено. Не нужно запоминать код. Обратите внимание, что как и в случае с HTTP, у JS API тоже есть методы и параметры к ним. Исходя из этих методов, вы научитесь понимать возможности. Этого будет достаточно для составления ТЗ разработчику, и, возможно, вам не потребуется разбираться в программировании на JS.

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

Другие API

Так сложилось, что разным классам возможностей API дают свои имена: Data API, Call API. Почти всегда это частный случай API с HTTP-запросами, который вынесли в отдельный класс, потому что он отличается по назначению. Но бывают исключения, например, в Carrot quest URL API: https://carrotquest.io/developers/urlapi/

Кроме того, нужно сказать, что есть API с другими протоколами — не с HTTP. Например, SMPP. Их часто можно встретить в SMS-сервисах.

Дополнительно. Навыки в программировании

Для работы с API мы рекомендуем Python и JavaScript. И это не только для API, в целом это хорошее сочетание, чтобы делать прикладные программы, парсеры и тд. Начните с Python.

Python — язык довольно простой и понятный, в отличии от других, имхо. Очень богат пакетами под разные задачи. Плюс это популярный язык в Data science и вообще, один из основных инструментов для работы с данными, если не самый основной. Конечно, если вы захотите двигаться в этом направлении. И, наверное, самый простой в изучении.

С чего начать

Практика дает в 100 раз больше, чем время потраченное на теорию. Поэтому тактика такая: вводная лекция и сразу в бой. При этом не нужно вовсе забивать на теорию. Здесь работает следующий принцип: сначала делай — потом думай. Потом вы поймете, что основное время вы тратите на поиск решения проблемы, и это нормально.

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

План обучения быть таким:

  1. Основные возможности языка Python;
  2. Работа с пакетами.

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

Рекомендую парочку курсов:

Must-have пакеты для работы с API:

  • Requests — пакет для работы с HTTP-запросами.
  • Json — пакет позволяет кодировать и декодировать данные в удобном формате.
  • Может пригодится, если нет возможности работать с JSON:
  • xml.etree.ElementTree — для работы с XML-структурами.

Javascript

В основном нужен для работы с вебом абсолютно под разные задачи. Рекомендуем ознакомиться лишь поверхностно, чтобы разбираться в API. И вот почему. Без основ HTML и CSS это будет бесполезно и сложно. Все равно эти основы понадобятся.

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

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

  1. Основы Javascript. Основные кирпичики, из которых состоят скрипты.
  2. Объекты, прототипы, методы. Нужно просто знать, что это и как с этим работать.
  3. DOM, браузерные события, формы, элементы управления, как отправить http-запрос, работа с cookie + параллельно изучаете библиотеку jQuery. Это важно. Так как вы будете понимать, что вы можете сделать с помощью jQuery, а в каких случаях делать все на чистом JS. Во-вторых, все запоминать не придется. Главное — ориентироваться.

А дальше зависит от того, какие задачи вы хотите решать. Тот план, что выше, в 95% случаев подходит под задачи с API.

С курсами так же как и с Python: возьмите несколько и изучайте параллельно. Необязательно всегда идти по порядку курса. Забегать вперед даже полезно. Но парочку курсов можно выделить:

Хозяйке на заметку

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

Напоследок

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

Что такое код api

API key берется на официальном сайте после ввода логина и пароля. Получить его можно вот по этой ссылке. Оно нужно для работы некоторых полезных программ, его могут попросить у вас при приеме в корпорацию (например в нашу).
Чтобы получить API key его надо сгенерировать, а для этого нажать там на кнопочку.
Верхняя кнопка генерирует Limited API, нижняя — Full API.
Если вы однажды сгенерировали API key и ввели в какую-то программу, а потом захотели поставить еще одну, которая тоже просит у вас API не надо нажимать на кнопку второй раз, это сменит вам API key и первая программа перестанет работать, вместо этого достаточно просто еще раз скопировать эту информацию.

А чуть ниже я привел перевод всего того, что там написано на доступный русский язык.

API key секретный код, который идентифицирует вашу учетную запись. В сочетании с вашим user ID пользователя, этот ключ позволяет сторонним программам и веб-сайтам получить доступ к информации о ваших персонажах и корпорации. Используя эти данные, подобные утилиты могут улучшить вашу жизнь в EVE путем предоставления полезных функций, таких как экспорт транзакций в кошельке, уведомления об окончании тренировки, и другие инструменты.

Безопасно ли это? Может кто-то украсть мою учетную запись?


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

В отличии от логина и пароля, доступ к API key (full или limited), не дает людям доступ к вашей учетной записи. API key только позволяет получателю просмотреть вашего персонажа и данные о корпорации, но не дает им возможность изменить что либо. Имея ваш API key они не могут войти в игру или написать сообщение на форуме. API key — не производная от логина-пароля учетной записи и нет никакого способа, восстановить ваш пароль, используя API key .

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

Мне до сих пор это не нравится.

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

Я дал кому-то мой API key, и теперь я хочу, чтобы отказаться от его использования!
Если вы считаете, что кто-то злоупотребляет вашим API key, вы можете создать новый с помощью кнопок выше. Пожалуйста, обратите внимание, что все программы и веб-сайты, которые используют ваш старый API key больше не будет иметь доступа к вашим данным, если вы не предоставите им новый API key.

Application Programming Interface (API)

Интерфе́йс программи́рования приложе́ний (Application Programming Interface, API [эй‐пи‐ай]; по-русски чаще произносят [апи́]) — набор методов (функций), который программист может использовать для доступа к функциональности программного компонента (программы, модуля, библиотеки). API является важной абстракцией, описывающей функциональность «в чистом виде», безотносительно того, как реализована эта функциональность.

Содержание

API как средство интеграции приложений

API определяет функциональность, которую предоставляет программа (модуль, библиотека), при этом API позволяет абстрагироваться от того, как именно эта функциональность реализована.

Если программу (модуль, библиотеку) рассматривать как чёрный ящик, то API — это множество «ручек», которые доступны пользователю данного ящика, которые он может вертеть и дёргать.

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

По такому принципу построены протоколы передачи данных по Internet. Стандартный протокол Internet (сетевая модель OSI) содержит 7 уровней (от физического уровня передачи пакетов бит до уровня протоколов приложений, подобных протоколам HTTP и IMAP). Каждый уровень пользуется функциональностью предыдущего уровня передачи данных и, в свою очередь, предоставляет нужную функциональность следующему уровню.

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

API библиотеки функций и классов включает в себя описание сигнатур и семантики функций.

Application Programming Interface (API) программный интерфейс взаимодействия между системами, позволяющий:

  • Получать доступ к бизнес-сервисам предприятия
  • Обмениваться информацией между системами и приложениями
  • Упростить взаимодействие между компаниями, партнерами, разработчиками и клиентами

Open API стратегия

API стратегия включает в себя:

  • Разработку бизнес-продуктов на основе существующих API
  • Предоставление внутренних сервисов разработчикам
  • Модели монетизации API для построения мультиканального взаимодействия и повышения прибыли

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

Рынок интеграционных решений развивается в контексте эволюции API — от EDI и SOAP до Web 2.0, с которого началась эра публичных API. Число таких интерфейсов в ближайшие 3 года может вырасти более чем в 50 раза и достичь 1 миллиона. Это связано с мультиканальностью: каналы взаимодействия с клиентами должны меняться вместе с ними. Непрерывный рост количества потребителей и объема данных привел к появлению экономики API, помогающей на основе открытых интерфейсов создавать инновационные бизнес-модели использования корпоративных активов и сервисов.

Сигнатура функции

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

Иногда различают сигнатуру вызова и сигнатуру реализации функции. Сигнатура вызова обычно составляется по синтаксической конструкции вызова функции с учётом сигнатуры области видимости данной функции, имени функции, последовательности фактических типов аргументов в вызове и типе результата. В сигнатуре реализации обычно участвуют некоторые элементы из синтаксической конструкции объявления функции: спецификатор области видимости функции, её имя и последовательность формальных типов аргументов.

Например, в языке программирования Си++ простая функция однозначно опознаётся компилятором по её имени и последовательности типов её аргументов, что составляет сигнатуру функции в этом языке. Если функция является методом некоторого класса, то в сигнатуре будет учаcтвовать и имя класса.

В языке программирования Java сигнатуру метода составляет его имя и последовательность типов параметров; тип значения в сигнатуре не участвует.

Семантика функции

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

API операционных систем. Проблемы, связанные с многообразием API

Практически все операционные системы (Unix, Windows, MacOS, и т. д.) имеют API, с помощью которого программисты могут создавать приложения для этой операционной системы. Главный API операционных систем — это множество системных вызовов.

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

С другой стороны, отличия в API различных операционных систем существенно затрудняют перенос приложений между платформами. Существуют различные методы обхода этой сложности — написание «промежуточных» API (API графических интерфейсов Qt, Gtk, и т. п.), написание библиотек, которые отображают системные вызовы одной ОС в системные вызовы другой ОС (такие среды исполнения, как Wine, cygwin, и т. п.), введение стандартов кодирования в языках программирования (например, стандартная библиотека [[Си языка C), написания интерпретируемых языков, реализуемых на разных платформах (sh, perl, php, tcl, Java, и т. д.)

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

Например: для того, чтобы увидеть в браузере строчку «Hello, world!» достаточно лишь создать HTML-документ с минимальным заголовком, и простейшим телом, содержащим данную строку. Что произойдёт, когда браузер откроет этот документ? Программа-браузер передаст имя файла (или уже открытый дескриптор файла) библиотеке, обрабатывающей HTML-документы, та, в свою очередь, при помощи API операционной системы прочитает этот файл, и разберётся в его устройстве, повызывает через API библиотеки стандартных графических примитивов операции типа «очистить окошко», «написать выбранным шрифтом Hello, world!», при этих операциях библиотека графических примитивов обратится к библиотеке оконного интерфейса с соответствующими запросами, уже эта библиотека обратится к API операционной системы с запросами вида «а положи-ка мне в буфер видеокарты вот это».

При этом практически на каждом из уровней реально существует несколько возможных альтернативных API. Например: мы могли бы писать исходный документ не на HTML, а на LaTeX, для отображения могли бы использовать любой браузер. Различные браузеры, вообще говоря, используют различные HTML-библиотеки, и, кроме того, всё это может быть (вообще говоря) собрано с использованием различных библиотек примитивов и на различных операционных системах.

Основными сложностями существующих многоуровневых систем API, таким образом, являются:

  • Сложность портирования программного кода с одной системы API на другую (например, при смене ОС);
  • Потеря функциональности при переходе с более низкого уровня на более высокий. Грубо говоря, каждый «слой» API создаётся для облегчения выполнения некоторого стандартного набора операций. Но при этом реально затрудняется, либо становится принципиально невозможным выполнение некоторых других операций, которые предоставляет более низкий уровень API.

Основные типы API

  • Доступ к API предоставляется только внутренним разработчикам
  • Приложения нацелены на сотрудников предприятия
  • Консистентность разработки
  • Снижение затрат
  • Повышение эффективности разработки
  • API доступны только ограниченному набору бизнес-партнеров
  • Приложения предназначены для конечных потребителей и для бизнес-пользователей
  • Автоматизация процесса разработки
  • Развитие партнерских отношений
  • Оптимизация процесса взаимодействия с партнерами

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

  • Разработка новых сервисов
  • Развитие экосистемы
  • Мультиканальное взаимодействие

Что такое код api

API (аббревиатура от Application Programming Interface) – интерфейс программирования приложений, позволяющий сервисам взаимодействовать, получать доступ и обмениваться данными.

По сути API выступает в роли посредника между двумя приложениями или сервисами – оно предоставляет решения (классы, функции, структуры), реализованные в одном сервисе, и создает среду для создания нового приложения с применением этих решений.

Объяснение для чайников: например, набор команд, которым обучена собака – это API. Если мы знаем эти команды, мы без проблем сможем взаимодействовать с собакой (она понимает, что именно мы хотим от нее) и тренировать ее. Если у нас нет доступа к такому API, нам придется заново обучать собаку командам (на что уйдет много времени и успех не гарантирован) или она просто не будет выполнять наши команды.

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

Типы API

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

  • RPC (Remote Procedure Call ) – удаленный вызов процедур,
  • SOAP (Simple Object Access Protocol) – простой протокол доступа к объектам,
  • REST (Representational State Transfer ) – передача состояния представления.

API можно разделить по типу сервиса, у которого они есть: приложения, вебсайты и операционные системы. Например, у большей части операционных систем (Unix, Windows, MacOS, и т. д.) есть API, благодаря которому возможно программирование сервисов для этих систем.

Также API можно подразделять по типу доступа:

  • Внутренние API (доступны внутренним разработчикам компании и сотрудникам, используются для оптимизации рабочих процессов и снижения затрат),
  • Партнерские API (доступны бизнес-партнерам и потребителям продукта или услуги, используются для оптимизации процессов и разработки),
  • Публичные API (доступны всем, используются для создания новых сервисов и популяризации существующего направления).

Плюсы и минусы работы с API

Плюсов у использования API немало:

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

Но также есть и минусы:

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

Использование API на практике

Самые распространенные способы использования различных API разработчиками и компаниями по всему миру:

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


Популярные API

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

  • Facebook API позволяет логиниться на сторонних платформах с помощью своего аккаунта, оплачивать покупки в приложении, получать доступ к данным крупных и средних аккаунтов Instagram Business, управлять страницами сообществ и публиковать на них контент, получать статистику по рекламе, управлять объявлениями и аудиторией, запускать прямые эфиры,
  • С помощью Twitter API можно показывать ленту твитов на сайте, управлять профилем и настройками учетной записи, автоматически создавать рекламные кампании в Твиттере и управлять ими,
  • API ВКонтакте дает возможность отслеживать активность пользователей в сообществах, создавать ботов, собирать статистику по действиям в сообществе, автоматически модерировать контент, автоматизировать работу с товарами (например, импорт из внешней базы), получать текстовые публикации из ВКонтакте по заданным ключевым словам и т.д.,
  • Telegram Bot API представляет собой HTTP-интерфейс для работы с ботами в Telegram,
  • YouTube API позволяет встраивать видео на сайт, создавать плейлисты, встраивать плеер в приложение, получать данные об активности пользователей.

Не менее популярны и следующие API:

Яндекс API – у всех популярных сервисов Яндекса есть свои API (Вебмастер, Метрика, Директ, Маркет, Аудитории, Карты и т.д.), благодаря которым можно:

  • получать информацию о товарах, представленных на Маркете и создавать приложения для автоматизированного размещения,
  • автоматизировать создание счётчиков Метрики, настройку целей и получение статистики,
  • создавать приложения для управления рекламными кампаниями, автоматизировать процесс создания рекламных кампаний и управлять ими через интерфейс собственного приложения,
  • настраивать разнообразные аудиторные сегменты, которые можно использовать для показа рекламных объявлений,
  • использовать картографические данные,
  • размещать на сайте или в приложении расписания поездов, электричек, самолетов,
  • автоматизировать создание и отправку заказов на доставку,
  • встроить Яндекс.Переводчик в мобильное приложение или веб-сервис для конечных пользователей,
  • автоматизировать проверку семантической разметки и т.д.

Google API – компания также предоставляет разработчикам несколько десятков API для решения самых разных задач:

  • Работа с устройствами и приложениями на платформе Android,
  • Управление событиями в Календаре,
  • Управление товарами и акккаунтом в Google Покупках,
  • Управление файлами на Google Диске, включая загрузку, скачивание, поиск, изменение прав доступа,
  • Просмотр и управление данными Google Analytics,
  • Чтение и редактирование файлов в Документах,

Если думать об API, как о способе упрощения кода, то можно сказать, что библиотека jQuery, написанная на языке программирования JavaScript, является тоже своего рода API, т.к. предлагает разработчикам способ упростить код в несколько раз (5-6 строк вместо 30).

Синонимы: нет
Все термины на букву «A»
Все термины в глоссарии

Руководство по построению HTTP API

Введение

Данное руководство содержит рекомендации по проектированию HTTP API, которые были почерпнуты из работы API облачной платформы Heroku, кроме того, оно также содержит информацию о новом функционале и внутреннем API в Heroku.

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

Илон Маск рекомендует:  Как сделать так, чтобы на событие onclick фон менялся

При прочтении данной статьи подразумевается, что вы знакомы с основными принципами HTTP и JSON.

Основы

Принцип разделения ответственности

При проектировании старайтесь сохранять простоту системы, разделяя ответственность между различными частями цикла «запрос-ответ». При этом простота принимаемых решений позволит концентироваться на решении все более сложных задач. Запросы и ответы выполняются для получения доступа к определенному ресурсу или набору ресурсов. Для определения сущности, которую необходимо получить, используйте путь и тело ответа для передачи содержимого, а заголовки – для передачи метаданных. Можно передавать все параметры в теле запроса, но, как показывает практика, такое решение является менее гибким. Более правильным подходом будет передача части параметров в заголовках.

Требуйте использования защищенных соединений

Для получения данных при помощи API используйте только защищенные соединения с TLS.
Лучше решением было бы отклонять все запросы, не использующие TLS, а именно запросы по http или на 80-ый порт, во избежание небезопасного обмена данными. В случаях, когда это невозможно, отдавайте ответ 403 Forbidden .

14 ноября в 10:00, Санкт-Петербург, беcплатно

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

Требуйте наличие версии в заголовке Accept

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

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

Лучше всего – добавить версию в заголовок вместе с другими метаданными, используя заголовок Accept с пользовательским типом содержимого:

Используйте заголовок ETags для кеширования

Включайте заголовок ETags во все запросы, определяя при этом версию возвращаемого ресурса. Это позволит пользователям кэшировать ресурсы и реализовывать условные запросы при помощи использования заголовка If-None-Match , который поможет определить, нужно обновлять кэш или нет.

Используйте Request-ID для интроспекции

Включайте заголовок Request-Id , содержащий в себе UUID значение, в каждый ответ сервера. Регистрируя эти значения на клиенте, сервере или другом сервисе, вы получаете возможность отлаживать и диагностировать проблемы, связанные с запросами.

Разделяйте большие ответы сервера на несколько небольших при помощи заголовка Range

Большие ответы необходимо разбивать на более мелкие, используя заголовок Range . Для получения более детальной информации о заголовках запросов/ответов, кодах состояний и ограничениях изучите Обсуждение использования заголовка Range в API платформы Heroku .

Запросы

Возвращайте соответствующие коды состояний

Возвращайте соотвествующий код состояния HTTP в каждом ответе. Успешные ответы должны содержать такие коды состояний:

  • 200 – GET запрос завершился успешно, синхронный DELETE или PATCH запрос завершился успешно или синхронный PUT запрос обновил существующий ресурс.
  • 201 – Синхронный POST запрос завершился, синхронный PUT запрос создал новый ресурс.
  • 202 – Принят POST , PUT , DELETE или PATCH запрос, который будет обработан асинхронно.
  • 206 – GET запрос завершился успешно, но будет возвращен частичный ответ (см. раздел про заголовок Range ).

Обратите внимание на использование кодов состояния ошибок авторизации и аутентификации:

  • 401 Unauthorized – запрос завершился с ошибкой, поскольку пользователь не прошел аутентификацию.
  • 403 Forbidden – запрос завершился с ошибкой, так как пользователь не авторизовался для получения доступа к определенному ресурсу.

Возвращайте соответствующие коды ошибок для предоставления дополнительной информации об их причинах:

  • 422 Unprocessable Entity – Ваш запрос был распознан, но содержит неверные параметры.
  • 429 Too Many Requests – Превышен лимит запросов, попробуйте позже.
  • 500 Internal Server Error – Проблема на стороне сервера, проверьте состояние сайта и/или сообщите о проблеме.

Для получения более подробной информации о кодах состояния HTTP изучите спецификацию.

По возможности, предоставляйте полные версии ресурсов

Возвращайте пользователям вашего API полное представление ресурса (то есть объект со всеми атрибутами) во всех ответах, где это возможно. Всегда предоставляйте полную версию ресурса в ответах на запросы с кодами состояния 200 и 201 , включая PUT , PATCH и DELETE запросы.

Ответы на запросы с кодом состояния 202 не должны содержать все поля объекта

Ваш API должен принимать сериализованный JSON в теле запроса

Ваш API должен предусматривать возможность передачи сереализованного JSON в теле PUT / PATCH / POST запросов вместо, либо в дополнение к передаваемым данным формы. Таким образом создается симметрия в JSON-ответах:

Будьте последовательны при конструировании пути к ресурсу

Названия ресурсов

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

Действия

Старайтесь проектировать такие конечные url, которые не требуют дополнительных действий для отдельных ресурсов. В случаях, когда это необходимо, добавляйте в общий путь компонент «action» для того, чтобы четко определить эти действия:

Используйте названия компонентов пути и атрибутов в нижнем регистре

Для названий компонентов пути к ресурсу используйте нижний регистр и разделяйте их при помощи дефиса.

Названия атрибутов лучше писать в нижнем регистре, а в качестве разделителя лучше использовать нижнее подчеркивание – таким образом названия полей можно писать без скобок в Javascript:

Ваш API должен поддерживать доступ к ресурсу не только по его id

В некоторых случаях для конечных пользователей неудобен доступ к ресурсу по его идентификатору. Например, пользователю удобнее для доступа к конкретному приложению Heroku использовать название приложения, а не его UUID. В таких случаях нужно организовать доступ как по имени, так и по идентификатору:

Сведите к минимуму количество вложений в пути для доступа к ресурсу

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

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

Ответы

Предоставляйте UUID запрашиваемых ресурсов

У каждого ресурса по умолчанию должен быть атрибут id . В качестве значений идентификатора ресурса старайтесь всегда использовать UUID. Не используйте идентификаторы, которые не будут уникальными в масштабе вашего сервиса, особенно автоинкрементные идентификаторы.
UUID ресурса выводите в формате 8-4-4-4-12:

Предоставляйте информацию о дате создания и изменения ресурса

По умолчанию ресурс должен хранить информацию о дате его создания created_at и обновления updated_at .

Временные величины должны быть форматированы согласно ISO8601

Принимайте и возвращайте временные данные только в UTC, а выводите в формате ISO8601:

Отношения с внешними сущностями должны быть вынесены во вложенный объект

Внешние отношения должны быть сериализованы как вложенный объект:

А не как поле объекта:

Такой подход позволяет добавить больше информации о связанном объекте без необходимости менять структуру ответа:


Создавайте структурированные ответы в случае возникновения ошибок

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

Показывайте ограничение по количеству запросов

Ограничение по количеству запросов вводится для поддержания работоспособности системы и возможности качественного обслуживания других клиентов. Для расчета ограничений на количество запросов можно использовать алгоритм текущего ведра. Возвращайте оставшееся количество запросов для каждого запроса в заголовке ответа RateLimit-Remaining .

JSON во всех ответах должен быть минимизирован

Лишний пробел увеличивает размер ответа и многие Javascript клиенты для удобочитаемости автоматически отформатируют JSON. Поэтому лучше минимизировать JSON ответы:

Вы можете опционально добавить возможность получать более развернутый ответ, указывая дополнительный параметр (например, ?pretty=true ) или задавая значения для заголовка Accept ( Accept: application/vnd.heroku+json; version=3; indent=4; ).

Артефакты

Предоставляйте удобную для обработки JSON-схему

Для точного описания вашего API предоставляйте JSON-схему. Для управления схемой используйте prmd, также удостоверьтесь в том, что она проходит валидацию при помощи команды prmd verify .

Предоставляйте удобочитаемую документацию

Для того, чтобы разработчики разбирались в принципах работы вашего API, предоставьте им удобную документацию. Если вы создали JSON-схему, используя prmd , как описано выше, вы можете легко сгенерировать Markdown документацию для всех конечных url, используя команду prmd doc .

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

  • процесс аутентификации – получение и использование пользовательского токена;
  • стабильность API и его версию, а также информацию о том, как выбрать нужную версию API;
  • общие заголовки запросов и ответов;
  • формат выдачи ошибки;
  • примеры использования API с клиентами на разных языках;

Предоставляйте примеры запросов, которые можно протестировать

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

Если вы используете prmd для создания документации, то такие примеры будут сгенерированы автоматически для каждого конечного url.

Опишите стабильность вашего API

Вы можете описать степень стабильности вашего API или отдельных конечных url при помощи установки флагов prototype / development / production .

Для получения дополнительной информации, вы можете изучить документ Политика совместимости Heroku API.

Как только вы объявили ваш API готовым к релизу и стабильным, не стоит совершать модификаций, которые нарушают обратную совместимость внутри этой версии. Для внесения таких изменений создайте новою ветвь API с новым индексом версии.

Введение в web APIs

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

Необходимые знания: Базовая компьютерная грамотность, понимание основ HTML и CSS, основы JavaScript (см. первые шаги, building blocks, объекты JavaScript).
Цель: Познакомиться с API, выяснить что они могут делать и как их использовать.

Что такое API?

Интерфейс прикладного программирования (Application Programming Interfaces, APIs) — это готовые конструкции языка программирования, позволяющие разработчику строить сложный функционал с меньшими усилиями. Они «скрывают» более сложный код от программиста, обеспечивая простоту использования.

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

Точно также, если мы хотим, например, программировать 3D графику, гораздо легче сделать это с использованием API, написанных на языках высокого уровня, таких как JavaScript или Python.

Note: См. также API в словаре.

API клиентской части JavaScript

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

  • API браузера встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, API Геолокации (Geolocation API) предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить свое расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.
  • Сторонние API не встроены в браузер по умолчанию. Такие API и информацию о них обычно необходимо искать в интернете. Например, Twitter API позволяет размещать последние твиты (tweets) на вашем веб-сайте. В данном API определён набор конструкций, осуществляющих запросы к сервисам Twitter и возвращающих определённые данные.

Взаимодействие JavaScript, API и других средств JavaScript

Итак, выше мы поговорили о том, что такое JavaScript API клиентской части и как они связаны с языком JavaScript. Давайте теперь тезисно запишем основные понятия и определим назначение других инструментов JavaScript:

  • JavaScript — Язык программирования сценариев высокого уровня, встроенный в браузер, позволяющий создавать функционал веб-страниц/приложений. Отметим, что JavaScript также доступен на других программных платформах, таких как Node. Но пока не будем останавливаться на этом.
  • API браузера (Browser APIs) — конструкции, встроенные в браузер, построенные на основе языка JavaScript, предназначенные для облегчения разработки функционала.
  • Сторонние API (Third party APIs) — конструкции, встроенные в сторонние платформы (такие как Twitter, Facebook) позволяющие вам использовать часть функционала этих платформ в своих собственных веб-страницах/приложениях (например, показывать последние Твиты на вашей странице).
  • Библиотеки JavaScript — Обычно один или несколько файлов, содержащих пользовательские (custom) функции . Такие файлы можно прикрепить к веб-странице, чтобы ускорить или предоставить инструменты для написания общего функционала. Примеры: jQuery, Mootools и React.
  • JavaScript фреймворки (frameworks) — Следующий шаг в развитии разработки после библиотек. Фреймворки JavaScript (такие как Angular и Ember) стремятся к тому, чтобы быть набором HTML, CSS, JavaScript и других технологий, после установки которого можно «писать» веб-приложение с нуля. Главное различие между фреймворками и библиотеками — «Обратное направление управления» ( “Inversion of Control” ). Вызов метода из библиотеки происходит по требованию разработчика. При использовании фреймворка — наоборот, фреймворк производит вызов кода разработчика.

На что способны API?

Широкое разнообразие API в современных браузерах позволяет наделить ваше приложение большими возможностями. Достаточно посмотреть список на странице MDN APIs index page.

Распространённые API браузера

В частности, к наиболее часто используемым категориям API (и которые мы рассмотрим далее в этом модуле) относятся :

  • API для работы с документами, загруженными в браузер. Явный пример — DOM (Document Object Model) API, позволяющий работать с HTML и CSS — создавать, удалять и изменять HTML, динамически изменять вид страницы и т.д. Любое всплывающее окно на странице или появляющееся «на ходу» содержимое — всё это благодаря DOM. Узнайте больше об этой категории API на странице Работа с документами.
  • API, принимающие данные от сервера, часто используются, чтобы обновить небольшие части веб-страницы. Эта, казалось бы, малая деталь оказывает огромное влияние на производительность и поведение сайтов, так как нет необходимости перезагружать всю страницу целиком, если вам нужно просто обновить список товаров или новых доступных историй. Это также сделает приложение или сайт более отзывчивым и «живым». Список API, благодаря которым это возможно, включает: XMLHttpRequest и Fetch API. Вы также могли встретить термин Ajax, описывающий эту технологию. Узнать больше об этой категории API на странице Получение данных от сервера.
  • API для работы с графикой широко поддерживаются браузерами, самые популярные: Canvas и WebGL, позволяющие программно изменять данные о пикселях, содержащиеся в элементе HTML Элемент может быть использован для отрисовки графики через скрипты (обычно используется JavaScript). На пример, его можно использовать для отрисовки графиков, делать композиции фото или даже выполнять анимации. Вы можете (и должны) дать альтернативное содержание внури блока . Этот контент будет рендерится в обоих браузерах, в старых которые не поддерживают canvas и в браузерах с отключённым JavaScript.»> для создания 2D и 3D изображений. Например, вы можете нарисовать фигуры, скажем, прямоугольники или круги, импортировать изображение в canvas и применить к нему фильтры, такие как сепия или оттенки серого с помощью Canvas API, или создать сложное 3D-изображение с освещением и текстурами, используя WebGL. Такие API часто используют в сочетании с API создания анимационных циклов (таких как window.requestAnimationFrame() ) и другими для создания постоянно меняющегося изображения на экране, как в мультфильмах или играх .
  • Аудио и Видео API как HTMLMediaElement , Web Audio API, и WebRTC позволяют делать действительно интересные вещи с мультимедиа. Например, создать собственный пользовательский интерфейс (User Interface, UI) для проигрывания аудио/видео, вывод на экран субтитров, записывать видео с веб-камеры для обработки в canvas (см. выше) или для передачи на другой компьютер в видео-конференции, применять звуковые эффекты к аудио-файлам (такие как gain, distortion, panning и т.д.).
  • API устройств — в основном, API для обработки и считывания данных с современных устройств удобным для работы веб-приложений образом. Мы уже говорили об API Геолокации, позволяющем считать данные о местоположении устройства. Другие примеры включают уведомление пользователя о появившемся обновлении для веб-приложения с помощью системных уведомлений (см. Notifications API) или вибрации (см. Vibration API).
  • API хранения данных на стороне пользователя приобретают всё большее распространение в веб-браузерах — возможность хранить информацию на стороне клиента очень полезна, когда необходимо создать приложение, которое будет сохранять своё состояние между перезагрузками страницы, или даже работать, когда устройство не в сети. В даный момент доступно немало таких API. Например, простое хранилище данных в формате имя/значение (name/value) Web Storage API или хранилище данных в формате таблиц IndexedDB API.

Распространённые сторонние API

Существует множество сторонних API; некоторые из наиболее популярных, которые вы рано или поздно будете использовать, включают:

  • Twitter API для добавления такого функционала, как показ последних твитов на сайте.
  • Google Maps API для работы с картами на веб-странице (интересно, что Google Maps также использует этот API). Теперь это целый набор API, который может справляться с широким спектром задач, как свидетельствует Google Maps API Picker.
  • Набор Facebook API позволяет использовать различные части платформы Facebook в вашем приложении, предоставляя, например, возможность входа в систему с логином Facebook, оплаты покупок в приложении, демонстрация целевой рекламы и т.д.
  • YouTube API, предоставляющий возможность встраивать видео с YouTube на вашем сайте, производить поиск, создавать плэйлисты и т.д.
  • Twilio API — фреймворк для встраивания функционала голосовой и видео связи в вашем приложении, отправки SMS/MMS из приложения и т.д.

Note: Вы можете найти информацию о гораздо большем количестве сторонних API в Programmable Web API directory.

Как работает API?

Работа разных JavaScript API немного отличается, но, в основном, у них похожие функции и принцип работы.

Они основаны на объектах

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

Note: Если вам ещё не известно как работают объекты, советуем вернуться назад и изучить модуль JavaScript objects прежде чем продолжать.

Вернёмся к примеру с API Геолокации — очень простой API, состоящий из нескольких простых объектов:

  • Geolocation , содержит три метода для контроля и получения геоданных.
  • Position , предоставляет данные о местоположении устройства в заданный момент времени — содержит Coordinates — объект, хранящий координаты и отметку о текущем времени.
  • Coordinates , содержит много полезной информации о расположении устройства, включая широту и долготу, высоту, скорость и направление движения и т.д.

Так как же эти объекты взаимодействуют? Если вы посмотрите на наш пример maps-example.html (see it live also), вы увидите следующий код:

Note: Когда вы впервые загрузите приведённый выше пример, появится диалоговое окно, запрашивающее разрешение на передачу данных о местонахождении этому приложению (см. раздел У них есть дополнительные средства безопасности там, где это необходимо далее в этой статье). Вам нужно разрешить передачу данных, чтобы иметь возможность отметить своё местоположение на карте. Если вы всё ещё не видите карту, возможно, требуется установить разрешения вручную; это делается разными способами в зависимости от вашего браузера; например, в Firefox перейдите > Tools > Page Info > Permissions, затем измените настройки Share Location; в Chrome перейдите Settings > Privacy > Show advanced settings > Content settings и измените настройки Location.

Во-первых, мы хотим использовать метод Geolocation.getCurrentPosition() , чтобы получить текущее положение нашего устройства. Доступ к объекту браузера Geolocation производится с помощью свойства Navigator.geolocation , так что мы начнём с

Это эквивалентно следующему коду

Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.

Метод Geolocation.getCurrentPosition() имеет один обязательный параметр — анонимную функцию, которая запустится, когда текущее положение устройства будет успешно считано. Сама эта функция принимает параметр, являющийся объектом Position , представляющим данные о текущем местоположении.

Note: Функция, которая передаётся другой функции в качестве параметра, называется функцией обратного вызова (callback function).

Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (asynchronous operations). Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:

Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием callback function, или более современной системы Обещаний(Promises), которая появилась в ECMAScript 6 и широко используются в новых API.

Мы совмещаем API Геолокации со сторонним API — Google Maps API, который используем для того, чтобы отметить расположение, возвращаемое getCurrentPosition() , на Google Map. Чтобы Google Maps API стал доступен на нашей странице, мы включаем его в HTML документ:

Чтобы использовать этот API, во-первых создадим объект LatLng с помощью конструктора google.maps.LatLng() , принимающим данные геолокации Coordinates.latitude и Coordinates.longitude :

Этот объект сам является значением свойства center объекта настроек (options), который мы назвали myOptions . Затем мы создаём экземпляр объекта, представляющего нашу карту, вызывая конструктор google.maps.Map() и передавая ему два параметра — ссылку на элемент ) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.»>

Когда это сделано, наша карта отрисовывается.

Последний блок кода демонстрирует два распространённых подхода, которые вы увидите во многих API:

  • Во-первых, объекты API обычно содержат конструкторы, которые вызываются для создания экземпляров объектов, используемых при написании программы.
  • Во-вторых, объекты API зачастую имеют несколько вариантов (options), которые можно настроить и получить именно ту среду для разработки, которую вы хотите. API конструкторы обычно принимают объекты вариантов (options) в качестве параметров, с помощью которых и происходит настройка.

Note: Не отчаивайтесь, если вы что-то не поняли из этого примера сразу. Мы рассмотрим использование сторонних API более подробно в следующих статьях.

У них узнаваемые точки входа

При использовании API убедитесь, что вы знаете где точка входа для API. В API Геолокации это довольно просто — это свойство Navigator.geolocation , возвращающее объект браузера Geolocation , внутри которого доступны все полезные методы геолокации.

Найти точку входа Document Object Model (DOM) API ещё проще — при применении этого API используется объект и

), а также обеспечивает функциональность, которая является глобальной для документа, например, для получения URL-адреса страницы или создания новых элементов в документе).»> Document , или экземпляр элемента HTML, с которым вы хотите каким-либо образом взаимодействовать, к примеру:


Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром .»> CanvasRenderingContext2D ), например:

Note: Вы можете увидеть этот код в действии в нашем bouncing balls demo (see it running live also).

Они используют события для управления состоянием

Мы уже обсуждали события ранее в этом курсе, в нашей статье Introduction to events — в этой статье детально описываются события на стороне клиента и их применение. Если вы ещё не знакомы с тем, как работают события клиентской части, рекомендуем прочитать эту статью прежде, чем продолжить.

В некоторых API содержится ряд различных событий, в некоторых — событий нет. Свойства обработчика, позволяющие запускать функции при совершении какого-либо события по большей части перечислены в нашем материале отдельного раздела «Обработчики событий (Event handlers)». Как простой пример, экземпляры объекта XMLHttpRequest (каждый представляет собой HTTP-запрос к серверу на получение каких-либо ресурсов (resource)) имеют несколько доступных событий, например, событие load происходит, когда ответ с запрашиваемым ресурсом был успешно возвращён и доступен в данный момент.

Следующий код содержит простой пример использования событий:

Note: Вы можете увидеть этот код в действии в примере ajax.html (see it live also).

В первых пяти строках мы задаём расположение ресурса, который хотим получить, создаём экземпляр объекта запроса с помощью конструктора XMLHttpRequest() , открываем HTTP-запрос GET , чтобы получить запрашиваемый ресурс, определяем, что мы хотим получить этот ресурс в формате json, после чего отсылаем запрос.

Затем функция-обработчик onload определяет наши действия по обработке ответа сервера. Нам известно, что ответ успешно возвращён и доступен после наступления события load (и если не произойдёт ошибка), так что мы сохраняем ответ, содержащий возвращённый сервером объект JSON в переменной superHeroes , которую затем передаём двум различным функциям для дальнейшей обработки.

У них есть дополнительные средства безопасности там, где это необходимо

Функционал WebAPI подвержен тем же соображениям безопасности , что и JavaScript или другие веб-технологии (например, same-origin policy), но иногда они содержат дополнительные механизмы защиты. К примеру, некоторые из наиболее современных WebAPI работают только со страницами, обслуживаемыми через HTTPS в связи с передачей конфиденциальных данных (примеры: Service Workers и Push).

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

Notifications API запрашивает разрешение подобным образом:

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

Итоги

На данном этапе, у вас должно сформироваться представление о том, что такое API, как они работают и как вы можете применить их в своём JavaScript коде. Вам наверняка не терпится начать делать по-настоящему интересные вещи с конкретными API, так вперёд! В следующий раз мы рассмотрим работу с документом с помощью Document Object Model (DOM).

В этом модуле

Metadata

  • Последнее изменение: Jun 23, 2020 , by MDN contributors
  1. Новички начинают здесь!
  2. Начало работы с Вебом
    1. Начало работы с Вебом
    2. Установка базового программного обеспечения
    3. Каким должен быть ваш веб-сайт?
    4. Работа с файлами
    5. Основы HTML
    6. Основы CSS
    7. Основы JavaScript
    8. Публикация вашего веб-сайта
    9. Как работает Веб
  3. HTML — структура Веба
  4. Вступление в HTML
    1. Вступление в HTML
    2. Начало работы с HTML
    3. Что в «шапке»? Метаданные в HTML
    4. Тексты в HTML
    5. Создание гиперссылок
    6. Продвинутое форматирование текста
    7. Структура документа и веб-сайта
    8. Отладка HTML
    9. Задание: Выделение символа
    10. Задание: Структура страницы
  5. Мультимедиа и встраивание
    1. Мультимедиа и встраивание
    2. Изображения в HTML
    3. Видео и аудио контент
    4. От object до iframe — другие технологии встраивания
    5. Добавление векторный графики в Веб
    6. Отзывчивые изображения
    7. Задание: Страница о Mozilla
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML Table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. HTML forms
    1. HTML forms overview
    2. Your first HTML form
    3. How to structure an HTML form
    4. The native form widgets
    5. Sending form data
    6. Form validation
    7. How to build custom form widgets
    8. Sending forms through JavaScript
    9. HTML forms in legacy browsers
    10. Styling HTML forms
    11. Advanced styling for HTML forms
    12. Property compatibility table for form widgets
  8. CSS — стилизирование Веба
  9. Вступление в CSS
    1. Вступление в CSS
    2. Как работает CSS
    3. Синтаксис CSS
    4. Введение в селекторы
    5. Простые селекторы
    6. Селекторы по атрибутам
    7. Псевдоклассы и псевдоэлементы
    8. Комбинаторы и множественные селекторы
    9. CSS значения и единицы
    10. Каскадность и наследование
    11. Блочная модель
    12. Отладка CSS
    13. Задание: Основы понимания CSS
  10. Стилизирование текста
    1. Стилизирование текста
    2. Основы стилизирования текста и шрифта
    3. Стилизирование списков
    4. Стилизирование ссылок
    5. Веб-шрифты
    6. Задание: Стилизирование школьного сайта
  11. Стилизирование блоков
    1. Стилизирование блоков
    2. Кратко о блочной модели
    3. Фоны
    4. Рамки
    5. Стилизирование таблиц
    6. Продвинутые эффекты
    7. Задание: Создание разукращенного листа
    8. Задание: Классно выглядищий блок
  12. CSS макет
    1. CSS макет
    2. Вступление
    3. Normal Flow
    4. Flexbox
    5. Сетки
    6. Float
    7. Позиционирование
    8. Multiple-column Layout
    9. Legacy Layout Methods
    10. Supporting Older Browsers
    11. Fundamental Layout Comprehension
  13. JavaScript — динамический клиентский скриптинг
  14. Первые шаги в JavaScript
    1. Первые шаги в JavaScript
    2. Что такое JavaScript?
    3. Первое погружение в JavaScript
    4. Что-то пошло не так? Устранение ошибок JavaScript
    5. Хранение нужной информации — Переменные
    6. Основы JavaScript — Числа и операторы
    7. Работа с текстом — Строки в JavaScript
    8. Полезные методы для строк
    9. Массивы
    10. Задание: Генератор глупых историй
  15. Блоки в JavaScript
    1. Блоки в JavaScript
    2. Делаем решения в вашем годе — Условия
    3. Повторение кода
    4. Функции — Переиспользуемые блоки кода
    5. Создаём свою функцию
    6. Возвращаемые значения функций
    7. Введение в события
    8. Задание: Галерея изображений
  16. Введение в объекты JavaScript
    1. Введение в объекты JavaScript
    2. Основы объектов
    3. Объектно-ориентированный JavaScript для новичков
    4. Прототипы объектов
    5. Наследование в JavaScript
    6. Работа с JSON данными
    7. Практика по созданию объектов
    8. Задание: Добавление возможностей в пример с прыгающими шарами
  17. Asynchronous JavaScript
    1. Asynchronous JavaScript overview
    2. General asynchronous programming concepts
    3. Introducing asynchronous JavaScript
    4. Cooperative asynchronous Java​Script: Timeouts and intervals
    5. Graceful asynchronous programming with Promises
    6. Making asynchronous programming easier with async and await
    7. Choosing the right approach
  18. Client-side web APIs
    1. Client-side web APIs
    2. Introduction to web APIs
    3. Manipulating documents
    4. Fetching data from the server
    5. Third party APIs
    6. Drawing graphics
    7. Video and audio APIs
    8. Client-side storage
  19. Accessibility — Make the web usable by everyone
  20. Accessibility guides
    1. Accessibility overview
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
  21. Accessibility assessment
    1. Assessment: Accessibility troubleshooting
  22. Инструменты и тестирование
  23. Кроссбраузерное тестирование
    1. Кроссбраузерное тестирование
    2. Вступление в кроссбраузерное тестирование
    3. Стратегии выполнения тестирования
    4. Решение частых проблем с HTML и CSS
    5. Решение частых проблем с JavaScript
    6. Решение частых проблем доступности
    7. Проверка поддержки возможностей
    8. Вступление в автоматическое тестирование
    9. Установка вашей автоматической среды тестирования
  24. Программирование серверной части сайта
  25. Первые шаги
    1. Первые шаги
    2. Вступление в серверное программирование
    3. Клиент-сервер
    4. Веб-фреймворки для серверной части
    5. Защищённость веб-сайтов
  26. Веб-фреймворк Django (Python)
    1. Веб-фреймворк Django (Python)
    2. Вступление
    3. Установка среды разработки
    4. Руководство: Сайт местной библиотеки
    5. Руководство часть 2: Создаём набросок сайта
    6. Руководство часть 3: Использование моделей
    7. Руководство часть 4: Django панель администратора
    8. Руководство часть 5: Создание нашей домашней страницы
    9. Руководство часть 6: Списки и представления
    10. Руководство часть 7: Сессии
    11. Руководство часть 8: Аутенфикация и разрешения пользователей
    12. Руководство часть 9: Работа с формами
    13. Руководство часть 10: Тестирование веб-приложения на Django
    14. Руководство часть 11: Разворачивание Django на продакшн сервере
    15. Защищённость веб-приложения
    16. Задание: создание мини блога
  27. Express Web Framework (node.js/JavaScript)
    1. Express Web Framework (Node.js/JavaScript) overview
    2. Express/Node introduction
    3. Setting up a Node (Express) development environment
    4. Express tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
  28. Дальнейшее чтение
  29. Общие вопросы
    1. Вопросы по HTML
    2. Вопросы по CSS
    3. JavaScript questions
    4. Как работает Веб
    5. Инструменты и установка
    6. Дизайн и доступность
  30. Как помочь?

Mozilla

© 2005- 2020 Mozilla and individual contributors.

Content is available under these licenses.


\u0427\u0442\u043E\u0431\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u044D\u0442\u043E\u0442 API, \u0432\u043E-\u043F\u0435\u0440\u0432\u044B\u0445 \u0441\u043E\u0437\u0434\u0430\u0434\u0438\u043C \u043E\u0431\u044A\u0435\u043A\u0442 LatLng \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u0430 google.maps.LatLng() , \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u044E\u0449\u0438\u043C \u0434\u0430\u043D\u043D\u044B\u0435 \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 Coordinates.latitude \u0438 Coordinates.longitude :

\u042D\u0442\u043E\u0442 \u043E\u0431\u044A\u0435\u043A\u0442 \u0441\u0430\u043C \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435\u043C \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 center \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u043D\u0430\u0441\u0442\u0440\u043E\u0435\u043A (options), \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043C\u044B \u043D\u0430\u0437\u0432\u0430\u043B\u0438 myOptions . \u0417\u0430\u0442\u0435\u043C \u043C\u044B \u0441\u043E\u0437\u0434\u0430\u0451\u043C \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u043E\u0431\u044A\u0435\u043A\u0442\u0430, \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0449\u0435\u0433\u043E \u043D\u0430\u0448\u0443 \u043A\u0430\u0440\u0442\u0443, \u0432\u044B\u0437\u044B\u0432\u0430\u044F \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440 google.maps.Map() \u0438 \u043F\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044F \u0435\u043C\u0443 \u0434\u0432\u0430 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0443 \u043D\u0430 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 ) \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0443\u043D\u0438\u0432\u0435\u0440\u0441\u0430\u043B\u044C\u043D\u044B\u043C \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u043E\u043C \u0434\u043B\u044F \u043F\u043E\u0442\u043E\u043A\u043E\u0432\u043E\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u043D\u0442\u0430. \u041E\u043D \u043D\u0435 \u0432\u043B\u0438\u044F\u0435\u0442 \u043D\u0430 \u043A\u043E\u043D\u0442\u0435\u043D\u0442 \u0438\u043B\u0438 \u043C\u0430\u043A\u0435\u0442 \u0434\u043E \u0442\u0435\u0445 \u043F\u043E\u0440, \u043F\u043E\u043A\u0430 \u043D\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0442\u0438\u043B\u0438\u0437\u043E\u0432\u0430\u043D \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E CSS.\\\»>

\u041A\u043E\u0433\u0434\u0430 \u044D\u0442\u043E \u0441\u0434\u0435\u043B\u0430\u043D\u043E, \u043D\u0430\u0448\u0430 \u043A\u0430\u0440\u0442\u0430 \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u044B\u0432\u0430\u0435\u0442\u0441\u044F.

\u041F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0431\u043B\u043E\u043A \u043A\u043E\u0434\u0430 \u0434\u0435\u043C\u043E\u043D\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0434\u0432\u0430 \u0440\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0445 \u043F\u043E\u0434\u0445\u043E\u0434\u0430, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0432\u044B \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u043E \u043C\u043D\u043E\u0433\u0438\u0445 API:

\\n\\n

    \\n
  • \u0412\u043E-\u043F\u0435\u0440\u0432\u044B\u0445, \u043E\u0431\u044A\u0435\u043A\u0442\u044B API \u043E\u0431\u044B\u0447\u043D\u043E \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442 \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u044B, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0432\u044B\u0437\u044B\u0432\u0430\u044E\u0442\u0441\u044F \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u043E\u0432 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0445 \u043F\u0440\u0438 \u043D\u0430\u043F\u0438\u0441\u0430\u043D\u0438\u0438 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u044B. \\n
  • \u0412\u043E-\u0432\u0442\u043E\u0440\u044B\u0445, \u043E\u0431\u044A\u0435\u043A\u0442\u044B API \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044E \u0438\u043C\u0435\u044E\u0442 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432 (options), \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043C\u043E\u0436\u043D\u043E \u043D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0438 \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0438\u043C\u0435\u043D\u043D\u043E \u0442\u0443 \u0441\u0440\u0435\u0434\u0443 \u0434\u043B\u044F \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0438, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435. API \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u044B \u043E\u0431\u044B\u0447\u043D\u043E \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u044E\u0442 \u043E\u0431\u044A\u0435\u043A\u0442\u044B \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432 (options) \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u043E\u0432, \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u043A\u043E\u0442\u043E\u0440\u044B\u0445 \u0438 \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430. \\n

\\n\\n

Note: \u041D\u0435 \u043E\u0442\u0447\u0430\u0438\u0432\u0430\u0439\u0442\u0435\u0441\u044C, \u0435\u0441\u043B\u0438 \u0432\u044B \u0447\u0442\u043E-\u0442\u043E \u043D\u0435 \u043F\u043E\u043D\u044F\u043B\u0438 \u0438\u0437 \u044D\u0442\u043E\u0433\u043E \u043F\u0440\u0438\u043C\u0435\u0440\u0430 \u0441\u0440\u0430\u0437\u0443. \u041C\u044B \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0438\u043C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435 \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0445 API \u0431\u043E\u043B\u0435\u0435 \u043F\u043E\u0434\u0440\u043E\u0431\u043D\u043E \u0432 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044C\u044F\u0445.

\u0423 \u043D\u0438\u0445 \u0443\u0437\u043D\u0430\u0432\u0430\u0435\u043C\u044B\u0435 \u0442\u043E\u0447\u043A\u0438 \u0432\u0445\u043E\u0434\u0430

\u041F\u0440\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 API \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044C, \u0447\u0442\u043E \u0432\u044B \u0437\u043D\u0430\u0435\u0442\u0435 \u0433\u0434\u0435 \u0442\u043E\u0447\u043A\u0430 \u0432\u0445\u043E\u0434\u0430 \u0434\u043B\u044F API. \u0412 API \u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 \u044D\u0442\u043E \u0434\u043E\u0432\u043E\u043B\u044C\u043D\u043E \u043F\u0440\u043E\u0441\u0442\u043E \u2014 \u044D\u0442\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E Navigator.geolocation , \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u044E\u0449\u0435\u0435 \u043E\u0431\u044A\u0435\u043A\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 Geolocation , \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B \u0432\u0441\u0435 \u043F\u043E\u043B\u0435\u0437\u043D\u044B\u0435 \u043C\u0435\u0442\u043E\u0434\u044B \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438.

\u041D\u0430\u0439\u0442\u0438 \u0442\u043E\u0447\u043A\u0443 \u0432\u0445\u043E\u0434\u0430 Document Object Model (DOM) API \u0435\u0449\u0451 \u043F\u0440\u043E\u0449\u0435 \u2014 \u043F\u0440\u0438 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u0438\u0438 \u044D\u0442\u043E\u0433\u043E API \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u043E\u0431\u044A\u0435\u043A\u0442 \u0438

), \u0430 \u0442\u0430\u043A\u0436\u0435 \u043E\u0431\u0435\u0441\u043F\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u044C\u043D\u043E\u0441\u0442\u044C, \u043A\u043E\u0442\u043E\u0440\u0430\u044F \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0433\u043B\u043E\u0431\u0430\u043B\u044C\u043D\u043E\u0439 \u0434\u043B\u044F \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430,\u00A0\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0434\u043B\u044F \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F URL-\u0430\u0434\u0440\u0435\u0441\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B \u0438\u043B\u0438 \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u043D\u043E\u0432\u044B\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432 \u0432 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0435).\\\»> Document , \u0438\u043B\u0438 \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 HTML, \u0441 \u043A\u043E\u0442\u043E\u0440\u044B\u043C \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u043A\u0430\u043A\u0438\u043C-\u043B\u0438\u0431\u043E \u043E\u0431\u0440\u0430\u0437\u043E\u043C \u0432\u0437\u0430\u0438\u043C\u043E\u0434\u0435\u0439\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C, \u043A \u043F\u0440\u0438\u043C\u0435\u0440\u0443:

\u0412\u0441\u0451, \u0447\u0442\u043E \u043C\u044B \u0445\u043E\u0442\u0438\u043C \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0441 canvas \u043F\u043E\u0441\u043B\u0435 \u044D\u0442\u043E\u0433\u043E, \u0434\u043E\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044F \u0432\u044B\u0437\u043E\u0432\u043E\u043C \u0441\u0432\u043E\u0439\u0441\u0442\u0432 \u0438 \u043C\u0435\u0442\u043E\u0434\u043E\u0432 \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E (content) (\u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u043E\u043C .\\\»> CanvasRenderingContext2D ), \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440:

Note: \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044C \u044D\u0442\u043E\u0442 \u043A\u043E\u0434 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0432 \u043D\u0430\u0448\u0435\u043C bouncing balls demo (see it running live also).

\u041E\u043D\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0442 \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u0434\u043B\u044F \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435\u043C

\u041C\u044B \u0443\u0436\u0435 \u043E\u0431\u0441\u0443\u0436\u0434\u0430\u043B\u0438 \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u0440\u0430\u043D\u0435\u0435 \u0432 \u044D\u0442\u043E\u043C \u043A\u0443\u0440\u0441\u0435, \u0432 \u043D\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044C\u0435 Introduction to events \u2014 \u0432 \u044D\u0442\u043E\u0439 \u0441\u0442\u0430\u0442\u044C\u0435 \u0434\u0435\u0442\u0430\u043B\u044C\u043D\u043E \u043E\u043F\u0438\u0441\u044B\u0432\u0430\u044E\u0442\u0441\u044F \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u043A\u043B\u0438\u0435\u043D\u0442\u0430 \u0438 \u0438\u0445 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u0438\u0435. \u0415\u0441\u043B\u0438 \u0432\u044B \u0435\u0449\u0451 \u043D\u0435 \u0437\u043D\u0430\u043A\u043E\u043C\u044B \u0441 \u0442\u0435\u043C, \u043A\u0430\u043A \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u043A\u043B\u0438\u0435\u043D\u0442\u0441\u043A\u043E\u0439 \u0447\u0430\u0441\u0442\u0438, \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0443\u0435\u043C \u043F\u0440\u043E\u0447\u0438\u0442\u0430\u0442\u044C \u044D\u0442\u0443 \u0441\u0442\u0430\u0442\u044C\u044E \u043F\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043C \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C.

\u0412 \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0445 API \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044F \u0440\u044F\u0434 \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u0445 \u0441\u043E\u0431\u044B\u0442\u0438\u0439, \u0432 \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0445 — \u0441\u043E\u0431\u044B\u0442\u0438\u0439 \u043D\u0435\u0442. \u0421\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430, \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0438\u0435 \u0437\u0430\u043F\u0443\u0441\u043A\u0430\u0442\u044C \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u043F\u0440\u0438 \u0441\u043E\u0432\u0435\u0440\u0448\u0435\u043D\u0438\u0438 \u043A\u0430\u043A\u043E\u0433\u043E-\u043B\u0438\u0431\u043E \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u043F\u043E \u0431\u043E\u043B\u044C\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043F\u0435\u0440\u0435\u0447\u0438\u0441\u043B\u0435\u043D\u044B \u0432 \u043D\u0430\u0448\u0435\u043C \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u0435 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \\\»\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0438 \u0441\u043E\u0431\u044B\u0442\u0438\u0439 (Event handlers)\\\». \u041A\u0430\u043A \u043F\u0440\u043E\u0441\u0442\u043E\u0439 \u043F\u0440\u0438\u043C\u0435\u0440, \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u044B \u043E\u0431\u044A\u0435\u043A\u0442\u0430 XMLHttpRequest (\u043A\u0430\u0436\u0434\u044B\u0439 \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0441\u043E\u0431\u043E\u0439 HTTP-\u0437\u0430\u043F\u0440\u043E\u0441 \u043A \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043D\u0430 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u043A\u0430\u043A\u0438\u0445-\u043B\u0438\u0431\u043E \u0440\u0435\u0441\u0443\u0440\u0441\u043E\u0432 (resource)) \u0438\u043C\u0435\u044E\u0442 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u0441\u043E\u0431\u044B\u0442\u0438\u0439, \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0441\u043E\u0431\u044B\u0442\u0438\u0435 load \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442, \u043A\u043E\u0433\u0434\u0430 \u043E\u0442\u0432\u0435\u0442 \u0441 \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043C\u044B\u043C \u0440\u0435\u0441\u0443\u0440\u0441\u043E\u043C \u0431\u044B\u043B \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0451\u043D \u0438 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0432 \u0434\u0430\u043D\u043D\u044B\u0439 \u043C\u043E\u043C\u0435\u043D\u0442.

\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043A\u043E\u0434 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u043F\u0440\u043E\u0441\u0442\u043E\u0439 \u043F\u0440\u0438\u043C\u0435\u0440 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0441\u043E\u0431\u044B\u0442\u0438\u0439:

Note: \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044C \u044D\u0442\u043E\u0442 \u043A\u043E\u0434 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0432 \u043F\u0440\u0438\u043C\u0435\u0440\u0435 ajax.html (see it live also).

\u0412 \u043F\u0435\u0440\u0432\u044B\u0445 \u043F\u044F\u0442\u0438 \u0441\u0442\u0440\u043E\u043A\u0430\u0445 \u043C\u044B \u0437\u0430\u0434\u0430\u0451\u043C \u0440\u0430\u0441\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0445\u043E\u0442\u0438\u043C \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C, \u0441\u043E\u0437\u0434\u0430\u0451\u043C \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u0430 \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u0430 XMLHttpRequest() , \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u043C HTTP-\u0437\u0430\u043F\u0440\u043E\u0441 GET , \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0440\u0435\u0441\u0443\u0440\u0441, \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u044F\u0435\u043C, \u0447\u0442\u043E \u043C\u044B \u0445\u043E\u0442\u0438\u043C \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u044D\u0442\u043E\u0442 \u0440\u0435\u0441\u0443\u0440\u0441 \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 json, \u043F\u043E\u0441\u043B\u0435 \u0447\u0435\u0433\u043E \u043E\u0442\u0441\u044B\u043B\u0430\u0435\u043C \u0437\u0430\u043F\u0440\u043E\u0441.

\u0417\u0430\u0442\u0435\u043C \u0444\u0443\u043D\u043A\u0446\u0438\u044F-\u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A onload \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u044F\u0435\u0442 \u043D\u0430\u0448\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043F\u043E \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043E\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041D\u0430\u043C \u0438\u0437\u0432\u0435\u0441\u0442\u043D\u043E, \u0447\u0442\u043E \u043E\u0442\u0432\u0435\u0442 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0451\u043D \u0438 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u043F\u043E\u0441\u043B\u0435 \u043D\u0430\u0441\u0442\u0443\u043F\u043B\u0435\u043D\u0438\u044F \u0441\u043E\u0431\u044B\u0442\u0438\u044F load (\u0438 \u0435\u0441\u043B\u0438 \u043D\u0435 \u043F\u0440\u043E\u0438\u0437\u043E\u0439\u0434\u0451\u0442 \u043E\u0448\u0438\u0431\u043A\u0430), \u0442\u0430\u043A \u0447\u0442\u043E \u043C\u044B \u0441\u043E\u0445\u0440\u0430\u043D\u044F\u0435\u043C \u043E\u0442\u0432\u0435\u0442, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0451\u043D\u043D\u044B\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043E\u043C \u043E\u0431\u044A\u0435\u043A\u0442 JSON \u0432 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 superHeroes , \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0437\u0430\u0442\u0435\u043C \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u043C \u0434\u0432\u0443\u043C \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u043C \u0444\u0443\u043D\u043A\u0446\u0438\u044F\u043C \u0434\u043B\u044F \u0434\u0430\u043B\u044C\u043D\u0435\u0439\u0448\u0435\u0439 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0438.

\u0423 \u043D\u0438\u0445 \u0435\u0441\u0442\u044C \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0431\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u0438 \u0442\u0430\u043C, \u0433\u0434\u0435 \u044D\u0442\u043E \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E

\u0424\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B WebAPI \u043F\u043E\u0434\u0432\u0435\u0440\u0436\u0435\u043D \u0442\u0435\u043C \u0436\u0435 \u0441\u043E\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\u043C \u0431\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u0438 , \u0447\u0442\u043E \u0438 JavaScript \u0438\u043B\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043D\u043E\u043B\u043E\u0433\u0438\u0438 (\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, same-origin policy), \u043D\u043E \u0438\u043D\u043E\u0433\u0434\u0430 \u043E\u043D\u0438 \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u0445\u0430\u043D\u0438\u0437\u043C\u044B \u0437\u0430\u0449\u0438\u0442\u044B. \u041A \u043F\u0440\u0438\u043C\u0435\u0440\u0443, \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0438\u0437 \u043D\u0430\u0438\u0431\u043E\u043B\u0435\u0435 \u0441\u043E\u0432\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 WebAPI \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u0441\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C\u0438, \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u043C\u0438 \u0447\u0435\u0440\u0435\u0437 HTTPS \u0432 \u0441\u0432\u044F\u0437\u0438 \u0441 \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u043A\u043E\u043D\u0444\u0438\u0434\u0435\u043D\u0446\u0438\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 (\u043F\u0440\u0438\u043C\u0435\u0440\u044B: Service Workers \u0438 Push).

\u041A \u0442\u043E\u043C\u0443 \u0436\u0435, \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 WebAPI \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u044E\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043E\u0442 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F, \u043A\u0430\u043A \u0442\u043E\u043B\u044C\u043A\u043E \u043A \u043D\u0438\u043C \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442 \u0432\u044B\u0437\u043E\u0432 \u0432 \u043A\u043E\u0434\u0435. \u0412 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u0430, \u0432\u044B, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043B\u0438 \u0442\u0430\u043A\u043E\u0435 \u0434\u0438\u0430\u043B\u043E\u0433\u043E\u0432\u043E\u0435 \u043E\u043A\u043D\u043E \u043F\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0435 \u043D\u0430\u0448\u0435\u0433\u043E \u043F\u0440\u0438\u043C\u0435\u0440\u0430 Geolocation \u0440\u0430\u043D\u0435\u0435:

Notifications API \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043F\u043E\u0434\u043E\u0431\u043D\u044B\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C:

\u0417\u0430\u043F\u0440\u043E\u0441\u044B \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u0439 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u044B \u0434\u043B\u044F \u043E\u0431\u0435\u0441\u043F\u0435\u0447\u0435\u043D\u0438\u044F \u0431\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u0438 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439 \u2014 \u043D\u0435 \u0431\u0443\u0434\u044C \u0438\u0445, \u0441\u0430\u0439\u0442\u044B \u043C\u043E\u0433\u043B\u0438 \u0431\u044B \u0441\u043A\u0440\u044B\u0442\u043D\u043E \u043E\u0442\u0441\u043B\u0435\u0434\u0438\u0442\u044C \u0432\u0430\u0448\u0435 \u043C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435, \u043D\u0435 \u0441\u043E\u0437\u0434\u0430\u0432\u0430\u044F \u043C\u043D\u043E\u0436\u0435\u0441\u0442\u0432\u043E \u043D\u0430\u0434\u043E\u0435\u0434\u043B\u0438\u0432\u044B\u0445 \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u0439.

\u0418\u0442\u043E\u0433\u0438

\u041D\u0430 \u0434\u0430\u043D\u043D\u043E\u043C \u044D\u0442\u0430\u043F\u0435, \u0443 \u0432\u0430\u0441 \u0434\u043E\u043B\u0436\u043D\u043E \u0441\u0444\u043E\u0440\u043C\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043E \u0442\u043E\u043C, \u0447\u0442\u043E \u0442\u0430\u043A\u043E\u0435 API, \u043A\u0430\u043A \u043E\u043D\u0438 \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0438 \u043A\u0430\u043A \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C \u0438\u0445 \u0432 \u0441\u0432\u043E\u0451\u043C JavaScript \u043A\u043E\u0434\u0435. \u0412\u0430\u043C \u043D\u0430\u0432\u0435\u0440\u043D\u044F\u043A\u0430 \u043D\u0435 \u0442\u0435\u0440\u043F\u0438\u0442\u0441\u044F \u043D\u0430\u0447\u0430\u0442\u044C \u0434\u0435\u043B\u0430\u0442\u044C \u043F\u043E-\u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0435\u043C\u0443 \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u043D\u044B\u0435 \u0432\u0435\u0449\u0438 \u0441 \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u044B\u043C\u0438 API, \u0442\u0430\u043A \u0432\u043F\u0435\u0440\u0451\u0434! \u0412 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0440\u0430\u0437 \u043C\u044B \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0438\u043C \u0440\u0430\u0431\u043E\u0442\u0443 \u0441 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u043C \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E Document Object Model (DOM).

\u0412 \u044D\u0442\u043E\u043C \u043C\u043E\u0434\u0443\u043B\u0435

\u041D\u0430\u0447\u043D\u0451\u043C \u0441 \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0435\u043D\u0438\u044F \u0442\u043E\u0433\u043E \u0447\u0442\u043E \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0442 \u0441\u043E\u0431\u043E\u0439 API \u043D\u0430 \u0432\u044B\u0441\u043E\u043A\u043E\u043C \u0443\u0440\u043E\u0432\u043D\u0435 \u0438 \u0432\u044B\u044F\u0441\u043D\u0438\u043C, \u043A\u0430\u043A \u043E\u043D\u0438 \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442, \u043A\u0430\u043A \u0438\u0445 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0432 \u0441\u0432\u043E\u0438\u0445 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0430\u0445 \u0438 \u043A\u0430\u043A \u043E\u043D\u0438 \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u044B. \u0422\u0430\u043A\u0436\u0435 \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0438\u043C \u043E\u0441\u043D\u043E\u0432\u043D\u044B\u0435 \u0432\u0438\u0434\u044B API \u0438 \u0438\u0445 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u0438\u0435.

\\n\\n

\\n \\n \\n

\\n

\\n

\\n

\\n

\\n

\\n

\\n

\\n

\u041D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u044B\u0435 \u0437\u043D\u0430\u043D\u0438\u044F: \u0411\u0430\u0437\u043E\u0432\u0430\u044F \u043A\u043E\u043C\u043F\u044C\u044E\u0442\u0435\u0440\u043D\u0430\u044F \u0433\u0440\u0430\u043C\u043E\u0442\u043D\u043E\u0441\u0442\u044C, \u043F\u043E\u043D\u0438\u043C\u0430\u043D\u0438\u0435 \u043E\u0441\u043D\u043E\u0432 HTML \u0438 CSS,\u00A0 \u043E\u0441\u043D\u043E\u0432\u044B JavaScript (\u0441\u043C. \u043F\u0435\u0440\u0432\u044B\u0435 \u0448\u0430\u0433\u0438, building blocks, \u043E\u0431\u044A\u0435\u043A\u0442\u044B JavaScript).
\u0426\u0435\u043B\u044C: \u041F\u043E\u0437\u043D\u0430\u043A\u043E\u043C\u0438\u0442\u044C\u0441\u044F \u0441 API, \u0432\u044B\u044F\u0441\u043D\u0438\u0442\u044C \u0447\u0442\u043E \u043E\u043D\u0438 \u043C\u043E\u0433\u0443\u0442 \u0434\u0435\u043B\u0430\u0442\u044C \u0438 \u043A\u0430\u043A \u0438\u0445 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C.

\\n\\n

\u0427\u0442\u043E \u0442\u0430\u043A\u043E\u0435 API?

\u0418\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043F\u0440\u0438\u043A\u043B\u0430\u0434\u043D\u043E\u0433\u043E \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F (Application Programming Interfaces, APIs) — \u044D\u0442\u043E \u0433\u043E\u0442\u043E\u0432\u044B\u0435 \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u0438 \u044F\u0437\u044B\u043A\u0430 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F, \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0443 \u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0441\u043B\u043E\u0436\u043D\u044B\u0439 \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B \u0441 \u043C\u0435\u043D\u044C\u0448\u0438\u043C\u0438 \u0443\u0441\u0438\u043B\u0438\u044F\u043C\u0438. \u041E\u043D\u0438 \\\»\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0442\\\» \u0431\u043E\u043B\u0435\u0435 \u0441\u043B\u043E\u0436\u043D\u044B\u0439 \u043A\u043E\u0434 \u043E\u0442 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0438\u0441\u0442\u0430, \u043E\u0431\u0435\u0441\u043F\u0435\u0447\u0438\u0432\u0430\u044F \u043F\u0440\u043E\u0441\u0442\u043E\u0442\u0443 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F.

\u0414\u043B\u044F \u043B\u0443\u0447\u0448\u0435\u0433\u043E \u043F\u043E\u043D\u0438\u043C\u0430\u043D\u0438\u044F \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0438\u043C \u0430\u043D\u0430\u043B\u043E\u0433\u0438\u044E \u0441 \u0434\u043E\u043C\u0430\u0448\u043D\u0438\u043C\u0438 \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u0441\u0435\u0442\u044F\u043C\u0438. \u041A\u043E\u0433\u0434\u0430 \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043A\u0430\u043A\u043E\u0439-\u0442\u043E \u044D\u043B\u0435\u043A\u0442\u0440\u043E\u043F\u0440\u0438\u0431\u043E\u0440, \u0432\u044B \u043F\u0440\u043E\u0441\u0442\u043E \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0430\u0435\u0442\u0435 \u0435\u0433\u043E \u043A \u0440\u043E\u0437\u0435\u0442\u043A\u0435, \u0438 \u0432\u0441\u0451 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442. \u0412\u044B \u043D\u0435 \u043F\u044B\u0442\u0430\u0435\u0442\u0435\u0441\u044C \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0438\u0442\u044C \u043F\u0440\u043E\u0432\u043E\u0434\u0430 \u043D\u0430\u043F\u0440\u044F\u043C\u0443\u044E \u043A \u0438\u0441\u0442\u043E\u0447\u043D\u0438\u043A\u0443 \u0442\u043E\u043A\u0430 \u2014 \u0434\u0435\u043B\u0430\u0442\u044C \u044D\u0442\u043E \u0431\u0435\u0441\u043F\u043E\u043B\u0435\u0437\u043D\u043E \u0438, \u0435\u0441\u043B\u0438 \u0432\u044B \u043D\u0435 \u044D\u043B\u0435\u043A\u0442\u0440\u0438\u043A, \u0441\u043B\u043E\u0436\u043D\u043E \u0438 \u043E\u043F\u0430\u0441\u043D\u043E.

\u0422\u043E\u0447\u043D\u043E \u0442\u0430\u043A\u0436\u0435, \u0435\u0441\u043B\u0438 \u043C\u044B \u0445\u043E\u0442\u0438\u043C, \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0438\u0440\u043E\u0432\u0430\u0442\u044C 3D \u0433\u0440\u0430\u0444\u0438\u043A\u0443, \u0433\u043E\u0440\u0430\u0437\u0434\u043E \u043B\u0435\u0433\u0447\u0435 \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u044D\u0442\u043E \u0441 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435\u043C API, \u043D\u0430\u043F\u0438\u0441\u0430\u043D\u043D\u044B\u0445 \u043D\u0430 \u044F\u0437\u044B\u043A\u0430\u0445 \u0432\u044B\u0441\u043E\u043A\u043E\u0433\u043E \u0443\u0440\u043E\u0432\u043D\u044F, \u0442\u0430\u043A\u0438\u0445 \u043A\u0430\u043A JavaScript \u0438\u043B\u0438 Python.

API \u043A\u043B\u0438\u0435\u043D\u0442\u0441\u043A\u043E\u0439 \u0447\u0430\u0441\u0442\u0438 JavaScript

\u0414\u043B\u044F JavaScript \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u043A\u043B\u0438\u0435\u043D\u0442\u0430, \u0432 \u0447\u0430\u0441\u0442\u043D\u043E\u0441\u0442\u0438, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043C\u043D\u043E\u0436\u0435\u0441\u0442\u0432\u043E API. \u041E\u043D\u0438 \u043D\u0435 \u044F\u0432\u043B\u044F\u044E\u0442\u0441\u044F \u0447\u0430\u0441\u0442\u044C\u044E \u044F\u0437\u044B\u043A\u0430, \u0430 \u043F\u043E\u0441\u0442\u0440\u043E\u0435\u043D\u044B \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0445 \u0444\u0443\u043D\u043A\u0446\u0438\u0439 JavaScript \u0434\u043B\u044F \u0442\u043E\u0433\u043E, \u0447\u0442\u043E\u0431\u044B \u0443\u0432\u0435\u043B\u0438\u0447\u0438\u0442\u044C \u0432\u0430\u0448\u0438 \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u0438 \u043F\u0440\u0438 \u043D\u0430\u043F\u0438\u0441\u0430\u043D\u0438\u0438 \u043A\u043E\u0434\u0430. \u0418\u0445 \u043C\u043E\u0436\u043D\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0438\u0442\u044C \u043D\u0430 \u0434\u0432\u0435 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438:

\\n\\n

    \\n
  • API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u044B \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438 \u0441\u043F\u043E\u0441\u043E\u0431\u043D\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0438 \u043A\u043E\u043C\u043F\u044C\u044E\u0442\u0435\u0440\u043D\u043E\u0439 \u0441\u0440\u0435\u0434\u044B \u0434\u043B\u044F \u043E\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043B\u0435\u043D\u0438\u044F \u0431\u043E\u043B\u0435\u0435 \u0441\u043B\u043E\u0436\u043D\u044B\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0441 \u044D\u0442\u0438\u043C\u0438 \u0434\u0430\u043D\u043D\u044B\u043C\u0438. \u041A \u043F\u0440\u0438\u043C\u0435\u0440\u0443, API \u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 (Geolocation API) \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u043F\u0440\u043E\u0441\u0442\u044B\u0435 \u0432 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u0438 JavaScript \u0434\u043B\u044F \u0440\u0430\u0431\u043E\u0442\u044B \u0441 \u0434\u0430\u043D\u043D\u044B\u043C\u0438 \u043C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u044F, \u0442\u0430\u043A \u0447\u0442\u043E \u0432\u044B \u0441\u043C\u043E\u0436\u0435\u0442\u0435, \u0434\u043E\u043F\u0443\u0441\u0442\u0438\u043C, \u043E\u0442\u043C\u0435\u0442\u0438\u0442\u044C \u0441\u0432\u043E\u0435 \u0440\u0430\u0441\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u043D\u0430 \u043A\u0430\u0440\u0442\u0435 Google Map. \u041D\u0430 \u0441\u0430\u043C\u043E\u043C \u0434\u0435\u043B\u0435, \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432\u044B\u043F\u043E\u043B\u043D\u044F\u0435\u0442\u0441\u044F \u0441\u043B\u043E\u0436\u043D\u044B\u0439 \u043D\u0438\u0437\u043A\u043E\u0443\u0440\u043E\u0432\u043D\u0435\u0432\u044B\u0439 \u043A\u043E\u0434 (\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u043D\u0430 C++) \u0434\u043B\u044F \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u044F \u043A \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0443 GPS (\u0438\u043B\u0438 \u043B\u044E\u0431\u043E\u043C\u0443 \u0434\u0440\u0443\u0433\u043E\u043C\u0443 \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0443 \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438), \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u0434\u0430\u043D\u043D\u044B\u0445 \u0438 \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0434\u043B\u044F \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0438 \u0432\u0430\u0448\u0435\u0439 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u043E\u0439, \u043D\u043E, \u043A\u0430\u043A \u0431\u044B\u043B\u043E \u0441\u043A\u0430\u0437\u0430\u043D\u043E \u0432\u044B\u0448\u0435, \u044D\u0442\u0438 \u0434\u0435\u0442\u0430\u043B\u0438 \u0441\u043A\u0440\u044B\u0442\u044B \u0431\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u044F API. \\n
  • \u0421\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0435 API \u043D\u0435 \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u044B \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043F\u043E \u0443\u043C\u043E\u043B\u0447\u0430\u043D\u0438\u044E. \u0422\u0430\u043A\u0438\u0435 API \u0438 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044E \u043E \u043D\u0438\u0445 \u043E\u0431\u044B\u0447\u043D\u043E \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0438\u0441\u043A\u0430\u0442\u044C \u0432 \u0438\u043D\u0442\u0435\u0440\u043D\u0435\u0442\u0435. \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, Twitter API \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u0435\u0442 \u0440\u0430\u0437\u043C\u0435\u0449\u0430\u0442\u044C \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0435 \u0442\u0432\u0438\u0442\u044B (tweets) \u043D\u0430 \u0432\u0430\u0448\u0435\u043C \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0435. \u0412 \u0434\u0430\u043D\u043D\u043E\u043C API \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0451\u043D \u043D\u0430\u0431\u043E\u0440 \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u0439, \u043E\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043B\u044F\u044E\u0449\u0438\u0445 \u0437\u0430\u043F\u0440\u043E\u0441\u044B \u043A \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u043C Twitter \u0438 \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u044E\u0449\u0438\u0445 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0451\u043D\u043D\u044B\u0435 \u0434\u0430\u043D\u043D\u044B\u0435. \\n

\\n\\n\\n\\n\\n\\n

\u0412\u0437\u0430\u0438\u043C\u043E\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 JavaScript, API \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 JavaScript

\u0418\u0442\u0430\u043A, \u0432\u044B\u0448\u0435 \u043C\u044B \u043F\u043E\u0433\u043E\u0432\u043E\u0440\u0438\u043B\u0438 \u043E \u0442\u043E\u043C, \u0447\u0442\u043E \u0442\u0430\u043A\u043E\u0435 JavaScript API \u043A\u043B\u0438\u0435\u043D\u0442\u0441\u043A\u043E\u0439 \u0447\u0430\u0441\u0442\u0438 \u0438 \u043A\u0430\u043A \u043E\u043D\u0438 \u0441\u0432\u044F\u0437\u0430\u043D\u044B \u0441 \u044F\u0437\u044B\u043A\u043E\u043C JavaScript. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0442\u0435\u043F\u0435\u0440\u044C \u0442\u0435\u0437\u0438\u0441\u043D\u043E \u0437\u0430\u043F\u0438\u0448\u0435\u043C \u043E\u0441\u043D\u043E\u0432\u043D\u044B\u0435 \u043F\u043E\u043D\u044F\u0442\u0438\u044F \u0438 \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u043C \u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u043E\u0432 JavaScript:

\\n\\n

    \\n
  • JavaScript \u2014 \u042F\u0437\u044B\u043A \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F \u0441\u0446\u0435\u043D\u0430\u0440\u0438\u0435\u0432 \u0432\u044B\u0441\u043E\u043A\u043E\u0433\u043E \u0443\u0440\u043E\u0432\u043D\u044F, \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0438\u0439 \u0441\u043E\u0437\u0434\u0430\u0432\u0430\u0442\u044C \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043D\u0438\u0446/\u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0439. \u041E\u0442\u043C\u0435\u0442\u0438\u043C, \u0447\u0442\u043E JavaScript \u0442\u0430\u043A\u0436\u0435 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u043D\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u043D\u044B\u0445 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430\u0445, \u0442\u0430\u043A\u0438\u0445 \u043A\u0430\u043A Node. \u041D\u043E \u043F\u043E\u043A\u0430 \u043D\u0435 \u0431\u0443\u0434\u0435\u043C\u00A0\u043E\u0441\u0442\u0430\u043D\u0430\u0432\u043B\u0438\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u044D\u0442\u043E\u043C. \\n
  • API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 (Browser APIs) \u2014 \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u0438, \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0435 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u043F\u043E\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0435 \u043D\u0430 \u043E\u0441\u043D\u043E\u0432\u0435 \u044F\u0437\u044B\u043A\u0430 JavaScript, \u043F\u0440\u0435\u0434\u043D\u0430\u0437\u043D\u0430\u0447\u0435\u043D\u043D\u044B\u0435 \u0434\u043B\u044F \u043E\u0431\u043B\u0435\u0433\u0447\u0435\u043D\u0438\u044F \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0438 \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430. \\n
  • \u0421\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0435 API (Third party APIs) \u2014 \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u0438, \u0432\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u044B\u0435 \u0432 \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0435 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B (\u0442\u0430\u043A\u0438\u0435 \u043A\u0430\u043A Twitter, Facebook) \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0438\u0435 \u0432\u0430\u043C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0447\u0430\u0441\u0442\u044C \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430 \u044D\u0442\u0438\u0445 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C \u0432 \u0441\u0432\u043E\u0438\u0445 \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0445 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u0445/\u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F\u0445 (\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0435 \u0422\u0432\u0438\u0442\u044B \u043D\u0430 \u0432\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435). \\n
  • \u0411\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438 JavaScript \u2014 \u041E\u0431\u044B\u0447\u043D\u043E \u043E\u0434\u0438\u043D \u0438\u043B\u0438 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0444\u0430\u0439\u043B\u043E\u0432, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C\u0441\u043A\u0438\u0435 (custom) \u0444\u0443\u043D\u043A\u0446\u0438\u0438 . \u0422\u0430\u043A\u0438\u0435 \u0444\u0430\u0439\u043B\u044B \u043C\u043E\u0436\u043D\u043E \u043F\u0440\u0438\u043A\u0440\u0435\u043F\u0438\u0442\u044C \u043A \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435, \u0447\u0442\u043E\u0431\u044B \u0443\u0441\u043A\u043E\u0440\u0438\u0442\u044C \u0438\u043B\u0438 \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442\u044B \u0434\u043B\u044F \u043D\u0430\u043F\u0438\u0441\u0430\u043D\u0438\u044F \u043E\u0431\u0449\u0435\u0433\u043E \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430. \u041F\u0440\u0438\u043C\u0435\u0440\u044B: jQuery, Mootools \u0438 React. \\n
  • JavaScript \u0444\u0440\u0435\u0439\u043C\u0432\u043E\u0440\u043A\u0438 (frameworks) \u2014 \u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0448\u0430\u0433 \u0432 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0438 \u043F\u043E\u0441\u043B\u0435 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A. \u0424\u0440\u0435\u0439\u043C\u0432\u043E\u0440\u043A\u0438 JavaScript (\u0442\u0430\u043A\u0438\u0435 \u043A\u0430\u043A Angular \u0438 Ember) \u0441\u0442\u0440\u0435\u043C\u044F\u0442\u0441\u044F \u043A \u0442\u043E\u043C\u0443, \u0447\u0442\u043E\u0431\u044B \u0431\u044B\u0442\u044C \u043D\u0430\u0431\u043E\u0440\u043E\u043C HTML, CSS, JavaScript \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0442\u0435\u0445\u043D\u043E\u043B\u043E\u0433\u0438\u0439, \u043F\u043E\u0441\u043B\u0435 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043A\u0438 \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u043C\u043E\u0436\u043D\u043E \\\»\u043F\u0438\u0441\u0430\u0442\u044C\\\» \u0432\u0435\u0431-\u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0441 \u043D\u0443\u043B\u044F. \u0413\u043B\u0430\u0432\u043D\u043E\u0435 \u0440\u0430\u0437\u043B\u0438\u0447\u0438\u0435 \u043C\u0435\u0436\u0434\u0443 \u0444\u0440\u0435\u0439\u043C\u0432\u043E\u0440\u043A\u0430\u043C\u0438 \u0438 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0430\u043C\u0438 — \\\»\u041E\u0431\u0440\u0430\u0442\u043D\u043E\u0435 \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F\\\» ( \u201CInversion of Control\u201D ). \u0412\u044B\u0437\u043E\u0432 \u043C\u0435\u0442\u043E\u0434\u0430 \u0438\u0437 \u0431\u0438\u0431\u043B\u0438\u043E\u0442\u0435\u043A\u0438 \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442 \u043F\u043E \u0442\u0440\u0435\u0431\u043E\u0432\u0430\u043D\u0438\u044E \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430. \u041F\u0440\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 \u0444\u0440\u0435\u0439\u043C\u0432\u043E\u0440\u043A\u0430 — \u043D\u0430\u043E\u0431\u043E\u0440\u043E\u0442, \u0444\u0440\u0435\u0439\u043C\u0432\u043E\u0440\u043A \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442 \u0432\u044B\u0437\u043E\u0432 \u043A\u043E\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430. \\n

\\n\\n

\u041D\u0430 \u0447\u0442\u043E \u0441\u043F\u043E\u0441\u043E\u0431\u043D\u044B API?

\u0428\u0438\u0440\u043E\u043A\u043E\u0435 \u0440\u0430\u0437\u043D\u043E\u043E\u0431\u0440\u0430\u0437\u0438\u0435 API \u0432 \u0441\u043E\u0432\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u0435\u0442 \u043D\u0430\u0434\u0435\u043B\u0438\u0442\u044C \u0432\u0430\u0448\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0431\u043E\u043B\u044C\u0448\u0438\u043C\u0438 \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u044F\u043C\u0438. \u0414\u043E\u0441\u0442\u0430\u0442\u043E\u0447\u043D\u043E \u043F\u043E\u0441\u043C\u043E\u0442\u0440\u0435\u0442\u044C \u0441\u043F\u0438\u0441\u043E\u043A \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 MDN APIs index page.

\u0420\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0435 API \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430

\u0412 \u0447\u0430\u0441\u0442\u043D\u043E\u0441\u0442\u0438, \u043A \u043D\u0430\u0438\u0431\u043E\u043B\u0435\u0435 \u0447\u0430\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u043C \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u044F\u043C API (\u0438 \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043C\u044B \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0438\u043C \u0434\u0430\u043B\u0435\u0435 \u0432 \u044D\u0442\u043E\u043C \u043C\u043E\u0434\u0443\u043B\u0435) \u043E\u0442\u043D\u043E\u0441\u044F\u0442\u0441\u044F :

\\n\\n

    \\n
  • API \u0434\u043B\u044F \u0440\u0430\u0431\u043E\u0442\u044B \u0441 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u043C\u0438, \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043D\u043D\u044B\u043C\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440. \u042F\u0432\u043D\u044B\u0439 \u043F\u0440\u0438\u043C\u0435\u0440 — DOM (Document Object Model) API, \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0438\u0439 \u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C \u0441 HTML \u0438 CSS \u2014 \u0441\u043E\u0437\u0434\u0430\u0432\u0430\u0442\u044C, \u0443\u0434\u0430\u043B\u044F\u0442\u044C \u0438 \u0438\u0437\u043C\u0435\u043D\u044F\u0442\u044C HTML, \u0434\u0438\u043D\u0430\u043C\u0438\u0447\u0435\u0441\u043A\u0438 \u0438\u0437\u043C\u0435\u043D\u044F\u0442\u044C \u0432\u0438\u0434 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B \u0438 \u0442.\u0434. \u041B\u044E\u0431\u043E\u0435 \u0432\u0441\u043F\u043B\u044B\u0432\u0430\u044E\u0449\u0435\u0435 \u043E\u043A\u043D\u043E \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 \u0438\u043B\u0438 \u043F\u043E\u044F\u0432\u043B\u044F\u044E\u0449\u0435\u0435\u0441\u044F \\\»\u043D\u0430 \u0445\u043E\u0434\u0443\\\» \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435 — \u0432\u0441\u0451 \u044D\u0442\u043E \u0431\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u044F DOM. \u0423\u0437\u043D\u0430\u0439\u0442\u0435 \u0431\u043E\u043B\u044C\u0448\u0435 \u043E\u0431 \u044D\u0442\u043E\u0439 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 API \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 \u0420\u0430\u0431\u043E\u0442\u0430 \u0441 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u043C\u0438. \\n
  • API, \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u044E\u0449\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0435 \u043E\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0447\u0430\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0442\u0441\u044F, \u0447\u0442\u043E\u0431\u044B \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u043D\u0435\u0431\u043E\u043B\u044C\u0448\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B. \u042D\u0442\u0430, \u043A\u0430\u0437\u0430\u043B\u043E\u0441\u044C \u0431\u044B, \u043C\u0430\u043B\u0430\u044F \u0434\u0435\u0442\u0430\u043B\u044C \u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0435\u0442 \u043E\u0433\u0440\u043E\u043C\u043D\u043E\u0435 \u0432\u043B\u0438\u044F\u043D\u0438\u0435 \u043D\u0430 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u044C \u0438 \u043F\u043E\u0432\u0435\u0434\u0435\u043D\u0438\u0435 \u0441\u0430\u0439\u0442\u043E\u0432, \u0442\u0430\u043A \u043A\u0430\u043A \u043D\u0435\u0442 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E\u0441\u0442\u0438 \u043F\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044C \u0432\u0441\u044E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0443 \u0446\u0435\u043B\u0438\u043A\u043E\u043C, \u0435\u0441\u043B\u0438 \u0432\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u043F\u0440\u043E\u0441\u0442\u043E \u043E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0441\u043F\u0438\u0441\u043E\u043A \u0442\u043E\u0432\u0430\u0440\u043E\u0432 \u0438\u043B\u0438 \u043D\u043E\u0432\u044B\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u0438\u0441\u0442\u043E\u0440\u0438\u0439. \u042D\u0442\u043E \u0442\u0430\u043A\u0436\u0435 \u0441\u0434\u0435\u043B\u0430\u0435\u0442 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0438\u043B\u0438 \u0441\u0430\u0439\u0442 \u0431\u043E\u043B\u0435\u0435 \u043E\u0442\u0437\u044B\u0432\u0447\u0438\u0432\u044B\u043C \u0438 \\\»\u0436\u0438\u0432\u044B\u043C\\\». \u0421\u043F\u0438\u0441\u043E\u043A API, \u0431\u043B\u0430\u0433\u043E\u0434\u0430\u0440\u044F \u043A\u043E\u0442\u043E\u0440\u044B\u043C \u044D\u0442\u043E \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u0432\u043A\u043B\u044E\u0447\u0430\u0435\u0442: XMLHttpRequest \u0438 Fetch API. \u0412\u044B \u0442\u0430\u043A\u0436\u0435 \u043C\u043E\u0433\u043B\u0438 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u0442\u044C \u0442\u0435\u0440\u043C\u0438\u043D Ajax, \u043E\u043F\u0438\u0441\u044B\u0432\u0430\u044E\u0449\u0438\u0439 \u044D\u0442\u0443 \u0442\u0435\u0445\u043D\u043E\u043B\u043E\u0433\u0438\u044E. \u0423\u0437\u043D\u0430\u0442\u044C \u0431\u043E\u043B\u044C\u0448\u0435 \u043E\u0431 \u044D\u0442\u043E\u0439 \u043A\u0430\u0442\u0435\u0433\u043E\u0440\u0438\u0438 API \u043D\u0430 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 \u041F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0445 \u043E\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \\n
  • API \u0434\u043B\u044F \u0440\u0430\u0431\u043E\u0442\u044B \u0441 \u0433\u0440\u0430\u0444\u0438\u043A\u043E\u0439 \u0448\u0438\u0440\u043E\u043A\u043E \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044E\u0442\u0441\u044F \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043C\u0438,\u00A0 \u0441\u0430\u043C\u044B\u0435 \u043F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0435: Canvas \u0438 WebGL, \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0438\u0435\u00A0\u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u043D\u043E \u0438\u0437\u043C\u0435\u043D\u044F\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435 \u043E \u043F\u0438\u043A\u0441\u0435\u043B\u044F\u0445, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0435\u0441\u044F \u0432 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0435 HTML\u00A0 <>\u00A0 \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F 2D \u0438 3D \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0439. \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043D\u0430\u0440\u0438\u0441\u043E\u0432\u0430\u0442\u044C \u0444\u0438\u0433\u0443\u0440\u044B, \u0441\u043A\u0430\u0436\u0435\u043C, \u043F\u0440\u044F\u043C\u043E\u0443\u0433\u043E\u043B\u044C\u043D\u0438\u043A\u0438 \u0438\u043B\u0438 \u043A\u0440\u0443\u0433\u0438, \u0438\u043C\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0432 canvas \u0438 \u043F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C \u043A \u043D\u0435\u043C\u0443 \u0444\u0438\u043B\u044C\u0442\u0440\u044B, \u0442\u0430\u043A\u0438\u0435 \u043A\u0430\u043A \u0441\u0435\u043F\u0438\u044F \u0438\u043B\u0438 \u043E\u0442\u0442\u0435\u043D\u043A\u0438 \u0441\u0435\u0440\u043E\u0433\u043E \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E Canvas API, \u0438\u043B\u0438 \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0441\u043B\u043E\u0436\u043D\u043E\u0435 3D-\u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435 \u0441 \u043E\u0441\u0432\u0435\u0449\u0435\u043D\u0438\u0435\u043C \u0438 \u0442\u0435\u043A\u0441\u0442\u0443\u0440\u0430\u043C\u0438, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044F WebGL. \u0422\u0430\u043A\u0438\u0435 API \u0447\u0430\u0441\u0442\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0442 \u0432 \u0441\u043E\u0447\u0435\u0442\u0430\u043D\u0438\u0438 \u0441 API \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u0430\u043D\u0438\u043C\u0430\u0446\u0438\u043E\u043D\u043D\u044B\u0445 \u0446\u0438\u043A\u043B\u043E\u0432 (\u0442\u0430\u043A\u0438\u0445 \u043A\u0430\u043A <>) \u0438 \u0434\u0440\u0443\u0433\u0438\u043C\u0438 \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u043F\u043E\u0441\u0442\u043E\u044F\u043D\u043D\u043E \u043C\u0435\u043D\u044F\u044E\u0449\u0435\u0433\u043E\u0441\u044F \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F \u043D\u0430 \u044D\u043A\u0440\u0430\u043D\u0435, \u043A\u0430\u043A \u0432 \u043C\u0443\u043B\u044C\u0442\u0444\u0438\u043B\u044C\u043C\u0430\u0445 \u0438\u043B\u0438 \u0438\u0433\u0440\u0430\u0445 . \\n
  • \u0410\u0443\u0434\u0438\u043E \u0438 \u0412\u0438\u0434\u0435\u043E API \u043A\u0430\u043A <>, Web Audio API, \u0438 WebRTC \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0442 \u0434\u0435\u043B\u0430\u0442\u044C \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u043D\u044B\u0435 \u0432\u0435\u0449\u0438 \u0441 \u043C\u0443\u043B\u044C\u0442\u0438\u043C\u0435\u0434\u0438\u0430. \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0441\u043E\u0431\u0441\u0442\u0432\u0435\u043D\u043D\u044B\u0439 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044C\u0441\u043A\u0438\u0439 \u0438\u043D\u0442\u0435\u0440\u0444\u0435\u0439\u0441 (User Interface, UI) \u0434\u043B\u044F \u043F\u0440\u043E\u0438\u0433\u0440\u044B\u0432\u0430\u043D\u0438\u044F \u0430\u0443\u0434\u0438\u043E/\u0432\u0438\u0434\u0435\u043E, \u0432\u044B\u0432\u043E\u0434 \u043D\u0430 \u044D\u043A\u0440\u0430\u043D \u0441\u0443\u0431\u0442\u0438\u0442\u0440\u043E\u0432, \u0437\u0430\u043F\u0438\u0441\u044B\u0432\u0430\u0442\u044C \u0432\u0438\u0434\u0435\u043E \u0441 \u0432\u0435\u0431-\u043A\u0430\u043C\u0435\u0440\u044B \u0434\u043B\u044F \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0438 \u0432 canvas (\u0441\u043C. \u0432\u044B\u0448\u0435) \u0438\u043B\u0438 \u0434\u043B\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043D\u0430 \u0434\u0440\u0443\u0433\u043E\u0439 \u043A\u043E\u043C\u043F\u044C\u044E\u0442\u0435\u0440 \u0432 \u0432\u0438\u0434\u0435\u043E-\u043A\u043E\u043D\u0444\u0435\u0440\u0435\u043D\u0446\u0438\u0438, \u043F\u0440\u0438\u043C\u0435\u043D\u044F\u0442\u044C \u0437\u0432\u0443\u043A\u043E\u0432\u044B\u0435 \u044D\u0444\u0444\u0435\u043A\u0442\u044B \u043A \u0430\u0443\u0434\u0438\u043E-\u0444\u0430\u0439\u043B\u0430\u043C (\u0442\u0430\u043A\u0438\u0435 \u043A\u0430\u043A gain, distortion, panning \u0438 \u0442.\u0434.). \\n
  • API \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432 — \u0432 \u043E\u0441\u043D\u043E\u0432\u043D\u043E\u043C, API \u0434\u043B\u044F \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0438 \u0438 \u0441\u0447\u0438\u0442\u044B\u0432\u0430\u043D\u0438\u044F \u0434\u0430\u043D\u043D\u044B\u0445 \u0441 \u0441\u043E\u0432\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432 \u0443\u0434\u043E\u0431\u043D\u044B\u043C \u0434\u043B\u044F \u0440\u0430\u0431\u043E\u0442\u044B \u0432\u0435\u0431-\u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0439 \u043E\u0431\u0440\u0430\u0437\u043E\u043C. \u041C\u044B \u0443\u0436\u0435 \u0433\u043E\u0432\u043E\u0440\u0438\u043B\u0438 \u043E\u0431 API \u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438, \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0435\u043C \u0441\u0447\u0438\u0442\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435 \u043E \u043C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0438 \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430. \u0414\u0440\u0443\u0433\u0438\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u044B \u0432\u043A\u043B\u044E\u0447\u0430\u044E\u0442 \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u0435 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F \u043E \u043F\u043E\u044F\u0432\u0438\u0432\u0448\u0435\u043C\u0441\u044F \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u0438\u0438 \u0434\u043B\u044F \u0432\u0435\u0431-\u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u0441\u0438\u0441\u0442\u0435\u043C\u043D\u044B\u0445 \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u0439 (\u0441\u043C. Notifications API) \u0438\u043B\u0438 \u0432\u0438\u0431\u0440\u0430\u0446\u0438\u0438 (\u0441\u043C. Vibration API). \\n
  • API \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u044F \u0434\u0430\u043D\u043D\u044B\u0445 \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F \u043F\u0440\u0438\u043E\u0431\u0440\u0435\u0442\u0430\u044E\u0442 \u0432\u0441\u0451 \u0431\u043E\u043B\u044C\u0448\u0435\u0435 \u0440\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0435\u043D\u0438\u0435 \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u2014 \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u044C \u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044E \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u043A\u043B\u0438\u0435\u043D\u0442\u0430 \u043E\u0447\u0435\u043D\u044C \u043F\u043E\u043B\u0435\u0437\u043D\u0430, \u043A\u043E\u0433\u0434\u0430 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435, \u043A\u043E\u0442\u043E\u0440\u043E\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043E\u0445\u0440\u0430\u043D\u044F\u0442\u044C \u0441\u0432\u043E\u0451 \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435 \u043C\u0435\u0436\u0434\u0443 \u043F\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0430\u043C\u0438 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B, \u0438\u043B\u0438 \u0434\u0430\u0436\u0435 \u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C, \u043A\u043E\u0433\u0434\u0430 \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u043E \u043D\u0435 \u0432 \u0441\u0435\u0442\u0438. \u0412 \u0434\u0430\u043D\u044B\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u043E \u043D\u0435\u043C\u0430\u043B\u043E \u0442\u0430\u043A\u0438\u0445 API. \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u043F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0438\u043B\u0438\u0449\u0435 \u0434\u0430\u043D\u043D\u044B\u0445 \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 \u0438\u043C\u044F/\u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 (name/value)\u00A0 Web Storage API \u0438\u043B\u0438 \u0445\u0440\u0430\u043D\u0438\u043B\u0438\u0449\u0435 \u0434\u0430\u043D\u043D\u044B\u0445 \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 \u0442\u0430\u0431\u043B\u0438\u0446 IndexedDB API. \\n

\\n\\n

\u0420\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0435 \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0435 API

\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043C\u043D\u043E\u0436\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0445 API; \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0438\u0437 \u043D\u0430\u0438\u0431\u043E\u043B\u0435\u0435 \u043F\u043E\u043F\u0443\u043B\u044F\u0440\u043D\u044B\u0445, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0432\u044B \u0440\u0430\u043D\u043E \u0438\u043B\u0438 \u043F\u043E\u0437\u0434\u043D\u043E \u0431\u0443\u0434\u0435\u0442\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C, \u0432\u043A\u043B\u044E\u0447\u0430\u044E\u0442:

\\n\\n

    \\n
  • Twitter API \u0434\u043B\u044F \u0434\u043E\u0431\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0442\u0430\u043A\u043E\u0433\u043E \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430, \u043A\u0430\u043A \u043F\u043E\u043A\u0430\u0437 \u043F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0445 \u0442\u0432\u0438\u0442\u043E\u0432 \u043D\u0430 \u0441\u0430\u0439\u0442\u0435. \\n
  • Google Maps API \u0434\u043B\u044F \u0440\u0430\u0431\u043E\u0442\u044B \u0441 \u043A\u0430\u0440\u0442\u0430\u043C\u0438 \u043D\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435 (\u0438\u043D\u0442\u0435\u0440\u0435\u0441\u043D\u043E, \u0447\u0442\u043E Google Maps \u0442\u0430\u043A\u0436\u0435 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442 \u044D\u0442\u043E\u0442 API). \u0422\u0435\u043F\u0435\u0440\u044C \u044D\u0442\u043E \u0446\u0435\u043B\u044B\u0439 \u043D\u0430\u0431\u043E\u0440 API, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043C\u043E\u0436\u0435\u0442 \u0441\u043F\u0440\u0430\u0432\u043B\u044F\u0442\u044C\u0441\u044F \u0441 \u0448\u0438\u0440\u043E\u043A\u0438\u043C \u0441\u043F\u0435\u043A\u0442\u0440\u043E\u043C \u0437\u0430\u0434\u0430\u0447, \u043A\u0430\u043A \u0441\u0432\u0438\u0434\u0435\u0442\u0435\u043B\u044C\u0441\u0442\u0432\u0443\u0435\u0442 Google Maps API Picker. \\n
  • \u041D\u0430\u0431\u043E\u0440 Facebook API \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u0435\u0442 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u0435 \u0447\u0430\u0441\u0442\u0438 \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u044B Facebook \u0432 \u0432\u0430\u0448\u0435\u043C \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0438, \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u044F, \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u044C \u0432\u0445\u043E\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043C\u0443 \u0441 \u043B\u043E\u0433\u0438\u043D\u043E\u043C Facebook, \u043E\u043F\u043B\u0430\u0442\u044B \u043F\u043E\u043A\u0443\u043F\u043E\u043A \u0432 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0438, \u0434\u0435\u043C\u043E\u043D\u0441\u0442\u0440\u0430\u0446\u0438\u044F \u0446\u0435\u043B\u0435\u0432\u043E\u0439 \u0440\u0435\u043A\u043B\u0430\u043C\u044B \u0438 \u0442.\u0434. \\n
  • YouTube API, \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0449\u0438\u0439 \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u044C \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044C \u0432\u0438\u0434\u0435\u043E \u0441 YouTube \u043D\u0430 \u0432\u0430\u0448\u0435\u043C \u0441\u0430\u0439\u0442\u0435, \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u044C \u043F\u043E\u0438\u0441\u043A, \u0441\u043E\u0437\u0434\u0430\u0432\u0430\u0442\u044C \u043F\u043B\u044D\u0439\u043B\u0438\u0441\u0442\u044B \u0438 \u0442.\u0434. \\n
  • Twilio API — \u0444\u0440\u0435\u0439\u043C\u0432\u043E\u0440\u043A \u0434\u043B\u044F \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043D\u0438\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B\u0430 \u0433\u043E\u043B\u043E\u0441\u043E\u0432\u043E\u0439 \u0438 \u0432\u0438\u0434\u0435\u043E \u0441\u0432\u044F\u0437\u0438 \u0432 \u0432\u0430\u0448\u0435\u043C \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0438, \u043E\u0442\u043F\u0440\u0430\u0432\u043A\u0438 SMS/MMS \u0438\u0437 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044F \u0438 \u0442.\u0434. \\n

\\n\\n

Note: \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043D\u0430\u0439\u0442\u0438 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044E \u043E \u0433\u043E\u0440\u0430\u0437\u0434\u043E \u0431\u043E\u043B\u044C\u0448\u0435\u043C \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0445 API \u0432 Programmable Web API directory.

\u041A\u0430\u043A \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442 API?

\u0420\u0430\u0431\u043E\u0442\u0430 \u0440\u0430\u0437\u043D\u044B\u0445 JavaScript API \u043D\u0435\u043C\u043D\u043E\u0433\u043E \u043E\u0442\u043B\u0438\u0447\u0430\u0435\u0442\u0441\u044F, \u043D\u043E, \u0432 \u043E\u0441\u043D\u043E\u0432\u043D\u043E\u043C, \u0443 \u043D\u0438\u0445 \u043F\u043E\u0445\u043E\u0436\u0438\u0435 \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u0438 \u043F\u0440\u0438\u043D\u0446\u0438\u043F \u0440\u0430\u0431\u043E\u0442\u044B.

\u041E\u043D\u0438 \u043E\u0441\u043D\u043E\u0432\u0430\u043D\u044B \u043D\u0430 \u043E\u0431\u044A\u0435\u043A\u0442\u0430\u0445

\u0412\u0437\u0430\u0438\u043C\u043E\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 API \u0432 \u043A\u043E\u0434\u0435 \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 \u043E\u0434\u0438\u043D \u0438\u043B\u0438 \u0431\u043E\u043B\u044C\u0448\u0435 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432 JavaScript, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0441\u043B\u0443\u0436\u0430\u0442 \u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440\u0430\u043C\u0438 \u0434\u043B\u044F \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0438, \u0441 \u043A\u043E\u0442\u043E\u0440\u043E\u0439 \u0440\u0430\u0431\u043E\u0442\u0430\u0435\u0442 API (\u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044F \u0432 \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u0445 \u043E\u0431\u044A\u0435\u043A\u0442\u0430), \u0438 \u0440\u0435\u0430\u043B\u0438\u0437\u0443\u044E\u0442 \u0444\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 API (\u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044F \u0432 \u043C\u0435\u0442\u043E\u0434\u0430\u0445 \u043E\u0431\u044A\u0435\u043A\u0442\u0430).

Note: \u0415\u0441\u043B\u0438 \u0432\u0430\u043C \u0435\u0449\u0451 \u043D\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043D\u043E \u043A\u0430\u043A \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u043E\u0431\u044A\u0435\u043A\u0442\u044B, \u0441\u043E\u0432\u0435\u0442\u0443\u0435\u043C \u0432\u0435\u0440\u043D\u0443\u0442\u044C\u0441\u044F \u043D\u0430\u0437\u0430\u0434 \u0438 \u0438\u0437\u0443\u0447\u0438\u0442\u044C \u043C\u043E\u0434\u0443\u043B\u044C JavaScript objects \u043F\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043C \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0430\u0442\u044C.

\u0412\u0435\u0440\u043D\u0451\u043C\u0441\u044F \u043A \u043F\u0440\u0438\u043C\u0435\u0440\u0443 \u0441 API \u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 \u2014 \u043E\u0447\u0435\u043D\u044C \u043F\u0440\u043E\u0441\u0442\u043E\u0439 API, \u0441\u043E\u0441\u0442\u043E\u044F\u0449\u0438\u0439 \u0438\u0437 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u0438\u0445 \u043F\u0440\u043E\u0441\u0442\u044B\u0445 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432:

\\n\\n

    \\n
  • <>, \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u0440\u0438 \u043C\u0435\u0442\u043E\u0434\u0430 \u0434\u043B\u044F \u043A\u043E\u043D\u0442\u0440\u043E\u043B\u044F \u0438 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u044F \u0433\u0435\u043E\u0434\u0430\u043D\u043D\u044B\u0445. \\n
  • <>, \u043F\u0440\u0435\u0434\u043E\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0435 \u043E \u043C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0438 \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430 \u0432 \u0437\u0430\u0434\u0430\u043D\u043D\u044B\u0439 \u043C\u043E\u043C\u0435\u043D\u0442 \u0432\u0440\u0435\u043C\u0435\u043D\u0438 \u2014 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 <> — \u043E\u0431\u044A\u0435\u043A\u0442, \u0445\u0440\u0430\u043D\u044F\u0449\u0438\u0439 \u043A\u043E\u043E\u0440\u0434\u0438\u043D\u0430\u0442\u044B \u0438 \u043E\u0442\u043C\u0435\u0442\u043A\u0443 \u043E \u0442\u0435\u043A\u0443\u0449\u0435\u043C \u0432\u0440\u0435\u043C\u0435\u043D\u0438. \\n
  • <>, \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u043C\u043D\u043E\u0433\u043E \u043F\u043E\u043B\u0435\u0437\u043D\u043E\u0439 \u0438\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u0438 \u043E \u0440\u0430\u0441\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0438 \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430, \u0432\u043A\u043B\u044E\u0447\u0430\u044F \u0448\u0438\u0440\u043E\u0442\u0443 \u0438 \u0434\u043E\u043B\u0433\u043E\u0442\u0443, \u0432\u044B\u0441\u043E\u0442\u0443, \u0441\u043A\u043E\u0440\u043E\u0441\u0442\u044C \u0438 \u043D\u0430\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u0434\u0432\u0438\u0436\u0435\u043D\u0438\u044F \u0438 \u0442.\u0434. \\n

\\n\\n

\u0422\u0430\u043A \u043A\u0430\u043A \u0436\u0435 \u044D\u0442\u0438 \u043E\u0431\u044A\u0435\u043A\u0442\u044B \u0432\u0437\u0430\u0438\u043C\u043E\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u044E\u0442? \u0415\u0441\u043B\u0438 \u0432\u044B \u043F\u043E\u0441\u043C\u043E\u0442\u0440\u0438\u0442\u0435 \u043D\u0430 \u043D\u0430\u0448 \u043F\u0440\u0438\u043C\u0435\u0440 maps-example.html (see it live also), \u0432\u044B \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043A\u043E\u0434:

Note: \u041A\u043E\u0433\u0434\u0430 \u0432\u044B \u0432\u043F\u0435\u0440\u0432\u044B\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u043F\u0440\u0438\u0432\u0435\u0434\u0451\u043D\u043D\u044B\u0439 \u0432\u044B\u0448\u0435 \u043F\u0440\u0438\u043C\u0435\u0440, \u043F\u043E\u044F\u0432\u0438\u0442\u0441\u044F \u0434\u0438\u0430\u043B\u043E\u0433\u043E\u0432\u043E\u0435 \u043E\u043A\u043D\u043E, \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u044E\u0449\u0435\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043D\u0430 \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0434\u0430\u043D\u043D\u044B\u0445 \u043E \u043C\u0435\u0441\u0442\u043E\u043D\u0430\u0445\u043E\u0436\u0434\u0435\u043D\u0438\u0438 \u044D\u0442\u043E\u043C\u0443 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u044E (\u0441\u043C. \u0440\u0430\u0437\u0434\u0435\u043B <> \u0434\u0430\u043B\u0435\u0435 \u0432 \u044D\u0442\u043E\u0439 \u0441\u0442\u0430\u0442\u044C\u0435). \u0412\u0430\u043C \u043D\u0443\u0436\u043D\u043E \u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044C \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0434\u0430\u043D\u043D\u044B\u0445, \u0447\u0442\u043E\u0431\u044B \u0438\u043C\u0435\u0442\u044C \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E\u0441\u0442\u044C \u043E\u0442\u043C\u0435\u0442\u0438\u0442\u044C \u0441\u0432\u043E\u0451 \u043C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u043D\u0430 \u043A\u0430\u0440\u0442\u0435. \u0415\u0441\u043B\u0438 \u0432\u044B \u0432\u0441\u0451 \u0435\u0449\u0451 \u043D\u0435 \u0432\u0438\u0434\u0438\u0442\u0435 \u043A\u0430\u0440\u0442\u0443, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044F \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u0438\u0442\u044C \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u044F \u0432\u0440\u0443\u0447\u043D\u0443\u044E; \u044D\u0442\u043E \u0434\u0435\u043B\u0430\u0435\u0442\u0441\u044F \u0440\u0430\u0437\u043D\u044B\u043C\u0438 \u0441\u043F\u043E\u0441\u043E\u0431\u0430\u043C\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043C\u043E\u0441\u0442\u0438 \u043E\u0442 \u0432\u0430\u0448\u0435\u0433\u043E \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430; \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0432 Firefox \u043F\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 > Tools > Page Info > Permissions, \u0437\u0430\u0442\u0435\u043C \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 Share Location; \u0432 Chrome \u043F\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 Settings > Privacy > Show advanced settings > Content settings \u0438 \u0438\u0437\u043C\u0435\u043D\u0438\u0442\u0435 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 Location.

\u0412\u043E-\u043F\u0435\u0440\u0432\u044B\u0445, \u043C\u044B \u0445\u043E\u0442\u0438\u043C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u043C\u0435\u0442\u043E\u0434 <>, \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0442\u0435\u043A\u0443\u0449\u0435\u0435 \u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u043D\u0430\u0448\u0435\u0433\u043E \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430. \u0414\u043E\u0441\u0442\u0443\u043F \u043A \u043E\u0431\u044A\u0435\u043A\u0442\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 <> \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 <>, \u0442\u0430\u043A \u0447\u0442\u043E \u043C\u044B \u043D\u0430\u0447\u043D\u0451\u043C \u0441

\u042D\u0442\u043E \u044D\u043A\u0432\u0438\u0432\u0430\u043B\u0435\u043D\u0442\u043D\u043E \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0435\u043C\u0443 \u043A\u043E\u0434\u0443

\u041D\u043E \u043C\u044B \u043C\u043E\u0436\u0435\u043C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0442\u043E\u0447\u043A\u0438, \u0447\u0442\u043E\u0431\u044B \u0441\u0432\u044F\u0437\u0430\u0442\u044C \u0434\u043E\u0441\u0442\u0443\u043F \u043A \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430\u043C/\u043C\u0435\u0442\u043E\u0434\u0430\u043C \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u0432 \u043E\u0434\u043D\u043E \u0432\u044B\u0440\u0430\u0436\u0435\u043D\u0438\u0435, \u0443\u043C\u0435\u043D\u044C\u0448\u0430\u044F \u043A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u043E\u043A \u0432 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0435.

\u041C\u0435\u0442\u043E\u0434 <> \u0438\u043C\u0435\u0435\u0442 \u043E\u0434\u0438\u043D \u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u044B\u0439 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440 — \u0430\u043D\u043E\u043D\u0438\u043C\u043D\u0443\u044E \u0444\u0443\u043D\u043A\u0446\u0438\u044E, \u043A\u043E\u0442\u043E\u0440\u0430\u044F \u0437\u0430\u043F\u0443\u0441\u0442\u0438\u0442\u0441\u044F, \u043A\u043E\u0433\u0434\u0430 \u0442\u0435\u043A\u0443\u0449\u0435\u0435 \u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0441\u0447\u0438\u0442\u0430\u043D\u043E. \u0421\u0430\u043C\u0430 \u044D\u0442\u0430 \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u0435\u0442 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440, \u044F\u0432\u043B\u044F\u044E\u0449\u0438\u0439\u0441\u044F \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u043C <>, \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0449\u0438\u043C \u0434\u0430\u043D\u043D\u044B\u0435 \u043E \u0442\u0435\u043A\u0443\u0449\u0435\u043C \u043C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0438.

Note: \u0424\u0443\u043D\u043A\u0446\u0438\u044F, \u043A\u043E\u0442\u043E\u0440\u0430\u044F \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u0442\u0441\u044F \u0434\u0440\u0443\u0433\u043E\u0439 \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430, \u043D\u0430\u0437\u044B\u0432\u0430\u0435\u0442\u0441\u044F \u0444\u0443\u043D\u043A\u0446\u0438\u0435\u0439 \u043E\u0431\u0440\u0430\u0442\u043D\u043E\u0433\u043E \u0432\u044B\u0437\u043E\u0432\u0430 (callback function).

\u0422\u0430\u043A\u043E\u0439 \u043F\u043E\u0434\u0445\u043E\u0434, \u043F\u0440\u0438 \u043A\u043E\u0442\u043E\u0440\u043E\u043C \u0444\u0443\u043D\u043A\u0446\u0438\u044F \u0432\u044B\u0437\u044B\u0432\u0430\u0435\u0442\u0441\u044F \u0442\u043E\u043B\u044C\u043A\u043E \u0442\u043E\u0433\u0434\u0430, \u043A\u043E\u0433\u0434\u0430 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u044F \u0431\u044B\u043B\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u0430, \u043E\u0447\u0435\u043D\u044C \u0440\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0451\u043D \u0432 JavaScript API \u2014 \u0443\u0431\u0435\u0434\u0438\u0442\u044C\u0441\u044F, \u0447\u0442\u043E \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u044F \u0431\u044B\u043B\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u0430 \u043F\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043C \u043F\u044B\u0442\u0430\u0442\u044C\u0441\u044F \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0434\u0430\u043D\u043D\u044B\u0435, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043E\u043D\u0430 \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442, \u0432 \u0434\u0440\u0443\u0433\u043E\u0439 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438. \u0422\u0430\u043A\u0438\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u0442\u0430\u043A\u0436\u0435 \u043D\u0430\u0437\u044B\u0432\u0430\u044E\u0442 \u0430\u0441\u0438\u043D\u0445\u0440\u043E\u043D\u043D\u044B\u043C\u0438 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u044F\u043C\u0438 (asynchronous operations). \u0423\u0447\u0438\u0442\u044B\u0432\u0430\u044F, \u0447\u0442\u043E \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u0434\u0430\u043D\u043D\u044B\u0445 \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 \u043F\u0440\u043E\u0438\u0437\u0432\u043E\u0434\u0438\u0442\u0441\u044F \u0438\u0437 \u0432\u043D\u0435\u0448\u043D\u0435\u0433\u043E \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430 (GPS-\u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430 \u0438\u043B\u0438 \u0434\u0440\u0443\u0433\u043E\u0433\u043E \u0443\u0441\u0442\u0440\u043E\u0439\u0441\u0442\u0432\u0430 \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438), \u043C\u044B \u043D\u0435 \u043C\u043E\u0436\u0435\u043C \u0431\u044B\u0442\u044C \u0443\u0432\u0435\u0440\u0435\u043D\u044B, \u0447\u0442\u043E \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u044F \u0441\u0447\u0438\u0442\u044B\u0432\u0430\u043D\u0438\u044F \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u0430 \u0432\u043E\u0432\u0440\u0435\u043C\u044F \u0438 \u043C\u044B \u0441\u043C\u043E\u0436\u0435\u043C \u043D\u0435\u0437\u0430\u043C\u0435\u0434\u043B\u0438\u0442\u0435\u043B\u044C\u043D\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043C\u044B\u0435 \u0435\u044E \u0434\u0430\u043D\u043D\u044B\u0435. \u041F\u043E\u044D\u0442\u043E\u043C\u0443 \u0442\u0430\u043A\u043E\u0439 \u043A\u043E\u0434 \u043D\u0435 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C:

\u0415\u0441\u043B\u0438 \u043F\u0435\u0440\u0432\u0430\u044F \u0441\u0442\u0440\u043E\u043A\u0430 \u0435\u0449\u0451 \u043D\u0435 \u0432\u0435\u0440\u043D\u0443\u043B\u0430 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442, \u0432\u0442\u043E\u0440\u0430\u044F \u0432\u044B\u0437\u043E\u0432\u0435\u0442 \u043E\u0448\u0438\u0431\u043A\u0443 \u0438\u0437-\u0437\u0430 \u0442\u043E\u0433\u043E, \u0447\u0442\u043E \u0434\u0430\u043D\u043D\u044B\u0435 \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 \u0435\u0449\u0451 \u043D\u0435 \u0441\u0442\u0430\u043B\u0438 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B. \u041F\u043E \u044D\u0442\u043E\u0439 \u043F\u0440\u0438\u0447\u0438\u043D\u0435, API, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0449\u0438\u0435 \u0430\u0441\u0438\u043D\u0445\u0440\u043E\u043D\u043D\u044B\u0435 \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438, \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044B\u0432\u0430\u044E\u0442\u0441\u044F \u0441 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435\u043C <>, \u0438\u043B\u0438 \u0431\u043E\u043B\u0435\u0435 \u0441\u043E\u0432\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 \u0441\u0438\u0441\u0442\u0435\u043C\u044B \u041E\u0431\u0435\u0449\u0430\u043D\u0438\u0439(Promises), \u043A\u043E\u0442\u043E\u0440\u0430\u044F \u043F\u043E\u044F\u0432\u0438\u043B\u0430\u0441\u044C \u0432 ECMAScript 6 \u0438 \u0448\u0438\u0440\u043E\u043A\u043E \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0442\u0441\u044F \u0432 \u043D\u043E\u0432\u044B\u0445 API.

\u041C\u044B \u0441\u043E\u0432\u043C\u0435\u0449\u0430\u0435\u043C API \u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 \u0441\u043E \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u043C API — Google Maps API, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C \u0434\u043B\u044F \u0442\u043E\u0433\u043E, \u0447\u0442\u043E\u0431\u044B \u043E\u0442\u043C\u0435\u0442\u0438\u0442\u044C \u0440\u0430\u0441\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435, \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043C\u043E\u0435\u00A0 getCurrentPosition() , \u043D\u0430 Google Map. \u0427\u0442\u043E\u0431\u044B Google Maps API \u0441\u0442\u0430\u043B \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u043D\u0430 \u043D\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0435, \u043C\u044B \u0432\u043A\u043B\u044E\u0447\u0430\u0435\u043C \u0435\u0433\u043E \u0432 HTML \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442:

\u0427\u0442\u043E\u0431\u044B \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u044D\u0442\u043E\u0442 API, \u0432\u043E-\u043F\u0435\u0440\u0432\u044B\u0445 \u0441\u043E\u0437\u0434\u0430\u0434\u0438\u043C \u043E\u0431\u044A\u0435\u043A\u0442 LatLng \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u0430 google.maps.LatLng() , \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u044E\u0449\u0438\u043C \u0434\u0430\u043D\u043D\u044B\u0435 \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 <> \u0438 <> :

\u042D\u0442\u043E\u0442 \u043E\u0431\u044A\u0435\u043A\u0442 \u0441\u0430\u043C \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435\u043C \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u0430 center \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u043D\u0430\u0441\u0442\u0440\u043E\u0435\u043A (options), \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043C\u044B \u043D\u0430\u0437\u0432\u0430\u043B\u0438 myOptions . \u0417\u0430\u0442\u0435\u043C \u043C\u044B \u0441\u043E\u0437\u0434\u0430\u0451\u043C \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u043E\u0431\u044A\u0435\u043A\u0442\u0430, \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u044E\u0449\u0435\u0433\u043E \u043D\u0430\u0448\u0443 \u043A\u0430\u0440\u0442\u0443, \u0432\u044B\u0437\u044B\u0432\u0430\u044F \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440 google.maps.Map() \u0438 \u043F\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044F \u0435\u043C\u0443 \u0434\u0432\u0430 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u0430 \u2014 \u0441\u0441\u044B\u043B\u043A\u0443 \u043D\u0430 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 <>, \u043D\u0430 \u043A\u043E\u0442\u043E\u0440\u043E\u043C \u043C\u044B \u0445\u043E\u0442\u0438\u043C \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u044B\u0432\u0430\u0442\u044C \u043A\u0430\u0440\u0442\u0443 (\u0441 ID map_canvas ), \u0438 \u043E\u0431\u044A\u0435\u043A\u0442 \u043D\u0430\u0441\u0442\u0440\u043E\u0435\u043A (options), \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u043C\u044B \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u0438\u043B\u0438 \u0432\u044B\u0448\u0435.

\u041A\u043E\u0433\u0434\u0430 \u044D\u0442\u043E \u0441\u0434\u0435\u043B\u0430\u043D\u043E, \u043D\u0430\u0448\u0430 \u043A\u0430\u0440\u0442\u0430 \u043E\u0442\u0440\u0438\u0441\u043E\u0432\u044B\u0432\u0430\u0435\u0442\u0441\u044F.

\u041F\u043E\u0441\u043B\u0435\u0434\u043D\u0438\u0439 \u0431\u043B\u043E\u043A \u043A\u043E\u0434\u0430 \u0434\u0435\u043C\u043E\u043D\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0434\u0432\u0430 \u0440\u0430\u0441\u043F\u0440\u043E\u0441\u0442\u0440\u0430\u043D\u0451\u043D\u043D\u044B\u0445 \u043F\u043E\u0434\u0445\u043E\u0434\u0430, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0432\u044B \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0432\u043E \u043C\u043D\u043E\u0433\u0438\u0445 API:

\\n\\n

    \\n
  • \u0412\u043E-\u043F\u0435\u0440\u0432\u044B\u0445, \u043E\u0431\u044A\u0435\u043A\u0442\u044B API \u043E\u0431\u044B\u0447\u043D\u043E \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442 \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u044B, \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0432\u044B\u0437\u044B\u0432\u0430\u044E\u0442\u0441\u044F \u0434\u043B\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u044F \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u043E\u0432 \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432, \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u043C\u044B\u0445 \u043F\u0440\u0438 \u043D\u0430\u043F\u0438\u0441\u0430\u043D\u0438\u0438 \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u044B. \\n
  • \u0412\u043E-\u0432\u0442\u043E\u0440\u044B\u0445, \u043E\u0431\u044A\u0435\u043A\u0442\u044B API \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044E \u0438\u043C\u0435\u044E\u0442 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432 (options), \u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u043C\u043E\u0436\u043D\u043E \u043D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0438 \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0438\u043C\u0435\u043D\u043D\u043E \u0442\u0443 \u0441\u0440\u0435\u0434\u0443 \u0434\u043B\u044F \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u043A\u0438, \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435. API \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u044B \u043E\u0431\u044B\u0447\u043D\u043E \u043F\u0440\u0438\u043D\u0438\u043C\u0430\u044E\u0442 \u043E\u0431\u044A\u0435\u043A\u0442\u044B \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432 (options) \u0432 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0430\u0440\u0430\u043C\u0435\u0442\u0440\u043E\u0432, \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u043A\u043E\u0442\u043E\u0440\u044B\u0445 \u0438 \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0430. \\n

\\n\\n

Note: \u041D\u0435 \u043E\u0442\u0447\u0430\u0438\u0432\u0430\u0439\u0442\u0435\u0441\u044C, \u0435\u0441\u043B\u0438 \u0432\u044B \u0447\u0442\u043E-\u0442\u043E \u043D\u0435 \u043F\u043E\u043D\u044F\u043B\u0438 \u0438\u0437 \u044D\u0442\u043E\u0433\u043E \u043F\u0440\u0438\u043C\u0435\u0440\u0430 \u0441\u0440\u0430\u0437\u0443. \u041C\u044B \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0438\u043C \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0435 \u0441\u0442\u043E\u0440\u043E\u043D\u043D\u0438\u0445 API \u0431\u043E\u043B\u0435\u0435 \u043F\u043E\u0434\u0440\u043E\u0431\u043D\u043E \u0432 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0445 \u0441\u0442\u0430\u0442\u044C\u044F\u0445.

\u0423 \u043D\u0438\u0445 \u0443\u0437\u043D\u0430\u0432\u0430\u0435\u043C\u044B\u0435 \u0442\u043E\u0447\u043A\u0438 \u0432\u0445\u043E\u0434\u0430

\u041F\u0440\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u0438 API \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044C, \u0447\u0442\u043E \u0432\u044B \u0437\u043D\u0430\u0435\u0442\u0435 \u0433\u0434\u0435 \u0442\u043E\u0447\u043A\u0430 \u0432\u0445\u043E\u0434\u0430 \u0434\u043B\u044F API. \u0412 API \u0413\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438 \u044D\u0442\u043E \u0434\u043E\u0432\u043E\u043B\u044C\u043D\u043E \u043F\u0440\u043E\u0441\u0442\u043E \u2014 \u044D\u0442\u043E \u0441\u0432\u043E\u0439\u0441\u0442\u0432\u043E <>, \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0430\u044E\u0449\u0435\u0435 \u043E\u0431\u044A\u0435\u043A\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 <>, \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u0442\u043E\u0440\u043E\u0433\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B \u0432\u0441\u0435 \u043F\u043E\u043B\u0435\u0437\u043D\u044B\u0435 \u043C\u0435\u0442\u043E\u0434\u044B \u0433\u0435\u043E\u043B\u043E\u043A\u0430\u0446\u0438\u0438.

\u041D\u0430\u0439\u0442\u0438 \u0442\u043E\u0447\u043A\u0443 \u0432\u0445\u043E\u0434\u0430 Document Object Model (DOM) API \u0435\u0449\u0451 \u043F\u0440\u043E\u0449\u0435 \u2014 \u043F\u0440\u0438 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u0438\u0438 \u044D\u0442\u043E\u0433\u043E API \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u0435\u0442\u0441\u044F \u043E\u0431\u044A\u0435\u043A\u0442 <>, \u0438\u043B\u0438 \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 HTML, \u0441 \u043A\u043E\u0442\u043E\u0440\u044B\u043C \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u043A\u0430\u043A\u0438\u043C-\u043B\u0438\u0431\u043E \u043E\u0431\u0440\u0430\u0437\u043E\u043C \u0432\u0437\u0430\u0438\u043C\u043E\u0434\u0435\u0439\u0441\u0442\u0432\u043E\u0432\u0430\u0442\u044C, \u043A \u043F\u0440\u0438\u043C\u0435\u0440\u0443:

\u0422\u043E\u0447\u043A\u0438 \u0432\u0445\u043E\u0434\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 API \u043D\u0435\u043C\u043D\u043E\u0433\u043E \u0441\u043B\u043E\u0436\u043D\u0435\u0435, \u0447\u0430\u0441\u0442\u043E \u043F\u043E\u0434\u0440\u0430\u0437\u0443\u043C\u0435\u0432\u0430\u0435\u0442\u0441\u044F \u0441\u043E\u0437\u0434\u0430\u043D\u0438\u0435 \u043E\u0441\u043E\u0431\u043E\u0433\u043E \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u0430, \u0432 \u043A\u043E\u0442\u043E\u0440\u043E\u043C \u0431\u0443\u0434\u0435\u0442 \u043D\u0430\u043F\u0438\u0441\u0430\u043D \u043A\u043E\u0434 API. \u041D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u043E\u0431\u044A\u0435\u043A\u0442 \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u0430 Canvas API \u0441\u043E\u0437\u0434\u0430\u0451\u0442\u0441\u044F \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435\u043C \u0441\u0441\u044B\u043B\u043A\u0438 \u043D\u0430 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 <>, \u043D\u0430 \u043A\u043E\u0442\u043E\u0440\u043E\u043C \u0432\u044B \u0445\u043E\u0442\u0438\u0442\u0435 \u0440\u0438\u0441\u043E\u0432\u0430\u0442\u044C, \u0430 \u0437\u0430\u0442\u0435\u043C \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E \u0432\u044B\u0437\u0432\u0430\u0442\u044C \u043C\u0435\u0442\u043E\u0434 <>:

\u0412\u0441\u0451, \u0447\u0442\u043E \u043C\u044B \u0445\u043E\u0442\u0438\u043C \u0441\u0434\u0435\u043B\u0430\u0442\u044C \u0441 canvas \u043F\u043E\u0441\u043B\u0435 \u044D\u0442\u043E\u0433\u043E, \u0434\u043E\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044F \u0432\u044B\u0437\u043E\u0432\u043E\u043C \u0441\u0432\u043E\u0439\u0441\u0442\u0432 \u0438 \u043C\u0435\u0442\u043E\u0434\u043E\u0432 \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0433\u043E (content) (\u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u044F\u0432\u043B\u044F\u0435\u0442\u0441\u044F \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u043E\u043C <>), \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440:

Note: \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044C \u044D\u0442\u043E\u0442 \u043A\u043E\u0434 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0432 \u043D\u0430\u0448\u0435\u043C bouncing balls demo (see it running live also).

\u041E\u043D\u0438 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u0443\u044E\u0442 \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u0434\u043B\u044F \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0435\u043C

\u041C\u044B \u0443\u0436\u0435 \u043E\u0431\u0441\u0443\u0436\u0434\u0430\u043B\u0438 \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u0440\u0430\u043D\u0435\u0435 \u0432 \u044D\u0442\u043E\u043C \u043A\u0443\u0440\u0441\u0435, \u0432 \u043D\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044C\u0435 Introduction to events \u2014 \u0432 \u044D\u0442\u043E\u0439 \u0441\u0442\u0430\u0442\u044C\u0435 \u0434\u0435\u0442\u0430\u043B\u044C\u043D\u043E \u043E\u043F\u0438\u0441\u044B\u0432\u0430\u044E\u0442\u0441\u044F \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u043D\u0430 \u0441\u0442\u043E\u0440\u043E\u043D\u0435 \u043A\u043B\u0438\u0435\u043D\u0442\u0430 \u0438 \u0438\u0445 \u043F\u0440\u0438\u043C\u0435\u043D\u0435\u043D\u0438\u0435. \u0415\u0441\u043B\u0438 \u0432\u044B \u0435\u0449\u0451 \u043D\u0435 \u0437\u043D\u0430\u043A\u043E\u043C\u044B \u0441 \u0442\u0435\u043C, \u043A\u0430\u043A \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u043A\u043B\u0438\u0435\u043D\u0442\u0441\u043A\u043E\u0439 \u0447\u0430\u0441\u0442\u0438, \u0440\u0435\u043A\u043E\u043C\u0435\u043D\u0434\u0443\u0435\u043C \u043F\u0440\u043E\u0447\u0438\u0442\u0430\u0442\u044C \u044D\u0442\u0443 \u0441\u0442\u0430\u0442\u044C\u044E \u043F\u0440\u0435\u0436\u0434\u0435, \u0447\u0435\u043C \u043F\u0440\u043E\u0434\u043E\u043B\u0436\u0438\u0442\u044C.

\u0412 \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0445 API \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044F \u0440\u044F\u0434 \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u0445 \u0441\u043E\u0431\u044B\u0442\u0438\u0439, \u0432 \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0445 — \u0441\u043E\u0431\u044B\u0442\u0438\u0439 \u043D\u0435\u0442. \u0421\u0432\u043E\u0439\u0441\u0442\u0432\u0430 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430, \u043F\u043E\u0437\u0432\u043E\u043B\u044F\u044E\u0449\u0438\u0435 \u0437\u0430\u043F\u0443\u0441\u043A\u0430\u0442\u044C \u0444\u0443\u043D\u043A\u0446\u0438\u0438 \u043F\u0440\u0438 \u0441\u043E\u0432\u0435\u0440\u0448\u0435\u043D\u0438\u0438 \u043A\u0430\u043A\u043E\u0433\u043E-\u043B\u0438\u0431\u043E \u0441\u043E\u0431\u044B\u0442\u0438\u044F \u043F\u043E \u0431\u043E\u043B\u044C\u0448\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043F\u0435\u0440\u0435\u0447\u0438\u0441\u043B\u0435\u043D\u044B \u0432 \u043D\u0430\u0448\u0435\u043C \u043C\u0430\u0442\u0435\u0440\u0438\u0430\u043B\u0435 \u043E\u0442\u0434\u0435\u043B\u044C\u043D\u043E\u0433\u043E \u0440\u0430\u0437\u0434\u0435\u043B\u0430 \\\»\u041E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0438 \u0441\u043E\u0431\u044B\u0442\u0438\u0439 (Event handlers)\\\». \u041A\u0430\u043A \u043F\u0440\u043E\u0441\u0442\u043E\u0439 \u043F\u0440\u0438\u043C\u0435\u0440, \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440\u044B \u043E\u0431\u044A\u0435\u043A\u0442\u0430 XMLHttpRequest (\u043A\u0430\u0436\u0434\u044B\u0439 \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u044F\u0435\u0442 \u0441\u043E\u0431\u043E\u0439 HTTP-\u0437\u0430\u043F\u0440\u043E\u0441 \u043A \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043D\u0430 \u043F\u043E\u043B\u0443\u0447\u0435\u043D\u0438\u0435 \u043A\u0430\u043A\u0438\u0445-\u043B\u0438\u0431\u043E \u0440\u0435\u0441\u0443\u0440\u0441\u043E\u0432 (resource)) \u0438\u043C\u0435\u044E\u0442 \u043D\u0435\u0441\u043A\u043E\u043B\u044C\u043A\u043E \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0445 \u0441\u043E\u0431\u044B\u0442\u0438\u0439, \u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, \u0441\u043E\u0431\u044B\u0442\u0438\u0435 load \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442, \u043A\u043E\u0433\u0434\u0430 \u043E\u0442\u0432\u0435\u0442 \u0441 \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043C\u044B\u043C \u0440\u0435\u0441\u0443\u0440\u0441\u043E\u043C \u0431\u044B\u043B \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0451\u043D \u0438 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u0432 \u0434\u0430\u043D\u043D\u044B\u0439 \u043C\u043E\u043C\u0435\u043D\u0442.

\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043A\u043E\u0434 \u0441\u043E\u0434\u0435\u0440\u0436\u0438\u0442 \u043F\u0440\u043E\u0441\u0442\u043E\u0439 \u043F\u0440\u0438\u043C\u0435\u0440 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u0441\u043E\u0431\u044B\u0442\u0438\u0439:

Note: \u0412\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044C \u044D\u0442\u043E\u0442 \u043A\u043E\u0434 \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438 \u0432 \u043F\u0440\u0438\u043C\u0435\u0440\u0435 ajax.html (see it live also).

\u0412 \u043F\u0435\u0440\u0432\u044B\u0445 \u043F\u044F\u0442\u0438 \u0441\u0442\u0440\u043E\u043A\u0430\u0445 \u043C\u044B \u0437\u0430\u0434\u0430\u0451\u043C \u0440\u0430\u0441\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430, \u043A\u043E\u0442\u043E\u0440\u044B\u0439 \u0445\u043E\u0442\u0438\u043C \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C, \u0441\u043E\u0437\u0434\u0430\u0451\u043C \u044D\u043A\u0437\u0435\u043C\u043F\u043B\u044F\u0440 \u043E\u0431\u044A\u0435\u043A\u0442\u0430 \u0437\u0430\u043F\u0440\u043E\u0441\u0430 \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E \u043A\u043E\u043D\u0441\u0442\u0440\u0443\u043A\u0442\u043E\u0440\u0430 XMLHttpRequest() , \u043E\u0442\u043A\u0440\u044B\u0432\u0430\u0435\u043C HTTP-\u0437\u0430\u043F\u0440\u043E\u0441 GET , \u0447\u0442\u043E\u0431\u044B \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043C\u044B\u0439 \u0440\u0435\u0441\u0443\u0440\u0441, \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u044F\u0435\u043C, \u0447\u0442\u043E \u043C\u044B \u0445\u043E\u0442\u0438\u043C \u043F\u043E\u043B\u0443\u0447\u0438\u0442\u044C \u044D\u0442\u043E\u0442 \u0440\u0435\u0441\u0443\u0440\u0441 \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 json, \u043F\u043E\u0441\u043B\u0435 \u0447\u0435\u0433\u043E \u043E\u0442\u0441\u044B\u043B\u0430\u0435\u043C \u0437\u0430\u043F\u0440\u043E\u0441.

\u0417\u0430\u0442\u0435\u043C \u0444\u0443\u043D\u043A\u0446\u0438\u044F-\u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A onload \u043E\u043F\u0440\u0435\u0434\u0435\u043B\u044F\u0435\u0442 \u043D\u0430\u0448\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u043F\u043E \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0435 \u043E\u0442\u0432\u0435\u0442\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041D\u0430\u043C \u0438\u0437\u0432\u0435\u0441\u0442\u043D\u043E, \u0447\u0442\u043E \u043E\u0442\u0432\u0435\u0442 \u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0451\u043D \u0438 \u0434\u043E\u0441\u0442\u0443\u043F\u0435\u043D \u043F\u043E\u0441\u043B\u0435 \u043D\u0430\u0441\u0442\u0443\u043F\u043B\u0435\u043D\u0438\u044F \u0441\u043E\u0431\u044B\u0442\u0438\u044F load (\u0438 \u0435\u0441\u043B\u0438 \u043D\u0435 \u043F\u0440\u043E\u0438\u0437\u043E\u0439\u0434\u0451\u0442 \u043E\u0448\u0438\u0431\u043A\u0430), \u0442\u0430\u043A \u0447\u0442\u043E \u043C\u044B \u0441\u043E\u0445\u0440\u0430\u043D\u044F\u0435\u043C \u043E\u0442\u0432\u0435\u0442, \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0432\u043E\u0437\u0432\u0440\u0430\u0449\u0451\u043D\u043D\u044B\u0439 \u0441\u0435\u0440\u0432\u0435\u0440\u043E\u043C \u043E\u0431\u044A\u0435\u043A\u0442 JSON \u0432 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u043E\u0439 superHeroes , \u043A\u043E\u0442\u043E\u0440\u0443\u044E \u0437\u0430\u0442\u0435\u043C \u043F\u0435\u0440\u0435\u0434\u0430\u0451\u043C \u0434\u0432\u0443\u043C \u0440\u0430\u0437\u043B\u0438\u0447\u043D\u044B\u043C \u0444\u0443\u043D\u043A\u0446\u0438\u044F\u043C \u0434\u043B\u044F \u0434\u0430\u043B\u044C\u043D\u0435\u0439\u0448\u0435\u0439 \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u043A\u0438.

\u0423 \u043D\u0438\u0445 \u0435\u0441\u0442\u044C \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430 \u0431\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u0438 \u0442\u0430\u043C, \u0433\u0434\u0435 \u044D\u0442\u043E \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u043E

\u0424\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B WebAPI \u043F\u043E\u0434\u0432\u0435\u0440\u0436\u0435\u043D \u0442\u0435\u043C \u0436\u0435 \u0441\u043E\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F\u043C \u0431\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u0438 , \u0447\u0442\u043E \u0438 JavaScript \u0438\u043B\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0432\u0435\u0431-\u0442\u0435\u0445\u043D\u043E\u043B\u043E\u0433\u0438\u0438 (\u043D\u0430\u043F\u0440\u0438\u043C\u0435\u0440, same-origin policy), \u043D\u043E \u0438\u043D\u043E\u0433\u0434\u0430 \u043E\u043D\u0438 \u0441\u043E\u0434\u0435\u0440\u0436\u0430\u0442 \u0434\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u0435 \u043C\u0435\u0445\u0430\u043D\u0438\u0437\u043C\u044B \u0437\u0430\u0449\u0438\u0442\u044B. \u041A \u043F\u0440\u0438\u043C\u0435\u0440\u0443, \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 \u0438\u0437 \u043D\u0430\u0438\u0431\u043E\u043B\u0435\u0435 \u0441\u043E\u0432\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 WebAPI \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0442\u043E\u043B\u044C\u043A\u043E \u0441\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430\u043C\u0438, \u043E\u0431\u0441\u043B\u0443\u0436\u0438\u0432\u0430\u0435\u043C\u044B\u043C\u0438 \u0447\u0435\u0440\u0435\u0437 HTTPS \u0432 \u0441\u0432\u044F\u0437\u0438 \u0441 \u043F\u0435\u0440\u0435\u0434\u0430\u0447\u0435\u0439 \u043A\u043E\u043D\u0444\u0438\u0434\u0435\u043D\u0446\u0438\u0430\u043B\u044C\u043D\u044B\u0445 \u0434\u0430\u043D\u043D\u044B\u0445 (\u043F\u0440\u0438\u043C\u0435\u0440\u044B: Service Workers \u0438 Push).

\u041A \u0442\u043E\u043C\u0443 \u0436\u0435, \u043D\u0435\u043A\u043E\u0442\u043E\u0440\u044B\u0435 WebAPI \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u044E\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043E\u0442 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u044F, \u043A\u0430\u043A \u0442\u043E\u043B\u044C\u043A\u043E \u043A \u043D\u0438\u043C \u043F\u0440\u043E\u0438\u0441\u0445\u043E\u0434\u0438\u0442 \u0432\u044B\u0437\u043E\u0432 \u0432 \u043A\u043E\u0434\u0435. \u0412 \u043A\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043F\u0440\u0438\u043C\u0435\u0440\u0430, \u0432\u044B, \u0432\u043E\u0437\u043C\u043E\u0436\u043D\u043E, \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u043B\u0438 \u0442\u0430\u043A\u043E\u0435 \u0434\u0438\u0430\u043B\u043E\u0433\u043E\u0432\u043E\u0435 \u043E\u043A\u043D\u043E \u043F\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0435 \u043D\u0430\u0448\u0435\u0433\u043E \u043F\u0440\u0438\u043C\u0435\u0440\u0430 Geolocation \u0440\u0430\u043D\u0435\u0435:

Notifications API \u0437\u0430\u043F\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u0435 \u043F\u043E\u0434\u043E\u0431\u043D\u044B\u043C \u043E\u0431\u0440\u0430\u0437\u043E\u043C:

\u0417\u0430\u043F\u0440\u043E\u0441\u044B \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043D\u0438\u0439 \u043D\u0435\u043E\u0431\u0445\u043E\u0434\u0438\u043C\u044B \u0434\u043B\u044F \u043E\u0431\u0435\u0441\u043F\u0435\u0447\u0435\u043D\u0438\u044F \u0431\u0435\u0437\u043E\u043F\u0430\u0441\u043D\u043E\u0441\u0442\u0438 \u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u0435\u043B\u0435\u0439 \u2014 \u043D\u0435 \u0431\u0443\u0434\u044C \u0438\u0445, \u0441\u0430\u0439\u0442\u044B \u043C\u043E\u0433\u043B\u0438 \u0431\u044B \u0441\u043A\u0440\u044B\u0442\u043D\u043E \u043E\u0442\u0441\u043B\u0435\u0434\u0438\u0442\u044C \u0432\u0430\u0448\u0435 \u043C\u0435\u0441\u0442\u043E\u043F\u043E\u043B\u043E\u0436\u0435\u043D\u0438\u0435, \u043D\u0435 \u0441\u043E\u0437\u0434\u0430\u0432\u0430\u044F \u043C\u043D\u043E\u0436\u0435\u0441\u0442\u0432\u043E \u043D\u0430\u0434\u043E\u0435\u0434\u043B\u0438\u0432\u044B\u0445 \u0443\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u0439.

\u0418\u0442\u043E\u0433\u0438

\u041D\u0430 \u0434\u0430\u043D\u043D\u043E\u043C \u044D\u0442\u0430\u043F\u0435, \u0443 \u0432\u0430\u0441 \u0434\u043E\u043B\u0436\u043D\u043E \u0441\u0444\u043E\u0440\u043C\u0438\u0440\u043E\u0432\u0430\u0442\u044C\u0441\u044F \u043F\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043B\u0435\u043D\u0438\u0435 \u043E \u0442\u043E\u043C, \u0447\u0442\u043E \u0442\u0430\u043A\u043E\u0435 API, \u043A\u0430\u043A \u043E\u043D\u0438 \u0440\u0430\u0431\u043E\u0442\u0430\u044E\u0442 \u0438 \u043A\u0430\u043A \u0432\u044B \u043C\u043E\u0436\u0435\u0442\u0435 \u043F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C \u0438\u0445 \u0432 \u0441\u0432\u043E\u0451\u043C JavaScript \u043A\u043E\u0434\u0435. \u0412\u0430\u043C \u043D\u0430\u0432\u0435\u0440\u043D\u044F\u043A\u0430 \u043D\u0435 \u0442\u0435\u0440\u043F\u0438\u0442\u0441\u044F \u043D\u0430\u0447\u0430\u0442\u044C \u0434\u0435\u043B\u0430\u0442\u044C \u043F\u043E-\u043D\u0430\u0441\u0442\u043E\u044F\u0449\u0435\u043C\u0443 \u0438\u043D\u0442\u0435\u0440\u0435\u0441\u043D\u044B\u0435 \u0432\u0435\u0449\u0438 \u0441 \u043A\u043E\u043D\u043A\u0440\u0435\u0442\u043D\u044B\u043C\u0438 API, \u0442\u0430\u043A \u0432\u043F\u0435\u0440\u0451\u0434! \u0412 \u0441\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u0440\u0430\u0437 \u043C\u044B \u0440\u0430\u0441\u0441\u043C\u043E\u0442\u0440\u0438\u043C \u0440\u0430\u0431\u043E\u0442\u0443 \u0441 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u043C \u0441 \u043F\u043E\u043C\u043E\u0449\u044C\u044E Document Object Model (DOM).

Национальная библиотека им. Н. Э. Баумана
Bauman National Library

Персональные инструменты

API (Application Programming Interface)

API (англ. Application Programming Interface ) — это набор определений, протоколов и инструментов для разработки ПО и приложений. API-интерфейс разрабатывается для упрощения создания программ, путем предоставления всех необходимых функциональных блоков. API может быть разработано для web систем, ОС и баз данных, предоставляя среду для разработки приложений используя конкретный язык программирования. Например, программист, который разрабатывает приложения для Android может использовать Android API для взаимодействия с аппаратной частью.

Содержание

API в процедурных языках программирования

В большинстве процедурных языков API определяет набор функций, которые выполняют определенные задачи или имеют доступ к конкретному компоненту программного обеспечения. К примеру, math API в UNIX системах является спецификацией, которая описывает как использовать функции описанные в библиотеке math. UNIX команда man 3 sqrt представляет сигнатуру функции квадратного корня в виде:

В этом случае API интерфейс может быть интерпретирован как коллекция файлов включения, используемых программой, написанных на языке C. Также другие языки имеют процедурные библиотеки. К примеру, у Pearl есть специальный API для тех же математических задач со встроенной документацией, которая доступна через утилиту pearldoc:

API в объектно-ориентированных языках

В этой простейшей форме API объекта представляет из себя описание, как данный объект функционирует в данном объектно-ориентированном языке. Обычно представляется в виде набора классов со связанными списками методов. Например, в Java, если класс Scanner используется, необходимо импортировать библиотеку java.util.Scanner . Объект типа Scanner может быть использован, при помощи вызова одного из методов класса.

В примере ниже методы nextLine() и close() — это части API для класса Scanner , они также описаны в документации:

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

Web API

Используется в веб-разработке, как правило, определенный набор HTTP-запросов, а также определение структуры HTTP-ответов, для выражения которых используют XML или JSON форматы. Web API является практически синонимом для веб-службы, хотя в последнее время за счет тенденции Web 2.0 осуществлен переход от SOAP к REST типу коммуникации. Веб-интерфейсы, обеспечивающие сочетание нескольких сервисов в новых приложениях, известны как гибридные.

Web для распространения контента

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

Реализация

Стандарт POSIX определяет API, который позволяет написать большое количество вычислительных функций, которые смогут оперировать на множестве разных систем (Mac OS X, BSD). С другой стороны, совместимый API позволяет скомпилированным объектам кода функционировать без изменений в системе, которая реализует данный API. Это выгодно как для разработчика ОС, так и для пользователей, хотя это и требует различных библиотек реализующих необходимое API.

Илон Маск рекомендует:  Что такое код gmp_init
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL