Конкурс для javascript-гуру!
Объявляю конкурс среди javascript-программистов!
В качестве конкурсной задачи предлагаю выполнить зачётное задание по javascript, которое выполняли в этом году студенты web-курсов на которых я преподаю.
Итак, задание:
Дана форма. Нужно:
- При щелчке по лейблу и при помещении фокуса в поле нужно полю добавить класс «edit».
- При убирании фокуса из поля нужно:
- очистить содержимое поля от лишних пробелов слева и справа и от дублированных пробелов;
- записать содержимое поля в одноимённое свойство объекта inputData;
- проверить:
- если содержимое поля пустое, то нужно убрать класс «edit» и добавить класс «error»,
- иначе — вернуть первоначальный класс.
- При щелчке по кнопке «Show All» проверить, нет ли пустых свойств у объекта inputData.
- Если есть — открыть окно «alert» с сообщением: «Please fill all fields!»,
- иначе — записать содержимое объекта inputData в переменную и вывести в окно «alert» в таком виде:
firstname = Vasily
lastname = Pupkoff.
Задание достаточно простое. Проблем, думаю не будет, однако нужно соблюсти следующие условия:
- Кроссбраузерность.
- Универсальность — должно быть применимо ко всем текстовым полям ввода (type=”text”). Даже если я захочу добавить ещё несколько полей и соответствующие свойства объекта inputData, скрипт должен работать и для них.
- Не использовать фреймворки и библиотеки javascript.
- Код должен быть только в файле script.js, ни html, ни css редактировать нельзя.
]]>FX Poster]]>First Name:
Эта структура строго зафиксирована? Т.е. мне label’ы искать учитывая именно такую структуру?
»]]>Никита]]>А зачем тебе label-ы искать? Здесь лейблы искать не нужно. Подумай !
»]]>FX Poster]]>Ты тогда уточняй
> При щелчке по лейблу и при помещении фокуса в поле нужно полю добавить класс «edit».
onclick label’а и onfocus input’а – это разные вещи. тебе нужно на onfocus событие вешать? а то я сдуру повесил на onclick
»]]>FX Poster]]>Да, и куда решения отправлять?
»]]>FX Poster]]>Опять-же – мо-моему написанное немного не совпадает с тем, что ты хотел написать.
Вариантов два:
1. Выбирать со страницы все input[type="text"]
2. Если ты добавишь новые поля на страницу – ты добавишь их же и в массив inputData – и для “доставания” самих input’ов можно использовать только его.
По логике – ты, скорее всего, имел ввиду второй вариант… А вот по написанному – ИМХО, первый.
»]]>Алик Кириллович]]>Послал ссылку на решение через раздел “Контакты”.
Решение соответствует условию задачи и работает с динамически добавленными текстовыми полями.
Также было выполнено условие кроссбраузерности: проверял под IE6, IE7, IE8b, Firefox 2, Opera 9, Safari 3 Win.
»]]>Никита]]>FX Poster, я описал действие пользователя. Тебе решать на какое событие вешать.
Насчёт универсальности условие подправил.
Алик Кириллович, спасибо. Будем посмотреть.
»]]>Денис Радченко]]>Хороший конкурс, жалко что я знаю JS недостаточно, чтобы в нем участвовать.
»]]>Никита]]>Денис Радченко, ну а хотябы попробовать свои силы?
»]]>FX Poster]]>Денис Радченко
»А ты попробуй
]]>Денис Радченко]]>Попробую свои силы, но уже вне конкурса.
»]]>Андрей]]>Мне задача понравилась) Сейчас решение пришлю
»]]>Конкурс для javascript-гуру! » Блог FX’а]]>[...] организовал конкурс для JS-программистов. Задание довольно простое, у меня ушел примерно час на [...]
»]]>Дубровский]]>Если вешать на клик по лейблу (благо он связан с инпутом через for), это противоречит здравому смыслу, т.к. 1) есть завязка на лейблы, которые многие ленятся расставлять; 2) не будет работать, если ходить по полям табом. Так что я бы убрал из формулировки лейблы, чтоб не морочить людям голову (или так и надо?) – фокус не исключает клик по лейблу, но им не ограничивается.
Насчет пункта про универсальность – не совсем понял. “Добавить” – в смысле, дописать в html-файлик, или динамически?
Может поучаствую, если время будет
»]]>Никита]]>1. Ещё раз — я только описал действия пользователя. Вам решать на какие события вешать.
2. «Добавить» — в смысле, дописать в html-файлик
Буду рад, если поучаствуете.
»]]>Yuriy Drozdov]]>Жаль, что не в пятницу написал, так на выходных можно было заняться, в рабочие дни мало времени…
»]]>Никита]]>Yuriy Drozdov, время ещё есть до конца месяца.
»]]>atrey]]>я похожую штуку уже сделал.
»я делаю форму с классом strictform, в ней поля с классом strict.
и джаваскриптом на эту форму навешивается обработчик заполнения.
пробелы она, конечно, не проверяет, но можно проверить, например, правильность адреса почты.
]]>Evgeny Sergeev]]>| При щелчке по лейблу и при помещении фокуса в поле нужно полю добавить класс «edit»
…
| иначе — вернуть первоначальный класс поля.
Правильно ли я понял, что под добавлением класса подразумевается замена текущего класса на “edit”? Или Вы все же имели в виду добавление класса? Тогда не понятно, зачем возвращать первоначальный класс. Достаточно убрать edit.
»]]>Никита]]>Имелось в виду: иначе — убрать класс «edit».
»]]>Evgeny Sergeev]]>Еще вопрос – можно ли будет посмотреть варианты скприптов предложенных другими участниками ( или хотябы вариант победителя)?
»]]>Никита]]>Я разберу работы и прокомментирую каждую в отдельном посте.
»]]>Dmytro Shteflyuk]]>Хех, публичная порка — это хорошо
»]]>Игорь]]>Хех, посмотрим, смогу ли я помериться силами с твоими учениками
»]]>Evgeny Sergeev]]>Если разбор полетов будет, то я тоже приму участие.
»]]>Ви JavaScript-гуру? Тоді вам необхідний власний логотип! | The Taiji of Web Development]]>[...] блозі Нікіти Селецького нещодавно почався конкурс для програмістів на JavaScript. Суть задачі не складна та цілком практична [...]
»]]>[NSU]said]]>Сделал что смог и отослал. Поначалу думал, что кроссбраузерность и универсальность мне не по зубам (я очень мало пишу на js), но ничего – посидел и кое-что наваял
В общем попробовать стоило.
»