View as presentation
→ Slide 1

Co to je JavaScript, vývoj scriptovacích jazyků

→ Slide 2

JavaScript

→ Slide 3

Co JavaScript neumí?

→ Slide 4

Historie

→ Slide 5

jádro JavaScriptu

základní syntaxe, datové typy, proměnné, příkazy, větvení

→ Slide 6

syntaxe

↓ Slide 7
// JavaScript Document
retezec = "Hello, world";
var a = 12; var b = 15;
 
//používáme středníky
 
if (a<10) {
  document.write(a);
  a++;
}
/*používáme složené závorky na datové a příkazové bloky*/
→ Slide 8

Vkládání skriptu do stránky

<html>
<head>
...
<script type="text/javascript">
.. javascript tělo skriptu ..
</script>
...
</head>
<body>
..tělo dokumentu..
<script type="text/javascript">
.. javascript tělo skriptu..
</script>
..tělo dokumentu..
</body>
</html>
↓ Slide 9

Úkol

  • Úkol
    • vypište něco na obrazovku
    • vyvolejte výstražné okno s nějakým textem
→ Slide 10

datové typy, proměnné, operátory

↓ Slide 11

Datové typy

↓ Slide 12

Čísla

// javascript Document
var x = Math.sin(90);
var y = Math.sqrt(9); //druhá odmocnina
 
var y = (3).toString(2); // zápis do binární soustavy - výsledek bude 11
var y = (0x1A).toString(10); // zápis do decimální soustavy z hexadecimální - výsledek 26

Čísla - speciální hodnoty

↓ Slide 13

Řetězce - string

var text = "Hello world";
var datum = '1.1.2020';
↓ Slide 14

Escape sekvence

sekvence  význam
\n        nový řádek
\t        řádkový tabulátor
\v        svislý tabulátor
\r        návrat kurzoru (HOME)
\'        znak apostrof
\"        znak uvozovky
\\        zpětné lomítko
\b        backspace (BACK)
↓ Slide 15

Spojování řetězců

var text = "Hello world";
var datum = '1.1.2020';
 
var message = text + " Dnes je " + datum + ", hodně štěstí do nového roku";

Příklady funkcí pro práci s řetězci

var message = text + " Dnes je " + datum + ", hodně štěstí do nového roku";
delka = message.length; //délka řetězce
posledni = messsage.charAt(message.length-1); // poslední písmeno v řetězci
cast = substring(0,5); // část řetězce mezi 1-5 znakem
poradi = message.indexOf('D'); // první pozice znaku D v řetězci
↓ Slide 16

Pole

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

https://www.w3schools.com/js/js_arrays.asp

↓ Slide 17

Objekty

↓ Slide 18
var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};
 
//person["lastName"];
↓ Slide 19

Funkce

function myFunction(p1, p2) {
  return p1 * p2;   // Funkce vrátí součin agrumentu p1 a p2
}
var x = myFunction(4, 3);   // Funkce je zavolána, návratová hodnota se uloží do proměnné **x**
 
function myFunction(a, b) {
  return a * b;             // Funkce vrací součin **a** a **b**
}
↓ Slide 20

Úkol

  • Úkol
    • definujte různé proměnné
    • proveďte matematické operace s čísly a řetězci a vypište je na obrazovku
→ Slide 21

řídící struktury, větvení programu, cykly

↓ Slide 22

If, Else

if (hour < 18) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}
↓ Slide 23

Úkol

  • Úkol
    • vytvořte skript který bude využívat větvení pomocí podmínky if elseif a else
    • použijte porovnání číselných hodnot pomocí operátorů <,>,⇐,⇒
    • otestujte výraz typu boolean
↓ Slide 24

Cyklus for

for (i = 0; i < 5; i++) {
  text += "The number is " + i + "<br>";
}
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var i;
for (i = 0; i < cars.length; i++) {
  document.write(cars[i]);
  document.write("<br>");
}
↓ Slide 25

Úkol

  • Úkol
    • vytvořte pomocí for cyklu následující (nadpisy od H1 do H6):