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

JavaScript *

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

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

DOM Storage window broadcast

Время на прочтение2 мин
Количество просмотров8K
В статье речь пойдет об интересном DOM Storage эвенте, который позволяет выполнять броадкаст общение между окнами обраузера одного домена не подозревающих об существовании друг друга.

image

DOM Storage (localStorage sessionStorage) кроме потрясающей возможности хранения информации на клиенте имеет ещё одну документированную, но малоизвестную возможность — уведомление об изменении/удалении элемента DOM Storage для всех окон открытых из текущего домена.
Читать дальше →

Программная генерация событий DOM 2 Events

Время на прочтение7 мин
Количество просмотров42K
image

Вступление


Здравствуйте, Хабрачеловеки.

В этой статье я хочу рассказать сообществу о такой полезной штуке, как DOM Events. Все, кто хоть как то связан с Javascript, знают, что в этом языке события и их обработка являются одним из важнейших и часто используемых свойств, но не многие знают, как эти события генерировать программно. Собственно, этому и посвящена статья: в ней рассказано, что это, зачем нужно, и как это использовать. О listener'ах речи идти не будет, хоть эта тема весьма тесто связана с рассматриваемой.

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

Настоящие online, offline события

Время на прочтение5 мин
Количество просмотров3.8K
С появлением online, offline событий многие разработчики, особенно мобильных веб-севисов возложили на них большие надежды. Казалось бы online, offline говорят нам когда у пользователя есть доступ к интернету, но на самом деле это далеко не так. Подробности их поведения когда-то давно описал Резиг в своем блоге.



Кратко — online, offline сигнализирует нам, что пользователь вручную переключился в оффлайн либо у него нет ни одного соединения с сетью. Фактически эти 2 события бесполезны в том виде в котором они представлены — я не знаю кто будет вручную переключать таб в режим онлайн/оффлайн, и с сетевыми подключениями тоже все плохо. Ну и, конечно, доисторические бразуеры не знают эти события.

Под катом элегантное и 100% кросбраузерное решение, позволяющее получить настоящие online, offline события.
Читать дальше →

jCanvaScript: JavaScript библиотека для работы с html5 canvas

Время на прочтение3 мин
Количество просмотров11K
imageВсем доброго!
jCanvaScript — это, как видно из «картинки для привлечения внимания», JavaScript-framework. Не трудно, я думаю, догадаться из названия топика, что предназначение библиотеки — работа с элементом HTML5 canvas. Под катом всех заинтересовавшихся ждет небольшой рассказ о библиотеке и о том, как она создавалась.
Читать дальше →

Canvas Indicator — альтернатива для AjaxLoad.gif

Время на прочтение3 мин
Количество просмотров3K
Многие наверняка используют индикаторы процесса, например, когда передаете/получаете какие-нибудь данные через AJAX.

Однажды я озадачился, чтобы при нажатии на кнопку, которая отправляет данные формы на сервер, внутри неё появился этот самый индикатор. Изначально фон был однотонный, но в любой момент дизайнеры могли заменить его на другой, либо вообще сделать градиент.

Делать специальный GIF под каждую ситуацию довольно глупо. Поэтому правильное решение — использовать Canvas.

Если вы еще не решили эту проблему, я жду вас под катом

Проверка на отрицательный ноль

Время на прочтение1 мин
Количество просмотров5.1K
Сегодня обнаружил, что функция Math.atan2 возвращает разный результат в зависимости от того, с каким знаком в нее передать 0.

> 0 === -0           // => true
> Math.atan2(0, -0)  // => 3.141592653589793
> Math.atan2(-0, -0) // => -3.141592653589793


Работает это потому, что JavaScript хранит числа по стандарту IEEE 754, в котором все числа, включая ноль, имеют знак. Буквально вчера на эту же особенность обратил внимание некий Аллен Вирфс-Брок. Его способ проверки еще проще:

function isNegative0(n) {
  return n === 0 && (1 / n) === -Infinity
}


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

Все что нужно для JSONP

Время на прочтение1 мин
Количество просмотров15K
Если вам хочется работать с JSONP, но нет желания подключать для этого большие фреймворки, то JSONP.js ваш выбор.
Либа весит 216 байт и имеет всего одну функцию, которой мы передаем url и callback.
Читать дальше →

Поддержка HTML5 Web Sql Database и Google Gears с примерами

Время на прочтение3 мин
Количество просмотров5.9K
Мы все ценим свое время, и я хочу помочь вам (ну может быть не вам, но кому-то уж точно) его сберечь.
Речь пойдет о клиентских БД — Web Sql Database и Google Gears.

По долгу службы я занимаюсь веб приложением, использующим Local Database и Web Workers.

Итак, что нам требуется:

1. SQL запросы, выбирающие из локальной БД всякие данные
2. Скачивание данных через Ajax в фоновом режиме и запись их в локальную БД
3. Поддержка Firefox, Google Chrome, Safari, IE
4. Поддержка Win, Linux, MacOS, iPad

С первого взгляда ничего страшного, но со второго начинаются проблемы.
Читать дальше →

sjFilemanager — бесплатный AJAX файл менеджер. Колесо или ноу-хау?

Время на прочтение2 мин
Количество просмотров9.5K
Начиная с тех времен когда я только познавал всю прелесть программирования у веб, у меня возникала задача создания файлового менеджера для tinyMCE. Но изобретать велосипед — это пустая трата времени, поэтому я часто обходился какой-то простой реализацией или сторонним плагином, вроде этого. На тот момент Image Manager 1.1 был еще бета версией. К сожалению со временем этот вариант меня перестал устраивать по ряду причин и пришлось реализовать собственное решение.
Читать дальше →

JavaScript 1.8

Время на прочтение5 мин
Количество просмотров9.3K
JavaScript 1.8 предоставляет огромное количество вкусного синтаксического сахара, в основном любителями функциональщины. Но очень мало разработчиков знает об этой красоте. Конечно, к сожалению, все эти вкусности не поддерживает даже Chrome (что уж говорить об IE?), а только Firefox 3+, но JavaScript-разработчик просто обязан знать обо всех этих новинках.

Наиболее полную информацию можно найти в статьях на MDN:

А я перевела небольшую, но интересную статью Джона Ресига (автора jQuery), который раскрывает в ней некоторые из новых фич: Expression Closures, Generator Expressions, __iterator__, Array Reduce и кое-что ещё:

// Останавливаем выполнение события по-умолчанию
document.addEventListener("click", function() false, true);
// Выводим три сообщения
for ( let i in 3 ) alert( i );
// Создаем массив из 100 элементов, заполненный нулями
[ 0 for ( i in 100 ) ];
// Создаем единичную матрицу 10*10
[[ i == j ? 1 : 0 for ( i in 10 ) ] for ( j in 10 )];

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

Блокировка видимости с помощью Let в JavaScript

Время на прочтение3 мин
Количество просмотров12K
Let — это такое ключевое слово с помощью которые мы можем определить переменную с ограниченной областью видимости, и эту область видимости мы можем ограничить аж четырьмя способами. Люди знающие OCaml сразу найдут параллель между let… in в Ocaml и let в JavaScript.
На хватит слов, давайте рассмотрим каждый способ применения let.

Сезам откройся

Виртуальная клавиатура

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

На днях набрел на хорошую виртуальную клавиатуру. Почему-то я ее раньше нигде не встречал, хотя продукт достойный. Наш, русский, даже имеет патент (РОСПАТЕНТа №2009611147 от 20.02.2009).
Читать дальше →

Регулярная ловушка

Время на прочтение2 мин
Количество просмотров3.4K
Допустим, мы хотим проверить регулярным выражением, что в строке есть хотя бы одна цифра. Пишем код:

<script>

var digits = /([0-9])+/g;

function has_digit(s) { return digits.test(s); }

</script>


Этот код неверен.
Вам очевидно — почему? Если нет — добро пожаловать под кат!

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

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

Вынеси мусор!

Время на прочтение5 мин
Количество просмотров4.8K
Речь пойдёт о сборке мусора и утечках памяти в разных браузерах.

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

Динамический favicon или отображаем карму, не обновляя страницу

Время на прочтение5 мин
Количество просмотров12K
image
У каждого из нас, полагаю, в любимом браузере постоянно открыты несколько вкладок одновременно. Не раз бывают случаи, что и заголовка вкладки не видно — лишь favicon'ки. Но часто они информации, кроме как отображения логотипа сайта, не дают. И, наверное, зря. Но мы постараемся и здесь использовать это место (целых 16px*16px!) так, как хотим. По крайней мере, будем знать, как это можно сделать.
Читать дальше →

Обфускация JavaScript

Время на прочтение5 мин
Количество просмотров197K
В статье собраны всем известные методы и предельно извращенные. Эту статью я решил написать после недавнего прочтения поста в блоге Badass JavaScript и решил её дополнить своими находками.

Первый способ


Он всем известен — обфускация минимизаторами такими как JS Packer, JSmin, YUI Compressor, Closure compiler или можно просто пугуглить «JavaScript Obfuscator» и найдется ещё сто штук разных обфускаторов.
Они превращают существующий код
function MyClass(){
    this.foo = function(argument1, argument2){
        var addedArgs = parseInt(argument1)+parseInt(argument2);
        return addedArgs;
    }
    var anonymousInnerFunction = function(){
        // do stuff here!
    }
}

В какой-то такой вид:
function MyClass(){this.foo=function(c,b){var d=parseInt(c)+parseInt(b);return d};var a=function(){}};

Или такой:
var _0xd799=["\x66\x6F\x6F"];function MyClass(){this[_0xd799[0]]=function (_0xefcax2,_0xefcax3){var _0xefcax4=parseInt(_0xefcax2)+parseInt(_0xefcax3);return _0xefcax4;} ;var _0xefcax5=function (){} ;} ;

Или вот такой:
eval(function(p,a,c,k,e,d){e=function(c){return c};if(!''.replace(/^/,String)){while(c--){d[c]=k[c]||c}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4 0="3 5!";9 2(1){6(1+"\\7"+0)}2("8");',10,10,'a|msg|MsgBox|Hello|var|World|alert|n|OK|function'.split('|'),0,{}))

Но ничего не стоит его восстановить с помощью jsbeautifier.org либо просто убрать eval и получить исходный код, многое потеряем, но смысл кода восстановим. Ну и с первого взгляда мы видим, что перед нами JavaScript.

Все это были цветочки под катом жесткие методы обфускации.
Читать дальше →

Валидация форм в JavaScript ч.1

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

Вступление


Добрый день, уважаемый читатель. В этой статье я бы хотел обратиться к теме проверки содержимого форм на стороне клиента. На заре становления языков, работающих на клиенте, эта задача была основной. Со временем эти языки обросли новыми возможностями (манипуляция DOM, управление стилями и пр.), но задача проверки форм не исчезла. Правда с появлением HTML5 стало возможным указывать такой тип поля формы, как email, и браузер сам возьмет на себя его проверку. Такая возможность на данный момент реализована в Opera, так что расчитывать на нее пока особо не приходится. Поэтому я бы и хотел рассмотреть этот вопрос основательно. В большинстве случаев валидация проводится так: каждому полю раздаётся id, и затем при submit'е вытаскиваем их, попутно проверяя содержимое. И всем хорош данный подход, кроме отсутствия в нем системности. Поэтому хочу предложить вашему вниманию свое решение данной проблемы.
Читать дальше →

Mozilla Skywriter (Bespin) вошёл в состав Cloud9 IDE

Время на прочтение1 мин
Количество просмотров1.2K
Замечательный онлайновый Javascript-редактор Mozilla Skywriter (с конца 2008 года был известен под названием Mozilla Bespin, переименован в октябре 2010 года) вошёл в состав интегрированной среды разработки Cloud9 IDE. Это среда, заточенная именно на JavaScript, которая работает через браузер и позиционируется как альтернатива офлайновым IDE вроде Eclipse. Сейчас находится в стадии бета-тестирования.



Mozilla Skywriter теперь слит с Javascript-редактором ACE (Ajax.org Cloud9 Editor). Тот распространяется под тремя лицензиями MPL/LGPL/GPL, которые теперь относятся и к Skywriter.

Написание документации

Время на прочтение3 мин
Количество просмотров29K
Если вы пишете документацию открытого исходного кода, то это не просто вежливые дополнение к проектам, она в определенной степени помогает вашему проекту взлететь. Хорошонаписаный README помогает, но полная документация по API делает проект более профессиональным. Даже если ваш проект с закрытым исходным кодом, документация поможет новым коллегам более быстро адаптироваться или поможет вам вспомнить как все работает в длительных проектах.

Давайте посмотрим как устроена документация в популярных JavaScript фрэймворках.

jQuery


jQuery

Документация jQuery располагается по адресу docs.jquery.com и представляет из себя wiki в которой описана вся документация по API. Любая крупная область API включена в навигацию, каждая страница имеет список методов для этой области. Страница содержит примеры кода и комментарии на Disqus.
Комментарии исходного кода в основном связаны с багами или с необычным фрагментом кода, который требует пояснений.

Далее: Prototype, JSDoc и несколько специфических подходов к JavaScript документации
Читать дальше →

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