Praktyki Binar::Apps

Mateusz Pokora

Javascript

składnia wzorowana na C
język skryptowy
dynamicznie typowany
początkowo uruchamiany tylko w przeglądarce
z czasem przeniesiony również na serwer (nodejs)

NodeJS

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

NodeJS

// app.js

console.log("hello");

var a = 5 + 10;

console.log(a);

console.log("now: " + new Date());

node ./app.js

ZADANIE: napisz funkcję 'square' która zwraca pierwiastek podanej liczby. Wywołaj funkcję kilka razy logując za każdym razem wynik.

// szybkie przypomnienie

var foo = 'bar';

var func = function () {
    ...
    return ;
}

function func2() {
    ...
    return ;
}

function func3(test) {
    ...
    return ;
}

ZADANIE: Stwórz tablicę 'animals zawierającą 3 dowolne stringi. Następnie w pętli wyświetl każdą nazwę używając samych dużych liter (toUpperCase).

Node Package Manager (npm)

Zarządzanie dependencjami naszego projektu

Instalacja paczek
Zachowywanie wersji instalowanych paczek
Uruchamianie skryptów
Zamiast niego będziemy używać yarn

// dodanie nowej paczki
yarn add moment

// usunięcie paczki
yarn remove moment

// init projektu, utworzenie package.json
yarn init

// instalacja globalna
yarn global add moment

dependencje trzymane są w lokalnym folderze w node_modules
zainstalowane dependencje wylistowane są jako "dependencies" lub "devDependencies" w package.json
dostęp tylko przez dokładną scieżkę lub "scripts"

Wykorzystanie dependencji

// app.js

var moment = require('moment');

moment().format();

ZADANIE: napisz skrypt który wyświetli w konsoli aktualną datę przy pomocy biblioteki momentjs

Definiowanie skryptów

// package.json

"scripts": {
    "start": "node ./app.js",
    "test": "jest --env=jsdom"
}

poprzez "scripts" mamy dostęp do zainstalowanych dependencji
możemy zapisać w ten sposób powtarzalne dla projektu czynności "test", "build" etc.

ZADANIE: dopisz skrypt “start” który uruchomi jeden z Twoich poprzednich programów.

ZADANIE: dopisz skrypt “run-second” który uruchomi drugi program

Środowisko przeglądarki

Kod javascript uruchamiany poprzez <script> w dokumencie html

<html lang="en">
  <head>
    // nasza aplikacja
    <script src="app.js"></script>
  </head>
  <body>
    // kontener aplikacji
    <div id="root"></div>
  </body>
</html>

Stworzenie nowej aplikacji

// instalacja paczki
yarn global add create-react-app

// stworzenie nowego projektu
create-react-app praktyki-app

cd praktyki-app

yarn start

dev tools w przeglądarce

Konsola javascript
Podgląd elementów DOM
Podgląd styli CSS
Śledzenie requestów http
Profilowanie kodu javascript

ES6

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009.

ES6 - const, let

problem var:

var i = 5;

if (true) {
  var i = 10;
}

// jaką wartość ma i?
console.log(i);

ES6 - const, let

const i let rozwiązują problem nadpisywania zmiennych

// const tworzy niemutowalną wartość
// nie możemy nadpisać wartość lub stworzyć inną stałą o tej samej nazwie
const a = 5;

a = 10; // error
const a = 10; // error

// let zastępuje nam var
let a = 5;

a = 10; // możemy zmienić wartość
let a = 10; // nie możemy utworzyć zmiennej o tej samej nazwie

ES6 - class syntax

class MyClass {
    constructor(attrs) {
        this.name = attrs.name;
        this.print = this.print.bind(this);
    }
    
    // metody w klasie nie są połączone z instancją :(
    // musimy robić to sami w konstruktorze
    print() {
        console.log("MyClass printer: " + this.name);
    }
}

// jak używać

var myCls = new MyClass({name: 'example name'});
myCls.print();

ES6 - arrow function

// zwykły zapis funkcji
var greet = function (name) {
    return "hello " + name;
};

// arrow function

var myFunc = (name) => {
    return "hello" + name;
}

// skrócone arrow function
var myFunc = name =>
    "hello " + name;

ES6 - łączenie stringów

var myFunc = (name) => {
    return `hello ${name}`;
}

// skrócony zapis

var myFunc = name => `hello ${name}`;

ES6 - destructure assignment / spread operator

// Array

var myArr = [1, 2, 3, 4, 5, 6, 7];

var [first, second, ...rest] = myArr;
// first = 1, second = 2, rest = [3, 4, 5, 6, 7];

var mySecondArr = [8, 9, 10];

var combinedArr = [...myArr, ...mySecondArr];
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// kopiowanie tablicy

var myClonedArr = myArr // źle, kopiujemy tylko referencje

// dobrze, tworzymy nową tablicę zawierającą wszystkie elementy tablicy myArr
var myClonedArr = [...myArr]

// Object

var myObj = {a: 1, b: 2, c: 3, d: 4, e: 5};

// nazwy zmiennych odpowiadające nazwą kluczy w obiekcie
var {a, b, c} = myObj;

//a = 1, b = 2, c = 3

var {a, b, ...rest} = myObj;
//a = 1, b = 2, rest = {c: 3, d: 4, e: 5};

// łączenie obiektów
var mySecondObj = {x: 10, y: 15, z: 20, c: 25};

var combinedObj = {...myObj, ...mySecondObj}
// klucze powtarzające się zostaną nadpisane przez obiekt "bardziej po prawej"
// combinedObj = {a: 1, b: 2, d: 4, e: 5, x: 10, y: 15, z: 20, c: 25};

// kopiowanie obiektu

var myClonedObj = myObj // źle, przypisujemy referencje do obiektu

// dobrze, tworzymy nowy obiekt zawierający wszystkie pola obiektu myObj
var myClonedObj = {...myObj}

ZADANIA

Stwórz klasę o nazwie ArrayAppender która w momencie tworzenia dostanie dowolną tablicę stringów i przypisze ją do atrybutu klasy. Dodaj do klasy metodę append która jako argument przyjmie tablicę i zwróci nową tablicę która będzie połączeniem tablicy przechowywanej w instancji oraz otrzymanej jako argument funkcji.
Stwórz klasę ObjectAppender, analogiczną do poprzedniego przykładu ale operującą na obiektach.

var appender = 
    ArrayAppender([1, 2]);

appender.append([3, 4]);

// [1, 2, 3, 4]

var objAppender = 
    ObjectAppender({a: 5, b: 3});

objAppender.append({c: 10});

// {a: 5, b: 3, c: 10}

ZADANIA

Stwórz klasę o nazwie List która w momencie tworzenia dostanie dowolną tablicę liczb i przypisze ją do atrybutu klasy. Dodaj do klasy metodę getSquare która zwróci nową tablicę zawierającą kwadraty wszystkich elementów tablicy przechowywanej w instancji.

var list = new List([1, 5, 10, 3]);
list.getSquare();

// [1, 25, 100, 9]

ZADANIA

Do klasy List dodaj metodę getHigherThan(number), która otrzyma jako argument liczbę i zwróci tablicę wszystkich elementów listy które są większe od podanej.

var list = new List([1, 5, 10, 3]);
list.getHigherThan(4);

// [5, 10]

ZADANIA

Do klasy List dodaj metodę getSum która zwróci sumę wszystkich elementów.

var list = new List([1, 5, 10, 3]);
list.getSum();

// 19

ZADANIA

Do klasy List dodaj metodę partyTime() która zwróci sumę kwadratów wszystkich elementów większych od podanego argumentu.

var list = new List([1, 5, 10, 3]);
list.partyTime(4);

// 125

Metoda map() tworzy nową tablicę z wynikami wywołanej funkcji dla każdego elementu w tablicy.

W przeciwieństwie do forEach, funkcja map ma rezultat który możemy zachować w zmiennej.

Array.map

var result = [1, 2, 3].map(number => number + 1);
// [2, 3, 4]

Tworzy nową tablicę z wszystkimi elementami, które przechodzą poprawnie zrealizowany w postaci dostarczonej funkcji.

Array.filter

var result = [1, 10, 2, 3].filter(number => number > 2);
// [10, 3]

Array.reduce

var result = [1, 10, 2, 3].reduce((a, b) => a + b);
// 16

//1. 1 + 10 = 11
//2. 11 + 2 = 13
//3. 13 + 3 = 16
//4. 16

Promise

Obsługa asynchronicznego kodu

Promise ułatwia pracę nad długimi i asynchronicznymi zadaniami np:

odczyt/zapis pliku
komunikacja z serwerem http

var response = fetchData();
// Nie możemy się tutaj odwołać do response 
// ponieważ nie dostaliśmy odpowiedzi serwera


console.log(response);

var response = fetchData();
// Nie możemy się tutaj odwołać do response 
// ponieważ nie dostaliśmy odpowiedzi serwera

console.log(response); 

// obsługa Promise

fetchData().then((response) => {
    // funkcja podana w then wykona się gdy dostaniemy odpowiedź serwera
    console.log(response);
});

// kod dalej się wykona

Axios - klient http

pozwala na komunikacje z serwerem http

rejestracja, logowanie
dodanie znajomego
wyświetlenie listy znajomych

yarn add axios

// wysłanie requestu http na serwer przy pomocy axios

axios.get('http://domain.com');

// funckja axios.get zwraca Promise
// obiekt Promise udostępnia 2 funkcje then i catch

axios.get('http://domain.com').then((response) => {
    // serwer zwrócił poprawny wynik

}).catch((error) => {
    // wystąpił błąd podczas pracy serwera
});

Axios - klient http

JSON - format danych

'{ "name":"John", "age":31, "city":"New York" }'

moduły ES6

import axios from 'axios';


// we własnych modułach

class MyClass {}

// Import odbywa się przez podanie ścieżki pliku
// nazwa zmiennej w import i export nie są ze sobą powiązane
export default MyClass;



// exportowanie z nazwą
// Import odbywa się również przez podanie ścieżki pliku
// musimy jednak również podać dokładną nazwę zmiennej z importowanego pliku
export {MyClass};

Zadanie

Podziel swój kod z poprzednich zadań na moduły (jedna klasa jeden plik). Które następnie zaimportujesz w pliku głównym i wywołasz.

Praktyki 1

By vrael560

Praktyki Binar::Apps

Javascript

NodeJS

NodeJS

Node Package Manager (npm)

Wykorzystanie dependencji

Definiowanie skryptów

Środowisko przeglądarki

Stworzenie nowej aplikacji

dev tools w przeglądarce

ES6

ES6 - const, let

ES6 - const, let

ES6 - class syntax

ES6 - arrow function

ES6 - łączenie stringów

ES6 - destructure assignment / spread operator

Array.map

Array.filter

Array.reduce

Promise

Axios - klient http

Axios - klient http

JSON - format danych

moduły ES6

Zadanie

Praktyki 1

More from vrael560