Тег: Javascript

Поиск по ключу и значению в JavaScript

Часто возникает необходимость в JavaScript найти данные в массиве или объекте по ключу и значению. Стандартной функции или метода к сожалению не существует. Ниже пример такой функции, в которую нужно передать параметр arr (массив или объект) и keyObj (ключ и значение, например {id:10}).

05 февраля 2014
11 тыс.
14 сек

Глобальные переменные в JavaScript

Всем давно и доподлинно известно, что использовать глобальные переменные в JavaScript не принято. Почему? Существует масса причин, все они, конечно же, глупы, но давайте придерживаться такой теории.

Однако иногда возникает необходимость иметь и пользовать глобальную переменную. Но как тогда быть? А если вдруг мы пишем для Node.js, там ведь нету глобального объекта window, там root? А если я хочу использовать свой код и во фронтенде и на сервере?

За сим предлагаю такое решение, которое знатно растиражированно, но никто о нем никогда не помнит.

var global = (function () {
    return this || (1, eval)('this');
}());

Теперь у нас есть глобальный объект global, который обладает всеми свойствами window / root. Элегантное и просто решение.

Придумал не я, украл вот тут.

24 декабря 2013
4.2 тыс.
1 мин

Кнопка удаления с подтверждением

Однажды один мой товарищ попросил сделать для одного его проекта кнопку удаления, которая содержала бы внутри себя подтверждение. Т.е. как это сделано обычно? Нажимаешь удалить - выскакивает окно с вопросом "Вы уверены, что ходите удалить то-то и то-то?" - нажимаешь "Да", после чего удаляется то, что надо. Так вот, он хотел чтобы нажимаешь "Удалить", внутри кнопки меняется текст на "Вы уверены?", нажимаешь еще раз и происходит удаление.

Идея показалась мне интересной, и я решил поделиться способом простой реализации.

17 декабря 2013
7.7 тыс.
2 мин

Четыре лучших редактора для веб-разработчика

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

Text mate

Первый из лучших, прототип для популярного Sublime Text. Вторая версия Textmate стала бесплатной и при этом не потеряла своей функциональности. Редактор не кроссплатформенный, а написан именно для использования в Mac OS, поэтому очень маленький и быстрый. Много плагинов и возможностей. Именно его я использую каждый день.

Sublime Text

Наверное самый популярный сегодня кроссплатформенный редактор. Для него написаны сотни плагинов и сниппетов. Редактор платный - $70, но при этом его бесплатная версия ни в чем не уступает платной. Есть, правда, одна особенность, периодически при сохранении выскакивает окошко с предложением купить редактор. Достаточно просто закрыть это окно и можно успешно работать дальше. Неоспоримым преимуществом этого редактора является возможность выделять сразу много разрозненных кусков кода (мультиселект) и редактировать их одновременно.

Chocolat

Молодой, но многообесчающий редактор. Написан только для Mac OS. Стоимость - $49. Бесплатно можно пользоваться 14 дней. Количество плагинов пока не велико, но сообщество растет и развивается. Так же имеет в своем арсенале возможность мультиселекта.

Brackets

Бесплатный редактор от Adobe с открытым исходным кодом. Написан под Windows, Mac OS, Linux. Интерес вызывает то, что написан он на JavaScript. Это правда обуславливает и его недостатки: медленную работу и большой размер. Есть у него и ряд преимуществ перед другими редакторами:

  • Live HTML Development - сразу после сохранения изменений результат отображается в браузере (поддерживается только Chrome)
  • Быстрое редактирование - css можно редактировать прямо в html-файлах, не открывая файлы со стилями.
  • Adobe Edge - если вы купите подписку у Adobe, то Live HTML Development будет доступен не только в браузере компьютера, но и на различных мобильных устройствах.

Никаких выводов делать не стану, каждый сам волен выбирать, что использовать для работы. Мне кажется, что описанные мной программы все-таки лучшие для Mac OS на сегодняшний день. И да, я не учитывал здесь огромные и громоздкие комбайны вроде WebStorm. Все-таки они слишком многофункциональны для html/css/javascript разработки.

13 декабря 2013
5.2 тыс.
3 мин

Windows 1.01 и Windows 3.11 в браузере

Если вы в силу разных причин не застали времена 286-х компьютеров, DOS-a и ранних версий Windows, то у вас есть несколько вариантов их увидеть:

  1. Раздобыть немного старого компьютерного железа и увсе установить
  2. Проследовать вот по этой ссылке, чтобы увидеть как выглядела Windows 3.11, или вот по этой, чтобы увидеть настоящую Windows 1.01, запущенную в браузере. Ничего сверхинтересного вы для себя не найдете, но для общего образования очень полезно.
03 ноября 2013
3.9 тыс.
20 сек

Моя презентация «Yeoman: building an infrastructure for your projects»

27 октября 2013
2.7 тыс.
1 сек

Функция uniqid в JavaScript

В PHP есть шикарная функция uniqid. Она позволяет сгенерировать случайный идентификатор состоящий из цифр и букв, основанный на текущем времени. Выглядит он примерно вот так 526439af76c56.

Я очень часто пользуюсь ей (функцией), когда делаю что-то на ПХП. Конечно же мне очень хватало этой функции в JavaScript, поэтому я поискал в интернете, нашел один неплохой вариант, немного его подправил и вуаля:

(function () {
    this.uniqid = function (pr, en) {
        var pr = pr || '', en = en || false, result, us;
    this.seed = function (s, w) {
        s = parseInt(s, 10).toString(16);
        return w < s.length ? s.slice(s.length - w) : 
                  (w > s.length) ? new Array(1 + (w - s.length)).join('0') + s : s;
    };

    result = pr + this.seed(parseInt(new Date().getTime() / 1000, 10), 8) 
                + this.seed(Math.floor(Math.random() * 0x75bcd15) + 1, 5);

    if (en) result += (Math.random() * 10).toFixed(8).toString();

    return result;
};

})();

Использовать можно:

  • так uniquid() - результат 52643b81917b3
  • или вот так uniqid('prefix_') - результат prefix_52643bb682821
  • и даже вот так uniqid('prefix_', true) - результат prefix_52643bdf3b1fb7.38568327

Пользуйтесь на здоровье.

Тут ссылка на Gist.

24 октября 2013
5.6 тыс.
1 мин

Pure JavaScript

Некоторые уже возможно видели сайт Pure JavaScript. Пока его назначение понять трудно. Но это мой маленький проект, который делается совсем неспеша. Так что... coming soon...

Pure Javascript

13 октября 2013
3.1 тыс.
8 сек

Выступаю и рассказываю про Yeoman

Мое выступление на первом митапе WebNotBombs.

13 октября 2013
3 тыс.
2 сек

Определяем браузер в JavaScript

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

Чтобы правильно использовать эти функции необходимо знать, какой браузер в данный момент использует пользователь. Единственный правильный способ определить браузер в JavaScript - Useragent. Вот небольшой скрипт, который возвращает объект с различными свойствами, в том числе - мобильный или нет браузер, а также версию Android (может оказаться полезным):

var uAgent = navigator.userAgent || '';

var browser = { version : (uAgent.match( /.+(?:me|ox|on|rv|it|era|ie)\/: / ) || [0,'0'])[1], opera : /opera/i.test(uAgent), msie : (/msie/i.test(uAgent) && !/opera/i.test(uAgent)), msie6 : (/msie 6/i.test(uAgent) && !/opera/i.test(uAgent)), msie7 : (/msie 7/i.test(uAgent) && !/opera/i.test(uAgent)), msie8 : (/msie 8/i.test(uAgent) && !/opera/i.test(uAgent)), msie9 : (/msie 9/i.test(uAgent) && !/opera/i.test(uAgent)), msie10 : (/msie 10/i.test(uAgent) && !/opera/i.test(uAgent)), mozilla : /firefox/i.test(uAgent), chrome : /chrome/i.test(uAgent), safari : (!(/chrome/i.test(uAgent)) && /webkit|safari|khtml/i.test(uAgent)), iphone : /iphone/i.test(uAgent), ipod : /ipod/i.test(uAgent), iphone4 : /iphone.OS 4/i.test(uAgent), ipod4 : /ipod.OS 4/i.test(uAgent), ipad : /ipad/i.test(uAgent), ios : /ipad|ipod|iphone/i.test(uAgent), android : /android/i.test(uAgent), bada : /bada/i.test(uAgent), mobile : /iphone|ipod|ipad|opera mini|opera mobi|iemobile/i.test(uAgent), msie_mobile : /iemobile/i.test(uAgent), safari_mobile : /iphone|ipod|ipad/i.test(uAgent), opera_mobile : /opera mini|opera mobi/i.test(uAgent), opera_mini : /opera mini/i.test(uAgent), mac : /mac/i.test(uAgent), webkit : /webkit/i.test(uAgent), android_version: parseFloat(uAgent.slice(uAgent.indexOf("Android")+8)) || 0 };

29 сентября 2013
5.7 тыс.
2 мин