Loading...
Samuil.Petrow avatar Samuil.Petrow 1550 Точки

[Homework] JavaScript Basics - DOM & Events

HTML JAVASCRIPT

Втора задача може би се нуждае от оптимизация за nest-натите div-ове.

На задача 4 доста размишление имаше в/у това какъв тип евент да се ползва и от "change", "keydown", "keyup" избрах последното, но може би второто да е по-удачно :?

Тагове:
7
JavaScript Fundamentals
Yulia avatar Yulia 1346 Точки

Виждам, че съм пропуснала да си споделя домашното тук. Нека поне го има за "бъдещи поколения" :D

Понеже задачките бяха малко и не ме затрудниха кой знае колко - изместих акцента върху bootstrap, който исках да науча най-накрая, защото в предишния курс нямах време за това и доста се изложих с responsive-а на изпита.

Самите задачки съм ги решила както аз ги разбирам - на някои се заиграх повече де. Всички се визуализират на една страница. Кода, който се получи в html-а се получи меко казано ужасен заради многото вложени тагове, които се изискват, за да се получи grid-а в bootstrap. Това сигурно е най-грозният html, който съм писала през последните 3 месеца xD. Но на визия резултата се получи достатъчно добре според мен - може да си го гледате от телефона, хаха :)

JS-Homework-DOM&Events: Live Demo | GitHub

На Like-бутона исках да добавя и малко hover ефекти. Без jQuery беше много гадно да пиша event-и с mouseover и mouseout, но успях! :D Има доста повторения в кода - със сигурност може да се рефакторира малко. Но както казах - в това домашно не претендирам за високо качество на кода :D

На Display Divs прецених, че искам да покажа наистина всички div-ове, дори и празния xD

Hide-Odd-Rows я реших "малко" хамалски - не ми хареса идеята да въртя цикли за DOM-а и банално посочвам кои редове да се скрият и после да се показват отново :D Детска му работа - да си цъкаш с кеф на красивото бутонче. С много тъпо решение отдолу, да. Докато проверявах домашни обаче, попаднах на едно отлично! И то е с: document.querySelectorAll("table tr:nth-child(odd)"); Точно и елегантно.

На Validate Input не ми се искаше да ползвам regex или някакви pattern-и. Бях сигурна, че isNaN е напълно достатъчно за проверка. Имам и paste event, с който забранявам напълно пействането и връщам предишната коректна стойност ако има такава. Но... чак сега виждам, че на Mozilla не работи paste event-а, хммм... Окей де, и без това намерих по-добри решения в домашните, които проверих. Имаше и такова, в което даже при провлачване на текст, който съдържа с цифри, във формата се филтрираха само цифрите! Това е най-доброто решение. В него ето този код се изпълнява на input event:

var pattern = new RegExp(/\d/g);
if(!pattern.test(element.value)) {
    element.value = element.value.filter(pattern);
}

Координатите на мишката забелязах, че доста хора са ги направили с mousemove, други с mouseover - и двете са вярни според мен. На мен ми се стори по-подходящо с mousemove, защото другия вариант изглежда така, все едно лагва :D Удивително колко много различни event-и има за едно и също нещо - но трябва да се внимава кое работи на всички браузъри. Просто ev.x и ev.y не работи на Mozilla, напимер. За нея е undefined.

Това е от мен - моите решения тук далеч не са най-добрите, но с другите предложения се надявам това да е полезно на някой, някога... :D

PS. Никой ли не написа Тетрис-a?

Едит: брей, че шарено стана :D

7
dani_ddd avatar dani_ddd 82 Точки

Заповядай един тетрис - ТУК

Не е перфектно, но поне мърда :D
2
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.