WA1: JavaScript

JavaScript

WA1 čtvrtá přednáška – Skriptování na straně klienta

Ondřej Žára, @0ndras

Skriptování na straně klienta

Logika a interakce v rámci webové stránky
Něco se děje bez změny stránky
Mapy, chat, hry, aplikace, …
Dokumentace na MDN

Trocha historie

První verze 1995 (Brendan Eich)
"Revival" kolem roku 2004
Bouřlivá standardizace a rozvoj od roku 2009 (ES5, ES6)
Proměnlivá podpora bleeding edge verzí v prohlížečích

A copak to umí?

Java is to JavaScript as ham is to hamster
Syntaxe podobná C
Jazyk sám od sebe povětšinou nezajímavý
Bez dalších API v prohlížeči není co dělat

Syntaxe I

F12 → Console → zkoušet!

var str = "hello " + ' world';
var num = 123 + 456.789; // IEEE 754
var wtf = true;

Syntaxe I

Jednoduché datové typy: řetězec, číslo, bool, null (a undefined)
Předávány hodnotou
Dynamic typing: proměnná mění typ dle potřeby

Syntaxe II

var pole = ["foo", "bar", 3.14];
var data = {
	jmeno: "Petr",
	"prijmeni": "Novák"
}
var plus = function(a, b) { 
	return a+b; 
}

Syntaxe II

Složitější datové typy: pole, "objekt", funkce
Předávány odkazem
Striktně vzato je všechno objekt; "objekt" je množina dvojic klíč-hodnota

Syntaxe III

if (a && b) { ... }

for (var i=0; i<pole.length; i++) { ... }

try { ... } catch (e) { ... }

switch (x) {
	case y:
	break;
}

Syntaxe III

Řízení toku kódu jako v jiných jazycích
Výjimky (netypované)
Platnost proměnných: global a function scope
Uzávěry (fce ve fci)

Spojení s HTML

<!-- kdekoliv ve stránce -->
<script src="soubor.js"></script>

<script>
	alert("mighty magickz!");
</script>

API poskytovaná prohlížečem

Přístup k vykreslené stránce
Síťová komunikace
Periferie: repro/mikrofon, OpenGL, senzory (mobil), GPS
Lokální ukládání dat
Omezená práce se souborovým systémem
Proč ne víc?

DOM

Document Object Model
API pro práci se stránkou, resp. stromem HTML uzlů
Možnost programově měnit cokoliv uživatel vidí
Kontrola formulářů

DOM: základy

"The DOM is a mess"
Globální proměnné window a document
Historicky hlavní bod nekompatibility

DOM: dotazování

var druhyOdkaz = document.querySelectorAll("a")[1];

var obrazek = document.querySelector("p > img");

var odstavec = obrazek.parentNode;
var potomek = odstavec.firstChild;

alert(odstavec.innerHTML);

DOM: manipulace

var odstavec = document.querySelector("p");

odstavec.innerHTML = "Generováno <em>skriptem</em>";

var obrazek = document.createElement("img");
obrazek.src = "...";

odstavec.appendChild(obrazek);

DOM: události

JavaScript je (na klientu) navržen tak, aby neobsahoval žádná blokující volání
Programování řízené událostmi
"Až nastane X, vykonej funkci Y"

DOM: terminologie událostí

Událost je nějakého typu ("click", "mousemove", "load", …)
Událost vzniká na nějakém DOM prvku (např. ten, na kterém bylo kliknuto)
Pro událost je možno definovat několik posluchačů = funkcí

DOM: události v kostce

var p = document.querySelector("p");

var posluchac = function() {
	alert("kliknuto");
}

p.addEventListener("click", posluchac); // předáno odkazem

/* ... */

p.removeEventListener("click", posluchac);

Události: historická odbočka

„Kdo nezná svou minulost, je odsouzen ji opakovat.“

<p onclick="alert(1)">
p.onclick = posluchac;
p.addEventListener("click", posluchac);

Události: parametrizace posluchače

Posluchač je vykonán s jedním parametrem
Jde o tzv. "event object"
Obsahuje metadata události
Obsahuje metody pro řízení dalšího zpracování události

Event object

document.body.addEventListener("click", function(e) {
	alert(e.type);     // "click"

	alert(e.clientX);  // souřadnice kurzoru
	alert(e.target);   // ?

	alert(e.ctrlKey);  // informace o klávesách
});

Zastavení vs. výchozí akce

var form = document.querySelector("form");
form.addEventListener("submit", function(e) {
	e.preventDefault(); // formulář nebude odeslán
});

var odkaz = document.querySelector("a");
odkaz.addEventListener("click", function(e) {
	e.stopPropagation(); // nikdo další se nedozví
});

Pokročilé kapitoly

Prototypová dedičnost
Anonymní funkce, bind
Klíčové slovo this
Klíčové slovo new

XMLHttpRequest

Způsob, jak pomocí JS provést HTTP požadavek
"AJAX"
Není nutné používat knihovní kód

XMLHttpRequest

var request = new XMLHttpRequest();

request.open("get", "/jina/stranka.html", true);
request.send();

request.addEventListener("load", function(e) {
	alert(request.status);
	alert(request.responseText);
});

XMLHttpRequest

var request = new XMLHttpRequest();

request.open("get", "/jina/stranka.html", true);
request.send();

request.onreadystatechange = function(e) {
	if (request.readyState != 4) { return; }
	alert(request.status);
	alert(request.responseText);
}

WA1: JavaScript

JavaScript

WA1 čtvrtá přednáška – Skriptování na straně klienta

Dluh z minula

Skriptování na straně klienta

Trocha historie

A copak to umí?

Syntaxe I

Syntaxe I

Syntaxe II

Syntaxe II

Syntaxe III

Syntaxe III

Spojení s HTML

API poskytovaná prohlížečem

DOM

DOM: základy

DOM: dotazování

DOM: manipulace

DOM: události

DOM: terminologie událostí

DOM: události v kostce

Události: historická odbočka

Události: parametrizace posluchače

Event object

Zastavení vs. výchozí akce

Pokročilé kapitoly

XMLHttpRequest

XMLHttpRequest

XMLHttpRequest

Prostor pro otázky