Słowniczek

Obiekt document zawiera całą strukturę pliku HTML. Dzięki niemu możemy znaleźć dowolny element dokumentu i zmienić go przy pomocy kodu.

Dla ciekawych jak to działa - lektura na potem: What is the DOM? - on CSS Tricks

querySelector jest jedną z metod obiektu document do operowania na elementach strony:

document.querySelector( warunek ) - wybiera pierwszy element, który spełnia dany warunek.

Selektory tej metody działają dokładnie tak samo jak dla CSS, na przykład:

// wybiera nagłówek 3 stopnia
document.querySelector( 'h3' )
// wybiera element z klasą moja-klasa
document.querySelector( '.moja-klasa' )
// wybiera element z ID artykul-1
document.querySelector( '#artykul-1' ) 

Selektor elementu można również znaleźć w narzędziach programisty pod prawym przyciskiem myszy (opcja Kopiuj > Kopiuj selektor).

classList.add jest jedną z metod które ma każdy element drzewa DOM. Wywołujemy ją w następujący sposób:

element.classList.add( 'nazwa-klasy' ) - dodaje dla elementu klasę o podanej nazwie.

document.querySelector('#button').classList.add('big');
// dodaje klasę 'big' do elementu o ID button

classList.remove jest jedną z metod które ma każdy element drzewa DOM. Wywołujemy ją w następujący sposób:

element.classList.remove( 'nazwa-klasy' ) - zabiera daną klasę z elementu.

document.querySelector('#button').classList.remove('big');
// zabiera klasę 'big' z elementu o ID button

addEventListener jest metodą elementu drzewa DOM, która pozwala powiązać wydarzenie związane z tym elementem z akcją która powinna się wtedy wykonać.

Wywołujemy tę metodę tak:

addEventListener( 'wydarzenie', akcja-do-wykonania ) - wykonuje podaną akcję, gdy z elementem stanie się coś konkretnego. Przykład:

document.querySelector('#button').addEventListener('click', mojaFunkcja);
// wywołaj funkcję mojaFunkcja gdy ktoś kliknie przycisk o ID button

Zmienna jest to schowek, w którym możemy zapisywać informacje i odczytywać je później w innym miejscu. W JavaScript w każdej zmiennej można przechowywać praktycznie wszystko - tekst, liczbę, element dokumentu, złożony obiekt, a nawet funkcję.

Żeby stworzyć zmienną w JavaScript używamy słowa kluczowego var:

//zmienna tekstowa
var courseTitle = 'Galeria JavaScript';

Tak stworzonej zmiennej możemy potem używać dalej w kodzie po prostu podając jej nazwę, na przykład:

//zmienna liczbowa - długość tekstu
var titleLength = courseTitle.length;

Liczby

Operacje matematyczne(+, -, % i /) zapisujemy w kolejności wynik = działanie, na przykład:

var nowyNumer = staryNumer + 4;

Do porównania, która liczba jest większa lub mniejsza używamy znaków > i <, >= i <=.

if ( a > 1 ) {
  //wykonaj ten kod, kiedy a jest większe od 1.
}

Do porównania dwóch liczb ze sobą używamy potrójnego znaku równości ===.

if ( a === 1 ) {
  //wykonaj ten kod, kiedy a jest równe 1.
}

Tekst

W JavaScript tekst zapisujemy w cudzysłowie, np:

var imie = 'Ania';

Fragmenty tekstu możemy sklejać ze sobą przy użyciu znaku +, na przykład:

var pozdrowienia = 'Hej ' + 'Ania' + '!';

W ten sam sposób możemy dokleić do tekstu liczbę lub zawartość zmiennej:

var pozdrowienia = 'Hej ' + imie + '!';

Wartość logiczna

Wartość logiczna to jeden z dwóch stanów (prawda lub fałsz).

Prawdę zapisujemy w JavaScript jako true, dla fałszu używamy słowa false:

var isJavaScriptAwesome = true;

Wartości logiczne porównujemy używając potrójnego znaku równości, np:

if ( isJavaScriptAwesome === true ) {
  var doWeHaveEnoughYet = false;
}

Funkcja to ciąg kilku poleceń które tworzą logiczną całość, i powinny wykonywać się razem jedno po drugim.

W JavaScript możemy budować funkcje na kilka różnych sposobów, z czego najprostszy to:

function nazwafunkcji() {
  /* treść funkcji */
}

Tak stworzoną funkcję możemy potem wywołać w innym miejscu kodu, podając jej nazwę + okrągłe nawiasy, na przykład:

nazwafunkcji();

Wydarzeniem może być wszystko, co dzieje się na stronie: to, co robi z nią użytkownik (kliknięcie, przesunięcie myszy nad elementem, wciśnięcie klawisza, zmaksymalizowanie okna, scroll, itp), a także rzeczy, które dzieją się automatycznie, np. załadowanie strony.

Wszystkie typy wydarzeń mogą być przez nas obsłużone w kodzie, tzn. możemy do nich przypisać jakąś akcję. Służy do tego metoda addEventListener.

Instrukcje warunkowe to fragmenty kodu, które wykonują się tylko wtedy, kiedy jest spełniony dany warunek.

Najprostsza z nich wygląda tak:

if ( warunek ) {
  //wykonaj kod, który jest tutaj.
}

Jeżeli dodatkowo chcemy wykonać inny fragment kodu, kiedy warunek nie jest spełniony, możemy rozbudować tę instrukcję używając słowa kluczowego else:

if ( warunek ) {
  //wykonaj ten kod, kiedy warunek jest spełniony.
} else {
  // wykonaj ten kod, kiedy warunek nie jest spełniony
}

Parametry funkcji to dane, które do niej przekazujemy przy jej wywołaniu. Dzięki temu te same polecenia mogą za każdym razem działać na innym zestawie danych. Parametry przekazujemy do funkcji w okrągłych nawiasach.

Przykład - funkcja, która bierze imię jako parametr, i wypisuje w konsoli pozdrowienia dla osoby o danym imieniu:

function hej( imie ) {
  console.log( 'Hej ' + imie + '! Miło Cię widzieć!' );
}

Wywołując tę funkcję możemy za każdym razem przekazać jej inne imię do wypisania, na przykład:

hej( 'Magda' );
// wypisuje: 'Hej Magda! Miło Cię widzieć!'
hej( 'Asia' );
// wypisuje: 'Hej Asia! Miło Cię widzieć!'
					

Interwał powtarza podane mu instrukcje cyklicznie w danym mu odstępie czasu.

Można go stworzyć poprzez funkcję:

setInterval( akcja, odstep ) - wykonuje akcję za każdym kolejnym razem, kiedy upłynie określony odstęp czasu (podany w milisekundach).

setInterval( mojaFunkcja, 2000 );
// wywołuj funkcję mojaFunkcja co 2 sekundy.

Żeby wyłączyć interwał musimy zrobić dwie rzeczy:

1. zapisać interwał w zmiennej przy jego utworzeniu,
2. użyć tej zmiennej w funkcji
   clearInterval( nazwaZmiennej ) - wyłącza interwał zapisany wcześniej w podanej zmiennej.

var zapisanyInterwal = setInterval( mojaFunkcja, 2000 );
// wywołuj funkcję mojaFunkcja co 2 sekundy.
clearInterval( zapisanyInterwal );
// przestań wywoływać funkcję co 2 sekundy