Wstęp do programowania

Część pierwsza – wprowadzenie do języka JavaScript

Wprowadzenie

Kurs zakłada znajomość podstaw HTML i CSS.

JavaScript to jeden z najbardziej popularnych języków programowania, dostępny w każdej przeglądarce WWW. JavaScript jest językiem interpretowanym – oznacza to że nie ma kroku kompilacji (jak na przykład w C++ czy Java). Dla uproszczenia można przyjąć że kod wykonywany jest linijka po linijce, zaczynając od góry pliku.

Podstawy

Pracę z JavaScript zaczniemy od poznania kilku podstawowych koncepcji: zmiennych, obiektów, tablic oraz funkcji. Z językiem możemy łatwo zacząć pracę wykorzystując serwis codepen.

Poniższa pierwsza część kursu przedstawi pokrótce podstawy języka JavaScript, nie jest natomiast w żadnym wypadku pełnym kursem programowania.

Zaczniemy od ustawienia tekstu w elemencie
<body> HTML:

Po lewej stronie znajduje się kod JavaScript, a po prawej wynikowy efekt. Klikając na Edit on Codepen otworzy się strona CodePen gdzie możemy wpisywać kod w zakładkę JavaScript i oglądać wynik na żywo.

document.body jest specjalną wartością która odnosi nas do elementu <body> HTML, a innerText to klucz pod którym możemy zapisać tekst który wyświetli się na stronie.

Kod interpretowany jest linijka po linijce, więc jeśli zmienimy kod na:

document.body.innerText = "Media 3.0";
document.body.innerText = "Hello World";

To wynikiem na ekranie będzie „Hello World” – wpierw ustawiamy tekst „Media 3.0”, a w kolejnej linijce „Hello World”, który nadpisuje to co już mamy.

Jeśli chcemy wyświetlić oba teksty, musimy do widocznego już „Media 3.0” dodać „Hello World”:

document.body.innerText = "Media 3.0";
document.body.innerText = document.body.innerText + "Hello World";

W tym momencie na ekranie widoczne jest: „Media 3.0Hello World” – brakuje przejścia do nowej linii. W JavaScript (oraz wielu innych językach programowania) istnieje specjalny znak \n który oznacza przejście do nowej linii, więc nasz finalny kod będzie
wyglądać następująco:

document.body.innerText = "Media 3.0";
document.body.innerText = document.body.innerText + "\nHello World";

Do document.body oraz innerText wrócimy w dalszej części kursu.

Zmienne

Zmienne są jedną z podstawowych koncepcji w programowaniu i pozwalają na zapamiętanie danej wartości pod pewnym hasłem.

W JavaScript zmienne deklarujemy wykorzystując var:

var artistName = "Pablo Picasso";
var artistBornYear = 1881;
var artistDeathYear = 1973;

Możemy teraz obliczyć ile lat dożył artysta, oraz wypisać efekty na ekran:

Warto zwrócić uwagę na różnicę zapisu imienia oraz roku urodzenia / śmierci – tekst zapisujemy pomiędzy znakami ", a wartości liczbowe wpisujemy bez tych znaków.

UWAGA: 12 oraz
"12" oznaczają dwie różne rzeczy w JavaScript – pierwsza to cyfra 12 na której możemy wykonywać dowolne operacje matematyczne (-, *, +, /, etc.), a druga to tekst „12”.

Obiekty

Obiekty pozwalają na przechowywanie wielu połączonych wartości pod jedną zmienną, dla przykładu obiekt który opisuje Pablo Picasso wygląda następująco:

var artist = {
  name: "Pablo Picasso",
  bornYear: 1881,
  deathYear: 1973,
};

Do kluczy w danym obiekcie mamy dostęp poprzez .: artist.name to „Pablo Picasso”, a artist.bornYear to 1881. Do obiektów możemy dodawać nowe klucze, lub modyfikować już istniejące:

artist.age = artist.deathYear - artist.bornYear;
artist.numberOfWorks = 50000;

Poniżej ostateczny kod wykorzystujący obiekt do przechowywania danych:

Tablice

Tablice są kolejnym sposobem przechowywania danych, umożliwiającym przechowywanie wielu wartości pod jedną zmienną. Tym co różnie tablice od obiektów są indeksy. Tablicę można sobie wyobrazić jako plik arkusza kalkulacyjnego, z jednym wierszem, ale wieloma kolumnami, gdzie każda kolumna jest opisana indeksem (indeksy zaczynają się od
0):

0 1 2 3
100 200 17 -20

Powyższa tablica zapisana w języku JavaScript:

var numbers = [ 100, 200, 17, -20 ];

Z tablicy możemy pobrać wartość, oraz zapisać nową, wykorzystując indeks:

document.body.innerText = numbers[1]; // na ekranie pojawi się "200"
numbers[2] = 99; // trzecia wartość w tablicy (indeks 2) zmieni się na 99

Do tablicy możemy też dodać zupełnie nowy element jako nową kolumnę (na końcu tablicy):

numbers.push(600); // nowa wartość dodana po ostatnim indeksie

Tablice posiadają też specjalny klucz length który zwraca rozmiar tablicy (czyli ile znajduje się w niej elementów).

Możemy policzyć średnią z elementów w naszej startowej tablicy:

var numbers = [ 100, 200, 17, -20 ];
var sum = numbers[0] + numbers[1] + number[2] + numbers[3];
var avg = sum / numbers.length

document.body.innerText = "Średnia: " + avg;

Łatwo można sobie wyobrazić sytuację w której mamy nie cztery, ale setki elementów w takiej tablicy (np. jeśli pobraliśmy ją z jakiegoś API lub bazy danych). Dodawanie wszystkich wartości w tablicy możemy zapisać w inny sposób tak:

var numbers = [ 100, 200, 17, -20 ];
var sum = 0;

sum = sum + numbers[0];
sum = sum + numbers[1];
sum = sum + numbers[2];
sum = sum + numbers[3];

var avg = sum / numbers.length

document.body.innerText = "Średnia: " + avg;

Linijka sum = sum + numbers[0]; powtarza się tyle razy ile mamy elementów w tablicy, a jedyny zmieniający się argument to indeks (0, 1, 2, 3). Do wykonywania powtarzalnych operacji tego typu w
JavaScript istnieje pętla for:

for składa się z trzech części oddzielonych znakiem ;:

  • var i = 0 – zadeklarowanie zmiennej którą
    for będzie zmieniać
  • i < 10 – test sprawdzający czy
    for powinien dalej wykonywać kod znajdujący się
    pomiędzy { i } – w tym wypadku tak długo
    jak i jest mniejsze od 10 dodajemy tekst do
    document.body.innerText
  • i = i + 1 – jak zmieniać wartość i jeśli
    test zwraca prawdę – w tym wypadku dodajemy do wartości 1

Tablice i obiekty

Tablice oraz obiekty można łączyć w dowolny sposób. Możemy mieć obiekt, gdzie jeden (lub wiele) kluczy jest tablicami:

var artist = {
  name: "Pablo Picasso",
  famousWorks: [
    "Girl before a Mirror"
    "Le Rêve",
    "The Weeping Woman",
    "Guernica"
  ]
};

W takim wypadku żeby poznać pierwszą znaną pracę wykorzystujemy artist.famousWorks[0].

Obiekty mogą być w sobie zagnieżdżone:

var artist = {
  name: "Pablo Picasso",
  restingPlace: {
    latitude: 43.554142,
    longitude: 5.604438
  }
};
  • szerokość geograficzna: artist.restingPlace.latitude
  • długość geograficzna: artist.restingPlace.longitude

Możemy mieć również tablicę obiektów:

var artists = []; // zaczynamy od pustej tablicy

artists.push({
  name: "Pablo Picasso",
  bornYear: 1881,
  deathYear: 1973,
  numberOfWorks: 50000
});

artists.push({
  name: "Leonardo Da Vinci",
  bornYear: 1452,
  deathYear: 1519,
  numberOfWorks: 30
});

artists.push({
  name: "Claude Monet",
  bornYear: 1840,
  deathYear: 1926,
  numberOfWorks: 2500
});

Aby wypisać na ekran wszystkich artystów z listy wraz z wiekiem gdy zmarli, połączymy tablice, obiekty oraz pętlę for:

Funkcje

Funkcje są sposobem na zapisanie powtarzalnych operacji. Możemy zbudować funkcję obliczającą średnią liczbą stworzonych dzieł sztuki każdego roku, biorąc pod uwagę ile lat przeżył artysta.

Funkcje tworzymy następująco:

function calculateAverageYearlyWorks(numberOfWorks, bornYear, deathYear) {
  var age = deathYear - bornYear;
  var avg = numberOfWorks / age;

  return avg;
}

Zmienne stworzone wewnątrz funkcji (pomiędzy { i }) są dostępne jedynie wewnątrz tej funkcji. W tym
wypadku tworzymy „tymczasowe” zmienne age oraz avg a na koniec „zwracamy” wartość avg wykorzystując specjalne słowo return.

Taką funkcję używamy następująco:

document.body.innerText = calculateAverageYearlyWorks(100, 0, 100);

Na ekranie zobaczymy „1”, czyli nasza funkcja działa poprawnie dla przykładowych danych. Uzupełnijmy w takim razie poprzedni kod o średnią liczbę prac dla każdego artysty:

Instrukcje warunkowe

Instrukcje warunkowe pozwalają na wykonanie pewnego zestawu operacji, tylko jeśli pewien zadany warunek jest spełniony. Podstawowa konstrukcja if wygląda następująco:

var artist = {
  name: "Pablo Picasso",
  bornYear: 1881,
  deathYear: 1973,
};

if (deathYear - bornYear > 50) {
  document.body.innerText = artist.name + " żył ponad pięćdziesiąt lat."
}

Podstawowe porównania są takie same jak w matematyce: >, <, >=, <=, porównanie równości dokonuje się za pomocą dwóch znaków równości ==, a nierówność poprzez !=.

Możemy teraz dodatkowo sprawdzić czy artysta tworzył więcej niż jedno dzieło na każdy rok swojego życia:

Pobieranie danych z API

Ostatnią częścią układanki potrzebną nam do wizualizacji danych na ten moment, jest możliwość pobrania danych z API. API to interfejs programistyczny który pozwala nam na komunikowanie się z serwerem, w
ściśle opisany sposób.

Przykładowo wykorzystamy API BDL – bank danych lokalnych. Dane które udestępnia to API przekazywane są w formacie JSON.

JSON jest formą zapisu danych bardzo przypominającą obiekty w JavaScript, dla przykładu obiekt artysty:

var artist = {
  name: "Pablo Picasso",
  bornYear: 1881,
  deathYear: 1973
};

Opisany w formacie JSON wygląda następująco:

{
  "name": "Pablo Picasso",
  "bornYear": 1881,
  "deathYear": 1973
}

Tekst JSON możemy wczytać jako obiekt JavaScript wykorzystując wbudowaną funkcję JSON.parse:

var artistJSON = '{ "name": "Pablo Picasso", "bornYear": 1881, "deathYear": 1973 }';
// artistJSON.name === undefined - ponieważ artistJSON to tekst

var artist = JSON.parse(artistJSON);
// artist.name === "Pablo Picasso"

Możemy też wykonać odwrotną operację wykorzystując JSON.stringify:

var artist = {
  name: "Pablo Picasso",
  bornYear: 1881,
  deathYear: 1973
};

var artistJSON = JSON.stringify(artist);
// artistJSON === '{"name":"Pablo Picasso","bornYear":1881,"deathYear":1973}'

JSON.stringify może nam również stworzyć tekst JSON z czytelniejszym formatowaniem wykorzystując: JSON.stringify(data, null, 2).

Z uwagi na problematyczną obsługę tego API, pobraliśmy dane lokalnie do pojedynczego pliku JSON z którym będziemy pracować: TODO: LINK DO JSON

Dla zainteresowanych kod pobierający dane napisany w node.js udostępniamy tutaj: TODO: LINK DO SKRYPTU

Do pobierania danych będziemy używać wbudowanej w przeglądarkę funkcję fetch(). fetch() wykorzystuje do działania
Promise, jeden ze sposobów na radzenie sobie z asynchronicznością JavaScript.

Pobranie danych w formacie JSON składa się z trzech kroków:

  1. fetch(URL) – przygotowanie fetch() na
    pobranie URL
  2. .then(function(response) { return response.json() }) –
    przekonwertowanie odpowiedzi do JSON
  3. .then(function(data) { // data = pobrane dane }) –
    przetworzenie pobranych danych

Poniżej przykładowy kod który wyświetla pobrane dane z pliku JSON:

Zamiast ustawiać document.body.innerText wykorzystujemy pole document.body.innerHTML i zwracamy dane JSON wewnątrz elementu <pre>.

W drugiej części kursu zwizualizujemy pobrane dane.

Quiz

#1 Zmienne w języku Javascript zapisuje się:

#2 Instrukcja for to:

#3 Funkcje w języku Javascript zapisuje się:

#4 Interfejs pozwalający na komunikację z serwerem to:

Sprawdzam

Wynik