Обновить
198.38

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Chainvas: изящный и миниатюрный «костыль», добавляющий средства цепного вызова (method chaining) к любому API

Время на прочтение3 мин
Количество просмотров2.8K
Благодаря библиотеке jQuery примерно с 2006 года (то есть лет пять как) никому не надо объяснять, что такое method chaining: это та самая техника программирования, в которой методы объекта могут быть вызваны друг за другом по цепочке, как в jQuery.

Главнейшим достоинством этой техники является заметная экономия усилий программиста. С нею программисту не приходится заново, неоднократно записывать имя объекта вот в такой манере:
obj.шмяк();
obj.тыдыжжь();
obj.ынц();

Вместо этого программист может вызвать все методы цепóчкою — в одну строку:
obj.шмяк().тыдыжжь().ынц();

Если же ему покажется, что такой вид записи хуже читается человеком, чем предыдущий (особенно когда у методов появляются параметры, иногда довольно обширные), то тогда программист может записывать имена методов с новой строки (JavaScript это позволяет), но всё равно экономить на имени объекта:
obj
   .шмяк(параметр1, параметр2, …)
   .тыдыжжь(параметр1, параметр2, …)
   .ынц(параметр1, параметр2, …);

На практике возможность такой техники обеспечивается тем, что ни один метод объекта не возвращает значение undefined. Вместо этого, если метод является командою, а не запросом (то есть выполняет некоторое действие, а не возвращает некоторое значение), то в конце его автор библиотеки пишет «return this» — этим-то и обеспечивается возможность записи вызова нескольких команд подряд в форме цепочки.

Насколько я знаю, устоявшегося русского эквивалента англоязычному словосочетанию «method chaining» пока что не существует. Наверное, можно говорить о «цепочечной» или, для простоты, о «цепной» форме вызова методов.

Удобство цепного вызова вызывает привыкание. Ну правда же: достаточно пару-тройку-другую недель попрограммировать на jQuery — и обыкновенные API начинают раздражать, даже бесить, своею допотопною невозможностью цепного вызова. Также недостаёт возможности задания их свойств в виде объекта, передаваемого методу, подобному .css({color: 'red', 'line-height': 1}) в jQuery.

Вообразите себе, например, как необыкновенно было бы удобно, кабы по холсту (<canvas>) можно было рисовать цепными вызовами в такой манере:
ctx.beginPath()
   .prop({
      lineWidth: 2,
      strokeStyle: '#333'
   }).moveTo(0,0)
   .bezierCurveTo(50,50, 80,80, 100,100)
   .stroke().closePath();

И средство для именно таких цепных вызовов появилось — благодаря Lea Verou. Вот оно:

[Chainvas]

Читать дальше →

sjFilemanager — Reloaded. AJAX + PHP файловый менеджер версия 1.0 бета

Время на прочтение4 мин
Количество просмотров7K
Много воды утекло с тех пор когда я сел за написания своего файлового менеджера. В то время поддержка ИЕ6 считалась обычным делом, а про фичи HTML5 можно было только мечтать. В общем вот ссылка на версию 0.1.0 альфа. В конце первого топика, я написал, что планирую сделать в будущем, можно сказать я сдержал свое обещание и хочу представить Вам версию 1.0b. Из того, что планировалось, была отброшена идея внедрения авторизации в менеджер, потому что, как говорили здесь, это пятое колесо. Рассмотрим, что изменилось и что улучшилось, но для начала скрин

Читать дальше →

Школа программирования Codecademy получила $2,5 млн

Время на прочтение1 мин
Количество просмотров2.9K
Компания Codecademy выполнила операцию Codecademy.add(investors) на сумму 2,5 миллиона долларов США. Кстати, одно из новых свойств объекта — Юрий Мильнер.

Напомним, что уникальный в своём роде стартап Codecademy обучает новичков JavaScript с помощью бесплатных интерактивных упражнений. Он открылся два месяца назад: за первые 72 часа работы сайт посетили 200 тыс. начинающих программистов, которые выполнили 2,1 млн уроков.

После получения такой значительной суммы инвестиций Codecademy может ещё долго работать бесплатно (в будущем они всё-таки планируют придумать какую-то бизнес-модель), а также может нанять контент-органайзеров и увеличить количество уроков на сайте. Новый контент будут добавлять силами коммьюнити по модели UGC. Например, недавно был запущен первый такой курс «Функции в JavaScript», написанный Альбертом Венгером.

accounting.js — форматирование чисел и валют

Время на прочтение2 мин
Количество просмотров28K
В одном из проектов мне понадобилось реализовать переключение валют с последующим реформатированием значений денежных сумм, встречающихся на странице.Как это у меня часто получается, я это реализовал и через пару недель наткнулся на небольшую библиотечку, которая позволяет довольно удобно выполнить именно эту операцию.
Читать дальше →

Паттерн «Обозреватель» и контекст вызова в Javascript

Время на прочтение3 мин
Количество просмотров13K
Хотя про паттерн «Обозреватель (Наблюдатель, Observer)» сказано достаточно, в том числе и на Хабре, вкратце повторюсь. Суть паттерна в наблюдении за состоянием неких субъектов системы и соответствующей реакции наблюдателей на изменения этих состояний. За одним субъектом может следить несколько наблюдателей, причём сам он об этом не знает (слабое связывание), но исправно оповещает всех об изменении состояния.

Удобно использовать Обозревателя на сайтах и в веб-приложениях, поэтому логично реализовать его с использованием самого популярного языка для веб-среды — Javascript.
Читать дальше →

Userscripts. Кроссдоменные запросы

Время на прочтение5 мин
Количество просмотров51K
Доброго времени суток.
Сегодня мы рассмотрим варианты организации кроссдоменных запросов в юзерскриптах.
В подробности реализации того или иного механизма я вдаваться не буду, но приведу пример кроссбраузерной оболочки для кроссдоменных запросов.
Приступим

Блеск и нищета GWT (или почему я не верю в Dart часть 2)

Время на прочтение6 мин
Количество просмотров11K
Одной из самых обсуждаемых тем на Хабре стало объявление Гугла о создании нового языка Dart, претендующего на то, чтобы полностью заменить Javascript.
Для Гугла это не первый проект подобного рода. С 2006 года существует Google Web Toolkit, позволяющий создавать веб-приложения полностью на Java. На нём, например, работают Adwords и Google Wave.
Но, не смотря на красивые обещания и очень серьезные, особенно по меркам 2006 года, возможности, GWT так и «не взлетел». Да, проект поддерживается и развивается, но сообщество разработчиков так и не сложилось. Сторонних компонентов мало, они не поддерживаются, знакомых с системой программистов найти сложно.
Практически все «плюшки» языка Dart, которые сейчас рекламирует Google, уже были реализованы в Webtoolkit-е. В этой статье я хочу проанализировать достоинства и недостатки GWT в попытке рассмотреть мутные очертания будущего Dart.
Читать дальше →

Почему я не верю в Dart

Время на прочтение4 мин
Количество просмотров8.7K
Признаться, сообщение о разработке в Google языка Dart я встретил с недоумением. Если coffeescript и прочие надстройки я считал просто чьим-то развлечением на досуге, то к Dart-у при всём желании не получается относиться как просто ещё к одной гиковской игрушке.

Сегодняшний пост про грядущее господство Дарта подтолкнул меня к тому, чтобы ясно сформулировать, наконец, почему я считаю Дарт всё равно просто гиковской игрушкой и в чем неправа корпорация Google. Начну, пожалуй, с цитаты:

«Нужна полная замена JS — язык широкого профиля: от простых скриптов, для сложных приложений»

Что в ней не так? Да то, что JavaScript и есть язык широкого профиля, от сложных скриптов до сложных приложений. JavaScript — высокоуровневый и чрезвычайно мощный объектно-ориентированный язык, и именно поэтому все попытки его «улучшить» проваливаются с треском (ну, пока, по крайней мере).

Читать дальше →

Базовая архитектура веб-приложения на Backbone.js

Время на прочтение2 мин
Количество просмотров22K
Разработчики часто просят рассказать о моём опыте использования Backbone.
Многие слышали об этом MVC-фреймворке, смотрели примеры и документацию, но не решаются начать с ним работать. Поэтому вчера я сделал мини-доклад на встрече MoscowJS, призванный рассказать о том, как мы построили базовую архитектуру и какие получили плюсы. И сегодня в этой статье я публикую слайды, схемы и краткое описание.


Читать дальше →

Userscripts. Углубляемся

Время на прочтение6 мин
Количество просмотров46K
Как упоминалось в предыдущей статье, юзерскрипты поддерживаются всеми современными браузерами. И даже кое-как поддерживаются в IE7 и выше.

В этой статье мы поговорим о браузерах:
  • Ограничения
  • Проблемы
  • Расширения для запуска юзерскриптов
  • Установка юзерскриптов


Приступим-с

Учимся писать userscript'ы

Время на прочтение7 мин
Количество просмотров295K
Доброго времени суток всем желающим приобщиться к миру пользовательских скриптов (они же userscript, userJS, юзерскрипты).

В этой статье я хочу поведать о том, что такое юзерскрипты, c чем их едят и, главное, как их готовят!

Внимание: предполагается минимальное знание javascript.
На практике доказано: юзерскрипты может писать человек, не знакомый с программированием, но обладающий усидчивостью и желанием изучить javascript!
О том, что такое javascript и как с ним обращаться, можно узнать на javascript.ru.
Поехали!

Работа с last.fm API на JavaScript

Время на прочтение5 мин
Количество просмотров8.6K

С ходом времени автор понял, что ниженаписанное — полная глупость


Для тех, кому не хочется читать


Страничка, на которой всё нижепроделанное в примере (включайте alert).
Онлайн плеер, который и заставил меня дойти до этого топика.

Введение


Доброго времени суток! Не так давно затронул тему «Онлайн-плееров» и им подобных. Их много, очень я бы сказал. Я захотел сделать аналог, в первую очередь для себя. Захотел по стандарту — база vk.com, скробблинг last.fm (позже ласт), альбомы с него же, плейлисты, сердечки и так далее. Сразу вытекла проблема — мой хостинг очень плох для постоянных запросов на него. Ничего не оставалось, как перейти почти полностью на javascript (позже js). Итак, коль русского описания «Как работать с last.fm api javascript» я так и не нашёл, а потратил много нервов и времени на решение этой проблемы, то начнём, пожалуй.
Читать дальше →

Маленькие да удаленькие — 3 библиотеки JavaScript на всякий случай

Время на прочтение2 мин
Количество просмотров4.1K
Прочитал пост про Kerning.js — небольшую js-библиотеку, можно даже сказать утилиту, для реализации чудес типографики на веб-страницах. И вспомнил, что пользовал не так давно нечто подобное — библиотеку Lettering.js.

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

Итак, Lettering.js — помощник «радикального» веб-типографа, Cryptico.js — помощник Штирлица и Rasta.js — такой простой ajax get/set помощник. Далее ссылки на сайты разработчиков этих библиотек и инструкций по их использованию.
Читать дальше →

Ближайшие события

Kerning.js

Время на прочтение1 мин
Количество просмотров2.8K
Свершилось, теперь чудеса типографики стали доступны и нам простым смертным.

Как использовать


Да легко, просто подключаем и используем.
<script src="kerning.js"></script>

Больше ничего не нужно, остальное она сделает сама.

Узнать о самых крутых вкусностях

График «мастер-детали» средствами Highcharts и jQuery UI

Время на прочтение4 мин
Количество просмотров7.3K
При наличии большого количества статистических данных, например таких, как котировки валют (и прочие данные, связанные с финансовой тематикой), потребление чего-либо (воды и т.д.), вообще говоря, любых данных, которые так или иначе можно представить в виде пары «дата — значение», бывает удобно представить их в графическом виде. Так как данные могут быть собраны за достаточно большой период времени, имеет смысле представлять их в виде пары графиков: «мастер»-график, на котором будут отображены все точки, и график «детали», где будут отображены точки за требуемый период. В данной статье я постараюсь рассказать, как построить график подобного типа при помощи стандартных средств библиотек HighCharts и jQuery UI.

Приведенное ниже решение, в принципе, является велосипедом, т.к. с появлением нового продукта от разработчиков HighCharts, который получил название HighStock, необходимость в реализации подобным способом отпадает. Впрочем, HighStock пока еще в состоянии beta.
Читать дальше →

Валидация в JavaScript с помощью Valid8

Время на прочтение2 мин
Количество просмотров5K
Часто приходится «насыщать» интерфейсы с помощью JavaScript. В основном работаю через jQuery, всё нравится, но одна беда – валидация. Постоянно приходится изобретать «велосипед», искать в сети обрывки кода; а ведь хочется написать пару строчек без углубления в детали. Радость не заставила себя ждать: нашёл библиотеку Valid8 (произносится как validate), и, наконец, решил проблему написания кода валидации.

Как пользоваться


Пользоваться библиотекой оказалось очень просто, чего не скажешь о склеивании jQuery «обрезков» из интернета. Чтобы подключить библиотеку, нужно зайти сюда и нажать заветный Download. Скачается архив, в котором особый интерес представляет файл jquery.valid8.js, его копируем в папку с js файлам нашего проекта и подключаем библиотеку в html:
<script src="/js/jquery-1.6.3.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/jquery.valid8.js" type="text/javascript" charset="utf-8"></script>

Допустим у нас есть форма:
<form><ul>
<li><input type="text" id="inputSome" /></li>
</ul></form>

Добавляем валидацию (по умолчанию только проверка обязательности заполения), передавая в качестве параметра строку с сообщением об ошибке. Работаем в стиле jQuery:
$('#inputSome').valid8("Заполни это поле!");

После того как поле получит фокус и вы из него выйдете не заполнив, объемлющий тег (в нашем случае li) получит класс стиля error.
Для визуализации ошибок добавим CSS в head нашего документа:
<style>
.error input { background:pink; }
</style>

Валидация готова. Все.

Читать дальше →

Создание Doodle jump на HTML5

Время на прочтение7 мин
Количество просмотров16K
Doodle Jump
Здравствуйте, Хабражители!
В этом топике я хочу рассказать о том, как я создал браузерную игру «DoodleJump» на HTML5 без использования каких либо то фреймворков. Для тех кто не знает, DoodleJump — это популярная мобильная игра где главный герой «doodler» бесконечно прыгает вверх по платформам, преодолевая различные препятствия, и собирая бонусы. Эта игра широко распространена почти на всех мобильных платформах, но приличной браузерной версии этой игры нет, поэтому я и решили написать браузерную версию этой игры, пусть даже управляемую клавишами а не гироскопом.
Читать дальше →

Streams.js: отложенные (ленивые) вычисления в Javascript

Время на прочтение2 мин
Количество просмотров5.2K
Javascript-библиотека stream.js вводит «новую»1 структуру числовых данных: поток (stream). Это контейнер, который похож на массив (array) и связный список (linked list), но содержит неограниченное количество элементов, реализованное методом отложенных вычислений.

var s = Stream.range( 10, 20 );  
s.print(); // prints the numbers from 10 to 20

Для аргумента Stream.range( low, high ) можно указать только начальную границу диапазона Stream.range( low ), тогда поток будет состоять из неограниченного количества натуральных чисел. По умолчанию Stream.range() начинается с 1.
Читать дальше →

Simile TimeLine — библиотека для отображения событий на шкале времени

Время на прочтение3 мин
Количество просмотров5.1K
Время идет вперед. Годы летят, только успевай считать уж сколько прошло их с тех пор как в школу пошел, как поступил в институт, как женился да дети родились. А ведь помимо своей жизни есть еще много вещей которые изменяются, развиваются, появляются и исчезают с течением времени.

Так вот интересным инструментом для наглядного представления событий и периодов на шкале времени является Simile TimeLine.

Далее я расскажу, что сподвигло меня использовать данный инструмент, и в чем я нахожу его использование крайне удобным. В моем описании будет немного про Астериск, колл-центры и, собственно, javascript-библиотеку Simile TimeLine.
Читать дальше →

Визуализация статистических данных с помощью Highcharts

Время на прочтение7 мин
Количество просмотров28K
В этой статье я хотел бы изложить собственный опыт построения наглядных и презентабельных графиков с помощью Highcharts на основе статистики ОС и дисковых массивов. Для многих современных ОС и дисковых массивов существуют механизмы, основанные на встроенном или дополнительном ПО, которые позволяют получать данные о работе подсистем ОС или массива (имеются в виду не трассировки, а статистические показатели, усредненные по заданному интервалу). Также можно собирать статистику счетчиков пакетов и ошибок на интерфейсах коммутаторов LAN и FC. Многие хотят визуализировать эти данные и использовать в отчетах или же самописной системе мониторинга.
image
Читать дальше →

Вклад авторов