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 dalejWiemy, że javascript pozwala nam uchwycić elementy kodu HTML m.in za pomocą własności id. Nasuwa więc się pytanie, skąd JS w ogóle wie co znajduje się na stronie internetowej? Na to pytanie odpowie zrozumienie koncepcji DOM. Ten skrót oznacza Document-Object-Model. Jest to reprezentacja naszej strony internetowej w postaci obiektowego drzewa logicznego. Brzmi skomplikowanie. Najprościej rzecz ujmując, cały kod HTML jest przechowywany w formie pewnej struktury danych jako obiekty. Javascript potrafi wyciągną z nich potrzebne informacje, a następnie je przetworzyć.
Poznaliśmy już podstawowy uchwyt jakim jest document.getElementById(), za jego pomocą pobieraliśmy jeden konkretny obiekt z DOM’u. Możemy jednak użyć innych uchwytów. Poniżej zamieszczam kilka najbardziej popularnych i użytecznych metod.
document.getElementsByClassName('nazwaKlasy'); //Zwraca tablicę obiektów które maja przypisaną daną klasę document.activeElement ; //Aktywnie wybrany element document.getElementsByName("nazwa"); //Zwraca element który posiada atrybut name document.getElementsByTagName("nazwa tagu HTML") //Zwraca listę elementów document.querySelector("dowolny selektor"); //Zwraca pierwszy element który spełnia dany selektor document.querySelectorAll("dowolny selektor"); //Zwraca wszystkie elementy, które spełniają dany selektor
Kolejną rzeczą, jaką możemy zmodyfikować w DOM, jest dodanie tzw. słuchaczy. Są to funkcje reagujące na dane zdarzenie. Najczęściej nasłuchuje się trzech z nich – onClick, onLoad oraz onChange. Ogółnie dodanie słuchacza polega na użyciu metody addEventListener(). Przyjmuje ona dwa argumenty. Pierwszym z nich jest nazwa zdarzenia, a drugim jest funkcję jaka ma się wykonać. Nazwy zdarzeń są dosyć intuicyjne. Oto kilka z nich:
Natomiast sama implementacja wygląda tak:
<button > Kliknij Mnie</button> <script> document.querySelector('button').addEventListener('click', ()=>alert("kliknięto mnie")); </script>
Kolejną rzeczą jaką możemy zmienić w DOM’ie jest dopisanie czegoś do danego pola. Np.
<script> document.write(`<input type="text" value="Wygenerowany"/>`); </script>
Edycja DOM jest bardzo złożonym tematem, dlatego zachęcam do doczytania o interesujących nas zagadnienia.
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