Podstawy JavaScript

Podstawy JavaScript

JavaScript jest ważnym obiektowym językiem skryptowym (wykorzystywanym m.in. w przeglądarkach – wszystkie nowoczesne przeglądarki posiadają interpreter JS), który w standardowej bibliotece zawiera podstawowe elementy języka programowania (operatory, struktury, instrukcje) oraz obiekty (m.in. Array, Date czy Math) – obiektowość w JavaScript bazuje na prototypach i umożliwia korzystanie z  istniejących metod i atrybutów.

Biblioteka standardowa może być rozszerzona m.in. o mechanizmy kontroli przeglądarki oraz modelu DOM lub mechanizmy komunikacji z bazą danych i manipulacji plikami na serwerze.

Wyrażenia

Język JavaScript jest językiem, w którym rozróżnia się wielkość liter. Oznacza to, że słowa kluczowe, zmienne, nazwy funkcji i inne identyfikatory muszą być spójne pod względem wielkości liter. Instrukcje w tym języku są nazywane wyrażeniami i rozdziela się je średnikiem (nie trzeba stosować średnika, gdy instrukcje są umieszczone w osobnych wierszach, lecz jest to ważny znak, ponieważ poprawia czytelność kodu). Spacje, tabulatury, czy też znaki nowej linii stanowią grupę białych znaków.

Początek dokumentu

Komentarze

W JavaScript wykorzystuje się dwa sposoby tworzenia komentarzy:

  • komentarz linowy – tekst znajdujący się od znaków // do końca wiersza jest traktowany jako komentarz.
  • komentarz blokowy – tekst znajdujący się pomiędzy znakami (może obejmować wiele linii) /*  oraz */.

Początek dokumentu

Deklaracje zmiennych i stałych

W języku JavaScript występują trzy typy deklaracji zmiennej:

  • var – deklaruje zmienną lokalną lub globalną, opcjonalnie inicjalizuje się ją podaną wartością
  • let – deklaruje zmienną lokalną (ograniczoną do bloku), opcjonalnie inicjalizuje się ją podaną wartością
  • const – deklaruje stałą, służącą tylko do odczytu; działa podobnie jak let z tą różnicą, że stałą należy zainicjować w miejscu jej zadeklarowania

Nie ma związku pomiędzy typem deklaracją zmiennej, który wiąże się z zakresem działania zmiennej, a jej przechowywaną wartością. Zmienna może zawierać wartość dowolnego typu (liczba, tekst, wartość boolowska). Zmienną w JS można zadeklarować na trzy sposoby:

  • wykorzystując typ var –  np. var x = 12; w ten sposób tworzy się zarówno zmienne lokalne jak i globalne; jeżeli nie ma przypisanej wartości, to automatycznie przypisuje wartość undefined
  • wykorzystując typ let – np. let x = 12; w ten sposób tworzy się zmienną lokalną; jeżeli nie ma przypisanej wartości, to automatycznie przypisuje wartość undefined
  • bez typu – np. x = 12; w ten sposób tworzy się zmienną globalną

Można również tworzyć zmienne tylko do odczytu, zwane zmiennymi stałymi poprzez wykorzystywanie słowa kluczowego const (zasięg lokalny). Taka zmienna nie może zostać ponownie zadeklarowana lub przyjąć nowej wartości, kiedy skrypt działa. Można to zrobić jedynie przy jej inicjalizacji.

Początek dokumentu

Typy danych

Standard ECMAScript definiuje siedem typów danych:

  • sześć typów prostych (prymitywnych):
    • boolean – wartość boolowska, która przechowuje wartość true lub false
    • null – oznacza wartość zerową
    • undefined – wartość jest nieokreślona
    • number – liczba (jest reprezentowana jako 64-bitowa liczba zmiennoprzecinkowa); nie ma osobnego typu dla liczb całkowitych, dlatego 1 oraz 1.0 mają tę samą wartość – nie pojawiają się problemy przepełnienia krótkich typów całkowitych; wszystkie wartości większe od 1,79769313486231570e+308 są określane jako Infinity (nieskończoność), a mniejsze od -1,79769313486231570e+308 jako -Infinity
    • string – literał znakowy (napis) może zawierać zero lub więcej znaków (nie ma osobnego typu dla pojedynczego znaku);  wszystkie znaki w tym języku mają 16 bitów, co pozwala na zapis znaków, które nie mogłyby występować w literale (m.in. znaki kontrolne takie jak: znak nowej linii, znak powrotu karetki, tabulator – co poprzedzamy ukośnikiem)
    • symbol – został wprowadzony w ES6, aby można było stosować nietekstowe nazwy właściwości; wartości są niepowtarzalne i niezmienne
  • jeden typ złożony:
    • obiekt – do którego można również zaliczyć podtypy: funkcje i tablice

JavaScript jest językiem dynamicznie typowanym. A to oznacza, że typu danych zmiennej nie deklarujemy, ponieważ jest on automatycznie konwertowany do pożądanych wartości w czasie wykonywania programu.

Z typem danych wiąże się pojęcie literał, którego używa się w celu przedstawiania wartości w kodzie programu i który może przyjmować, następujące postacie:

  • literał znakowy – wartość zapisana w:
    • pojedynczy cudzysłów
    • podwójny cudzysłów
    • pary znaków określanych jako backticks (grawis) – ten ostatni sposób zapisu jest elastyczny, gdyż pozwala na umieszczenie w literale znakowym dowolnego wyrażenia – wykorzystuje się do tego celu nawiasy klamrowe poprzedzone znakiem dolara ${}; wszystko to, co znajduje się między znakami ${}, jest interpretowane jako wyrażenie JavaScript, a wszystko poza nawiasami klamrowymi jako zwykły tekst
  • literał całkowity – liczb całkowita może być zapisana w
    • systemie dziesiętnym
    • szesnastkowym
    • ósemkowym
    • dwójowym
  • literał zmiennoprzecinkowy – to liczba zmiennoprzecinkowa, np. 3.1415, -3.1E12, .1e12, oraz 2E-12
  • literał boolowski – wartości true oraz false
  • literał tablicowy – to lista wyrażeń, w którym każde wyrażenie stanowi element tablicy i jest  zamknięty w nawiasy kwadratowe
  • literał obiektowy – wartość zamknięta w nawiasach {}

W przypadku przechowywania liczby pod postacią literału znakowego wskazane jest posłużenie się jawnymi metodami konwersji do postaci literału całkowitego lub literału zmiennoprzecinkowego:

  • parseInt() – zwraca liczbę całkowitą
  • parseFloat() – zwraca liczbę zmiennoprzecinkową

Początek dokumentu

Instrukcja blokowa

Najprostszą instrukcją w JS jest instrukcja blokowa. Jej zadaniem jest grupowanie wyrażeń. Instrukcja ta zamknięta jest parą nawiasów klamrowych. Od ECMAScript 6, za pomocą let oraz const tworzy się zmienne o zasięgu blokowym.

Początek dokumentu

Instrukcja warunkowa

Instrukcja warunkowa stanowi konstrukcję, która pozwala na wykonanie określonego kodu, gdy ocena warunku zwraca wartość true.

Podczas tworzenia instrukcji warunkowej wykorzystywane są następujące operatory porównania:

==    równy z – operator porównuje dwie wartości (liczby, ciągi tekstowe, wartości boolowskie), sprawdzając, czy są takie same
===    identyczny z – operator porównuje dwie wartości i sprawdza, czy zarówno wartość oraz typ danych są takie same (operator preferowany)
!=    różny – operator porównuje dwie wartości (liczby, ciągi tekstowe, wartości boolowskie), sprawdzając, czy są różne
!==    nieidentyczny z – operator porównuje dwie wartości i sprawdza, czy zarówno wartość, jak i typ danych nie są takie same
>    większy niż – operator sprawdza, czy liczba po lewej stronie jest większa niż liczba po prawej stronie
>=    większy niż lub równy – operator sprawdza, czy liczba po lewej stronie jest większa niż lub równa liczbie po prawej stronie
<  
  mniejszy niż – operator sprawdza, czy liczba po lewej stronie jest mniejsza niż liczba po prawej stronie
<=  
  mniejszy niż lub równy – operator sprawdza, czy liczba po lewej stronie jest mniejsza niż lub równa liczbie po prawej stronie

JavaScript potrafi automatycznie przeprowadzić konwersję typów danych, co nosi nazwę narzucania typu. Np. w wyrażeniu (‘1’ > 0) ciąg tekstowy ’1’ zostanie skonwertowany na liczbę 1. Wynikiem wyrażenia będzie wartość true. Narzucanie typu danych może doprowadzić do powstania nieoczekiwanych wartości. Dlatego podczas sprawdzania, czy dwie wartości są równe, preferowanym rozwiązaniem będzie użycie ścisłych operatorów równości === i !== zamiast == i !=.

Poniże wartości użyte w instrukcji if zostają przekształcone na wartość false (wszystkie inne wartości – również obiekty – zostają przekształcone do wartości true):

  • false
  • undefined
  • null
  • 0
  • NaN
  • pusty cudzysłów

Za pomocą konstrukcji else if można utworzyć złożony blok testujący:

Początek dokumentu

Instrukcja switch

Instrukcja switch przyjmuje dowolne wyrażenie – najczęściej jest to zmienna. Na podstawie jej wartości następuje dopasowanie do konkretnego przypadku (case). Jeśli wartość zmiennej pasuje do któregoś z przypadków, wtedy wykonywany jest blok dla niego przewidziany. W sytuacji gdy wartość nie pasuje do żadnego przypadku, wtedy wywoływany jest kod z instrukcją default.

Początek dokumentu

Pętla while

Składnia instrukcji while przedstawia się następująco:

JS nim wykona instrukcję, wylicza wyrażenie. Jeśli wartość jest fałszywa, to pomija instrukcję zawartą w ciele pętli i przechodzi do następnej instrukcji programu. W przeciwnym przypadku wykonuje instrukcję i wraca na początek pętli, aby ponownie wyliczyć wyrażenie – interpreter powtarza wykonywanie instrukcji, dopóki wyrażenie jest prawdziwe.

Początek dokumentu

Pętla do-while

Pętla jest podobna do pętli while. Różnica polega na tym, że wyrażenie jest sprawdzane na końcu tej pętli:

 

Początek dokumentu

Pętla for

W większości przypadków pętla for zawiera zmienną licznikową, która jest inicjowana tylko raz – na początku. Przed wykonaniem kolejnej iteracji wartość zmiennej jest sprawdzana, a na końcu – przed kolejnym sprawdzeniem – zazwyczaj inkrementowana.

Składnia for wygląda następująco:

Przykład użycia:

Początek dokumentu

Pętla for-of

W wersji ES6 języka wprowadzono pętle for-of, którą wykorzystuje się na obiektach iterowalnych (domyślnie obiekty nie są iterowalne). Takimi obiektami są: tablice (do pracy z tablicami zaleca się stosowanie pętli for-of), ciągi znaków, zbiory i mapy. Przykład użycia:

Początek dokumentu

Pętla for-in

Pętla for-in działa na obiektach iterowalnych oraz nieiterowalnych, iterując nazwy właściwości obiektu:

Początek dokumentu

Wprowadzenie do tablic

Tablica to fundamentalny typ danych w języku JS (specjalna odmiana obiektu), który charakteryzuje się następującymi właściwościami:

  • jest umieszczoną w nawiasach kwadratowych listą wartości oddzielonych przecinkami
  • elementy tablicy mogą być różnych typów – nawet obiektami i innymi tablicami
  • każdy element tablicy jest oznaczony numerem (indeksem)
  • pierwszy element tablicy ma indeks 0, a ostatni 4 294 967 295 (232 – 2) – indeksy są zapisywane na 32 bitach
  • do poszczególnych elementów tablicy można odwoływać się za pomocą indeksu umieszczonego w nawiasach kwadratowych
  • tablica nie wymaga deklaracji ustalonej wielkości (tablice są w JS dynamiczne, tj. można je powiększać i pomniejszać wg potrzeb)
  • każda tablica posiada właściwość length, która zwraca informację o długości tablicy
  • tablice dziedziczą właściwości po prototypie Array.prototype, który dysponuje zestawem metod obsługujących jej elementy

Początek dokumentu

Tworzenie tablic

Tablice tworzy się w JS, wykorzystując do tego celu:

  • literał tablicowy – jest to najprostszy sposób tworzenia tablic, który polega na  umieszczeniu wewnątrz nawiasów kwadratowych listy elementów oddzielonych przecinkami, np.:
    • let tab = [] // tablica bez elementów
    • let liczby = [2,4,3,6] // tablica złożona z czterech elementów
    • let zbior = [1.5, ‘Adam’, false] // tablica złożona z trzech elementów różnych typów
  • operator (…) oraz literał obiektu– od wersji ES6 i nowszych dostępny jest operator spread (…), który służy do umieszczania w literale tablicowym elementów innej tablicy, np.:
    • let tab_a = [1,2,3]; let tab_b = [0,…tab_a,4,5] – wielokropek rozciąga tablicę i umieszcza jej elementy w nowej tablicy
    • let tab_a = [1,2,3]; let kopia = […tab_a] – za pomocą operatora rozciągania wygodnie tworzy się kopię tablicy
  • konstruktor Array – tworzenie tablicy za pomocą konstruktora można wywołać na trzy sposoby:
    • bez argumentów – let tab = new Array() // tworzy pustą tablicę
    • z jednym argumentem opisującym długość tablicy – let tab = new Array(10)
    • jawnie umieszczając w argumentach dwa lub więcej elementów tablicy (lub jeden element nieliczbowy) – let tab = new Array(1,2,3)

Początek dokumentu

Dodawanie, usuwanie i odczytywanie

Do odwołania się do elementów tablicy służy nawias kwadratowy poprzedzony nazwą, np. tab[ ] – wewnątrz nawiasów należy umieścić liczbę całkowitą. Taka składnia wykorzystywana jest do odczytywania oraz zapisywania elementów.

let tab = [‘baza’] Na początku tablica zawiera jeden element
let dane = tab[0] Odczytanie elementu o indeksie 0
tab[1] = 3.14 Zapisanie elementu o indeksie 1
let x = 2; tab[x] = ‘kontakt’ Zapisanie elementu o indeksie 2

Tablice automatycznie aktualizują właściwość length, jeżeli indeksy są nieujemnymi liczbami całkowitymi – należy pamiętać, że tablica jest specjalnym rodzajem obiektu, stąd wszystkie indeksy to nazwy właściwości, ale indeksami tablicy są tylko nieujemne liczby całkowite.

Metody dodające i usuwające elementy:

unshift() wstawia wartość na początek tablicy; let tab = [1,2]; tab.unshift(0); // tab == [0,1,2]
shift() usuwa i zwraca pierwszy element tablicy; let tab = [1,2]; tab.shift(); // tab == [2]; zwraca 1
push() wstawia wartość na koniec tablicy; let tab = [1,2]; tab.push(3); // tab == [1,2,3]
pop() usuwa i zwraca ostatni element tablicy; let tab = [1,2,3]; tab.pop(); // tab == [1,2]; zwraca 1

Początek dokumentu

Metody tablicowe

Do pracy z tablicami bardzo przydatne są metody klasy Array. Niektóre z nich zwracają nową tablicę, a inne zwracają zmodyfikowany oryginał.

  • metody iterujące – każda z metod przyjmuje jako pierwszy argument funkcję; większość metod ma też drugi argument (opcjonalny):
    • metoda forEach() – metoda iteruje tablicę i wywołuje dla każdego jej elementu podaną funkcję z trzema argumentami: wartością elementu, jego indeksem i samą tablicą (jeśli istotna jest tylko wartość elementu, może zawierać tylko jeden argument)

    • metoda map() – zwraca nową tablicę; metoda jako argument przyjmuje funkcję, która jest wywoływana dla każdego elementu mapowanej tablicy

    • metoda filter() – zwraca nową tablicę; metoda jako argument przyjmuje funkcję, której zadaniem jest przetestowanie każdego elementu tablicy. Pomyślny wynik testu wiąże się z umieszczeniem testowanego elementu w nowej tablicy

    • metody find() i findIndex() – obie metody są podobne do metody filter() (zwracają true lub false), jednak find() i findIndex() przerywają iterowanie przy pierwszym znalezionym elemencie:
      • find() – zwraca wartość elementu
      • findIndex() – zwraca indeks elementu

    • metoda every() – zwraca wynik true, jeżeli funkcja zwróci wartość true dla każdego elementu tablicy

    • metoda some() – zwraca wartość true, jeżeli przynajmniej dla jednego elementu funkcja zwróci wartość true

    • metoda reduce() – metoda przetwarza elementy tablicy za pomocą zadanej funkcji i zwracają pojedyncze wartości; reduce() ma dwa argumenty: pierwszy to funkcja wykonująca operację redukcji – jej zadaniem jest połączenie dwóch wartości w jedną i zwrócenie wyniku, a drugi (opcjonalny) to wartość inicjującą

  • metoda łączenia tablic – do łączenia tablic wykorzystuje się metodę concat(); metoda tworzy i zwraca tablicę składającą się z elementów tablicy, do której sama należy oraz elementów podanych w argumencie

Początek dokumentu

  • metody operujące na podtablicach – JavaScript posiada metody wyodrębniające, zastępujące, wypełniające i kopiujące części tablicy
    • metoda slice() – metoda zwraca wycinek tablicy; za pomocą dwóch argumentów określa się początek i koniec wycinka (zwracana jest tablica, która zawiera elementy począwszy od pierwszego argumentu do drugiego argumentu, ale z jego wyłączeniem) – jeśli podany jest tylko jeden argument, to zwracana jest tablica od zadanego miejsca do końca (w przypadku podania argumentu jako liczbę ujemną, to pozycja liczona jest od końca tablicy)

    • metoda splice() – metoda przeznaczona jest do wstawiania i usuwania elementów tablicy (modyfikuje oryginalną tablicę); pierwszy argument określa indeks, od którego będą wstawiane lub usuwanie elementy z tablicy; drugi argument określa liczbę elementów przeznaczonych do usunięcia (metoda zwraca tablicę złożoną z usuniętych elementów); za drugim argumentem można wpisać dowolną liczbę innych argumentów, które zostaną umieszczone w tablicy

Początek dokumentu

  • metody przeszukujące i sortujące tablice
    • metody indexOf i lastIndexOf – metody wyszukują  pierwszy element o zadanej wartości i jeśli go znajdzie, to zwraca jego indeks (w przeciwnym razie zwraca -1)

    • metoda sort() – metoda sortuje elementy bezpośrednio w tablicy; jeśli argumenty nie są podane, to metoda sortuje w kolejności alfabetycznej i sprawdza się w tej postaci do sortowania słów. Aby posortować ją w sposób inny niż alfabetyczny, należy w argumencie umieścić funkcję porównującą z dwoma argumentami – metoda oczekuje, że funkcja zwróci wartość większą od zera (np. 1), jeśli pierwsza z przekazanych wartości jest większa od drugiej, wartość 0, jeśli obie wartości są równe, oraz wartość mniejszą od zera, jeśli pierwsza z przekazanych wartości jest mniejsza od drugiej (np. -1)

Sortowanie słownikowe – sortowanie imion

Sortowanie słownikowe – sortowanie liczb

Sortowanie liczb w raz z wykorzystaniem funkcji porównującej – sortowanie rosnące

Sortowanie liczb w raz z wykorzystaniem funkcji porównującej – sortowanie malejące

Sortowanie liczb w raz z wykorzystaniem funkcji porównującej – zapis skrócony

Początek dokumentu

Wprowadzenie do funkcji

Funkcja jest blokiem kodu, który można wykonywać dowolną liczbę razy. W JS funkcje są parametryczne (w ich definicjach można umieszczać identyfikatory, które w funkcji pełnią role lokalnych zmiennych). Parametrom w wywołaniu funkcji przypisywane są wartości – wartości te nazywa się argumentami.

Funkcja przypisana właściwości obiektu nosi nazwę metody. Obiekt, którego funkcja jest wywoływana, jest kontekstem i stanowi wartość słowa kluczowego this. Funkcja inicjująca nowy obiekt nazywa się konstruktorem.

W JavaScript funkcje są obiektami, na których można wykonywać różne operacje możemy m.in.: przypisywać je zmiennym, umieszczać w argumentach innych funkcji, przypisywać wartości ich właściwościom, czy też wywoływać ich metody.

Początek dokumentu

Definiowanie funkcji

Deklaracja funkcji składa się ze słowa kluczowego function, po którym umieszczone są następujące elementy:

  • identyfikator będący nazwą funkcji
  • pary nawiasów okrągłych, wewnątrz których można umieszczać parametry oddzielone przecinkami
  • pary nawiasów klamrowych, wewnątrz których umieszcza się ciało funkcji

Funkcja wyliczająca odległość pomiędzy dwoma punktami (x1, y1) i (x2, y2) w kartezjańskim układzie współrzędnych

Funkcja może mieć również postać wyrażenia funkcyjnego i w takim przypadku nazwa funkcji nie jest obowiązkowa. Na przykład:

Od wersji ES6 funkcje można definiować, wykorzystując tzw. funkcje strzałkowe. Wykorzystuje się w tym celu symbol strzałki (=>) – nie jest stosowane słowo kluczowe function, ponieważ funkcja strzałkowa jest wyrażeniem.

Funkcja obliczająca sumę:

Funkcja obliczająca sumę – zapis skrócony:

Wszystkie funkcje (tylko nie strzałkowe) mają właściwość prototype odwołującą się do obiektu zwanego prototypem. Każda funkcja ma inny prototyp. Jeżeli funkcja jest konstruktorem, tworzony obiekt dziedziczy właściwości po prototypie.

Początek dokumentu

Wywoływanie funkcji

Kod tworzący ciało funkcji nie jest wykonywany w miejscu definicji funkcji, tylko jej wywołania. Funkcje można wywoływać na pięć sposobów:

  • jako funkcje – w zwykłym wywołaniu funkcji wartość przez nią zwracana staje się wartością wyrażenia wywołującego – jeżeli interpreter napotkał instrukcję return, zwracanym wynikiem jest wartość wyrażenia umieszczonego po tej instrukcji. Jeżeli wyrażenia nie ma, zwracana jest wartość undefined
  • jako metody – metoda nie jest niczym więcej jak tylko funkcją zapisaną we właściwości obiektu

  • jako konstruktory – wywołanie funkcji lub metody poprzedzone słowem kluczowym new jest wywołaniem konstruktora; lista parametrów w wywołaniu konstruktora przetwarzana tak samo jak w zwykłym wywołaniu funkcji i metody

  • pośrednio, za pomocą metod call() i apply() – obie metody są dostępnie na prototypie funkcji, a to oznacza, że są dostępnie na każdej funkcji jaka zostanie utworzona

  • niejawnie, wykorzystując konstrukcje języka, które nie wyglądają tak jak zwykłe funkcje

Początek dokumentu

Argumenty i parametry funkcji

W definicji funkcji nie określa się typów parametrów, ani typów wartości umieszczonych w argumentach – dodatkowo nie jest nawet sprawdzana ilość tych argumentów. Jeżeli funkcja jest wywoływana z mniejszą liczbą argumentów niż wynika to z deklaracji parametrów, to dodatkowym parametrom są przypisywane wartości domyślne (undefined).

W definicji funkcji opcjonalne  argumenty należy umieścić na końcu listy, aby można je było pomijać. Począwszy od wersji języka ES6 definiuje się domyślnie wartości wszystkich parametrów bezpośrednio w ich liście: po nazwie parametru należy wpisać znak równości i domyślną wartość, która ma być użyta.

Początek dokumentu

Interfejs API przeglądarek

API przeglądarki (ang. Application Programming Interface) to zestaw funkcji, które służą do manipulowania różnymi elementami przeglądarki, na której działa strona www. Do najpopularniejszych interfejsów należą:

  • interfejs przeznaczony do manipulowania dokumentami załadowanymi w przeglądarce (interfejs API DOM)
  • interfejs, który pobiera dane z serwera w celu ich aktualizacji na stronie www (zazwyczaj pojedyncze sekcje; XMLHttpRequest i Fetch API)
  • interfejs obsługujący rysowanie i manipulowanie grafiką
  • interfejs obsługujący audio i video
  • interfejs obsługujący przechowywanie danych po stronie klienta (Web Storage)

Problem polega na tym, że:

  • interfejsy API są efektem kompromisu między twórcami najpopularniejszych przeglądarek – przez co nie są proste i łatwe w użyciu
  • autoryzowana dokumentacja jest specyfikacją przeznaczoną dla programistów C, którzy implementują jej interfejsy

Początek dokumentu

Model dokumentu

Kiedy użytkownik wpisuje w pasku adresu przeglądarki adres strony www, to serwer HTTP w odpowiedzi przesyła plik zawierający znaczniki HTML i style CSS. Przeglądarka ładuje taki dokument i w trakcie tej pracy tworzy wewnętrzny model dokumentu. Dzieje się tak za sprawą Obiektowego Modelu Dokumentu (ang. DOM), który jest zaimplementowany w przeglądarce i zapewnia:

  • reprezentację struktury dokumentu
  • sposób powiązania struktury dokumentu ze skryptem

Do podstawowych obiektów modelu DOM należą:

  • window – to obiekt globalny, który spełnia dwie role:
    • definiuje wbudowane typy i funkcje JS (zawiera standardową bibliotekę JavaScript)
    • reprezentuje bieżące okno przeglądarki i jej właściwości
  • document – reprezentuje dokument HTML wyświetlony w przeglądarce, odzwierciedlając jego drzewiastą strukturę:
    • każdemu znacznikowi HTML odpowiada obiekt Element
    • każdemu tekstowi odpowiada obiekt Text
    • Element i Text pochodzą od ogólnej klasy Node (węzeł):
      1. węzły znajdujące się poziom niżej od innego węzła to dzieci
      2. węzły będące na tym samym poziomie to bliźniaki
      3. węzły umieszczone na wszystkich poziomach poniżej danego węzła to potomkowie
      4. węzły znajdujące się nad węzłem – rodzic, dziadek – to przodkowie

Każdy węzeł jest obiektem, który zawiera właściwości i metody (funkcje), dzięki którym można manipulować strukturą strony. Wyróżnia się następujące podstawowe typy węzłów:

    • węzeł zawierający element HTML
    • węzeł zawierający atrybuty
    • węzeł z zawartością tekstową

Początek dokumentu

Pobieranie elementów

Elementy na stronie HTML możemy pobierać za pomocą metod:

 querySelector()  pobiera element o podanym selektorze CSS
 querySelectorAll()  pobiera elementy o podanym selektorze CSS
 getElementById()  pobiera element o podanym identyfikatorze
 getElementsByTagName()  pobiera elementy o podanym znaczniku
 getElementsByClassName()  pobiera elementy o podanej klasie

Użycie metody querySelector():

Użycie metody querySelectorAll():

Początek dokumentu

Tworzenie elementu

Elementy tworzy się za pomocą metody createElement. Wywołujemy metodę za pośrednictwem obiektu document i przekazujemy jej nazwę znacznika. Aby tak utworzony element stał się częścią struktury DOM należy:

  • znaleźć element, który będzie pełnił rolę elementu nadrzędnego (rodzica)
  • użyć metody appendChild i dodać utworzony element do tego elementu nadrzędnego – metoda appendChild zawsze dodaje element na końcu elementów potomnych, jakie ma dany element nadrzędny

Początek dokumentu

Zdarzenia

Przeglądarka generuje zdarzenie, gdy z dokumentem, elementem lub skojarzonym z nim obiektem coś się stanie. Jeżeli jakieś zdarzenia dla tworzonego programu są ważne, rejestruje się funkcje, które będą wywoływane w razie wystąpienia tych zdarzeń.

Kod JavaScript obsługuje wiele typów zdarzeń wśród, których należy wyróżnić:

  • zdarzenia graficznego interfejsu użytkownika (ang. user interface — UI)
 load  zakończono wczytywanie strony internetowej
 unload  strona internetowa jest usuwana (np. z powodu pojawienia się żądania wczytania nowej strony)
 error  przeglądarka internetowa napotkała błąd
 resize  zmieniono wielkość okna przeglądarki internetowej
 scroll  użytkownik przewinął stronę w górę lub w dół

 

 

 

 

  • zdarzenia klawiatury
 keydown  użytkownik nacisnął klawisz
 keyup  użytkownik zwolnił klawisz
 keypress  nastąpiło wstawienie znaku

 

 

  • zdarzenia myszy
 click  użytkownik nacisnął i zwolnił przycisk myszy nad tym samym elementem
 dblclick  użytkownik dwukrotnie nacisnął i zwolnił przycisk myszy nad tym samym elementem
 mousedown  użytkownik nacisnął przycisk myszy nad elementem
 mouseup  użytkownik zwolnił przycisk myszy nad elementem
 mousemove  użytkownik przesunął mysz
 mouseover  użytkownik przesunął kursor myszy nad element
 mouseout  użytkownik przesunął kursor myszy poza element

 

  • zdarzenia aktywności
 focus  element staje się aktywny
 blur  element staje się nieaktywny
  • zdarzenia formularzy
 input  zmianie uległa wartość w dowolnym elemencie <input> lub <textarea>
 change  zmianie uległa wartość w elemencie <select> lub polu wyboru
 submit  użytkownik wysłał formularz sieciowy
 reset  użytkownik kliknął przycisk zerujący formularz
 cut  użytkownik wyciął zawartość z pola formularza
 copy  użytkownik skopiował zawartość z pola formularza
 paste  użytkownik wkleił zawartość do pola formularza
 select  użytkownik zaznaczył pewien tekst w polu formularza
  • zdarzenia związane ze zmianami struktury modelu DOM na skutek działania skryptu
 DOMSubtreeModified  Wprowadzono zmianę w dokumencie
 DOMNodeInserted  Węzeł został wstawiony jako bezpośredni element potomny innego węzła
 DOMNodeRemoved  Węzeł został usunięty z innego węzła
 DOMNodeInsertedIntoDocument  Węzeł został wstawiony jako element potomny innego węzła
 DOMNodeRemovedFromDocument  Węzeł został usunięty jako element potomny innego węzła

 

 

 

 

 

Początek dokumentu

Obsługa zdarzeń

Mamy dwa sposoby obsługi zdarzeń i są to:

  • procedura obsługi zdarzeń – jest wstanie obsłużyć tylko jedną funkcję

Skrypt oblicza ilość liter w podanym imieniu

 

  • obserwator zdarzeń – pozwala na przypisanie wielu funkcji

Skrypt sprawdza, czy podana nazwa użytkownika jest odpowiedniej długości

Początek dokumentu