Vstup a výstup, objekty

Vstup a výstup, objekty

  • Úvod
  • Vstup a výstup, objekty

Vstup a výstup, objekty

1. Očkování

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

Řešení

'use strict';

const jmeno = prompt('Zadejte jméno:');
const vek = prompt('Zadejte věk:');

document.write(jmeno + ', věk: ' + vek);
<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Očkování</title>
  </head>
  <body>
    <h1>Očkování</h1>
    <script src="index.js"></script>
  </body>
</html>

2. Výplata jako stránka

  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.

Řešení

'use strict';

// první část

const sazba = Number(prompt('Zadej hodinovou sazbu v Kč:'));

const vyplata = sazba * 8 * 21;
document.write(
  'Pokud budeš pracovat 8 hodin denně, 21 dní v měsíci, tak si vyděláš: ' +
    vyplata +
    ',- Kč.',
);

// druhá část

const sazba2 = Number(prompt('Zadej hodinovou sazbu v Kč:'));
const hodinDenne = Number(prompt('Kolik hodin denně odpracuješ?'));
const dnyVMesici = Number(prompt('Kolik dní v měsíci budeš pracovat?'));

const vyplata2 = sazba2 * hodinDenne * dnyVMesici;
document.write(
  'Pokud budeš pracovat ' +
    hodinDenne +
    ' hodin denně, ' +
    dnyVMesici +
    ' dní v měsíci, tak si vyděláš: ' +
    vyplata2 +
    ',- Kč.',
);
<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Výplata jako stránka</title>
  </head>
  <body>
    <h1>Výplata jako stránka</h1>
    <script src="index.js"></script>
  </body>
</html>

3. Realitka

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

Řešení

'use strict';

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,
};

// 1.
console.log(apartment.disposition);

// 2.
console.log(apartment.price.rent);

// 3.
console.log(apartment.area);

// 4.
const { city, district } = apartment;

console.log(city);
console.log(district);

// 5.

apartment.status = 'taken';
console.log(apartment.status);
<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Realitka</title>
  </head>
  <body>
    <h1>Realitka</h1>
    <script src="index.js"></script>
  </body>
</html>

4. Knihovna

  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.

Řešení

'use strict';

const kniha = {
  nazev: 'JavaScript',
  autor: 'Ondřej Žára',
  pocetStran: 256,
  vydani: {
    nakladatel: 'Computer Press',
    rok: 2015,
  },
};

const kniha2 = {
  nazev: 'Node.js Okamžitě',
  autor: 'Don Nguyen',
  pocetStran: 152,
  vydani: {
    nakladatel: 'Computer Press',
    rok: 2016,
  },
};
<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Knihovna</title>
  </head>
  <body>
    <h1>Knihovna</h1>
    <script src="index.js"></script>
  </body>
</html>

5. Očkování - objekty

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.

Řešení

'use strict';

const person = {
  name: prompt('Zadejte jméno'),
  age: Number(prompt('zadejte věk')),
};

console.log(person);
<!DOCTYPE html>
<html lang="cs">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Očkování - objekty</title>
  </head>
  <body>
    <h1>Očkování - objekty</h1>
    <script src="index.js"></script>
  </body>
</html>

6. Na doma | Formátovač data

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>

Řešení

'use strict';

const den = prompt('Zadejte den:');
const mesic = prompt('Zadejte měsíc:');
const rok = prompt('Zadejte rok:');

const vystup = den + '.' + mesic + '.' + rok;

document.write(vystup);

const vystup2 =
  '<p class="date"><span class="day">' +
  den +
  '</span>.<span class="month">' +
  mesic +
  '</span>.<span class="year">' +
  rok +
  '</span></p>';

document.write(vystup2);

7. Na doma | Fahrnheit vs. Celsius

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.

Řešení

'use strict';

const teplotaFahrenheita = Number(
  prompt('Zadejte teplotu ve stupních Fahrenheita:'),
);

const teplotaCelsia = (5 * (teplotaFahrenheita - 32)) / 9;

document.write(`Teplota ${teplotaFahrenheita}°F je ${teplotaCelsia}°C`);

8. Na doma | Letenka

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.

Řešení

'use strict';

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,
};

// 1.
console.log(flight.countryTo.name); // Spain

// 2.
const { baglimit } = flight;
console.log(baglimit);

// 3.
const { hand_width, hand_height, hand_length, hand_weight } = baglimit;
console.log(hand_width); // 20
console.log(hand_height); // 40
console.log(hand_length); // 55
console.log(hand_weight); // 10

// 4.
const cenaDruhehoZavazadla = Math.ceil(
  flight.bags_price[2] * flight.conversion.EUR,
);

console.log(cenaDruhehoZavazadla); // 2517