Kurs JavaScript odc. 2: Mechanika działania skryptów: uchwyty, funkcje, zdarzenia

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.

Jeśli masz ochotę wesprzeć to co robimy, to możesz:

Pora najwyższa na drugi odcinek kursu JavaScript. W odcinku tym uporządkujemy naszą wiedzę na temat mechaniki działania czystego kodu js. Dziś uzyskamy fundamentalne zrozumienie logiki, którą podszyty jest każdy skrypt js. To jest bardzo cenna wiedza; taka, która pozwoli nam już po tym odcinku dużo swobodniej analizować nawet złożone skrypty - takie, które może do tej pory podpinaliśmy jako gotowiec do swojej strony, nie będąc jednak w stanie zrozumieć jak działają.

💾 POBIERZ PLIKI Z ODCINKA:

📑 CODE REVIEW NA FORUM:

🎵 MUZYKA:

Muzyka z podsumowania:

#pasjainformatyki #programowanie #kursjavascript

[pieczenieg]

W pierwszym zadaniu, w momencie sprawdzania czy liczba jest równa zeru, wystarczy zero ubrać w cudzysłów, wtedy napis zero wyświetli się tylko po wpisaniu wartości "0", a puste pole zastosuje się do ostatniej instrukcji else, czyli poprosi nas o podanie liczby :) Dzieje się tak dlatego, ponieważ wartość zerowa oraz brak wartości odbierane są w ten sam sposób, w końcu zero to brak czegokolwiek, ale jeśli przy porównaniu ubierzemy nasze zero w cudzysłów, zostanie ono potraktowane jako łańcuch tekstu i tylko identyczny łańcuch tekstu wywoła instrukcję dla tego zdarzenia :) Obrazując: "0" == "0", lecz "0"=/=" ", a 0=="0" oraz 0==" ". Niby nie jest to jakieś super trudne, ale poczułem się jak geniusz, że rozkminiłem to w tak banalny sposób, więc poczułem potrzebę podzielenia się. Mam nadzieję, że ktoś kto tego nie wyłapał, teraz zrozumie co i jak :D

[highlighted_]

W pierwszym zadaniu, najłatwiejszym sposobem jest zmiana <input type="text"> na <input type="number">. Nie będzie się wtedy dało wpisać czegokolwiek, co nie jest liczbą, a przy okazji nie będziemy musieli dokładać kolejnej linijki kodu.

[sebek]

Człowieku, powiem Ci jedno.
Bardzo dobra robota !

[Wojtarx]

Jestem wręcz zszokowany jak wielką wiedze pan posiada, i jestem bardzo wdzięczny, że poświeca pan swój czas tworzenie takich odcinków, jest pan moim mistrzem. Serdecznie dziękuje!

[ocean]

18:32 wystarczy zamienić typ input na liczbę po czym otrzymamy: <input type="number" id="pole" /> gdzie przeglądarka blokuje pisanie liter i znaków oraz innych wartości które nie są złożone z cyfr :)

[SPRGD]

Zadanie #3 - Slider wydaje się działać poprawnie po uwzględnieniu w kodzie poniższych poprawek:

var timer1 = 0;
var timer2 = 0;
var timer3 = 0; // utworzenie nowej zmiennej do identyfikacji timera w funkcji ustawslajd()

function ustawslajd(nrslajdu)
{
clearTimeout(timer1);
clearTimeout(timer2);
numer = nrslajdu - 1;
schowaj();
timer3 = setTimeout("zmienslajd()", 500);
// przyporządkowanie zmiennej timer3 do setTimeout()
}

function schowaj()
{
$("#slider").stop();
// zatrzymanie bieżącego efektu slidera przed wywołaniem fadeOut()
$("#slider").fadeOut(500);
}

function zmienslajd()
{
clearTimeout(timer3); // przerwanie odliczania timera 3
numer++; if (numer>5) numer=1;
var plik = "<img src=\"slajdy/slajd" + numer + ".png\" />";
= plik;
$("#slider").fadeIn(500);
timer1 = setTimeout("zmienslajd()", 5000);
timer2 = setTimeout("schowaj()", 4500);
}

[Bartkele]

Spowolniłem film do 0.5 bo nie nadążałem klepać linijek
Polecam sprawdzić jak Pan Mirosław brzmi po 0.5 :D

[liber]

Witam Panie Mirosławie, zainspirował mnie Pan, żeby wkońcu zmierzyć się z min. HTML-em czy też C++. Dziękuje za to co Pan robi i powodzenia ! Wszystkiego dobrego !

[sylwek_a]

Moja propozycja do zadania #1 - sprawdz dlugosc ciagu znakow wpisanego przez uzytkownika. Wpisanie zera zwraca wartosc funkcji length = 1, puste pole zwraca 0:
else if(liczba == 0 && liczba.length != 0)
{
= "zero";
}

[mirosawszul]

Zadanie #1

Przed warunkiem sprawdzającym czy liczba == 0, należy umieścić kolejny warunek: else if (liczba == "")

[wojciechjazwinski]

Dobrze jest wiedzieć, że wrzuca Pan nowe tutoriale. Na razie jestem na etapie C++, ale mam zamiar przebrnąć przez wszystkie kursy. Świetny materiał do nauki.
Dziękuję i pozdrawiam.

[mariuszmaj]

Dziękuję pięknie za film. Zadanie #1 <input type="number" id="pole"/>

[kowalskimateusz]

Wielkie Dzięki Za przystępne wytłumaczenie. Podobało mi się świetne tłumaczenie uchwytu. Oraz cytat "i co jajco". Jest już późno więc jutro przerobie jeszcze raz informacje na spokojnie z tego nagrania. Jeszcze raz dzięki pozdro

[przemekkrawczynski]

Pytanko: W związku z tym, że ten materiał ma dziś już 7 lat to jedna istotna rzecz się zmieniła. Na stronie jQuery w zakładce download nie ma podanych tych linii w tagach <script> do skopiowania. Przepisałem sobie oczywiście z "palca" linię z video, jednak przypuszczam że na dzień dzisiejszy nie jest to rozwiązanie zgodne ze sztuką. Moje pytanie brzmi jak zgodnie ze sztuką dzisisja podpinać jQuery?

[fracekkplay]

Panie Mirosławie, pan jest MEGAAA :D Mam 13 lat, a umiem już pisać strone w oparciu o HTML, CSS i JS :D Dziękuje i oby więcej takich filmów ;D

[AgeDee]

Jedyne czego się dopatrzyłem (jak na razie) w 3 zadaniu to to, że timer wywołujący funkcję "zmienslajd" nie jest przerywany i przez to klikając na kilka slajdów szybko, mozna zrobić dyskotekę :D

[piotrebek]

Świetnie Pan prowadzi ten wykład. Nie jąka się Pan jak lektorzy innych kursów JS dostępnych na Youtube. Widać, że świetnie się Pan orientuje w tematyce. Kurs godny polecenia! Proszę o więcej!

[KriS-vebm]

Jest Pan Wielki dziękuję, że Pan dzieli się tą wartościową wiedzą...🌟👍🍀✅

[nickthegeek]

Zadanie #1
Wystarczy do warunku liczba==0 dopisać po "&&" (bez cudzysłowów, koniunkcja warunków znana np. z c++) liczba.length>0.
Funkcja length zwraca liczbę znaków zmiennej.

[andrzejbrewiarz]

O jacie, ależ ten filmik jest świetny! Pozdrawiam 😊