Web виджеты. Пишем встраиваемый виджет на нативном javascript и php. Включайтесь в нужный момент

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

Как правило, все CMS позволяют разместить на сайте информеры.

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

Обычно, информеры предоставляются бесплатно в обмен на установку обратной ссылки. Ссылка является частью информера.

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

Правила установки информера:

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

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

Не перегружайте свой сайт информерами — есть опасность расфокусировать внимание посетителей, отвлечь от основной информации. Переизбыток информеров чреват торможением загрузки основного контента.

Виды информеров:

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

Информеры и виджеты курса валют

Информер курса валют будет полезен компаниям, у которых стоимость услуг или товаров привязана к курсу. Такие виджеты могут предоставить информацию о котировках на биржах, колебаниях цен. Валютные информеры можно брать на сайте investing.com , ExDex или forex-informers .

Информеры и виджеты погоды

Информер погоды на сайт следует размещать компаниям, которые предоставляют услуги по туризму, рыбалке, охоте и размещению гостей, например турбазы, гостевые дома и гостиницы. Возможно, такие информеры подойдут и магазинам, которые продают сезонные вещи, например оборудование для зимних видов спорта. Можно воспользоваться сервисами Gismeteo или Яндекс.Погода . Gismeteo. Они развернутые и краткие. Дают информацию о текущей погоде и прогноз на несколько дней.

Информеры и виджеты новостей

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

Информер Яндекс.Расписания

Информеры и виджеты календаря

Информер календарь для сайта будет удобен посетителям сайта, если им нужно видеть какие-то даты, например, начала тура, экскурсии или начало/конец приема каких-либо документов. Очень удобный сервис календаря предлагает Google. они описывают инструкцию по размещению информера календарь на сайте.Так же есть следующие сервисы: chasikov.net.ru , calendar.yuretz.ru .

Информеры счетчиков посещаемости

У счетчиков посещаемости так же имеются информеры, на них отражены данные о посещаемости сайта, обычно их располагают в боковых колонках сайта или в подвале.

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

Информеры и виджеты социальных сетей

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

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

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

Разберемся, что такое виджеты, и как ими пользоваться. С формальной точки зрения, виджет – это небольшое приложение, заточенное под реализацию какой-нибудь полезной задачи.Разобраться, что означает слово «виджет» не совсем просто, потому что долгое время так называли различные гаджеты, но за последние 20 лет появились специальные приложения, написанные на HTML или JavaScript, и выполняющие определенную функцию.

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

Сегодня большинство виджетов применяется на операционной системе Android, в социальных сетях и практически всех браузерах Opera, Yandex, Chrome и т. д.

Классификация

По внешнему виду

Виджеты классифицируют по внешнему виду, функционалу и месту установки. По внешнему виду выделяют следующие виды этих программ:

1. Топперы, расположенные в верхней части экрана и выглядящие как полоска с полем и кнопкой. Выполняют информационную функцию, сообщая про акции и скидки, могут и применяться для сбора контактов.
2. Флор выполняет те же функции, что и топпер, но находится в нижней части экрана.
3. Всплывающие окна, перекрывающие страницу сайта. Их используют для сообщений о разного рода акциях или для предложений оставить контактные данные.
4. Ярлычки располагаются сбоку экрана и применяются для получения обратной связи от посетителей сайта.
5. Встраиваемые виджеты.

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

По месту встраивания

Web-виджеты

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

• интерактивные – те, с которыми можно взаимодействовать;
• неинтерактивные, работающие автономно, вне зависимости от желания потребителя.

Более точное название второй разновидности - информер. Классический пример - это показ прогноза погоды или отображение изменений биржевых курсов валют.

Примером интерактивных виджетов служат виджеты социальных сетей и виджеты сообщений. Виджеты социальных сетей – это привычные всем кнопки с логотипами Facebook,

Сегодня под микроскопом очередной сервис с виджетами для сайта. Почему очередной? – Их стало даже слишком много, одних обратных звонков наберется штук 50 . Но мы не рассматриваем все подряд. Если подопытный попал в этот блог, значит в нем есть кое-что интересное.

Итак, сегодня сервис с виджетами MoClients . На момент написания статьи, внутри 6 гибко-настраиваемых инструментов. Ребята позиционируются как бесплатные виджеты для сайта, но это правда лишь отчасти. Бесплатно можно получать с виджета всего 10 заявок в месяц. Впрочем, этого достаточно для тестирования. +В конце вас ждет промокод на дополнительную сумму для тестов.

Видео-обзор виджетов MoClients:

Список виджетов

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

• Онлайн калькулятор. Этому виджету уделено особое внимание в статье. Дальше мы рассмотрим пример редактирования и варианты использования.
  Обычный калькулятор, когда вы вводите какие-то числа (например, при расчете кредита) и в итоге выдается сухая цифра. Она может показаться слишком большой, и клиент уйдет. Если вас интересуют такие калькуляторы, здесь можно посмотреть обзор на все сервисы . В МоКлиентс другая модель. Вы заполняете форму калькулятора по шагам, и в конце вас просят ввести email или телефон, с помощью которого с вами связывается менеджер. Это contact-wall: ты потратил время на заполнение параметров и хочешь получить результат. Конверсия в заполненные формы с калькулятора намного выше, чем с других стандартных форм заявки. С клиентом связывается менеджер, дополняет стоимость ценностями, обрабатывает возражения. В итоге, цифры стоимости обретают другой, наполненный смысл.
• Форма заказа. Обычная форма, которая собирает контактные данные людей и отправляет их вам.
• Ссылка на нужную страницу. В данный виджет можно поставить ссылку на важную страницу.
• Всплывающее окно акции. При уходе с сайта или по истечению определенного времени (параметры настраиваются в админке) всплывает окошко, вы вводите email и получаете скидку.
• Каталог фотографии продукции. Виджет для размещения портфолио, каталог продукции и т.д. с возможностью оставить заявку.
• Подписка на рассылку . Стандартный виджет, позволяющий собирать E-mail базу для дальнейших рассылок.

Пример работы калькулятора

Самый сок – это калькулятор. Давайте посмотрим, как он работает на примере вот такого сайта:

Справа вы увидите блок с двумя пунктами:

Админ-панель МоКлиентс:

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

Здесь же происходит создание нового виджета.

Добавление виджета

После нажатия кнопки «Добавить виджет», попадаем на страницу для выбора типа виджета, который хотим установить. Пока мы писали статью, добавили седьмой виджет от ВКонтакте.

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

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

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

Сохраняем настройки, и теперь в боковую панель подключенного сайта будет добавлен калькулятор.

Установка Моклиентс на сайт

Чтобы все добавленные виджеты появились и заработали на сайте, нужно установить код. Это можно сделать в самом низу вкладки меню «Виджеты» или во вкладке «Установка на сайт». Есть три варианта установки:

• Заказать бесплатную установку
• Отправить инструкции на e-mail
• Установить самостоятельно

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

В настройках сайта можно добавить е-mail для уведомлений, телефон для SMS и пр. Добавить сайт вам предложат при регистрации на сервисе.

Еще примеры

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

Контактная форма в виде виджета «Задайте нам вопрос».

Есть базовая бесплатная версия, но мы не берем ее в расчет, на ней ограничение: 10 заявок в месяц. Тестировать можно первые две недели и на полном тарифе, при этом без ограничений получать уведомления о новых заявках как на e-mail, так и посредством sms сообщений, и не заботится об ограничениях на количество заявок.

Промокод Moclients

При регистрации по этому промокоду на счету будет 800 рублей для тестов. Срок действия до 13 ноября!

Мой отзыв о Moclients

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

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

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

С помощью Pollcode вы можете создавать собственные опросы, даже не регистрируясь, но если вам понадобятся некоторые специальные функции опросника, то процесс регистрации займет не более нескольких секунд. Сервис позволяет вам отредактировать внешний вид (есть возможность выбора нужного шрифта, цветов и дизайна) так, чтобы он соответствовал шаблону вашего веб-сайта.
Сервисом можно пользоваться абсолютно бесплатно, но условия использования заключается в том, что в результатах вашего опроса будут показаны рекламные объявления (видны только после того, как кто-то проголосует или просмотрит результаты опроса). На самом веб-сайте не будет размещено ни единого объявления, только лишь обратная ссылка на to Pollcode.com.

ProProfs представляет возможность создания простеньких опросников. Бесплатная версия позволяет создать бесконечное число опросов, но по прошествии 7 дней на них появятся рекламные объявления. С помощью данного сервиса, вы без труда сможете создавать и редактировать опросы, а также наполнять их уникальными функциями. Эти функции помогут вам избежать накрутки рейтинга (проверка может быть осуществлена даже на основе определения географического положения каждого голосующего), а также у вас будет возможность размещать изображения или видео-файлы, и интегрировать опрос с системами MySpace, Facebook и другими социальными сетями.

Snap Poll предлагает возможность простого и быстрого создания опросов. На установку вы потратите не больше пары минут. У вас есть возможность редактировать цвет, разметку и внешний вид опроса так, чтобы он соответствовал шаблону вашего веб-сайта. От вас не требуется какой-либо регистрации или денежных взносов – приложение абсолютно бесплатно. Единственный аспект двустороннего соглашения подразумевает под собой лишь то, что вы не будете пытаться избежать отображения рекламных объявлений.

Бесплатный (требуется обратная ссылка) сервис Modpoll уже использовался для создания опросников на таких сайтах, как marieclaire.com, facebook.com, huffingtonpost.com, ning.com и blogger.com. Вы можете создавать столько опросов, сколько вам потребуется, а затем добавлять их в свой блог или на страницы собственного веб-сайта. Также есть возможность публикации опроса в популярных социальных сетях типа Twitter, Facebook, MySpace, FriendFeed, Digg, Gmail, AOL Mail, Yahoo Mail, Hotmail, Blogger, Tumblr, TypePad, LiveJournal, AIM, Yahoo Messenger и многих других.

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

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

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

QuestionForm представляет собой мощный инструмент по созданию опросов с интерфейсом по типу рабочего стола. Вы можете просто перетаскивать вопросы для их создания или редактирования. Сервис также представляет множество различных функций, типа: отслеживание повторных ответов посредством cookies, оповещение в режиме реального времени, экспорт данных в Microsoft Excel, XML или любой другой тип документов (CSV или TSV).
QuestionForm является платным, но у вас есть возможность создания двух бесплатных опросов.

09.
PollDaddy – это, наверное, самый мощный и профессиональный сервис по созданию опросов, из представленных в нашей подборке. Он-лайн сервис по созданию опросов собирает всю вашу информацию и превращает ее в полноценную систему отчетов, что позволит вам сделать более продуманный опросник. Вы также можете использовать собственные шаблоны оформления и CSS, менять языки, экспортировать данные в XML, CSV и получать результаты посредством электронной почты или RSS, а также есть возможность выбрать из 11 типов вопросов.
PollDaddy также является платным сервисом с бесплатными вариациями, среди которых возможность создания опросов с 10 вариантами ответами, 100 голосов на каждый опрос, а также обратная ссылка на PollDaddy.

май 21 , 2016

Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода - и у тебя уже развернулся блок с комментариями. Еще 2 строчки - и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.

Зачем нужны виджеты?

Для этой цели хорошо подходят iframe-ы. Это фактически отдельные html-страницы, которые встраиваются в другие страницы, при этом не имея доступа к своему "родителю". То есть в iframe можно встроить наше веб-приложение, которое будет спокойно выполнять свою работу, не вмешиваясь в основной сайт. А что именно будет делать Ваш виджет, строить систему комментариев на странице, показывать прикольную игрушку или рисовать интерактивный рекламный баннер - дело исключительно Вашего вкуса и фантазии.

В этой статье на игрушку мы замахиваться не будем, а рассмотрим, как создать встраиваемый виджет для определения погоды. Конечно, для этого есть много различных погодных сервисов, но нам неинтересно воспользоваться готовым решением. Хочется создать простенький виджет своими руками, чтобы понять, как это вообще работает и в дальнейшем применить знания уже для каких-то полезных вещей. Заодно попутно освежим знания в нативном javascript и php.

Что будем делать?

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

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

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

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

Здесь нужно небольшое уточнение: смысл виджетов в том, чтобы предоставлять уникальный, удобный, интересный функционал. Мы не даем в нашем примере какую-то особенную информацию. Погоду можно узнать где угодно. Но в познавательных целях, так как мы сами пока ничего не умеем делать, возьмем данные по погоде с сервиса Прогноз погоды в России и СНГ . Они любезно предоставляют бесплатный api, коим мы и воспользуемся.

По технологиям

Тоже ничего сложного. Про iframe я уже проговорился. javascript-код будем писать на vanillaJS, без единой дополнительной библиотеки. Даже без jQuery для манипуляции DOM. Наша цель еще состоит и в том, чтобы полученный виджет был максимально легковесным, и ни к чему тащить в браузер пользователя мешок дополнительных библиотек для облегчения своей работы. Поэтому вспомним, как работать с DOM и отправлять ajax-запросы на нативном javascript, и наши клиенты скажут нам спасибо. Серверная часть - пара десятков строк кода на php.

Пишем код. Создаем базовую страницу

Страницу, на которой будет располагаться наш будущий виджет. Напишем там пару строчек текста о том, какие мы классные в плане умения прогнозировать погоду на завтра. Это будет файл index.html - обычная html-страничка. В секции head напишем так:

Webdevkin. Демонстрация виджета Погода

В секции body вот так:

Что здесь из интересного? В файле css/style.css будем хранить стили для страницы (не для виджета!). И в нужном месте создаем iframe..html. Мы убираем у него границу и возможность скроллинга и задаем руками размеры виджета. Конечно, интереснее создать адаптивный, но до этого доберемся позже.

Стили для страницы, без особых изысков:

Body { font-family: Arial; font-size: 14px; } .wrapper { width: 960px; margin: 0 auto; } .weather-widget-container { margin: 30px 0; }

Заготовка для виджета

Виджет представляет из себя обычный html-документ. В чем отличие? Первое - мы не будем заморачиваться с лишними мета-тегами, потому как поисковикам наш виджет не нужен. И второе - и стили, и js-код мы напишем прямо в коде html-страницы. Нам это нужно, чтобы сделать загрузку виджета максимально быстрой, а уменьшение числа запросов к веб-серверу в этом нам поможет. Все, что нужно, мы загрузим одним файлом.

В секции head у нас будет такой код:

В секции body:

Рассмотрим эти блоки подробнее.

Разметка для виджета

Температура на завтра °C

Здесь обычная форма. Сверху небольшая панель, где мы будем выводить температуру. Дальше select с выбором города. Значения value у городов взяты с сервиса meteoservice.ru, где именно, расскажу позже, в разделе, где будем непосредственно получать данные о погоде. И в конце кнопка Обновить. Верстка у нас будет на классах, айдишники проставлены тем элементам, доступ к которым нужен из кода javascript. Префикс wbd- (от webdevkin) используется для удобства, чтобы не путать разметки виджета и основной страницы.

Стили для виджета

html, body, body * { margin: 0; padding: 0; } .wbd-widget, .wbd-widget * { box-sizing: border-box; font-family: Ubuntu; } .wbd-widget { border: solid 1px #333; padding: 20px; color: black; } .wbd-widget__info { color: steelblue; font-size: 16px; text-align: center; } .wbd-widget__form-label { display: block; line-height: 30px; }

Стили для виджета максимально просты - Вы можете написать их под себя, как угодно. Не забываем, что стили ставим прямо в html-файл виджета в раздел head - style.

javascript-код виджета.

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

Var WeatherWidget = (function() { // Для выполнения ajax-запросов var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Конструктор виджета function Widget() { this..php"; this.ui = { updateBtn: null, citySelect: null, temperatureSpan: null }; this.init(); } // Обновление данных о погоде Widget.prototype._updateData = function(e) { // Отправка ajax-запроса на сервер } // Инициализация компонентов ui Widget.prototype._initUI = function() { this.ui.updateBtn = document.getElementById("wbd-widget-update"); this.ui.citySelect = document.getElementById("wbd-widget-city"); this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature"); } // Привязывание событий Widget.prototype._bindHandlers = function() { this.ui.updateBtn.addEventListener("click", Widget.prototype._updateData.bind(this)); } // Инициализация виджета Widget.prototype.init = function() { this._initUI(); this._bindHandlers(); this._updateData(); } // Возвращаем класс виджета return Widget; })(); new WeatherWidget();

Что здесь происходит? Мы создаем модуль на основе замыкания WeatherWidget, внутри оного пишем класс Widget, в прототип которого закидываем нужные методы и возвращаем его из замыкания. Последней строкой мы создаем экземпляр виджета - new WeatherWidget();

Переменная XHR нужна для выполнения ajax-запросов. В конструкторе инициализируем свойство url, по которому будем получать данные о погоде. Также есть объект ui, в котором хранятся 3 поля - те самые элементы DOM, к которым нам нужен доступ из js-кода. Инициализируются они позже, в методе _initUI(). Метод init() вызывает инициализацию ui, привязку событий и обновление данных с сервера (мы же хотим, чтобы при отрисовке виджета пользователь сразу видел погоду без нажатия на Обновить). В _bindHandlers привязывается метод _updateData к клику на кнопку Обновить. Это единственная "интерактивная" часть нашего виджета.

Обратите внимание на конструкцию Widget.prototype._updateData.bind(this). Здесь явным образом привязываем контекст - нам нужно, чтобы в методе _updateData this всегда указывал на экземпляр класса Widget. Сейчас будет видно, зачем - рассмотрим код метода _updateData

Получение данных с сервера, метод _updateData

// Обновление данных о погоде Widget.prototype._updateData = function(e) { e && e.preventDefault(); var xhr = new XHR(), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan, data = "city=" + city, resp; xhr.open("POST", this.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); xhr.onreadystatechange = function() { if (this.readyState != 4) return; if (this.status != 200) { console.log("Request error"); return; } resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature; } }

Обращаю внимание, что в параметры метода передаем свойство e (event). Оно нужно, чтобы сделать preventDefault в самом начале, дабы не перезагрузить наш виджет (иначе сработает submit формы).
Но делаем мы это такой строчкой
e && e.preventDefault();
Эта дополнительная проверка на наличие параметра e нужна, потому что когда мы вызываем this._updateData(), параметр e будет равен undefined, и соответственно e.preventDefault() выкинет исключение.

После этого мы создаем нужные переменные, объект для ajax-запроса, выбранный город и DOM-элемент, в который выводим значение температуры, полученной с сервера. data будет отправляться в ajax-запросе, resp - это ответ от сервера. Дальше мы открываем соединение и отправляем данные на сервер. Дожидаемся ответа 200 от сервера и выводим полученную температуру в span. Условимся, что от сервера приходит json-строка в формате {"code": "success", "temperature": "диапазон температур"}. Традиционно обработку ошибок оставлю на Вашу совесть, все делают по-разному. И наконец, нам осталось узнать, как получить данные о погоде с нашего сервера.

Как узнавать погоду?

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

Пишем php-код для получения информации о погоде

Как брать данные, уже понятно, алгоритм прост: вытаскиваем из $_POST параметр city - выбранный город, формируем строку вида http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml. Это путь к файлу с погодой. Отправляем на него get-запрос curl-ом. Полученный ответ парсим и вытаскиваем из него нужные параметры: минимальная и максимальная температуры. Полученные числа отдаем в json-объекте обратно в браузер.

$cityId = (int)$_POST["city"]; $url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml"; $temperature = ""; if ($curl = curl_init()) { curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string($result); $object = $xml->REPORT->TOWN->FORECAST->TEMPERATURE; $temperature = $object["min"] . "-" . $object["max"]; } echo json_encode(array("code" => "success", "temperature" => $temperature));

Поясню про simplexml_load_string - эта функция создает xml-объект, который мы уже можем парсить. А создается объект из строки xml, которую мы получаем от сервиса погоды.
REPORT->TOWN->FORECAST->TEMPERATURE - это путь по узлам xml, чтобы добраться до нужных значений температуры. Пройдите по ссылке выше (московская погода) и наглядно увидите эти пути.
Если что-то непонятно, спрашивайте в комментариях.

Итого

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

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