Добрый день!
Вчера наткнулся на прекрасный инструмент для работы с различными javascript библиотеками. Полностью еще его возможности не знаю. Вот как раз по ходу написания этой статьи и сам узнай больше, и познакомлю вас с этой информацией.
Так же, в виду того, что в блоге открыта рубрика jQuery и в прошлой статье мы уже познакомились с особенностями jQuery в WordPress, данный инструмент очень нам поможет в дальнейшем в изучении jQuery.
Итак, инструмент называется JSFIDDLE и расположен по адресу: jsfiddle.net.
Что означает js, думаю, понятно – это сокращение JavaScript, а вот fiddle, в переводе с английского – это “скрипка”.
Давайте научимся играть на этой js-скрипке!
Заходим на сайт jsfiddle.net. Мы видим, что страница поделена на четыре области и по подсказкам в верхнем правом углу в каждом блоке понимаем, что они предназначены для ввода HTML кода, CSS кода, JavaScript кода и последнее окошко – для вывода результата.
Сразу протестируем работу на простом примере.
1. В HTML поле напишем html-код кнопки.
1 2 3 |
<button>Нажми меня</button> |
2. В JavaScript поле создадим jQuery код обработки события – клик по кнопке.
1 2 3 4 5 |
$('button').click(function(){ alert('Привет, Мир!'); }) |
3. Подключим библиотеку jQuery просто выбрав её в выпадающем списке (см. пункт 3 на рисунке). Выбирать можно различные версии библиотеки. В данном случае версия не принципиальна, поэтому я выбрал последнюю.
4. Запустим на выполнения данный пример. Run (пункт 4 на рисунке).
5. В окне результатов появится кнопка и можем проверить верно ли будет обработан клик по ней. Нажмите на кнопку и если все сделали правильно, то появится сообщение с текстом “Привет, Мир!”.
Скажите ж, классно!
Но, все это было б не сильно практично если б не было возможности сохранять свои наработки. Если вы нажмете на кнопку “Save” в меню, то ваши наработки будут сохранены и вы можете ими делиться с другими. Вот я сохранил свой пример и адресная строка изменилась на такую http://jsfiddle.net/79ZzH/. При этом не потребовалась регистрация и авторизация, хотя эти пункты присутствуют, но видимо регистрация открывает еще какие-то более широкие возможности.
Теперь по ссылке http://jsfiddle.net/79ZzH/ вы можете посмотреть и запустить мой пример. Внести свои изменения и обновить пример, но изменения не затронут мой оригинальный экземпляр, а будут сохранены с добавленной 1 (2,3 и т.д.) в урл http://jsfiddle.net/79ZzH/1/.
Также хочу обратить ваше внимание на наличие в меню пункта “JSHint”. Он поможет вам найти синтаксические ошибки в вашем скрипте.
Итак, делаем выводы: jsfiddle – отличный инструмент для разработки и тестирования кода к различным javascript библиотекам (jQuery, Mootools, Prototype, YUI и множество других ). Позволяет делиться наработками с другими, создавать ответвления (“вилки”) кода для дописывания своего функционала к уже существующим модулям. Также удобно использовать jsfiddle, для консультаций, когда вы самостоятельно не можете найти ошибку или решить поставленную задачу. Сохранив код в jsfiddle, вы можете разместить вопрос вместе с ссылкой на код на форуме или спросить у коллег по интернету. Специалист, разбирающийся в данной проблеме, сможет внести соответствующие правки в код, сохранить изменения и отправить вам ссылку на рабочий вариант.
Мне очень понравился инструмент jsfiddle.net. Теперь буду постоянно его использовать, в том числе, и здесь в блоге.
Огромное спасибо разработчику jsfiddle Piotr Zalewa!
согласна,что удобно использовать jsfiddle, для консультаций, когда самостоятельно не получается найти ошибку или решить какую-то задачу.