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

  1. 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.

  2. 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

  1. 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

  1. 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

  1. 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

  1. 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.

Made with Slides.com