81. Moderní JavaScript - Komplexní příklad: filtrujeme podezřelé a vypisujeme do stránky
HTML-код
- Опубликовано: 4 фев 2025
- Můžeš mě sledovat na Instagramu: / davidsetek
JavaScript je programovací jazyk, díky kterému můžete vytvořit moderní webové stránky. Moderní weby se dnes tvoří pomocí HTML, CSS a JavaScriptu. Ale JavaScript není jen to. Pokud se naučíte tento programovací jazyk, tak pro vás nebude problém přejít k jakémukoli jinému programovacímu jazyku. Co se naučíte v JavaScriptu, tak využijete i v jiných jazycích. Nejdříve si ukážeme základy JavaScriptu, které jsou společné pro všechny programovací jazyky (jen se v každém jazyce malinko jinak zapisují). Ale princip je vždy stejný. Až budeme mít za sebou základy, tak se pustíme do změny HTML a CSS jazyka pomocí JavaScriptu. A tam začne pořádná zábava. Navíc, v JavaScriptu se dají programovat i hry, takže nás čeká hodně zajímavých věcí. Naučte se HTML a CSS (viz předchozí kurz na tomto kanálu) a JavaScript a budete mít otevřenou bránu na pracovní trh, kde jsou tyto znalosti dost poptávané. A co si budeme říkat, také dobře placené. Změňte svůj život vzděláním. Pojďme se naučit programovat.
Tak toto bylo vyčerpávající :D
Velice obsáhlé video. Čím dále jdu, tím méně videí za den shlédnu :D. Jinak mě překvapila jednoduchost odstranění ,,p'', myslela jsem si že za tím bude nějaký složitý proces.
Budem uprimna, toto video som kukal 5x a potom ma osvietilo😄😄😄 chapem kodom aj mi to dava zmysel ... ale citim sa ako prvacik na zakladnej, co sa naucil abecedu ale bez pomoci ju este nevie pouzit 😁😁 ako fakt po tom 5tom odsledovani som bola uplne chapajuca bytost..Na zaciatku som sa zlakla, ale nic nie je hned...cize super...velmi ma posuvaju dopredu vase videa❤❤
Díky, to jsem moc rád 🙂
Pozerám tretíkrát, každýkrát chápem o niečo viac 😄 verím, že raz to pochopím celé
Super, to jsem rád :-) Určitě se vám to podaří
Zdravím, kdo se třeba zasekl a nevěděl, jak dál, tak doporučuji vydržet. Taky jsem tápal, ale jakmile to zkoušíte po x-té, tak už začínáte sami chápat proč je kód, tak jak je. Je třeba se programátorsky zdeformovat.😀Díky za videa a lajk.
Dobrý den, jak se dá prosím nastavit v tom VS Code to "správné odřádkování". Například u Vás ve videu v čase: 28:20, když si stopnete, tak vidíte řádek 41 a pod ním je mezera a pak je řádek 42. Vlastně to není způsobeno klávesou ENTER, ale asi nastavením. Dlouhý kód na jednom řádku je tak viditelný i v úzkém okně na několika řádcích, ale pracuje jako by byl na jednom řádku.
Jak toto nastavit?
Ahoj, jestli myslíš zalamování řádků, tak to najdeš zde: ruclips.net/video/7KbqGzNKNIA/видео.html
Davide, mohl bych se zeptat. Když bych chtěl vyhledávat podle birth a licencePlate tedy vyměním za birth. Tak to nefunguje. Ale pokud birth převedu na string "1989" tak to funguje. Kde hledat probem? Děkuju
Ano, to fungovat nebude. Viděl bych právě problém v tom, že birth by mělo být správně číslo, ale pomocí LowerCase se to snažíme dostat na písmena. Tam bych začal. Navíc zadávání do formuláře bere také jako text, když do něj zadám číslo. Takže i tam bych to převedl na číslo (tedy hodnotu načítanou z políčka)
Ahoj David , chcem sa len spytat preco davas pole arratResult do filtrovacej funkcie? Nebolo by lepsie to dat do toho licence.plate.addEventliseneru a mame pekne po poradi zachytenie input +value+filter funkcia + vypis funkcia. Dakujem
Ahoj, to by zřejmě také šlo. Vždy jsou různé přístupy. Za mě by bylo také dobré udělat univerzální filtrovací funkci, aby to nebylo vázané na licencePlate, které je u fitrlování natvrdo. Určitě by se to dalo ještě dále vylepšovat. Je otázka, jak moc univerzální by bylo tvé řešení. To by se muselo vyzkoušet. Ale rozepsat by to určitě šlo
pochopil som tomu ale sám by som asi na to neprišiel ako už bolo spomenuté v komentároch. Trochu ma to aj zneistilo v tom, že koľko toho musím ešte vedieť. Pred začiatkom videa som to skúšal najprv sám ale nevyriešil som to. Video je pochopiteľné, vysvetlenie takisto ale prísť na to je náročné. Na to by som musel mať predsa riadne vysoké IQ v horizonte génia aby som na to sám prišiel :D A to sú pritom len základy, som zvedavý čo bude ďalej ale mám strach
To není o tom, abys na to přišel sám. Je to o tom si z každého příkladu něco odnést. Naučit se, jak konkrétní věci fungují. A v budoucnu budeš schopný skládat tyto věci sám do sebe. Ale 80 % času programátora je googlení. Najdeš kód, který dělá to, co ty chceš, ale musíš mu rozumět. Jak jsi psal - vidíš kód z videa a rozumíš mu. To je cíl. Ne, abys na to přišel sám. Já na to také nepřišel sám, ale někde jsem to viděl
@@hacknisvoubudoucnost Dík za povzbudenie :) Tiež si na to neprišiel sám? Pritom pôsobiš tak geniálne koľko veľa toho vieš z IT a ekonomiky. Nechápem kde si sa toho toľko naučil. Videl som kvantum videí aj z eko od teba, všetko je super vysvetlené ale desí ma koľko málo toho viem oproti tebe :D
@@ogle-tr-122bpoker7 Programovat se dokáže naučit každý. Práce programátora je o rozumění kódu a pak teprve o tvoření. Důležité je, že kódu rozumíš. Programování není memorování kódu zpaměti
Doteraz to bola pohoda a teraz totálna depresia... 😞 Po tomto videu mám pocit, že sa to v živote nenaučím ... Kód zvládam prečítať, ale sama by som to nedala ani náhodou... Dúfam, že sa to raz poddá ;-)
Nejde o to, dokázat kód napsat z hlavy. Jde o to kódu rozumět. Zkuste si ho ještě 2x nebo 3x znovu napsat. Zkuste si s kódem hrát a něco tam přidat. Některé části si tak budete pamatovat. Až přijde čas, kdy tu danou část budete potřebovat, tak si na ní vzpomenete. Ale nemusíte jí z hlavy vědět. Vzpomenete si, že byla v tomto videu a že kód někde máte popř. se podíváte znovu na video. A o tom příklady jsou. Vzít si z toho myšlenky a části. Některé věci, když se budou opakovat často, tak si je zautomatizujete. Vůbec se netrapte, že kód nedokážete sama z hlavy napsat
Ahoj prosim ta mozes davat ku kazdemu videu link na knihu? resp. vzdy ked je nova uloha? som teraz na 81 ulohe a knihu stiahnutu kde su videa len po 66 lebo som ju stiahol skor a nemam link, teda to musim hladat medzi videami a ani neviem kde to bolo :) Ani mi nejde o riesenia z knihy ,ale chcem si kopirovat objekty a polia s objektami. Dakujem
Ahoj, už to mi to někdo psal, tak ji asi od 90. videa dávám do odkazu. Takže by to mělo být v pohodě. Zkusím to, až bude čas, dodat i k dalším videím
@@hacknisvoubudoucnost dakujem pekne, tvoje videa su super vysvetlene, pekna praca
@@lukasg1231 Díky moc
mne stve fakt ze tu lokalni hodnotu promeny ve funkci nemuzu pouzit mimo tu funkci i kdyz ji definuju globalne. Ja tu hodnotu budu muset asi ukladat nekam do databaze nebo nekam do souboru a pak si ji brat.
Jakmile se funkce spusti tak ji v console.logu mimo tu funkci nevidim a return tady nejde pouzit kdyz jde o input funkci.
Jsem úplný začátečník, nikdy jsem neprogramovala a učím se tři týdny (HTML a CSS se učím za pochodu u kurzu JS). Tři týdny se učím Váš kurz Moderní Javascript. Všechny věci jakžtakž chápu, proč tam jsou a co dělají,ale po tomhle videu jsem docela v depresi, jelikož si neumím představit, že bych byla někdy schopna tohle sama dát dohromady. Vím, že se používají frameworky všude ve firmách,chtěla bych se naučit React,ale i přesto koukám na ten kód,chápu ho,ale sama bych to nikdy nevymyslela. Prosím o Váš názor,abych zase po sobě nechtěla moc, co se opravdu reálně naučit, snažit pochopit pro budoucí zaměstnání? Moc děkuji.
Mám ten stejný problém, proto jsem musel přejít na jiné kurzy,oficialni stranky JS jako MDN ci w3.school, hodne mi pomohlo se soustředit na zaklad, abych vubec pochopil fundamental/zaklady js, je velmy dulezite. Sama nevytvoris ten kod, i kdyz jej dokazes cist,protoze nemas zkusenosti, je to stejne jako se ucit novy jazyk, ucis se slovicka a postupem casu, a to mam ted ja, rozumis jazyku, a pak ale potrebujes ,nuti te to mluvit, takze zacinas sledovat tutorialy, takze uz zacinas cist kod v pohode, a zacinas si pomoci praxe kterou ale musis psat kod, pamatovat jak onen kod stavet-zacinas rozumet syntaxi problemu ktery chces resit(ukolu). JS si myslim ze je tak o 1roku praxe ho pochopit a neco v nem udelat.
Hele mám uplně stejnej problem/ci mnel jsem.(Tedy ja hlavne s pochopenim syntaxe, trvalo mi to asi 3 mesice, plneho soustředení se(a to je jenom zaklad a i tak mam mezery).Ted uz v pohode dokazi precist kod a dokazi pochopit co to asi bude delat,ale bez praxe nevytvoris kod, bud v pohode. Je to hodne potom o kopirovani kodu, a sledovani co onen kod dela atd, proste hracicka :)
No a potom po tom roce, roce a pul si najdes praci a uz budes v pohode :)
Doporucuji ti dobre se naucit html a CSS, neskakej do JS, pokud nebudes umet vytvorit stranku co vypada docela slusne, i s chybami ale prece :)
Moje rada, peace :)
(protoze te to bude odrazovat,ten javascript bude na tebe tezky, a tim padem vzdas i html a css, a to je chyba.)Po zvladnuti html a css, budes chtit umet js, html a css je asi o 3 mesicich praxe,aby jsi umela udelat web stranku,pak samozrejne se musis ucit stale dal a dal,ale uz budes vedet zaklady html a css, takze pujdes na JS, tan pak zvladnes a uz je to jenom o ( get knowladge )
a hlavne lidi se to uci 4 roky na VS, samozrejme s mezeramy protoze se musi ucit i jine predmety, ale maji treba onen predmet 1 rok, kolik tomu das, investujes cas, tim lepe. Ja se ucim kazdy den hnedka po praci. Nechci se to ucit ale 4 roky, takze tomu davam cely muj cas, a tim myslim doslova.Kolik tomu objetujes ty pro svou budoucnost je uz jen a jen na tobe. Pro predstavu ,spim 5h,vypocitej si kolik tedy casu stravim ucenim :) ( " nevynechavam ani den " )
Jeste bych chtel dodat,neda mi to a musim se vratit k tomu co jsem ti zde napsal. Se vsim musim opetovne souhlasit. Je to uz ccs pul roku,pokud chci tak html stranku proste v pohode zvladnu. Trochu jsem se ted dival na js,typescript atd.Abych mnel nejaky prehled co to vlastne dela atd. A vis ty co? ?? To neuhodnes.
I presto ze uz proste tu webovku v pohode nejak vytvorim, dokonce dokazi pokud chci tak okopirovat druhou stranku,ale presto jsem se ted po pul roce zase vracel k HTML,CSS a to abych si vytvoril svou vlastni stranku,abych dokazal vazne pochopit ten html, ty tabulky jak se tvori, mozna i jak se tvori takovy formular pro odesilani a dotazniky atd.Ano je to nezazivna vec, ale vidis,ja se k tomu vracim a proste se to chci naucit,protoze to budu potrebovast,budu potrebovat vedet jak propojovat bunky spolu atd.
Vracim se spatky a ucim se cemu jsem moc nedal,protoze vim ze mi to bude v budoucnu chybet.Nemyslim tim nejaky brutal design atd,ale proste potrebuji to vedet jak se co tvori,jak mam tvorit section atd.Lidi tomu moc nedavaji a hnedka skacou jinam, i ja jsem zabrousil trochu jinam, a vidis presto se vracim, je to uz pul roku poradne prace,kazdy den,kazdy den uceni, zkouseni,kopirovani cizich stranek, ci prepisovani kodu cizich lidi/youtuberu,kteri je davaji na internet,a proc to delam? Abych se to naucil.Do vyhledavace youtube napisi html/css for beginers a proste jedu.
Myslim si ze clovek musi udelat priblizne takovych tech 100 webovych stranek nanecisto proste pro sebe,aby se mu to zarylo pod kuzi a on si byl jistej,vis co myslim tim byt si necim jistej ne? Prijdes na pohovor, a nejses si necim jistej,otazka te zaskoci, tak oni daji prostor jinemu ze :) Takze jak pisi vazne nepolevovat v HTML a CSS,davat tomu dost :)
(je to nekdy nudne-takze clovek proste chce zabrousit jinam a to je zcela normalni,ale pak se proste musis vratit,bude te to nutit protoze budes videt sve nedostatky).
Pak prijde cas, kdy uz jsem byl u toho JS, a neco jsem se naucil, nejake zaklady, a chtel/a proste propojit DOM js s HTML, nejakou animaci, tak to zkousis a ono to nejde.No a proto prave mas uz nacvicenych tech 100html aby jsi se mohla venovat js kodu. A pak zase to stejne dokola.
Musis ale kazdy den, i kdyby to bylo 5minut.Protoze pak z toho clovek lehce vypadava pokud to nema pod kuzi. Oni programatori fronend ti proste jendou kazdy den kod,proto se tak rychle posouvaji v pred protoze jedou kod denodenne.
Takze jeste jednou proc se vracim, proste no stress, bud motivovana, a cekej ze v budoucnu te onen cil, pokud budes stale motivovana a neustupna ze sveho cile, ze se jednou dostavi,ale proste to zabere cas.
Nehledej videa tipu:mohu se naucit programovat za 3-6 mesicu atd? Ne nemuzes. Trva to priblizne 1 mozna 2,proto vsude pisou ze chcou minimum 1rok praxe,a to je ta tva praxe a to kolik tomu das. Zustan motivovana a odhodlana.
A predposledni vec:dej tomu maximum, a hlavne te to musi bavit, nedelej to nasilim,ale proste jako konicek, viz:pokud hrajes basketbal, ze zacatku taky nenastrilis hnedka kos,ale pokud strilis(trenujes) a mines 1000kosu, tak z toho ale das treba 3-400 kosu,ale protihrac da jenom 5,protoze netrenoval :) ale ty ano :)(M.Jordan)
A posledni vec: mozna to cte i nekdo jiny, tak by to mohlo byt poucne i pro nej :)
Peace , asalamu alaikum, mír :)
@@tomasmatusek6292 súhlasím ja to robím tak že po zhruba 20 videách sa vrátim na začiatok videí moderneho javascriptu a postupne riešim tie výzvy....ono zakaždým som v tom lepší ale vždy sa nájde niečo čo som si nezapamätal a znovu si to oživím...už som to vela krát čítal na rôznych forach alebo na FB že toto programovanie je hlavne o praxi..proste stále cvičenia úlohy a riešienia problémov....prax prax prax....
Vidím v komentářích, jak všichni reagují - "Kódu rozumím, ale nejsem schopen ho vytvořit". To máte dobrý. Celkem bez problémů jsem prošel html a css, ale tohle pro mě vypadá na konečnou. Připadám si, jako když jsem na střední četl Dunu od Herberta a jeho často používané - "Plány v plánech jiných plánů"....tady to vidím jako "Funkci ve funkci jiných funkcí" a nejsem po druhém navázání schopen udržet nit. Ještě to zkusím napsat si to na A4 a pospojovat si co k čemu a proč :)
Pokud ti to nepůjde tomu porozumět, tak prostě jdi dál a v budoucnu se k tomu vrať. Uvidíš, že pak ti to přijde už lehčí. Je zapotřebí psát a psát a zabývat se kódem. Časem člověk pochopí spoustu souvislostí. Jedna úloha, která ti nesedne, nic neznamená.
@@hacknisvoubudoucnost díky dejve:). já se jen tak nedám, ale prvotní i druhotný dojem...nu:). Nicméně jsem si včera vytvořil něco jako myšlenkovou mapu programu. Na celou a4 jsem si vypsal program a pak si vše očísloval a pospojoval, co s čím, kdy a proč(takové malé barevné šílenství). Teď to podle návodu dám několikrát dohromady...ono se to poddá:).Jinak...jak už jsi četl v reakcích mnohokrát - poděkování...už jako dítě jsem si dělal nějaké prográmky v jazyku basic(no nejsem nejmladší:-))na starém didacticu m. Dlouho jsem se k tomu chtěl vrátit, ale nevěděl jsem odkud začít. až tvoje lekce od html a css a teď js mi přišli uchopitelné...takže velký dík. Jestli jsi ještě stále Budějovičák, jsem hrdý na to, že jsme jmenovci a sousedé:)
@@davidsvenda5145 Uvidíš, že to půjde 🙂 Když se vytrvá, tak jde všechno.
Ano, stále bydlím v ČB a jsem rád, že se ti videa líbí
Zaujimalo by ma ci by sa nedal spravit jeden textarea kde zadas hocico, je jedno ci adresu,meno, priezvisko...proste bude hladat hocico co sa zhoduje s tou osobou
Myslím, že to by šlo. Muselo by se jen prohledávat více věcí
uff.....zlaté html a css .... :D :D
:-)
Tak tohle pochopím tak po vysoké škole. To ještě kdybych to měl vymýšlet sám? Ani náhodou šéfe :D Do 15. minuty jsem to chápal, pak ende. Já to dělám úplně ale úplně stejně jako vy, ale jenom errory...
script.js:44 Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
at script.js:44
at Array.filter ()
at renderCriminals (script.js:43)
at HTMLInputElement. (script.js:55)
(anonymous) @ script.js:44
renderCriminals @ script.js:43
(anonymous) @ script.js:55
ONO TO FUNGUJE!!!!!!!! finally. :)
To není nic špatného. Musíte najít, kde je chyba a z toho se člověk nejvíce naučí. Pak už ji nebudete dělat a posune vás to dál. Tohle každý programátor googluje. To nevymýšlí sám. Já to také kdysi googloval, když jsem to potřeboval
Takže jsem se totálně ztratil... to už je množství kódu které mě utopilo... No dám tomu trochu pauzu a vrátím se
Když se na to podíváš po 2, 3 po 4, tak to bude dávat vždy o něco větší smysl
@@hacknisvoubudoucnostjá se na to dívám a vím o co tam jde ale nepostavim takovou konstrukci... Cítím smutek
@@flambizcz Tvým úkolem není konstrukci postavit, ale vyznat se v ní a vědět, co jak uděláš. A to si zapamatovat. Takto se posouváš v programování dál. Když vidíš nějaký projekt, tak není reálné, abys věděl, jak ho udělat, pokud si s tím nikdy nepracoval.
Ahoj, tentokrát tohle video mi zabere trošku déle na prostudování a pochopení :D Jen jsem chtěl zmínit, že mi přijde v let filters clkm zbytečné dělat objekt, když to mužem nechat obyčejně jako let jenom. Podle mě to lehce potom mate. Díky =)
Ahoj, mrkni pak rovnou na 82., tam se to aplikuje na ToDo appku. Je to to samé a člověk si to tam může rovnou vyzkoušet. Objekt je tam proto, že v budoucnu do něj možná něco přidáme, tak ať to pak nepředěláváme. Uvidím, jak to ještě vymyslím. Navíc je dobré si zvykat na objekty. Jestli to vyjde časově, tak bychom pak přešli na objektový JavaScript. A tam už to bude samý objekt :-) Ale šlo by to tady zapsat i bez něj
@@hacknisvoubudoucnost jasně, jasně, díky moc =)
ufff zase jedno z Tvých luxusních videíí 🤣🤣🤣🤣 v Pythonu jich taky pár máš, třeba to na OOP... čekal jsem jsem že z inputu se to vloží do proměnné, a to se zkontroluje pomocí filter a include tak jako v předchozích videích, tím že jsi na to šel fcí jsi mi do toho hodil vidle....tak jak říkám by to nešlo ???
ještě bych dodal že u Pythona mi v téhle situací hodně pomáhá ladění, kde je vidět jak to jde krok za krokem, tady by to mělo jít taky že jo ?
Jestli máš jiný přístup, tak to nevadí 🙂
@@hacknisvoubudoucnost zkoušel jsem to a nešlo to Co ten debugging má smysl ?
@@tomasnovotny4609 Debugging má smysl. Můžeš si to krok za krokem prohlédnout, co kód dělá. Je to fajn věc
V kratkosti 1. Ziskas data 2. Filtrujes je 3. Vypises osoby ktore sa zhoduju. Nieje to az tak tazke.
Akože rozumiem tomu celému kódu ktorá časť čo robí len mám pocit že sám by som to z hlavy nedal.
To nevadí. Důležité je, že tomu rozumíš a když budeš takovýto kód potřebovat, tak ho někde máš napsaný a dokážeš ho znovu použít popř. upravit, jak budeš potřebovat
Já vím, že praxe je jiná, ale mně strašně vadí když dáváš anglicky proměnné - pak prostě nevím, co je funkce JS, co je odkaz na pole .... a co je tvůj zbytečnej anglicismus.
Jak píšu, praxe je určitě jiná. Ale kdybys měl proměnné a pole objektů česky, bylo by to daleko přehlednější, hlavně u něčeho takhle komplexního - spz, hledacSpz, kriminalnik ....
Mě zase vadí nevděční trollové. Promiň ale vždyť to jde napsat slušně jako podnět/ZV včetně poděkování za to, co pro nás Dejv dělá.
@@Johny8687 neskutečný :D asi by chtěl, aby to někdo psal i za něj a rovnou dostával senior výplatu :D traged
Ja som to ešte upravil, nakoľko ak do vyhľadávacieho políčka zadáš niečo pre vyhľadávanie a filter ti vyhľadá nejaké osoby a vypíše ich, tak keď vymažeš input, teda že bude prázdny, tak stále tam tie podozrelé osoby budú vypísané. Dal som tam podmienku if (tryToFind.searchText.length > 0) a potom nasleduje arrayResult.forEach(function(oneSuspect){ ....... a keď máš input prázdny tak nevypíše ani jednu podozrelú osobu