WA1: JavaScript

JavaScript

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

Ondřej Žára, @0ndras

Dluh z minula

Skriptování na straně klienta

Trocha historie

A copak to umí?

Syntaxe I

F12 → Console → zkoušet!

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

Syntaxe I

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

Syntaxe III

if (a && b) { ... } for (var i=0; i<pole.length; i++) { ... } try { ... } catch (e) { ... } switch (x) { case y: break; }

Syntaxe III

Spojení s HTML

<!-- kdekoliv ve stránce --> <script src="soubor.js"></script> <script> alert("mighty magickz!"); </script>

API poskytovaná prohlížečem

DOM

DOM: základy

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

DOM: terminologie událostí

  1. Událost je nějakého typu ("click", "mousemove", "load", …)
  2. Událost vzniká na nějakém DOM prvku (např. ten, na kterém bylo kliknuto)
  3. 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.“

Události: parametrizace posluchače

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

XMLHttpRequest

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); }

Prostor pro otázky