Разработка информационного web-приложения на основе JS-фреймворков

• Введение
• Глава 1. Значение, виды и выбор фреймворка
• 1.1 Что такое библиотеки JavaScript
• 1.2 Виды JS фреймворков
• 1.3 Выбор JS фреймворка
• Глава 2. Создание клиентского приложения
• 2.1 Выбор приложения и его тематики
• 2.2 Написание кода
• 2.3 Итог работы
• Заключение
• Литература

Сегодня, как никогда прежде, JS-фреймворки играют большую роль в сайтостроении. Абсолютно все современные сайты построены посредством взаимодействия HTML и JS-фреймворков, а так же Flash, PHP, Java и так далее, но это уже не относится к теме данной курсовой работы. Анимация, красивые меню, фотогалереи, плавные переходы от страницы к странице, диалоговые окна, меняющиеся в зависимости от содержимого и многое другое, это все достигается при помощи JavaScript библиотек, которые активно используются при создании различных веб страниц. Поэтому тема данной курсовой работы является очень актуальной.

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

· Дать общее определение JavaScript библиотеки и рассмотреть виды этих библиотек.

· Выбрать одну из библиотек для создания приложения.

· Создать приложение с использованием одного из фреймворков.

В первой главе приведено определение JavaScript библиотек, немного истории создания. Рассматриваются различные библиотеки, после чего выбирается один из этих фреймворков для создания клиентского приложения.

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

Глава 1. Значение, виды и выбор фреймворка

1.1 Что такое библиотеки JavaScript

Библиотека JavaScript — сборник классов и/или функций на языке JavaScript.

Язык JavaScript, изначально разработанный Netscape (а затем развиваемый Mozilla), долгое время использовался в сети на многих сайтах, но широкую популярность получил с приходом Веб 2.0 — периода развития компьютерных систем, в котором JavaScript совместно с различными диалектами XML стал активно использоваться в разработке пользовательских интерфейсов как веб-приложений, так и настольных приложений. JavaScript в связке с CSS используется для создания динамических сайтов, более доступных, чем основанные на Flash альтернативы.

С увеличением популярности JavaScript, простота создания динамических элементов пользовательского интерфейса стала играть ключевую роль в веб-разработке. Этим обусловлен лавинообразный характер появления различных библиотек JavaScript, таких как Ext и Dojo. С другой стороны, одним из последствий войны браузеров стала разница в реализации объектной модели документа и это обусловило необходимость затрачивать дополнительные усилия для реализации корректной работы различных браузеров. Данное обстоятельство обусловило появление библиотек JavaScript, предоставляющих кроссбраузерный интерфейс к методам DOM, таких как Prototype, script. aculo. us или jQuery.

Удобство использования библиотек JavaScript привело к тому, что Microsoft, Yahoo! и другие крупные ИТ-компании разрабатывают свои собственные основанные на JavaScript библиотеки элементов пользовательского интерфейса, встраиваемые в веб-приложения, разрабатываемые этими компаниями.

Практически все библиотеки JavaScript выпускаются под лицензиями копицентр и копилефт, чтобы обеспечить свободное от лицензионных отчислений разработку, использование и модификацию.

Более того, некоторые библиотеки JavaScript позволяют упростить взаимодействие JavaScript с другими языками, такими как CSS, PHP, Ruby и Java. Это позволяет упростить запуск приложений JavaScript с приложениями, написанными на других языках программирования.

1.2 Виды JS фреймворков

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

Рассмотрим несколько популярных библиотек:

Dojo — свободная модульная библиотека JavaScript. Разработана с целью упростить ускоренную разработку основанных на JavaScript или AJAX приложений и сайтов. Разработка библиотеки была начата Алексом Русселом в 2004 году. Dojo Foundation — некоммерческая организация, созданная для продвижения Dojo. Dojo используется в Zend Framework, начиная с версии 1.6.0. Библиотека достаточно глючная. Многие примеры с официального сайта не работают.

Элементы интерфейса dojo — это пакеты, сформированные из компонентов: JavaScript-кода, разметки HTML и CSS. Они могут быть использованы для добавления различных интерактивных возможностей к сайту:

· меню, закладок, всплывающих подсказок;

· селекторов даты, времени; часов;

· сортируемых таблиц, динамических диаграмм, векторной 2D графики;

· элементов интерфейса «дерево» ;

· различных HTML-форм с возможностью проверки ввода пользователя;

· анимированных эффектов, и возможностей построения своих собственных эффектов.

Ext JS — библиотека JavaScript для разработки веб-приложений и пользовательских интерфейсов, изначально задуманная как расширенная версия Yahoo! UI Library, однако преобразовавшаяся затем в отдельный фреймворк. До версии 4.0 использовала адаптеры для доступа к библиотекам Yahoo! UI Library, jQuery или Prototype/script. aculo. us, начиная с 4-ой версии адаптеры отсутствуют. Поддерживает технологию AJAX, анимацию, работу с DOM, реализацию таблиц, вкладок, обработку событий и все остальные новшества Web 2.0.

jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API для работы с AJAX.

Основные возможности jQuery:

· Движок кроссбраузерных CSS-селекторов;

· Переход по дереву DOM;

· События;

· Визуальные эффекты;

· AJAX-дополнения;

· JavaScript-плагины.

MooTools — это свободный JavaScript-фреймворк для разработки кроссбраузерных веб-приложений и веб-сервисов. MooTools является модульным, объектно-ориентированным фреймворком, созданным для помощи разработчикам JavaScript. MooTools совместим и протестирован с браузерами: Safari 2+, Internet Explorer 6+, Firefox 2+ (и другими, основанными на движке Gecko), Opera 9+. Фреймворк MooTools используется в CMS Contao, Joomla 1.5+, ZoneMinder, MODx. MooTools содержит мощную коллекцию классов и продвинутую систему наследования, которая позволяет вторичное использование кода, а также его расширение.

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

Prototype — JavaScript фреймворк, упрощающий работу с Ajax и некоторыми другими функциями. Несмотря на его доступность в виде отдельной библиотеки, он обычно используется программистами вместе с Ruby on Rails, Tapestry, script. aculo. us и Rico.

Заявлено, что данный фреймворк совместим со следующими браузерами: Internet Explorer 6.0+, Mozilla Firefox 1.5+, Apple Safari 2.0.4+ и Opera 9.25+, Google Chrome 1.0+. В Prototype присутствуют самые разные способы упрощения создания JavaScript приложений, например, сокращённый вызов некоторых функций языка.

Rico — библиотека JavaScript для разработки насыщенных интернет приложений. Предоставляется открытым кодом. Rico предоставляет полную поддержку Ajax, управление посредством «drag&drop» и библиотеку кинематографических эффектов. Rico поддерживает JSON и Prototype.

Особенности Rico:

· LiveGrid — элемент управления, позволяющий автоматически обновлять HTML-таблицу через Ajax.

· Animation Effects — В Rico 2.0 присутствует инструмент для анимирования, утверждается, что он более гибок, чем другие веб-приложения для анимирования. Анимация в Rico может быть приостановлена или остановлена, к ней могут быть применены другие эффекты, что позволяет создавать анимацию, чутко реагирующую на действия пользователя.

фреймворк приложение программный код

· Styling — Rico предлагает несколько кинематографических и простых эффектов на своём очень простом интерфейсе.

· Ajax Support — В Rico имеется интерфейс для регистрирования Ajax-овых обработчиков запросов, а также регистрирования объектов HTML и JavaScript как Ajax-овых обработчиков.

Yahoo! UI Library (YUI) — библиотека JavaScript для создания богатых интерактивными возможностями приложений или/и пользовательского интерфейса. Использует AJAX, анимацию, надстройки над XMLHttpRequest и DOM, «drag-and-drop», слайдеры, слайды, календари, деревья, табы и другое.

Разработанна Yahoo.com библиотека JavaScript и CSS с открытым кодом. YUI включает утилиты JavaScript, фрэймворк CSS, инструменты и устройства JavaScript для включения и управления модулями.

В настоящее время доступны две версии YUI. YUI 2 был запущен в 2006, в него была включена львиная доля всех возможностей YUI. YUI 3 был выпущен в 2009 с абсолютно новым синтаксисом, доказывающим легкость использования библиотеки.

Underscore — библиотека JavaScript, реализующая дополнительную функциональность для работы с массивами, объектами и функциями, изначально отсутствующую в javascript, но имеющую аналоги в других языках. Библиотека умеет делегировать вызовы, если какая-то функциональность реализована разработчиками браузеров.

1.3 Выбор JS фреймворка

Перед мной стоял выбор из огромного количества JavaScript библиотек. Не долго думая, я покопался в интернете, почитал информацию по каждому из фреймворков. Некоторые из них, по мнению пользователей, были «бажными» (Dojo), другие были сложны в освоении, либо просто не хватало необходимой информации для того, чтобы комфортно пользоваться ими.

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

Глава 2. Создание клиентского приложения

2.1 Выбор приложения и его тематики

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

1) Каталог;

2) Форум;

3) Фотогалерея;

4) Блог;

5) Онлайн библиотека;

Я решил остановить свой выбор на каталоге, так как он является важнейшим, и используется как в форумах (разделы форума), фотогалереях (категории изображений), блогах, а так же в онлайн библиотеках.

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

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

По моим представлениям, данное приложение должно иметь такой функционал:

1) Выпадающее меню с подкатегориями каждого из разделов меню;

2) Приятный, не режущий глаз, внешний вид;

3) Фрейм, в котором будет показываться информация о выбранном нам товаре для того чтоб не перезагружать каждый раз страницу заново.

2.2 Написание кода

Для начала создадим стартовую страницу index. htm в которой будет содержаться информация о внешнем виде нашего каталога. Создадим 2 вертикальных фрейма, в одном из которых будет находиться выпадающее меню, а во втором будет загружаться страница нужного нам товара, назовем его «content» .

Код страницы index. htm:

body {background: #1C1C1C; }

Для того чтобы создать меню, нам нужна библиотека jQuery. Для этого зайдем на официальный сайт http://jquery.com/ и скачиваем оттуда самую последнюю версию. Нам выдает очень много текста, который мы копируем в файл jquery. js и помещаем в папку js. При написании меню, мы будем обращаться к этому файлу.

После чего создадим страницу menu. htm в которой у нас и будет находиться само меню.

Код страницы menu. htm:

$ (document). ready (function ()

{

$ («#menupush p. menuh»). click (function ()

{

$ (this).

next («div. menu_conteiner»).

slideToggle (300).

siblings («div. menu_conteiner»).

slideUp («slow»);

});

});