← Zpět na učím
1.3 První program
Výuka
"Hello, World!" je tradiční první program v každém jazyce. Ukážeme si ho v JavaScriptu i TypeScriptu.
Základní koncepty
console.log()- výpis do konzole- String (řetězec) - text v uvozovkách
- Středník
;- konec příkazu (volitelný v JS/TS)
JavaScript
V prohlížeči
Metoda 1: HTML soubor
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<title>První JS program</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
// Toto je komentář
console.log('Hello, World!');
console.log('Můj první JavaScript program!');
// Výpis do stránky
document.write('<p>Ahoj z JavaScriptu!</p>');
// Alert okno
alert('Vitaj!');
</script>
</body>
</html>
Metoda 2: Externí JS soubor
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>První program</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
// app.js
console.log('Hello, World!');
console.log('JavaScript funguje!');
// Více příkazů
const name = 'Jan';
const greeting = 'Ahoj, ' + name + '!';
console.log(greeting);
V Node.js
// app.js
console.log('Hello, World!');
console.log('Node.js je super!');
// Více řádků
console.log('Řádek 1');
console.log('Řádek 2');
console.log('Řádek 3');
# Spusť v terminálu
node app.js
# Výstup:
# Hello, World!
# Node.js je super!
# Řádek 1
# Řádek 2
# Řádek 3
TypeScript
Základní TypeScript program
// app.ts
const message: string = 'Hello, TypeScript!';
console.log(message);
// S typovou anotací
const name: string = 'Jan';
const age: number = 25;
const isStudent: boolean = true;
console.log(`Jméno: ${name}`);
console.log(`Věk: ${age}`);
console.log(`Student: ${isStudent}`);
Kompilace a spuštění
# 1. Zkompiluj TypeScript
tsc app.ts
# Vytvoří app.js
# 2. Spusť zkompilovaný JavaScript
node app.js
# Nebo vše najednou s ts-node:
npx ts-node app.ts
TypeScript s funkcí
// hello.ts
function greet(name: string): void {
console.log(`Hello, ${name}!`);
}
greet('World');
greet('TypeScript');
// greet(123); // ❌ Error: Argument of type 'number' is not assignable
Rozdíl JS vs TS
JavaScript:
// Bez typů - flexibilnější
const message = 'Hello';
console.log(message);
// Spustitelné přímo
// node app.js ✅
TypeScript:
// S typy - bezpečnější
const message: string = 'Hello';
console.log(message);
// Musí se zkompilovat
// tsc app.ts → app.js
// node app.js ✅
| JavaScript | TypeScript |
|---|---|
| Přímo spustitelný | Potřebuje kompilaci |
| Žádná typová kontrola | Kontrola typů při kompilaci |
| Flexibilnější | Bezpečnější |
Tip
💡 Rychlý start v prohlížeči:
<!-- Vytvoř index.html a otevři v prohlížeči -->
<script>
console.log('Ahoj!'); // F12 → Console
</script>
💡 Template literals (backticks):
const name = 'Jan';
// Staré (konkatenace)
console.log('Ahoj, ' + name + '!');
// Nové (template literal)
console.log(`Ahoj, ${name}!`); // ✅ Čitelnější
💡 Více výpisů najednou:
const x = 5;
const y = 10;
// Jedna hodnota
console.log(x); // 5
// Více hodnot
console.log(x, y); // 5 10
// S popisky
console.log('x:', x, 'y:', y); // x: 5 y: 10
// Objekt (pěkný výpis)
console.log({ x, y }); // { x: 5, y: 10 }
💡 Debugging:
console.log('Start');
console.log('Hodnota:', 123);
// debugger; // Zastaví program v Dev Tools
console.log('Konec');
Kvíz
Které výroky jsou pravdivé?
❌ - console.log() funguje i v Node.js
✅ - TS se musí zkompilovat na JS (tsc app.ts)
❌ - Středníky jsou volitelné (ale doporučené)
✅ - Template literals: `text ${variable}`
🎯 Závěrečný projekt
Po dokončení všech 8 dílů vytvoříte jednoduchou Todо aplikaci v čistém JavaScriptu. Naučíte se, jak aplikovat vše, co jste se naučili, na reálný projekt.
Zobrazit podrobnosti projektu →Informace o seriálu
Obtížnost
Délka
Cca 480 minut
Počet videí
8 videí + projekty
Certifikát
Po dokončení obdržíte certifikát
Lekce v této sekci
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
Struktura lekcí (souborový strom)
01. Zaklady jazyka
- 1.1 Úvod do JavaScriptu a TypeScriptu
- 1.2 Nastavení prostředí
- 1.3 První program
- 1.4 Proměnné: var, let, const
- 1.5 Datové typy - přehled
- 1.6 String (řetězce)
- 1.7 Number (čísla)
- 1.8 Boolean (pravda/nepravda)
- 1.9 Null a Undefined
- 1.10 Type Inference vs Annotations
- 1.11 Aritmetické operátory
- 1.12 Porovnávací operátory
- 1.13 Logické operátory
- 1.14 Komentáře
- 1.15 Console metody
02. Rizeni toku
03. Funkce
- 03.01 Deklarace funkce
- 03.02 Function Expression
- 03.03 Arrow Functions
- 03.04 Parametry a argumenty
- 03.05 Return hodnoty
- 03.06 Výchozí parametry
- 03.07 Rest parametry
- 03.08 Co je Scope
- 03.09 Lexikální Scope
- 03.10 Řetězec Scope
- 03.11 Globální Scope
- 03.12 Životní Cyklus Proměnných
- 03.13 Omezení Scope
- 03.14 Použití Closures
- 03.15 Callback funkce
- 03.16 Higher-order Functions
- 03.17 IIFE
- 03.18 Void funkce
- 03.19 Rekurze
04. Pole kolekce
05. Objekty
06. Typescript specifika
- v přípravě
07. Async
08. Moduly tridy
- v přípravě
09. React zaklady
- v přípravě
10. React hooks
- v přípravě
11. Nextjs zaklady
- 01 — Co je Next.js
- 02 — Vytvoření projektu
- 03 — Struktura projektu (app/)
- 04 — Page komponenty (page.js / page.tsx)
- 05 — Layout komponenty (layout.js / layout.tsx)
- 06 — File-based routing
- 07 — Dynamické routy ([id]/page.js)
- 08 — Link komponenta (navigace)
- 09 — Image komponenta (next/image)
- 10 — Metadata (title, description, Open Graph)
- 11 — Loading UI (loading.js / loading.tsx)
- 12 — Error handling (error.js / error.tsx)
- 13 — Not Found (not-found.js / not-found.tsx)
12. Nextjs server
- v přípravě
13. Databaze auth
- v přípravě
14. Nextjs pokrocile
- v přípravě