Nasłuchiwacz wydarzeń ;)

Aby dodać interakcji do strony internetowej przy pomocy JS należy do wybranego przez siebie elementu dołączyć tzw. 'nasłuchiwacz wydarzeń' (ang. event listener)

.addEventListener(wydarzenie, funkcja-przekazana-do-wywołania) - ta metoda przyjmuje dwa argumenty rodzaj 1) rodzaj wydarzenia np. 'click' (kliknięcie myszy) oraz 2) funkcję jaka ma się wywołać w momencie jego …

DOMContentLoaded

Na początek warto pamiętać o wydarzeniu DOMContentLoaded - nasłuchuje przeładowania przeglądarki -> pozwala na wywołanie funkcji zmieniającej elementy DOM w momencie załadowania całości drzewa DOM (jest to istotne w momencie gdy plik zawierający skrypt js jest podlinkowany w zamiast po )

Przykładowe zastosowanie "zamknięcie" zmian w bloku/funkcji -> w momencie przeładowania przeglądarki …

DOM - document object model

Selektory pojedynczych elementów

:::Istnieje możliwość łączenia selektorów z atrybutami :::

Przykładowe zastosowanie

document.getElementById('button-4').className // zwraca …

Obiekt document jest częścią obiektu window i został opisany poniżej. Wybrane metody obiektu window (globalny) ->

Window

alert() - pokazuje się okienko z ostrzeżeniem

window.alert('Hello world')

lub po prostu

alert('Hello world')

prompt() - wyskakuje okienko z informacją

confirm() - przyjmuje parametr

if(confirm('Are you sure?')) {
  console.log('Yes)
}

window.outerHeight …

Funkcja konstruktora pozwala na stworzenie wielu obiektów według zdefiniowanego schematu, który jest nazywany prototypem

Nazwa funkcji konstruktora często zaczyna się od dużej litery

Schemat:

  function NazwaFunkcji (właściwość) { // zdefiniowanie konstruktora, przekazanie właściwości
        this.atrybut1 = właściwość; //
        this.atrybut2 = function(argument) {  // funkcja zawarta w ramach obiektu stająca się metodą obiektu
              console.log(this …

Funkcja podczas wywołania odwołuje się do jej bieżącego kontekstu (sposobu jej wywołania, a nie miejsca jej deklaracji lub sposobu jej zdefiniowania) przy pomocy słowa kluczowegothis.

-> nie wskazuje na funkcję wewnątrz, której jest użyte ani na zakres (scope) funkcji

-> wskazanie kontekstu poprzez call, apply (lub bind)

-> wywołanie funkcji z wykorzystaniem …

Instrukcja blokowa (ang. blocks) - blok służy do grupowania wyrażeń i jest kodem zamkniętym w nawiasach klamrowych. Przykładem bloku kodu jest funkcja lub instrukcja if.

Zmienna znajduje się w zasięgu funkcji jeśli zamknięta jest w tym samym bloku kodu jak i wówczas gdy znajduje się po za nim.

Zakres/scope

Zakres …

Funkcja starzałkowa skaraca zapis i zmienia kontekst this (jest połączony w sposób leksykalny/odowłuje się do kodu, w którym kod jest zawarty), przykładowo jest niezmienny i nie dostosowuje się do obiektu w funkcji a odwołuje się do zewnętrznego this (stąd dla DOM jest to najczęściej obiekt Window)

::: Warto pamiętać, że …

Funkcje

Zbiór zgrupowanych instrukcji, które można wywołać poprzez odwołanie się do ich nazwy, funkcja może ale nie musi przyjmować parametry/argumenty, które biorą udział w wywoływaniu się jej wewnętrznego kodu.

Funkcję można stworzyć poprzez jej deklarację przy użycia słowa kluczowego function

Schemat

function identyfikator(argument) {
  kod;
}
// wywołanie
identyfikator(argument)

::: Funkcje …

Pętle for lub while pozwalają na wielokrotne wykonywanie się tego samego kodu

schemat pętli for:

const y = 5 // zmienna będąca wyznacznikiem granicznym wykonywania pętli

// wykonaj pętlę do momentu w którym i jest nadal mniejsze niż y

for (let i=0; i < y; i++) { // i - akumulatorem; moment do którego wykonuje się …

Object.assign() - kopiuje/klonuje wszystkie elementy jednego lub więcej elementu do określonego elementu

Schemat:

returnedTarget = Object.assign(target, source);

Przykłady

const obiekt = { a: 1 };
const kopia = Object.assign({}, obiekt);
// kopia = { a: 1 }

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

const obj = Object.assign(o1, o2 …

Programowani obiektowego uczyłem się na podstawie Pythona i początkowo miałem problem z uchwyceniem konceptu, zrozumienie obiektu w JavaScript (porównanie tych 2 rzeczy ze sobą nie jest wskazane,ale najbliższe tego co znam) okazało się być czymś prostszym (przypomina pythonowy słownik na sterydach - choć faktycznie bliżej mu do obiektu znanego mi …

Math jest wbudowanym obiektem (najwyższego poziomu), który posiada właściwości i metody związane z metodami stałymi i matematycznymi.

Math.Pi - właściwość (jedna z wielu) - pozwala odwołać się do wartości Pi (ok. 3.14159)

Metody (wybrane):

Math.random() - zwraca liczbę pseudolosową z przedziału [0,1)

::: aby uzyskać liczbę pomiędzy 1-20 należy pomnożyć …

Wartości

Infinity

NaN

undefined

null

Funkcje

eval() - ocenia kod który jest stringiem (użycie tego nie jest bezpieczne jeśli ogólnodostępne)

console.log(eval('2 + 2') === eval('4'));
// expected output: true

console.log(eval('2 + 2') === eval(new String('2 + 2')));
// expected output: false

uneval() - tworzy string reprezentujący kod źródłowy obiektu

uneval …

Destrukturyzacja tablic

Destrukturyzacja tablic pozwala na przypisanie do zmiennych tworzących tablice kolejne elementy zawarte w tablicy (właściwości tablicy)

let droids = ['r2d2', 'c3po']
let [droid1, droid2] = droids
console.log(droid2)
>> c3po

zamiast

let droid2 = droids[1]

Istnieje również możliwość omijania pewnych elementów w trakcie destrukturacji poprzez pozostawienie wolnej spacji pomiędzy przecinkami …

Tablice

Tworzenie tablicy

const arr = [1,2,3,4]

::: istnieje możliwość również przez funkcję konstruktora new Array()

Sprawdzanie czy obiekt, do którego się odwołujemy jest tablicą

Array.isArray(arr) // true (/false)

Dodawanie wartości do tablicy

arr[2] = 20
arr // [1,2,20,3,4]

Tablice można tworzyć również z obiektów …

Tablica (array) jest uporządkowaną listą zawierająca elementy, gdzie każdy z elementów ma dowolną wartość (są heterogeniczne). Tablica jest definiowana poprzez umieszczenie wartości pomiędzy kwadratowymi nawiasami (literałami tablicy), które nazywają się jej elementami.

let Arr = []; // pusta tablica
let arr = ["Mikolaj", 2020, "kwiecień", 17.04];

Zadeklarowanie tablicy słowem kluczowym const pozwala na …

Typ liczbowy (Numbers) posiada przypisane sobie metody - poniżej przedstawiona została część z nich

toString() - dokonuje konwersji na string

(100 + 20).toString();   // '120' - zwraca sumę

toFixed() - pozwala na określenie ilości znajków liczbowych po kropce

const x = 9.656;
x.toFixed(0);           // 10
x.toFixed(2);           // 9.66
x.toFixed(4);           // 9 …

Jedną z podstawowych i często stosowanych właściwości stringów jest length który zwraca długość łańcucha znaków

const fu = "bar"
console.log(fu.length)
>> 3

Metod, które można zastosować wobec stringów jest o wiele więcej - poniżej przedstawię tylko część z nich. Wszystkie metody łańcucha zwracają nową wartość nie zmieniając oryginalnej

charAt() - zwraca …

W przy pomocy metod istnieje możliwość wymuszenia konwersji różnego typu danych (boolean, string, numbers)

W ten sposób można przekształcić boolean lub number w string

Konwersja na string String(), x.toString()

String(123)        // '123'
String(-12.3)      // '-12.3'
String(null)       // 'null'
String(undefined)  // 'undefined'
String(true)       // 'true'
String(false)      // 'false …