Обновить
142.88

JavaScript *

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

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

Sugar — подслащённый Javascript

Время на прочтение6 мин
Охват и читатели5.5K
Что же такое Sugar?
Это javascript-библиотека для работы со встроенными объектами javascript, которая:
  • расширяет встроенные объекты языка, добавляя полезные и интуитивно-понятные методы;
  • добавляет кросс-браузерную функциональность, где она сломана или ее нет;
  • полностью покрыта тестами;
  • легко взаимодействует с другими фреймоворками и сторонним кодом;
  • проста в понимании и использовании

В качестве примера использования, автор приводит вот такой код:
getLatestTweets(function(t) {
    var users = t.map('user').unique();
    var total = users.sum('statuses_count').format();
    var top = users.max('followers_count').first();
    var count = top.followers_count.format();
    var since = Date.create(top.created_at);
    return users.length + ' users with a total of ' + total + ' tweets.\n' +
    top.screen_name + ' is the top with ' + count + ' followers\n' +
    'and started tweeting ' + since.relative() + '.';
});


Не правда ли, код читается почти как английский текст.
Самые нетерпеливые могут изучить предоставляемые функции по этой ссылке, а остальных ждёт краткое описание под катом.
Читать дальше →

Функция К.O'Nsole.log для отладки в разных браузерах

Время на прочтение5 мин
Охват и читатели2.1K
Хорош console.log, а нахваливать дальше некуда. И поддерживается не везде, и многобуквием страдает. И появляется задача иметь несложную функцию, настолько же гибкую, как console.log (или более), но приспособленную к разным браузерам без переделок, чтобы вывести одно или несколько значений. В отладке часто нужны текстовые поясняющие заголовки в строке, поэтому оказалось удобным иметь метод, добавленный к строке (объект String) с именем Alert, выполняющий то же самое, что и console.log и выводящий контекст-строку впереди списка аргументов. (Строку в апострофах, потому что удобно затем копировать и искать по кодам, где такой заголовок написан.)
Читать дальше →

Виджет выпадающих списков Chosen: реализуем динамическое добавление позиций

Время на прочтение8 мин
Охват и читатели18K
По мотивам топика Chosen: сделай выпадающие списки более дружественными.

Довольно симпатичный виджет, иногда даже может быть полезен (допустим когда есть определенные требования к дизайну). Но в данный момент виджет не позволят добавлять позиции динамически, что возмутило товарища alexsrdk, да и меня тоже :) Сейчас попробуем это дело исправить.
Читать дальше →

KnockoutJS: Фильтрация списков на лету

Время на прочтение6 мин
Охват и читатели11K
В минувшую субботу я имел честь читать доклад о MVVM и KnockoutJS на .NET Saturday в Днепорпетровске.
Доклад был достаточно тепло встречен публикой и у многих появились интересные вопросы,
которые не были раскрыты во время самого доклада.
Собственно говоря, я решил написать публичные ответы на некоторые из них на Хабре.

Сегодня я отвечу на вопрос о template-binding. «Как быть, если мне надо отобразить не все записи, а только подходящие определённым условиям».

Ответ находится под хабракатом.
Читать дальше →

Imperavi: удобный и действительно красивый JS WYSIWYG редактор

Время на прочтение1 мин
Охват и читатели22K
В продолжение темы о красивой и удобной JS визуализации (http://habrahabr.ru/blogs/javascript/124899/) хочу рассказать вам о WYSIWYG редакторе, на который сегодня случайно наткнулся.

Вы наверное часто используете различные WYSIWYG редакторы в ваших проектах. Я их тоже часто использую, так уж получается, что они очень нравятся секретаршам и т.д. нашим пользователям.

Таких редакторов существуют десятки, но все они мне почему-то не нравилисись: то выглядит уж очень топорно, то работает совершенно криво. В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.

И вот сегодня я совершенно случано наткнулся на редактор, который мне полностью подходит:
  • работает стабильно
  • выглядит очень стильно
  • написан на jQuery

Имя этому чуду – Imperavi.
Попробуйте сами и думаю, что вам понравится.

Скриншот:
image

UPD
Более новая версия редактора: http://imperavi.ru/redactor/.

Chosen: сделай выпадающие списки более дружественными

Время на прочтение1 мин
Охват и читатели55K
Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()
(версия для jQuery)

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

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

Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7

Knockout, практический опыт использования

Время на прочтение12 мин
Охват и читатели70K
Некоторое время назад я обещал рассказать о нашем опыте работы с Knockout. Мы используем данную библиотеку в одном из проектов в течение последних 4 месяцев. Это немного, но за это время команда набрала некоторый опыт, который, я думаю, может быть интересен читателям.
Осторожно, много текста!

Получаем данные из Javascript через функции Java

Время на прочтение3 мин
Охват и читатели15K

Хоббит или туда и обратно


Некоторое кол-во времени назад мне срочно потребовалось найти возможные способы получения переменных из js и браузера, чтобы передать их значение в моем приложении на java. К сожалению, на хабре данный вопрос не был раскрыт или возможно сила покинула меня и поиск дается уже не так легко.
Как бы то ни было сегодня я постараюсь в какой то мере пролить свет на данный вопрос. Итак приступим!
Читать дальше →

Dojo Build System, собственный опыт создания сборки

Время на прочтение5 мин
Охват и читатели4.8K
Dojo — не самый популярный JavaScript фреймворк, несмотря на все свою мощь и положительные качества. Информация, которую я хочу донести сегодня до читателя, требуется для абсолютно каждого проекта, построенного с использованием этой технологии.

А поговорим мы о системе сборки.
Читать дальше →

JavaScript F.A.Q: Часть 2

Время на прочтение14 мин
Охват и читатели77K
image

Около 2-х месяцев назад я и TheShock собирали вопросы по JavaScript в теме FAQ по JavaScript: задавайте вопросы. Первая часть, те вопросы, которые достались мне, появилась буквально через несколько дней JavaScript F.A.Q: Часть 1, а вот вторая часть все не выходит и не выходит. TheShock сейчас переезжает в другую страну и поэтому ему не до ответов. Он попросил меня ответить на его часть. Итак вторая часть ответов — те вопросы, которые достались тоже мне.
Читать дальше →

Асинхронная загрузка изображений в скрытом iframe: подводные камни

Время на прочтение3 мин
Охват и читатели7.9K
Недавно пришлось делать загрузчик фотографий на сервер. Поскольку опыт использования сторонних скриптов уже был, а время на их доработку часто было больше времени на разработку скрипта с нуля, то было принято решение сделать загрузчик самостоятельно.

При обращению к гуглу выдаёт много статей по загрузке файлов через iframe. Алгоритм в общем сводится к:
1) Создаём скрытый фрейм (обычно просто обнуляется ширина и высота через HTML и CSS свойства)
2) Устанавливаем action формы в имя фрейма.
3) Отправляем файл. Радуемся.

Для удобства использования отдельная кнопка «Начать загрузку» не создавалась, а был повешен обработчик onChange для файлового input'a.

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

Разработка архитектуры вашего приложения в Ext JS 4

Время на прочтение6 мин
Охват и читатели3.8K
Масштабируемость, удобство обслуживания и гибкость приложений во многом определяются качеством архитектуры приложения. К сожалению, архитектуру приложения часто относят к второстепенным факторам. Концепты и прототипы превращаются в массовые приложения, а примеры кода копируются и вставляются «как есть» в фундамент многих приложений. Вы можете захотеть двинуться лёгким путём из-за быстрого прогресса, который вы видите в начале проекта.
Читать дальше →

JavaScript-библиотеки для работы с SVG

Время на прочтение1 мин
Охват и читатели20K
Наиболее популярными библиотеками для работы с SVG на JavaScript являются Raphael, Jquery.SVG, SVGWeb. Есть немного более профильные библиотеки, которые используют SVG для решения узких задач: карты, данные и манипулирование объектами.

В общем, под катом краткий обзор библиотек, с которыми мне пришлось немного поработать.

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

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

Разработка приложения живого поиска по Twitter с помощью Knockout, jQuery и ASP.NET MVC 3

Время на прочтение14 мин
Охват и читатели7K
Достаточно не тривиально разработать хорошо спроектированный front-end веб-приложения с уровнем отклика, производительностью и фичами, которые ожидают пользователи сегодня. Легко потеряться в кипящей смеси jQuery обработчиков событий, HTML разметки и AJAX вызовов и даже относительно простой GUI быстро может стать кошмаром для сопровождения.

Один из способов добавления некоторой структуры и порядка на клиентской стороне – использование фреймворка вроде Knockout. Knockout – это свободная Javascript библиотека с открытым исходным кодом, которая помогает реализовать Model-View-View Model (MVVM) паттерн на клиенте. Она хорошо документирована и официальный веб сайт великолепная точка старта с кучей реальных примеров, которые не только демонстрируют использование встроенных фич библиотеки, но и показывают, как расширить её свои собственными фичами.

В этом посте мы рассмотрим, как Knockout может быть использован совместно с плагином отображения, каким-нибудь jQuery и ASP.NET MVC 3 backend (или модель, как вам нравится) для построения простого, но эффективного приложения для живого поиска в Twitter.

Ок, сделаем это.

Масштабируемые JavaScript приложения

Время на прочтение22 мин
Охват и читатели40K
Более месяца назад в статье FAQ по JavaScript: задавайте вопросы был задан вопрос «Подскажите примеры хорошего подхода организации JS кода к сайту на достаточно высоком уровне. Как можно узнать подробнее практики реализации например gmail?».

Пришло время ответить на данный вопрос. Я немного затянул т.к. хотел рассказать доклад на одноименную тему на Я.Субботнике. Доклад был очень коротким многие важные моменты пришлось выкинуть. Статья — более-менее полная версия.

Эта статья о том, как сделать крупное веб-приложение расширяемым и поддерживаемым: архитектура, подходы, правила.
Читать дальше →

Three.js — 3D в браузере своими руками или WebGL становится ближе

Время на прочтение7 мин
Охват и читатели33K
Тема про three.js от mrdoob в свое время проскакивала на хабре, но детально еще не рассматривалась. В этой и(возможно) последующих статьях я постараюсь исправить это упущение. К сожалению, three.js не предоставляет никакой внятной документации, поэтому все знания по нему получены экспериментальным путем и ковырянием спеки WebGL, т.е. любые дополнения автору топика только приветствуются.

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

Введение в HTML5 History API

Время на прочтение4 мин
Охват и читатели246K
До появления HTML5 единственное, что мы не могли контролировать и управлять (без перезагрузки контента или хаков с location.hash) — это история одного таба. С появлением HTML5 history API все изменилось — теперь мы можем гулять по истории (раньше тоже могли), добавлять элементы в историю, реагировать на переходы по истории и другие полезности. В этой статье мы рассмотрим HTML5 History API и напишем простой пример, иллюстрирующий его возможности.

Основные понятия и синтаксис


History API опирается на один DOM интерфейс — объект History. Каждый таб имеет уникальный объект History, который находится в window.history. History имеет несколько методов, событий и свойств, которыми мы можем управлять из JavaScript. Каждая страница таба(Document object) представляет собой объект коллекции History. Каждый элемент истории состоит из URL и/или объекта состояния (state object), может иметь заголовок (title), Document object, данные форм, позиция скролла и другую информацию, связанную со страницей.

Основные методы объекта History:
  1. window.history.length: Количество записей в текущей сессии истории
  2. window.history.state: Возвращает текущий объект истории
  3. window.history.go(n): Метод, позволяющий гулять по истории. В качестве аргумента передается смещение, относительно текущей позиции. Если передан 0, то будет обновлена текущая страница. Если индекс выходит за пределы истории, то ничего не произойдет.
  4. window.history.back(): Метод, идентичный вызову go(-1)
  5. window.history.forward(): Метод, идентичный вызову go(1)
  6. window.history.pushState(data, title [, url]): Добавляет элемент истории.
  7. window.history.replaceState(data, title [, url]): Обновляет текущий элемент истории
Читать дальше →

Итераторы и генераторы на основе функций

Время на прочтение6 мин
Охват и читатели5.3K
Поддержка итераторов и генераторов в качестве языковых конструкций появилась в javascript только в версии 1.7, и об использовании этих чудесных вещей в браузерах еще долго можно будет только мечтать. Однако использовать итераторы и генераторы в виде паттернов проектирования в javascript можно уже сейчас, и более того, делать это достаточно легко, а иногда даже приятно :)
Добро пожаловать под кат

Cвязывание данных в JavaScript-приложениях: автороутинг событий

Время на прочтение7 мин
Охват и читатели3.4K
Привет Хабр! В этой статье я рассмотрю один из вариантов построения архитектуры клиент-серверного веб-приложения с точки зрения связывания данных. Этот вариант не претендует на оригинальность, но лично мне позволил значительно сократить время на разработку, а также оптимизировать время загрузки.
Читать дальше →

Реализация HTTP server push с помощью Server-Sent Events

Время на прочтение4 мин
Охват и читатели18K
На эту тему было уже много статей, но раскрыта далеко не вся правда. Для тех, кто пропустил — читайте Создание приложений реального времени с помощью Server-Sent Events .

Как же работает Server-Sent-Events?


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

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