На удивление решения задачи оказались очень разные. Многие писали обработчики событий обычным способом, но некоторые всё-таки рекомендуемым AddEventListener/AttachEvent. Поразило разнообразие способов проверки на пробелы и наличие классов.

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

Said

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

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

Нехороший повтор AddEventListener/AttachEvent. Можно было объединить.

Неправильное изменение элемента. Класс должен добавляться, а не заменяться.

Не могу понять эту конструкцию.

if (typeof(e.target) == 'text') e.target.className = 'edit';

Разве typeof(e.target) должен возвращать text? По-моему он возвращает object. Соответственно эта часть не работает в Firefox. Видимо автор скрипта хотел проверить тип элемента формы. Правильно было бы написать так:

if (typeof(e.target) != 'undefined' && e.target.type == 'text') e.target.className += ' edit';

Правильно, добавил проверку существования свойства объекта inputData, на тот случай если в форму добавили поле ввода, а свойство в inputData не добавили.

if (!!inputData[el.name] || inputData[el.name] == '') inputData[el.name] = el.value;

Только для чего написаны два восклицательных знака? Ведь в конструкции if такие вещи в любом случае конвертируются в Boolean.

SergiusD

Хорошая работа с массивами.

Есть проверка существования класса error.

Извращение:

arr[ind] = null;

Для таких вещей есть функция splice.

Неоправданное решение относительно поиска в className, путём создания прототипа indexOf. Даже если использовать этот вариант, то лучше было бы разбивать строку в массив уже в indexOf. А возвращать и проверять в этом случае правильнее не -1 и ещё какое-то число, а true и false.

Андрей

Сделано не совсем универсально. При убирании фокуса возвращается первоначальный класс как первый. А если их там несколько?

Примитивный и неоптимизированный вывод данных в showAll. Гораздо лучше можно было бы сделать и не использовать лишние переменные.

Такие вещи нужно объединять в единое регулярное выражение:

.replace(/^\s/, '')
.replace(/\s$/, '')

Николай

Хороший вариант обращения к объектам по id или напрямую. Любят такие вещи во фреймворках.

var $ = function(id) {
    return typeof id == 'string' ? document.getElementById(id) : id;
};

Смысла особого нет в том, чтобы обращаться к объекту не на прямую, а через $, но ради единообразия…

Изящный вариант проверки существования класса:

return !!el.className.match(new RegExp('(^|\\s)' + className + '(\\s|$)'));

Мусор в цикле:

l = inputs.length; i < l

Это зачем?

})(inputs[i]);

Игорь Источник

Параноидально концептуальный подход. Годен для больших проектов. В пору писать свой фреймворк.

Хорошая прописка прототипов, особенно ifEmpty.

В конце вывода лишний перенос строки.

Если удалить текст, то поле становится красным. Если дать ему фокус, то класс будет: read error edit.

element.className = element.className + " "  + className;

для таких вещей есть оператор «+=»:

element.className += " "  + className;

Тяжеловатый для восприятия стиль.

FX Poster

Да, с классами лучше всего работать как с масивом, а не как со строкой. Правильно.

С пробелами так работать нельзя:

this.value = this.value.replace(/^ +| +$/g, '').replace(/ +/g, ' ');

Нужно искать пробельный символ а не пробел.

Зачем столько строгих проверок (===, !==)?

В конце вывода будет лишний перенос строки.

Артём Глувчинский

Тоже хороший вариант проверки существования класса

if (this.className.indexOf(errorClass) >= 0)

В задании сказано «очистить содержимое поля от лишних пробелов». Значение поля очистил, но не заменил содержимое на очищенное значение.

В функции getResults после вывода сообщения об ошибке можно просто написать return а не return false?

Артём Макаров

Не убирается последний пробел в поле ввода.

В регулярном выражении указан пробел, а не пробельный символ.

Некрасивая обработка классов удалением слов и пробелов.

Хитро:

response += (response.length ? "\n" : '') + v + " = " + inputData[v];

но запись в массив и объединение с помощью метода join() — умнее.

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

Dmytro-Shteflyuk

Чем больше щёлкаешь по полю, стираешь и вписываешь текст в поле, тем больше пробелов у поля ввода между read и edit.

Чем такой вариант:

results.push(name);
results.push('=');
results.push(inputData[name]);
results.push("\n");

лучше чем

results.push(name + '=' + inputData[name] + '\n');

?
Преимуществ не вижу. Опять же в конце будет лишний перенос строки.

Алик Кириллович

Победитель, который не только правильно выполнил задание, но также исследовал поимку событий в случае динамического добавления полей, а так же переноса введённых данных из одного поля в другое (drag&drop). Гостевой пост от победителя, в котором раскроются все секреты исследования ожидается в ближайшее время.

И последнее

Господа программисты, я задолбался конвертировать эти каракули:

Ýòà ôóíêöèÿ óñòàíàâëèâàåò îáðàáîò÷èê fncAction ñîáûòèÿ txtType äëÿ óçëà, óäîâëåòâîðÿþùåãî óñëîâèþ fncCondition.

Выучите наизусть, раз и на всегда!

UTF-8

Я очень рад, что мои читатели откликнулись на предложение и приняли участие в конкурсе, но я никак не думал, что их будет так много! Проверять одному достаточно сложно, поскольку со временем глаз замыливается и можно пропустить очевидные ошибки, а в других работах они могут броситься в глаза. Нужно было бы собрать целую комиссию для объективной оценки работ. Поэтому прошу быть снисходительными к результатам конкурса. Думаю, что мои замечания для вас будут только полезными и не вызовут агрессивного настроя: «Ууу, докопался!»

Спасибо всем за участие!

Все работы в одном архиве

В качестве конкурсной задачи предлагаю выполнить зачётное задание по javascript, которое выполняли в этом году студенты web-курсов на которых я преподаю.

Итак, задание:

Дана форма. Нужно:

1. При щелчке по лейблу и при помещении фокуса в поле нужно полю добавить класс «edit».
2. При убирании фокуса из поля нужно:
   1. очистить содержимое поля от лишних пробелов слева и справа и от дублированных пробелов;
   2. записать содержимое поля в одноимённое свойство объекта inputData;
   3. проверить:
      1. если содержимое поля пустое, то нужно убрать класс «edit» и добавить класс «error»,
      2. иначе — вернуть первоначальный класс.
3. При щелчке по кнопке «Show All» проверить, нет ли пустых свойств у объекта inputData.
   1. Если есть — открыть окно «alert» с сообщением: «Please fill all fields!»,
   2. иначе — записать содержимое объекта inputData в переменную и вывести в окно «alert» в таком виде:
      firstname = Vasily
      lastname = Pupkoff.

Задание достаточно простое. Проблем, думаю не будет, однако нужно соблюсти следующие условия:

1. Кроссбраузерность.
2. Универсальность — должно быть применимо ко всем текстовым полям ввода (type=”text”). Даже если я захочу добавить ещё несколько полей и соответствующие свойства объекта inputData, скрипт должен работать и для них.
3. Не использовать фреймворки и библиотеки javascript.
4. Код должен быть только в файле script.js, ни html, ни css редактировать нельзя.

Конкурс закончился. Работы проверяются.

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

А вот логотипы ещё не существующих компаний, но зарание получивших узнаваемость от известных брендов.

Кто закажет у меня логотип?

Руководствуясь этим скринкастом можно легко научиться рисовать трехмерные объекты с простой линейной двухточечной перспективой в пакетах двухмерной графики.

Долго искал бесплатный софт для редактирования сего произведения, в итоге использовал Windows Movie Maker. Да-да именно его. Потому что он отвечал всем моим требованиям:

• бесплатность,
• нарезка материала,
• музыка,
• заголовки,
• субтитры по ходу фильма,
• поддержка русского языка.

Результаты конкурса «Чья Магда круче?»

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

Победитель

1. Простота

Чем проще одежда, тем лучше. Мода 2.0 означает сосредоточение на чистоте и простоте. Но это не значит что нужно ходить в купальнике или с фиговым листочком. Это уже параноидальный минимализм.Одежда должна отличаться простотой, но иметь определённый смысл, и особенности стиля должны подчёркивать ваши желания и цели.

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

Почему простота -это хорошо

• Внешний вид показывает вас, а не вашу одежду. У каждого элемента одежды есть определённое предназначение.
• Внимание окружающих – главная награда.
• Работа дизайнера обратить внимание окружающих на то, что их интересует или дать понять, что своим внешним видом вы хотите выразить.
• Акцентируйте внимание “фенечками” и логотипами на тех местах, на которых вы хотите чувствовать взгляд или передать информацию о себе, своих эмоциях и настроении.
• Вы должны через одежду максимально свободно наладить контакт отбросив лишние мешающее элементы. Нужно найти правильное сочетание элементов, наиболее простое и экономичное.

Как сделать одежду простой?

Существуют два важных аспекта, для достижения простоты:

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

В процессе разработки дизайна, придерживайтесь правила не допустить в дизайне одежды ненужные визуальные элементы.

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

Вот пример одежды, не создающей должной простоты.

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

Рассматривать одежду можно часами, каждую деталь, переходы цветов, формы, линии… слишком много всего. Все эти лишние детали не несут в себе никакой смысловой информации и не сподвигают людей на общение с ними. Ими можно только любоваться. причём только костюмами, а не самим человеком.

Нет, я не против богатой и красивой одежды.

Простота означает: Используйте столько деталей сколько вам нужно.

Конкурс

Итак, суть конкурса такова: желающие поучаствовать берут одну или несколько глав статьи, переводят и адаптируют под оффлайновую моду. Автор самой оригинальной, самой креативной, самой остроумной реализации задания в качестве приза получит бесплатный дизайн для своего блога. Но только графическую часть, вёрстку делаете сами или заказываете отдельно.

Участники считаются по обратным ссылкам на этот конкурс. Голосование за статьи будет публичным, но я оставлю за собой право контролировать ход голосования. В случае если победитель не достигнет 10% отрыва от остальных конкурсантов, имею право внести свои n% за одного из участников.

В итоге, соберём все посты, отфильтруем, отредактируем и выложим каждый на своём блоге полную статью о том, как одеться в стиле «Web 2.0».

Срок подачи заявок до 31 декабря.

Цель

Сделать каптчу нормальной, без искажений текста и без неоднозначностей. Ну и заодно повеселить народ.

Привожу только примеры каптчи, без поля ввода (смысл?). Кроме всего прочего, это не только каптча в стандартном её понимании, но и тест на блондинистость.

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

Вопрос насчёт флага некоректный. Могут написать “латвийский”. Правильней вопрос будет звучать “Напишите страну которой принадлежит это флаг”.

Вопросы в правой колонке можно сопровождать ссылками на Википедию.

Есть ещё идеи?

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

Вот думаю может предложить это реализовать JS-Kit?

Действующие лица:

• Преподаватель (П.)
• Блондинка (Б.)

Диалог

П.: Сейчас я тебе объясню принцип объектно-ориентированного программирования
Б.: Ну даю… ой… хи-хи, то есть дааавате, объясняйте.
П.: Ну так вот. Представь себе, что ты пошла в какой-нибудь магазин…
Б.: Ещё б скааазали “гастраааном”. (скривила лицо) Я в бутики толька хааажу.
П.: Ну хорошо, зашла ты в бутик. И увидела там шубу.
Б.: норкаваю!
П.: Да, норковую! И захотела купить. Шуба – это объект, который ты хочешь купить. А вообще Шубы – это класс объектов. В этом классе могут быть различного вида шубы от искуственного меха до соболя. В коде это можно написать:

class Shubi {
public $tip;
}


, где public означает, что кто угодно может узнать какой тип шубы ты купила.
Б.: Кто угодна? И даже Танька Синявская?
П.: Ну если Танька Синявская приедет и увидит твою шубу, то да.
Значит ты хочешь купить объект, т.е. шубу, которая принадлежит классу “Шубы”. Чтобы это было так, нужно написать:

var $shuba1 = new Shubi();


• var – это типа “ХАЧУ”;
• new – это типа “купить новую”

Б.: А пачиму shuba1?
П.: Ну а ты разве одну шубу только купишь?
Б.: А, ну дааа… (делает вид, что понимает) А, что, я так вот сразу куплю шубу без примерки?
П.: Конечно нет. Всё верно. У шубы есть свойства, например, размер. Добавим в класс Shubi это свойство, а потом укажем, какой размер у этой шубы. В итоге код у нас получается такой:

class Shubi{
public $tip;
public $razmer;
}
$shuba1 = new Shubi;
$shuba1->tip = "norka";
$shuba1->razmer = 53;


Б.: Я что толстая тааакая? У меня Соракдивяяятый рааазмер!
П.: Ну хорошо, хорошо. Размер 49. Дальше: Купив шубу, задали её размер. А размер – это свойство объекта. И для расчётов можем его получить написав:

$razmer_shubi = $shuba1->razmer;


т.е. если мы хотим узнать, чему равно какое-нибудь свойство, то нам нужно написать имя объекта, добавить такую стрелочку “->” и написать свойство объекта.
Б.: Ну паняла, не дура я. (надулась)
П.: Замечательно! Ну, а после того как ты купила шубу, что ты сделаешь?
Б.: Нааадену и паеду пааадружкам хвастать.
П.: Ага, значит оденешь. Значит совершишь действие. Значит это мы напишем так:

$shuba1->odetj();


Что означает, что ты одела шубу. Это называется метод и записывается этот метод в классе в виде функции:

class Shubi{
public $tip;
public $razmer;
function odetj(){
return true;
}
}


Б.: А зааачем odetj со скобочкамиии?
П.: А в скобочки записываются параметры действия. Вдруг ты захочешь одеть её задом на перёд.
Б.: Я что, дура что лиии?
П.: Да.
Б.: Чтооо? (в глазах ярость, рука воинственно поднялась, сверкнув ногтями)
П.: Ой, в смысле, да нет, конечно. Например, ты не захочешь застёгивать её совсем, а оставить пару пуговичек растёгнутыми.
Б.: Ааа, ну ладно. Ааа, как это записать?
П.: ну, например, так:

$shuba->odetj(2);


Б.: Что значит “напримееер”? Может быть подругомууу?
П.: Может. Это зависит от того как описать класс Shubi.
Б.: Бааалин, ещё это в Shubi записывать!
П.: Ну да, смотри:

class Shubi{
public $tip;
public $razmer;
function odetj($pugovici){
return $pugovici;
}
}


у всех шуб, есть каие-то определённые свойства: размер, цвет…
Б.: Цвет может быть разный.
П.: Конечно, но совсем никакого цвета не бывает. Хоть какой-то цвет будет. Значит свойство “цвет” будет у каждой шубы. Вот как узнать какой цвет у твоей шубы.
Б.: Пасмааатреть на неё.
П.: нет, я и мею в виду в коде.
Б.: Ааааа… ну, наверна, так:

$cvet_shubi = $shuba1->cvet;


П.: Умничка! (Блондинка сияет) Только предварительно нужно добавить это свойство в класс Shubi. Как?
Б.: Наверна, так:

class Shubi{
public $tip;
public $razmer;
public $cvet;
function odetj($pugovici){
$rasstegnutie_pugovici = $pugovici;
return $rasstegnutie_pugovici;
}
}


П.: Только прежде, чем получить цвет у шубы, нужно задать этот цвет. Это можно сделать либо в классе Shubi, тогда все создаваемые шубы будут одного цвета, хотя не проблема их перекрасить. Либо, ты можешь получить шубу без определённого цвета и сама назначить её любой цвет.
Б.: Ага, вот чтоб тааак в жизни было. Одела шубу и скааазала “хачу белую, нет, хачу чёрную”…
П.: Дааа… программировать и создавать, практически синонимы.
Ну и ещё объекты имеют методы, т. е. действия которые можно совершить с шубой. Теперь сними шубу.
Б.: Ага. Выключите свет.
П.: Что?
Б.: Ой, хи-хи… в смысле написааать?
П.: Ну конечно!
Б.: Снимаю (пошлый смешок):

class Shubi{
public $tip;
public $razmer;
public $cvet;
function odetj($pugovici){
$rasstegnutie_pugovici = $pugovici;
return $rasstegnutie_pugovici;
}
function snjatj(){
return true;
}
}



$shuba1->snjatj();

П.: Великолепно! Ну хватит с тебя на сегодня.
Б.: Пабииигу, по бутикам пока не закрыыылись!

Обсуждали тут операционные системы и Andrew Tch такое привёл описание Осей на примере ресторанчиков (с моей редакцией):
«Apple iMac – это красивый богатый ресторан в котором ты можешь заказать себе филе аллегатора фаршированое ушами слона, правда заплатить много придётся.
Linux - это сеть ресторанов разных размеров, с разными вывесками, в котором заказав, например, яичницу, тебе принесут, два яйца, пакет соли, кусок масла, сковородку и примус. Что получится – всё твоё.
Microsoft Windows – это, тупо, McDonald’s. Всё у них самое лучшее, большая маркетинговая компания, и куча бонусов, все там питаются, хотя знают что вредно.»

по-немецки: Виннихь Пухштайн
по-французски: Виньюа Пухьён
по-испански: Виннио Пухиас
по-итальянски: Винньето Пухини
по-литовски: Винниатас Пухиайтис
по-чешски: Винниаш Пухак
по-польски: Виннек Пуховский (Виннислав Пухецкий)
по-фински: Винно Пухиннен
по-шведски:Виннард Пухельд
по-арабски: Виннирахман аль-Пухад
по-армянски: Виннайр Пухенян
по-грузински: Винни Пухешвилли (Виннар Пухидзе)
на латыни: Винниус Пухус
по-корейски: Винь Пу
по-украински: Винниало Пухаренко
по-датски: Винс Пухинсен
по-японски: Виннидзо Пухинава
по-ирландски: Вин О’Пух

Ещё чё подскажете?

updated (Юлечка, Riga_child)