JS Dev

1. JavaScript - Úvod

8 min čtení

JavaScript je programovací jazyk, který dnes běží prakticky všude. Můžeme v něm psát webové, mobilní a desktopové aplikace a i aplikace, které běží na serveru.

Otevři vývojářskou konzoli v prohlížeči (F12) a klikni na záložku “console”. Zkopíruj a vlož následující kód a stiskni enter.

Možná ti to nedovolí vkládat text, bacha. Přečti si tu chybovou hlášku, co to píše.

const greet = () => {
	console.log("Ahoj, světe!");
}

greet();
// Výstup: Ahoj, světe!

Gratuluju, už jsi oficiálně programátor*ka!

Proměnné

Proměnná je základ programování, uchováváme v ní data a následně s nimi pracujeme.

Hodnotu vypíšeme pomocí console.log

const pageTitle = "JavaScript - Úvod";
console.log(pageTitle);
// Výstup: JavaScript - Úvod

let viewCount = 100;
viewCount = viewCount + 1;
console.log(viewCount);
// Výstup: 101

Proměnná se v JavaScriptu deklaruje pomocí klíčových slov const a let. V kódu nahoře deklarujeme dvě proměnné - název kurzu a počet shlédnutí.

constlet
Nikdy nemůžeme přiřadit novou hodnotuHodnotu můžeme změnit a můžeme přiřadit novou
Snažíme se použít vždySnažíme se používat co nejméně
Nikdy nemůžeme znovu deklarovatNikdy nemůžeme znovu deklarovat
Vždy drží stejný datový typ (logicky)Datový typ se může změnit
Vždy proměnnou nazvi anglicky tak, aby byl z názvu jasný obsah. Nic se nestane, ale líp se to čte.
// ✅ Správně!
const accountBalance = 800;
const favouriteMovieLink = "https://www.csfd.cz/film/345767";
 
// ❌ Špatně!
const nevim = 12;
const variable = "2902736809/2010";
const háčkyČárkyToTakyUmíAlePůjdešDoPekla = 666;

Gratuluju, rozumíš prvnímu odbornému termínu - deklarace proměnné!

Do proměnných jdou ukládat různé typy dat - čísla, stringy, datumy… Rozlišujeme mezi sebou primitivní a komplexní datové typy.

Kód, který využívá proměnnou, musí následovat až po její deklaraci. Počítač (interpreter) to čte stejně jako Ty - odshora a zleva.

Jeden název proměnné nemůžeme použít dvakrát - musí být unikátní (později si vysvětlíme, že to není tak jednoduché).

Vyzkoušej:

  • Nadefinovat proměnnou, která obsahuje název tvého oblíbeného filmu.
  • Nadefinovat proměnnou, která obsahuje počet lidí na planetě zemi.
    • Přičti jednoho člověka (+)
    • Odečti 100 lidí (-)
    • Vynásob počet lidí dvěma (*)
    • Zredukuj populaci na polovinu (/)

Funkce

Když potřebuješ opakovat nějakou logiku pořád dokola, akorát s jiným vstupem, použiješ na to funkce.

// Zápis pomocí klíčového slovíčka function
function getUserGreeting(name) {
	// Tělo funkce - zde můžeš dělat třeba výpočet
	const greeting = `Zdarec, ${name}! 👋`;
	// Návratová hodnota funkce
	return greeting;
}

console.log(getUserGreeting("Hynku"));
// Výstup: Zdarec, Hynku! 👋
console.log(getUserGreeting("Viléme"));
// Výstup: Zdarec, Viléme! 👋
console.log(getUserGreeting("Jarmilo"));
// Výstup: Zdarec, Jarmilo! 👋

// Zápis pomocí "arrow function"
const getUserWelcomeMessage = (name) => {
	return `Vítej, ${name} 😁 Moc rád jsem že tu seš.`;
}

console.log(getUserWelcomeMessage("Lído"));
// Výstup: Vítej, Lído 😁 Moc rád jsem že tu seš.
console.log(getUserWelcomeMessage("Tomáši"));
// Výstup: Vítej, Tomáši 😁 Moc rád jsem že tu seš.
console.log(getUserWelcomeMessage("Štěpáne"));
// Výstup: Vítej, Štěpáne 😁 Moc rád jsem že tu seš.
Název funkcegetUserGreeting
Parametr funkce a typname - string
Typ návratové hodnotystring

Buď konzistentní

Vidíš, že funkce jde zapsat dvěma různými způsoby.

Je mezi nimi rozdíl, ale pro začátek Tě vůbec nemusí zajímat.1 Buď konzistentní, zkus ty zápisy nemíchat.

Parametrů funkce můžeš mít kolik chceš a můžou mít úplně jakýkoli datový typ - číslo, string, další funkce, objekt, array…

Tělo funkce může dělat ve svém scope2 úplně cokoli - počítat, načítat data, zapisovat data…

Funkce může vracet (returnovat) úplně cokoli - číslo, objekt, null, undefined…

Příklad použití funkcí

Zjednodušený výpočet úroku na ročním termínovaném vkladu3:

// Neřešíme nepřesnost desetinných čísel, neděláme core systém banky 💰
const CAPITAL_INCOME_TAX_RATE = 0.15; // 15 %

const getYearlyInterest = (startBalance, yearlyInterestRate) => {
	const interest = startBalance * yearlyInterestRate;
	return interest;
}

const getTaxAmount = (amount, taxRate) => {
	const tax = amount * taxRate;
	return tax;
}

const getTermDepositValues = (depositAmount, yearlyInterestRate, taxRate = CAPITAL_INCOME_TAX_RATE) => {
	const interestBeforeTax = getYearlyInterest(depositAmount, yearlyInterestRate);
	const interestTax = getTaxAmount(interestBeforeTax, taxRate);
	
	const interestAfterTax = interestBeforeTax - interestTax;
	// Hodnoty po jednom roce úročení
	const finalAmountAfterTax = depositAmount + interestAfterTax;
	
	return {
		depositAmount,
		interestBeforeTax,
		interestTax,
		interestAfterTax,
		finalAmountAfterTax
	};
}

const values = getTermDepositValues(10_000, 0.031);

console.log("Vložená částka: ", values.depositAmount);
// Výstup: Vložená částka:  10000
console.log("Úrok po jednom roce před daní: ", values.interestBeforeTax);
// Výstup: Úrok po jednom roce před daní:  310
console.log("Daň z úroku: ", values.interestTax);
// Výstup: Daň z úroku:  46.5
console.log("Úrok po zdanění: ", values.interestAfterTax);
// Výstup: Úrok po zdanění:  263.5
console.log("Celkem máš po 1 roce: ", values.finalAmountAfterTax);
// Výstup: Celkem máš po 1 roce:  10263.5

Na příkladu je použitej i default parameter taxRate - použije se výchozí hodnota, pokud ho nevyplníš.

Pravidla čisté funkce

  • Funkce dělá jednu věc a tu dělá dobře (je atomická)
  • Funkce funguje samostatně (nemá sideffecty)
    • Pracuje jenom s parametry, ne s hodnotami “okolo”4
    • Vrací hodnoty, nesahá na hodnoty “okolo”
  • Má konzistentní výstup - vrací vždy stejný datový typ
  • Když má více vstupních/výstupních parametrů, používej objekty

Když máš čistou funkci, můžeš k ní napsat testy a můžeš jí věřit. Na začátku určitě budeš mít funkce špinavý, ale neboj, to budeme ladit. Vždycky Ti poradím.

Vyzkoušej

Udělej funkci, která:

  • spočítá počet lidí na planetě Zemi po redukci populace na polovinu (lusknutí Rukavicí nekonečna)
  • spočítá týdenní počet prodaných smažáků v jídelně
    • ve škole je 500 studentů a denně si ho koupí 10 % z nich
  • spočítá počet gramů cukru v nápoji při zadání množství (ml) a množství (g) cukru na 100 mililitrů
    • 355ml plechovka RedBullu má 11 g cukru na 100 ml
    • 100ml sklenice vody má 0 g cukru na 100 ml
    • 1l lahev pomerančového džusu má 9.1 g cukru na 100 ml

Podmínky

Můžeme se v kódu rozhodovat, co se má stát, pokud nastala nějaká podmínka.

Stačí nám dvě klíčová slovíčka - if a else. Buď to, nebo to.

const isRaining = true;

// Pokud je proměnná isRaining true, spustí se následující kód
if (isRaining) {
	// Například ti připomene v 7:00, že si máš vzít deštník.
	console.log("Prší 🌧");
}
// Pokud je proměnná isRaining false, vykoná se následující kód
else {
	console.log("Neprší 😁");
}

Kód v if bloku se vykoná vždy, když je hodnota true. Na vysvětlení vyhodnocení podmínek slouží celá kapitola boolean.

const age = 17;

if (age < 18) {
	console.log("Zákaz prodeje alkoholických nápojů, tabákových výrobků, kuřáckých pomůcek, elektronických cigaret, nikotinových sáčků bez obsahu tabáku a bylinných výrobků určených ke kouření osobám mladším 18 let");
}

Ukážeme si složitější situaci na následujícím diagramu:

flowchart TD
    A(["function getItemsByWeather()"]) --> B{"Prší venku?"}
    B -- true --> C["Vem si deštník"]
    B -- false --> D{"Je teplo?"}
    D -- true --> n1["Vem si kraťasy"]
    D -- false --> n5["Vem si mikinu"]
    n2["Svítí sluníčko?"] -- true --> n3["Vem si sluneční brýle a čepici"]
    n1 --> n2
    n5 --> n2
    C --> D
    n2@{ shape: diam}

Ten bychom v JavaScriptu zapsali takto:

function getItemsByWeather(isRaining, isWarmWeather, isSunny) {
	if (isRaining) {
		console.log("Vem si deštník");
	}
	
	if (isWarmWeather) {
		console.log("Vem si kraťasy");
	}
	else {
		console.log("Vem si mikinu");
	}
	
	if (isSunny) {
		console.log("Vem si slunčení brýle a čepici");
	}
}

getItemsByWeather(false, true, true); // Spusť si to a schválně, co to vypíše.

Footnotes

  1. Je to něco, co by si potom reálně měl*a znát, můžou se Tě na to ptát třeba při pohovoru. Najdeš to v kapitole Function vs Arrow function. ↩

  2. TODO: Napsat na to separátní kapitolu. ↩

  3. Peníze v bance takhle nemůžeš počítat kvůli nepřesnosti desetinných čísel. Ale jako jednoduchá kalkulačka na webu je to good enough. Jak to dělat správně se řeší v úloze 3. Banka. ↩

  4. Můžeš vytvářet i closures, ale musíš vědět, co děláš. ↩

3 položek v této složce.