Javascript spread operator.
21 grudnia, 2022W standardzie ES6 wprowadzono wiele zmian i unowocześnień do języka Javascript. Jednym z najważniejszych z nich jest tzw. spread operator....
Czytaj dalejW dzisiejszym wpisie chciałem poruszyć temat metod klasy Date. Dzięki obiektom tej klasy możemy pobierać różne informacje dotyczące czasu i daty. Dzięki temu możemy implementować różne funkcjonalności od prostego zegara poczynająca na zmianie wyglądu strony zależności od pory dnia kończąc.
Na początek musimy zainicjować obiekt. Tworzymy go używając słowa kluczowego new. Dla przypomnienia całej struktury, zamieszczam poniżej kod.
const date = new Date();
Na tak stworzonym obiekcie, możemy wywoływać metody. Jako pierwszy mini-projekt, zrobimy prosty zegar. Na początek tworzymy w HTML’u element blokowy <div id=”zegar”></div>. Teraz rozpoczynamy pisanie skryptu. Najpierw musimy pochwycić naszego div’a. Następnie pobieramy z obiektu date aktualną godzinę, minutę i sekundę. Używamy to tego metod kolejno: getSeconds(), getMinutes(), getHours(). Na końcu ustawmy wartość innerHTML złapanego div’a. Cały kod wygląda tak:
<div id="zegar"></div> <script> const pobierzCzas = () => { let godzina = data.getHours(); let minuta = data.getMinutes(); let sekunda = data.getSeconds(); zegar.innerHTML = godzina + ":" + minuta + ":" + sekunda; } const zegar = document.getElementById('zegar'); const data = new Date(); pobierzCzas(); </script>
Niestety uzyskaliśmy efekt taki, że czas jest pobrany tylko raz, więc się nie zmienia. Aby to naprawić, użyję metody setInterval(), która sprawia, że dana operacja będzie wykonywana w określonym odstępnie czasu. Jako argumenty przyjmuje ona funkcję którą ma wykonać, oraz interwał czasowy, czyli czas po jakim ma powtórzyć wykonanie czynności.
<div id="zegar"></div> <script> const pobierzCzas = () => { let godzina = data.getHours(); let minuta = data.getMinutes(); let sekunda = data.getSeconds(); zegar.innerHTML = godzina + ":" + minuta + ":" + sekunda; } const zegar = document.getElementById('zegar'); const data = new Date(); const interval = setInterval(pobierzCzas,1000); </script>
Niestety dalej czas się nie zmienia. Jest to związane z tym, że stworzony obiekt klasy Date() przechowuje w sobie aktualny czas. W związku z tym, wystarczy, że przeniesiemy jego deklaracje do funkcji pobierzCzas().
<div id="zegar"></div> <script> const pobierzCzas = () => { const data = new Date(); let godzina = data.getHours(); let minuta = data.getMinutes(); let sekunda = data.getSeconds(); zegar.innerHTML = godzina + ":" + minuta + ":" + sekunda; } const zegar = document.getElementById('zegar'); const interval = setInterval(pobierzCzas,1000); </script>
Zegar działa jak należy. Na koniec chciałem omówić jeszcze kilka metod związanych z aktualna datą. Poniżej umieszczam kod który pobierze aktualny dzień, miesiąc i rok.
<div id="kalendarz"></div> <script> const kalendarz = document.getElementById('kalendarz'); const data = new Date(); let dzien = data.getDate(); //getDay() zwraza dzięń tygodnia a getDate() zwraca dzień miesiąca. let miesiac = data.getMonth() + 1; //numery miesięcy są liczone w JS'ie on zera, a nie od jedynki. let rok = data.getFullYear(); kalendarz.innerHTML = dzien + "-" + miesiac + "-" + rok; pobierzCzas(); </script>
W standardzie ES6 wprowadzono wiele zmian i unowocześnień do języka Javascript. Jednym z najważniejszych z nich jest tzw. spread operator....
Czytaj dalejW standardzie ES6 wprowadzono do języka Javascript nowe typy danych. Jednym z nich jest Set. Zasadniczo pełni on podobną funkcję...
Czytaj dalejJednym z najpowszechniejszych pytań rekrutacyjnych dla programisty Javascript jest wyjaśnienie, czym jest tzw. hoisting. Zagadnienie to jest ciekawie, głównie dlatego,...
Czytaj dalej