Это мой уважаемый коллега, человек с большим опытом разработки сложных приложений, в прошлом один из разработчиков javascript-фреймворка Dojo Toolkit.

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

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

И еще, очень интересно! Принять участие в мастер-классе «Секреты jQuery» можно будет в режиме on-line.

Исходное объявление на javascript.ru »

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

Теперь подробнее о содержании мастер-классов.

«Профессиональное javascript-программирование»

- Javascript, browser tips & tricks.
- Фишки DOM, функции/замыкания, ООП – понятно и в деталях.
- Малоизвестные возможности javascript и браузеров.
- Javascript-фреймворки. Сравнение современных возможностей. jQuery в деталях.
- Полезный инструментарий, который сделает вашу разработку быстрее и качественнее. Гораздо больше, чем Firebug.
- Обмен информацией между окнами с разных доменов
- HTML5: что уже есть, а что нас ждет уже скоро.

Этот мастер класс – отнюдь не об основах javascript, здесь присутствует много информации для профессионалов.
Москва: суббота, 20 февраля, 11.00
Санкт-Петербург: суббота, 27 февраля, 11.00
Продолжительность – 4 часа.

«Клиентская оптимизация»

- Способы и принципы сжатия javascript, что делать, чтобы код сжимался эффективнее.
- Идеальное кеширование. Скрипты и серверная часть.
- Эффективная оптимизация javascript. Подходы, цифры, рецепты.
- Основные приемы оптимизации jQuery.
- Ускорение загрузки страницы через HTTP pipelining.
- Оптимизация с Google Gears и HTML5.
- Google Closure Compiler в деталях
- Удобные инструменты для оптимизации и профайлинга.

Про то, как ускорить страницу, почти ничего не делая, и как серьезно ускорить страницу и сайт, если что-то сделать.
Москва: воскресенье, 21 февраля, 11.00
Санкт-Петербург: воскресенье, 28 февраля, 11.00
Продолжительность – 4 часа.

«Сложный AJAX и COMET: тонкости Web 2.0″

- Асинхронная подгрузка событий с сервера (COMET) – различные варианты, сравнение и примеры реализации.
- Кнопки back-forward, закладки и история с AJAX.
- Cпособы написания чата/оповещающего демона, аспекты производительности и решения.
- Кросс-доменные ограничения, способы их преодоления.
- Асинхронный try..catch. Удобная работа с асинхронностью.
- Инструменты для разработки и отладки сложных AJAX-приложений.
- Специализированный COMET-сервер, установка, расширение, интеграция. Поднимем COMET прямо на мастер-классе.

Мастер-класс сделает современные подходы простыми и понятными для вас, позволит улучшить те приложения, которые есть сейчас, и перейти к качественно новой разработке в будущем.
Москва: суббота, 20 февраля, 16.00
Санкт-Петербург: суббота, 27 февраля, 16.00
Продолжительность – 4 часа.

«Секреты jQuery»

1. Как работает поисковой движок jQuery $(‘…’).
- Внутреннее устройство. Алгоритм поиска. No magic.
- Почему некоторые очевидные запросы тормозят, и как их ускорять.
- Расширение поискового движка, добавление своих фильтров.
2. Система событий в jQuery.
- Внутреннее устройство.
- Слабо- и недокументированные фичи, отсутствующие в обычных javascript-событиях.
- Влияние системы событий на быстродействие и DOM-манипуляции. Что тормозит и почему.
- Обход утечек памяти.
3. Фишки AJAX.
- Особенные фичи AJAX в jQuery, которых нет в других библиотеках и полезные приемы работы с ними.
4. $.изнутри.
- Внутреннее устройство функции $. Что она делает быстро, а что – нет.
- Создание плагинов. Внутренний механизм работы $.fn.plugin.
5. jQuery UI.
- Обзор и устройство jQuery UI.
- Написание собственных виджетов. Объявление, вызов методов и т.п. Примеры.
- Приемы для более удобной работы с виджетами.
6. Профайлинг jQuery-приложения
- Как из каши $(вызовов) получить читаемый профиль.
7. Дополнительно.
- Общий обзор библиотеки jQuery, ее сильных и слабых мест. Сравнение с другими фреймворками. Новое в jQuery 1.4.

Мастер-класс посвящен слабо документированным особенностям и устройству фреймворка jQuery. Это не вводный курс. Знакомство и опыт работы с фреймворком jQuery – обязательны.
Москва: воскресенье, 21 февраля, 16.00
Санкт-Петербург: воскресенье, 28 февраля, 16.00
Продолжительность – 3 часа.
On-line: суббота, 27 февраля, 20.00-21.50 и воскресенье, 28 февраля, 20.00-21.50

Дополнительная информация, запись на мастер-классы »

Итак, первое на чем мы остановим свое внимание – это определение и работа с функциями, с использованием подхода при котором они являются обычными объектами JavaScript. Но для того, чтобы к этому подойти, давайте сначала посмотрим, как создаются

Объекты в JavaScript

var card = new Object();

Весьма просто, но совсем неинтересно, поскольку наш объект не содержит никакой информации. Давайте исправим это:

var card = new Object();
card.firstname = 'Ivan';
card.lastname = 'Ivanov';
card.year = '1974';
card.employed = new Date(2004,1,12);

Это уже что-то полезное – создав новый экземпляр объекта, мы присвоили его переменной card и наполнили свойствами различных типов: строка, число, и дата.

Что же получается? Получается, что объект JavaScript – это набор свойств, каждое из которых состоит из имени и значения. При этом в качестве имени может выступать только строка, а вот значением (и это важный момент!!!) может быть и строка, и число, и массив, и конечно функция…

Вывод: основная цель экземпляра объекта – служить контейнером для именованных наборов других объектов.

Давайте немного усложним наш код, который мы используем в качестве примера:

var card = new Object();
card.firstname = 'Ivan';
card.lastname = 'Ivanov';
card.year = '1974';
card.employed = new Date(2004,1,12);
var phone = new Object();
phone.home = '(495)353-5353';
phone.mobile = '(903)261-1777';
card.phone = phone;

мы создали еще один объект, который содержит номера телефонов и сделали этот объект значением свойства нашего первого объекта.

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

var card = {
  firstname : 'Ivan',
  lastname  : 'Ivanov',
  year      : '1974',
  employed  : new Date(2004,1,12),
  phone     : {
    home   : '(495)353-5353',
    mobile : '(903)261-1777'
  }
};

Вот собственно такая форма записи и называется JSON – посмотрите, насколько проста и понятна структура:

- объект – пара фигурных скобок
- свойства перечислены внутри скобок, через запятую
- каждое свойство – это пара состоящая из имени и значения, разделенных двоеточием.

Давайте теперь отметим для себя еще один очень важный момент, воспользовавшись следующим простым примером:

var someVar = 'В лесу родилась елочка!';

Простейшая инструкция, в которой переменной присваивается экземпляр объекта String. Если мы попробуем выполнить:

alert(someVar);

увидим то, что и ожидали – сенсационное сообщение о том, что в лесу родилась елочка. Как Вы думаете, что мы увидим после выполнения следующего кода?

alert(window.someVar);

Можете попробовать, но сразу скажу, что в результате получится абсолютно тоже самое сообщение! Поскольку инструкции эквивалентны, то какой же вывод из этого можно сделать?

Правильно! Когда ключевое слово var используется за пределами какой-либо функции, на глобальном уровне, оно является всего лишь ссылкой на свойство объекта window.

Ну вот, с объектами мы более-менее разобрались. Но давайте кратко сформулируем то, о чем мы говорили. Итак:

- объект в JavaScript – это неупорядоченный набор свойств;
- свойство состоит из имени и значения;
- объекты можно объявлять с помощью литералов;
- глобальные переменные – есть свойства объекта window;

Функция как объект JavaScript

Вот теперь мы готовы к тому, чтобы вернуться к тому утверждению, что функции в JavaScript можно рассматривать как обычные объекты. Почему же в JavaScript функцию можно считать обычным объектом? Давайте возьмем для сравнения объекты других типов, например String или Number.

Если объекты String или Number определяются соответствующими конструкторами, то функции также определяются конструктором, в данном случае конструктором Function. Точно также, как и другие объекты функции могут:

- присваиваться переменным и свойствам объектов
- передаваться в виде параметров
- возвращаться как результат других функций
- создаваться с использованием литералов

Но есть на первый взгляд одно очень существенное отличие от тех же упомянутых объектов String или Number – у функции есть имя! Но это только на первый взгляд.

Посмотрим простенький пример:

function hello() {
  alert('Hello, world!');
}

такая запись очень часто используется для создания глобальных функций, но это совершенно не означает, что мы только что создали функцию с именем hello. Вспомните наши примеры с ключевым словом var. Тут практически тоже самое, только в примере с функцией ключевое слово function автоматически создает экземпляр объекта и присваивает его свойству объекта window. А имя этого свойства совпадает с именем нашей функции. Т.е. мы могли бы написать так:

hello = function () {
  alert('Hello, world!');
}

или даже так:

window.hello = function () {
  alert('Hello, world!');
}

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

Функции обратного вызова

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

function hello() {
  alert('Hello, word!');
}
setTimeout(hello,5000);

Объявляем функцию с именем hello и устанавливаем таймер на 5 секунд. Смотрите, передача функции в качестве параметра ничем не отличается от передачи любого другого значения – в первом параметре мы передали функцию, а во втором – число. Когда время таймера истечет, будет вызвана функция hello. Поскольку метод setTimeout() делает вызов функции в нашем собственном программном коде – эту функцию называют функцией обратного вызова.

Однако есть более изящный способ записи этого кода:

setTimeout(function(){ alert('Hello, word!'); },5000);

если функцию не требуется вызывать где-то в другом месте страницы, нет никакой необходимости создавать свойство hello в объекте window. Такой подход будет очень часто встречаться в программном коде jQuery.

Реализация this в JavaScript

В объектно-ориентированных языках основанных на классах, указатель this, как правило, ссылается на экземпляр класса, в пределах которого был объявлен метод. Реализация this в JavaScript отличается едва различимым, но очень существенным образом. В JavaScript, где функции являются обычными объектами (мы говорили об этом выше), они не объявляются как часть чего-либо. Объект, на который ссылается this, называется контекстом функции и определяется не тем, как функция объявляется, а тем как она вызывается. Это значит, что функция может иметь различный контекст в зависимости от того, как она была вызвана.

Давайте вернемся к примеру и немного дополним его:

var card = {
  firstname : 'Ivan',
  lastname  : 'Ivanov',
  year      : '1974',
  employed  : new Date(2004,1,12),
  phone     : {
    home    : '(495)353-5353',
    mobile  : '(903)261-1777'
  },
  showData   : function() {
    return this.lastname+'
            '+this.firstname+'
            '+this.phone.mobile;
  }
};

К первоначальному коду мы добавили свойство с именем showData, которое ссылается на экземпляр Function. Если теперь вызвать функцию через свойство:

alert(card.showData());

то в качестве контекста функции будет установлен экземпляр объекта на который указывает card. В результате мы увидим следующее:

Ivanov Ivan (903)261-1777

Ну это все вполне естественно, гораздо более интересен следующий пример. JavaScript позволяет четко установить, что будет использоваться в качестве контекста функции. Вызывая функцию с помощью методов call() или apply() экземпляра Function, мы можем передать в качестве контекста все, что угодно.

var obj1 = { myProperty: 'object 1' };
var obj2 = { myProperty: 'object 2' };
var obj3 = { myProperty: 'object 3' };
window.myProperty = 'object window';

function showProperty() {
  return this.myProperty;
}

obj1.identifyMe = showProperty;

alert(showProperty());
alert(obj1.identifyMe());
alert(showProperty.call(obj2));
alert(showProperty.apply(obj3));

Определили три простых объекта, у каждого из которых есть свойство myProperty. Добавили свойство myProperty в экземпляр объекта window. Определили глобальную функцию, которая возвращает значение свойства myProperty для любого объекта, используемого в качестве контекста этой функции. И еще присвоили эту же самую функцию свойству с именем identifyMe объекта obj1.

Дальше самое интересное – четыре раза мы вызываем один и тот же экземпляр функции другим способом и посмотрите, что получается:
- в первом случае вызываем функцию как глобальную и контекстом функции является экземпляр объекта window о чем свидетельствует текст в окне предупреждения – «object window«.
- во втором случае вызываем функцию как свойство объекта obj1 и контекстом функции становится этот объект. Текст в окне предупреждения – «object 1«.
- в третьем случае используем метод call() объекта Function и контекстом функции становится объект, переданный методу call() в качестве первого параметра. Текст в окне предупреждения – «object 2«.
- наконец в четвертом случае используем метод apply(), передавая ему в качестве первого аргумента obj3, и получаем текст в окне предупреждения – «object 3«.

Пример можно открыть в отдельном окне.

Вывод такой: функция fn действует как метод объекта ob, когда объект ob выступает в качестве контекста при вызове функции fn.

Что такое замыкание?

Замыкание (closure) – это экземпляр Function вместе с локальными переменными из его окружения, необходимыми для выполнения.

Функция при объявлении может ссылаться на любые переменные, находящиеся в области ее видимости на момент объявления. Эти переменные будут достижимы для функции даже после того, как текущее положение в объявлении выйдет из области видимости, замыкая объявление.

Лучше всего пояснить это на простом примере (здесь уже используем библиотеку jQuery):

$(function(){
  var local = 1;
  window.setInterval(function(){
    $('#result').append(new Date()+
                ' значение local = '+local+'   ');
    local++;
  },5000);
});

После загрузки DOM объявляем переменную local и присваиваем ей числовое значение 1. С помощью метода setInterval() взводим таймер, который будет срабатывать каждые 5 секунд. В качестве функции обратного вызова для таймера, определяем функцию, которая каждые пять секунд будет добавлять текущее время и значение переменной local. Кроме того, при каждом срабатывании таймера значение переменной local должно увеличиваться на единицу.

Пример можно открыть в отдельном окне.

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

Тем не менее этот код прекрасно работает, благодаря замыканию, созданному при объявлении функции и включающему в себя переменную local. Замыкание остается в области видимости функции на протяжении всего жизненного цикла.

При работе с jQuery (особенно при использовании возможностей ajax) Вы будете довольно часто сталкиваться с замыканиями. Поэтому необходимо обратить внимание на еще одну важную особенность замыканий – контекст функции никогда не является частью замыкания. Опять же на примере будет гораздо понятнее.

Посмотрите такой код:

this.id = 'someID';
$('*').each(function(){
  alert(this.id);
});

Мы могли бы ожидать, что в окне предупреждения для каждого элемента будет раз за разом отображаться значение someID, однако это совсем не так. Мы увидим окно предупреждений столько раз, сколько элементов будет отобрано в объект jQuery и каждый раз будет отображаться значение атрибута id следующего элемента (или пустое окно предупреждения, если такого атрибута нет). Это происходит потому, что у каждого вызова функции собственный контекст, и в данном случае контекстом является элемент из объекта jQuery.

Давайте немного исправим пример:

this.id = 'someID';
var someVar = this;
$('*').each(function(){
  alert(someVar.id);
});

Переменная someVar становится частью замыкания и будет доступна внутри функции обратного вызова. Такой код будет раз за разом выдавать в окне предупреждения одно и тоже значение – someID.

Ну, вот вроде бы и все. Осталось сказать, что если твердо усвоить все эти понятия, то создавать эффектные и эффективные сценарии на JavaScript с использованием jQuery будет гораздо проще…

Итак, элемент Canvas предназначен для создания bitmap изображения при помощи JavaScript, т.е. мы получаем возможность создавать графические формы, рисовать линии, вращать изображения.

Такие возможности подстегнули производителей браузеров к включению API canvas в последние версии своих продуктов – FireFox, Opera, Chrome, Safari поддерживают тэг canvas. Как всегда неприятным исключением оказался горячо нелюбимый всеми Internet Explorer – не то что в 6 и 7 версиях, даже в 8 версии поддержка тэга canvas не планируется.

Однако не все так безнадежно как могло бы показаться – на помощь пришла компания Google, реализовав для IE полноценный API Canvas. По сути это небольшой js-файл, подключая который для браузеров IE можно заставить их «понимать» тэг canvas. Найти этот файл можно тут:
http://code.google.com/p/explorercanvas/

Но вернемся к нашему примеру. Для того, чтобы изобразить такие часики на своей страничке понадобится подключить в разделе HEAD файл excanvas.js – это для ого, чтобы заставить браузеры IE понимать canvas:

<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
< ![endif]-->

В body добавим следующую разметку:

<canvas id="canvas" height="150" width="150"></canvas>

И самое главное – JS-код, который и рисует сами часики:

// ожидаем загрузку
window.onload = function(){
  // рисуем часы
  clock();
  // через каждую секунду
  // часы перерисовываются
  setInterval(clock, 1000);
}
//
function clock() {
  // получаем текущие дату и время
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr = now.getHours();

  // получаем контекст canvas
  var ctx = document
  .getElementById("canvas")
  .getContext("2d");

  // сохраняем состояние
  ctx.save();
  // инициализируем холст
  ctx.clearRect(0,0,150,150);
  // рисуя в точке 0,0 фактически
  // рисуем в точке 75,75
  ctx.translate(75,75);
  // при рисовании линии в 100px
  // фактически рисуем линию в 40px
  ctx.scale(0.4,0.4);
  // начинаем вращать с 12:00
  ctx.rotate(-Math.PI/2);

  // инициализируем свойства рисунка
  // контуры рисуем черным
  ctx.strokeStyle = "black";
  // заливка тоже черная
  ctx.fillStyle = "black";
  // ширина линии 8px
  ctx.lineWidth = 8;
  // будем рисовать по кругу
  ctx.lineCap = "round";

  // начинаем рисовать часовые метки
  // сохраняем предыдущее состояние
  ctx.save();
  ctx.beginPath();
  // для каждого часа
  for(var i = 0; i < 12; i++) {
  	// поворачиваем на 1/12
    ctx.rotate(Math.PI/6);
    // перемещаем курсор
    ctx.moveTo(100,0);
    // рисуем черточку 20px
    ctx.lineTo(120,0);
  }
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // ставим ширину линии 5px
  ctx.lineWidth = 5;
  ctx.beginPath();
  // рисуем минутные метки
  // для каждой минуты
  for(var i = 0; i < 60; i++) {
  	// кроме тех, что совпадут
  	// с часами
    if(i%5 != 0) {
      // перемещаем курсор
      ctx.moveTo(117,0);
      // рисуем черточку 3px
      ctx.lineTo(120,0);
    }
    // вращаем холст на 1/60
    ctx.rotate(Math.PI/30);
  }
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать часовую стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/6)*hr +
             (Math.PI/360)*min +
             (Math.PI/21600)*sec);
  // устанавливаем ширину линии 14px
  ctx.lineWidth = 14;

  ctx.beginPath();
  // сдвигаем курсор несколько назад
  // стобы было похоже на стрелку
  ctx.moveTo(-20,0);
  // рисуем линию почти до часовых меток
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать минутную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/30)*min +
             (Math.PI/1800)*sec);
  // ширина линии 10px
  ctx.lineWidth = 10;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(-28,0);
  // рисуем линию
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать секундную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate(sec * Math.PI/30);
  // контур и заливка красного цвета
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  // ширина линии 6px
  ctx.lineWidth = 6;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(-30,0);
  // рисуем линию
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // рисуем внешнюю окружность
  // шириной 14px
  ctx.lineWidth = 14;
  // синим цветом
  ctx.strokeStyle = "#325FA2";
  ctx.beginPath();
  // рисуем окружность, отступающую
  // от центра на 142px
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();
  ctx.restore();

  ctx.restore();
}

Вы можете скачать файлы этого примера. Можно открыть пример в новом окне и посмотреть исходный код.

В заключение я приведу несколько очень полезных ссылок, для тех, кто заинтересовался.
Canvas Tutorial – туториал (на английском конечно), но там Вы найдете еще впечатляющие примеры.
The canvas element – подраздел спецификации HTML5, касающийся элемента canvas (и тоже ес-но на английском).