Javascript 19.11

Javascript 19.11
Photo by Juanjo Jaramillo / Unsplash

KLASY
Nazwa klasy jest zapisywana metodą PascalCase. Konstruktor jest zapisywany za pomocą metody constructor, przyjmuje on parametry do realizacji. Używa this. Metody klasy są używane bez słowa function. Właściwości instancji tworzymy w konstruktorze. Klasy nie są hoistowane. Można dodać wartości domyślne w konstruktorze. Właściwości obiektów klasy - $(obiekt.metoda())

Metoda statyczna - należy do klasy a nie do instancji, nie ma dostępu do this, dodaje się static przed nazwą metody

extends po nazwie klasy wskazuje na Klasę bazową,
najpierw super(dane) do przekazania parametrów do konstruktora klasy bazowej, następnie poniżej można dodac właściwości dla nowej klasy potomnej

Enkapsulacja - tworzenie prywatnych pól w klasie, które są niedostępne spoza klasy. Dodaje się # przed metodą lub właściwością. Można ją wywołać poprzez publiczne klasy. Właściwości klas, które są prywatne, nie mogą być zmieniane z zewnątrz. Da się jedynie poprzez publiczne metody. Metody, właściwości prywatne NIE SĄ pokazywane w funkcji zbadaj stronę.

JSON wywodzi się od javascripta. JSON.stringify(obiekt) zamienia obiekt JavaScript w tekstową reprezentację JSON. Date się nie serializuje, metody w obiektach, elementy undefined, symbole oraz referencje cykliczne.

Replacer - metoda, która polega na wpisywaniu danych kluczy na listę do konwersji do JSON(drugi argument w stringify) lub zamienia niepotrzebne elementy na undefined. Reviver robi na odwrót.
Jeśli wartość jest undefined to usuwa właściwość. Przy referencjach cyklicznych sobie nie poradzi (kiedy obiekt wskazuje na samego siebie).

WeakSet przechowuje referencje do obiektów.
JSON Schema - opisuje strukturę i reguły dla obiektu.

Nie można ufać plikom JSON z zewnątrz. Trzeba walidować pliki, ponieważ ktoś może zmanipulować dane w nich. Waliduje się na przykład za pomocą Regexa i metody test(). Sprawdzać pod kątem wymogów biznesowych, czy są bezpieczne, typy, usuwać nullish coalessing, optional chaining i nie wierzyć danym, które pochodzą z niezaufanego źródła.

Drzewo DOM - Document Object Model jest to obiekt i API, przechowuje strukturę html w pamięci, posiada informacje o elementach, API. Jest tworzony na podstawie HTMLA. Może być zmodyfikowany, jego strutura może być wyświetlona, to nie jest to samo co html. Źródłowy element nie jest modyfikowany, tylko ten w pamięci.

Na szczycie całego drzewa dom znajduje się węzeł Dokument. Do reszty można się odwoływać poprzez selektory. Ten dokument ma zazwyczaj jedno dziecko, którym jest html. A następnie html ma dwójkę dzieci - head i body. Każdy węzeł może mieć wiele dzieci, ale jednego rodzica (oprócz dokumentu, ponieważ nie ma rodzica).
Node.ELEMENT_NODE - sprawdza ile jest takich typów węzłów w drzewie. Pomija tekst i komentarze. Da się przechodzić po "rodzinie" poprzez metody.

$0 w konsoli oznacza ostatnio zaznaczony element.

Wybór elementów html poprzez skrypt:

  1. document.getElementById(id)
  2. document.getElementsByClassName()
  3. document.getElementsByTagName()
  4. document.getElementsByTagName('*') - wybiera wszystkie elementy w drzewie, nie jest to dobra praktyka.
    Nie zwraca elementów w tablicy. Trzeba przekonwertować na przykład za pomocą Array.from() lub za pomocą spread [...reszta]

Selektory bazujące na CSSie - używa się takiej samej składni jak w cssie:

  1. querySelector zwraca pierwszy element lub zwróci null.
  2. querySelectorAll jest statyczny, nie aktualizuje listy. Zwraca listę elementów.