9. Javascript

Opakování

  • Co je to Internet?
  • Co je to protokol?
  • Co je to WWW?
  • Co je to HTML?
  • Co je to Web Browser?
  • Jaký je tag nadpisu a jaká jsou pravidla pro jeho použití?
  • Co je to CSS?

Opakování

  • Pomocí jaké vlastnosti v CSS můžeme vycentrovat text?
  • K čemu slouží hover?
  • Jaké máme typy selektorů?
  • Z čeho se skládá základní struktura HTML?
  • Jakým způsobem propojíme externí CSS soubor s HTML?
  • Co je to GitHub a co nám umožňuje?
  • Co je to příkazová řádka a k čemu slouží?
  • Jaký je rozdíl mezi <b> a <strong>?

PROGRAMOVACÍ JAZYKY

  • Způsob jak říct počítači co má dělat
  • Počítač umí jenom dělat hodnĕ rychle to co je mu řečeno, že má dělat sám nedokáže nic – Úkolem programátora je právě říkat počítači co má dělat
  • K tomu se využívají programovací jazyky
  • Je mnoho programovacích jazyků, jelikož jde s počítačem komunikovat o různých věcech, na různé věci se hodí různý jazyky
  • My se budeme učit jazyk jménem JavaScript

JavaScript

JavaScript-Historie

  • možná jste slyšeli o programovacím jazyku Java
  • JavaScript využil hypu okolo jazyka a využil ho ve jméně
  • 1995 Brendan Eich (USA)
  • pracoval ve společnosti NetScape
  • společnos se jako první pokusila monetizovat WWW -> vlastní browser

  • WWW - 1989

  • 1998 Ztráta NetScape browser popularity (internet explorer konkurence)
  • 1998 Open-Source projekt Mozila

První prototyp vytvořen za 10 dní!

JavaScript

  • řadí se mezi vysokoúrovňové programovací jazyky
  • dle 2024 nejpopulárnějším programovacím jazykem na světě
  • Rychle a jednoduše se píše
  • Jeden z nejlepších jazyků pro začátečníky

JavaScript

  • Programovací jazyk
  • skriptovací jazyk = programovací jazyk
  • rozdíl je v tom, že skript. jsou interpretovaný vs programovací kompilovaný...
  • Interpretovaný a kompilovaný jsou jenom kroky co musí dělat počítač s kódem předtím než ho spustí
  • Jazyk dělaný k HTML a CSS
  • Má ale mnohem více využití
  • Dělaný na to aby byl spouštěn ve webových prohlížečích... NodeJS

NodeJS

NodeJS

  • simuluje prostředí prohlížeče, můžeme tedy spouštět mimo prohlížeč
  • také se používá na programování webových serverů... backend

JS v propojení s HTML

DOM - ukázka

<!DOCTYPE html>
<html>
<body>

	<h2>JavaScript</h2>

	<p id="demo">JavaScript umí měnit vnitřek tagů</p>

	<button type="button"
    onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>
	Click Me!
    </button>

</body>
</html>

DOM - ukázka

<!DOCTYPE html>
<html>
<body>

	<h2>JavaScript v body</h2>

	<p id="demo"></p>

	<script>
      document.getElementById("demo").innerHTML = "Změněno!";
	</script>

</body>
</html>

Špatný písmenka?

Chybí head

přidej meta charset UTF 8

Proměnné

  • Způsob ukládání dat
  • Ukládá se do RAM
  • Po vypnutí programu se smažou
  • používá keyword let nebo const

let

const

Datový typy

  • Staticky typované jazyky
    • C#, C++
  • Dynamicky typované jazyky
    • JavaScript, Python

C#

int x = 1;
string jméno = "Jan";
bool plnoletý = false;
float výška = 1.8;

JS

let x = 1;
let jméno = "Jan";
let plnoletý = false;
let výška = 1.8;
Datové typy

STRING

  • textový řetězec
  • "Ahoj", "Adam Přibyl", "Jak se máš?"
let x = "ahoj";

NUMBER

  • číslo
  • 4, 4.23
let num1 = 23;
let num2 = 2.4;

BOOLEAN

  • Pravdivost
  • false/true
  • 0/1
let vysledekCovidTestu = false;

CHAR

  • Znak
  • "a", "b", "c", "d", "e", "f"
let znamkaZTestu = "A";

Aritmetické operátory

  • +: sčítání proměnných
  • -: odčítání proměnných
  • *: násobení proměnných
  • /: dělení proměnných
  • %: zbytek po dělení proměnných
Aritmetické operátory

Vypisování do konzole

  • console.log()
console.log("Ahoj, vítám!");

Výsledek

Ahoj, vítám!
let pozdrav = "Vítám tě!";

console.log(pozdrav);

Výsledek

Vítám tě!

NÁŠ PRVNÍ PROGRAM

  • Program, který nám vypíše do konzole "Ahoj světe!"

Úkol

  • Vytvořte dvě proměnné s číslicemi, sečtěte tyto dvě proměnné a výsledek vypište do konzole

VPISOVÁNÍ DO KONZOLE

  • nodeJS toto nepodporuje velmi dobře
  • trochu advanced látka na dalších slides

Stáhneme si knihovnu

  • knihovna - kus kódu jiného člověka, který nám něco usnadňuje
  • instalujeme pomoci npm - node package manager
> npm install prompt-sync

Setup

const ps = require("prompt-sync"); // find installed library
const prompt = ps(); // use the library
// setup done

let name = prompt("Your name is?: "); // vpisovani do konzole

console.log(`Hi ${name}`);

KOMENTÁŘ

let a = 23 // zde je promenna s hodnotou 23

KONVERZE

Přetypování proměnné

  • Programovací jazyk pracuje s hodnotou podle její vlastností ->
let a = 23 // tohle vidi JS jako Number
let b = "23" // tohle vidi JS jako String

Konvertovat na číslo: Number()

let a = 23 // tohle vidi JS jako Number
let b = "23" // tohle vidi JS jako String


console.log(typeof b); // output: string

b = Number(b);

console.log(typeof b); // output: number

Konvertovat na textový řetězec: String()

let a = 23 // tohle vidi JS jako Number
let b = "23" // tohle vidi JS jako String


console.log(typeof a); // output: number

a = String(a);

console.log(typeof a); // output: string

Booleanova logika

  • &&
  • ||
  • !
let a = true;
let b = false;
let c = true;

if (a && b) {
  console.log("A je pravda a B je taky pravda");
} else if (a || b) {
  console.log("A je pravda nebo B je pravda");
} else if (!a) {
  console.log("A není pravda");
} else {
  console.log("Pokud neplatí ani jedna podmínka, zavolá se else");
}

SROVNÁVACÍ OPERÁTORY

  • == rovná se
  • != nerovná se
  • > větší než
  • < menší než
  • >= větší nebo rovno
  • <= menší nebo rovno

PODMÍNKY

  • if
  • else if
  • else
if (condition1) {
	// tohle spustim kdyz plati kondice 1
} else if (condition2) {
	// tohle spustim kdyz plati kondice 2
} else {
  //  tohle spustim nakonec pokud neplati kondice ani 1 ani 2
}

Úkol

Napiš program, kde když uživatel zadaná číslo, které je dělitelné dvěma, tak vypíše "Ahoj!", pokud není, ale je dělitelné 3 tak "Čau" a pokud ani to tak "Ne." 

// let a = 4;
// output: Ahoj!
// 
// let a = 5;
// output: Ne.
// 
// let a = 9;
// output: Čau!

CO JSME SE NAUČILI?

  • proměnné
  • console.log();
  • prompt();
    • díky knihovně
  • String, Number, Boolean
  • String(), Number()
  • if, else if, else

Proměnné - aritmetický operace

  • +=
  • -=
  • *=
  • /=
let a = 4;
let b = 3;

// b = b + a; // moc pomale
b += a // lepsi

console.log(b);

switch case

CYKLY

FOR LOOP

Jeden z nejzákladnějších cyklů

for (let step = 0; step < 5; step++) {
  // Runs 5 times, with values of step 0 through 4.
  console.log("Walking east one step");
}

Zadání

  • Vytvořte for loop od 0 do 100. Zjistěte kolik čísel sudých nebo dělitelných 7 se ve for loopu vyskytlo. (pokud je číslo sudé a zároveň dělitelné 7, tak ho započítejte dvakrát)

Array

  • způsob jak ukládat více hodnot do jedné proměnné
  • indexování
  • přepsání hodnoty pomocí indexu
  • .push()
    • Přidá hodnotu na konec array
  • .pop()
    • Vrátí poslední hodnotu a smaže ji z array
  • array.splice(start, 0, newElem)
    • Vloží hodnotu na určitý index

Array metody

array.includes()

  • Koukne se jestli list obsahuje danou hodnotu

const fruits = [];
fruits.push("banana", "apple", "peach");
console.log(fruits.length); // 3

console.log(fruits.includes("banana")); // true

Práce se String


let mySentence = "Hello there";

console.log(mySentence.length); // output: 11

console.log(mySentence[1]); // e

Úkol

  • Máš list, který obsahuje tři slova. Vypiš prostření písmenko každého slova, pokud slovo má sudý počet písmen, tak vypiš dvě prostřední písmenka.

WHILE LOOP

  • dokud je podmínka pravdivá, opakuj

Příklad While Loop


let n = 0;
let x = 0;
while (n < 3) {
  n++;
  x += n;
}

MODULY

  • Soubor obsahující funkce a proměnné
  • Rozdělení programu do souborů
  • Slouží k organizaci a znovupoužití kódu

VESTAVĚNÉ MODULY

Math


console.log(Math.floor(Math.random() * 10));
console.log(Math.PI);

Guessing Game:

  • Vygenerujte náhodné celé číslo na začátku hry
  • Uživatel se snaží dané číslo uhádnout
  • Dokud neuhádne číslo, program radí, jestli je číslo větší nebo menší než hádal

Funkce

Definice funkce


// Function to compute the product of p1 and p2
function vynasob(p1, p2) {
  return p1 * p2;
}

Cvičné úkoly

  • napiš funkci, která bere dva parametry a vypíše je do konzole

  • napiš funkci, která bere dva parametry a sečte je (parametr musí být číslo)

  • napiš funkci, která bere jeden parametr (string), a vypíše ho 15 krát

Napiš funkci calculate


calculate(num1, num2, operator); 
// function takes two numbers 
// and a operator to use on the numbers

calculate(3, 2, "+"); // output: 5
calculate(4, 5, "*"); // output: 20
calculate(3, 5, "-"); // output: -2
calculate(1, 2, "/"); // output: 0.5