Java týden Java týden
Aprílový black friday tě nenechá v klidu! Až 80 % prémiového obsahu zdarma. Více informací
Pouze tento týden slevy až 80 % na programování v Javě

Lekce 6 - Objekty, JSON a vylepšení diáře v JavaScriptu

JavaScript Objektově orientované programování Objekty, JSON a vylepšení diáře v JavaScriptu

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Tvorba OOP diáře v JavaScriptu, jsme začali programovat náš diář v JavaScriptu. V dnešním tutoriálu objektově orientovaného programování v něm budeme pokračovat. Podíváme se na formát JSON a lokální úložiště dat.

JSON

JSON je zkratka z JavaScript Object Notation a zjednodušeně by se dalo říci, že JSON je JavaScriptový objekt zapsaný jako textový řetězec. Objekty převedené do JSON můžeme jednoduše ukládat do souborů nebo jiných úložišť a poté je z nich zpětně načítat. Kromě XML je to také oblíbený formát pro tzv. API, kdy se naše aplikace zeptá serveru na nějaká data a server jí je pošle právě jako objekty ve formátu JSON.

Ukázka syntaxe

Představme si, že máme nějakou instanci, např. konkrétního uživatele se jménem a věkem. Tu bychom vytvořili např. takto (za předpokladu, že má třída příslušný konstruktor):

const simon = new Uzivatel("Šimon", 19);

Pokud bychom tuto instanci převedli na JSON, vypadal by JSON následovně:

{
    "jmeno": "Šimon",
    "vek": 19
}

Objekt se v JSON definuje složenými závorkami. Následuje název vlastností, poté dvojtečka a jejich hodnota.

Za poslední hodnotou v bloku se nepíše čárka. Některé JS enginy s ní totiž mohou mít problém.

Obrovskou výhodou JSON je, že je přímo součástí jazyka JavaScript. Nepotřebujeme tedy žádné knihovny a jakmile data z JSONu otevřeme, máme je k dispozici rovnou jako objekty. Pokud JSON výše tedy uložíme do proměnné, bude v ní opravdu objekt s vlastnostmi jmeno a vek:

const simon = {
    "jmeno": "Šimon",
    "vek": 19
};
document.write(`${simon.jmeno}, ${simon.vek}`);

Skript do stránky opravdu vypíše data z JSON:

Your page
localhost

Nejedná se ovšem o instanci třídy Uzivatel, JSON objekty jsou totiž tzv. anonymní objekty. Formát JSON nepodporuje metody objektů a u vlastností podporuje pouze datové typy string, number, object, boolean, null a array. Jedná se tedy pouze o data, nikoli o objekty obsahující jakoukoli logiku.

Podobné anonymní objekty můžete občas v JavaScriptu potkat, používají se na místech, kde by se z nějakého důvodu nevyplatilo deklarovat plnohodnotnou třídu. Metody se jim dají poté i dále dodat v JavaScript kódu, nikdy ale přímo v JSON souborech. Určitě bychom anonymní objekty neměli používat namísto standardních instancí.

Ukažme si ještě jeden složitější JSON, ve kterém využijeme vnořené objekty a pole:

{
    "jmeno": "Šimon",
    "vek": 19,
    "dovednosti": ["programování", "grafika", "plavání"],
    "automobil": {
        "spz": "13ABC",
        "abs": true
    },
    "manzelka": null
}

JSON výše definuje kromě jména a věku uživatele také jeho dovednosti, automobil a manželku. Jedná se stále o definici dat jedné konkrétní instance. Pole zapisujeme na rozdíl od objektů do hranatých závorek. Všimněte si vnořeného objektu reprezentující automobil. Manželku Šimon zatím nemá. Opět si všimněte chybějících čárek za posledními hodnotami v blocích.

Parsování JSON

JSON ovšem často nezískáme takto hezky zapsaný v JS souboru, ale přijde nám v textovém řetězci. Takový JSON načteme pomocí funkce JSON.parse(). Ukažme si příklad s uživatelem, kdy JSON již zapíšeme jen jako text:

const simon = JSON.parse(`{
    "jmeno": "Šimon",
    "vek": 19
}`);
document.write(`${simon.jmeno}, ${simon.vek}`);

Výstup je opět stejný jako v minulé ukázce:

Your page
localhost

Převod objektu do JSON

A jak naopak převedeme nějaký náš objekt do JSON stringu? K tomu slouží funkce JSON.stringify(). Vytvořme si opravdu třídu Uzivatel, ať máme kompletní ukázku:

class Uzivatel {

    constructor(jmeno, vek) {
        this.jmeno = jmeno;
        this.vek = vek;
    }

    pozdrav() {
        alert("Ahoj!");
    }

}

Metodu pozdrav() jsme do třídy výše přidali proto, abychom si ověřili, že v JSON opravdu nebude. Vytvořme instanci třídy Uzivatel a převeďme ji do JSON stringu:

const simon = new Uzivatel("Šimon", 19);
const json = JSON.stringify(simon);

document.write(json);

Náš objekt se vypíše jako JSON:

Your page
localhost

Vidíme, že zde není informace z jaké třídy byl uživatel vytvořen a také zde chybí veškerá jeho logika. Kód je na jedné řádce, protože ve výchozím chování JSON.stringify() šetří místem a bílé znaky do výsledného řetězce nevkládá.

LocalStorage

Záznamy našeho diáře bychom již do JSON uložit zvládli. K jejich uložení budeme používat localStorage. To je úložiště v internetovém prohlížeči uživatele (proto local), do kterého se mohou ukládat data v textovém řetězci, ke kterým můžeme později přistupovat. K dispozici máme pro naši aplikaci 10MB prostoru, což je pro texty opravdu hodně :)

Použití úložiště nám v naší aplikaci pomůže vyřešit tzv. perzistenci dat. Po znovunačtení stránky se nám teď naše záznamy samozřejmě ztratí. Právě proto budeme převádět naše pole záznamů na JSON, který uložíme do localStorage a při načtení stránky ho naparsujeme z úložiště zpět na pole. Data tedy v aplikaci zůstanou.

Práce s localStorage

S localStorage se pracuje velmi jednoduše. K uložení nějakého řetězce pod textový index použijeme metodu setItem(). Analogicky, pro přečtení hodnoty pod klíčem, použijeme getItem().

Pro klíč "vlastnost" nastavíme string "data":

localStorage.setItem("vlastnost", "data");

Nyní vypíšeme co je pod klíčem "vlastnost", čímž získáme hodnotu "data":

document.print(localStorage.getItem("vlastnost"));

Výsledek:

Your page
localhost

Úprava diáře

Konečně tedy můžeme přejít k závěru dnešní lekce a diář upravit tak, aby se data ukládala a načítala z/do localStorage. Naše pole zaznamy třídy Diar budeme ukládat jednoduše pod klíčem "zaznamy".

Konstruktor

Místo vytvoření prázdného pole se záznamy v konstruktoru diáře tedy záznamy načteme z local storage

constructor(jazyk = "cs-CZ") {
    const zaznamyZeStorage = localStorage.getItem("zaznamy");
    this.zaznamy = zaznamyZeStorage ? JSON.parse(zaznamyZeStorage) : [];
    this.jazyk = jazyk;

    this.nazevInput = document.getElementById("nazev");
    this.datumInput = document.getElementById("datum");
    this.potvrditButton = document.getElementById("potvrdit");
    this.vypisElement = document.getElementById("seznam-ukolu");

    this.nastavUdalosti();
}

Do proměnné zaznamyZeStorage vybereme naše záznamy z localStorage. Dále musíme zkontrolovat, pokud nějaké záznamy uložené vůbec jsou. Pokud ne, proměnná zaznamyZeStorage nabude hodnoty null. Proto zde máme ternární operátor, díky kterému vlastnosti zaznamy nastavíme buď naparsované pole z localStorage nebo prázdné pole.

Načítání záznamů z localStorage máme, nyní přidáme i jejich ukládání při přidání nového záznamu. Záznamy budeme ukládat jak do pole zaznamy, tak do storage. Pracovat v celé aplikaci jen se storage by vyžadovalo neustálé převádění záznamů z objektu na text a zpět. Proto jej využíváme jen pro načítání na začátku a průběžné ukládání.

Do metody nastavUdalosti() přidáme jeden řádek ukládající záznam i do storage:

nastavUdalosti() {
    this.potvrditButton.onclick = () => {
        const zaznam = new Zaznam(this.nazevInput.value, this.datumInput.value);
        this.zaznamy.push(zaznam);
        localStorage.setItem("zaznamy", JSON.stringify(this.zaznamy)); // přidaný řádek
        this.vypisZaznamy();
    };
}

Můžeme projekt zkusit spustit, přidat úkoly a znovu načíst stránku. Úkoly v aplikaci již nyní zůstávají a to znamená, že máte svou první reálně použitelnou objektovou aplikaci. Gratuluji! To je pro dnešek vše, celkem snadno jsme si vyřešili náš problém s ukládáním. V příští lekci, Vylepšení objektového diáře v JavaScriptu, již diář plně dokončíme :)


 

Stáhnout

Staženo 23x (3.08 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal Šimon Raichl
Avatar
Jak se ti líbí článek?
2 hlasů
Autor se věnuje hlavně tvorbě všemožných věcí v JS
Aktivity (3)

 

 

Komentáře

Avatar
Jan Osuský
Člen
Avatar
Jan Osuský:7. března 18:22

Ahoj, z jakého důvodu kód diáře neběží v prohlížeči Edge?

 
Odpovědět 7. března 18:22
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.