Впечатление от фильма «Чихуахуа из Беверли Хиллз».

На удивление решения задачи оказались очень разные. Многие писали обработчики событий обычным способом, но некоторые всё-таки рекомендуемым 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, который теперь в качестве приза может заказать у меня бесплатный логотип для своего блога. Прошу автора сего произведения связаться со мной через контактную форму.

Победитель

Магда

Я уже написал, что реклама Hedelix развешана на всех остановках по всей Риге. Каждый раз, как я её вижу, мне хочется нарисовать маркером шоутбокс с надписью «Выпей йаду!», и каждый раз меня сдерживает отсутствие маркера.

Для реализации задумки, без порчи имущества самоуправления Риги была найдена фотография этой рекламы на блоге badad.lv.

Справка: Badad.lv — это латвийский блог призваный стыдить бессмысленную, вредную и просто тупую рекламу.

Так вот, что характерно: В посте про эту рекламу автор делает акцент на то, что здесь присутствует попытка спекуляции ностальгией по «старым, добрым временам», когда всё было лучше, дешевле, экологичней, и т. д. Кроме этого, даму изображённую на фотографии сравнивают с Магдой Геббельс, женой министра пропоганды нацистской Германии Йозефа Геббельса, которая отравила шестерых своих детей и себя с мужем, когда Красная Армия вошла в Берлин.

Что-то нотка у меня больно грусная получилась. Перейдём-ка к участникам конкурса.

Конкурсанты

Sam

sAmSon

narkomanC

Жду ещё работы! Подключайтесь!

Оригинал здесь.

От Жеки получил «эстафетную палочку», которая по сути является примером вирусного маркетинга. Нужно написать 5 фактов о себе, не связанных с работой и онлайн-жизнью.

1. Я работал в McDonald’s

Со смехом вспоминаю те времена, когда мы с другом Стасом (даже ссылку не могу дать, давно не общались, не знаю как он, где он) у мойки махались лопатками для мяса, которые у нас были вроде мечей и с подносами вместо щитов. Когда таскали пирожки и нагетсы из тостеров и делали себе креативные тройные БигМаки пока менеджеры не видят; когда летом устраивали большие попойки во дворе, а потом вваливались в McD требуя мороженого у тех, кто за кассой стоял.

2. Я курил

Я покуривал ещё в школе. А много стал курить, работая в McD и потом учась в RTU. Курил много. Но бросить удалось легко, просто потому, что деньги кончились.

3. Я чуть не стал актёром

Да, у меня ещё и актёрский талант. Так, во всяком случае, говорили. Ещё когда в школе учился, ходил в театральную студию. Очень положительно вспоминаю те времена. Общался с интересными людьми, играл в спектаклях. В основном для своих, то было пару малюсеньких ролей во взрослых спектаклях в Рижском Молодёжном Театре (когда он ещё был). Ещё был вариант пойти на режиссёрский курс, где-нибудь в Москве. Но в итоге, я решил пойти в IT-сферу.

4. Я люблю чёрную икру

Ну понятно, скажете вы, кто ж её не любит. А вот когда я её впервые попробовал (в году так 1990), мне она жутко не понравилась. Я ещё тогда в больнице лежал и мне была просто необходима чёрная икра (что-то там уж очень полезное есть, что в меня пичкали). А я от неё отказывался. Ничего. Потом распробовал.

5. Я родом из Иркутска

Я сибиряк. Уехал в Ригу в 1985 году. Ну вернее, меня родители увезли. Обажаю Байкал и хочу ещё не раз туда приехать. Но жить хочу в Риге. Мне здесь нравится.

Следующие жертвы:

• Малевич, может напишет в картинках?
• От Миколки жду подробный рассказ
• Намбаван, не отмажешься!
• Сергей Третьяк, чего затих? Пиши, давай!
• DesignLife, я понимаю, что вся жизнь — дизайн, но что-то ещё ведь в ней есть?

Я решил внести свою лепту:

1. Простота

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Конкурс

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

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

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

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

Цель

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

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

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

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

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

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

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

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