Představte si, že tvoříte aplikaci na odesílání e-mailů. Každý e-mail je třeba zakončit zdvořilým pozdravem.
goodbye. Funkce do konzole vypíše rozloučení. Příklad použití:
> goodbye()
Nashledanougoodbye parametr představující jméno pisatele e-mailu. Funkce do konzole vypíše koncový pozdrav i se jménem. Příklad použití:
> goodbye('Pavel Ovesný')
S pozdravem Pavel Ovesnýgoodbye tak, aby místo vypisování do konzole vrátila pozdrav jako řetězec. Příklad:
> goodbye('Pavel Ovesný')
'S pozdravem Pavel Ovesný''use strict';
const goodbye1 = () => {
console.log('Nashledanou');
};
const goodbye2 = (name) => {
console.log(`S pozdravem ${name}`);
};
const goodbye3 = (name) => {
return `S pozdravem ${name}`;
};
Stáhněte si základ stránky, která zobrazuje jeden e-mail.
fillSubject s jedním parametrem subject. Tato funkce ze stránky vybere DOM element představující předmět e-mailu a nastaví jeho obsah na řetězec, který přišel v parametru. Zavolejte funkci z konzole a vykoušejte si nastavit předmět e-mailu na různé řetězce.fillBody s jedním parametrem body, která ze stránky vybere DOM element představující tělo e-mailu a nastaví jeho obsah dle hodnoty parametru. Funkci vyzkoušejte v konzoli.goodbye z předchozího cvičení. Do funkce fillBody přidejte další parametr s názvem name. Tento parametr bude představovat jméno odesílatele. Funkce vyplní tělo emailu a na konec přidá pozdrav, který vyrobí pomocí volání funkce goodbye.'use strict';
const goodbye = (name) => {
return `S pozdravem ${name}`;
};
const fillSubject = (subject) => {
document.querySelector('.email__subject').textContent = subject;
};
const fillBody = (text, name) => {
const emailBodyElm = document.querySelector('.email__body');
emailBodyElm.textContent = `${text} ${goodbye(name)}`;
};
Napište funkci convertToCZK, která převede částku zadanou v cízí měně na české koruny. Funkce bude podporovat následující měny a kurzy.
| Měna | Kód | Kurz |
|---|---|---|
| Euro | EUR | 27.015 |
| Britská libra | GBP | 29.615 |
| Americký dolar | USD | 23.197 |
Výslednou částku zakrouhlete na celé koruny. Příklad použití:
> convertToCZK(25, 'EUR')
675
Pokud funkce jako parametr dostane neznámý kód měny, vrátí jako výsledek null. Otestujte funkci v konzoli.
// první možnost řešení
const convertToCZK = (amount, currency) => {
if (currency === 'EUR') {
return Math.round(amount * 27.015);
} else if (currency === 'GBP') {
return Math.round(amount * 29.615);
} else if (currency === 'USD') {
return Math.round(amount * 23.197);
} else {
return null;
}
};
// druhá možnost řešení
const convertToCZK2 = (amount, currency) => {
const exchangeRates = {
EUR: 27.015,
GBP: 29.615,
USD: 23.197,
};
if (exchangeRates[currency]) {
return Math.round(amount * exchangeRates[currency]);
}
return null;
};
Přečtěte si následující úryvky kódu a u každého řekněte, co program vypíše do konzole aniž abyste program spouštěli.
Úryvek 1:
const name = 'Mississippi';
if (name.length > 5) {
const name = 'Missi';
console.log(name);
}
console.log(name);
Úryvek 2:
const name = 'Franta';
const greet = (name) => {
const name = 'Pepa';
console.log(name);
return 'Kuba';
};
console.log(greet('Jožin'));
Úryvek 3:
const age = 25;
if (age > 21) {
const price = 100;
} else if (age > 15) {
const price = 50;
} else {
const price = 0;
}
console.log(price);
'use strict';
const name = 'Mississippi';
if (name.length > 5) {
const name = 'Missi';
console.log(name);
}
console.log(name);
// Výledek
// <· Missi
// <· Mississippi
'use strict';
const name = 'Franta';
const greet = (name) => {
const name = 'Pepa';
console.log(name);
return 'Kuba';
};
console.log(greet('Jožin'));
// Výledek
// <X Uncaught SyntaxError: Identifier 'name' has already been declared
'use strict';
const age = 25;
if (age > 21) {
const price = 100;
} else if (age > 15) {
const price = 50;
} else {
const price = 0;
}
console.log(price);
// Výledek
// <X Uncaught ReferenceError: price is not defined at index.js:13
Vytvořte funkci salary se třemi parametry
wage - hrubá mzda v korunách za hodinuhours - kolik hodin denně průměrně precujetedays - kolik dní v měsící průměrně pracujeteFunkce spočítá vaši hrubou měsíční mzdu v celých korunách.
Dále vytvořte funkci taxed, která na vstupu obdrží částku a procento zdanění, a vrátí částku zdaněnou podle zadaných procent.
Použítím funkcí salary a taxed spočítejte svoji měsíční mzdu po 15% zdanění.
'use strict';
const salary = (wage, hours, days) => {
return wage * hours * days;
};
const taxed = (grossWage, tax) => {
return grossWage * (1 - tax / 100);
};
const mojeMzda = taxed(salary(300, 8, 21), 15);
console.log(mojeMzda);
Představte si úplně obyčejnou kalkulačku pouze s tlačítky pro čísla, čtyřmi základními operacemi a tlačítkem pro rovná se. Pokud na takové kalkulačce chcete spočítat něco velmi jednoduchého, například 2 + 3, musíme stisknout tlačíko [[2]], poté [[+]], pak [[3]] a pak [[=]]. Kalkulačka tedy nespočítá náš výsledek ve chvíli, kdy mačkáme [[+]], ale až ve chvíli, kdy mačkáme [[=]]. Musí si tedy zapamatovat, co jsme namačkali, a všecho spočítat až ve chvíli, kdy stiskneme [[=]].
Napište funkci calc se třemi parametry num1, op a num2, které představují první zadané číslo, zadanou operaci jako řetězec a druhé zadané číslo. Operace může být '+', '-', '*' nebo '/'. Funkce vrátí výsledek výpočtu pro zadanou operaci.
Příklad použití
> calc(2, '+', 3)
5
> calc(3, '*', 7)
21
> calc(10, '/', 4)
2.5
'use strict';
const calc = (num1, op, num2) => {
if (op === '+') {
return num1 + num2;
}
if (op === '-') {
return num1 - num2;
}
if (op === '*') {
return num1 * num2;
}
if (op === '/') {
if (num2 === 0) {
return null; // nelze dělit nulou
}
return num1 / num2;
}
return null; // neexistující operátor
};
Stáhněte si základ stránky, která nabízí předplatné za nějaké služby. Může jít například o internetovou televizi, pravidelné dovážky jídla nebo třeba webový hosting.
selectPlan s jedním parametrem planNumber. Tento parametr bude představovat číslo plánu. Funkce podle čísla plánu vybere ze stránky správný DOM element a přídá k němu CSS třídu plan--selected. Vyzkoušejte vaši funkci v konzoli s různými čísly.selectPlan lze na stránce postupně vybrat všechny plány. My bychom však chtěli, aby mohl být vybrát vždy nejvýš jeden. Upravte funkci selectPlan tak, že vybere plán zadaný v parametru a u ostatních plánů výběr zruší. Ke zrušení výběru stačí z pčíslušného prvku odebrat třídu plan--selected.'use strict';
const selectPlan = (planNumber) => {
// bod 2 odebrání aktuálně vybraného plánu
const oldPLan = document.querySelector('.plan--selected');
if (oldPLan) {
oldPLan.classList.remove('plan--selected');
}
// bod 1 vybrání plánu dle zadaného čísla
const newPlan = document.querySelector(`#plan${planNumber}`);
newPlan.classList.add('plan--selected');
};
// použití funkce např:
// selectPlan(2);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Cenník</title>
</head>
<body>
<div class="container">
<h1>Naše nabídka</h1>
<div class="plans">
<div id="plan1" class="plan plan--selected">
<h2 class="plan__type">Základní</h2>
<p class="plan__price">5€ / měsíc</p>
</div>
<div id="plan2" class="plan">
<h2 class="plan__type">Rozšířený</h2>
<p class="plan__price">10€ / měsíc</p>
</div>
<div id="plan3" class="plan">
<h2 class="plan__type">Mega</h2>
<p class="plan__price">20€ / měsíc</p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 16px;
}
body {
color: #666;
}
.container {
max-width: 40rem;
margin-left: auto;
margin-right: auto;
}
.plans {
display: flex;
flex-direction: row;
margin-left: -1rem;
margin-right: -1rem;
}
.plan {
flex: 1;
margin: 1rem;
padding: 2rem;
border-radius: 5px;
box-shadow: 0 0 10px #aaa;
text-align: center;
}
.plan h2 {
color: blueviolet;
}
.plan p {
font-weight: bold;
font-size: 1.2rem;
}
.plan--selected {
background-color: blueviolet;
color: white;
}
.plan--selected h2 {
color: white;
}
fillcut, která jako svůj první parametr str očekává řetězec a jako druhý parametr len kladné celé číslo. Úkolem funkci je oříznout nebo prodloužit zadaný řetězec tak, aby měl délku přesně len.
len, tak funkce odřízne jeho konec a vrátí výsledek.len, tak jej doplní od začátku znakem tečky a vrátí výsledek.len, funkce jej vrátí beze změny.Příklad použití:
> fillcut('petr', 8)
'....petr'
> fillcut('petr', 3)
'pet'
> fillcut('petr', 4)
'petr'
'use strict';
const fillcut = (str, len) => {
if (str.length === len) {
return str;
} else {
if (str.length < len) {
return str.padStart(len, '.');
} else {
return str.slice(0, len);
}
}
};
Napište funkci isLeapYear, která jako svůj parametr obdrží celé číslo představující rok. Funkce vrátí true, pokud je zadaný rok přestupný. V opačném případě vrátí false.
'use strict';
const isLeapYear = (year) => {
let isLeap = false;
if (year % 4 === 0) {
isLeap = true;
if (year % 100 === 0 && year % 400 !== 0) {
isLeap = false;
}
}
return isLeap;
};