~~NOCACHE~~ ~~REVEAL theme=dokuwiki&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&size=1280x960~~ ====== Co to je JavaScript, vývoj scriptovacích jazyků ====== ===== JavaScript ===== * 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) ====== Co JavaScript neumí? ====== * žá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 ====== Historie ====== * 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 ====== jádro JavaScriptu ====== //základní syntaxe, datové typy, proměnné, příkazy, větvení// ===== syntaxe ===== * 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ě... ---->


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

<---- ===== Vkládání skriptu do stránky ===== * Skript se píše mezi značky . Ty můžete vložit do sekce body nebo do sekce head (záleží na účelu skriptu).




...

...


..tělo dokumentu..

..tělo dokumentu..

==== Úkol ==== * ''document.open();'' - otevírá dokument * ''document.write();'' - zapisuje do dokumentu * ''window.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 =====datové typy, proměnné, operátory ===== ==== Datové typy ==== * primitivní datové typy * číslo (number) * řetězec (string) * logická hodnota (boolean) * null, undefined * pole * objekty ==== Čísla ==== * 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 ==== Řetězce - string ==== * datový typ reprezentovaný znaky UNICODE * text uzavřený do uvozovek nebo apostrofů


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

==== 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)

==== Spojování řetězců ==== * 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

==== Pole ==== * 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 ==== Objekty ==== * 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, ... ---->


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

//person["lastName"];

<---- ==== Funkce ==== * 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**
}

==== Úkol ==== * **Úkol** * definujte různé proměnné * proveďte matematické operace s čísly a řetězci a vypište je na obrazovku =====řídící struktury, větvení programu, cykly ===== ==== If, Else ==== * stejné jako v c/c++


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

==== Ú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 ==== Cyklus for ==== * stejný jako v C/C++


for (i = 0; i < 5; i++) {
  text += "The number is " + i + "
";
}


var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var i;
for (i = 0; i < cars.length; i++) {
  document.write(cars[i]);
  document.write("
");
}

==== Úkol ==== * **Úkol** * vytvořte pomocí for cyklu následující (nadpisy od H1 do H6): {{:spse:pm3:pasted:20210105-211740.png}} /* ===== základy objektově orientovaného programování ===== s57 ===== Regulární výrazy ===== ====== JavaScript v prohlížeči ====== ===== integrace v HTML ===== ===== objekty Window, Screen, Navigator, Location, History ===== =====objekt Document – obrázky, odkazy, záložky ===== ===== formuláře a jejich prvky ===== ====== DOM ====== ====== Ovládání CSS pomocí scriptů ====== ======Ovladače událostí ====== ====== Praktické příklady====== */