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

Toto je starší verze dokumentu!

→ Slide 1

→ Slide 2

univerzální (nezávislý na platformě) scriptovací objektově-orientovaný jazyk
představila společnost Netscape (B. Eich)
obvyklé použití – klientský scriptovací jazyk (použití přímo v prohlížeči)
vkládaný do HTML – ovládá grafické a interaktivní prvky stránky (obrázky, formuláře, odkazy, záložky) nebo vzhled stránek
syntakticky podobný C++, Java
nemá vlastní grafické nástroje (využívá HTML a CSS)

→ Slide 3

žádné grafické schopnosti (ale může využít grafických schopností HTML a CSS)
neumožňuje práci se soubory - velké omezení pro programovací jazyk, logické z bezpečnostních důvodů
nepodporuje práce se sítí – jen odeslání formulářů na server, přechod na adresu URL

→ Slide 4

1995 – představen jako doplněk k HTML
Java v názvu – žádná příbuznost k JAVA, jen obchodní tah
1997 – standardizace ECMA (Europen Computer Manufacturers Association) – základní standard, ze kterého vychází i např. ActionScript
1998 – ISO standardizace

→ Slide 5

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

→ Slide 6

znaková sada Unicode (2 byte – 256 znaků)
case senzitive jazyk – rozlišuje malá a velká písmena
vždy středníky za datovými a příkazovými strukturami
složené závorky pro bloky příkazů
komentáře jako v PHP, C++, Javě…

↓ Slide 7

// JavaScript Document
retezec = "Hello, world";
var a = 12; var b = 15;
return;
 
//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

Skript se píše mezi značky <script> a </script>. Ty můžete vložit do sekce body nebo do sekce head (záleží na účelu skriptu).

<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

document.open(); - otevírá dokument
document.write(); - zapisuje do dokumentu
alert(); - vypisuje do výstražného okna

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

→ Slide 10

↓ Slide 11

primitivní datové typy
- číslo (number)
- řetězec (string)
- logická hodnota (boolean)
- null, undefined
pole
objekty

↓ Slide 12

matematické operace s čísly pomocí objektu Math

// 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

Infinity - kladné nebo záporné nekonečno
NaN - Not A Number - nečíselná hodnota

↓ Slide 13

datový typ reprezentovaný znaky UNICODE
text uzavřený do uvozovek nebo apostrofů

var text = "Hello world";
var datum = '1.1.2020';

↓ Slide 14

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

provádí se pomocí znaménka +

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

indexované - od nuly
asociativní 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

soubor pojmenovaných hodnot uspořádaných do logického celku
objekty se většinou stanovují obecně, pak se vytváří kopie (instance) pomocí konstruktoru a s daty v objektech se pracuje pomocí funkcí – tzv. metod
prakticky celý klientský JavaScript je založen na Objektech – i když to není zřejmé
- všechny prvky na html stránce jsou podřízené objektu Window
- potomky tohoto objektu (třídy) jsou Document, Frame, Field, Link, Img, Anchor, …

↓ Slide 18

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

↓ Slide 19

JavaScript obsahuje řadu přednastavených funkcí (resp. metod), pro práci s čísly (např. metody objektu Math)
uživatel může definovat řadu funkcí nebo metod – tj. funkcí vázaných k určitým objektům

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
- definujte různé proměnné
- proveďte matematické operace s čísly a řetězci a vypište je na obrazovku

→ Slide 21

↓ Slide 22

stejné jako v c/c++

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

↓ Slide 23

Ú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

stejný jako v C/C++

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
- vytvořte pomocí for cyklu následující (nadpisy od H1 do H6):

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

JavaScript

Co JavaScript neumí?

Historie

jádro JavaScriptu

syntaxe

Vkládání skriptu do stránky

Úkol

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

Datové typy

Čísla

Čísla - speciální hodnoty

Řetězce - string

Escape sekvence

Spojování řetězců

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

Pole

Objekty

Funkce

Úkol

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

If, Else

Úkol

Cyklus for

Úkol