Cypress wprowadzenie

Cypress jest oparty o bibl. Mocha (struktura test) oraz Chai (asercje, funkcje, wywołania).

Mocha 🥤

describe - opis testu / grupowanie serii tekstu / przyjmuje 2 argumenty - nazwę testu i funkcję (call back function)

it - test / pojedynczy test / przyjmuje 2 argumenty - nazwę testu i funkcję (call back function)

.only - wyłącza wszystkie inne …

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 …

W poniższym poście zamieszczam linki przydane w procesie rekrutacji na Frontend'owca. Zebrane materiały zarówno omawiają wybrane zagadnienia jak i przedstawiają potencjalne pytania/zadania (oraz odpowiedzi/rozwiązania) jakie można spotkać w procesie rekrutacji na front-end developera.

CSS/HTML/JS...

Cracking the front-end interview

front-end-interview-handbook i wersja PL Podręcznik Frontend przygotowujący do …

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 …

JSON - JavaScript Object Notation

Format JSON zbliżony jest do obiektów znanych z JS, z tą zasadą, że nazwy kluczy wpisuje się w PODWÓJNY cudzysłów, kolejne wpisy oddzielone są przecinkami a same pliki JSON przechowują jedynie dane/zmienne (żadnych funkcji/kodu wykonywalnego). Praca z plikami typu JSON przypomina te znane z …

Obietnice/Promises

Promises zostały wprowadzone wraz z ES6, bez nich asynchroniczność opierano na callbackach/wywołaniach zwrotnych. Obiekty Promise (obietnice) zakładają wykonanie pewnej czynności oraz zwrócenie rezultatu lub poinformowania o błędzie. Pozwala to na stworzenie takiego łańcucha kodu, który uzależnia wykonanie kolejnej funkcji od wyniku zwrotnego poprzedniej. Obiekt Promise może znajdować …

!

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

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 …

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 …

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 …