Цели:

  • Введение в JavaScript, Ajax, JSON.
  • Знакомство с объектами и методами.
  • Работа с «реальными» API и библиотеками.

Литература:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Пришло время последнего в этом курсе практического задания! Ваша цель — создать Mashup («мэшап») — веб-приложение, которое интегрирует карты Google с новостями Google и базой данных MySQL, содержащей тысячи почтовых индексов, координат GPS, и многое другое.

Вот версия такого приложения, созданная нашей командой: http://mashup.cs50.net/

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

Подготовка к последней практической работе - 1

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

Подготовка к последней практической работе - 2

Вы можете заметить, что некоторые маркеры (и надписи) перекрываются, или размещены в неправильных координатах. Географическая база данных GeoNames несовершенна, поэтому координаты некоторых мест указаны с погрешностями. Так, Восточный Бостон вовсе не рядом с бухтой Бек, а Редвиль не у Бостонской гавани. Не беспокойтесь, если увидите такие же ошибки в своих проектах, ведь источником проблемы являются сами данные!

Google Maps

Скорее всего, вы хотя бы раз в своей жизни пользовались Google Maps. Заходите на https://www.google.com/maps и введите 42.374490, -71.117185 в поле поиска наверху. По идее, вы окажетесь вблизи Гарварда.

Подготовка к последней практической работе - 3

Ну а если вам хочется «посетить» соседний Йель, введите координаты 41.3163284, -72.9245318.

Как видите, карты Google понимают координаты GPS (то есть широту и долготу). Теперь введите 28.410, -81.584. Возможно, вы мечтали здесь побывать? Вы можете увеличивать и уменьшать масштаб карты (колесом мышки или щелкнув по + и – в правом нижнем углу).

Оказывается, карты Google предлагают API, и с его помощью можно встроить карту Google в ваши собственные веб-приложения. Это то, что нам нужно! Так что — вперёд, ознакомьтесь с Google Maps Javascript API v3. Скорее всего, вам будет удобно переключиться на русский язык. Для этого прокрутите страничку, на которую вы перешли по ссылке выше вниз, и найдите внизу слева выбор языка.

Java-университет
Подготовка к последней практической работе - 4

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

Google News

Для реализации задания нам нужны какие-то новости. Если у вас есть аккаунт Google (например, Gmail), зайдите на https://news.google.com/ и щелкните кнопку с шестерней вверху справа. Должны появиться «Настройки новостей Google», а ниже — «Расширенный режим настроек». Щелкните по нему. Справа появится кнопка «Создать пользовательский раздел». Введите в это поле Cambridge, Massachusetts, (или ваш родной город) затем нажмите «Добавить». Вы окажетесь по адресу, представленному ссылкой:

https://news.google.com/news/section?pz=1&cf=all&geo=Cambridge,+Massachusetts&ned=us&redirect=true

Если у вас нет учетной записи Google, или просто что-то идёт не так, не беспокойтесь. Просто воспользуйтесь ссылкой, которую видите выше.

Подготовка к последней практической работе - 5

Выглядит так, будто введённые вами данные теперь являются значением HTTP-параметра geo, хотя есть и ряд других параметров. Вспомним, что знак + является одним из способов кодирования браузером пробела в URL. Другой способ — это %20. Поэкспериментируйте, удаляя по одной каждую пару других ключей-значений и амперсанды (например, сначала pz = 1 &, затем cf = all &, затем & redirect = true, нажимая Enter каждый раз после удаления, чтобы перезагрузить страницу через все короче адрес URL).

Обратите внимание! Возможно, вам придется оставить ключ & ned = us, чтобы увидеть новости для выбранной локации. Похоже, что для неамериканских пользователей, если этот ключ отсутствует, то Google News покажет локальные новости. Или перейдите по ссылке Go to the U.S. Edition, который расположен внизу главной страницы https://news.google.com.

В результате вы убедитесь, что Google все еще возвращает новости о Кембридже, даже если адрес будет таким:
https://news.google.com/news/section?geo=Cambridge,+Massachusetts&ned=us

Прекрасно! +1 за попытки и ошибки. А теперь изменим значение geo на, скажем, 02138 или 06511, и снова нажмем Enter. Вы окажетесь по одному из адресов ниже. Статьи могут измениться (поскольку в Кембридже и Нью-Хейвене более одного почтового индекса), но новости все еще о Кембридже и Нью-Хейвене.

https://news.google.com/news/section?geo=02138
https://news.google.com/news/section?geo=06511

Страница, которую вы рассматриваете, конечно же, написана на HTML. И все, что нам нужно, если взять в качестве указателя решение нашей команды, — список из названий статей и ссылок на них. Каким образом мы можем всё это «выцепить» без прочесывания HTML-кода страницы (безусловно, достаточно сложного)? Прокрутите страницу вниз и поищите RSS. Щелкните по ссылке. Вы окажетесь по одному из следующих адресов:

https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&geo=02138&output=rss
https://news.google.com/news?cf=all&hl=en&pz=1&ned=us&geo=06511&output=rss

Удалите все параметры, которые вам кажутся второстепенными для поставленной задачи (учтите, вы можете что-то и поломать!), оставив только, например, geo и output.

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

&ltrss version="2.0">
    &ltchannel>
        &lttitle>...</title>
        &ltdescription>...</description>
        &ltlink>...</link>
        &ltitem>
            &ltguid>...</guid>
            &lttitle>...</title>
            &ltlink>...</link>
            &ltdescription>...</description>
            &ltcategory>...</category>
            &ltpubDate>...</pubDate>
        </item>
        ...
    </channel>
</rss>

То есть, лента RSS содержит корневой элемент, который называется rss. Его дочерним элементом является channel. Внутри channel есть элементы с названиями title, description и link, за которыми следует один или несколько элементов с именем item, каждый из которых представляет собой статью (или сообщение блога, или аналогичный объект). В свою очередь, каждый item содержит элементы с названиями guid, title, link, description, category и pubDate. Конечно, между большинством этих открывающих и закрывающих тегов должны быть данные (например, настоящее название статьи).

Больше информации вы можете найти вот где: http://cyber.law.harvard.edu/rss/rss.html

В конечном счете, мы будем анализировать RSS-ленту из новостей Google с помощью PHP, а затем возвращать заголовки статей и ссылки в наше веб-приложение через Ajax в качестве JSON. Но об этом чуть позже.

jQuery

jQuery — это супер-популярная библиотека JavaScript, которая «значительно упрощает просмотр и манипуляцию документов HTML, обработку событий, анимацию и Ajax с помощью простого в использовании API, работающего в большинстве браузеров». Однако, по правде говоря, её нужно изучать. Прочитайте несколько разделов документации jQuery.

На русском можно почитать, например, здесь:

Документация jQuery — не самое простое чтиво для новичка. Скорее всего, вы обратитесь к Google и Stack Overflow.
Напоминаем, что символ $ обычно (хотя не всегда) является заменой глобального объекта, который по другому называется jQuery.

typeahead.js

Теперь познакомимся с демкой библиотеки Twitter typeahead.js, плагина jQuery, который добавляет поддержку автозаполнения текстовых полей HTML. В частности, рассмотрите Базовую (Basic) функциональность:

http://twitter.github.io/typeahead.js/examples/

А теперь просмотрите документацию этой библиотеки для версии 0.10.5, которая (сюрприз!) не столь удобна для использования, как бы нам того хотелось. Но опять же, не обращайте внимания на это.

https://gist.github.com/dmalan/8abe1025cfe5121614b8

Underscore

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

http://underscorejs.org/#template

Так же, как jQuery использует $ в качестве символа (потому что он так круто выглядит), Underscore использует _ в качестве своего символа. Например, _.template означает, в что Underscore есть метод (т.е. функция), которая называется template.