Все потоки
Поиск
Написать публикацию
Обновить
222.62

JavaScript *

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

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

Визуализация «В Контакте»: Скажи мне, кто твой друг?

Время на прочтение2 мин
Количество просмотров146K
Привет, Хабралюди!

У меня есть хобби. Я ночами (в нерабочее время) пишу библиотеку укладки графов: vivagraph.js. Хотел поделиться с вами, узнать что думаете. Визуализировал я сеть друзей своих на «В Контакте» с использованием WebGL. Но лучше один раз увидеть, чем читать, верно?



Это мои друзья. Каждая точка — человек, целый мир, с которым так или иначе мне повезло встретиться. Линия между точками обозначает дружбу. По этой сети можно, правда, сказать многое о человеке.

Как построить свою сеть?

Javascript: ООП, прототипы, замыкания, «класс» Timer.js

Время на прочтение19 мин
Количество просмотров97K
Здравствуйте программисты начинающие, законченные, а также все сочувствующие. Как известно, ничто не познается так хорошо, как на собственном опыте. Главное, чтобы опыт был полезный. И в продолжении этой простой мысли я хочу предложить заняться несколькими полезными делами сразу:
  • Побеседовать на тему «ООП с человеческим лицом».
  • Разобраться с прототипами в javascript, коротко и сердито!
  • Вспомнить, что «замыкание» это не только ценный мех… удар током.
  • Написать на javascript класс Timer — этакий планировщик событий для запуска анимаций, событий, любых функций.
  • Весело провести время!

Предупреждение! Если вы не ждете от статьи ничего веселого… то ошибаетесь. Людям с пониженным чувством юмора читать… еще более рекомендуется! Ну-с, приступим…
Читать дальше →

Greensock: анимация на JavaScript

Время на прочтение3 мин
Количество просмотров101K
Недавно я писал, что Greensock, прекрасная библиотека для скриптовой анимации на Flash, теперь поддерживает и JavaScript. В этой статье я продемонстрирую основы работы с GSAP v12 (beta). Результат будет примерно таким:


Сразу оговорюсь, что графику и идею для примера я взял из документации $fx(), ведь кто из нас откажется
проанимировать НЛО

Принцип работы SIP клиента в браузере

Время на прочтение2 мин
Количество просмотров15K
Пообщавшись в комментариях к посту, я понял, что не все до конца понимают принцип работы SIP в браузере. Поэтому, решил экспромтом написать небольшую статью, где в общих чертах раскрыть эту тему.


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

Пишем и оптимизируем Жизнь Конуэя на JS

Время на прочтение5 мин
Количество просмотров6.6K
Обновляя недавно дизайн своего хомяка, подумал – а не сделать ли мне какую-нибудь необычную страницу с 404-й ошибкой? Поскольку в детстве я был впечатлен Жизнью Конуэя (как возможно и многие из читателей), решил её на JS и реализовать.

Казалось бы, что сложного в Жизни: если у занятой клетки 2 или 3 соседа – она остается, если у пустой ровно 3 – рождается? В этой статье я расскажу о своей оптимизации алгоритма и отрисовки на canvas-е, некоторых не очевидных моментах целочисленной/бинарной арифметики в JavaScript.

Забегая вперед, конечный результат можно увидеть тут, исходники видны там же (да еще и по лицензии CC BY).
Читать дальше →

Видео SIP клиент в браузере

Время на прочтение1 мин
Количество просмотров15K
Сейчас почти не осталось препятствий для создания полноценного SIP клиента в браузере. Необходимый для видео конференций WebRTC уже можно протестировать, например, в Chrome Canary. Существует draft-ibc-sipcore-sip-websocket, который добавляет WebSocket в качестве еще одного транспорта для SIP. И уже появляются первые реализации SIP клиентов:



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

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

Greensock — теперь и для JavaScript

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


Удивительно, но факт: на хабре практически нет статей о Greensock — великолепной библиотеке для скриптовой анимации на Flash. Возможно, это связано с тем, что Flash-разработчиков тут меньше, чем веб-разработчиков?

Впрочем, теперь уже не важно: Greensock v12 (он же Greensock Animation Platform или GSAP) умеет анимировать на JavaScript. Любое свойство любого объекта можно проанимировать десятками способов, соединить анимации в таймлайн, поставить этот таймлайн на паузу или развернуть задом наперёд. Всего парой строчек.

Более того, Greensock работает значительно быстрее jQuery, YUI, MooTools или Dojo. Разработчики говорят о тысячах процентов, но зачем верить на слово, когда есть animation speed test.

Подробности на английском: www.greensock.com/v12/, а под катом — краткое изложение на русском языке.
Читать дальше →

HTML5 History API уже сегодня и без ограничений

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

Библиотека для работы HTML5 History API


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

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

CanvGauge — измерительный прибор с помощью canvas для HTML5

Время на прочтение1 мин
Количество просмотров7.7K
HTML5 Canvas GaugeДобрый день, хабровчане!

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

Имитируем пересечение, исключение и вычитание, с помощью опережающих проверок, в регулярных выражениях в ECMAScript

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

От переводчика


Это перевод небольшой заметки, написанной вчера Lea Verou, в ней предлагается интересная, хотя и не новая техника для решения повседневных задач.

Информация в статье касается ECMAScript, но может использоваться и в других RegExp Движках (хотя и есть вероятность, что там есть более подходящее решение).

Если примеры кажутся вам сложными, рекомендую играть с ними в консоли, по мере прочтения. И Заранее прощу прочтение за пугающее название.

Статья


Если вы какое-то время используете регулярные выражения, то наверняка вы сталкивались с разными вариантами следующих задач:

  • Пересечение:«Что-то, что совпадает с шаблоном А и шаблоном Б»
    Например: Пароль, минимум 6 символов, в котором хотя бы одна цифра, хотя бы одна буква, и хотя бы один специальный символ

  • Исключение: «Я хочу что-то, что совпадает с шаблоном А, но не совпадает с шаблоном Б»
    Например: Любое целое число, которое не делится на 50

  • Отрицание: Все. Что не совпадает с шаблоном А
    Например: Строка, которая не содержит в себе слово «Foo»


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

Простой универсальный переключатель на JavaScript

Время на прочтение8 мин
Количество просмотров53K
При разработке сайтов нередко возникает необходимость в каком-либо переключении их состояния, обычно для этого используются псевдоссылки: скрыть или показать подсказку, поле ввода, другую часть страницы.

Можно каждый раз писать JavaScript-код и стили к нему, но со временем это приводит к разрастанию кода, с чем в определенный момент мы и столкнулись.

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

Mobiscroll — кастомный select для мобильных сайтов и не только

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

К каждому, кто сталкивался с разработкой сайтов под iOS/Android/etc (или native-приложений через phonegap и иже с ним), рано или поздно наверняка приходило осознание того факта, что стандартные управляющие элементы форм не очень удобны для работы с touch-экранов.

И если input'ы и textarea вполне можно отрисовать с помощью css, то с селекторами ситуация гораздо более грустная — и не улучшить особо, и выбирать, например, дату, последовательным выбором трех выпадающих списков — занятие не из приятных.
Помогает в решении этой проблемы мультиплатформенный (обещают как минимум работу на iOS/Android, но с некоторыми помарками работает и на MeeGo — это из проверенного собственноручно) select-заменитель Mobiscroll, с некоторым трудом нагугленный мной пару недель назад.

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

Портируем C/C++ библиотеку на JavaScript (xml.js)

Время на прочтение7 мин
Количество просмотров21K
Статья является дополненным переводом статьи «HOWTO: Port a C/C++ Library to JavaScript (xml.js)» (автор: azakai). Автор оригинальной статьи имеет приличный опыт портирования C/C++ библиотек в JavaScript. В частности, он успешно портировал lzma.js и sql.js. В своей статье он описывает общую схему портирования C/C++ кода на примере libxml – открытой библиотеки для валидации XML.
Читать дальше →

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

Работа с локальным хранилищем, как с объектом? Легко!

Время на прочтение3 мин
Количество просмотров15K
Когда появился localStorage я был рад, как слон, но, немногим позже, после подробного изучения вопроса, я несколько разочаровался: там могут храниться только строки, а об объектах можно было забыть. Приходилось превращать их в строки для хранения, приходилось обратно конвертировать строку в объект для работы с ним, затем опять конвертировать в строку, чтоб сохранить. Не спорю, есть замечательные библиотеки, позволяющие манипулировать хранилищем максимально просто, но вызывать функции как-то не очень хотелось.

localStorage = { a: { b: 1 }, c: { d: 2 } }
localStorage.a.b = 3;

Круто было бы, не так ли?

Относительно давно, где-то около полугода назад я задался вопросом: как же, блин, сделать так, чтоб можно было работать с localStorage вообще без функций, чисто как с объектом. Challenge accepted!

Как говорит небезызвестный Геша: “Всё, я здзелал”.

Дальше читать не обязательно. Более разумное решение находится здесь: habrahabr.ru/post/144998

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

Все JavaScript библиотеки в одном месте

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

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

Впервые увидел настолько полную wiki по JavaScript либам, не смог с вами не поделиться.

Написание сложных интерфейсов с Spine.js

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

Введение в Spine.js


Spine представляет собой небольшой фрэймворк, который позволяет работать по схеме MVC, создавая приложения непосредственно на языке JavaScript, что обеспечивает логическое разделение кода, наследование моделей через классы и расширения. Также во многом этот инструмент базируется на Backbone.js API, так что те разработчики, которые имели дело с данным фрэймворком, без труда разберутся и в Spine (однако существует целый ряд существенных различий). Spine.js может работать совместно с HTML5 и асинхронными запросами сервера.
Читать дальше →

Что у нас «Лучшего» на сегодня?

Время на прочтение3 мин
Количество просмотров967
К вопросу о том, нужно ли вводить коэффициенты тематики статей, чтобы Хабр более соответствовал той идее, с которой он приобрёл популярность.

Сегодня, вечером пятницы (после которой будет ещё один рабочий день, поэтому не совсем пятница, но всё же) имеем такую картину популярности статей на Хабре, с комментариями по типу статей:
Лучшее за 24 часа (17:00 MSK)


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

Внутренности jQuery. Поиск кода, выполняемого по событию

Время на прочтение4 мин
Количество просмотров25K
Чем дальше в лес, тем толще партизаны. Нет, не так. Чем старше веб, тем больше джаваскрипта

Клиентского кода в веб-приложениях с каждым годом действительно становится все больше. Подчас это десятки файлов с сотнями функций. И что делать, когда нам нужно поменять код, выполняемый по событию (например, клик по ссылке). Как его найти? Задавшись решением этой задачи, я придумал несколько разных вариантов. Каждый из них имеет свои плюсы и минусы. И в конце статьи я предлагаю метод, который мне кажется оптимальным.
Читать дальше →

Стереоскопический эффект на 3D-картах

Время на прочтение1 мин
Количество просмотров2.8K
Если у вас есть под рукой стерео-очки, то вы можете насладиться 3D-городами на Nokia Maps. Картой можно управлять и здания кажутся очень объёмными и реалистичными.



Всё это реализовано на WebGL и в данный момент доступны самые популярные города мира.

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