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

Содержание

1. Введение

2. Что такое библиотеки Javascript

3. Виды JS Фреймворков

4. Jquery

5. Ckeditor

Заключение

Список литературы

1. Введение

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

JS-framework'и -- это инструменты для построения динамических веб/мобильных/настольных приложений на языке Javascript. Как и к любым другим инструментам, разработчики прибегают к использованию js-фреймворков там, где невозможно/очень сложно/очень долго выполнять задачу обычными средствами. В подавляющем большинстве случаев, фреймворки используются для написания, так называемых, Single Page Applications. Т.е. все, что проиходит на сайте, проиходит на одной страничке, без прямого перехода с нее.

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

2. Что такое библиотеки 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 с приложениями, написанными на других языках программирования.

3. Виды 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 с абсолютно новым синтаксисом, доказывающим легкость использования библиотеки.

4. Jquery

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

· Движок кроссбраузерных CSS-селекторов Sizzle^[1], выделившийся в отдельный проект;

· Переход по дереву DOM, включая поддержку XPath как плагина;

· События;

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

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

· JavaScript-плагины.

Используется следующим образом:

jQuery, как правило, включается в веб-страницу как один внешний JavaScript-файл:

<head>

<script src="jquery-2.2.2.min.js">

</script>

</head>

Вся работа с jQuery ведётся с помощью функции $. Если на сайте применяются другие JavaScript библиотеки, где $ может использоваться для своих нужд, то можно использовать её синоним -- jQuery. Второй способ считается более правильным, а чтобы код не получался слишком громоздким, можно писать его следующим образом:

jQuery(function($) {

// здесь код скрипта, где в $ будет находиться объект, предоставляющий доступ к функциям jQuery

})

Работу с jQuery можно разделить на 2 типа:

· Получение jQuery-объекта с помощью функции $(). Например, передав в неё CSS-селектор, можно получить jQuery-объект всех элементов HTML, попадающих под критерий и далее работать с ними с помощью различных методов jQuery-объекта. В случае, если метод не должен возвращать какого-либо значения, он возвращает ссылку на jQuery объект, что позволяет вести цепочку вызовов методов согласно концепции текучего интерфейса.

· Вызов глобальных методов у объекта $, например, удобных итераторов по массиву.

5. Ckeditor

ckeditor javascript фреймворк приложение

CKEditor - это текстовый WYSIWYG редактор с открытым кодом для использования на веб-страницах.

По умолчанию в CKEditor 4.x проверка правописания осуществляется через плагин SCAYT. Кроме того, проверку правописания можно подключить через плагин jquery-spellchecker, который предоставляет больше гибкости в конфигурации.

Говоря о визуальном редакторе, в сети Вы можете встретить такой термин, как WYSIWYG-редактор. На самом деле -- это аббревиатура, которая расшифровывается следующим образом -- «What You See Is What You Get». Перевести эту фразу можно буквально так -- «Что ты видишь, то ты и получишь».

Подобных редакторов довольно много. Есть как платные, так и бесплатные решения. Наиболее известны и широко используемы редакторы TinyMCE и CKeditor. Сегодня мы как раз будем использовать второй из них -- CKeditor.

Для работы с этими редакторами совсем необязательны знания HTML/CSS, и наполнять сайт может рядовой пользователь, достаточно лишь немного разобраться. Панель таких редакторов очень напоминает панель небезызвестного MS Word (который по сути своей также является WYSIWYG-редактором). Вот как выглядит стандартная панель редактора CKeditor:

Итак, для того, чтобы научиться устанавливать визуальный редактор на страницы своего сайта, нам потребуется простенький тестовый сайт из одной странички, точнее из двух -- вторая будет страницей административной части. Поскольку создание сайта с использованием БД не является целью нашего урока, то этого момента я лишь вскользь касаюсь в видеоверсии урока, объясняя принцип работы заранее написанного функционала.

Таким образом, страница для работы у нас имеется. Для установки WYSIWYG-редактора нам потребуется его дистрибутив. Его Вы найдете в дополнительных материалах либо можете скачать с офсайта -- ckeditor.com

Безусловным преимуществом редактора является простота его установки. Сразу следует отметить, что редактор используется только для текстовых областей (textarea), т.е. использовать его для полей ввода (input) нельзя. Первое, что нужно сделать для подключения редактора -- это подключить скрипт ckeditor.js… подключаем в области head:

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

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

<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>

Последним этапом будет небольшой участок кода JavaScript сразу после текстовой области. Этот код как раз и установит редактор для искомого поля формы:

<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>

<script type="text/javascript">

var ckeditor1 = CKEDITOR.replace( 'editor1' );

AjexFileManager.init({

returnTo: 'ckeditor',

editor: ckeditor1

});

</script>

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

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

Уже готовое решение можно найти на сайте demphest.ru, где автор предлагает некоммерческий файловый менеджер, который, к слову, подходит как для CKEditor, так и для TinyMCE. В дополнительных материалах Вы найдете дистрибутив данного плагина или можете взять его с офсайта.

Итак, для интеграции нам потребуется для начала подключить скрипт ajex.js:

<script type="text/javascript" src="/AjexFileManager/ajex.js"></script>

И немного изменить скрипт, инициализирующий визуальный редактор:

<textarea id="editor1" name="txt" cols="100" rows="20"><?php echo $txt[0]['text'] ?></textarea>

<script type="text/javascript">

var ckeditor1 = CKEDITOR.replace( 'editor1' );

AjexFileManager.init({

returnTo: 'ckeditor',

editor: ckeditor1

});

</script>

Готов наш визуальный редактор php. Опять-таки ничего сложного. После подключения мы можем запустить файл ajax.php с GET-параметром isWork. Этот скрипт создаст необходимые каталоги, куда и будут сохраняться файлы, загружаемые из редактора.

Вот теперь все. Наш визуальный редактор с файловым менеджером готовы -- осталось только наслаждаться теперь уже простой возможностью добавления/редактирования контента.

Заключение

В статье «The World's Most Misunderstood Programming Language Has Become the World's Most Popular Programming Language» («Самый неправильно понятый язык программирования в мире стал самым популярным в мире языком программирования») Дуглас Крокфорд (англ.) утверждает, что лидирующую позицию JavaScript занял в связи с развитием AJAX, поскольку браузер стал превалирующей системой доставки приложений. Он также констатирует растущую популярность JavaScript, то, что этот язык встраивается в приложения, отмечает значимость языка.

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

Список литературы

1. Alexei White. Major JavaScript Engines // JavaScript Programmer's Reference. Indianapolis, IN 46256: Wiley Publishing, Inc., 2009. P. 12 -- 13. (Programmer's Reference). ISBN 978-0-470-34472-9.

2. Official documentation.

3. http://webformyself.com/ustanovka-vizualnogo-redaktora-s-fajlovym-menedzherom/.

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