|
|
@@ -235,3 +235,49 @@ $("#addButton").click(function(){
|
|
|
задач, с которыми сталкивается разработчик, существуют еще множество сервисов, которые хранят свои данные на *других серверах*, однако
|
|
|
вы их можете использовать в своем **JS**-коде. Например, вы можете использовать Карты Google на своем сайте, не храня терабайты картинок земной
|
|
|
поверхности на своих серверах. Документация по сервисам Google достаточно хорошо написана и почти полностью переведена на русский.
|
|
|
+
|
|
|
+### API
|
|
|
+
|
|
|
+ **API** (Application Programmin Interface) - общий термин, которым называют те или иные продуманные способы взаимодействия с библиотеками. Например,
|
|
|
+ набор функций **jQuery** - это **API**. **API** можно подразделить на сетевые и локальные. Например [API Google Карт](https://developers.google.com/maps/?hl=ru)
|
|
|
+ так и называется. Естественно задачи постройки маршрутов, отображения поверхности Земли и прочие выполняются за счет ресурсов
|
|
|
+ серверов Google, так что эти **API** являются *сетевыми*. Хотя изнутри **JS**-кода это не всегда заметно.
|
|
|
+
|
|
|
+### Сетевые возможности **JS**
|
|
|
+
|
|
|
+ Так как браузер - изначально программа для сетевого взаимодействия, то **JS** обладает богатыми сетевыми возможностями. Рассмотрим их:
|
|
|
+ - Вы можете создать HTML-элемент со ссылкой. Будь то `a` для пользователя или `img` для подгрузки картинки;
|
|
|
+ - Вы можете сделать **AJAX**-запрос (Asynchronous Javascript And XML), который равносилен обычному запросу браузера к серверу, как посещение
|
|
|
+ веб-страницы или подгрузка картинки в этой веб-странице; однако AJAX-запрос выполняется когда угодно и незаметно для пользователя;
|
|
|
+ - Вы можете использовать **Web-сокеты**, это более низкоуровневая возможность для поддержания постоянного соединения с сервером и обменом данными.
|
|
|
+ В случае с AJAX **JS** код является инициатором запроса и получает ответ; в случае с Web-сокет соединение может работать длительное время, и
|
|
|
+ сервер получает возможность отправить данные в любой момент; а **JS** получит событие о приходе данных и сможет их обработать по приходу, без
|
|
|
+ опроса сервера.
|
|
|
+ - **WebRTC** (Web Real Time Communications) - технология общения между браузерами *напрямую*, используя сервер только для изначальной установки
|
|
|
+ соединения; обмен данными в дальнейшем идет *напрямую*, без использования ресурсов сервера и более конфиденциально. Этот способ позволяет
|
|
|
+ передавать видео, голосовые и другие данные. Таким образом можно сделать подобие Skype или Viber с голосовыми или видеозвонками используя
|
|
|
+ только браузер и **JS**
|
|
|
+
|
|
|
+ **Например**, ничего не мешает нам найти и использовать в своем коде список городов по странам. Получим эти данные, используя **AJAX**.
|
|
|
+ [JSON](https://raw.githubusercontent.com/David-Haim/CountriesToCitiesJSON/master/countriesToCities.json)
|
|
|
+
|
|
|
+## Canvas и События
|
|
|
+
|
|
|
+ **Canvas** - возможность HTML5, которая позволяет выделить *блочный элемент* для рисования любого вида 2D графики на нём.
|
|
|
+ У вас есть возможность рисовать по-пиксельно, задавая цвет каждой точке; а так же рисовать текст, линии, круги и другие графические примитивы.
|
|
|
+ [пример](https://repl.it/DyeE/1)
|
|
|
+
|
|
|
+## События
|
|
|
+
|
|
|
+ События - те или иные действия пользователя (нажатия кнопок, операции с мышью или на тачскрине), или внутри ОС, которые известны ОС и предполагают
|
|
|
+ реакцию кода на них (отрисовку нового символа, действия при клике и так далее). Код, который обрабатывает событие, называется **обработчиком события**
|
|
|
+ и обычно реализуется с помощью **функций обратного вызова**. См. jQuery примеры и обработку событий без jQuery в примере выше (Canvas)
|
|
|
+
|
|
|
+## Выбор проекта. ДЗ.
|
|
|
+
|
|
|
+ - Придумайте несложную, но реалистичную идею
|
|
|
+ - Прогуглите по библиотекам, которые, как вам кажется, помогут вам в реализации проекта
|
|
|
+ - Подготовьте список библиотек и ссылок на их сайты, обзоры и прочую информацию.
|
|
|
+
|
|
|
+
|
|
|
+
|
me@helium