Обновить
128K+

JavaScript *

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

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

Вселенная npm

Время на прочтение3 мин
Охват и читатели31K
Привет, Друзья!

Хотел поделиться с вами своим последним мини-проектом: трехмерной визуализацией всего npm. Вселенная выглядит примерно так:

весь npm

Можно летать клавишами WASD, или если вы смотрите ее из телефона — просто вращая телефон вокруг (телефон должен поддерживать WebGL).
Читать дальше →

Создаем собственные виджеты в Dojo

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

Dojo Toolkit это одновременно самый мощный и наименее используемый JavaScript фреймворк. Dojo состоит из AMD модулей, большая часть которых является виджетами. Виджеты обычно состоят из логики на JavaScript и HTML шаблона. В будущей версии 2.0 заявлена поддержка WebComponents. Dojo позволяет легко как создать полностью новый виджет, так и расширить или изменить уже существующий. В этом посте я расскажу как это делать.
Читать дальше →

Печать из Google Apps Script

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

Часть 1. Challenge


Читая ленту на oDesk, наткнулся на интересный проект по моему направлению (а я отслеживаю, в основном, задачи на написать что-то, прикрутить что-то или иным способом замучить Google Apps Script или приложения Google Apps). Клиент просил написать скрипт, который будет отсылать ему выделенный фрагмент из Google Spreadsheet по нажатию кнопки. Но была в описании одна фраза, зацепившая меня — «Мне сказали, что невозможно создать скрипт, который будет печатать из Google Apps». Я всегда очень любил и люблю «невозможные» задачи:
— Мы сами знаем, что она не имеет решения, — сказал Хунта, немедленно ощетиниваясь. — Мы хотим знать, как её решать.
Аркадий и Борис Стругацкие. Понедельник начинается в субботу

Статья рассчитана на читателей, уже знакомых с Google Apps Script и сопутствующими технологиями.
Читать дальше →

Краткий конспект по языку JavaScript

Время на прочтение15 мин
Охват и читатели116K
Я —.NET разработчик. Но в последнее время всё чаще сталкиваюсь с JavaScript. Причём, процентах в 50 случаев я что-то на нём пишу, в остальных 50 — разбираюсь с чужим кодом, да ещё и прошедшим через минификацию, а иногда и обфускацию. В этой статье захотелось поделиться теми моментами, которые мне показались важными для понимания языка и эффективной работы с ним. Тут не будет ничего нового или неизвестного для людей, уже имевших дело с языком, и не будет чего-то такого, чего нельзя найти в других источниках. Для меня статья будет полезна как способ лучше разобраться в предмете, для читателей, я надеюсь, — как повод освежить знания.

Брендан Айк упоминал, что JavaScript был создан за 10 дней. Думаю, идея вынашивалась дольше. Как бы то ни было, язык получился и с тех пор только набирает популярность. Особенно после появления AJAX.

JavaScript — язык со слабой динамической неявной типизацией, автоматическим управлением памятью и прототипным наследованием.

JavaScript состоит из трёх обособленных частей:

  • ядро (ECMAScript),
  • объектная модель браузера (Browser Object Model или BOM),
  • объектная модель документа (Document Object Model или DOM).


В статье, в основном, пойдёт речь о ядре. Конечно, в примерах кода будут использоваться элементы DOM и BOM, но заострять на них внимание не буду.
Читать дальше →

Алгоритмы и решения при разработке движка JavaScript на C#

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

Чуть меньше года назад я, так же, в песочнице, публиковал статью о начале разработки движка JavaScript на C#. Прошел год после создания проекта и я рад представить вам первую версию сего творения, которую можно скачать на nuget.
Но в этой статье я не буду пиариться, приводить сравнения с конкурентами, измерять производительность и прочее. Здесь я напишу о том, через что мне пришлось пройти, какой кровью всё это далось и с чем пришлось столкнуться.
Читать дальше →

Well.js – еще один подход к модульной разработке на JavaScript

Время на прочтение7 мин
Охват и читатели9.1K
По названию публикации некоторые могли подумать: «Что опять?! Еще один велосипед?» Спешу обрадовать – нет. Well.js (Github) – это обертка для существующих AMD-решений (по-умолчанию для Require.js), основная идея которой сделать работу с модулями и их зависимостями, как показалось автору, более привлекательной.

Например, возьмем модуль Require.js:

define(['views/common/basic-page', 'views/partials/sidebar', 'utils/helper', 'models/user'  ], 
	function (BasicView,SidebarView, Helper, UserModel) {  
	//тело модуля  
});  

И легким движением руки заменим на это:

wellDefine('Views:Pages:Overview', function(app, modules) {  
	this.use('Views:Common:BasicPage')  
		.use('Views:Partials:Sidebar')  
		.use('Utils:Helper', {as: 'MyHelper', autoInit: false})  
		.use('Models:User', {as: 'UserModel'})  
		.exports(function(options){  
			/* Теперь к зависимостям можно получить доступ через:  
			this.BasicPage  
			this.Sidebar  
			this.MyHelper  
			this.UserModel  
			*/  
		});  
});  


Кому интересно, для чего все это надо, прошу под кат.
Читать дальше →

Несколько интересностей и полезностей для веб-разработчика #33

Время на прочтение5 мин
Охват и читатели53K
Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Walkway.js и Vivus.js




Вы видели этот великолепный лэндинг посвященный анонсу Sony PlayStation 4? Обратите внимание на анимацию SVG объектов состоящих из контуров. Они словно рисуются художником в режиме реального времени. Отныне этот эффект можно легко повторить с помощью Walkway и Vivus. Обе библиотеки максимально просты в использовании и применимы только для path элементов, поскольку принцип их работы основывается на взаимодействии с CSS свойством strokeDashoffset. Хоть и у Walkway значительно больше звезд на Гитхабе, зато Vivus предоставляет несколько вариантов отрисовки: Delayed, Async и OneByOne.

//Walkway
var svg = new Walkway('#test');

svg.draw(function() {
  console.log('Animation finished');
});

//Vivus
new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

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

npm для простых смертных

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


Эта статья предназначена для тех, кто не очень дружит с Node.js, но хочет использовать приложения вроде Grunt, Gulp и тому подобные. Процесс работы с этими приложениями подразумевает редактирование файла package.json и использование команд npm, так что понимание принципов работы npm поможет вам справиться с трудностями.
Читать дальше →

Выразительный JavaScript: JavaScript и браузер

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

Содержание




Браузер – крайне враждебная программная среда

Дуглас Крокфорд, «Язык программирования JavaScript» (видеолекция)


Следующая часть книги расскажет о веб-браузерах. Без них не было бы JavaScript. А если бы и был, никто бы не обратил на него внимания.

Технологии веба с самого начала были децентрализованными – не только технически, но и с точки зрения их эволюции. Различные разработчики браузеров добавляли новую функциональность «по случаю», непродуманно, и часто эта функциональность обретала поддержку в других браузерах и становилась стандартом.

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

Выразительный JavaScript: Проект: язык программирования

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

Содержание




То, что проверяет и определяет смысл выражений в языке программирования, является в свою очередь просто программой.

Хэл Абельсон и Жеральд Сасман, «Структура и интерпретация компьютерных программ».

Когда ученик спросил учителя о природе цикла Данных и Контроля, Юань-Ма ответил: «Подумай о компиляторе, компилирующем самого себя».

Мастер Юань-Ма, «Книга программирования»


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

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

Мы построим язык программирования Egg (Яйцо). Он будет небольшим, простым, но достаточно мощным для выражения любых расчётов. Он также будет осуществлять простые абстракции, основанные на функциях.
Читать дальше →

Выразительный JavaScript: Модули

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

Содержание




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

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

Мастер-программист знает, когда нужна структура, а когда нужно оставить вещи в простом виде. Его программы словно глина – твёрдые, но податливые.

Мастер Юан-Ма, Книга программирования


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

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

Простой односторонний универсальный коннектор для Chrome

Время на прочтение3 мин
Охват и читатели7.7K
Мне нравится Netbeans Connector. Удобная штука, знаете ли. Редактируешь css в браузере, а IDE сохраняет и выгружает ее на сервер.
Но вот руки дошли до asp — и вот неожиданность, из вещей подобного плана для студии нашел только LiveStyle. Но чукча не читатель, чукча — писатель, так что возникла идея написать свой велосипед.
В принципе, идея простая: отлавливаем изменения в редактируемом файле, читаем содержимое файла, отсылаем в обработчик, который запишет это содержимое в нужный файл. Вот только облом — на уровне страницы это сделать проблематично(по крайней мере, так и не нашел ни 1 адекватного способа).
Хорошо, лезем курить мануалы по плагинам chrome(именно chrome потому, что мне нравится его консолька. Подозреваю, что любой нормальный браузер, поддерживающий плагины, может делать то же самое). Пара часов, что бы разобраться с нуля — и простенький плагин готов(нужен будет посложнее — база уже есть). Отсылка реализована через post, но способ — на ваше усмотрение(к примеру, NetBeans Connector использует веб-сокеты).

Итак, собственно код.
Читать дальше →

WinJS + универсальные приложения. Изучаем ListView

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


В предыдущей статье я рассказала о том, как создавать галерею изображений при помощи элемента управления FlipView. Сегодня мы рассмотрим элемент управления ListView, который позволяет не только отображать различные данные в виде списка, но и работать с ними – группировать, перетаскивать и переупорядочивать.
Читать дальше →

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

Meteor. Разрабатываем TODO List

Время на прочтение36 мин
Охват и читатели62K
В данном уроке я не хочу обсуждать, почему метеор убийца веба, тем более я так не считаю, но определенную симпатию к этому фреймворку имею. Поэтому хочу показать с чего можно начать при разработке приложения на нем, какие есть пакеты и вообще, что такое этот метеор.

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

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

И еще одно предупреждение: в данном уроке будут использоваться следующие технологии для непосредственного написания примера:

  • jade — html препроцессор;
  • less — css препроцессор;
  • coffeescript — язык программирования, компилируемый в javascript.

Видео, демонстрирующее приложение, полученное в ходе урока



И кому все еще интересно, добро пожаловать под кат.
Читать дальше →

GamepadAPI или джойстик в браузере

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

Здравствуй, Хабр!





Смотря, как всё более новые и новые технологии внедряются в веб, смотря, как в него переносят игры, я задумался: «А было бы круто, если бы геймпад тоже можно было подключить...». И в поиске первым же результатом было GamepadAPI.
Немного ниже ссылка на W3C GamepadAPI. Посмотрев, попробовав, я обнаружил ряд проблем, подводных камней, которые поставили бы крест на внедрении джойстиков в браузер. И я решил это исправить, создав интерфейс. Что есть «из коробки», и что именно было доработано, изменено и на мой взгляд улучшено, описано под катом.

Чтобы ходить по воде, надо знать, где подводные камни...

ECMAScript 6 Promises

Время на прочтение5 мин
Охват и читатели52K
На Хабре уже встречались статьи о замечательной технологии Promises, которая в будущем станет частью стандарта ECMAScript 6, однако, в этих статьях не было подробного описания, почему же они так полезны и в чем таки их преимущества. Дабы заполнить этот пробел, я решил написать эту статью.
Читать дальше →

Nexus 5 + JavaScript + 48 часов = сенсорная поверхность?

Время на прочтение6 мин
Охват и читатели68K
Несколько недель назад в Минске проходил хакатон WTH.BY, в котором я решил принять участие. Его основной идеей было то, что это хакатон для разработчиков. Мы могли делать все, что угодно, лишь бы нам это было весело и интересно. Никаких монетизаций, инвестиций и менторов. Всё весело и круто!

Идей для реализации у меня было много, но все они не дотягивали до какого-то «Вау!». Именно поэтому накануне мероприятия я пролистывал старые статьи хабра из раздела DIY и наткнулся на статью "Опыт создания multitouch стола". Это было то, что вызвало тот самый отсутствующий «Вау!» и я решил сделать отдаленный аналог из того, чтобы под рукой.

Под рукой у меня оказалось стекло формата примерно А3, обычная бумага, маркер, мобильный телефон и ноутбук. Я быстро нашел себе сообщника Егора и началась активная работа.

Картинки нет. И счастья нет. И денег тоже нет. И дальше будет только хуже.
Что было дальше?

Особенности загрузки объектов из карты формата KML на карту Яндекса

Время на прочтение2 мин
Охват и читатели18K
В API Яндекс.Карт есть средства для загрузки географических данных в формате XML. API поддерживает карты в двух форматах: YMapsML и KML. В документации по технологиям Яндекса есть пример, илюстрирующий работу с этим форматами.

Глядя на этот пример, можно предположить, что с точки зрения API оба формата эквивалентны, и работа с ними ничем не отличается. Тем более Яндекс предоставляет конструктор карт, в котором каждой карте автоматически назначаются ссылки на оба формата. Эти ссылки отличаются только суффиксом. Карта в формате YMapsML оканчивается на символ /, а адрес той же карты в формате KML на конце содержит символы ".kml".

Независимо от формата XML загрузка геообъектов будет выглядеть так:
var map = new ymaps.Map("map", {
    center: [-25.89, 135.32],
    zoom: 4,
    controls: ["zoomControl"]
});

var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz/";

ymaps.geoXml.load(url).then(function (res) {
    map.geoObjects.add(res.geoObjects);
});


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

Пример загрузки YMapsML
var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz/";

ymaps.geoXml.load(url).then(function (res) {
    res.geoObjects.each(function (obj) {
        if (obj.properties.get("name") == "Бассов пролив") {
            obj.options.set("strokeColor", "0066ffff");
        }
    });
    map.geoObjects.add(res.geoObjects);
});



Оказывается, что если мы заменим адрес на формат KML, то данный код работать не будет, потому что коллекция объектов, загруженная из формата KML отличается от той, что получается при загрузке YMapsML. При загрузке KML получается коллекция объектов, состоящая из одного геобъекта, который сам является коллекцией. И вот этот вложенный объект уже содержит геообъекты, нарисованные на карте.

Поэтому для обработки коллекции, загруженной из KML надо написать вот такой код:

Пример загрузки KML
var url = "http://maps.yandex.ru/export/usermaps/4c4r9MAwI8DLmJKv1H--R0_bvQmHNLDz.kml";

ymaps.geoXml.load(url).then(function (res) {
    res.geoObjects.each(function (obj) {
        obj.each(function (nested) {
            if (nested.properties.get("name") == "Бассов пролив") {
                nested.options.set("strokeColor", "0066ffff");
            }
        });
    });
    map.geoObjects.add(res.geoObjects);
});


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

Ecmascript 6 — что можно использовать уже сейчас

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


Примечание: статья расчитана в основном на не-Javascript программистов — иногда я буду вдаваться в объяснения достаточно основных вещей, но надеюсь будет полезна и тем, кто просто не успел ознакомиться с большинством нововведений ES6.

Как известно, стандарт Ecmascript 6 собираются опубликовать в июне 2015. Но так как многое уже имплементировано в современный браузерах, почему-бы не начать использовать это прямо сейчас?
Поскольку jsFiddle и аналоги ES6 не поддерживают, буду использовать es6fiddle для примеров. К сожалению, не все в нем можно показать из-за багов. При отсутствии ссылок на es6fiddle рекомендую копировать сниппеты кода в консоль современного браузера и выполнять их — для наглядности. Рекомендую крайний стабильный Firefox (версия 33 на момент написания статьи) — там все работает «из коробки».

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

Выразительный JavaScript: Регулярные выражения

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

Содержание




Некоторые люди, столкнувшись с проблемой, думают: «О, а использую-ка я регулярные выражения». Теперь у них есть две проблемы.
Джейми Завински

Юан-Ма сказал: «Требуется большая сила, чтобы резать дерево поперёк структуры древесины. Требуется много кода, чтобы программировать поперёк структуры проблемы».
Мастер Юан-Ма, «Книга программирования»


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

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

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