Пользователи, посещая всевозможные веб-ресурсы, часто встречают на них интересные нестандартные решения и хотят сделать подобное на своих сайтах. Чаще всего такие решения завязаны с использованием JavaScript.
В данной статье я расскажу вам о JavaScript - скриптовом языке, предназначенном для создания интерактивных веб-страниц, и о том, что можно делать с помощью JS. Мы рассмотрим примеры использования JavaScript и узнаем, чем он может быть нам полезен.
Что можно делать, используя JavaScript?Изменять страницу, писать на ней текст, добавлять и удалять теги, менять стили элементов.
Реагировать на события: скрипт может ждать, пока что-нибудь случится (клик/наведение мыши, окончание загрузки страницы) и реагировать на это выполнением функции.
Например, по наведению мыши на ссылку или картинку можно показывать всплывающую подсказку. По клику мыши можно переключать содержимое блока. По окончании загрузки страницы - показывать рекламное попап-окно. Можно изменять внешний вид страницы в зависимости от времени суток.
JavaScript. Быстрый старт
Выполнять запросы к серверу и загружать данные без перезагрузки страницы.
Например, если пользователь оставил комментарий на сайте или в гостевой книге, то этот комментарий сразу же отобразится без перезагрузки страницы. Так же можно закачивать файлы на сервер, показывая при этом в процентах ход выполнения загрузки.
Устанавливать и считывать cookie, валидировать данные, выводить сообщения и многое другое.
Например, при первом посещении сайта пользователю показывается попап-окно и устанавливается cookie. А при последующих посещениях этого ресурса попап-окно не показывается, потому что cookie уже установлены.
Также можно проверять корректность введенного e-mail, проверять на соответствие нужному формату введенный номер телефона и сразу выводить сообщение о правильности или неправильности введенных данных.
Применение JavaScript настолько широко и разнообразно, что примеров использования можно привести тысячи, и все равно список будет не полный, потому что каждый день пишутся новые скрипты. Уверен, что многие из приведенных ниже примеров вы встречали на различных сайтах. И все это реализовано с использованием JavaScript.
Конечно, галерея, представленная в примере, - не единственная. Подобных галерей, как и всего остального, можно было представить сотни. И я, чтобы не раздувать список до бесконечности, привел по одному примеру из наиболее популярных групп скриптов.
Что это дает нам?1. Удобная многоуровневая навигация
Использование JavaScript позволяет делать компактными многоуровневые меню, многоуровневую навигацию в side-bar-ах. Подпункты меню открываются либо по клику, либо по наведению мыши.
Во многих интернет-магазинах есть боковая выпадающая навигация. Рассмотрим для примера shop.by . Представьте, насколько бы она растянулась вниз, если бы подпункты не выпадали по наведению или по клику, а были видны все сразу!
2. Использование галерей и слайдеров дает нам возможность показать фотографии, картинки дополнительных видов товаров, удобно и компактно расположить портфолио фотографа.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Особенно галереи актуальны для детального просмотра товаров в интернет-магазинах, когда нужно показать различные виды товара. С их помощью мы можем показать пользователю в небольшом блоке сразу все изображения, предоставив для просмотра как маленькие изображения, так и увеличенные.
Сколько бы понадобилось места для галереи, представленной на картинке ниже?
3. Последнее время в боковых колонках сайтов отображается очень много виждетов. Это виджеты популярных социальных сетей, категорий, архивов записей, календарей, последних комментариев на блоге, популярных записей и много чего другого.
Нужно отметить, что на многих сайтах часть виджетов можно просто удалить, потому что никакого смысла от них нет, а место они занимают.
Но что делать, если все-таки нужно компактно вместить много виждетов?
Тут на помощь приходит решение JavaScript с «табами».
С их помощью можно хорошо вместить все виджеты в боковых колонках сайта. Для лучшего восприятия можно группировать виджеты в «табы».
Например, в один «таб» можно поместить виджеты социальных сетей, во второй - категории и архивы и т.д. Это позволит сэкономить место и сделает сайт более удобным для использования.
4. Используя JavaScript, можно также существенно улучшить страницу контактов для вашего сайта или сайтов ваших клиентов.
встроить подсказки в поля форм;
проверять вводимые в поля форм данные и выводить сообщения об ошибках;
отправлять данные формы без перезагрузки страницы;
разместить карту с маршрутом.
5. Для тех, кто размещает на сайте табличные данные, очень полезным будет использование сортировки данных в таблице.
6. Тем, кто размещает на сайте какую-либо статистику в виде графиков и диаграмм, очень пригодится возможность создавать на JavaScript интерактивных диаграмм и графиков.
Также, используя JavaScript, можно делать всевозможные эффекты на сайте - такие как плавное выскальзывание элементов, их перемещение, постепенное появление и исчезновение и все то, на что хватит вашей фантазии.
Все это может сделать сайт более удобным для посетителей, более интерактивным, более технологичным.
ЗаключениеКак видим, область применения JavaScript очень широка. Это и галереи, и слайдеры, и табы, и всевозможные интерактивные элементы, и карты, и графики, и работа с формами и многое-многое другое.
Я думаю, что каждый для себя может найти полезное применение JavaScript и использовать на своих сайтах или сайтах своих клиентов.
Надеюсь, статья вам понравилась, и вы узнали из нее о новых возможностях, которые можно реализовать, благодаря JS.
А вы используете JavaScript на своих сайтах? Какие у вас основные трудности при использовании JavaScript?
Расскажите об этом в комментариях к статье.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Современный интернет немыслим без скриптов. Учимся писать на JavaScript.
Если бы для интернета писали Библию, она начиналась бы так:
Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.
Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML . Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS . Они выполняются сразу после загрузки страницы в браузер.
Даже сам язык в первое время назывался LiveScript . Потом его переименовали в JavaScript , потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript - совершенно независимый язык программирования со своей четкой спецификацией ECMAScript .
Формально JavaScript является торговой маркой Oracle, а этот язык - «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.
Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML , но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах « » и « ».
Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.
Нас пока интересуют только браузеры и HTML-странички.
Как сделать JavaScript ? Написать элементарный скрипт не сложнее, чем простую HTML -страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML -документа. Самые простые вещи на JavaScript делаются действительно просто.
Как написать JavaScriptДля примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.
WScript. echo ("Привет, Skillbox! ")
Пишем этот текст в «Блокноте» , затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.
Аналогичный скрипт можно записать прямо в коде страницы HTML между тегами и . Там уже можно использовать обычные методы JavaScript, а не метод echo специфического объекта WScript . Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.
alert()Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!» . То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows .
Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML . Например, skillbox.htm .
alert ("Привет, Skillbox
")
Результат:
В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x) , где x вычисляется отдельно.
confirm()Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками - «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true , либо false . Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.
Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.
confirm
("Привет, Skillbox
")
Результат:
Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false .
Синтаксис здесь такой:
prompt (сообщение, значение_поля_ввода_данных )
Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.
prompt ("Передай привет Skillbox
", "Привет
")
Результат:
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы (Технология AJAX ), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML -элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Полезные инструменты Консоль разработчикаВо всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12 , в Safari - Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.
Консоль разработчика в Chrome.
Редакторы кодаВ дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE - это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.
Ресурс Creative Bloq опубликовал материал, в котором его авторы поделились с читателями лучшими, на их взгляд, примерами использования JavaScript для создания сайтов. ЦП выбрал 30 самых интересных ресурсов.
1. Портфолио Майка КусаПортфолио веб-дизайнера Майка Куса выполнено в «чистой и сдержанной манере», пишут редакторы Creative Bloq. В нём большие изображения сочетаются с простыми элементами пользовательского интерфейса.
«Я думаю о своих работах, как о бренде. Нет никакой необходимости добавлять в мой сайт лишние элементы дизайна», — говорит Кус.
В портфолио Куса одинаково легко ориентироваться на всех типах экранов — он отмечает, что добиться такого эффекта было сложнее всего. Каждый из проектов дизайнера представлен изображением или фотографией — такой, чтобы пользователю захотелось узнать о работе больше.
2. Hello MondayСайт креативного агентства Hello Monday претерпел значительные изменения, замечают авторы статьи. Разработчиками компании была проделана огромная работа. Им удалось сделать интерфейс дружелюбным для пользователя.
Старый сайт агентства Hello Monday
Теперь на сайте представлены примеры уже выполненных агентством заказов — у каждого проекта есть своя страница, на которой описана его история, что даёт пользователю более глубокое понимание, чем занимается Hello Monday.
Обновлённый сайт Hello Monday
«Мы пытались отойти от шаблонного представления о том, как должен выглядеть сайт креативного агентства», — рассказывает Кэти Хертел, руководитель проекта по редизайну веб-страницы Hello Monday. Авторы материала находят сайт очень привлекательным и отзывчивым, чему способствует организация проектов на главной странице: она автоматически дополняется новыми работами агентства при прокрутке вниз.
3. MulteorMulteor — это многопользовательская онлайн-игра, написанная на JavaScript с использованием элемента canvas HTML5. Она разработана Арьеном де Врайзом и Филидором Вайзе, а спроектирована Артуром ван Хугом. Основная задача пользователя в игре — контролировать падение метеоритов, получая очки за оставленные им разрушения.
Игра использует Node.js-сервер для управления связью между настольными и мобильными устройствами с помощью WebSockets.
Вайзе акцентирует внимание на том, что при разработке Multeor не использовались уже существующие игровые библиотеки:
Мы писали всё сами — это было очень увлекательно, к тому же, мы узнали много нового. То, что мы не зависели от конкретных сборок и префабов, дало нам определённую свободу действий: не нужно было заниматься рендерингом существующей графики, обработкой коллизий и отдельно описывать систему, отвечающую за взрывы.
4. Crime TimelineCrime Timelime — агрегатор, собирающий данные о преступности в Великобритании с помощью публичных API. Он позволяет пользователям узнать, как обстоят дела в их регионе.
«Мы организовали сайт таким образом, чтобы он показывал карту региона и места совершения преступлений — за месяц, выбранный пользователем на панели снизу», — говорит разработчик проекта Алекс Миллер.
Ресурс использует API Google Maps, для создания панели с месяцами применялись jQuery и jQRangeSlider. Когда пользователь взаимодействует с картой — например, щелкает мышкой в определенное место на ней, сайт обновляет изображение с помощью JavaScript. «Пузырьки», показывающие количество преступлений, были созданы с помощью CSS и анимированы с помощью jQuery.
На сайте Here is Today язык JavaScript использовался для создания анимации. Создатель ресурса, дизайнер Люк Твимэн, так объясняет свою идею: «Я хотел создать что-то, что дало бы каждому человеку ощущение масштаба времени. Here is Today помогает понять, насколько обширна история вселенной».
Твимэн отмечает, что он с самого начала решил отказаться от стандартных величин измерения — пикселей, и описал собственные, основываясь на размерах экрана. Это было сделано для того, чтобы сайт выглядел одинаково на всех устройствах.
Это второй проект на JavaScript, созданный дизайнером, и в нём он применил элементы, которые не использовал в предыдущем. Однако Твимэн находит в языке множество сходств с другими высокоуровневыми языками программирования, к тому же, по его словам, JavaScript имеет довольно подробную документацию, а в интернете (в том числе на тематических формах) разобрано большое количество примеров.
6. TweetmapTweetmap изображает на страны на карте пропорционально количеству отправленных из них твитов. Разработчик сервиса Роб Хоукс перечисляет несколько технологий, использованных при его создании: TopoJSON, D3.js, Node.js, PhantomJS, и специальные алгоритмы построения смежных картограмм в режиме реального времени.
Мы выбрали Node.js, потому что у нас уже был опыт его использования, и потому что это простая, быстрая и гибкая платформа. Для анимации карты (в формате TopoJSON) мы используем D3 — фантастическую библиотеку для визуализации данных. В частности, мы широко применяем модуль geo, который позволяет делать сложные географические расчеты и преобразования.
Чтобы избежать проблем с представлением карт в браузере клиента, система генерирует карты на сервере с помощью D3, запускает и рендерит их с помощью движка PhantomJS, и только потом передаёт пользователю — это позволяет не создавать «дыр» при показе карт.
7. The TripThe Trip — интерактивный фильм, созданный с помощью JavaScript и HTML5 (без использования Flash). Отто Наскарелла, создатель проекта, считает, что задача разработки подобного сервиса оказалась очень сложной:
Большинство трудностей, с которыми мы столкнулись, были связаны с тем, что HTML5 на момент написания сайта не имел средств для кросс-браузерной разработки. Тогда мы решили, что будем рекомендовать клиентам использовать Chrome.
Код сайта на JavaScript использует jQuery практически для всех задач. Разработчики также применяли TextBlur и TextDrop — для размытия и анимации текста.
8. Si DigitalЭта страница, написанная на JavaScript — новое портфолио и блог дизайнерского и маркетингового агентства Si Digital. Ведущий разработчик проекта Алекс Крук так объясняет анимацию на главной странице: «Жидкость, движущаяся по трубам, ведёт пользователей по нашему портфолио — она активирует анимацию изображений на каждом из этапов исследования сайта клиентом».
Для достижения подобного эффекта Крук применил метод jQuery.animate(). К тому же, добавляет он, нужно было правильно выбрать скорость заполнения жидкостью труб — ведь все читают с разной скоростью.
Интерактивный график на странице с описанием выполненных проектов и команды агентства, реализован с помощью jQuery. Временная шкала, по словам Крука, генерируется динамически — на основе информации из базы данных, с использованием технологии Ajax.
9. Сайт Жана ХальфстейнаЖан Хальфстейн — веб-дизайнер. В его портфолио авторов статьи больше всего привлекла главная страница — и анимация на ней. «Я действительно неплохо провёл время, пока возился с различными эффектами. Я очень люблю использовать новые технологии, так что решил сделать основную страницу своего сайта своеобразной песочницей — там я развлекаюсь с Three.js и элементом canvas HTML5», — рассказывает Хальфстейн.
Идея дизайнера заключалась в том, чтобы создать портфолио, следуя современным тенденциям — оно должно было быть минималистичным, и при этом привносить что-то свежее в дизайн сайтов. Поэтому он решил использовать управление анимацией с помощью движений мыши и перетаскивания, а не нажатий клавиш навигации.
10. Портфолио Ника ДжонсаПо словам Джонса, когда он разрабатывал сайт, у него было больше опыта в работе с Flash, чем с JavaScript, но ему захотелось попробовать что-нибудь новое — чтобы понять, на что он способен. «Я сразу понял, что синтаксис JavaScript почти такой же, как синтаксис ActionScript — поэтому очень скоро полностью освоился», — описывает процесс написания кода Джонс.
Джонс вспоминает, что Flash не давал ему доступа к работе с движениями мыши — это был новый опыт, который ему очень понравился. Разработчик хотел добиться такой отзывчивости сайта, которой он не мог достичь, используя переходы между классами в CSS. Джонс доволен достигнутым результатом:
Если вы собираетесь перейти с ActionScript на JavaScript, не медлите ни секунды. Делая свой сайт, я хотел понять, способен ли JavaScript на то, на что способен Flash. И я очень впечатлён.
11. MapsTDMapsTD — онлайн-игра, суть которой заключается в обороне крепости. Крепость — это собственный дом пользователя, который он должен защищать от злодеев, неустанно бродящих по улицам района.
Создатель проекта Дункан Барклай объясняет, как это работает: «Мы использовали API Google Maps, MooTools и JavaScript. Самая сложная часть — поиск маршрута, которым будут следовать враги пользователя. Как только игрок выбрал начальную точку, сервис осуществляет поиск долготы и широты, и вычисляет возможные пути c помощью Google».
По ходу игры на экране появляется всё больше противников. Барклай рассказывает, что разработчикам пришлось «бороться» c таймингом браузеров — дело в том, что большинство из них со временем снижает частоту проверки обновлений на странице, и нужно было сделать так, чтобы этого не происходило.
Другая проблема состояла в том, что вместе с прохождением игры увеличивалось количество врагов, и снижалась производительность. В итоге разработчиками было решено повышать уровень умений злодеев, а не их число.
12. Glimpse CatalogsРесурс Glimpse разработан совместно командой Windows IE и проектом TheFind, и соединяет в себе систему поиска TheFind и приложение тех же разработчиков для онлайн-шопинга на Facebook. В рамках Glimpse программисты выпустили собственный фреймворк, основанный на Turn.js.
Целью команды с самого начала было сделать из Glimpse веб-приложение, а не обычный сайт. Разработчики использовали парадигму «модель-представление-поведение», которая разделяет на три отдельных компонента модель данных, пользовательский интерфейс и взаимодействие с клиентом. Сервис применяет шаблоны рендеринга моделей на стороне клиента Thrift или JSON — в зависимости от вычислительной мощности клиента.
Библиотека Turn.js также использовалась при разработке каталогов. С помощью CSS и JavaScript моделям, представленным на сайте, придаётся объём — за счет наложения теней на изображение.
13. Red Bull Music Academy RadioRBMA Radio использует инструмент Modernizr, который позволяет вести кросс-браузерную разработку на HTML5 и CSS. Modernizr постоянно обновляется, так что создатели сайта могут улучшать код по мере представления новых возможностей.
Кроме того, при реализации сервиса применена библиотека Backbone.js — с помощью неё подгружаются плитки для создания эффекта бесконечной страницы.
14. Nouvelle VagueNouvelle Vague — сайт от французского дизайнерского агентства Ultranoir. Сервис позволяет «отслеживать» твиты по заданному хештегу. Он реализован с помощью JavaScript, WebGL и HTML5. HTML5, правда, отвечает только за тизер при открытии ресурса.
Один из разработчиков агентства рассказал, что на создание сайта ушло четыре месяца, а трудились над ним три человека. «Нам было очень интересно попробовать поработать с WebGL», — объясняет он.
Основная цель проекта заключалась в том, чтобы при помощи 3D-изображений воссоздать атмосферу из видеозаставки. Команда погрузилась в новые технологии HTML5, CSS3 и JavaScript, и считает, что эти языки могут стать стандартами для работы с 3D в будущем — из-за качественного рендеринга, богатых возможностей взаимодействия и реагирования.
15. The ConvergenceThe Convergence — браузерная игра, своей ретро-графикой напоминающая Super Mario Bros. Она демонстрирует потрясающие возможности JavaScript и HTML5 и доказывает, что HTML5 справляется со своими задачами ничуть не хуже, чем Flash.
Разработчики обещают в будущем добавить в игру аудиосопровождение и новые уровни, а также поддержку Mozilla Gamepad API.
16. Kindle Cloud ReaderЭто веб-приложение превращает слова «купите один раз, читайте на всех устройствах» в реальность. Оно использует технологии HTML5, JavaScript API, библиотеки jQuery и jQuery UI и несколько плагинов jQuery, в том числе jScrollPane для прокрутки страниц и jQuery Templates. Кроме того, команда разработчиков воспользовалась WebSQL для поддержки офлайн-режима.
17. Les Enfants TerribleСайт, запущенный студией WeFail, считают авторы заметки, выглядит страшновато, но всё равно очень круто. Ресурс выполнен в довольно резком стиле. JavaScript используется для анимации при взаимодействии пользователя и системы. Чтобы прокручивание осуществлялось только для отдельных элементов интерфейса, командой был применён плагин jQuery ScrollTo. Для появления видео не во всплывающих окнах, а прямо на сайте использовалась библиотека Shadowbox.js.
Кроме того, в коде Les Enfants применяется плагин jQuery Cycle — он отвечает за отображение картинок и примеров работ агентства.
«Мы запустили Les Enfants, чтобы понять, какие возможности по производительности имеются у JavaScript. Оказалось, что в сочетании с СSS Transform можно добиться отличных результатов», — говорит разработчик Мартин Хью.
Не так давно, отмечает Хью, подобные вещи можно было создавать только при помощи Flash, но теперь у него есть жизнеспособная альтернатива — JavaScript.
18. PinterestPinterest — яркий пример использования JavaScript для создания эффекта бесконечной страницы. Для создания сайта понадобились инструменты jQuery, jQuery UI и плагин PageLess.
Как считают авторы заметки, PageLess жизненно важен для Pinterest, потому что бесконечная прокрутка и прогрузка новых пинов гораздо эффективнее помогает удерживать внимание пользователя, чем социальные функции — например, комментирование записей.
19. Love Bomb BuilderLove Bobm Builder помогает пользователям выразить свою любовь или благодарность кому-либо. Это аккуратный и простой сайт, который позволяет создать и отправить послание-бомбу.
Ресурс иcпользует инструмент Modernizr для своевременного обновления кода на JavaScript и HTML5.
20. Michelberger BoozeКогда пользователь попадает на сайт, первым делом он видит так называемый «прелоадер» — может показаться, что он выполнен при помощи Flash, но это не так. За наполнение стакана пивом по мере загрузки отвечает HTML5 и JavaScript.
Ресурс использует функцию частичной прокрутки — только для отдельных элементов интерфейса, и позволяет пользователю интерактивно взаимодействовать с изображениями.
Нажимая на маски животных, клиент отправляется к другим сценам — все анимационные эффекты в которых исполнены при помощи jQuery.animate().
21. TrelloTrello — приложение для совместного или индивидуального планирования, в котором пользователи могут создавать списки выполненных и невыполненных задач и делиться прогрессом в режиме реального времени. Сайт разработан с использованием Node.js, MongoDB и Backbone.js.
Один из создателей Trello Даниэль ле Черминан поясняет, что применение только одного языка при написании сайта помогает новым членам команды быстрее влиться в процесс разработки.
Общение между пользователями реализовано с помощью Web Sockets — ле Черминан отмечает, что это достаточно новая технология, поэтому при её настройке возникали некоторые сложности.
22. BrowserQuestЭто игра в ретро-стиле, созданная студией Little Workshop, призвана продемонстрировать возможности HTML5, JavaScript и, в особенности, Web Sockets. Он может одновременно поддерживать взаимодействие между тысячами пользователей.
«Создание многопользовательской игры — отличный способ продемонстрировать, как такие технологии могут работать вместе. BrowserQuest опирается на серверы Node.js, каждый из которых может запустить несколько экземпляров игрового мира», — рассказывает разработчик студии Гийом Лекольне.
23. JS1kJS1k — ежегодный конкурс, задача участников которого создать страницу на JavaScript на заданную тему (чаще всего — анимированные изображения). Её вес не должен превышать 1 КБ.
Тема этого года — «Here be dragons».
Работа-победитель конкурса в 2012 году. Автор — Филипп Бучанан, тема — «Любовь»
Работа победителя 2012 года изначально весила 8 КБ — но за день Филипп смог сократить её размер до требуемого 1 КБ, оптимизировав алгоритм генерации дерева:
Моей тактикой был «честный обман» компилятора. Например, использование конструкции «a ? b: c» вместо «if (a) b else c» экономит 8 байтов.
24. TimelineСервис помогает пользователям создавать таймлайны, и он очень прост в использовании. В интерактивную шкалу можно включать твиты, видео, фотографии и аудиозаписи. Свой таймлайн можно описать с помощью JSON или Google Docs — как удобнее самому клиенту.
25. Draw a StickmanОсновная идея сервиса заключается в том, чтобы предоставить пользователю возможность немного развлечься, принимая участие в интерактивной истории — помогая нарисованному человечку преодолевать различные препятствия. Зарисовки на сайте выполняются при помощи мыши.
Для создания игры использовались jQuery и библиотека для работы с векторной графикой Raphal.js. Реализация проекта с помощью Raphal помогла разработчикам избежать проблем с производительностью на большинстве устройств и во всех браузерах.
Клиентские приложения
JavaScript можно использовать для разработки полного клиентского приложения. Хотя JavaScript и не столь всеобъемлющий язык, каковым является Java, тем не ме-нее, он проявляет существенные возможности при работе с дескрипторами HTML и связанными с ними объектами. Одно из наиболее известных приложений JavaScript, hJdaho Design"s ColorCenter (http://v.e-du.ru/?http://www.hidaho.com/c3), показано на рис. 1.12. Данное приложение применяется для выбора цветов элементов, видимых в бра-узере, с возможностью их предварительного просмотра в отдельном фрейме. Созда-ние аналогичного приложения с помощью Java сопряжено с гораздо большими слож-ностями, связанными с необходимостью взаимодействия с HTML. Очевидно, что в отдельных случаях JavaScript обеспечивает практически идеальную основу для раз-работки приложений.
Проверка допустимости данных
JavaScript обеспечивает для Web-разработчиков возможность выполнять проверку допустимости данных, вводимых пользователем, без необходимости обращения к серверу. Внутри кода JavaScript можно определить, являются ли значения, введен-ные пользователем, корректными, или, скажем, соответствуют ли они требуемому формату. Гораздо эффективнее провести проверку данных в JavaScript, нежели пе-редавать на сервер незавершенные данные. Подобного рода подход эффективен не только для пользователя, вводящего данных, но также и для сервера. При этом по-является уверенность, что передаваемые на обработку серверу данные являются пол-ностью корректными.
Создание интерактивных форм
JavaScript также используется для "оживления" форм HTML. Одна из задач ожив-ления связана с проверкой достоверности данных. Другая предполагает реализацию дополнительных возможностей, недоступных в HTML, как то поддержка информа-ции в строке состояния, открытие второго окна браузера для отображения, скажем, справочной информации и т.п.
Клиентские таблицы поиска
Помимо проверки достоверности данных, один из способов уменьшения потреби ности доступа к серверу заключается в использовании JavaScript для генерации и поддержки клиентских таблиц поиска. Следует помнить, что в таком случае данные должны встраиваться в сам HTML-документ, поэтому использование таблиц поис-ка должно сводится к небольшим информационным базам данных, предназначенным только для чтения.
Поддержка состояния
В Web-среде, не поддерживающей концепцию состояния, JavaScript применяет-ся для поддержки состояния при обмене между сервером и клиентом. Основной спо-
соб поддержки состояния связан с использованием наборов cookies (информации, сохраняемой браузером на стороне клиента). JavaScript обеспечивает как поиск, так и хранение cookie-наборов на клиентской части.
Работа с Java-аплетами, элементами управления ActiveX и подключаемыми модулями
По мере развития JavaScript, возрастают возможности работы с клиентскими рас-ширениями, включая Java-аплеты, элементы управления ActiveX и подключаемые модули Netscape. Несложно получить доступ к свойствам объектов Java и ActiveX, равно как и запускать их методы. Точно так же несложно определить, установлен ли конкретный подключаемый модуль. Обладая подобной возможностью, JavaScript становится своего рода "клеем", соединяющим вместе HTML, аплеты и клиентские расширения.
Источник "JavaScript в примерах"
В этой статье затронуты вопросы создания интерактивных Web-страниц посредством языка объектно-ориентированного программирования JavaScript. Рассмотрена структура и технология, рассказано об истории создания и о синтаксисе языка, также вы узнаете о различных приемах использования в реальной жизни.
ПредысторияНи для кого не секрет, что JavaScript был разработан компанией Netscape с целью создания высокоэффективных интерактивных страничек. Главной его задачей служит создание динамически изменяющихся Web-документов, то есть изменяющихся при определенном условии (при проверке данных, вводимых пользователем, и так далее).
Его синтаксис очень похож на синтаксис языка Java (JavaScript и Java - разные языки), а синтаксис языка Java, в свою очередь, очень похож на C++. Следовательно, если вы раньше писали программы на Java или C++, то с легкостью освоите и JavaScript.
Не заставив себя долго ждать, небезызвестная компания Microsoft тоже выпустила свой собственный интерпретатор языка под названием JScript, но на нем мы долго останавливаться не будем.
В данное время JavaScript очень распространен по всему миру, он используется при создании Web-приложений любой сложности.
ТехнологияJavaScript использует технологию, эффективно работающую как на клиентской части, так и на серверной. Клиентская часть приложения встраивается в браузер HTML-страниц, код читается непосредственно в том порядке, в котором он написан в открываемом документе. При компиляции серверных приложений используется так называемый байт-код, призванный увеличить скорость работы. В основе серверных и клиентских приложений лежит ядро JavaScript. На рисунке 1 показана примерная схема построения программ.
1 часть - взаимодействие ядра JavaScript и возможностей клиента (используется для написания клиентских приложений).
2 часть - взаимодействие ядра JavaScript и специальных возможностей сервера (используется для написания серверных программ).
Разберемся с синтаксисом.Начнем с разбора синтаксиса языка. Он очень прост, и понять его может почти каждый. Код JavaScript состоит из операторов, причем каждый оператор должен заканчиваться знаком точка с запятой ";". Надо заметить, что этот язык чувствителен к регистру, то есть он различает заглавные и строчные буквы.
Иногда, если приложение представляет собой огромный набор операторов, необходимы комментарии (пояснение к отдельной части программы). В JavaScript комментарии могут записываться следующими способами: // "пояснения" (этот способ позволяет создать комментарий только на одной строке) и /* "пояснения" */ (этот способ предпочтительнее предыдущего тем, что позволяет писать несколько строк комментария).
Теперь перейдем к тегу , в котором, собственно, и будем писать код. Но существует еще один метод встраивания в страницу сценария (набора операторов, то есть приложения) JavaScript, метод, когда сам код не пишется в самом HTML-документе, а файл сценария (файл с расширением *.js) вызывается из HTML-документа. Происходит это следующим способом:
А вообще, если вы хотите просто написать код в самой страничке, синтаксис будет такой:
Как вы, наверное, догадались, после параметра LANGUAGE следует указать тот язык сценариев, на котором вы собрались писать приложение, в нашем случае это JavaScript (вообще-то JavaScript стоит по умолчанию, а вот если бы мы использовали, например, VBScript, то его надо было указать обязательно). Код JavaScript лучше всего размещать в тегах :
Но это не обязательно, так как теги можно разместить почти в любой части Web-документа.
Существует еще одна очень важная проблема, а именно - проблема использования переменных и выражений в качестве значений HTML-тегов. Если существует переменная, и вы хотите использовать ее в качестве параметров тега, нужно поместить ее в фигурные скобки "{" "}" и слева от переменной написать знак амперсанда "&", а справа поставить точку с запятой ";". Рассмотрим пример, когда вы вызываете картинку, а бордюр будет определять переменная Bord1:
Вы, наверно, уже заметили, что JavaScript является языком, в котором переменным не надо вручную назначать типы (такие языки программирования называются языками так называемого свободного использования типов). JavaScript сам назначает переменной тип, соответствующий данным, хранящимся в переменной. Но, тем не менее, можно выделить четыре типа данных: целый тип, в переменных которого хранятся целые числа, которые могут быть и отрицательные, и положительные - вещественный тип - переменные хранят вещественные числа, имеющие знак плюс или минус; строковый тип - переменные содержат заданную последовательность символов и логический тип, переменные этого типа могут содержать только два значения False (ложь) или True (правда).
Переменные можно объявить, используя оператор Var:
Var "переменная" = "назначаемое значение";
В приведенном выше примере переменной сразу присваивался тип, который определяло значение переменной, но можно объявить переменную без присваивания типа:
Var "переменная";
Давайте приведем примеры всех типов при помощи оператора Var:
Var String = "Строка";
Var Vesh = 5.67;
Var Logo = True;
Теперь перейдем к выражениям. Понятие выражения, подразумевает собой определенную последовательность переменных и операторов, целью которых служит вычисление значения.
Выражения также как данные делятся на три типа: арифметические, логические, строковые. При создании выражения используются операторы, соответствующие типу выражения. Разберем только основные операторы разных типов.
Начнем со всем известных арифметических операторов, с помощью которых и строятся арифметические выражения: "+" - сложение, "-" - вычитание, "*" - умножение, "/" - деление, "++" - эквивалентно прибавлению к значению единицы, "--" - эквивалентно вычитанию от значения единицы. Нельзя не сказать и о более простых формах записи арифметических операторов. Рассмотрим на примере. Допустим, мы складываем два числа A и B, а полученный результат будет храниться в переменной A, в обычной записи это будет выглядеть так: A =A + B. В сокращенном варианте это можно записать так: A + = B. Аналогично с правилами математики можно менять порядок действий постановкой скобок.
Сразу надо сказать, что в JavaScript существует только один оператор работы со строками, а именно "+". Он действует так же, как и арифметический оператор "+", то есть его главная задача заключается в соединении двух строк в одну.
Говоря о логических операторах, надо заметить, что большинство из них схожи с логическими операторами C++. Вот они: "&&" - связывает два условия в одно, можно понимать как логическое И; "||" - говорит о том, что должно выполняться или одно условие, или другое; "= =" - сравнивает два значения; "!=" - можно понять как логическое "не равно"; ">,
