Skip to content

Latest commit

 

History

History
221 lines (169 loc) · 6.79 KB

lekce-04.md

File metadata and controls

221 lines (169 loc) · 6.79 KB

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

Vlastnosti a metody

V JavaScriptovém programu si založte proměnnou title a uložte do ní název svého oblíbeného filmu (např. Pán prstenů). Proveďte následující úkoly.

  1. Vypište do stránky počet znaků názvu.
  2. Vypište název filmu převedený na velká písmena.
  3. Vypište z názvu prvních pět písmen.
  4. Vypište z názvu posledních pět písmen.
Řešení 
const title = "Lord of the Rings";
document.body.innerHTML += title.length;
document.body.innerHTML += `<br>`;
document.body.innerHTML += title.toUpperCase();
document.body.innerHTML += `<br>`;
document.body.innerHTML += title.slice(0, 5);
document.body.innerHTML += `<br>`;
document.body.innerHTML += title.slice(title.length - 5, title.length)

E-maily

Vytvořte stránku, která bude pracovat s e-mailovými adresami ve formátu

jmeno.prijmeni@domena

Tedy například:

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

  1. Vytvořte jednoduchou webovou stránku s JavaScriptovým programem.
  2. Nechte uživatele zadat jeho e-mail a uložte si jej do proměnné email.
  3. Pomocí metody indexOf najděte v tomto e-mailu pozici znaku zavináč. Tuto pozici si uložte do proměnné atIndex.
  4. Pomocí metody slice získejte z e-mailu první část představující uživatelské jméno uživatele.
  5. Dále z e-mailu získejte název domény tedy například gmail.com.
  6. Ze 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 stránky. Každou hodnotu vypište jako odstavec.
Řešení 
const email = prompt('Zadejte e-mail:');
const atIndex = email.indexOf('@');
const parsedEmail = {
  userName: email.slice(0, atIndex),
  domain: email.slice(atIndex + 1),
};
document.body.innerHTML =
  '<p>Uživatelské jméno: ' + parsedEmail.userName + '</p>';
document.body.innerHTML += '<p>Doména: ' + parsedEmail.domain + '</p>';

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 
    <address>
  <p>Pod Stájemi 67</p>
  <p>12754 Klysnov</p>
</address>
  3. Pomocí document.body.innerHTML vložte sestavené HTML do stránky.
Řešení 
const street = prompt('Zadejte ulici:');
const houseNumber = prompt('Zadejte číslo domu:');
const city = prompt('Zadejte město:');
const zipCode = prompt('Zadejte PSČ:');

document.body.innerHTML = `
   <address>
      <p>${street} ${houseNumber}</p>
      <p>${zipCode} ${city}</p>
   </address>
`;

Cvičení: Podmínky

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.

Vytvořte novou stránku, nebo pokračujte ve stránce z předchozí lekce pro registraci na očkování.

  1. Nejdříve nechte uživatele zadat všechny hodnoty, tedy jméno, věk i heslo. Uložte si je do dobře pojmenovaných proměnných.
  2. Napište první podmínku, ve které zkontrolujte, že věk uživatele je větší nebo roven 65. Pokud ano, vypište do stránky „věk v pořádku“. Pokud uživateli není alespoň 65 let, vypište „nízký věk“.
  3. Napište druhou podmínku, která zkontroluje, zda je zadané heslo delší než osm znaků. Pokud není, vypište „slabé heslo“. Heslo se bude kontrolovat pouze v případě, kdy uživatel splnil první podmínku (věk alespoň 65 let).
Řešení 
const name = prompt('Zadejte své jméno:');
const age = Number(prompt('Zadejte svůj věk:'));
const heslo = prompt('Zadejte nové heslo:');

if (age >= 65) {
  document.body.innerHTML += '<p>Věk je v pořádku</p>.';
  if (heslo.length <= 8) {
    document.body.innerHTML += '<p>Slabé heslo</p>.';
  } else {
    document.body.innerHTML += '<p>Heslo je v pořádku</p>.';
  }
} else {
  document.body.innerHTML += '<p>Nízký věk</p>.';
}

Cena vstupenky

Pokusme se o základ jednoduchého rezervačního sestému pro vstupenky do divadla.

  1. Založte si webovou stránku s JavaScriptem.
  2. Nechte uživatele zadat jeho věk.
  3. Vytvořte si proměnnou plnaCena, udávající základní cenu vstupenky a uložte do ní hodnotu 12.
  4. 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).
  1. Nezapomeňte na zaokrouhlování, ať nám cena vyjde v celých eurech.
  2. Nakonec spočtenou cenu vypište s nějakou hezkou zprávou na výstup.
Řešení 
const plnaCena = 12;
let cena;
const age = Number(prompt('Zadejte svůj věk:'));
if (age < 6) {
  cena = 0;
} else if (age >= 6 && age <= 26) {
  cena = plnaCena * 0.65;
} else if (age >= 27 && age <= 64) {
  cena = plnaCena;
} else {
  cena = plnaCena * 0.5;
}
cena = Math.ceil(cena);
document.body.innerHTML += `<p>Cena lístku je ${cena} €.`;

Druhá možnost, plnou cenu bereme jako základní a v if testujeme jenom výjimky:

const plnaCena = 12;
let cena = plnaCena;
const age = Number(prompt('Zadejte svůj věk:'));
if (age < 6) {
  cena = 0;
} else if (age >= 6 && age <= 26) {
  cena = plnaCena * 0.65;
} else if (age > 64) {
  cena = plnaCena * 0.5;
}
cena = Math.ceil(cena);
document.body.innerHTML += `<p>Cena lístku je ${cena} €.`;

Pro fajnšmekry třetí možnost s operátorem *=, který funguje podobně jako +=, ale pro násobení. Tato možnost neodpovídá přesně zadání, protože vůbec nepotřebujeme proměnnou plnaCena:

let cena = 12;
const age = Number(prompt('Zadejte svůj věk:'));
if (age < 6) {
  cena = 0;
} else if (age >= 6 && age <= 26) {
  cena *= 0.65;
} else if (age > 64) {
  cena *= 0.5;
}
cena = Math.ceil(cena);
document.body.innerHTML += `<p>Cena lístku je ${cena} €.`;