JavaScript —
základy jazyka

Proč JavaScript?

HTML = struktura. CSS = vzhled. JavaScript = chování. JS je jediný programovací jazyk nativně podporovaný prohlížeči — a díky Node.js běží i na serveru. Je to nejrozšířenější jazyk světa.

Proměnné: let, const, var

Proměnné ukládají hodnoty. Moderní JS používá const a let — var je zastaralý a má nebezpečné chování.

// const — nelze přiřadit novou hodnotu (ale obsah objektu/pole měnit lze)
const jmeno = "Jana";
const PI = 3.14159;

// let — lze přiřadit novou hodnotu
let vek = 30;
vek = 31; // ✅ OK

// var — NEPOUŽÍVAT (function scope, hoisting problémy)
var stare = "zastarele"; // ❌ nepoužívat

// Pravidlo: výchozí const, jen pokud nutno měnit → letKopírovat

Scope (rozsah platnosti)

// Block scope (let, const) — platí jen uvnitř {}
{
  let x = 10;
  const y = 20;
}
// console.log(x); // ❌ ReferenceError!

// Function scope
function mojeFunkce() {
  let lokalni = "jen tady";
}
// console.log(lokalni); // ❌ ReferenceError!

// Global scope — platí všude (pozor na kolize!)
let globalní = "všude";Kopírovat

Datové typy

JavaScript má 8 datových typů — 7 primitivních a 1 referenční (Object):

// Primitivní typy
typeof 42              // "number"
typeof 3.14            // "number" (jen jeden číselný typ!)
typeof "text"          // "string"
typeof true            // "boolean"
typeof undefined       // "undefined" (proměnná bez hodnoty)
typeof null            // "object" (!!! historická chyba v JS)
typeof Symbol("id")    // "symbol"
typeof 9007199254740991n // "bigint"

// Referenční typy (vše ostatní)
typeof {}              // "object"
typeof []              // "object" (pole je objekt!)
typeof function(){}    // "function"

// Kontrola pole
Array.isArray([])      // trueKopírovat

Type coercion — záludnosti JS

Funkce

Funkce jsou bloky kódu, které lze opakovaně volat. V JS existuje více způsobů jejich zápisu — každý má své místo:

// 1. Function declaration (hoistovaná — lze volat před definicí)
function pozdrav(jmeno) {
  return `Ahoj, ${jmeno}!`;
}

// 2. Function expression (není hoistovaná)
const pozdrav2 = function(jmeno) {
  return `Ahoj, ${jmeno}!`;
};

// 3. Arrow function (moderní, kratší syntaxe)
const pozdrav3 = (jmeno) => `Ahoj, ${jmeno}!`;
const kvadrat = x => x * x;         // jeden parametr — závorky volitelné
const secti = (a, b) => a + b;      // implicitní return
const slozitejsi = (a, b) => {      // s tělem funkce
  const soucet = a + b;
  return soucet * 2;
};

// Výchozí hodnoty parametrů
function pozdrav4(jmeno = "cizinče") {
  return `Ahoj, ${jmeno}!`;
}
pozdrav4();        // "Ahoj, cizinče!"
pozdrav4("Jana");  // "Ahoj, Jana!"

// Rest parametry
function soucet(...cisla) {
  return cisla.reduce((acc, n) => acc + n, 0);
}
soucet(1, 2, 3, 4); // 10Kopírovat

Podmínky a logické operátory

// if / else if / else
const skore = 75;
if (skore >= 90)      console.log("A — výborně");
else if (skore >= 75) console.log("B — chvalitebně");
else if (skore >= 60) console.log("C — dobře");
else                  console.log("Nedostatečně");

// Ternární operátor
const zprava = skore >= 60 ? "Prošel" : "Neprošel";

// switch
switch (new Date().getDay()) {
  case 0: console.log("Neděle"); break;
  case 6: console.log("Sobota"); break;
  default: console.log("Pracovní den");
}

// Logické operátory
console.log(true && false);  // false (AND)
console.log(true || false);  // true  (OR)
console.log(!true);          // false (NOT)

// Nullish coalescing ?? (nová hodnota jen pokud null/undefined)
const uzivatel = null;
const jmeno = uzivatel ?? "Host"; // "Host"

// Optional chaining ?. (bezpečný přístup k vlastnostem)
const user = { adresa: { mesto: "Praha" } };
console.log(user?.adresa?.mesto);    // "Praha"
console.log(user?.telefon?.cislo);   // undefined (ne chyba!)Kopírovat

Smyčky

// for — klasická smyčka s indexem
for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

// while — dokud platí podmínka
let i = 0;
while (i < 5) { console.log(i); i++; }

// do...while — provede alespoň jednou
do { console.log(i); i++; } while (i < 5);

// for...of — iterace přes pole (hodnoty)
const ovoce = ["jablko", "hruška", "švestka"];
for (const polozka of ovoce) {
  console.log(polozka);
}

// for...in — iterace přes klíče objektu
const osoba = { jmeno: "Jana", vek: 30 };
for (const klic in osoba) {
  console.log(`${klic}: ${osoba[klic]}`);
}

// break a continue
for (let i = 0; i < 10; i++) {
  if (i === 3) continue; // přeskočí 3
  if (i === 6) break;    // zastaví na 6
  console.log(i); // 0,1,2,4,5
}Kopírovat

Pole a objekty

Pole (Array)

const cisla = [1, 2, 3, 4, 5];

// Přístup k prvkům (index od 0)
cisla[0];        // 1
cisla.at(-1);    // 5 (poslední — moderní syntax)

// Mutující metody (mění originál)
cisla.push(6);          // přidá na konec
cisla.pop();            // odebere z konce
cisla.unshift(0);       // přidá na začátek
cisla.splice(2, 1);     // odebere 1 prvek od indexu 2

// Nemutující metody (vrátí nové pole) ✅
cisla.map(x => x * 2)   // [2,4,6,8,10]
cisla.filter(x => x > 2) // [3,4,5]
cisla.reduce((a,b) => a+b, 0) // 15
cisla.find(x => x > 3)  // 4 (první shoda)
cisla.findIndex(x => x > 3) // 3
cisla.includes(3)        // true
cisla.some(x => x > 4)  // true
cisla.every(x => x > 0) // true
cisla.slice(1, 3)        // [2,3] (nové pole)
[...cisla, 6]            // [1,2,3,4,5,6] (spread)Kopírovat

Objekty

const produkt = {
  id: 42,
  nazev: "Kapesní nůž",
  cena: 299,
  dostupny: true,
  kategorie: { nazev: "Nože", slug: "noze" }
};

// Přístup
produkt.nazev;           // "Kapesní nůž"
produkt["cena"];         // 299 (dynamický klíč)

// Destructuring
const { nazev, cena } = produkt;
const { kategorie: { slug } } = produkt; // vnořený

// Spread & merge
const updated = { ...produkt, cena: 349 };
const merged  = { ...obj1, ...obj2 };

// Object metody
Object.keys(produkt)    // ["id","nazev","cena",...]
Object.values(produkt)  // [42,"Kapesní nůž",299,...]
Object.entries(produkt) // [["id",42],["nazev","Kapesní nůž"],...]Kopírovat

Praktické cvičení

Napište funkci analyzujStudenty(studenti), která přijme pole objektů se jménem a skóre. Vrátí objekt s: průměrným skóre, nejlepším studentem, počtem úspěšných (skóre ≥ 60), a seřazeným polem od nejlepšího.

Taháček — rychlá reference

Proměnné & typy

const x = 1;          // nelze přiřadit znovu
let y = 2;            // lze měnit
// var               // NEPOUŽÍVAT

typeof x              // "number"
x === y               // striktní srovnání (vždy používat)
x ?? "default"        // nullish coalescing
obj?.prop?.sub        // optional chainingKopírovat

Funkce

const fn = (a, b = 0) => a + b;        // arrow, default
const fn2 = (...args) => args.length;  // rest paramsKopírovat

Pole — nejdůležitější metody

arr.map(fn)        // transformace → nové pole
arr.filter(fn)     // filtrace → nové pole
arr.reduce(fn, 0)  // agregace → jedna hodnota
arr.find(fn)       // první shoda → prvek nebo undefined
arr.includes(x)    // boolean
arr.some(fn)       // aspoň jeden splňuje
arr.every(fn)      // všechny splňují
[...arr, x]        // spread — přidat prvek
arr.slice(1,3)     // výřez (nemutuje)Kopírovat

Objekty

const { a, b } = obj;           // destructuring
const { a: alias } = obj;       // s přejmenováním
const copy = { ...obj, x: 1 }; // spread & přepis
Object.keys/values/entries(obj)Kopírovat