Рубрика «javascript» - 574


Вступление

Много существует статей на Хабре, описывающих интересные и сложные аспекты веб-разработки, но много существует читателей, которые, находясь в начале своей карьеры веб-разработчика, хотели бы видеть материал, который позволил бы сделать первый шаг от «PHP за 24 часа» до разработки на серьезном уровне, и я хотел бы поделиться своим опытом в этом деле.

Особенности веб-приложения делают его разделенным на две части: клиентскую и серверную. На стороне клиента работает код на JavaScript (может быть, где-то можно найти и VBScript, но мы, пожалуй, не будем рассматривать этот случай), на серверной же — много что, в принципе, но мы рассмотримЧитать полностью »

В эти выходные я имел удовольствие разбираться с асинхронными api IndexedDB.

Поле разбора примера от mozilla мне показалось, что код не так хорош, как мог бы быть.

И я решил для развития своих псионных навыков работы c IndexedDB написать обертку к его асинхронному api.

Если честно, то я не любитель писать статьи, потому что мне всегда было лень читать слова, я люблю читать код, поэтому в моих статьях его как правило много ))).

Если вы тоже любите код, то я выложил его на github

Читать полностью »

HTML5 / Open Web Device — смартфон на платформе HTML5

Оператор сотовой связи Telefónica совместно с Mozilla разработали концепт смартфона нового поколения, который они назвали Open Web Device. Это устройство полностью совместимо с HTML5, не имеет операционной системы в традиционном понимании этого слова. Все приложения — телефонная книга, SMS, контакты, настройки телефона — сделаны на Javascript и работают через интерфейс и стек Boot2Gecko.

Boot2Gecko — полностью открытая платформа на базе ядра Linux. Кто угодно может участвовать в разработке,Читать полностью »

Во время разработки своего экспериментального WEB-проекта на Node.JS, о котором я рассказал в двух предыдущих статьях, я столкнулся с проблемой выбора шаблонизатора. Несмотря на то, что готовых решений существует довольно много, мне не удалось найти то, которое бы удовлетворяло меня на 100%. Так родился JUST.

Конкуренты

Jade

github.com/visionmedia/jade

Этот шаблонизатор достаточно популярен среди Node.JS разработчиков. Он обладает хорошим функционалом и скоростью работы, ноЧитать полностью »

Веб разработка / Таймер с обратным отсчётом на js / jquery

Однажды клиент попросил меня на своем вебсайте поставить таймер обратного отсчета.

«Для того, чтобы пользователи смогли воспользоваться акцией, ограниченной по времени. И для улучшения конверта», — пояснил он.

Я принялся искать в интернете различные варианты. Все что было не совсем устраивало меня. Существовали различные плагины для jQuery, но ни один из них не подходил по стилю. Мне нужен был плагин, который бы эстетично смотрелся в рамках существующего дизайна и наглядно говорил пользователю о том, сколько времени на совершение действия у него осталось.


Читать полностью »

В субботу 18 февраля 2012, компания EPAM Systems, в своем центральном киевском офисе, организовала и провела конференцию, посвящённую JavaScript — одной из самых динамично-развивающихся на сегодняшний день платформ. Конференция привлекла внимание многих украинких разработчиков — зал был забит «под завязку», а те кто не смог присутствовать лично, наблюдали за событием онлайн. В первую очередь этому способствовали доклады на актуальные темы JS-разработки, как со стороны клиентских приложений, так и со стороны сервера.

Открыла конференцию своим приветственным словом директор по персоналу — Олеся Кирильчук.
ЗатемЧитать полностью »

В данном посте хочу рассказать как предпочитаю реализовывать наследование в объемном JavaScript приложении.
Допустим для проекта необходимо множество родственных и не очень классов.Если мы попытаемся каждый тип поведения описать в отдельном классе, то классов может стать очень много. И у финальных классов может быть с десяток предков. В таком случае обычного JavaScript наследования через prototype может оказаться не достаточно. Например мне понадобилась возможность из метода вызывать аналогичный метод класса-предка. И захотелось создавать и наследовать некоторые статические свойства и методы класса. Такую функциональность можно добавить, вызываяЧитать полностью »

Знакомство с javascript-фреймворком Backbone я, как и многие, начинал с todo-туториала, на базе которого строилось дальнейшее использование фреймворка в своих проектах.

Но туториалы заканчиваются, и начинаются рабочие будни.


Думаю, многим знаком такой участок кода (из вышеупомянутого туториала):

window.AppView = Backbone.View.extend({      // Instead of generating a new element, bind to the existing skeleton of     // the App already present in the HTML.     el: $("#todoapp"),      // Our template for the line of statistics at the bottom of the app.     statsTemplate: _.template($('#stats-template').html()),       ... 

Давайте разберемся подробнее:

JavaScript — очень необычный язык. Может это звучит немного странно, но по-моему в его истории есть некоторое сходство с судьбой японского языка. Он, возможно, не был изначально глубоко продуман и был сделан на скорую руку, но при этом в умелых руках он часто оказывается неожиданно элегантным. Он был “поскрёбан” по различной степени качества сусекам, но при этом он легко впитывает нововведения и иногда даже кажется, что только для них и был создан. Он покорно принимает различные стили письма и, если бы не апологеты, “правильное” написание было бы, возможно, уже забыто… И, самое главное, как и для японского, нет обозримой границы в познании этогоЧитать полностью »

Обработка изображений / Пиксельные искажения с билинейной фильтрацией в HTML5 canvas
В данном посте я хочу описать простую методику пиксельного искажения изображения на «чистом» javascript в 2D-Canvas без использования специальных библиотек и шейдеров, путём прямого доступа к пикселям изображения. Надеюсь, это будет интересно и полезно как для общего развития, так и для решения каких-то задач.

Canvas и пиксели

Я не буду описывать полностью объект Canvas, для этого есть документация. Остановимся на том, что нам нужно. Во-первых, это получение 2D-контекста:

var context = canvas.getContext('2d'); 

Этот контекст умеет многое делать сЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js