Formularz

"Łapanie" formularza na 2 sposoby = poprzez odwołanie się do forms lub poprzez "klasyczne" selektory

const firstForm1 = document.forms[0]
const firstForm2 = document.querySelector("form")

Właściwości formularza (wybrane)

Użytkowanie

Link do biblioteki jQuery należy umieścić w sekcji head strony internetowej, w tym celu można wykorzystać dostępny kod (jQuery Core – All Versions) i przekopiować go do opracowywanego projektu lub wykorzystać link CDN

jQuery CDN – Latest Stable Versions

Składania

$ - znak dostępu do biblioteki jQuery

selektory (np. ) - przeszukują dokument w celu …

Fetch jest API/interfejsem należącym do przeglądarki, ale jest również dostępny przy pomocy node.js -> import fetch from 'node-fetch', który pozwala na asynchroniczne pobieranie danych z serwera.

Fetch bazuje na obietnicach -> Zwraca zapytanie HTTP jako obietnicę tego zapytania. W momencie wykorzystania metody fetch() tworzony jest obiekt typu Promise - oznacza to …

!

REST -> Representational state transfer (pl. zmiana stanu poprzez reprezentacje)

Wysyłanie danych

Tym razem do prezentacji możliwości XMLHttpRequest posłużę się fake API -> https://reqres.in/ ("A hosted REST-API ready to respond to your AJAX requests"), które pozwala na ćwiczenie funkcjonalności REST API

Wysyłanie danych wymaga

(1) przygotowanie danych do wysłania

  const …

XMLHttpRequest

XMLHttpRequest (XHR) służy do wykonywania dynamicznych (asynchronicznych) połączeń z serwerem i jest wykorzystywany do 1) aktualizacji informacji zawartych na stronie internetowej UPDATE 2) wysłania żadania danych do serwera po załadowaniu strony - REQUEST 3) przyjęcia informacji przesłanej przez serwer - po załadowaniu strony RECEIVE 4) przesłania danych do serwera (w tle …

Wstęp

Webpack generuje tzw. pakiety (ang. bundles -> bundle.js) na podstawie wytworzonego tzw. drzewa zależności oraz dostosowanie ich do formatu czytelnego dla możliwie jak najszerszego zakresu przeglądarek internetowych - jest swego rodzaju kompilatorem powstałej treści na podstawie różnych formatów do takiego, który przyjmuje przeglądarka internetowa (js,html,css). W tym sensie …

Wstęp

Podział projektu na mniejsze pliki (modułowość) może przynieść sporo korzyści w związku z jego utrzymaniem oraz reużywalnością kodu w innych projektach, pozwala na to (CommonJS oraz moduły wprowadzone w ES6.

CommonJS jest standardem wykorzystywanym przez node.js natomiast moduł ES (ES6) jest przeznaczony dla przeglądarek

CommonJS

Importowanie zależności (w …

ES6 wprowadza 2 dodatkowe struktury przechowywania danych Map oraz Set

Map

Mapa jest kolekcją danych, do których przyporządkowane są klucze, w odróżnieniu od zwykłego Obiektu w tym przypadku klucze mogą być dowolnego typu/o dowolnym typie przykładowo kluczem może być Obiekt

Przykładowo:

let map = new Map();

map.set('1', 'str1 …

Wstęp

JavaScript w swoim założeniu jest jednowątkowa, kod wywoływany jest w sposób synchroniczny (linia po linii), w zestawieniu z node.js lub przeglądarką internetową może stać się asynchroniczna (kod dalej jest wywołany po kolei, ale jego elementy nie zatrzymają wywołania się reszty kodu np. w przypadku obiektu Window i metody …

Babel pozwala na transpilację/tłumaczenie kodu ES6+ do ES5 - sprawiając tym samym możliwość na interpretację kodu przez szerszą gamę środowisk od node.js po starsze przeglądarki internetowe. Babel jest oparty na małych wtyczkach, których instalacja pozwala na wykonanie oczekiwanej od niego pracy.

W jaki sposób działa Babel można również sprawdzić …

Dlaczego warto stosować testy/Do czego służą testy?

[..........]

TDD - test driven development - testowanie aplikacji na bieżąco, podczas realizacji kolejnych kroków, może to być związane z tworzeniem testu jeszcze przed napisaniem danego bloku kodu

Unit test - inaczej testowanie jednostkowe - polega na rozbiciu kodu na jak najmniejsze części i poddawanie ich testom …

NPM

Korzystając z domyślnej opcji instalacji paczki/wtyczki z NPM w przypadku Ubuntu stosując opcję instalacji globalnej należy wykorzystać uprawnienia administracyjne sudo. Aby uniknąć instalowania wtyczkę w ten sposób (i przekazywania im możliwości edytowania ustawień systemowych) należy zastosować niżej opisane kroki.

1) Należy stworzyć folder, w którym będą zapisane paczki …

Instalacja globalna

Gulp - jest narzędziem pozwalającym na zarządzanie wieloma zadaniami

Instalacja globalna Gulpa (wymaga wcześniejszej instalacji npm np. korzystając z nvm - Node Version Manager), która pozwala na wywoływanie komendy gulp globalnie przy pomocy terminala

npm install --global gulp-cli

Sprawdzanie instalacji (jej wersji)

gulp -v

zwraca:

CLI version: 2.2.1 …

Lokalna pamięć przeglądarki pozwala na przechowywanie danych przy pomocy JavaScript bezterminowo.

Dane przechowywane w lokalnej pamięci przeglądarki nie mogą przekroczyć 5mb i nie powinny znajdować się w nich dane poufne. Lokalna pamięć przeglądarki działa w sposób synchroniczny (odpowiada na zapytania po kolei).

Aby korzystać z tzw local storage (LS) można …

Zastosowanie trzech kropek wprowadzonych w ES6 - pozwala na rozwinięcie wyrażenia iterowalnego (wielokorotnie powtarzalnego/przejściowego) jako spread operator lub parametr rest.

Trzykropek można stosować w kontekście obiektów, tablic, stringów, zbiorów (setów) i map.

Spread Operator -> Rozproszenie

Dzieli kolekcję tworząc tablicę

Pozwala na rozciągnięcie (rozproszenie/rozwinięcie) obiektu mogącego ulec iteracji wewnątrz odbiorcy …

Klasy pozwalają na przypisanie metod bezpośrednio do (prototypów) obiektów przy pomocy jednego bloku (od ES6)

class Droid {
    constructor(name, occupation) {
        this.name = name;
        this.occupation = occupation;
    }

    logDroid() {
        return `this is ${this.name} a ${this.occupation} // metoda prototypowa -> __proto__: Object
    }
}

const c3po = new Droid('C-3PO', 'Protocol droid');
const r2d2 = new Droid …

Template strings lub też literals zwane po polsku łańcuchami szablonowymi

Łańcuchy szablonowe [wcześniej wspominałem o nich w tym miejscu] pozwalają na podstawianie zmiennych wewnątrz informacji przeznaczonymi do druku i zawartymi pomiędzy apostrofami [ warto pamiętać o tym, że stosowanie tego formatu zapisu nie wymaga używania sekwencji ucieczkowej -> /n]

Przykładowo:

const droid …

Kolekcje węzłów DOM

Typy węzłów

• element node
• attribute node
• text node
• comment node

NodeList

Uporządkowana lista wszystkich węzłów DOM (w tym również węzłów tekstowych oraz bloków tekstowych), obiekty można uzyskać poprzez odwołanie się do indeksu

querySelectorAll()/getElementsByName() - - metody document zwracające NodeList

NodeList posiada metodę forEach() !!

NodeList, jest static - zwrócona lista …

Propagacja wydarzeń (w górę) - event bubbling

W DOM domyślnie wydarzenia są przenoszone od dziecka lub rodzeństwa do rodzica lub rodzeństwa - oznacza to, że jeśli rodzic oraz dziecko mają nastawioną ten sam rodzaj akcji wywołującej (np. click) oraz różne lub tą samą wydarzenie wywołane, oba z nich dojdą do skutku chyba …

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 …