Новости с фронтов

Видели последний тест на JavaScript от Дмитрия Сошникова? Вот он, подивитесь :) Это взрыв мозга, в целом сложный и в некоторых местах чересчур хитрый! Автору респект. (Даже хочется привести цитату одного комментария).

Между тем, давно не ощущал себя студентом: постоянные недосыпы, в голове крутится только одно — как бы это лучше сделать... Это я про конкурс, на который себя же и подбил. Пока до конца не готово, но текущими результатами я доволен. Конкуренцию должен составить! Может даже выложу в опен-сорс. Ждите понедельника (1 марта) — там объявят результаты.

Заработай своим умом

И не просто заработай, а покажи свои навыки и находчивость, стань лучше сотни других! И получи приз как признание своей ценности :).

Никто не собирается поучаствовать в конкурсе на лучшую разработку? На этой неделе по языку js было объявлено два таких "соревнования":

• The Code-to-win Challenge от Opera — необходимо отличиться в создании оригинального либо всенародно любимого виджета под новый движок браузера. На кону MacBook Pro и HTC HD2. Подробности читайте в офф. пресс-релизе.
• Конкурс на JS от ВКонтакте. Почему бы и нет? Требуется реализовать оконную библиотеку. Подробности читайте в этой теме.

Вы как хотите, а я рискну! Там и там. Это неоценимый опыт, проверка своих сил может не в экстремальных, но вполне в приближенных к ним условиях, плюс — прекрасная возможность отличиться.

Кто со мной?

P.S. Это мотивационный пост. Не хочу пасовать перед реальной возможностью ;)

Еще одна викторина, но уже с ответами от меня

Люблю ломать мозг, и на этот раз не буду отправлять по ссылкам, или отвечать комментарием на чужой пост. Напишу свои размышления, и спрошу ваших комментариев :)

Тест предложен блоггером Nicholas C. Zakas (оригинал). Отвечать буду аргументированно, с подглядыванием в консоль (все-таки до гуру расти и расти :) ).

Example #1

var num1 = 5,
    num2 = 10,
    result = num1+++num2;

Questions:
What is the value of result?
What is the value of num1?
What is the value of num2?

Судя по множеству плюсов надо решить, используется ли здесь инфиксный (++num2) либо постфиксный (num1++) инкремент. А зависит это от порядка выполнения операций в выражении (точнее, от их приоритета). От этого сильно зависит значение всех трех переменных. Во многих языках инкремент (как и декремент) имеет высший приоритет, нежели сложение (вычитание). Проверка этого обстоятельства в js подтверждает мои предположения.

Ответ: num1==6, num2==10, result==15

Example #2

var x = 5,
o = {
  x: 10,
  doIt: function doIt(){
    var x = 20;
    setTimeout(function(){
      alert(this.x);
    }, 10);
  }
};
o.doIt();

Questions:
What value is displayed in the alert?

Здесь, как по мне, все просто (постоянно с таким сталкиваюсь). Функция, вызываемая по таймауту, выполняется в контексте объекта window. Поэтому this.x равнозначно window.x == x == 5.

Ответ: 5

Example #3

var num1 = "10",
  num2 = "9";

Questions:

What is the value of num1 < num2?
What is the value of +num1 < num2?
What is the value of num1 + num2?
What is the value of +num1 + num2?

С подобной проблемой я тоже сталкивался, когда оказалось, что "10" < "9" // true!. А дело тут в сравнении строк, а не сравнении чисел. Если оба операнда — строки, то сравнение основывается на стандартном лексикографическом порядке юникодных значений. Если же один из операндов число, то второй операнд (строка) приводится к числу. Поэтому +"10" < "9" // false!. (Оператор "плюс" приводит строку "10" к соответствующему числу.)

Оператор "+" с операндом строка выполняет конкатенацию как с числом, так и с другой строкой. Поэтому num1 + num2 == "10" + "9" == +num1 + num2 == 10 + "9" == "109"

Example #4

var message = "Hello world!";

Questions:

What is the value of message.substring(1, 4)?
What is the value of message.substr(1,4)?

Стоит различать функции substring, принимающей в качестве параметров индексы начала и конца, и substr, принимающей в качестве параметров индекс начала и длину выделяемой строки. Также интересно, что message.substr(-1) == "!"

Ответ: "ell", "ello".

Example #5

var o = {
     x: 8,

     valueOf: function(){
       return this.x + 2;
     },
     toString: function(){
       return this.x.toString();
     }
  },
  result = o < "9";

alert(o);

Questions:

What is the value result?
What is the value displayed in the alert?

Вся соль в особенностях вызова функций valueOf и toString. Где требуется числовое значение, вызывается первая функция, где строковое - вторая. При сравнении (больше/меньше) вызывается сначала valueOf, а затем toString, если первая не определена. Функция alert требует строку в качестве входного параметра.

Ответ: result == false, "8".

В заключение хочу сказать, что тест оказался простым, но поучительным. А вам как?

Неполадки с фидом

Обнаружил проблемы с каналом RSS, которые благополучно разрешил. Советую переподписаться на фид —  http://feeds2.feedburner.com/codeblogz. Если вы заподозрили неладное, дайте знать.

Начинающим изучать Javascript

Продолжаю публиковать полезные и интересные находки, связанные с js. На этот раз — цифровая книга на английском, которая в доступной манере объясняет основы языка. По полной используются возможности интерактивного обучения: все примеры можно запустить в "консоли" самой книги и наглядно убедится в работе кода. Также есть задания для самостоятельного закрепления материала (с ответами, конечно). Толщину книги оценить трудно, но каждый раздел достаточно подробно расписан. Предназначен новичкам, но и другие могут найти для себя что-нибудь полезное.

Ссылка на книгу: Eloquent JavaScript (для печати | в архиве).

Успехов в изучении!

Статьи про Function (declaration | expression)

В свете предыдущего топика и, в некотором роде, забавных ответов на одну викторину в статье JavaScript викторина от perfectionkills.com, хочу посоветовать следующее чтиво по одной из самых запутанных тем в js:

• Functions and function scope на сайте Mozilla Developer Center
• Named function expressions demystified

 Предупреждаю, статьи на английском, однако, все доходчиво расписано, с кучей примеров.

Тесты на знание Javascript

По вебу прокатилось несколько интересных статей на знание тонкостей Javascript:

• Вопросы So, you think you know JavaScript? от Дмитрия Барановского и 
• ответы Answering Baranovskiy’s JavaScript quiz от  Nicholas C. Zakas
• 14 вопросов Javascript quiz (хитрый тест, я ответил правильно наполовину)
• и другие... 

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

function a() {
}
function b() {
  var a=b=1;
  alert(a); // число
  alert(b); // число
}
function c() {
  b();
  alert(a); // функция
  alert(b); // число??
}
c();

Что выведет этот скрипт и почему? Ответы принимаются в каментах. В свою очередь скажу, что этот код принес мне уйму неприятностей, и определить место проблемы было сродни квесту.

Обновлено. Чуть изменил код примера.