В современном веб-дизайне Javascript является просто неотъемлемым компонентом. Помимо его функциональности, Javascript может значительно улучшить общее впечатление пользователя, создавая различные переходные эффекты, такие как плавные переходы и слайд-анимация. Благодаря открытой архитектуре Javascript, нам больше не придется писать отдельные скрипты с нуля. Вот 47 плагинов Javascript, которые вы можете использовать для улучшения взаимодействия пользователей с сайтом и его функциональности. Не забудьте просмотреть примеры сайтов, которые покажут вам, как можно использовать эти плагины.
Две наиболее популярные среды JavascriptНа сегодняшний день две наиболее используемые среды Javascript следующие:jQuery и MooTools. Посмотрите на опрос снизу:
Всплывающие изображения и зумВы наверняка знакомы с Lightbox - простой Javascript, используемы для наложения изображений на текущую страницу. Оригинальный Lightbox был выпущен в 2005. С тех пор было выпущено множество скриптов со схожими функциями, но использующие другие подходы и библиотеки Javascript.
Этот плагин аналогичен Lightbox JS, только написан на библиотеке jQuery.
Thickbox это плагин jQuery, который очень похож на Lightbox, разве что имеет больше функций. Он позволяет отображать: как одно, так и сразу несколько изображений, встроенное содержимое, содержимое в плавающем фрейме или же содержимое, переданное через AJAX в гибридной модели.
Обратите внимание: Web Designer Wall использует Thickbox для отображения своих галерей изображений и демонстрационных уроков.
Highslide JS служит той же цели, что и Thickbox, но еще имеет и эффект зума, что позволяет перетаскивать наложенное изображение.
FancyBox это плагин jQuery, который был разработан для того, чтобы заменить чрезмерно используемый Lightbox. У него схожие функции, но более красивые переходные эффекты (дизайн на манер Mac).
jQZoom позволяет отображать увеличенные изображения пиктограмм. Эта техника повсеместно используется на сайтах электронной коммерции (посмотрите для примера сайт Gap).
Галлереи и показ слайдовSlideshow 2! Это класс javascript для Mootools 1.2, предназначенный для анимирования презентации изображений на вашем сайте.
Используя mootools v1.11, эта система слайдшоу и javascript-галлерей позволяет вам создавать простые и сглаженные (техника плавного перехода) галереи картинок, слайдшоу, афиши и много других классных примочек на ваш сайт.
Galleria это галерея картинок javascript написанная в jQuery. Она подгружает изображения одно за другим из несортированного списка и отображает пиктограммы, когда загружается каждое изображение. Она может создавать различные пиктограммы, если вы выберите, масштабированные или немасштабированные, центрированные или обрезанные по размеру поля для пиктограмм, определенного в CSS.
NoobSlide это класс MooTools, который позволяет вам создавать слайдшоу и скользящие панели синхронизированные по таймеру. Посмотрите этот сайт для демонстрации.
Вот демонстрация виджета слайдера из UI библиотеки jQuery, используемого для создания слайдера с товарами, такого как на сайте Apple - Mac .
CarouseljCarousel это плагин jQuery позволяющий контролировать список предметов в горизонтальном или вертикальном порядке. Предметы, которые могут быть как статичным содержимым в HTML, так и загруженным с использованием (или без) AJAX, можно прокручивать вперед и назад (с анимацией или без нее).
Компонент перелистывания управляет списком содержимого (элементы HTML LI внутри тега UL), которое можно отображать вертикально или горизонтально. Содержимое можно прокручивать вверх и вниз с или без использования анимации. Содержимое может относиться к статичному HTML содержимому или список предметов может быть создан динамически "на ходу" (с или без использования AJAX).
Carousel Slideshow это широко известный скрипт DHTML для показа изображений на вашем сайте. Он отображает изображения в 3D, на манеру карусели.
iCarousel это бесплатный инструмент javascript с открытым исходным кодом для создания виджетов на манер карусели. Вы также можете использовать iCarousel в качестве бегущей новостной строки/скроллера или в качестве галереи изображений.
Панельный слайдерCoda Slider это плагин jQuery, который имитирует эффект слайда панелей, как на сайте Coda .
Sliding Tabs это плагин mootools 1.11 с очень приятными эффектами. Это клон чего-то, что используется на сайте Panic Software"s Coda, что в свою очередь очень похоже на виджет, используемый на сайте iTunes Music Store.
ВкладкиjQuery Tabs это мощный и гибкий плагин jQuery, который позволяет вам создавать полностью настраиваемую навигацию по вкладкам (очень рекомендуется).
Еще один отличный урок с сайта jQueryForDesigners.com покажет вам как создавать основную навигацию по вкладкам при помощи jQuery.
MooTabs это крошечный (3кб) класс для MooTools. Как следует из названия, его основная задача это помогать вам в создании простых вкладок навигации.
Очень гибкий плагин jQuery, позволяющий вам создавать анимацию при прокрутке в любую позицию веб-страницы с настраиваемыми опциями стирания и скорости прокрутки.
Простой скрипт MooTools, который может создавать плавную прокрутку до якоря на веб-странице.
Настраиваемый плагин jQuery, который отображает всплывающие строки-подсказки - или со статичным HTML или с содержимым AJAX.
Еще один неплохой плагин строки-подсказки.
Очень простой скрипт jQuery, который отображает строку-подсказку и предварительный просмотр изображения (Я использую его на Best Web Gallery).
Меню-гармошкаЭтот плагин создает меню гармошку. Он работает с вложенными списками, списками определений или просто с вложенными дивками.
Плагин Accordion может отлично выделит и покажет тот контент, который вам необходим.
Image Menu это плагин MooTools который может создать горизонтальное меню-гармошку с изображениями.
Замена текста Flash и изображениемsIFR может замещать короткие отрывки простого браузерного текста текстом визуализированным выбранным вами шрифтом, независимо от того установлен ли он на системах ваших пользователей. Он выполняет свою задачу, используя комбинацию javascript, CSS, и Flash.
Плагин jQuery, который выполнит для вас функции sIFR.
Facelift Image Replacement это скрипт замены изображений, который динамически генерирует представление текста в изображении на вашей веб-странице в тех шрифтах, которые другим способом могут быть недоступны вашим посетителям. Сгенерированное изображение автоматически вставляется в вашу веб-страницу посредством Javascript и видимо всеми современными браузерами
Ресурс 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 - скриптовом языке, предназначенном для создания интерактивных веб-страниц, и о том, что можно делать с помощью 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 is a programming language that adds interactivity to your website (for example games, responses when buttons are pressed or data is entered in forms, dynamic styling, andanimation). This article helps you get started with this exciting language and gives you an idea of what is possible.
What is JavaScript, really?Important : If you haven"t been following along with the rest of our course, download this example code and use it as a starting point.
Variables| A sequence of text known as a string. To signify that the value is a string, you must enclose it in quote marks. | let myVariable = "Bob"; |
| A number. Numbers don"t have quotes around them. | let myVariable = 10; |
| A True/False value. The words true and false are special keywords in JS, and don"t need quotes. | let myVariable = true; |
| A structure that allows you to store multiple values in one single reference. | let myVariable = ; Refer to each member of the array like this: myVariable , myVariable , etc. |
| Basically, anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn. | let myVariable = document.querySelector("h1"); All of the above examples too. |
So why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn"t change, then you couldn"t do anything dynamic, like personalize a greeting message or change the image displayed in an image gallery.
CommentsYou can put comments into JavaScript code, just as you can in CSS:
/* Everything in between is a comment. */
If your comment contains no line breaks, it"s often easier to put it behind two slashes like this:
// This is a comment
Operators EventsReal interactivity on a website needs events. These are code structures which listen for things happening in the browser and runs code in response. The most obvious example is the click event , which is fired by the browser when you click on something with your mouse. To demonstrate this, enter the following into your console, then click on the current webpage:
Document.querySelector("html").onclick = function() { alert("Ouch! Stop poking me!"); }
There are many ways to attach an event to an element. Here we select the element, setting its onclick handler property equal to an anonymous (i.e. nameless) function, which contains the code we want the click event to run.
Document.querySelector("html").onclick = function() {};
is equivalent to
Let myHTML = document.querySelector("html"); myHTML.onclick = function() {};
It"s just shorter.
Supercharging our example websiteNow we"ve gone over a few JavaScript basics, let"s add a few cool features to our example site to see what is possible.
Adding an image changerIn this section, we"ll add an additional image to our site using some more DOM API features, using some JavaScript to switch between the two when the image is clicked.
If you get stuck, you can compare your work with our finished example code on GitHub .
We have barely scratched the surface of JavaScript. If you have enjoyed playing, and wish to advance even further, head to our JavaScript learning topic .
Данное руководство представляет собой введение в JavaScript и некоторые примеры.
(По книге Стефана Коха "JavaScript - Einfuehrung, Programmierung und Referenz")
Часть 1 : Первые шаги
Что такое JavaScript
JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы. В данном руководстве Вы увидите, что можно сделать с помощью JavaScript, и даже более того - увидите, как это сделано.
JavaScript - это не Java!
Многие люди считают, что JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Я считаю, что сейчас будет излишне показывать Вам все различия между этими языками - так что запомните лишь то, что JavaScript - это не Java.
Запуск JavaScript
Что необходимо сделать, чтобы запускать скрипты, написанные на языке JavaScript? Вам понадобится браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными,
множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Несомненно, это важный аргумент в пользу выбора языка JavaScript, как средства улучшения ваших Web-страниц.
Конечно же, перед чтением данного руководства Вы должны познакомиться с основами другого языка - HTML. При этом, возможно, Вы обнаружите, что много хороших средств диалога можно создать, пользуясь лишь командами HTML. Чтобы получить дополнительную информацию о языке HTML, лучше всего инициировать поиск по ключевому слову "html" на поисковом сервере Yahoo.
Размещение JavaScript на HTML-странице
Код скрипта JavaScript размещается непосредственно на HTML-странице. Чтобы увидеть, как делается, давайте рассмотрим следующий простой пример:
Это обычный HTML документ.
Вновь документ HTML.
С первого взгляда пример напоминает обычный файл HTML. Единственное новшество здесь - конструкция:
document.write("А это JavaScript!")
Это действительно код JavaScript. Чтобы видеть, как этот скрипт работает, запишите данный пример как обычный файл HTML и загрузите его в браузер, имеющий поддерку языка JavaScript. В результате Вы получите 3 строки текста:
Это обычный HTML документ.
А это JavaScript!
Вновь документ HTML.
Я должен признать, что данный скрипт не столь полезен - то же самое и более просто можно было бы написать на "чистом" языке HTML. Я всего лишь хотел продемонстрировать Вам тэг признака . Все, что стоит между тэгами и , интерпретируется как код на языке JavaScript. Здесь Вы также видите пример использования инструкции document.write() - одной из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ). Так наша небольшая программа на JavaScript в HTML-документе пишет фразу "А это JavaScript!".
Браузеры без поддержки JavaScript
А как будет выглядеть наша страница, если браузер не воспринимает JavaScript? Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга . Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа. Разумеется, это не входило в наши намерения. На этот случай имеется специальный способ скрыть исходный код скрипта от старых версий браузеров - мы будем использовать для этого тэг комментария из HTML - . В результате новый вариант нашего исходного кода будет выглядеть как:
Это обычный HTML документ.
Вновь документ HTML.
В этом случае браузер без поддержки JavaScript будет печатать:
Это обычный HTML документ.
Вновь документ HTML.
А без HTML-тэга комментария браузер без поддержки JavaScript напечатал бы:
Это обычный HTML документ.
document.write("А это JavaScript!")
Вновь документ HTML.
Пожалуйста обратите внимание, что Вы не можете полностью скрыть исходный код JavaScript. То, что мы здесь делаете, имеет целью предотвратить распечатку кода скрипта на старых браузерах - однако тем не менее читатель сможет увидеть этом код посредством пункта меню "View document source". Не существует также способа скрыть что-либо от просмотра в вашем исходном коде (и увидеть, как выполнен тот или иной трюк).
События
События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:
Данный пример имеет несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой (как это делать - проблема языка HTML, так что рассматривать это здесь я не буду). Первая новая особенность - onClick="alert("Yo")" в тэге . Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютере должен выполнить вызов alert("Yo"). Это и есть пример кода на языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом ). Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это "Yo". И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст "Yo".
Некоторое замешательство может вызвать еще одна особенность данного примера: в команде document.write () мы использовали двойные кавычки ("), а в конструкции alert() - только одинарные. Почему? В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert("Yo")" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому Вы и вынуждены в данном случае перемежать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сперва двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick="alert("Yo")".
Вы можете использовать в скрипте множество различных типов функций обработки событий. Сведения о некоторых из них мы получим в данном описании, однако не о всех. Поэтому обращайтесь пожалуйста к соответствующему справочнику, если Вы хотите узнать, какие обработчики событий еще существуют.
Итак, если Вы используете браузер Netscape Navigator, то выпадающее окно содержит текст, что был передан функции JavaScript alert. Такое ограничение накладывается по соображениям безопасности. Такое же выпадающее окно Вы можете создать и с помощью метода prompt(). Однако в этом случае окно будет воспроизводить текст, введенный читателем. А потому, скрипт, написанный злоумышленником, может принять вид системного сообщения и попросить читателя ввести некий пароль. А если текст помещается в выпадающее окно, то тем самым читателю дается понять, что данное окно было создано web-браузером, а не вашей операционной системой. И поскольку данное ограничение наложено по соображениям безопасности, Вы не можете взять и просто так удалить появившееся сообщение.
Функции
В большинстве наших программ на языке JavaScript мы будем пользоваться функциями. Поэтому уже теперь мне необходимо рассказать об этом важном элементе языка. В большинстве случаев функции представляют собой лишь способ связать вместе нескольких команд. Давайте, к примеру, напишем скрипт, печатающий некий текст три раза подряд. Для начала рассмотрим простой подход:
И такой скрипт напишет следующий текст
Добро пожаловать на мою страницу!
Это JavaScript!
три раза. Если посмотреть на исходный код скрипта, то видно, что для получения необходимого результата определенная часть его кода была повторена три раза. Разве это эффективно? Нет, мы можем решить ту же задачу еще лучше. Как насчет такого скрипта для решения той же самой задачи?:
В этом скрипте мы определили некую функцию, состоящую из следующих строк:
function myFunction() {
document.write("Добро пожаловать на мою страницу!
");
document.write("Это JavaScript!
");
}
Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction (). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, нашем примере есть три вызова этой функции - Можно увидеть, что мы написали строку myFunction() три раза сразу после того, как дали определение самой функции. То есть как раз и сделали три вызова. В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды. Поскольку это довольно простой пример использования функции, то у Вас мог возникнуть вопрос, а почему собственно эти функции столь важны в JavaScript. По прочтении данного описания Вы конечно же поймете их пользу. Именно возможность передачи переменных при вызове функции придает нашим скриптам подлинную гибкость - что это такое, мы увидим позже.
Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим следующий пример:
Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными x, y и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12).
После этого в переменный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.