Санкт-Петербургский государственный политехнический университет
Институт Прикладной математики и механики
Кафедра Прикладной математики
Д. В. Богданов
ИСПОЛЬЗОВАНИЕ JAVASCRIPT ДЛЯ МОДЕЛИРОВАНИЯ ФИГУР ЛИССАЖУ МЕТОДОМ ПРУЖИН
Курсовой проект
Направление подготовки бакалавров: 010800 Механика и математическое моделирование
Профиль ООП: 010800.62.01 Механика деформируемого твердого тела
Группа 23604/1
Руководитель проекта: Панченко А.Ю.
Допущен к защите:
«__» 20__ г.
Санкт-Петербург
2014
Оглавление
Оглавление 2
Введение 3
Глава 1. Значение, виды и выбор фреймворка 4
1.1 Что такое библиотеки JavaScript 4
1.2 Виды JS фреймворков 5
1.3 Выбор JS фреймворка 7
Глава 2. Создание приложения 8
2.1 Начало работы с проектом и JavaScript 8
2.2 Написание кода 9
2.3 «Простое» и «сложное» движение 19
2.4 Итог работы 20
Литература 23
Введение
Сегодня, как никогда прежде, 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-овых обработчиков.
1.3 Выбор JS фреймворка
Перед мной стоял выбор из огромного количества JavaScript библиотек. Не долго думая, я покопался в интернете, почитал информацию по каждому из фреймворков. Некоторые из них, по мнению пользователей, были «бажными» (Dojo), другие были сложны в освоении, либо просто не хватало необходимой информации для того, чтобы комфортно пользоваться ими.
По истечению некоторого времени поиска информации, я все же решил использовать JQuery, так как он является наиболее популярным и самым простым в освоении (по отзывам пользователей) среди себе подобных фреймворков, и информации с примерами использования было вполне достаточно.
Глава 2. Создание приложения
2.1 Начало работы с проектом и JavaScript
Итак, выбрав необходимый нам фреймворк, встала задача: как написать код (тема была уже определена, т.к. требовалась моделирование грузика на пружинка).
По моим представлениям, данное приложение должно иметь такой функционал:
Корректное отображение исследуемого объекта, с плавной анимацией ;
Приятный, не режущий глаз, внешний вид (несколько слайдеров и text area);
График движения грузика
Объединить скрипт простого и сложного движения на одной странице (экономия ресурсов)
Очистка графика по нажатию кнопки
2.2 Написание кода
Для начала создадим стартовую страницу index.htm на которую и будем выводить наш фрейм для моделирования, график и слайдеры настройки, кнопку очистки и checkbox для выбора «простого» или «сложного» типа движений (о типе движения в пп 2.3).
Пружинка
textarea, описывается их позиция, размеры и проверка на правильность ввода в textarea-->
|
