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

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

Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

Summer html image map creator
Читать полностью »

Интерактивная HTML5 визуализация по мотивам «Lost»

Поклонник одного из лучших телепроектов последних десяти лет «Затерянные» («Lost») программист Сантьяго Ортиз (Santiago Ortiz) создал прекрасный пример интерактивной визуализации взаимоотношений между главными и второстепенными героями шоу при помощи HTML5.

Сериал создавался силами более 30 сценаристов, которые должны были прорабатывать характеры и взаимоотношения главных героев, создавая при этом реалистичную атмосферу с точки зрения перемещения героев во времени, следить за непротиворечивостью событий, и при этом давать намёки на всевозможные загадки (например, почему Кейт видела в джунглях тёмную лошадь); при этом wiki-проект по мотивам шоу содержит более 7000 статей.
Читать полностью »

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

Doppio — JVM, Компилятор и дизассемблер в JavaScript
Читать полностью »

ObjectScript — новый встраиваемый и очень легкий объектно-ориентированный язык программирования с открытым исходным кодом. ObjectScript расширяет возможности таких языков, как JavaScript, Lua и PHP. Синтаксис в основном взят из JavaScript, множественное присваивание — из Lua, работа со свойствами — из PHP.

ObjectScript 0.97-vm2 быстрее, чем PHP 5.3.3 и JS на 34% и 61% соответственно.

Как тестировалось

Для тестирования был взят алгоритм Fannkuch. Довольно удобный тест, одна функция с параметром, при увеличении параметра на 1, количество вычислений увеличивается примерно в 10 раз.Читать полностью »

Веб компоненты с LibJSПо факту, LibJS это связка нескольких библиотек. О Mask и Include я уже вкратце рассказал, а сегодня завершит трилогию CompoJS(@github).

Постановка задачи

  1. разработка компонент вне основного проекта
  2. «dev»-независимая маршрутизация — route('compo','file:///d:/dev/compo/{name}/lib/{name}.js');
  3. легкое внедрение в проект — include('compo','mycomponent');
  4. инициализация прямо из макета — <myComponent <!-- settings --> /> (без javascript-a)

Итого 2 строчки кода, (3) и (4), и компонент подключен в проект вместе с ресурсами и другими компонентами. Больше не надо копировать картинки и стили — все под капотом. Хочу отметить, что разрабатываю в основном мобильные приложения, так что «под капотом» должно быть что-то легкое, но очень быстрое. В статье также будет приведен пример компоненты с использованием библиотеки @PrismJSЧитать полностью »

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

А вот и методы решения проблемы:

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

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

Совсем недавно я начал изучать JavaScript, затем JQuery, и теперь потихоньку перехожу к плагинам и фреймворкам построенным на основе вышеупомянутых технологий. Параллельно с изучением JS верстаю небольшие сайты-визитки, и вот у меня возникла необходимость сделать “карусель” из картинок. Оказалось, есть уже готовые решения, и об одном из них я хочу вам рассказать. Данная статья является выдержками с оригинального сайта фреймворка RounAbout.Читать полностью »

С удивлением обнаружил что на Хабре никто не упоминал о такой удобной библиотеке как SugarJS.
На самом деле у них очень информативный и простой сайт — где все уже хорошо написано.
Я просто постараюсь обозначить основные моменты.

SugarJS — Синтаксический сахар для JavaScript

Что такое SugarJS?

SugarJS — это open source (лицензия — MIT) библиотека Javascript, который расширяет нативные объекты полезными методами. Она разработана, чтобы быть интуитивным, ненавязчивым инструментом повышающим выразительность кода, который позволял бы делать больше с меньшим количеством кода и меньше задумываясь над рутинной.

Кратко...

  • Расширяет нативные элементы Javascript полезными, интуитивными методами.
  • Прост для понимания и в использовании.
  • Метод SugarJS не используется при наличии метода в родной реализации браузера
  • Имеет систему тестирования, имеющую огромный набор тестов.
  • Расширяет возможности работы с датой и временем, обеспечивает их форматирование на нескольких языках (русский есть)
  • Отлично ладит с другими фреймворками и сторонним кодом.
  • Модульность, вы можете включать только нужные пакеты.
  • Полностью совместимый ECMAScript.
  • Заявлена поддержка всех основных браузеров, включая мобильные
  • Поддерживает Node.js.
  • Имеет хорошую и удобную документацию.

Заинтересовало? Добро пожаловать под кат.
Читать полностью »

Эффектная анимация разрушения (Pixel Dust) В процессе развития нашей игры на HTML5, мы столкнулись с дилеммой: рисовать для каждого элемента эффект разрушения или попробовать сделать это программно на JavaScript (canvas). Если с первым способом всё понятно (проверенно работает, но много работы художнику), то со вторым у нас были сомнения относительно скорости рендера, ведь это 60FPS x 64 x 4 байта ~ 1 МБ/сек. на один элемент, а если их 40 на одном экране?

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

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

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

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

Это всё хорошо и правильно, но только для небольших проектов.

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


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