3

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

Vyzkoušíme si užitečné operace s řetězci a naučíme naše programy dělat rozhodnutí.

Přestože jsme se za poslední dvě lekce o JavaScriptu dozvěděli hodně, stačí nám to pouze na krátké přímočaré prográmky. S takovými ale dlouho nevystačíme. V této lekci proto do našeho arzenálu přidáme některé užitečné techniky pro práci s řetězci a naučíme se větvit běh programu pomocí podmínek.

Vlastnosti a metody

Z předchozí lekce už víme jak vytvářet jednoduché objekty a jak do nich přidávat vlastnosti. Za velkou pozornost však stojí fakt, že ostatní hodnoty v JavaScriptu jsou samy o sobě také objekty. Například každý řetězec je pod pokličkou objekt a my můžeme přistupovat k jeho vlastnostem stejně jako u objektů, které jsme vytvářeli sami.

U řetězců je situace v celku jednoduchá, protože mají pouze jednu vlastnost. Jmenuje se length a udává počet znaků v řetězci.

> 'martin'.length
6
> 'm'.length
1
> ''.length
0

Uvnitř objektů však kromě vlastností najdeme i takzvané metody methods . Metoda je funkce schovaná uvnitř objektu a je tak s ním pevně spjata. V praxi se totiž často stává, že některé funkce se hodí na práci pouze s jedním typem hodnoty. Například bychom mohli mít funkci toUpperCase, která by převedla všechna písmena v řetězci na velká. Kdyby taková funkce existovala, mohli bychom ji volat třeba takto

> toUpperCase('martin')
'MARTIN'

Je pochopitelné, že tato funkce funguje pouze pro řetězce. Pro ostatní hodnoty nedává smysl. Těžko si představit, co by taková funkce měla vrátit například v takovémto případě.

> toUpperCase(3.14)

Funkce, které pracují pouze na jednom typu objektu, můžeme svázat přímo s tímto objektem. Můžeme tedy říct, že funkce toUpperCase patří pouze řetězcům. Máme-li funkci, která patří pouze typu řetězec, voláme ji pomocí už známé tečkové notace.

> 'martin'.toUpperCase()
'MARTIN'

Funkce toUpperCase je prvním příkladem jednoduché metody. Výhoda je, že tato metoda v JavaScriptu skutečně existuje, takže výše uvedený kód bude fungovat. Podobně existuje například metoda toLowerCase. Vyzkoušejte si ji!

Užitečné metody na řetězcích

Na řetězcích máme v JavaScriptu spoustu metod, které nám umožňují provádět mnoho užitečných operací. Zde pro začátek vybereme pár z nich.

toUpperCase()
Převede všechna písmena na velká.
> 'popokatepetl'.toUpperCase()
'POPOKATEPETL'
toLowerCase()
Převede všechna písmena na malá.
> 'Popokatepetl'.toLowerCase()
'popokatepetl'
trim()
Odstraní bílé znaky ze začátku a konce.
> '  popokatepetl '.trim()
'popokatepetl'
slice(start, end)
Vyřízne z řetězce kus podle zadaných pozic začátku a konce. U této metody poprvé narážíme na jednu programátorskou výstřednost, kterou budeme potkávat pořád znovu a znovu: programátoři vždy počítají od nuly, nikoliv od jedničky jako běžní lidé. V řetězci 'martin' je tedy písmenko 'm' na pozici nula, písmenko 'a' na pozici 1 a tak dále. Metoda slice navíc bere dolní mez včetně, kdežto horní mez se bere vyjma.
> 'popokatepetl'.slice(4, 7)
'kat'
> 'popokatepetl'.slice(0, 3)
'pop'
indexOf(value)
Vyhledá řetězec zadaný v parametru value uvnitř řetězce, na kterém tuto metodu voláme. Vrací pozici prvního výskytu nebo -1 pokud se obsah value v řetězci nenachází.
> 'popokatepetl'.indexOf('kat')
4
> 'popokatepetl'.indexOf('po')
0
> 'popokatepetl'.indexOf('t')
6
> 'popokatepetl'.indexOf('katka')
-1
padStart(targetLength, padString)
Prodlouží řetězec na zadanou délku tak, že na začátek přidá opakování řetězce padString. Hodí se na zarovnávání nebo na formátování čísel.
> '12'.padStart(4, '0')
'0012'
> '12'.padStart(4, ' ')
'  12'
> '12'.padStart(3, ' ')
' 12'
> '12'.padStart(2, ' ')
'12'

Možná vám nyní vrtá hlavou, jestli funkce Math.round nebo console.log nejsou náhodou metody, když používají tečkovou notaci. Je to skutečně tak. Math i console jsou speciální JavaScriptové objekty, která sdružují metody pro matematické výpočty nebo pro práci s konzolí.

Interpolace řetězců

Když chceme v JavaScriptu vytvořit nějaký kus textu, například nějakou zprávu pro uživatele, často potřebujeme do tohoto textu vložit obsah několika různých proměnných.

const order = {
  id: 37214,
  product: 'pěnová matrace',
  delivery: '21.8.2021',
};

const { id, product, delivery } = order;

document.write(
  '<h2>Objednávka: ' + id + '</h2>',
  '<p>Zboží ' + product + ' bude doručeno ' + delivery + '.',
);

Abychom se ze všeho toho sčítání a uvozovek nezbláznili, moderní JavaScript nabízí nový zápis řetězců, kterému se odborně říká interpolace řetězců undefined . V tomto zápisu se místo obyčejný nebo dvojitých uvozovek používá takzvaný zpětný apostrof `. Pomocí tohoto zápisu můžeme obsah proměnných vložit do řetězce pomocí znaku $ a složených závorek.

document.write(
  `<h2>Objednávka: ${id}</h2>`,
  `<p>Zboží ${product} bude doručeno ${delivery}.',
);

Uvnitř složených závorek otevíráme jakési JavaScriptové okno, do kterého můžeme vepsat nejen proměnnou, ale zcela libovolný výraz, jehož výsledek bude automaticky zkonvertován na řetězec.

document.write(
  `<h2>Objednávka: ${String(id).padStart(8, '0')}</h2>`,
  `<p>Zboží ${product} bude doručeno ${delivery}.`,
);

Díky interpolaci řetězců se náš kód stává mnohem čitelnějším a budeme ji tedy používat všude, kde to půjde.

Víceřádkové řetězce

Když v JavaScriptu vytváříme HTML, které chceme vložit do stránky, často potřebujeme vygenerovat dlouhý řetězec, který se nám nevejde na jeden řáděk. V JavaScriptu ovšem nelze zapsat běžný řetězec na více řádků. Následující kód by bohužel nefungoval.

const content = '
  <header>
    <h1>Název stránky</h1>
  </header>
  <main>Obsah srtánky</main>
  <footer>Patička</footer>
';

Abychom takový řetězec sestavili, musíme si pomoct sčítáním řetězců.

const content = (
  '<header>' + 
  '  <h1>Název stránky</h1>' + 
  '</header>' + 
  '<main>Obsah stránky</main>' + 
  '<footer>Patička</footer>'
);

Tento zápis je ovšem dost neohrabaný a po čase nás začne vytáčet. Interpolace řetězců nás ale zachrání, neboť řetězce v uvozovkách nové řádky obsahovat mohou.

const content = `
  <header>
    <h1>Název stránky</h1>
  </header>
  <main>Obsah stránky</main>
  <footer>Patička</footer>
`;

Navíc můžeme do takového řetězce snadno zakomponovat proměnné a vytvořit tak obsah stránky opravdu profesionálně.

const order = {
  id: 37214,
  product: 'pěnová matrace',
  delivery: '21.8.2021',
};

const { id, product, delivery } = order;

const content = `
  <header>
    <h1>Objednávka: ${String(id).padStart(8, '0')}</h1>
  </header>
  <main>
    <p>Zboží ${product} bude doručeno ${delivery}.</p>
  </main>
  <footer>www.matrace-a-syn.cz</footer>
`;

document.write(content);

Cvičení: Práce s řetězci

1

Vlastnosti a metody

pohodička

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

Emaily

to dáš

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

Doručování

to dáš

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.

Pravdivostní hodnoty

Ve zbývající části lekce se vrhneme na podmínky a umožníme naším programům dělat rozhodnutí. Před tím si ale musíme trošku připravit půdu a ukázat si nový typ hodnoty. Zatím jsme viděli čísla, řetězce a objekty. Nyní přichází takzvané pravdivostní hodnoty boolean values . Čísel a řetězců je nekonečně mnoho, pravdivostní hodnoty jsou však jen dvě: true a false. Používají se k tomu, abychom vyjádřili, zda je něco pravda nebo není. Například:

> const pristupPovolen = false
> const vstupJeCislo = true
> const mobilniProhlizec = true

K tomu, abychom mohli v našich programech činit rozhodnutí budeme také potřebovat výrazy, které vrací pravdivostní hodnoty. Ty můžeme sestavit pomocí takzvaných porovnávacích operátorů comparison operators .

> const age = 21
> age > 18
true
> age > 21
false
> age >= 21
true
> age === 21
true
> age !== 21
false

Kompletní sada porovnávacích operátorů vypadá takto.

Operátor Popis
>větší než
>=větší nebo rovno
<menší než
<=menší nebo rovno
===rovno
!==nerovno

V JavaScriptu můžete narazit i na operátory == a !=. Ty však nebudeme nikdy používat, protože v některých případech mohou zanést do našeho programu nechtěné chyby.

Podmínky

Nyní se konečně dostáváme k tématu, na které jsme se tak dlouho připravovali. Doposud všechny naše programy vypadaly jako sekvence příkazů vykonávané jeden za druhým. Pro komplikovanější problémy ale budeme potřebovat umožnit, aby se některé části programu vykonaly jen za určitých podmínek.

Pro jednoduchý příklad se opět vraťme k našemu ultramaratonskému běhu. Závod začiná ve tři hodiny odpoledne a počítáme s tím, že závodníci doběhnou někdy příští den ráno. Nebudeme ale v cíli čekat na každého dědulu, který to celé poběží 20 hodin. Řekněme, že organizátoři mají padla druhý den v poledne. Potřebujeme tedy do naší stránky zakomponovat informaci o tom, jestli trasu dokážeme uběhnout do 12 hodin.

'use strict';

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

if (konec > 12) {
  document.write('Překročena maximální délka závodu!');
} else {
  document.write('Konec závodu ve ' + konec + ' hodin');
}

Toto je příklad velmi jednoduché podmínky se dvěm větvemi. V závorkách po klíčovém slovu if musí vždy být výraz, který vrací pravdivostní hodnotu. Podle toho, jestli je výsledek výrazu true nebo false, se buď vykoná kód v prvních složených závorkách, nebo kód v závorkách za slovem else. Tady se proprvé potkáváme s takzvanými bloky kódu, které jsou téměř nezbytnou ingrediencí všech programů.

Bloky kódu

Pokud nějaké řádky kódu uzavřeme do složených závorek, vytváříme takzvaný blok. JavaScript každý blok chápe jako samostatnou jednotku, která se vykoná za určité situace. Taková situace může být například splnění nebo nesplnění výrazu v podmínce. Později uvidíme další situace, kde se nám budou bloky kódu hodit.

Aby se nám kód dobře četl, odsazujeme řádky uvnitř bloku o kus doprava. V tomto kurzu budeme používat dvě mezery. Pokud máte VS Code nastavené podle naších doporučení, při psaní se vám řádky budou automaticky odsazovat. Stisknutím tabulátoru Tab pak můžete odsazení vložit sami. Stisknutím Shift+Tab jej naopak zrušíte. To se hodí pokud chcete například odsadit velký kus kódu najednou. Stačí jej vybrat myší a stiknout Tab nebo Shift+Tab.

Je dobré mít na paměti, že odsazování a obecně většina bílých znaků je především pro nás lidi, tedy pro čtenáře kódu. Počítači, tedy přesnějí JavaScript runtimu, jsou bílé znaky jedno. Můžeme si je tady dávat kam chceme. Následující dva zápisy jsou z hlediska runtimu zcela stejné.

if (age >= 18) {
  document.write('Nalej si');
} else {
  document.write('Žádné chlastání!');
}
if(age>=18){document.write('Nalej si');} 
else{document.write('Žádné chlastání!');}

Věřím, že uznáte, že první varianta je mnohem čitelnější než druhá. Způsobů, jak formátovat kód existuje vícero a můžete se tak účastnit nekonečných hospodských disputací o tom, jestli odsazovat pomocí dvou mezer nebo čtyř, jestli otvírací složenou závorku psát na konec řádku nebo na začátek nového a tak dále.

if ( age >= 18 ) 
{
    document.write('Nalej si');
} 
else 
{
    document.write('Žádné chlastání!');
}

Nakonec je však důležité hlavně si nějaká pravidla stanovit a ta pak dodržovat. V tomto směru existuje několik manuálů, kterým se říká style guide. Ty kodifikují určitá pravidla formátování kódu tak, abyste je nemuseli vždy od nuly vymýšlet sami. Ve firmě nebo v programátorském týmu pak stačí říct, že používáme takový nebo onaký style guide a předejít tak nekonečným diskuzím o tom, kde mají být mezery a kde ne. V tomto kurzu používáme AirBnB style guide.

Podmínky s více větvemi

Zatím jsme viděli podmínky se dvěma větvemi. Není ovšem problém mít podmínku například jen s jednou větví.

if (age >= 18) {
  document.write('Nalej si');
}

Pokud je výraz v podmínce false, blok kódu se prostě přeskočí. Občas ale naopak potřebujeme podmínky s vícero větvemi. Uvažte například situaci, kdy se snažíme ohodnotit písemku známkami A až F podle dosaženého počtu budů.

let znamka = '';
if (body >= 90) {
  znamka = 'A';
} else if (body >= 80) {
  znamka = 'B';
} else if (body >= 70) {
  znamka = 'C';
} else if (body >= 60) {
  znamka = 'D';
} else if (body >= 50) {
  znamka = 'E';
} else {
  znamka = 'F';
}

V takto rozvětvené podmínkce JavaScript runtime prochází jednotlivé výrazy dokud nenarazí na ten, který se vyhodnotí jako true. Vykoná příslušný blok a kódu a zbylé větve přeskočí. Vykoná se tak pouze první větev, která se vyhodnotí jako true. Pokud by byly všechny výrazy false, vykoná se větev else. Jak už víme, větev else přítomná být nemusí. Výše udovedný kód bychom tedy mohli malinko zkrátit takto.

let znamka = 'F';
if (body >= 90) {
  znamka = 'A';
} else if (body >= 80) {
  znamka = 'B';
} else if (body >= 70) {
  znamka = 'C';
} else if (body >= 60) {
  znamka = 'D';
} else if (body >= 50) {
  znamka = 'E';
}

Vnořené podmínky

Každý blok kódu může obsahovat libovolné příkazy, tedy i další podmínky. Můžeme tak snadno vnořovat podmínky do sebe.

if (age >= 18) {
  document.write('Nalej si');
} else {
  const remains = 18 - age;
  if (remains < 2) {
    document.write('Ještě si chvíli počkej');
  } else if (remains < 5) {
    document.write('Co to tady zkoušíš?');
  } else {
    document.write('Utíkej za mamkou!');
  }
}

Takto můžeme vytvářet relativně komplikované rozhodování. Se zanořováním podmínek je ale dobré to příliš nepřehánět. Málokdo se dokáže snadno zorientovat v temných hlubínách pětkrát zanořené podmínky. Později se naučíme strategie, jak se takovým hlubokým zanořením vyhnout.

Cvičení: Podmínky

4

Registrace na očkování

to dáš

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

Cena vstupenky

to dáš

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.

Doporučené úložky na doma

6

FIT Email

to dáš

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

Množstevní slevy

to dáš

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.

8

Superhrubá mzda

zapni hlavu

Vytvořte webovou stránku, která pomůže zaměstnavatelům spočítat náklady na jednoho zaměstnance, tedy takzvanou 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.

Povinné čtení na doma - logické operátory

V matematice jsme zvyklí na takzvané aritmetické operátory, tedy plus, mínus apod. Takové operátory obecně vyrábějí z čísel jiná čísla, například

> 2 + 3
5

Logika má však také své operátory, kterým se (logicky) říká logické operátory. Tyto operátory místo čísel pracují s pravdivostními hodnotami. Můžeme tak použít například operátor &&.

> true && true
true
> true && false
false
> false && true
false
> false && false
false

Tento operátor v podstatě znamená a zároveň. Tedy pokud jsou obě hodnoty true, výsledek je také true. Jinak je výsledek false.

Můžeme také použít operátor nebo který se píše jako dvě roury ||.

> true || true
true
> true || false
true
> false || true
true
> false || false
false

Operátor || vrací true v případě, že alespoň jedna z hodnot je true. Jako poslední máme operátor negace, který se píše jako vykřičník !. Ten jen vrací opak zadané pravdivostní hodnoty.

> !true
false
> !false
true

Tyto logické operátory můžeme s výhodou využít v našich podmínkách. Například bychom mohli chtít zkontrolovat, že věk uživatele je mezi 15 a 18. Chceme tedy logicky říct že věk je větší nebo roven 15 a zároveň menší nebo roven 18. Kombinujeme tak vlastně dva logické výrazy do jednoho.

if (age >= 15 && age <= 18) {
  document.write('Jsi mladistvým intelektuálem');
}

V jiném případě můžeme chtít zkontrolovat, že věk uživatele je menší než 18 nebo větší či roven 65.

if (age < 18 || age >= 65) {
  document.write('Nemusíš pracovat');
}

Tutéž podmínku bychom mohli napsat pomocí negace.

if (!(age >= 18 && age < 65)) {
  document.write('Nemusíš pracovat');
}

Takovýto výraz už je však trochu hůře k přečtení. Logické operátory jsou užiteční pomocníci, v praxi je však dobré s nimi šetřit. Pokud výraz ve vaší podmínce obsahuje více než jeden logický operátor, váš kód se stává těžko čitelným a pochopitelným. Držte se proto při používání logickách operátor pri zemi. Vaši budoucí kolegová vás za to budou mít rádi.

Volitelné úložky na doma

9

Ruleta

to dáš

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.

10

Přestupný rok

zapni hlavu

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.

11

Přestupný rok 2

zavařovačka

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.

12

Přestupný rok 3

smrt v přímém přenosu

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.

Shrnutí

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

  • použítí vlastnosti length a metod řetězců:
    • toUpperCase, toLowerCase,
    • trim, slice,
    • indexOf,
    • padStart,
  • interpolaci řetězců,
  • booleovské hodnoty,
  • porovnávací operátory,
  • jednoduché podmínky if, else,
  • složitější podmínky if, else if, else,
  • jak správně psát a formátovat bloky kódu,
  • logické operátory &&, || a !.