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 …

Polecenie if...else pozwala na kontrolę przepływu kodu -> gdy pewien warunek jest spełniony (if) kod jest wykonywany a jeśli nie to może sprawdzić kolejny warunek (else if) lub wykonać określony kod (else)

  if (warunek) {
        kod do wywołania jeśli warunek spełniony
  } else if (inny warunek …

W JavaScript istnieją dwa typy danych - proste/prymitywne i referencyjne, poniżej zostaną przedstawione te pierwsze. Typy referencyjne przechowywane są w pamięci podręcznej a zmienna jest do nich referencją.

Postawy i deklaracje

w JS instrukcje nazywane są wyrażeniami i rozdzielone są średnikiem ;

składnia komentarza

// jednoliniowy

*/ wielo - 
  liniowy
*/

Istnieją trzy typy deklaracji …

Kontroli przepływu

block

break

continue

empty

if/if else/else - podstawowa instrukcja warunkowa

swith - instrukcja warunkowa biorąca pod uwagę zachowanie się kodu zależnego od wariacji zmiennej

throw - ma za zadanie zwrócić zdefiniowane przez użytkownika wyjątek i zatrzymuje wykonywanie się kodu

Przykładowe zastosowanie:

fetch("https://jsonplaceholder.typicode.com/posts/2")
    .then …

Kursy online

Newslettery

Neoumorphism jest sposobem stylizacji elementów stron nawiązujący swoją estetyką znaną z środowiska różnego rodzaju smartfonów, choć w duże mierze przymina mi głównie te z nadgryzionym jabłkiem. Poprzez grę cieni ten styl stara się wywołać efekt estetycznej trójwymiarowości gdzie poszczególne elementy są wypukłe lub wklęsłe a ich kształty są obłe lub …

Istnieje parę sposobów na to w jaki sposób można wycentrować treść, na środku strony w taki sposób aby znajdowała na środku strony.

Można to zrobić łątwo przy pomocy flexboxa, ale gdy nie chcemy zmieniać deklaracji 'rodzeństwa' (rodzica) danego elementu wówczas nie będzie to możliwe.

Bez jakiejkolwiek ingerencji w deklaracje przypisaną …