JavaScript

Základy, koncepty, DOM, cokoliv dalšího

Ondřej Žára, Seznam.cz

Tato prezentace

Dostupná online na http://ondras.zarovi.cz/slides/trebic/
Je interaktivní
Zobrazí nápovědu po stisku otazníku

Bojový plán

JavaScript →
JavaScript →
JavaScript →
JavaScript →

← Přednáška
← Workshop
← Přednáška
← Workshop

JavaScript je…

…programovací jazyk

Syntaxe podobná jazyku C
Jeho popularita souvisí s popularitou webu
Interpret JS v každém prohlížeči
Jediný jazyk v každém prohlížeči

JavaScript je…

…jednoduchý

Dynamicky typovaný
Málo datových typů
Interpretovaný, není třeba překládat
Přístupnost – stačí zmáčknout (zpravidla) F12

JavaScript je…

…složitý

Matoucí podobnost s jinými jazyky
Nezvyklé koncepty pokročilých technik (prototypy, this, uzávěry)
Neprůhledný ekosystém tvořený nadměrnou komunitou
Dynamicky typovaný (WAT chyby)

JavaScript je…

…expresivní

K cíli se lze dostat rychle a snadno
Snadné řešení typických úloh
Důvod k rozmachu i na serveru

JavaScript je…

…rozšířený

Každý prohlížeč
Snadné řešení typických úloh
Důvod k rozmachu i na serveru

JavaScript je…

…starý

Vznik v roce 1995 (stejně jako PHP)
Původně určen pro kontrolu formulářů
Stále užíván pro kontrolu formulářů
…a milion dalších věcí

Jak na to?

Vývojářská konzole (REPL) v prohlížeči
jsfiddle.net
<script src="soubor.js"></script>
<script>var a = 13;</script>
developer.mozilla.org

Kniha!

JavaScript – Programátorské techniky a webové technologie
Vydává cpress.cz
Určeno pro zájemce o JavaScript po absolvování základního kurzu
Povětšinou jen JS, méně DOM rozhraní

Základy syntaxe

var a = "ahoj";
var b = 2 * 13;
var c = true;

var f = function(x, y) { return x+y; }
function g(x, y) { return x*y; }

Základy řízení toku kódu

if (a > b) {
	a++;
} else {
	c += d;
}

for (i=0; i<5; i++) {
	console.log(i);
}

Složitější datové typy

var pole = [1, 4, "ahoj"];
var data = {
	jmeno: "Jan",
	prijmeni: "Novák",
	vek: pole[1]
}

console.log(data.jmeno);

Složitější datové typy jsou objekty

var pole = [1, 4, "ahoj"];
console.log(pole.length);

pole.push(3.14);
console.log(pole.length);

pole.push(pole);
// ?

A co tam je dál?

Už skoro nic
Jazyk samotný není objemný
Pro další práci potřebujeme dodat další rozhraní

Zkoušíme #1

Základy jazyka v konzoli
Seznámení s proměnnými a funkcemi
Žádná konkrétní úloha

DOM

První rozhraní, které se každý student JS musí učit
Přístup k HTML stránce
Čtení, změna, kompletní řízení

DOM

Vstupní bod: zpravidla proměnná document
A další: window, navigator, alert…
Dokumentace

DOM

document.body.innerHTML = "Ahoj <em>světe</em>";

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

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

Události

Programování řízené událostmi
Klíčový koncept spolupráce JS a DOM
Provázání události, posluchače (a HTML prvku)
Až uživatel klikne na X, vykonej funkci Y

Události

var test = function() {
	alert("Kliknuto");
}

document.addEventListener("click", test);

Události

// tzv. anonymní funkce
document.addEventListener("click", function() {
	alert("Kliknuto");
});

Události

Všechny HTML prvky mají metodu addEventListener
Název události je řetězec (click, mouseover, keydown, …)
Druhý parametr (posluchač) je funkce, nikoliv její volání (tj. bez kulatých závorek)

Události – bublání

Situaci komplikuje to, že HTML prvky tvoří tzv. strom
Když kliknu na odstavec, kliknul jsem i na <body> ?
DOM pro to má řešení, nebudeme se mu do hloubky věnovat

Kontrola formuláře

Formulář (<form>) má událost submit
To je dobrý čas pro jeho kontrolu
Co když kontrola dopadne špatně?

preventDefault

Funkce posluchače je vykonávána s jedním parametrem
Tento parametr je objekt, popisující probíhající událost
Nás zajímá jeho metoda preventDefault, která prohlížeči nařídí událost ignorovat

Události

var kontrola = function(e) {
	if (...) { e.preventDefault(); }
}

form.addEventListener("submit", kontrola);

Zkoušíme #2

DOM, události
Kontrola formuláře
Změna stránky za běhu

Ajax

SPA = Single Page Application (mapy.cz, gmail, google drive, …)
Při interakci nutnost komunikovat se serverem
Dočítání dat, vykonávání vzdálených operací
Ajax jako Asynchronous JavaScript and XML

XMLHttpRequest

Alfa a omega pro přenos dat na pozadí
Co všechno víme o HTTP?
Jaké známe způsoby vyvolání HTTP požadavku?
Existují alternativy, ale v 99% případů se použije XHR

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.send();

XMLHttpRequest

var odpoved = function(e) {
	var xhr = e.target;
	alert(xhr.status);
	alert(xhr.responseText);
}
	
xhr.addEventListener("load", odpoved);

XMLHttpRequest a bezpečnost

HTTP požadavky nelze dělat na libovolné adresy
Proč?
Co vadí víc: požadavek, nebo data jeho odpovědi?
Sandbox je omezení garantované prohlížečem
Technika CORS je způsob, jak toto omezení rozšířit

Zkoušíme #3

XMLHttpRequest
Komunikace se vzdáleným serverem
Kontrola hesla proti wordlistu
Nebo něco jiného?

HTML <canvas>

Rastrová (bitmapová) kreslící plocha
Malování ve Windows
Štětec ovládán JavaScriptem
Většinou nám stačí tzv. 2d kontext
Pro pokročilou grafiku existuje též WebGL

<canvas>

<canvas width="640" height="480"></canvas>

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");

context.fillStyle = "red";
context.fillRect(0, 0, 100, 100);

2d context

Ukázka
Obdélníky
Křivky
Text
Obrázky
Individuální pixely
Transformace

<canvas> – Obdélníky

context.fillStyle = "red";
context.strokeStyle = "blue";

context.clearRect(x, y, w, h);
context.fillRect(x, y, w, h);
context.strokeRect(x, y, w, h);

<canvas> – Křivky

context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);

context.quadraticCurveTo(cpx, cpy, x, y);
context.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);

context.arc(...what the hell...);
context.fill();
context.stroke();

<canvas> – Text

context.strokeText(text, x, y);
context.fillText(text, x, y);
context.measureText(text);

<canvas> – Obrázky

context.drawImage(image, x, y);
context.drawImage(jinyCanvas, x, y);

context.drawImage(image, dx, dy, dWidth, dHeight);

context.drawImage(
	image, 
	sx, sy, sWidth, sHeight,
	dx, dy, dWidth, dHeight
);

<canvas> – Pixely

var id = context.getImageData(0, 0, w, h);
	
alert(id.data.length); // pocet pixelu * 4
id.data[0] = 255; // plna cervena

context.putImageData(id, x, y);

<canvas> – Transformace

context.save();
		
context.scale(0.5);
context.rotate(Math.PI / 2);

context.fillRect(0, 0, 100, 100);

context.restore();

Zkoušíme #4

Malování do HTML prvku <canvas>
Bez konkrétnějšího zadání

A co dál?

Více o jazyku: regulární výrazy, výjimky, funkcionální iterace, JSON
Ještě více o jazyku: new, this, prototypová dědičnost
JS na serveru: node.js
Více o HTML5, CSS3, SVG
Další zajímavá API: geolocation, localStorage, Audio, File, getUserMedia
ES2015

Prostor pro otázky
Ondřej Žára, vývojář UI senior, ondrej.zara@firma.seznam.cz