Jsfiddle – учимся играть на скрипке

Добрый день!

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

Так же, в виду того, что в блоге открыта рубрика jQuery и в прошлой статье мы уже познакомились с особенностями jQuery в WordPress, данный инструмент очень нам поможет в дальнейшем в изучении jQuery.

Итак, инструмент называется JSFIDDLE и расположен по адресу: jsfiddle.net.

Что означает js, думаю, понятно – это сокращение JavaScript, а вот fiddle, в переводе с английского – это “скрипка”.

Давайте научимся играть на этой js-скрипке!

Заходим на сайт jsfiddle.net. Мы видим, что страница поделена на четыре области и по подсказкам в верхнем правом углу в каждом блоке понимаем, что они предназначены для ввода HTML кода, CSS кода, JavaScript кода и последнее окошко – для вывода результата.

Сразу протестируем работу на простом примере.

1. В HTML поле напишем html-код кнопки.

2. В JavaScript поле создадим jQuery код обработки события – клик по кнопке.

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!