[JavaScript UI & DOM] Задачи за подготовка за изпит


41

Здравейте колеги,

Качил съм в системата задачи за подготовка за предстоящия изпит по "JavaScript UI & DOM 2014", който ще се проведе на 17 юни 2014 г. Може да ги свалите и от условие и допълнителни файлове. Задачите носят различен брой точки, тъй като в никакъв случай не са еднакви по сложност. Максималният резултат от изпита е 200т. (100т. + 60т. + 40т.)
Задачите са както следва:
Първа задача - създаване на уеб компонент с чист (vanilla) JavaScript - носи 100т.
  • Да се напише уеб контрола с чист JavaScript (на задачата за подготовка е календар)
  • Всички стилове се задават с JavaScript
    • Не са позволени CSS файлове или въобще писане на какъвто и да е CSS (освен този, който се генерира с node.style)
Втора задача - jQuery plugin - носи 60т.
  • Да се напише добавка (plugin) за jQuery (на задачата за подготовка е Tabs)
  • Дадените HTML и CSS файлове не се променят, променя се само JavaScript файла (scripts.js)
Трета задача - Шаблони с Handlebars.js - носи 40т.
  • Напишете шаблони на Handlebars.js, които да възпроизведат дадения в results.html HTML код
  • Дадените CSS и JavaScript файлове не се променят, както и HTML, освен в script таговете с type='text/x-handlebars-template'
И трите задачи ще ги решаваме на живо в четвъртък и петък и ще запишем видеа и решения.
 
Поздрави,
 
Дончо Минков



Отговори



24

Решение Task1

Решение Task2

Решение Task3

За първа задача до сега не бях писал толкова ужасен код на JS :D, на първа Дочно където е инклуднал файла в хтмл има грешка script , а той е scriptS . На втората задача не знам дали е грешка на Дончо или е умишлено при CSS селекторите <div id="tabs-container"> , а самия селектор е по class .tabs-container , реших до го оправя с JQuery , а не да барам HTML-a . За третата няма какво да кажа ако знаеш Handlebars се прави лесно :) Успех с решението, ще се радвам да видя и по чисти и прилични решения на първата :)

Интересно , защо първата задача не ми работи само във Firefox , а на всякъде другаде работи , дори и в IE :)

EDIT: Промених закачането на евент-а в първа задача , защото беше много грозно с тея цикли и на всеки елемент евент и т.н. Сега е закачен за табле и следи върху кой елемент е извикано, а промяната на ховера се случва само върху един елемент не върху всички както преди . Мисля че това е правилния начин да се направи

 


от TeodorTunev (3061 точки)


0
Колега, ти си няква машина :) на 5тия час си ги решил, това значи че имаш час време да пиеш бира в кафето горе и да тренираш сам на джагата :)

от mita4itu (1969 точки)


7

Ето и моето решение на първа задача: Решение 
Edit: Имаше малкга грешка. Сега май всичко е ок.


от d.kostov88 (1086 точки)


1

Ето и моето решение: Задача 1.


от frowstyl (1008 точки)


1

С'я ... аз макар че почти съмс игурен какъв ще е отговора, все пак да понахалствам :)

Това ограничение:

  • Всички стилове се задават с JavaScript
    • Не са позволени CSS файлове или въобще писане на какъвто и да е CSS (освен този, който се генерира с node.style)

забранява ли позването на нещо такова в .js файла:

    var style = document.createElement('style');
    style.innerHTML = 'li{list-style-type:none;background:url(imgs/arrow.png) no-repeat 0px 5px;padding-left:12px}';
    document.head.appendChild(style);
 
щото... на мен ми се струва доста разхитително да набивам inline стилове на всеки елемент. Да, ще е в цикли някакви, но все пак...

от JulianG (5316 точки)


0
освен този, който се генерира с node.style - отговаря на твоя въпрос :)

от TeodorTunev (3061 точки)


0
При първа задача как при клик да не се слуша за евента mouseout?
Как да проверявам дали е бил кликтнат и съответно да не се изпълнява mouseout?
http://pastebin.com/kvkZSath

от TodorDimitrov (757 точки)


0
Като го кликнеш слагаш клас. Ако при mouseover елементът има тоя клас - не правиш нищо. Като се кликне др елемент, махаш стария кликнат и слагаш класа на новия

от DonchoMinkov (12706 точки)

0
Проверката май се прави и при mouseout.

от TodorDimitrov (757 точки)



0
Здравейте!
Сорс - http://pastebin.com/kuzaRmkE
Демо -http://liveweave.com/4UBPDe
Използвал съм таблица за генерирането на календара.

от icom85 (50 точки)


3

Още един вариант на първа задача.

Demo

Source


от SStoyanov1 (1324 точки)


0
Между другото и аз я бях решил с OnMouseOver и Out само на "датата" на деня и ми е интересно, дали ако това бе изпит щеше да е голяма грешка, от която да загубим сериозни точки :)
Поздрави

от penjurov (1466 точки)

0
Със сигурност не е грешка, защото условието е леко двусмислено и може да се тълкува, а и не е толкова важно в случая.

от SStoyanov1 (1324 точки)


1

Ето го и моя календар.
Това е след като бях на лекцията в която Дончо го решава - и малко или много съм повлиян от неговото решение - не, че има 1000 варианта за решаване де.

CODE | DEMO

Предполагам, че днес ще успея да разцъкам и останалите две задачи.


от nzhul (3415 точки)


0
Добре се е получило, но когато има селектиран елемент и се кликне върху него, той не се отселектира.

от SStoyanov1 (1324 точки)

0
Ама то трябва ли да става така ? В условието никъде не видях да има такова условие. Иначе е логично да се случва де :)

от nzhul (3415 точки)



0

Втора задача (jQuery tabs control) съм я направил със .closest, което търси нагоре по дървото съответния селектор, вместо със .parent(), като така се застраховам в случай, че директния родител не е този, който ми трябва. Направил съм си и функция setCurrent(), която извиквам в началото и при всеки клик.

http://jsfiddle.net/8Qmbc/


от neutrino (3376 точки)


1

Решение Task1

Решение Task2

Решение Task3

Първа задача ми се получи доста по-различна от това което гледах в последствие на видеата, аз реших да не ползвам масив с дати и такива неща, а използвах Date обекта в JS. Като визия задачата е много грозна, но работи. Проблема с подскачащата кутийка в първа задача го реших с:

dayBox.style.overflow = 'hidden';

Имам един въпрос за изпита, допуска ли се да си ползвам мои екстенжън методи на изпита, ако не, тогава мога ли да си ги оставя поне като вложени помощни функции?


от dimo.petrof (2887 точки)


0
Можеш да си ползваш всичко.... За нея просто не трябва да са писани на jQuery, иначе си ок. ps. както си го направил на първа задача, нямаш грижи.

от H.Tsekov (769 точки)