Обновить
256K+

JavaScript *

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

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

Dojo, JSONP и все-все-все

Время на прочтение2 мин
Охват и читатели2K
Добрый день, уважаемые хабраЛеди и хабраДжемпельмены. Сегодня я поведаю Вам о создании API для вашего сайта. Знаю, тема в какой-то своей части достаточно обсосанная, но я наткнулся на недостаток определенной информации при разработке API для одного из проектов.
Речь пойдет о JSONP, SMD и компоненте Dojo dojox.rpc.Service.
Интересно? — Прошу под кат.
Читать дальше →

Получение фото с android-смартфона прямо в html форму

Время на прочтение5 мин
Охват и читатели13K
Здравствуйте!

image

Возникла задача для интернет-магазина сфотографировать большое количество товаров. Специфика товара такова, что не столько важна красивая картинка, сколько особенности конструкции товара (с какой стороны находится шлейф, есть ли петли крепления и т.п.)

Фотографировать обычным фотоаппаратом, потом заливать фото на компьютер, искать каждый товар в админке, потом искать соответствующее фото, показалось очень долго. Гораздо проще открыть товар в админке и навести телефон на товар. Тем более, что при хорошо выставленном освещении, современные смартфоны выдают вполне качественную картинку.

Теория


В андроид-маркете лежит замечательная программа IpWebCam, которая позволяет превратить свой телефон в полноценную веб-камеру. Кроме того у нее есть api для получения фотографий с автофокусом. При запуске IpWebCam, на телефоне поднимается web-сервер, который позволяет с локальной машины по wi-fi получать текущий кадр с телефона по адресу вида 192.168.0.14:8080/shot.jpg

Идея была следующая:
  1. Вставить в форму <img> с адресом фотографии со смартфона
  2. Создать canvas и в него скопировать содержимое <img>
  3. Сохранить данные при помощи canvas.toDataURL()
  4. Отправить данные на сервер при помощи ajax

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

JavaScript в диаграммах (Часть 1)

Время на прочтение5 мин
Охват и читатели2.1K
Одним из секретов эффективного JavaScript-разработчика является глубокое понимание семантики языка. В этой статье я объясню основные элементарные части языка, используя максимально простые и понятные диаграммы.
Читать дальше →

Создание соединительных стрелок для блочных элементов используя canvas

Время на прочтение2 мин
Охват и читатели15K
arrows_for_blocksЗдравствуйте!

Недавно появилась необходимость сделать простое иерархическое дерево для web страницы (структура организации). Блоки получились неплохие, но когда пришло время соединить все стрелками, возник вопрос – как? Решение было два: рисовать стрелки в .png или же использовать спецсимволы.

Но хотелось чего-то более быстрого, удобного, современного – т.е. просто указать: стрелка от блока А к блоку Б. Уже к вечеру была написана небольшая библиотека, позволяющая реализовывать задуманное…
Читать дальше →

Prototype, proto и оператор new

Время на прочтение3 мин
Охват и читатели86K
В этой статье я кратко в примерах объясню что такое свойства __proto__, prototype и работу оператора new в JavaScript.

Свойство __proto__


Абсолютно любой объект в JavaScript имеет свойство __proto__. Это скрытое системное свойство, и не во всех реализациях языка оно доступно пользователю.
При обращении к любому свойству объекта, оно в первую очередь ищется в самом объекте:
var obj = {ownProperty: 1};
console.log(obj.ownProperty);// 1
Но если его там нет, поиск происходит в свойстве __proto__:
obj.__proto__ = {propertyOfProto: 2};
console.log(obj.propertyOfProto);// 2
Если его нет и там, оно ищется дальше по цепочке:
obj.__proto__.__proto__ = {propertyOfProtosProto: 3};
console.log(obj.propertyOfProtosProto);// 3
Эта цепочка называется цепочкой прототипов (prototype chain).


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

Создание кроссбраузерной оболочки для пользовательских скриптов

Время на прочтение4 мин
Охват и читатели6.9K
Здравствуйте, уважаемые хабражители. Постов про пользовательские скрипты (userscripts) было на хабре немало, тем не менее, они только показывали, как ими пользоваться. А в работе юзерскриптов достаточно много кроссбраузерных несовместимостей (как и в любой области браузерного js). Естественно, можно установить различные дополнения для разных браузеров, однако, в случае написание скрипта для конечного пользователя, придётся сопровождать его огромным readme по установке компонент для обеспечения нормальной его работы. Что лично меня, да и вас, полагаю, тоже, не очень-то устраивает.

В данной статье речь будет вестись о трёх браузерах: Mozilla Firefox (с установленным GreaseMonkey), Google Chrome, Opera. Целью статьи является «заготовка», которая позволит пользовательскому скрипту работать одинаковым образом во всех перечисленных браузерах. Реализация GM API рассматриваться не будет, т.к. таковых уже сотни. Предполагается, что читатель уже знаком с общими правилами написания юзерскриптов (в случае, если нет, рекомендую сначала прочитать другую статью).
Читать дальше →

Коллекция паттернов и антипаттернов JavaScript

Время на прочтение1 мин
Охват и читатели5.6K
Несколько месяцев назад на Гитхабе появилась очень неплохая коллекция паттернов и антипаттернов JavaScript и jQuery на все случаи жизни. Автор проекта Shi Chuan проделал отличную работу, собрав десятки примеров кода из книг и других источников. Репозиторий уже набрал почти полторы тысячи подписчиков и активно пополняется. Всё очень удобно разложено по категориям и откомментировано. Наслаждайтесь!

BrowserQuest — многопользовательская игра на canvas

Время на прочтение2 мин
Охват и читатели14K
BrowserQuest от Mozilla — это дань классическим многопользовательским играм. Вы играете за молодого воина, который ищет приключения на свою пятую точку. Тут не нужно спасать красавицу-принцессу, но это вам с лихвой окупится опасным миром, наполненным сокровищами и корованами. И главное, все это сделано с помощью HTML5 и JavaScript!

Проект с открытым исходным кодом и хостится на GitHub!
Читать дальше →

Увидеть скрытое или как хорошее сделать еще лучше

Время на прочтение7 мин
Охват и читатели7.8K
Всевидящее око Очень давно, еще в самом начале знакомства с jQuery, захотелось мне иметь инструмент, показывающий, к каким элементам на странице прицепились события и что это за события вообще. В тот момент мне не удалось найти ничего подобного. Не сказать, чтобы я очень сильно искал, но ни FireBug ни позже появившийся Dragonfly подобного функционала не имели.

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

Когда в январе мне снова захотелось посмотреть, а не появилось ли чего интересного на эту тему, я нашел прекрасный букмарклет Visual Event 2, написанный Allan Jardine. Букмарклет работал как часы, но нашлась и пара ложек дегтя, маленьких, но неприятных.

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

Поэтому было решено оформить букмарклет в виде расширения для браузера Opera. К тому же я давно хотел познакомиться с Opera Extension API. Вот ссылка на страницу расширения для самых нетерпеливых. Остальных же прошу под кат, где описаны все этапы конвертации букмарклета в расширение для Оперы, проблемы, с которыми я столкнулся и методы их решения.
Читать дальше →

Игра Tron размером в 219 байт

Время на прочтение1 мин
Охват и читатели2.7K
В мире IT в последнее время наметилась тенденция к стремлению максимально уменьшить количество исходного кода, не теряя при этом функциональность. Так вот некий товарищ Alokmenghrajani со своими друзьями задался целью написать игру с минимальным количеством кода. Задумка была написать игру по фильму Tron, и в итоге у них получилось 219 байт, что весьма неплохо.
image
Читать дальше →

Фотореалистическое изображение облака при помощи JavaScript и трёхмерных CSS-преобразований

Время на прочтение1 мин
Охват и читатели10K
Эта картинка, если на первый взгляд, выглядит фотографией реального облака в реальных небесах:

[облако]

Тем не менее на сайте «CSS3D Clouds» объёмное облако вращается, реагируя на движения мыши, и может быть заново (иначе) сгенерировано в любой момент. Ведь на деле оно является итогом применения JavaScript и трёхмерных CSS-преобразований к нескольким копиям одной и той же картинки облака: из них, как из вокселей, формируется более крупное облако.

Как исправить ошибки в Google Maps Javascript API 3 mobile

Время на прочтение4 мин
Охват и читатели18K
Встретился с серьезной проблемой при размещении на сайте карт от Google Maps, а именно не отображение/не полное отображение карты после загрузки страницы, заметил что тем таких много, а ответов крайне мало, и то, если вы любитель поискать ответы где-то в глубинке форумов, ниже я приведу несколько вариантов решение данных проблем с кодом инициализаций, так что устройтесь поудобней с попкорном и приступайте к чтению
Читать дальше →

CoffeeScript: Подробное руководство по циклам

Время на прочтение11 мин
Охват и читатели32K
CoffeeScript: Подробное руководство по циклам

Как известно, CoffeeScriptпредлагает несколько иной набор управляющих конструкций, нежели JavaScript.



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



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

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

Баг в браузере Safari

Время на прочтение1 мин
Охват и читатели2.2K
Компания MajorSecurity опубликовала описание уязвимости в браузере Safari Mobile под iOS 5.1. C помощью этой уязвимости можно подделать адрес в адресной строке.

Проблема связана с некорректной обработкой вызова javascript's window.open() в JavaScript. Баг позволяет отобразить в адресной строке URL чужого сайта, тем самым жертву можно ввести в заблуждение.

Чтобы продемонстрировать уязвимость на практике, специалисты сделали специальную тестовую страничку. Можете зайти на неё браузером Safari из-под iOS 5.1 — и нажать кнопку Demo.

http://majorsecurity.net/html5/ios51-demo.html



После того как вы нажали кнопку Demo браузер Safari откроет новое окно, где в адресной строке указано www.apple.com, но на самом деле сайт apple.com открывается во фрейме на хосте majorsecurity.net, то есть фактически пользователь не покинул сайт majorsecurity.net.

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

Создаём простейший виджет для Mac OS X Dashboard

Время на прочтение6 мин
Охват и читатели12K
Здравствуйте, хабравчане-маководы!
Картинка поста
Сегодня мы с вами попробуем разобраться в азах создания виджета для Dashboard в Mac OS X. Нам понадобится программа Dashcode, предназначенная как раз для этого.

Для начала немного теории. Виджет в Dashboard — это специально сформировання веб-страничка, упакованная в бандл вместе со всем ресурсами. Ну, и немного служебной информации в довесок. Соответственно, используемый язык программирования — JavaScript. Если Вы уже знакомы с ним, а так же с HTML/CSS (хотя это вряд ли понадобится), то Вы уже способны написать простенький виджет. Если же нет, то не стоит расстраиваться, этот язык очень прост и интуитивно понятен, разобраться с ним можно достаточно быстро. Далее я буду считать, что с JS читатель более-менее знаком. Сама же статья рассчитана на новичков, так что прошу не ругать за «слишком простое изложение и детальное разжёвывание элементарных вещей». Кроме того, за дизайн тоже прошу не пинать — ну не дизайнер я, не дизайнер! Если кто хочет помочь с этим делом — welcome =)

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

Итак, приступим. В качестве цели для экспериментов я, разумеется, выбрал наш любимый хабр. Мы будем шаг за шагом делать виджет, отображающий карму, рейтинг и позицию в рейтинге хабралюдей выбранного хабраюзера.
Картинка для привлечения внимания
Такой виджет (ну, очень похожий) уже был создан хабратоварищем neoromantic аж в 2007 году, но ссылки на скачивание не рабочие, а кроме того, та статья не содержала практического руководства по созданию подобных виджетов.
Создадим же проект с нуля!

Установка юзерскриптов в Опере в общих случаях и для защищённых страниц (https)

Время на прочтение8 мин
Охват и читатели30K
Для некоторых юзерскриптов начинает иметь значение, каким способом пользователь установит его в браузер Оперу. Если сделать установку, не разрешив доступ к некоторым доменам, работа будет неполноценной, а при установке кроссдоменного скрипта, да ещё использующего защищённый протокол (HTTPS), такое запросто может случиться. Например, для юзерскрипта HabrAjax, кроме основного сайта Хабра, используется доступ к кнопкам Google Plus на plusone.google.com и проверяются обновления скрипта на домене userscripts.org. Всё это требует дополнительных настроек, которые были описаны прямо в юзерскрипте (ссылка в настройках "примеч.для Оперы"), но сделаны довольно кратко и с одной иллюстрацией. Здесь посмотрим на вопрос шире, чтобы пользователи Оперы и разработчики юзерскриптов для неё имели инструкции под рукой и полностью понимали широту вопроса. Заодно, описаны места установки юзерстилей. Для тех, кто всё это знает, полезно будет посмотреть абзац выводов с 2 замечаниями в самом низу.
Читать дальше →

Особенности написания и возможные фичи LR-генераторов

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

Введение


Добрый день.
В заключительной части про написание собственного генератора LALR-парсеров я бы хотел описать возможные особенности и фичи. Кроме того я опишу чего мне не хватало в существующих решениях и ради чего я начал писать свой велосипед.

Дабы задать контекст, сообщу, что грамматика для анализа — это ECMAScript, так же известный как JavaScript. Конкретная спецификация — ECMA-262, редакция 5.1 от июня 2011 года.
Читать дальше →

Обработка неопределённых глобальных переменных располагается далёко от здравого смысла! Но её можно превозмочь…

Время на прочтение3 мин
Охват и читатели2.7K
Здравый смысл веборазработчика подсказывает, что во браузерном джаваскрипте глобальные переменные являются свойствами объекта window так что window.чегоНибудь и просто чегоНибудь должны быть синонимами и вести себя одинаково (если, конечно, мы не находимся в какой-нибудь такой функции, где переменную чегоНибудь переопределили локально).

Здравый смысл веборазработчика также ещё подсказывает, что неопределённая переменная должна иметь значение undefined так что чегоНибудь и undefined должны быть синонимами и вести себя одинаково, когда переменную чегоНибудь не определяли в джаваскрипте (и если, конечно, никакой чудила не дерзнул переопределить undefined).

Но если вы собираетесь программировать для Opera 11 (будь то начальная версия Opera 11.01 или новёхонькая Opera 11.61), то будьте готовы отречься от здравого смысла в обоих сих случаях! (Не только в Opera, но и в других браузерах и средах — но об этом чуть позже.)

Чтобы нагляднейше убедиться в этом, воспользуемся библиотекою Underscore.js, в которой как раз имеется удобная функция тестирования неопределённых переменных — это функция _.isUndefined(), в исходном коде определённая самоочевидным способом:

// Is a given variable undefined?
_.isUndefined = function(obj) {
   return obj === void 0;
};

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

cache-js. функция кэширования

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

PHP warning/notice сообщения в JS консоль + секретная кнопка

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