Wyszukaj / o blogu

JavaScript i DOM - tworzenie, usuwanie i pozyskiwanie informacji z elementów

Opublikowano sob 02 maja 2020 w javascript • Tagi: js, javascript, selektory, dom, elementy dom • 3 min read

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 …


Czytaj dalej

JavaScript - selektory DOM

Opublikowano sob 02 maja 2020 w javascript • Tagi: js, javascript, selektory, dom, elementy dom, sibling • 2 min read

DOM - document object model

Selektory pojedynczych elementów

selektor funkcja przykładowe zastosowanie
document.getElementById() zwraca element w podanym Id document.getElementById('button-4')
document.querySelector() zwraca pierwszy element spełniający podany warunek/ wpisany składnią znaną z CSS document.getElementById('#button-4')

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

Przykładowe zastosowanie

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


Czytaj dalej

JavaScript - obiekt window i document

Opublikowano czw 30 kwietnia 2020 w javascript • Tagi: js, javascript, window, document • 2 min read

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 …


Czytaj dalej

JavaScript - konstruktor, prototyp i dziedziczenie

Opublikowano wto 28 kwietnia 2020 w javascript • Tagi: javascript, js • 3 min read

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 …

Czytaj dalej

JavaScript "this"

Opublikowano ndz 26 kwietnia 2020 w javascript • Tagi: javascript, js, this • 1 min read

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 …


Czytaj dalej

JavaScript - bloki i zakres

Opublikowano śro 22 kwietnia 2020 w javascript • Tagi: javascript, blocks, scopes, zakres, blok • 1 min read

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 …


Czytaj dalej

JavaScript -> funkcje strzałkowe

Opublikowano pon 20 kwietnia 2020 w javascript • Tagi: javascript, js, arrow functions, funkcja strzałkowa • 2 min read

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 …


Czytaj dalej

JavaScript - funkcje

Opublikowano ndz 19 kwietnia 2020 w javascript • Tagi: javascript, js, funkcja • 2 min read

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 …


Czytaj dalej

JavaScript - pętle (for/while loop)

Opublikowano sob 18 kwietnia 2020 w javascript • Tagi: javascript, js, funkcja • 1 min read

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ę …

Czytaj dalej

JavaScript - Obiekt.metoda()

Opublikowano śro 15 kwietnia 2020 w javascript • Tagi: javascript, js, array • 1 min read

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 …

Czytaj dalej

JavaScript - obiekty (Objects)

Opublikowano wto 14 kwietnia 2020 w javascript • Tagi: javascript, js, array • 2 min read

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 …


Czytaj dalej

JavaScript - obiekt Math

Opublikowano pon 13 kwietnia 2020 w javascript • Tagi: javascript, js, math, obiekt math, object • 1 min read

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ć …


Czytaj dalej

JavaScript - obiekty wbudowane

Opublikowano pon 13 kwietnia 2020 w javascript • Tagi: javascript, js, obiekty wbudowane • 2 min read

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 …

Czytaj dalej

JavaScript - destrukturyzacja tablic i obiektów

Opublikowano ndz 12 kwietnia 2020 w javascript • Tagi: javascript, js, array, tablica, destrukturyzacja, obiekt • 1 min read

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 …


Czytaj dalej

JavaScript - metody tablic (array methods)

Opublikowano ndz 12 kwietnia 2020 w javascript • Tagi: javascript, js, array, tablica • 4 min read

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 …


Czytaj dalej

JavaScript - tablice (obiekt array)

Opublikowano sob 11 kwietnia 2020 w javascript • Tagi: javascript, js, array, tablica • 1 min read

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 …


Czytaj dalej

JavaScript - metody liczb

Opublikowano ptk 10 kwietnia 2020 w javascript • Tagi: javascript, js, liczby, numbers • 1 min read

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 …

Czytaj dalej

JavaScript - właściwości i metody łańcucha znaków

Opublikowano ptk 10 kwietnia 2020 w javascript • Tagi: javascript, js, string, łańcuch znaków, metody • 2 min read

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 …


Czytaj dalej

JavaScript - konwersja/translacja pomiędzy numbers i string

Opublikowano ptk 10 kwietnia 2020 w javascript • Tagi: javascript, js, string, łańcuch znaków, metody • 2 min read

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 …

Czytaj dalej

JavaScript - kontrola przepływu (if...else/switch/operator warunkowy)

Opublikowano czw 09 kwietnia 2020 w javascript • Tagi: javascript, js, if...else, switch, else...if • 2 min read

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 …

Czytaj dalej