JavaScript *

Всем привет!

Этим летом будут мастер-классы в нескольких городах.

17-18 июля в Москве.
24-25 июля в Киеве.

Ведущий — Илья Кантор ( javascript.ru, algolist.manual.ru, еще пара слов на странице мастер-классов).
Программы:

• Профессиональное javascript-программирование.
• Сложный AJAX и COMET: тонкости Web 2.0.
• Мастер-класс по клиентской оптимизации.
• Секреты jQuery.

Более подробно программу вы можете прочитать на javascript.ru/mk

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

Мероприятие платное, но цена очень доступная. Сейчас это 1300 руб / 350 грн за мастер-класс.

Регистрация открыта на javascript.ru/mk, там же больше информации о мастер-классах.

P.S. На этом же URL — планы по другим городам.

Данная статья посвящена Appcelerator Titanium — платформе для создания мобильных и десктопных кроссплатформенных приложений на JavaScript (HTML+CSS в придачу). Развитие платформы, особенности, варианты использования, личный опыт

Некоторое время назад, я публиковал топик про 3D с z-buffer-ом, субпиксельной точностью и освещением по Гуро на javascript с использованием канвы.

Сегодня я представляю вашему вниманию вариант без канвы (да и без gouraud shading, чего уж тут).



Это всего-лишь тестовые наработки, но, тем не менее, они работают (а лучше посмотрите сами).

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

Это часть фреймворка, который я сделал для своей платформы Akshell, вот полный код решения и документация. Однако оно может пригодиться в любой Server-Side JavaScript среде, на стороне сервера удобное создание иерархий классов особенно актуально. Его можно использовать и на клиенте, если заменить работу со свойством __proto__ оператором new.

Недавно Гугл позволил проговаривать текст с помощью Text-To-Speech API. Теперь возможно и обратное преобразование речи в текст.

Используя speechapi.com возможно построение интересных речевых веб-ресурсов включающих двустороннее текст-в-речь и речь-в-текст (speech-to-text as и text-to-speech) преобразования.

Это стало возможным благодаря использованию различных технологий: flash используется для доступа к микрофону и потоковому аудио, Red5 — как разносторонний медиа сервер с открытым исходным кодом.

(Ссылка на оригинал)
UPD: перенес в Javascript

Пример использования API:

Marak Squires выпустил в свет JSLINQ — реализацию LINQ для JavaScript, работающую как на стороне браузера, так и на стороне сервера (к примеру, node.js). Поддерживаются такие конструкции, как JOIN, UNION, RANGE, DISTINCT, COUNT etc.

Смотрите:

• Код и примеры на GitHub;
• Живая демонстрация на сайте автора.

— Здра…
— А-а-а!
— Ну ты чего?
— Я вас боюсь!
— Чего это?
— Вы вечно меня унижаете…
— Хех, ну ладно, больше не буду.
— Правда?
— Доо, хочешь конфетку с аяксом?
— Конечно!
— Тада давай, лети к нам в Питер. Вот список авиарейсов на которые есть билеты отсортированный по цене: rasp.yandex.ru/search?cityFrom=Санкт-Петербург&cityTo=Москва
— Эм… что-то вы наврали дяденька — там вообще все рейсы из Москвы в Питер, отсортированные по времени отправления.
— Гм… действительно, не хорошо получилось… а значешь почему?
— Нэ?
— Потому что состояние приложения не отражается на uri. Поэтому каждый раз заходя на эту страницу из закладок, тебе придётся заново устанавливать фильтрацию и сортировку.
— Блоо, как же быть?

Я думаю многие пользуются DataBinding`ом в .NET, она же привязка данных. Она позволяет, при выделенной модели данных и независимом визуальном представлении, забыть о синхронизации данных с формой. Привязав один раз properties модели к элементам представления, мы избавляемся от десятков обработчиков onChange и подобных для изменения полей модели, а в случае изменения поля вне gui-интерфейса (например синхронизация модели с базой), мы не будем мешать уровни абстрации, чтобы обновить textBox.text. Давайте данные будут отдельно, gui отдельно. Плюс мы получаем наглядный, легко переносимый код на asp.net или даже на другой язык/платформу.

 

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

— Здравствуй…
— А-а-а! Памагите! Убивают! \(0_0)/
— Дружок, спокойно, я свой :-\
— Свои незаметно сзади не подкрадываются! \(@_@)/
— А я динамически добавился В-]
— Э-э-э \(~_~)/
— Ясно, не знаешь, как реагировать на такие ситуации? XD
— Ну… как бы… есть мысли… \(=_=)/
— Покажи-ка свой исходник %-)
— Я… эта… стесняюсь… \(._.)/
— Давай, не боись, я же свой ;-)
— Лаааадно \(-_-)/

<body><br>    <script><br>        $(function(){<br>            $('.c-example').wrapInner( '<span class="wrapper" />' )<br>        })<br>    </script><br>    <div class="c-example">epic</div><br></body>

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

C помощью библиотеки CanVG, в тэг можно отрисовывать SVG файлы.
Посмотреть на различные SVG-шки и даже вставить свою можно на тестовой страничке.
Надо сказать, что сложные изображения довольно сильно нагружают браузер, к примеру, world

via Ajaxian

Недавно проделана работа по написанию пользовательского скрипта (браузеры Firefox, Chrome и Opera), в котором понадобилось обращаться к документу XML, находящемуся в старшем домене 2-го уровня из домена 3-го уровня. Работа открыла взгляд на некоторые особенности поведения браузеров, особенно, Оперы, причины которых до конца не выяснены. Но, так как такой скриптинг (чтение и запись в документы XML в наддомене) иногда необходим, хотел бы поделиться практическими результатами и показать открытые вопросы.

Предлагаю вашему вниманию мастер-классы по Javascript.

В апреле-мае пройдут мастер-классы по javascript в Москве и Санкт-Петербурге.
Даты — 24 и 25 апреля для Москвы, 29 и 30 мая для Санкт-Петербурга.

Все мастер-классы веду я, Илья Кантор ( javascript.ru, algolist.manual.ru, еще пара слов на странице мастер-классов).

Темы мастер-классов:

• Профессиональное javascript-программирование.
• Сложный AJAX и COMET: тонкости Web 2.0.
• Мастер-класс по клиентской оптимизации.
• Секреты jQuery.

Более подробно программу вы можете прочитать на javascript.ru/mk.

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

Мероприятие платное, но цена очень доступная.
Даже можно сказать, символическая.
Приходите, узнаете много нового.

Регистрация открыта на javascript.ru/mk, там же больше информации о мастер-классах.

Решил сделать интерактивную турнирную таблицу-график для футболного чемпионата России. Вот такую:



Выбор инструментов был прост:

• табличка для браузера — значит, что-нибудь из вэб-технологий;
• нужна векторная графика;
• никаких закрытых либо сложных приложений при создании — я все-таки не вэб-дизайнер.

В итоге выбор естественным образом пал на связку SVG+JavaScript (что, правда, исключило IE из списка поддерживаемых браузеров).

URI-fragments (они же fragment identifiers, hash, закладки, якоря) в последнее время стали активно использоваться в интерактивных веб-приложениях как удобное средство для указания прямых ссылок на различные элементы интерфейса и состояния приложения. Наиболее ярким примером использования fragment-адресации является GMail. Как Вы могли заметить, папки Входящие, Отправленные, Черновики имеют ссылки, оканчиващиеся на #inbox, #sent, #drafts. Переход между ними не приводит к перезагрузке всей страницы (обновляется только список писем), но в то же время при открытии каждой из них в отдельном окне/вкладке мы сразу же попадаем на искомую страницу.

Реализации такого удобного механизма навигации средствами JavaScript посвящена данная статья

I was impressed! Вроде бы все понятно и давно известно, но в голову не приходило.

	var store = {
		id: 1,
		cache: {},
		add: function( fn ) {
			if ( !fn.uuid ) {
				fn.uuid = store.id++;
				return !!(store.cache[fn.uuid] = fn);
			}
		}
	};

	function ninja(){}

	assert( store.add( ninja ), "Function was safely added." );
	assert( !store.add( ninja ), "But it was only added once." );

Взято из Secrets of JavaScript ninja by John Resig

— Здравствуй, дружок…
— Дяденька, вы снова расскажете мне сказку?
— Конечно! Какой умненький мальчик!
— А про что?
— М… сегодня я расскажу тебе о том, куда пропадают чересчур самостоятельные мальчики вроде тебя…
— Э! Что значит пропадают?
— Вот то и значит… На, держи огнелиса *протянул, держа за хвост, пылающее пламенем животное* Только осторожно — он горячий!
— Ай-ай-ай! Он брыкается!
— Посади на него огненного жука — мигом успокоится.
— Класс! Действует!
— Ато! Теперь скажи ему:

function throwException( ){
    (void 0)()
}
throwException()

— Здравствуй, дружок. Хочешь, я расскажу тебе сказку? }:-]
— Конечно, дяденька, а какую? *_*
— Я расскажу тебе как делают детей ^_^'
— ого, как интересно! @_@
— Так вот, слушай. Дети появляются вследствие долгого и изнуряющего процесса разной степени нецензурности. Сейчас я поведаю тебе как появился на свет мой сын %-)
— А вы меня с ним познакомите? *о*
— Не торопи события. Обо всём по порядку. Однажды я наваял такой код:

1. try {
2.     throw new Error
3. } catch( e ){
4.     if( e != false ) throw e
5. }

Здравствуй Храбрачеловек,

сегодня я решил поделиться с тобой Plugin'ом для Notepad++, который позволит тебе спомощью JavaScript автоматизировать некоторые действия над текстом

Как известно, в JavaScript нельзя создать несколько функций, различающихся только списком параметров: последняя созданная перезапишет предыдущие. Про различие на уровне типов параметров говорить не приходится вообще. Обычно, если программист хочет создать функцию с множественным интерфейсом, он пишет что-то вроде такого:

1. // getRectangleArea(x1, y1, x2, y2) или
2. // getRectangleArea(width, height)
3. function getRectangleArea(x1, y1, x2, y2) {
4.   if(arguments.length==2) return x1*y1;
5.   return (x2-x1)*(y2-y1);
6. }

* This source code was highlighted with Source Code Highlighter.

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