Práce s řetězci, podmínky

Práce s řetězci, podmínky

  • Úvod
  • Práce s řetězci, podmínky

Práce s řetězci, podmínky

1. Vlastnosti a metody

V konzoli prohlížeče si založte proměnnou title a uložte do ní název svého oblíbeného filmu. Proveďte následující úkoly.

  1. Vypište do konzole počet znaků názvu.
  2. Převeďte název filmu na velká písmena.
  3. Vyřízněte z názvu prvních pět písmen.
  4. Vyřízněte z názvu posledních pět písmen.

Řešení

>  const title = 'Forrest Gump';

>  title.length;
<· 12

>  title.toUpperCase()
<· "FORREST GUMP"

>  title.slice(0, 5);
<· "Forre"

>  title.slice(title.length - 5, title.length);
<· " Gump"

2. Emaily

Vytvořme stránku, která bude pracovat s emailovými adresami ve formátu

jmeno.prijmeni@domena

Tedy například:

  • petr.novak@gmail.com
  • romana.nejedla@czechitas.cz
  • slavomir.ponuchalek@yahoo.com

Postupujte dle následujících kroků.

  1. Vytvořte jednoduchou webovou stránku s JavaScriptovým programem.
  2. Nechte uživatele zadat jeho email a uložte si jej do promměné email.
  3. Pomocí metody indexOf najděte v tomto emailu pozici znaku zavináč. Tuto pozici si uložte do proměnné atIndex.
  4. Pomocí metody slice vyřízněte z emailu první část představující jméno a příjmení uživatele.
  5. Dále z emailu vyřízněte název domény tedy například gmail.com.
  6. Ve získaných informací vytvořte objekt, který bude vypadat například takto: 
    const parsedEmail = {
 userName: 'slavomir.ponuchalek',
 domain: 'yahoo.com',
}
  7. Pro kontrolu vypište tento objekt do konzole.

Řešení

'use strict';

const email = prompt('Zadejte email:');

const atIndex = email.indexOf('@');

const parsedEmail = {
  userName: email.slice(0, atIndex),
  domain: email.slice(atIndex + 1),
};

console.log(parsedEmail);
<!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>Emaily</title>
  </head>
  <body>
    <h1>Emaily</h1>
    <script src="index.js"></script>
  </body>
</html>

3. Doručování

Vytvořte webovou stránku, kde uživatel zadá svoji adresu například pro účely doručení objednaného zboží. Požaduje ulici, číslo domu, město a PSČ.

  1. Uložte všechny údaje do vhodně pojmenovaných proměnných.
  2. Ze zadanách údajů sestavte pomocí interpolace řetězec obsahující HTML ve formátu jako níže 
    <div class="address">
 <p>Pod Stájemi 67<p>
 <p>12754 Klysnov</p>
</div>
  3. Pomocí document.write vypište sestavené HTML do stránky.

Řešení

'use strict';

const ulice = prompt('Zadej ulici:');
const cisloDomu = prompt('Zadej číslo domu:');
const mesto = prompt('Zadej město:');
const psc = prompt('Zadej PSČ:');

const adresaElm = `
  <div class="address">
    <p>${ulice} ${cisloDomu}<p>
    <p>${psc} ${mesto}</p>
  </div>
`;

document.write(adresaElm);
<!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>Doručování</title>
  </head>
  <body>
    <h1>Doručování</h1>
    <script src="index.js"></script>
  </body>
</html>

4. Registrace na očkování

V předchozí lekci jsem vytvářeli stránku pro registraci na očkování. Chtěli jsme po uživateli jméno a věk. Nyní budeme chtít, aby uživatel zadal také heslo. To bychom v pozdější verzi aplikaci mohli použít například k přihlášení do systému.

  1. Jakmile uživatel zadá věk, zkontrolujte, že je větší nebo roven 65. Pokud ano, vypište věk v pořádku.
  2. Pokud uživatel nemá alespoň 65 let, vypište Nízký věk.
  3. Jakmile uživatel zadá heslo, zkontrolujte, že je delší než osm znaků. Pokud není, vypište slabé heslo.

Řešení

'use strict';

const jmeno = prompt('Zadejte jméno:');

const vek = Number(prompt('Zadejte věk:'));

let heslo;

if (vek >= 65) {
  console.log('Věk v pořádku');
  const zadaneHeslo = prompt('Zadejte heslo:');

  if (zadaneHeslo.length <= 8) {
    console.log('slabé heslo');
  } else {
    heslo = zadaneHeslo;
  }
} else {
  console.log('Nízký vě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>Registrace na očkování</title>
  </head>
  <body>
    <h1>Registrace na očkování</h1>
    <script src="index.js"></script>
  </body>
</html>

5. Cena vstupenky

Pokusme se o základ jednoduchého rezervačního sestému pro vstupenky do divadla. Nechte uživatele zadat svůj věk. Vytvořte si proměnnou plnaCena, do které uložte hodnotu 12. Vytvořte podmínku, která do proměnné cena uloží cenu spočítanou podle věku uživatele dle následujících pravidel

  • 0 euro pro návštěvníky mladší 6 let,
  • 65 % ze základní ceny pro návštěvníky 6 až 26 let (žák, student),
  • 100 % ze základní ceny pro návštěvníky 27 až 64 let (dospělý),
  • 50 % ze základní ceny pro ostatní (senior).

Nezapomeňte na zaokrouhlování, ať nám cena vyjde v celých centech.

Nakonec spočtenou cenu vypište s nějakou hezkou zprávou na výstup.

Řešení

'use strict';

const vek = Number(prompt('Zadejte věk:'));
const plnaCena = 12;

let cena;

if (vek < 6) {
  cena = 0;
} else if (vek <= 26) {
  cena = plnaCena * 0.65;
} else if (vek <= 64) {
  cena = plnaCena;
} else {
  cena = plnaCena * 0.5;
}

const vystup = `Cena vstupneky pro věk ${vek}, je ${cena.toFixed(2)} centů`;
console.log(vystup);
<!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>Cena vstupenky</title>
  </head>
  <body>
    <h1>Cena vstupenky</h1>
    <script src="index.js"></script>
  </body>
</html>

6. Na doma | FIT Email

Pokud se přihlásíte jako student například na Fakultu Informačních Technologí ČVUT, bude vám informačním systémem automaticky přidělen email, který se vytvoří z vašeho jména a příjmení. Z vašeho příjmení se vezme pět prvních znaků a z vašeho křestního jména první tři. Výsledek se převede na malá písmena a připojí se doména fit.cvut.cz. Pro jméno Žaneta Procházková tak vznikne adresa prochzan@fit.cvut.cz.

  1. Vytvořte webovou stránku, která požádá uživatele nejdříve o jeho křestní jméno a pak příjmení, obojí bez diakritiky.
  2. Pomocí metody trim zajistěte, že ve jméně ani příjmení nebudou na začátku ani na konci žádné bílé znaky.
  3. Pomocí metody slice vyřízněte ze jména i příjmení příslušné části.
  4. Pomocí interpolace řetězců sestavte výslednou adresu a vypište ji do stránky.

Řešení

'use strict';

const jmeno = prompt('Zadejte jméno:').trim().toLowerCase().slice(0, 3);
const prijmeni = prompt('Zadejte prijmeni:').trim().toLowerCase().slice(0, 5);

document.write(`${prijmeni}${jmeno}@fit.cvut.cz`);

7. Na doma | Množstevní slevy

Firma nabízející trička s potiskem poskytuje množstevní slevy podle počtu objednaný kusů. Při objednávce pod 50 kusů stojí jedno tričko 300 kč. Pokud si objednáme alespoň 50 kusů, je cena 250 kč za kus. Při objednávce nad 200 kusů je cena 200 kč za tričko. Nad 500 kusů zaplatíme 150 kč za tričko a nad 1000 kusů zaplatíme 120 korun za tričko.

Napište program, který od uživatele obdrží počet kusů, které si chce objednat, a program odpoví celkovou ceny objednávky.

Řešení

const mnozstvi = Number(prompt('Kolik triček si objednáte:'));
let cena;

if (mnozstvi < 50) {
  cena = 300;
} else if (mnozstvi <= 200) {
  cena = 250;
} else if (mnozstvi <= 500) {
  cena = 200;
} else if (mnozstvi <= 1000) {
  cena = 150;
} else {
  cena = 120;
}

document.write(`Při objednávkce ${mnozstvi} triček zaplatíte ${cena} Kč/ks celková cena objednávky je ${mnozstvi * cena} Kč.`);

8. Na doma | Superhrubá mzda

Vytvořte webovou stránku, která pomůže zaměstnavatelům spočítat náklady na jednoho zaměstnance, tedy takzvenou superhrubou mzdu. Zaměstnavetel zadá na vstupu dvě hodnoty: hodinovou sazbu zaměstnance a velikost úvazku v procentech. Tedy například 100% je plný úvazek (8 hodině denně), 50% poloviční apod. Stránka vypíše výši superhrubé mzdy, výší hrubé mzdy a výší čisté mzdy, vše v korunách.

Pravidla pro tyto výpočty se v čase mění. Aktuální pravidla v době vzniku tohoto cvičení platí od 1.7.2019 a jsou následující (zdroj).

Hrubou mzdu spočítáme z hodinové sazby a velikosti úvazku. Předpokládejme, že každý měsíc má 21 pracovních dní. Výsledné číslo zaokrouhlíme běžným způsobem na celé koruny.

Superhrubá mzda se spočítá z hrubé mzdy takto:

  1. Přičteme náklady na zdravotní pojištění (9 % z hrubé mzdy)
  2. Přičteme náklady na sociální pojištění (24,8 % z hrubé mzdy)
  3. Výsledné číslo zaokrouhlíme nahoru na celé koruny.

Čistá mzda se spočítá z hrubé mzdy takto:

  1. Odečteme 4,5 % hrubé mzdy jako zdravotní pojištění, které platí zaměstnanec,
  2. Odečteme 6,5 % hrubé mzdy jako sociální pojištění, které platí zaměstnanec,
  3. Spočítáme daňový základ tak, že superhrubou mzdu zaokrouhlíme na stovky nahoru..
  4. Odečteme daň z příjmu, která činí 15% z daňového základu.
  5. Přičteme 2070 jako základní slevu na dani, na kterou má nárok každý.
  6. Výsledek zaokrouhlíme dolů na celé koruny.

Příklad: Celkové náklady na mzdu zaměstnance z hodinovou sazbou 450 Kč/h a 70% úvazkem jsou 70 807 Kč. Hrubá mzda činí 52 920 Kč a čistá mzda 38 533 Kč. Své výpočty můžete ověřit například na této stránce. Bude nám stačit už pouze jedna lekce, abyste takovou stránku dokázali vyrobit úplně sami.

Řešení

'use strict';

const hodinovaSazba = Number(prompt('Zadejte hodinovou sazbu'));
const uvazek = Number(prompt('Zadejte velikost úvazku v %')) / 100;
const hodinVPracovniDen = 8;
const pracovnichDnu = 21;

const hrubaMzda = Math.round(
  hodinovaSazba * uvazek * hodinVPracovniDen * pracovnichDnu,
);

console.log(hrubaMzda);

//superhruba
const superHruba = Math.ceil(hrubaMzda + hrubaMzda * 0.09 + hrubaMzda * 0.248);

console.log(superHruba);

//cista mzda
const zdravotniPojisteni = hrubaMzda * 0.045;
const socialniPojisteni = hrubaMzda * 0.065;
const danovyZaklad = Math.ceil(superHruba * 0.01) / 0.01;
const danZPrijmu = danovyZaklad * 0.15;
const cistaMzda = Math.floor(
  hrubaMzda - zdravotniPojisteni - socialniPojisteni - danZPrijmu + 2070,
);

console.log(cistaMzda);

9. Na doma | Ruleta

Na obrázku vidíte rozložení čísel na klasické Francouzské ruletě. Ruleta obsahuje čísla 0 - 36. Každé číslo s výjimkou nuly je buď sudé nebo liché a zároveň červené nebo černé. Pro čísla 1 až 10 a 19 až 28 platí, že lichá čísla jsou červená a sudá jsou černá. Pro zbytek platí obrácené pravidlo, tedy lichá jsou černá a sudá červená. Nula není ani lichá ani sudá, ani černá ani červená.

Ruleta

Vytvořte stránku, které uživatel zadá číslo a stránka odpoví jestli jde o číslo sudé nebo liché, černé nebo červené, nebo je to nula.

Řešení

'use strict';

const cislo = Number(prompt('Zadejte číslo (0 - 36):'));
let sude = false;
let cervene = false;

if (cislo !== 0) {
  if ((cislo >= 1 && cislo <= 10) || (cislo >= 19 && cislo <= 28)) {
    console.log(cislo);
    if (cislo % 2 === 0) {
      sude = true;
    } else {
      cervene = true;
    }
  } else {
    if (cislo % 2 === 0) {
      cervene = true;
      sude = true;
    }
  }

  document.write(`Zadané číslo ${cislo} je: `);
  if (sude) {
    document.write('sudé a ');
  } else {
    document.write('liché a ');
  }

  if (cervene) {
    document.write('červené.');
  } else {
    document.write('černé.');
  }
} else {
  document.write(`${cislo} není ani sudá ani lichá, ani červená ani černá.`);
}

10. Na doma | Přestupný rok

Napište program, který po zadání kalendářního roku vypíše, zda jde o rok přestupný, či nikoliv. Letopočet je přestupný, pokud je dělitelný čtyřmi. Roky, které jsou dělitelné 100 jsou ovšem přestupné pouze tehdy, jsou-li zároveň dělitelné 400.

Řešení

Řešení zatím nikdo nepřidal.

11. Na doma | Přestupný rok 2

Napište program, který po zadání kalendářního roku vypíše, zda jde o rok přestupný, či nikoliv. Pro výpis použijte funkci document.write. Její volání se však ve vašem kódu smí objevit pouze dvakrát.

Řešení

'use strict';

const rok = Number(prompt('Zadej rok:'));

let prestupnost = 'nepřestupný';

if (rok % 4 === 0) {
  prestupnost = 'přestupný';
  if (rok % 100 === 0 && rok % 400 !== 0) {
    prestupnost = 'nepřestupný';
  }
}

document.write(`Tvůj zadaný rok ${rok} je ${prestupnost}.`);

12. Na doma | Přestupný rok 3

Napište program, který po zadání kalendářního roku vypíše, zda jde o rok přestupný, či nikoliv. Pro výpis použijte funkci document.write, jejíž volání seve vašem kódu smí objevit pouze dvakrát. Zároveň v kódu nesmíte použít víc než dva logické operátory.

Řešení

'use strict';

const uzivatelRok = Number(prompt('Zadej rok:'));

const delCtyrmi = uzivatelRok % 4; // zbytek po deleni 4mi by mel byt nula (aby byl prestupny)
let delStem = 0;

if (uzivatelRok % 100 === 0) {
  delStem = uzivatelRok % 400; // pokud je rok delitelny 100, zjistime jaky je zbytek po deleni 400
}

const prestupny = delCtyrmi + delStem; // pokud jsou oba zbytky po deleni nula, vysledek bude nula

if (prestupny === 0) {
  // pokud je vysledek nula, rok je prestupny
  document.write('Rok je přestupný.');
} else {
  document.write('Rok není přestupný.');
}