Každý program musí být schopen nějakým způsobem komunikovat s uživatelem - přijímat od něj informace a také informace zobrazovat. V této lekci se naučíme jednoduchý způsob, jak od uživatele získat nějaký vstup do našeho programu. Ukážeme si také, jak získané informace lépe strukturovat pomocí objektů.

Vstup a výstup

Zatím jsme viděli, jak může náš program provést jednoduchý výstup pomocí funkce document.write nebo console.log. Později uvidíme mnohem zajímavější způsoby jak uživateli něco na stránce zobrazit. Nyní ale potřebujeme od uživatele taky nějaký vstup získat. K tomu budeme pro tuto chvíli používat funkci prompt. Zkusme napsat program, který bude řešit naši ultramaratonskou úlohu z minulé lekce.

'use strict';

const start = 15;
const delka = prompt('Zadej délku závodu:');
const konec = (start + delka) % 24;
document.write(konec);

Tento program vypadá velmi přímočaře. Zadáme-li mu však v dobré víře na vstup délku 10 dočkáme se odpovědi nesprávné odpovědi 22. Abychom odhalili, kde je zakopaný pes, musíme si povědět něco o konverzi hodnot.

Konverze hodnot

Úplně na začátku je šikovné všimnout si rozdílu mezi hodnotami jako 12 a '12'. Jedna představuje číslo dvanáct, druhá představuje řetězec obsahující znaky 1 a 2. Proto můžeme čekat, že aritmetické operace s těmito hodnotami dopadnou jinak podle toho, zda jde o číslo nebo o řetězec.

> 12 + 5
17
> '12' + '5'
'125'

JavaScript se nám (občas k naší škodě) snaží udělat život jednodušší a tak za nás v určitých případech provádí automatickou konverzi.

> '12' + 5
'125'
> 12 + '5'
'125'
> 1 + 2 + 3 + '4'
'64'
> '1' + 2 + 3 + 4
'1234'

Tato konverze funguje i pro jiné operátory, napříkad násobení.

> 12 * 5
60
> '12' * 5
60
> 12 * '5'
60
> '12' * '5'
60

Dokonce takto funguje i zbytek po dělení.

> 12 % 5
2
> '12' % 5
2
> 12 % '5'
2
> '12' % '5'
2

Vybaveni touto zkušeností můžeme začít rozplétat, co se nám pokazilo na našem ultramaratonském programu. To nejdůležitější k zapamatování je, že funkce prompt vždycky vrací vstup od uživatele jako řetězec. I když uživatel do políčka nakrásně napíše číslo, funkce prompt pro nás žádnou konverzi automaticky nedělá. Pokud tedy uživatel zadal jako délku závodu číslo 10, do proměnné délka se nám uložila hodnota '10'. V konzoli si pak můžeme vyzkoušet, co se dělo pak.

> const start = 15
> const delka = '10'
> start + delka
'1510'
> '1510' % 24
22

Abychom si s touto situací poradili, budeme potřebovat možnost provést konverzi hodnot sami, aniž by nám do toho JavaScript kecal.

Explicitní konverze

Pokud chceme konvertovat číslo na řetězec, použijeme funkci String.

> String(12)
'12'
> String(-2.48)
'-2.48'

Když potřebujeme obrácenou konverzi, tedy řetězec na číslo, použijeme funkci Number.

> Number('12')
12
> Number('-2.48')
-2.48
> Number('-2,48')
NaN

Všimněte si, co se stane, když se pokusíme zkonvertovat nějaký řetězec, který na číslo převést nejde. V takovém případě obdržíme speciální hodnotu NaN, což je zkratka pro Not a Number - Není číslo.

Nyní už můžeme náš program přepracovat tak, aby fungoval správně.

'use strict';

const start = 15;
const delka = Number(prompt('Zadej délku závodu:'));
const konec = (start + delka) % 24;
document.write(konec);

Z tohoto příkladu plyne do budoucna velmi důležité poučení. Vždycky si dávejte dobrý pozor na to, s jakými typy hodnot pracujete. Pokud například chcete používat výstup funkce prompt jako číslo, vždy jej explicitně převeďte na číslo. Dáte tak i čtenářům vašeho programu najevo, co je vaším záměrem, a oni tak nebudou muset smysl vašeho programu rozplétat jako detektivní zápletku.

Fakt, že JavaScript pro nás některé konverze dělá automaticky, můžeme využít k tomu, abychom uživateli vypsali nějakou hezčí zprávu, než jen holé číslo.

document.write('Běžec dorazí v ' + konec + 'h');

Cvičení - vstup a výstup

1

Očkování

to dáš

Představte si, že vyrábíte registrační systém na očkování proti COVID-19. U každého registrovaného chceme evidovat jméno a věk.

  1. Vytvořte webovou stránku, která se uživatele zeptá nejdříve na jméno a poté na věk. Tyto hodnoty si uložte do smysluplně pojmenovaných proměnných. Nezpomeňte věk převést na číslo.
  2. Poté, co uživatel zadá všechny údaje, vypište do stránky výstup ve tvaru
    Květoslav Voňavý, věk: 67
    
2

Výplata jako stránka

to dáš
  1. Vytvořte webovou stránku, která uživatele požádá o jeho hodinovou sazbu v korunách a spočítá jeho hrubou mzdu za předpokladu, že pracuje 8 hodin denně 21 dní v měsíci. Do stránky vypište výsledek zabalený do nějaké přívětivé formulace. Dbejte na to, abyste korektně převedli uživatelem zadanou hodnotu na číslo.
  2. Nechte uživatele zadat nejen hodinovou sazbu, ale také počet hodin a dní v měsíci. Opět dejte pozor na správnou konverzi.

Objekty

Prozatím jsme v naších programech pracovali pouze s čísly a řetězci. V reálnějších programech však budeme potřebovat do naších proměných uložit více, než jednu informaci. Představte si například, že chceme evidovat uživatele e-shopu. Každý uživatel má jméno, login a počet položek v nákupním košíku. Takovou informaci bychom mohli zkusit nacpat do jednoho řetězce třeba takto.

const user1 = 'Lubomír Větvička, lubos, 0';

Vysekat z takového řetězce jednotlivé údaje je ovšem dost pracné a našikovné. Pokud chceme informace lépe strukturovat, použijeme v JavaScriptu takzvané objekty.

const user1 = {
  fullName: 'Lubomír Větvička',
  login: 'lubos', 
  cartItems: 0,
};

Objekt vytvoříme tak, že do složených závorek vložíme čárkou oddělené záznamy, kterým se říká vlastnosti properties . Každá vlastnost sestává z takzvaného klíče key a hodnoty value .

Struktura objektu

Pomocí klíčů pak můžeme z objektu získat jednotlivé hodnoty použitím takzvané tečkové notace dot notation .

> user1.fullName
"Lubomír Větvička"
> user1.login
"lubos"
> user1.cartItems
0

Klíče v objektu se chovají podobně jako proměnné. Řídí se stejnými pravidly pro názvosloví. Můžete tedy mí objekty třeba v hadí notací.

const user1 = {
  full_name: 'Lubomír Větvička',
  login: 'lubos', 
  cart_items: 0,
};

Nelze však použít například klíče s pomlčkou.

const user1 = {
  full-name: 'Lubomír Větvička',
  login: 'lubos', 
  cart-items: 0,
};

Pokud trváme na tom, že v klíči chceme mít pomlčku nebo dokonce mezeru, můžeme jej uzavřít do uvozovek jako řetězec.

const user1 = {
  'full name': 'Lubomír Větvička',
  login: 'lubos', 
  'cart-items': 0,
};

Potíž je v tom, že k takovým klíčům se už pomocí tečkové notace nedostaneme a musíme použít jiný zápis.

> user1['full name']
"Lubomír Větvička"
> user1.login
"lubos"
> user1['cart-items']
0

Tento zápis není tak šikovný jako tečková notace a proto se budeme klíčům v uvozovkách snažit co nejvíce vyhýbat.

Hodnoty uvnitř objektů lze také měnit. Takto například můžeme zvýšit počet položek v košíku.

> user1.cartItems = 3

Všimněte si, že při vytváření objekt ukládáme do proměnné, jde tedy o nový typ hodnoty, podobně jako číslo nebo řetězec. To mimo jiné znamená, že uvnitř objektu můžeme mít vnořené další objekty. Takto bychom mohli například reprezentovat uživatele s doručovací adresou.

const user1 = {
  fullName: 'Lubomír Větvička',
  login: 'lubos', 
  address: {
    street: 'Nábřežní',
    number: 31,
    city: 'Horní Dlouhonosy ',
    postalCode: '123 11',
  }
  cartItems: 0,
};

Kdybychom pak chtěli získat například město, kam máme objednané zboží doručit, opět použijeme tečkovou notaci.

> user1.address.city
"Horní Dlouhonosy"

Díky objektům tak můžeme v našich programech reprezentovat i velmi komplikovaná data.

Jednoduché destrukturování

Často se nám stane, že chceme z objektu získat vícero hodnot a uložit se je do proměnných, například takto.

const fullName = user1.fullName;
const login = user1.login;
const cartItems = cartItems;

Programátoři jsou však líné bytosti a tento postup jim přijde zdlouhavý. Pokud se naše proměnné jmenují stejně, jako klíče uvnitř objektu, můžeme si ušetřit psaní a použít takzvané destrukturování.

const { fullName, login, cartItems } = user1;

Tímto zápisem říkáme, že chceme vyrobit tři proměnné, do kterých se uloží hodnoty z objektu user1.

Cvičení - objekty

3

Realitka

to dáš

Mějme následující objekt představují inzerát na stránkách nějaké realitní kanceláře.

const apartment = {
  type: 'rent',
  disposition: '3+1',
  area: {
    floorage: 100,
    balcony: 2,
    units: 'sqm',
  },
  city: 'Prague',
  district: 'Old Town',
  price: {
    rent: 28000,
    fees: {
      water: 1000,
      energy: 2500,
      services: 560,
    },
    currency: 'czk',
  },
  ownership: 'personal',
  condition: 'renovated',
  status: 'free',
  floor: 3,
};

Vytvořte webovou stránku s JavaScriptem, zkopírujte si tento kód do vašeho programu a vyřešte následující úkoly.

  1. Pomocí tečkové notace vypište do konzole dispozici bytu.
  2. Vypište do konzole čistý nájem bez poplatků.
  3. Vypište do konzole celý objekt představující výměru bytu.
  4. Použijte destrukturing a vypište do konzole město a městskou část.
  5. Změnte stav inzerátu z 'free' na 'taken'.
4

Knihovna

to dáš
  1. V JavaScriptovém programu vytvořte objekt představující jednu knihu v knihovně. Uvažte, jaké vlastnosti může taková kniha. Rozhodně budeme chtít název, autora a počet stran. Přidejte do objektu alespoň tři další vlastnosti tak, aby obsahovaly čísla, řetězce i vnořený objekt.
  2. Vytvořte alespoň jednu další knihu se stejnými vlastnostmi ale jinými hodnotami.
5

Očkování - objekty

to dáš

Pokračujme v našem registračním systému na očkováni. Zatím se umím uživatele zeptat na jméno a věk.

  1. Vytvořte objekt person, do kterého vložte uživatelem zadané údaje. Objekt bude mít následující strukturu
    {
      name: 'Květoslav Voňavý',
      age: 67,
    }
    
  2. Poté, co uživatel zadá všechny údaje, vypište do konzole objekt person a zkontrolujte, že obsahuje správné informace.

Doporučené úložky na doma

6

Formátovač data

to dáš

Vytvořte stránku, která se zeptá uživatele na den, měsíc a rok.

  1. Jakmile uživatel zadá patřičné údaje, vypište do stránky datum v tomto formátu.
    28.04.2021
    
  2. Vypisujte datum jaká následující HTML kód.
    <p class="date"><span class="day">28</span>.<span class="month">04</span>.<span class="year">2021</span></p>
    
7

Fahrnheit vs. Celsius

zapni hlavu

Pokud pečete podle anglických receptů, často se po váš požaduje rozehřát troubu na uvedenou teplotu. Pokud si ovšem neuvědomíte, že Američané používají pro měření teploty stupně Fahrenheita namísto Celsia, bude vás na konci pečení čekat nemilé překvapení.

Nastudujte si na České Wikipedii jak se převádějí stupně Fahrenheita na stupně Celsia a vytvořte webovou stránku, která takový převod provede. Vaše stránka se zeptá uživatele teplotu ve stupních Fahrenheita a pomocí document.write vypíše její ekvivalent ve stupních Celsia.

8

Letenka

to dáš

Vytvořte webovou stránku s JavaScriptem a do kódu vašeho programu vložte následující objekt představující reálná data o letu z Prahy do Barcelony.

const flight = {
  id: '145c01af48dd00002715248e_0',
  dTimeUTC: '01/26/2021 @ 1:25pm (UTC)',
  aTimeUTC: '01/26/2021 @ 3:45pm (UTC)',
  duration: {
    departure: 8400,
    return: 0,
    total: 8400
  },
  fly_duration: '2h 20m',
  flyFrom: 'PRG',
  cityFrom: 'Prague',
  cityCodeFrom: 'PRG',
  countryFrom: {
    code: 'CZ',
    name: 'Czechia'
  },
  flyTo: 'BCN',
  cityTo: 'Barcelona',
  cityCodeTo: 'BCN',
  countryTo: {
    code: 'ES',
    name: 'Spain'
  },
  distance: 1359.54,
  airline: 'FR',
  pnr_count: 1,
  technical_stops: 0,
  price: 36,
  bags_price: {
    '1': 34.95,
    '2': 69.91
  },
  baglimit: {
    hand_width: 20,
    hand_height: 40,
    hand_length: 55,
    hand_weight: 10,
    hold_width: 81,
    hold_height: 119,
    hold_length: 119,
    hold_dimensions_sum: 319,
    hold_weight: 20
  },
  availability: {
    seats: 2
  },
  conversion: {
    EUR: 36
  },
  quality: 66.66659,
}

Proveďte následující:

  1. Vypište do konzole název cílové země.
  2. Pomocí destrukturování si do separátní proměnné uložte objekt udávající maximální rozměry zavazadel.
  3. Z objektu s rozměry zavazadel opět pomocí destrukturování vytáhněte maximální povolené rozměry příručního zavazadla a vypište tyto rozměry jeden po druhém do konzole.
  4. Vypište do konzole, kolik cestující zaplatí za druhé zavazadlo v českých korunách zaokrouhleno nahoru na celé koruny.

Shrnutí

Po této lekci byste měli vědět a znát

  • jak použít funkci prompt k získání vstupu od uživatele,
  • jak správně konvertovat hodnoty pomocí funkcí Number a String,
  • jak ukládat informace do objektů a jak k těmto informacím přistupovat pomocí tečkové notace,
  • jak vytvářet vnořené objekty,
  • jak získat z objektu hodnoty pomocí destrukturování.