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

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Содержание

Введение

Глава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:

<html>

<head>

<style type="text/css">

body {background: #1C1C1C; }

</style>

</head>

<iframe src="menu.htm" width="20%" height="96%" allowTransparency></iframe>

<iframe src="pages/content.htm" name="content" width="79%" height="96%" allowTransparency></iframe>

</html>

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

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

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

<html>

<head>

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

$("#menupush p.menuh").click(function()

{

$(this).

next("div.menu_conteiner").

slideToggle(300).

siblings("div.menu_conteiner").

slideUp("slow");

});

});

</script>

<link rel="stylesheet" type="text/css" href="css/menu.css" />

</head>

<body>

<div style="float:left" >

<div class="menu_slider" id="menupush">

<p class="menuh">Видеокарты</p>

<div class="menu_conteiner">

<a href="pages/1.htm" target="content">ATI Radeon™ HD 5970</a>

<a href="pages/2.htm" target="content">ATI Radeon™ HD 7970</a>

<a href="pages/3.htm" target="content">Nvidia GeForce GTX 770</a>

</div>

<p class="menuh">Оперативная память</p>

<div class="menu_conteiner">

<a href="pages/4.htm" target="content">Kingston [KVR13N9S8/4]</a>

<a href="pages/5.htm" target="content">Corsair 11-11-11-30</a>

<a href="pages/6.htm" target="content">G.Skill RipjawsX CL10-10-10-30</a>

</div>

<p class="menuh">Материнские платы</p>

<div class="menu_conteiner">

<a href="pages/7.htm" target="content">ASRock LGA1155</a>

<a href="pages/8.htm" target="content">ASUS LGA1155</a>

<a href="pages/9.htm" target="content">Gigabyte G1.Assassin2 X79</a></div>

<p class="menuh">Жесткие диски</p>

<div class="menu_conteiner">

<a href="pages/10.htm" target="content">Hitachi Deskstar [H3IK40003272SE]</a>

<a href="pages/11.htm" target="content">Seagate Constellation ES.3 [ST4000NM0033]</a>

<a href="pages/12.htm" target="content">WD Green [WD5000AZRX]</a>

</div>

<p class="menuh">Процессоры</p>

<div class="menu_conteiner">

<a href="pages/13.htm" target="content">AMD FX-8350</a>

<a href="pages/14.htm" target="content">Intel Core i7-4960X</a>

<a href="pages/15.htm" target="content">Intel Core i5-4670K</a>

</div>

<p class="menuh">Блоки питания</p>

<div class="menu_conteiner">

<a href="pages/16.htm" target="content">ATX DNS FinePower DNP-1050EPS</a>

<a href="pages/17.htm" target="content">Chieftec 800W</a>

<a href="pages/18.htm" target="content">Thermaltake TR2 RX</a>

</div>

</div>

</div>

</body>

</html>

Остановимся на скрипте поподробнее. Строка

<script type="text/javascript" language="javascript" src="js/jquery.js"></script>

подключает библиотеку jquery. После чего идет сам скрипт:

<script type="text/javascript">

$(document).ready(function()

{$("#menupush p.menuh").click(function()

{$(this).

next("div.menu_conteiner").

slideToggle(300).

siblings("div.menu_conteiner").

slideUp("slow");});

});

</script>

Это и есть функция выпадающего меню.

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

<script type="text/javascript">

$(document).ready(function()

{$("#menuover p.menuh").mouseover(function()

{$(this).

next("div.menu_conteiner").

slideDown(500).

siblings("div.menu_conteiner").

slideUp("slow");});

});

</script>

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

Выглядит оно так:

(Рис. 1)

Выглядит оно так, благодаря css файлу с описанием оформления самого меню. В нем описаны Цвета шрифта, цвета фона меню, цвета фона подменю, тип шрифта и т.д.

Файл menu.css находится в папке css, откуда и подключается в меню.

Код файла menu.css:

.menu_slider

{width: 250px;}

menuh

{padding: 5px 10px;

cursor: pointer;

position: relative;

margin:1px;

font-weight:bold;

color: #E8E8E8;

background: #363636;}

.menu_conteiner

{display:none;}

.menu_conteiner a

{display:block;

color:#EEEED1;

background-color:#4F4F4F;

padding-left:10px;

font-weight:bold;

text-decoration:none;}

.menu_conteiner a:hover

{color: #EEEE00;

text-decoration:underline;}

Создадим стартовую страницу, которая будет загружаться во второй фрейм при запуске. Назовем ее content.htm и поместим в папку pages, откуда и будем брать все страницы загружаемые во второй фрейм. В ней будет находиться информация о нашем каталоге, о том что в нем находится.

Код файла content.htm:

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf8" />

</head>

<body text="white">

<center><h2>Каталог компьютерных комплектующих<h2></center>

<center><img src="images/1.jpg" width="50%" height="50%"></center>

<center>В данном каталоге вы сможете подобрать себе любые комплектующие для вашего персонального компьютера.</center>

<ins>

<center>

<li>Видеокарты</li>

<li>Оперативную память</li>

<li>Материнские платы</li>

<li>Жесткие диски</li>

<li>Процессоры</li>

<li>Блоки питания</li>

</center>

</ins>

</body>

</html>

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

Код файла 11.htm:

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf8" />

</head>

<body text="white">

<center><img src="images/Seagate Constellation ES.3 [ST4000NM0033].jpg" width="400" height="300"></center>

<h2>Общие характеристики</h2>

<li>Тип HDD

<h2>Назначение для настольного компьютера</h2>

<li>Форм-фактор 3.5"

<h2>Характеристики накопителя</h2>

<li>Объем 4000 Гб

<li>Объем буфера 128 Мб

<li>Скорость вращения 7200 rpm

<li>Скорость записи 175 мб

<h2>Интерфейс</h2>

<li>Интерфейс SATA III

<li>Внешняя скорость передачи данных 6 Гбит/с

<h2>Временные характеристики</h2>

<li>Среднее время задержки (Latency) 4.16 мс

<h2>Механика/Надежность</h2>

<li>Ударостойкость при работе 70 G

<li>Ударостойкость при хранении 300 G

<li>Уровень шума работы 30 дБ

<li>Уровень шума простоя 28 дБ

<h2>Габариты, Вес</h2>

<li>Ширина 101 мм

<li>Высота/Толщина 26 мм

<li>Длина/Глубина 147 мм

<li>Вес 0.7 кг

<center><a href="content.htm">На главную</a></center>

</body>

</html>

2.3 Итог работы

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

На данном скриншоте изображена стартовая страница каталога:

(Рис. 2)

На этом скриншоте продемонстрировано меню с подкатегориями видеокарт и страница одной из них.

(Рис. 3)

На этом скриншоте продемонстрировано меню с подкатегориями процессоров и страница одного из них.

(Рис. 4)

Заключение

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

· Описано что такое JS-фреймворки

· Представлены виды фреймворков с кратким описанием каждого из них

· Был выбран целевой фреймворк, который в дальнейшем использовался для разработки приложения

· Было разработано приложение с использованием фреймворка Jquery

Исходя из изученного нами материала, мы видим, что JS-фреймворки являются неотъемлемой частью жизни большинства жителей нашей планеты. Используя интернет и посещая тем самым различные веб страницы, пользователь сам не подозревая того, использует JavaScript библиотеки. Без них любой современный сайт будет простым, невзрачным HTML документом, содержащим информацию и не имеющим ничего такого, за что бы мог «зацепиться глаз» посетителя этого сайта. Ведь заходить на красиво оформленную страницу, с плавной анимацией меню или диалоговых окон, видеть слайд-шоу из каких-нибудь тематических картинок всегда приятнее, нежели на страницу с обычным набором текста, с банальными ссылками и т.п.

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

приложение фреймворк страница компьютер

Литература

1) http://ru.wikipedia.org/wiki/Библиотека_JavaScript

2) http://habrahabr.ru/

3) http://jqbook.net.ru/

4) http://ru.html.net/

5) http://www.stm.dp.ua/web-design/color-html.php

6) Антон Шевчук. Jquery. Учебник для начинающих.: 2013. - 123с.

7) Бенедетти Р., Крэнли Р. Изучаем работу с jQuery. - СПб.: Питер, 2012. - 528 с.

8) Бер Бибо, Иегуда Кац. jQuery. Подробное руководство по продвинутому JavaScript, 2-е издание. - Пер. с англ. - СПб.: Символ-Плюс, 2011. - 624 с.

9) Каслдайн Э., Шарки К. Изучаем jQuery. 2-е изд. - СПб.: Питер, 2012. - 400 с.

10) Самков Г. А. jQuery. Сборник рецептов. -- 2-е изд., перераб. и доп. -- СПб.: БХВ-Петербург, 2011. - 416 с.

Размещено на Allbest.ru