Все потоки
Поиск
Написать публикацию
Обновить
235.67

JavaScript *

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

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

Firefox: размер файла по ссылке, или через тернии к форку

Время на прочтение9 мин
Количество просмотров11K
Скриншот расширения Link Properties Plus
Вашему вниманию представляется небольшая история появления расширения Link Properties Plus и описание того, как работает его основная часть.
Расширение позволяет узнать размер, дату последнего изменения и некоторые другие свойства файла по ссылке (в том числе прямую ссылку после всех перенаправлений) без скачивания всего файла целиком. Если, конечно, все это сообщает сервер.
Читать дальше →

Счётчик индивидуального отсчёта времени на чистом JavaScript

Время на прочтение3 мин
Количество просмотров12K
Иногда нужно реализовать отсчет времени для каждого посетителя в отдельности, на одностраничниках либо сайтах — без установки плагинов и подключения библиотек (например, jQuery). Для решения этой задачи я разработал счётчик на чистом JavaScript.
Данный счетчик работает следующим образом:
  1. Активируется при загрузке страницы.
  2. Проверяет наличие записи окончания отсчета в Cookie браузера посетителя.
  3. Если запись есть — то считывает её. Если записи нету — то берёт время указанное в настройках скрипта, и делает запись в Cookie браузера посетителя.
  4. Производятся преобразования времени в формат для более гибкой настройки оформления счетчика.
  5. Выводится счетчик либо надпись о завершении отсчета (если время закончилось) в место вызова скрипта.
Читать дальше →

Связные списки в функциональном стиле

Время на прочтение2 мин
Количество просмотров20K
Рассмотрим вариант реализации связных списков через замыкания.

Для обозначения списков будем использовать нотацию, похожую на Haskell: x:xs, где x — начало списка (head), xs — продолжение (tail).



В качестве языка реализации я выбрал JavaScript.

Конструируем список

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

Tree View с «CRUD операциями», «drag and drop (DnD)» и «отложенной загрузкой» с использованием Dojo Tree, Entity Framework, SQL Server и ASP.NET MVC

Время на прочтение11 мин
Количество просмотров13K
image

Введение

Dojo Toolkit это модульная JavaScript библиотека с открытым исходным кодом, предназначенная для облегчения быстрой разработки кросс-платформенных JavaScript/Ajax-ориентированных приложений и веб-сайтов, которая предоставляет некоторые действительно мощные возможности для пользовательского интерфейса. Компонент Dojo Tree обеспечивает полное, привычное, интуитивно понятное, развертываемое представление иерархических данных. Этот компонент поддерживает отложенную загрузку веток, что делает его хорошо масштабируемым для больших объемов данных. Dojo Tree отличный виджет для представления данных с отношениями «предок-потомок».

Эта статья показывает процесс создания дерева, поддерживающего «CRUD операции», «drag and drop (DnD)» и «отложенную загрузку». Чтобы создать такое дерево мы будем использовать Dojo Tree, Entity Framework, SQL Server и Asp .Net MVC.
Читать дальше →

Обзор ECMAScript 6, следующей версии JavaScript

Время на прочтение6 мин
Количество просмотров99K
Для начала, ликбез и несколько фактов:
  • ECMAScript — это официальный стандарт языка JavaScript (Слово JavaScript не могло быть использовано, потому что слово Java являлось торговой маркой компании Sun) Т.е. JavaScript — это имплементация стандарта ECMAScript.
  • TC39 — комитет, развивающий стандарт ECMAScript и принимающий решения по включению фич в него.
  • ECMAScript стандартов много. Самый популярный из них — ECMA-262.
  • ECMAScript 5 — последняя редакция стандарта ECMA-262 (утвержден в 2009 году).
  • Предыдущие версии стандарта ECMA-262 были (совсем старые не упоминаю):
    • ECMAScript 3 — поддерживается большинством браузеров (утвержден в 1999 году).
    • ECMAScript 4 — не принят в виду слишком радикальных изменений в стандарте. Позднее в июле 2008 году в урезанном варианте (но все же намного богаче, чем ECMAScript 3) вылился в новый проект ECMAScript Harmony.

  • ECMAScript 6 (кодовое имя ECMAScript.next) должен утвердиться до конца 2013 года.


Итак, что же нас ждет в новой версии JavaScript?

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

Firefox: приватные вкладки, разные API и расширения, не требующие перезапуска

Время на прочтение12 мин
Количество просмотров20K
Расширение Private Tab
Речь пойдет о моем расширении Private Tab для Firefox и SeaMonkey: некоторые подробности реализации – и конкретно этого, и расширений, не требующих перезапуска (aka restartless), вообще.

Расширение добавляет приватные вкладки, для которых не будет сохраняться история и будет использоваться отдельный набор cookies.

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

Использование паттернов проектирования в javaScript: Порождающие паттерны

Время на прочтение5 мин
Количество просмотров76K
Привет, хабр!
С удивлением обнаружил отсутствие на хабре развернутой статьи о сабже, что немедленно сподвигло меня исправить эту вопиющую несправедливость.

В условиях когда клиентская часть веб-приложений становится все более толстой, бизнес-логика неумолимо переползает на клиент, а на суверенитет серверных технологий все более смело посягает node.js нельзя не задуматься о приемах проектирования архитектуры на javaScript. И в этом деле нам несомненно должны помочь паттерны проектирования — шаблонные приемы решения часто встречающихся задач. Паттерны помогают построить архитектуру, которая потребует от вас наименьших усилий при необходимости внести изменения. Но не стоит воспринимать их как панацею, т.е., грубо говоря, если качество кода «не фонтан», он кишит хардкодом и жесткой связью между логически независимыми модулями, то никакие паттерны его не спасут. Но если стоит задача спроектировать масштабируемую архитектуру, то паттерны могут стать хорошим подспорьем.
Но впрочем эта статья не о паттернах проектирования как таковых, а о их применении в javaScript. В первой части этой статьи я напишу о применении порождающих паттернах.
Читать дальше →

24 совета javascript-разработчику

Время на прочтение9 мин
Количество просмотров86K
От переводчика: Не смотря на то что оригинал данной статьи датирован январем 2009 года, она не потеряла актуальности и теперь. Я надеюсь что даже те, кто используют JavaScript не первый год, почерпнут для себя что-то полезное.

1. Используйте === вместо ==


В JavaScript существует два разных типа операций сравния: === / !== и == / !=. Считается хорошим тоном всегда использовать первую пару для сравнения.
“Если два операнда одного типа и значения, то === вернет true, а !== false”
JavaScript: The Good Parts
Читать дальше →

Nodecopter — управление квадрокоптерами на Javascript

Время на прочтение2 мин
Количество просмотров19K
Уже давно существует целое сообщество любителей-разработчиков, которые занимаются программированием летающих роботов. Они устраивают периодические конференции и сходки. Но в чем же особенность данного сообщества, спросите Вы? дело в том, что программирование квадрокоптеров осуществляется на Javascript на платформе NodeJS. Среди разработчиков большой популярностью пользуется всем уже известный ArDrone Parrot, который уже не раз освещался на страницах Хабра.



Подробности под катом.
Читать дальше →

4-числовая система нумерации версий с датой и минорами

Время на прочтение8 мин
Количество просмотров9.2K
В расширениях Хрома принято указывать версию скрипта в виде не более чем 4 чисел, разделённых точками, и величиной не более 32767 каждое и не начинающихся с цифры 0. Этого более чем достаточно, если в номер версии включены обычные данные: версия, подверсия, сборка. Если в версию хотим поместить дату в виде 3 чисел, то в наиболее удобной для чтения записи (версия.год.месяц.день) числа года, месяца и дня занимают 3 места из 4. На версию остаётся первое число (как более приоритетное перед датой), а на подверсию и минор ничего не остаётся. Задача: как расположить минорную версию, чтобы уложиться в формат, чтобы дата была читаемой, а версия с минором при сравнении 2 строк занимала правильное место в ряду версий? Кроме того, нужна процедура выделения даты и версии с минором из общей строки.
как это сделать с регекспами и скриптами

Пишем сложное приложение на knockout.js — 2

Время на прочтение12 мин
Количество просмотров16K
Я тут пишу одну эпическую мегахрень, которую хочу пропиарить на хабре. Эта штука типа распределенной социальной сети. Там есть ядра с api, которые общаются по некоторому стандарту и фронтенд. Особенностью сети является то, фронтенд живет «отдельно» от ядра, то есть сеть не имеет своего домена — берем html, ставим ссылку на любое ядро и получаем сеть, которая живет поверх сайта. Внешне это похоже на социальные плагины фейсбука — комментарии и лайки оттуда можно поставить на любую свою страницу — только вместо тегов fb-like используются мощные биндинги knockout.js + пользователь не ограничивается огрызками из комментариев и лайков — на сайт можно импортировать практически любой блок из сети и сделать почти любое действие. Фронтенд написан на тех же технологиях, которые юзер может использовать и дописывать на своей странице.

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

Расскажу про систему, которая встраивается на html-страницу через биндинги нокаута. Код живет в подключаемых виджетах, которые состоят из html-шаблонов с knockout-обвязкой. Виджеты могут быть вложены друг в друга. Все это использует require.js и живет в amd форме. Зависимости от внешней страницы сведены к минимуму, все библиотеки (jquery, knockout и плагины) используются только свои в локальном пространстве с namespace-ами. Для сборки кода используется r.js. Еще как крутые перцы напишем на базе бутстраповского диалога полноценный оконный менеджер — с нокаутом это как два пальца об асфальт…
Читать дальше →

50 потрясающих плагинов jQuery

Время на прочтение1 мин
Количество просмотров89K

Кто-то вчера шутил, а кто-то занимался реально полезными вещами. Как например болгарский разработчик Мартин Ангелов, опубликовавший впечатляющий обзор JS библиотек:
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
Настоятельно рекомендуется к обозрению.
PS Куда-то пропал тип топика «Ссылка» :(

Первоапрельские CSS-сниппеты

Время на прочтение3 мин
Количество просмотров26K
Предлагается вот такой вот комплект CSS снипетов, которыми можно раскарсить первое апреля.

/*
  Turn every website upside down
*/
body {
  /*-webkit-transform: rotate(180deg);
  transform: rotate(180deg);*/
}

/*
  blur every website for a split second every 30 seconds
*/
body {
  /*-webkit-animation: blur 30s infinite;*/
}

/*
  Spin every Website
*/ 
body {
  /*-webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;*/
}

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

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

Нельзя просто так взять и обратиться к фоновой странице

Время на прочтение9 мин
Количество просмотров45K
Всё дело — в политике безопасности, аналогичной кроссдоменной. Обращение к страницам других табов или к фоновой странице расширения сознательно ограничено, потому что они считаются страницами других доменов, имеют запреты на прямой доступ к скриптовому окружению, аналогично чужим окнам и фреймам. Механизм сообщений «спасает» как при кроссдоменном доступе между фреймами, как и в доступе к страницам расширений (фоновая, настройки, попап, ...).

В расширении браузера Google Chrome (и Chromium) наиболее важна по функциям — фоновая страница. Она имеет специальный URL вида chrome-extension://ciegcibjokpkcklhgbpnmnikpkmkhbjk/, где длинное имя домена — случайное имя, создаваемое в недрах браузера, которым именуется также каталог расширения где-то в служебной папке ОС. Из контентного скрипта (аналогичного юзерскриптам, исполняемым на странице браузера) можно получить доступ к файлам и картинкам расширения. Но нельзя выполнить много функций, путь к которым лежит через фоновую страницу: устроить хранилище, относящееся к группе реальных доменных имён; хранить настройки расширения, общие для всего расширения. Нужно лишь добраться в Мордор к фоновой странице. Однако, нельзя просто так, по URL, это сделать.
Как же добраться к фоновой странице?

Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани

Время на прочтение1 мин
Количество просмотров74K
Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.



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

Перевод с чешского источника

Pixi.js — 2D движок с прозрачной поддержкой WebGL

Время на прочтение1 мин
Количество просмотров81K
Pixi.js позволяет использовать мощь WebGL для рендеринга 2D-сцен, совершенно не вникая в подробности реализации, более того, он умеет самостоятельно определять наличие поддержки WebGL и переключаться между способами рендеринга. В отсутствие WebGL рендеринг осуществляется средствами canvas. Кроме того в Pixi.js реализован граф сцены, поддержка текстур и спрайтов, чуть больше недели назад в нём появилась поддержка интерактивности — на спрайты можно повесить обработчики событий мыши и тачскрина.
Читать дальше →

Github Visualizer — Сервис визуализации истории репозиториев с GitHub

Время на прочтение7 мин
Количество просмотров17K
Будучи поклонником программных продуктов для визуализации активности в репозиториях таких как code_swarm и gource. В один прекрасный день я был посещен музой, которая вдохновила меня создать онлайн сервис для визуализации статистики репозиториев с GitHub.
И сегодня хочу предоставить на ваш суд мой проект GitHub Visualizer (проект на GitHub).
Вот скринкаст для предварительного знакомства.

И не большая Gif'ка
image

Что использовано


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

Mozilla предлагает создавать «тяжёлые» 3D-игры для web на их новом движке

Время на прочтение1 мин
Количество просмотров26K
Сегодня Mozilla совместно с игровой студией Epic Games выступила с инициативой создания визуально привлекательных 3D-игр, которые не должны уступать декстопным аналогам, и выполняться прямо в браузере.

Фактически речь идёт о том, чтобы перенести в веб опыт создания качественных, требующих высокой производительности, игровых приложений, которые должны будут выполняться обновленным движком JavaScript OdinMonkey, который недавно был включён в ночные сборки FireFox и скорость выполнения кода на Asm.js которым в 10 раз превышает аналогичный в других браузерах. Причём это всё без сторонних плагинов вроде Flash или Silverlight — чистый JavaScript.

Тот визуальный опыт, который должен получить геймер в интернете, играя в 3D-игру, предлагается оценить на видео ниже — так выглядит порт Unreal Engine 3, сделанный инженерами Epic Games и Mozilla:



Узнать подробности

FightCode: танковые войны на JavaScript

Время на прочтение5 мин
Количество просмотров68K
FightCode — это онлайн-игра для программистов, построенная по образу и подобию классической Robocode. Для программирования танков используется JavaScript, все сражения происходят прямо в браузере, а редактор кода на сайте имеет встроенную «песочницу», которая позволяет в реальном времени видеть эффект от изменений кода. В отличие от многих других подобных игр, создатели неплохо поработали над дизайном — игровое поле и весь сайт в целом выглядят привлекательно и ярко.



Всё это делает FightCode одним из лучших вариантов для новичков в подобных играх или для обучения программированию. Проект довольно молодой, и несмотря на то, что на сайте зарегистрировано почти 9000 игроков, пробиться в первую сотню рейтинга можно без особых усилий. Очень удобно организована система боёв со случайными соперниками — из всех доступных роботов автоматически выбираются те, чей рейтинг близок к вашему. Очки считаются по системе Эло — победа над более сильным противником даёт гораздо больше очков, чем над слабым.

Каждый участник может иметь сколько угодно роботов. Создание нового робота начинается с примитивного шаблона, который не делает почти никаких осмысленных действий. Добавив обработчики основных событий, таких как столкновения или попадания вражеского снаряда можно дать роботу набор «безусловных рефлексов», которые сделают его поведение более целесообразным и послужат отправной точкой для дальнейшего развития.
Вот как это делается:

Букмарклет для шаринга в Одноклассники.ru

Время на прочтение1 мин
Количество просмотров3.4K
У многих соц.сетей и сообществ существуют примеры использования букмарклетов (bookmarklet) для шаринга ссылок, картинок и т.п. из броузера. Мне кажется это удобным, если вы любите часто делиться контентом через соц.сети. Например, чтобы поделиться открытой в окне броузера фоткой или картинкой достаточно воспользоваться букмарклетом, вместо того, чтобы копировать адрес фотки, открывать страницу соц.сети и там как-то шарить ссылку.
У FB, VK, LJ и прочих примеры букмарклетов есть обычно в разделе помощи. У Одноклассников (odnoklassniki.ru) нет ни примера на сайте сети, ни примеров вообще в гугле. То ли никому эта сеть не нужна, то ли никто не пользуется букмарклетами для шаринга контента.
Т.к. в сети не нашёл ни одного примера букмарклета, решил поделиться своей поделкой (взял букмарклет для FB и переделал его под Одноклассники).
Читать дальше →

Вклад авторов