Kurs JavaScript odc. 3: Gra w wisielca. Przetwarzanie łańcuchów
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- Jeżeli masz ochotę zobaczyć więcej naszych filmów, podcastów i artykułów w coraz lepszej jakości, to zachęcamy do pozostawienia subskrypcji, a także do odwiedzenia prowadzonych przez nas witryn oraz do polubienia fanpage'u Pasji informatyki na Facebooku.
🔔 Subskrybuj - bit.ly/pasja-sub
Jeśli masz ochotę wesprzeć to co robimy, to możesz:
🖐 Zostać Patronem - patronite.pl/p...
☕️ Ufundować nam wirtualną kawę - buycoffee.to/p...
👉 Fanpage na Facebooku - bit.ly/pasja-fb
👉 Profil Patronite - patronite.pl/p...
👉 Lista Patronów - pasja-informaty...
👉 Donacje na blogu - miroslawzelent....
👉 Harmonogram publikacji - bit.ly/pasja-ha...
👉 Kontakt z nami - pasja-informaty...
👉 Współpraca reklamowa - bit.ly/pasja-ws...
👉 Kursy video dla technikum - pasja-informaty...
👉 Blog informatyczny - miroslawzelent.pl
👉 Trenażer egzaminacyjny - egzamin-informa...
👉 Egzamin-E13.pl - egzamin-e13.pl
👉 Forum dyskusyjne - forum.pasja-in...
👉 Witryna podcastowa - podcast.pasja-i...
👉 Twitter MZ - / miroslawzelent
👉 Twitter DS - / stelmach_damian
Trzeci odcinek kursu pozwoli nam zrozumieć jak w JavaScript przetwarzane są napisy, czyli tzw. łańcuchy (stringi). Oczywiście moglibyśmy przetestować zachowanie się łańcuchów na jakichś przykładowych sentencjach, ale to by było nudne. Zamiast zajmować się na sucho takimi klasykami, wypłyńmy na nieco głębszą wodę i zróbmy sobie dzisiaj grę komputerową, która będzie operować na łańcuchach. Znamy ją myślę wszyscy - nazywa się wisielec (albo szubienica).
💾 POBIERZ PLIKI Z ODCINKA:
miroslawzelent....
📑 CODE REVIEW NA FORUM:
bit.ly/code-rev...
🎵 MUZYKA:
Muzyka w intro:
Runaways - TH-cam Audio Library: • Runaways | TH-cam Aud...
Muzyka z podsumowania:
Crimson Fly - Huma-Huma: • Video
#pasjainformatyki #programowanie #kursjavascript
Polecam dodać do css'a linijki (np. pod element body):
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Zapobiegają one możliwości zaznaczania tekstu, co bardzo denerwuje przy wciskaniu kilkakrotnie jednego przycisku. Estetyczniej wtedy to wygląda 😃
Dzięki! fajny pomysł
Genialne :D właśnie irytowało mnie to od samego początku pojawienia się literek alfabetu :D
fajnie! :D
@@Mikoaj-wo6uv Jasne, że tak, później się sięga po bardziej zaawansowane narzędzia, które ułatwiają życie ;) Te lekcje to tylko wstęp do programowania webowego :P
jechanie po Internet Explorerze to coś pięknego, oprócz nauki można jeszcze się pośmiać w pewnym momencie:))
To już mój kilkunasty odcinek Mirosława- Pasji Informatyki i zauważam prawidłowość w tym, iż najlepiej w celu wykorzystania owej wiedzy w praktyce wpaść na własny pomysł w którym moglibyśmy wykorzystać zdobytą wiedzę niż bacznie powtarzać krok za krokiem to co robi Mirosław- jeżeli jednak już nie wpadniemy na ten pomysł z doświadczenia radzę spróbować zrobić omawiany problem następnego dnia ( to jest nie tyle że dobre sprawdzenie nabytych umiejętności co myślenia samodzielnego). Pozdrawiam i dziękuję za kolejną dawkę przydatnej wiedzy!
Najlepszy polski kanał z kursami na TH-cam!
Dziękuje, że jesteś i tworzysz filmy ;)
Wow. Szacun dla Pana, że chce się panu tak tłumaczyć każdą linijkę :D wiele osób by psychicznie nie wytrzymało tego, a pan daje rade i dzięki temu można się za darmo i w prosty sposób nauczyć JS i wielu innych programów. Nawet ja, który z html czy js miałem do czynienia tylko w gimnazjum na lekcjach informatyki, teraz mogę się czegoś na poważnie nauczyć :D
Trzeba mieć łeb jak sklep żeby zapamiętać te wszystkie języki, szacun Mirek!
+Krzysowsky Gdy sie nauczysz jednego jezyka , to z nastepnymi jest latwiej
Wystarczy opanować tylko C++
@@urbix0166 obiektówka c++ na perfect i sobie poradzisz z każdym językiem, to tylko kwestia przerzucenia sie na inne biblioteki
najważniejsze to złapać zajawkę
Szkoda że nie mam takiego nauczyciela w szkole :/ Dobra robota !
nie wiem, czy już ktoś o tym pisał, ale znalazłem szybszą metodę na wrzucenie tych wszystkich liter alfabetu. Zamiast tablicy możemy użyć zmiennej
var litery="AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ";
a potem już w pętli użyć po prostu
tresc_diva = tresc_diva +'' +litery.charAt(i)+ '';
jeśli się mylę, to proszę o sprostowanie, mi w każdym razie zadziałało ;) i nie trzeba wtedy wypisywać każdego indeksu tablicy ;)
kiedyś myślałem że JavaScript to ciąg znaków które nic nie znaczą teraz rozumiem o wiele więcej :0 Dziękuje
Dzięki Tobie, spodobało mi się programowanie!! Dzięki :)
'Paczacz' 🤣 debest 👍
A tak poza tym to ma Pan niesamowity DAR nauczania, Dziękuję i pozdrawiam.
Budzę się w dzień po moim przyjęciu 18-stkowym i widzę nowy odcinek. Miło dostać prezent od samego Pana Mirosława :)
Pan jest najlepszy w tym co robi czyli w genialnym wytłumaczeniu krok po kroku i co z czymś się je. Osoba która dopiero uczy się takiej formy programowania od zero może zostać geniuszem w programowaniu. Pozdrawiam i dziękuje za tak święte przekazanie wiedzy, będę szlifował javascript :D. Udało mi się zrobić szubienice i na spokojnie będę analizował linie kodu, aby zrozumieć dokładnie co z czym się gryzie.
Najlepszy poradnik o JS w internecie! Panie Mirosławie, bardzo dziękuje!
Świetny materiał, aż głowa mnie boli od ilości wiedzy :)
nie każdy zdaje sobie sprawę ile pracy wymaga przygotowanie tutoriala z takim flow i jednocześnie wysoką wartością merytoryczną... szacun :-)
Niesamowity kurs na wstęp do programowania w JavaScript! Dzięki 👍⚡
Mirek dziękuję za bardzo cenną wiedzę, jesteś jednym z lepszych nauczycieli jakichkolwiek widziałem, naprawde duży szacun!
Jeszcze raz dziękuję i życzę dalszych sukcesów na rozwój Twojego kanału na TH-cam!!
Pozdrawiam, Daniel
Obecnie uczęszczam na kurs z programowania webowego. Mając porównanie mogę śmiało i nieco z przykrością powiedzieć - z Pana filmików zrozumiałam więcej, niż z któregokolwiek, bardzo kosztownego dnia na moim programistycznym bootcampie. Jest Pan bardzo dobrym nauczycielem!
Dzięki za dobre słowo, powodzenia w nauce programowania webowego 🙂👍 Zawsze warto zajrzeć do przeróżnych źródeł, każde przekazuje nieco odmienną perspektywę. Pozdrawiam, MZ
Kolejna doskonala lekcja. Brawo. Oby tak dalej.
Świetny film, cieszę się, że w nim skupił się pan bardziej na innej możliwości wykorzystania wiedzy, którą już mamy. Pozdrawiam.
Super kanał, czekam z niecierpliwoscią na kolejne materiały.
Bardzo dobry odcinek. Zacząłem odczuwać potrzebę regularnego wspierania tego kanału jakąś kwotą pieniężną. To się wam należy jak mało komu.
6 lat mija a kurs bardzo fajny. Super się słucha. Merytorycznie. Ciąg szkolenia bardzo dobrze opracowany. Wciąga jak Prison Break a dla pokolenia milenialsów Gra o Tron :D
Polecam tego TH-cam-wicza :D
Dziekuję za ten sposób prowadzenia tego kursu.
Stan przytłoczenia kanciastością
Mistrzostwo... dziękuję ☺
Swietna robota i super tlumaczenie zawilych kwestii. Dzieki!
Panie Mirosławie, bardzo ciekawy i bogaty w wiedzę odcinek, połączony z bardzo fajnym przykładem praktycznym. Serdecznie dziękuję. Z wielką ciekawością oglądam tworzone przez Pana odcinki poświęcone nauce programowania. W tym była dodatkowa frajda - tworzenie gry :) Pozdrawiam Pana serdecznie :)
+Piotrek K Dzięki za miłe słowa, również pozdrawiam. MZ
No nareszcie !!! zabieram sie za ogladanie !!!
Świetny odcinek na walentynki heheh :D
Standardowo, jakbyś wlewał mi wiedzę do głowy, dziękuję! :D Masz super teaching skill'a! Jesteś najlepszym nauczycielem jakiego miałem! Co ja zrobię jak się kursy skończą... ;)
Zajebistee. Jesteś świetny. Najlepszy nauczyciel jakiego znam :D
Gratki za robotę, którą odwalasz dla nas ;)
Proszę Pana, chciałbym Panu podziękować za to, że zrodził Pan we mnie chęć do porzuconego pisania stron. Chcę dodać także, że bardzo dobrze Pan tłumaczy, wyjaśnia: na przykład co to jest tajemniczy ciąg Febunaciego. Lubię także w Pańskich filmikach humor. Umie Pan także dobrze wytłumaczyć. Dziękuje jeszcze raz i czekam na kolejny filmik z kursu, bo już wszystko obejrzałem na kanale.
Mirku!
Przede wszystkim serdecznie Ci dziękuję za to, że jesteś i robisz to, co robisz na YT. :)
Dzięki twoim materiałom nawet taki stary dziad jak ja mógł nauczyć się czegoś, co wydawało się do niedawna niemożliwe do zrozumienia. Twoja umiejętność tłumaczenia jest Twoim niezaprzeczalnym charyzmatem.
Wisienką na torcie mistrzowskiego tłumaczenia jest pozostawienie projektu w takiej formie, która jest w pełni funkcjonalna, ale pobudza do dalszej twórczej inwencji. :) Piękne.
Ja dla przykładu podłączyłem Wisielca do Wiki, wyciągając z niej przy pomocy fetch() i jej własnej API bazę blisko 1000 polskich przysłów i czyszcząc ją ze śmieci przy pomocy RegExa. Oczywiście czuję się teraz jak rasowy programer, bo pracowałem nad tym do 4 rano. :D
Teraz przede mną zastąpienie generowanego przez pure JS kodu html przy pomocy potęgi AngularJS, dodanie poziomów trudności itd. ;)
GG najlepszy poradnik dzięki tobie uczę się z radością nowych języków
genialny tutorial... na zajeciach u mnie od razu pocisneli z grubymi tematami JSa gdzie ja nawet dobrze podstaw nie ogarnialem i robilem wszystko na czuja - korzystajac z gotowcow - to jest spoko ale na krotka mete. A tu po prostu mozna skumac wszystko
*Dziękuję za kurs!)*
kawały o Explorerze wymiatają :D
w explorerze ta strona i tak nie działa wiec zżarty o nim sa prawdziwymi faktami XD
@@Kingslayer0023 a po co ma działać jak nikt IE nie używa
@@kamilmilewski4152 Uwierz, że znajdą się osoby, które używają 🤔
"...wraz z praktyką przychodzi takie afgańskie widzenie..." :D Made my day!
Nie rozumiem, jak można dać temu filmowi łapkę w dół :(
idiotów nie brakuje ;)
konkurencja, która za takie kursy bierze hajs - tak obstawiam...
ktoś kto nie rozumie ;)
To byli użytkownicy IE
Kawał świetnej i fachowej roboty, no i oczywiście wszystko w jasny i przystępny sposób wytłumaczone:) Pozdrawiam i czekam na kolejne publikacje na YT.
Super seria. Świetny prowadzący. Czekamy na kolejne odcinki z JS.
Jest pan genialny w swojej prostocie tlumaczenia :) pana filmiki regularnie magluje przygotowujac sie do kursu frontendowego aby zdac go jak najlepiej licze na dalsze odcinki z html/css/js i moze cos z jquery bo kurs juz w kwietniu :P
Pozdrawiam
Świetny materiał :-)
Całkiem dobry tutorial. Gratuluje cierpliwości i wytrwałości w spokojnej zrównoważonej nauce. Powodzenia i pozdrawiam.
Super kanał, super filmy!
no w koncu cos na co czekalem :) Wiecej wiecej wiecej Panie Miroslawie
Super odcinek!
super filmik!
Swietny kurs. Dziekuje!
Dzięki wilkie za kolejny odcinek !
Drobna nieścisłość - polski alfabet kończy się na "ż" a nie na "ź" jak to zostało pokazane na filmie. Poza tym drobiazgiem naprawdę świetna robota, dzięki!
koks odcinek!!!
W charAt() podał Pan liczbę uwzględniając numerację od zera, ale kiedy Pan tłumaczył to, podał liczbę uwzględniając numerację od jedynki. A tak poza tym, to odcinek naprawdę świetny!
Pozdrawiam
Fajna tapeta i świetny pomysł na odcinek ;)
Świetny kurs! :) Dzięki!
Wszystko działa MEGA
Dziękuję za ten kurs :D
Jej! Nowy odcinek.
Szczerze mówiąc myślałem, że zamiast zamiany klawiatury na napis "Tak jest!"/"Przegrałeś!" będzie to wyświetlone za pomocą alertu ale również fajnie wyszło.
+Tpk Games Chcesz to zedytuj (zresztą myślę, że to zrobiłeś) ;)
Dobry odcinek! Czekma na kolejne ;D
jak sie Pana dobrze słucha, aż chce się uczyć. Może w robocie mi się przyda :)
Dziękuję, Panie Profesorze, to zaprawdę FRAJDA!!! :D
Swietne jak zawsze, pozdrawiam i czekam na wiecej!
świetnie wytłumaczone, sporo się nauczyłem :)
Kolejny świetny film!
Dzięki za świetny kurs :)
Zajebiste super kanał polecam :)
\o/ Nareszcie nowy odcinek :D
Czekam na 3 z baz danych =)
Super !
Więcej
Nie mogłem się już doczekać nowego wideo!
litery w jednej lini kodu:
var litery = ["A","Ą","B", "C", "Ć","D", "E", "Ę", "F", "G", "H", "I", "J", "K", "L", "Ł", "M", "N","Ń", "O","Ó", "P","Q","R", "S","Ś", "T", "U", "V","W", "X", "Y", "Z", "Ź", "Ż"];
e nie var[] litery = {A,B,C} . Jak w javie :)
var lettering ="AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŻŹ"; jeszcze szybciej :D
@@3paszczak w takim przypadku zmienna lettering to nie tablica tylko ciąg znaków, więc indeksowanie może przynosić niespodziewane efekty, jak powiedziano w filmie
porządny człowiek z Ciebie bracie
Kolejny świetny odcinek, pozdrawiam :)
Świetny odcinek
Bardzo fajne szkolenie - pozdrawiam Panie Mirosławie :).
Można też wystylizować dwie dodatkowe klasy np. literaZielona, literaCzerwona, w css, a w skrypcie wpisać tak: document.getElementById(trafiona).setAttribute("class", "literaZielona"); co zmieni nam klasę.
Pierogi i bigos zawsze na propsach :D
Świetne, super :)
Jak zawsze świetny odcinek :). Już czekam na odcinek z PHP.
Witam! Panie Mirosławie, czy planuje pan może jakąś serię poradników do programowania C#?
JEST BO MA KURS C, C+, C++, i wiele więcej
@@swordwastaken nie ma kursu C a tym bardziej C+ bo taki język nie istnieje.
Tydzień oglądania Pana kursów > 4 lata nauki w technikum :P
Akurat 4 lata temu napisałeś ten komentarz. Przypadek?
Nie sądzę :)
A tak swoją drogą to jest zabawne, że w takich kursach jak na tym kanale w kilkanaście dni przyjmujesz dawkę wiedzy, z którą szkoła się guzdra bóg wie ile...
Moja propozycja na wypisanie klawiatury alfabetycznej: var literki = "AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ";
Z tego stringa można później wyciągnąć dowolną literkę, korzystając z literki.charAt();
Może taki wybieg dydaktyczny.
Ja to zrobiłem tak:
const litery = "AĄBCĆDEĘFGHIJKLŁMNŃOÓPQRSŚTUVWXYZŹŻ".split("");
Funkcja split jest bardzo przydatna - przy podaniu pustego łańcucha tworzy od razu odpowiednią tablicę z liter. Do innych zastosowań jako argumentu można podać też np. spacji (.split(" ")) - wtedy podzieli nam string na poszczególne słowa. Użyłem ponadto stałej (const), bo przecież ta tablica służy tylko do odczytu.
Łapka w góre dla Pana. Super robota :)
Już sie nie moge doczekać jak zaczne sie uczyć javascript po tym jak naucze sie html i css do perfekcji😁😁😁
kiedy zacząłem oglądać kurs HTML i hosting strony dałem ci suba
Super kurs!!! :)))
56:50 byłbym bardzo wdzięczny za rozjaśnienie co tu się stało!
1) Dlaczego skoro element określa "lit" +i to w kodzie do elementu dodajemy jeszcze literę[i]? Czy var element = "lit" +i; określa z czego składa się element, czy może var element zawiera w sobie te informacje?
2) Dlaczego po id diva, w cudzysłowie wpisujemy jeszcze apostrofy? Rozumiem to w taki sposób, że '+element+' zmieni się potem w lit+i więc to będzie id diva i po tej zmianie efekt będzie zamknięty w cudzysłowie.
3) Dlaczego w id diva, element jest z obu stron zamknięty plusami?
Dzięki za pomoc :)
Nie wiem czy te pytania są jeszcze aktualne, ale jeśli tak to:
1. Zmienna "element" została utworzona aby przypisać wygenerowanym divom z literami ich "id" (lit0, lit1, lit2 itd.). Natomiast "litery[i]" w treści diva pobiera zmienną z konkretnej szufladki tej tablicy gdzie "i" to nr tej szufladki. Tak więc "element" tworzy "id" diva a "tablica[i]" pobiera dla niego wartość w postaci litery.
2. Tak.
3. Dlatego, że element jest zmienną, którą musimy dokleić (dokonać konkatenacji) do reszty łańcucha (stringa) tworzonego diva właśnie za pomocą znaku "+". Tak samo jak doklejamy dostęp do tablicy "litery" za pomocą "+litery[i]+" w treści diva.
zastanawiam sie czy nie prosciej by bylo uzyc dla tablicy litery czegos prostszego jak
var litery = ["A", .... , "X", "Y", "Z"] zamiast 35 linii ?
super robota !
jesteś szef!!!!
toen projekt to dopiero zaawansowany :D trzeba sporo pogłówkować
super
Witam, czy będzie Pan kontynuował jeszcze serie z programowania w języku C++? Pozdrawiam.
+dominikstepien2000 A co, ciągle czekasz na kolejny odcinek? Zakup sobie symfonię i się z tego ucz.
+dominikstepien2000 Co do serii c++ to pan MZ nie zakończył tej serii. Na pewno kontynuacja tej serii nie jest już priorytetem lecz jednocześnie nie została wyrzucona z serii.
Shirobachi kun Dzięki za info. Pozdrawiam
+dominikstepien2000 Dużo już było wytłumaczone, dla mnie sama podstawa jest wystarczająca, aby "wystartować".
Co racja to racja. Pamiętajcie więcej się nauczycie robiąc własny projekt niż oglądając kurs .. :)
Super !
Super kurs :)
W końcu programowanie :) czas na kolejny php :)
47:27 Nie można było stworzyć zmiennej var litery = "ABCDE...."; a następnie dostawać się do niej po przez litery.charAt(0-34)?
Dziękuję bardzo za odpowiedź. Jakoś tak zostałem nauczony, że jak widzę coś kilka razy napisane i że trzeba było się tak przy tym jeszcze natrudzić to pomyślałem czy nie można tego zrobić w inny sposób. Takie trochę zboczenie już zawodowe. Pozdrawiam!
+MCPlayG W tablicy ASCII znaki latin extended (polskie ogonki) będą miały inne numery. Takie coś zadziała, ale tylko dla liter bez polskich znaków.
+Mirosław Zelent Mnie cieszy fakt, że nauka nie idzie w las czego dowodem podczas oglądania jest nagłe wykrycie niedogodności oparte na zdobytej dotychczas wiedzy dzięki czemu w w głowie rodzi się alternatywa i nagłe podniecenie odkryciem prostszego rozwiązania.
Witam. Jestem wielkim fanem kanału, fajnie że szybko to się tak rozwinęło, widzów przybywa. Wszystko super. Ale z drugiej strony nie uczył bym młodych złych nawyków, takich jak innerHTML czy onClick w htmlu. I od samego początku pisać już po angielsku żeby wyuczyć sobie ten nawyk. Mam nadzieję że na wszystko przyjdzie z czasem :) Pozdrawiam serdecznie, nie jestem hejterem. Obejrzałem dużo filmików, dobra robota, ale nasunęła mi się właśnie taka myśl.
veranoo A czego lepiej używać zamiast innerHTML i onClick?
textContent, appendChild, addEventListener createElement np
Masz rację, ale polecam zdecydowanie uczyć się poprawnie pisać kod, myśleć jak piszemy kod. Jak on działa, uczyć się od kogoś bardziej doświadczonego. Bo nabranie złych nawyków jest bardzo proste.
Super. zawsze czekam z niecierpliwością na kolejne odcinki kursów. Nie myślał Pan o ruszeniu w Polskę i prowadzeniu kursów stacjonarnych? Byłby Pan bogaty ;). Pozdrawiam
Przeskoczyłem z php na js mając nadzieję , że będzie trochę łatwiej..ale się pomyliłem :D
1:37:59 napis.toUpperCase(); powinno być chyba zamiana na duże litery, a napis.toLowerCase(); zamiana na małe litery.