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

Вступление

Javascript BMP ParserЕще с появления скриптов для отображения PDF, извлечения информации с MP3 и декодировки H.264 меня очень заинтересовала тема чтения и работы с бинарными данными в JavaScript.

В этом посте хотелось бы рассказать про свои эксперименты и рассмотреть эти возможности на примере «ручного» парсинга и отображения BMP-файлов (а заодно и освежить память о школьных временах работы с BMP на Паскале :) ).

Сразу хочу предупредить, что речь будет идти именно о написании JavaScript самостоятельно, а не его генерации с исходных кодов других языков с помощью какого-либо транслятора типа Emscripten.Читать полностью »

Отладка — неизбежный и зачастую очень длительный этап разработки любого приложения. Клиентская веб-разработка в этом смысле не исключение, более того, здесь этот вопрос стоит особенно остро. Если при отладке backend’а область действий программиста ограничена инструментом разработки, то в frontend’е задачу отладки осложняют многочисленные внешние факторы — браузеры. С их многообразием и различиями приходится волей-неволей считаться любому веб-разработчику. Об этом и пойдет речь далее.

Данная статья не претендует на оригинальность. Вполне возможно, что что-то подобное уже было написано ранее кем-то другим. Единственной целью при ее написании было желание автора поделиться своим опытом в отладке JavaScript. Автор уважает мнения других хабрапользователей и никому не навязывает свою точку зрения.

Проблема кроссбраузерности в отладке уже неоднократно рассматривалась на Хабре (1, 2, 3 и др.). Но к сожалению, во всех статьях, ранее освещавших этот вопрос, применялся один и тот же подход к его решению: использование инструментов отладки, специфичных для каждого браузера. Конечно, никто еще не отменял console.log — простой, и в некотором смысле кроссбраузерный, инструмент, хорошо помогающий в отладке. Но его применение опять-таки ограничено наличием в браузере средств отладки. Особенно это касается мобильных устройств, в которых получить доступ к средствам отладки не так просто, а иногда и вовсе невозможно.Читать полностью »

Средняя длина идентификатора в популярных библиотеках JavaScript составляет 8.27 символа
Идентификаторы длиной больше 15 встречаются реже односимвольных. Чаще всего встречаются 6-cимвольные имена. Такие результаты получил автор Esprima — парсера для JavaScript, написанного на JavaScript, проанализировав исходный код таких библиотек, как jQuery, Prototype, MooTools, Underscore и некоторых других.

Пятёрка самых длинных идентификаторов выглядит так:

prototype-1.7.0.0.js SCRIPT_ELEMENT_REJECTS_TEXTNODE_APPENDING
prototype-1.7.0.0.js MOUSEENTER_MOUSELEAVE_EVENTS_SUPPORTED
jquery-1.7.1.js subtractsBorderForOverflowNotVisible
jquery.mobile-1.0.js getClosestElementWithVirtualBinding
prototype-1.7.0.0.js HAS_EXTENDED_CREATE_ELEMENT_SYNTAX

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

Добрый день!

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

Имитируем пересечение, исключение и вычитание, с помощью Lookahead условий в регулярных выражениях в ECMAScript

От переводчика

Это перевод небольшой заметки, написанной вчера Lea Verou

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

Информация в статье касается ECMAScript, но может использоваться и в других RegExp Движках (хотя и есть вероятность, что там есть более подходящее решение).

Если примеры кажутся вам сложными, рекомендую играть с ними в консоли, по мере прочтения. И Заранее прощу прочтение за пугающее название.

Статья

Если вы какое-то время используете регулярные выражения, то наверняка вы сталкивались с разными вариантами следующих задач:

  • Пересечение:«Что-то, что совпадает с шаблоном А и шаблоном Б»
    Например: Пароль, минимум 6 символов, в котором хотя бы одна цифра, хотя бы одна буква, и хотя бы один специальный символ

  • Исключение: «Я хочу что-то, что совпадает с шаблоном А, но не совпадает с шаблоном Б»
    Например: Любое целое число, которое не делится на 50

  • Отрицание: Все. Что не совпадает с шаблоном А
    Например: Строка, которая не содержит в себе слово «Foo»

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

Jquery.waypoints это плагин для реализации движения объектов по набору точек, так называемым вейпоинтам, с заданной скоростью и другими параметрами, физически имитирующие реалистичность. Частичное описание алгоритма было описано тут.

Отправляем теги в путешествие (jquery.waypoints)
Читать полностью »

В данном посте я хотел бы рассказать как сделать простой индикатор загрузки изображения используя библиотеку jQuery.
Читать полностью »

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

Видео (выбираем HD для наиболее удобного просмотра):

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

В ходе тестирования своего сервиса собралось достаточное количество фидбека, что олдскульный способ загрузки файлов в приложение не уносит. Люди хотели drag and drop и пытались перетащить картинки прямо с рабочего стола. Приложение у нас занимает весь экран браузера и написано на флеше, так что прямого способа решить задачу не нашлось.

Поразмыслив и погуглив решили реализовать D&D хотя бы для хрома вот так:
Когда пользователь переключается с вкладки с приложением, т.е. она теряет фокус, поверх флешки накладывается div на который навешано событие отлова дропнутых файлов.
Затем через ExternalInterface изображение в виде ByteArray передается во flash, где оно декодируется и отображается.
Читать полностью »

Mobiscroll — кастомный select для мобильных сайтов и не только
К каждому, кто сталкивался с разработкой сайтов под iOS/Android/etc (или native-приложений через phonegap и иже с ним), рано или поздно наверняка приходило осознание того факта, что стандартные управляющие элементы форм не очень удобны для работы с touch-экранов.

И если input'ы и textarea вполне можно отрисовать с помощью css, то с селекторами ситуация гораздо более грустная — и не улучшить особо, и выбирать, например, дату, последовательным выбором трех выпадающих списков — занятие не из приятных.
Помогает в решении этой проблемы мультиплатформенный (обещают как минимум работу на iOS/Android, но с некоторыми помарками работает и на MeeGo — это из проверенного собственноручно) select-заменитель Mobiscroll, с некоторым трудом нагугленный мной пару недель назад.

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


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