Notatnik frontendowca

Rozdział siódmy

Prefiksy

Prefiksy, czyli przedrostki pozwalające na używanie nowych właściwości, funkcji CSS, które zostały dodane do przeglądarki w fazie eksperymentalnej.

Przykład dodania właściwości flexbox

                        
                            display: flex;
                            display: -webkit-box;
                            display: -webkit-flex;
                            display: -moz-box;
                            display: -ms-flexbox;
https://caniuse.com/ https://autoprefixer.github.io

Google fonts

Google fonts - fonty od Google.

latin-extended - obsługa polskich znaków

https://fonts.google.com/

Przykład zastosowania

Kod dodany do HTML

                        
                            <link href="https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap&subset=latin-ext" rel="stylesheet">

Kod dodany do CSS

                        
                            <style>
                            @import url('https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap&subset=latin-ext');p
                            </style>
                        
                        
                            .body {
                            font-family: 'Rubik', sans-serif;
                        }

GIT: branche

Branche:

  • pozwalają na bezkarne testowanie
  • służą do bardziej efektywnego rozwijania oprogramowania
  • pozwalają na równoległą pracę
  • zwiększają czytelność postępu prac nad projektem
  • ułatwiają wypuszczanie rzeczy na świat

git branch - wypisuje nazwy gałęzi

git branch nazwabrancha - tworzy nową gałąź

git checkout nazwabrancha - przełączanie między gałęziami

git push --set-upstream origin nazwabrancha - stworzenie gałęzi na serwerze (github)

git merge nazwabrancha - scalanie gałęzi

Markdown

Markdown - język znaczników do formatowania tekstu.

Nagłówki:

                    
                        # Nagłówek (H1)
                        ## Nagłówek II (H2)
                        ### Nagłówek III (H3)
                        #### Nagłówek IV (H4)

Link:

                    [DIGI-CHIP](https://digi-chip.pl)

Obrazek:

                    ![Alt obrazka](https://url.do/obrazka.jpg)

Polecenie/jednolinijkowy kod: 

                    `node main.js`

Blok kodu:

                    ```javascript
                        consol.log('hello world');
                        alert('hello world');
                        ```

Formatowanie tekstu: 

                    *tekst* - kursywa
                        **tekst** - pogrubienie
                        ***tekst*** - pogrubienie + kursywa

Cytat:

                     > Lepiej zaliczać się do niektórych, niż do wszystkich.

Elementy listy:

                    
                        - tekst
                        - tekst
                        - tekst 

                        numerowane:

                        1. element
                        2. element 
                        3. element
                        ____1. sublista
                        ____2. sublista
                        ____3. sublista

                        Cztery spacje tworzą sublistę.

JS: tablice

Tablica jest strukturą danych.

Index - liczymy od zera.

Tablice mogą zawierać różnego typu dane jak stringi, obiekty, liczby itd. 

                    const hardware = ['keyboard', 'mouse', 'screen']

                        const news = [
                        { title: 'digi-chip', 
                        content: 'lorem ipsum...' 
                        }, 
                        { title: 'technologia', 
                        content: 'lorem ipsum...', 
                        link: 'https://digi-chip.pl' 
                        },
                        8, true
                        ]

Pobieranie elementu na danym miejscu. 

                    tablica[index]

tablica.length - długość tablicy

tablica.push(element) - dodanie elementu na koniec tablicy

tablica.unshift(element) - dodanie elementu na początku tablicy

tablica.shift() - usuwa element na początku tablicy

tablica.pop() - usuwa element na końcu tablicy

tablica.indexOf(element) - sprawdzanie czy jest element w tablicy, zwraca numer indeksu

tablica.splice(index, liczbaElementów) - usuwanie n elementów od danej poycji

tablica.slice(index, stop) - pobieranie n elementów od danej pozycji

JS: pętle

pętla for:

                    for (inicjalizacja; warunek stopu; wyrażenie inkrementacji) {
                        kod
                        }

i - licznik pętli

                    for (let i = 0; i < 3; i++) {
                        console.log(`${i} wykonanie pętli`); 
                        }

i++ - postinkrementacja

i-- - postdekrementacja

++i - preinkrementacja

--i - predekrementacja

pętla while:

                    while (warunek logiczny) { 
                        kod
                        }

przykład:

                    let n = 3;

                        while (n < 9) {
                        console.log(n);
                        n = n + 3; 
                        } 

                        console.log(n);

pętla do while:

                    do { 
                        kod 
                        } while (warunek logiczny)

przykład:

                    let n = 9;

                        do {
                        console.log(n);
                        n = n + 3; 
                        } while (n < 9);

                        console.log(n);

                        blok kodu pierwszy raz zawsze się wykona

pętla for in:

Pętla for in wykorzystujemy głównie do wypisywania obiektów. 

                    for (wlasnosc in obiekt)

przyklad:

                    const person = { 
                        name: 'maciek', 
                        age: 31 
                        }

                        for (let property in person) { 
                        console.log(`${property}: ${person[property]}`);
                        }

pętla for of:

                    for (element of tablica)

przykład:

                    const faces = ['😎', '🤯', '😱'];

                        for (let face of faces) {
                        console.log(face);
                        }

JS: Przechowywanie danych

document.cookie - pobranie ciastka

document.cookie = "nazwa = wartość" - dodanie ciastka

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Local / session storage:

Localstorage - trwa do ręcznego wyczyszczenia (trwalsze).

Sessionstorage - trwa do zamknięcia sesji (zakładki przeglądarki).

Zastosowanie

Dodaje klucz i wartość, ustawia wartości w localstorage. 

                        localStorage.setItem('nazwa', wartosc)

Pobieranie danych.

                        localStorage.getItem('nazwa')

Usuwanie danych.

                        localStorage.removeItem('nazwa')

Dodawanie obiektów.

                        const person = {
                            name: 'Andrzej',
                            age = 35 
                            }

                            const jsonPerson = JSON.stingify(person);
                            
                            localStorage.setItem('person', jsonPerson);

Pobieranie obiektów.

                        const personStringify = localStorage.getItem('person');
                            const newPerson = JSON.parse(personStringify);

Konwersja obiektu na string.

                        JSON.stringify(obiekt)

Konwersja string na obiekt.

                        JSON.parse(JSONString)