KAJ 1

Úvod, JavaScript pro začátečníky

Obsah

  1. O předmětu
  2. Standardy HTML a JS
  3. Syntaktické prvky JS
  4. Modularizace

Co jsou JavaScriptové aplikace?

Představení předmětu

Organizace

Sylabus předmětu

Web předmětu

Podklady a materiály

Kniha

Formalizace témat

Standard HTML5

https://html.spec.whatwg.org/

Standardizační proces HTML

Ian Hickson

Standard ECMAScript

Webové prohlížeče: co kdo umí

JavaScript

Syntaxe JS

Console API

Vývojářské nástroje v každém prohlížeči (typicky F12)

console.log("...")
console.log("test", 123, ["pole", "hodnot"])
console.log("Formatovani %s", "retezcu")
console.warn("warning")
console.error("crash")
console.time("test")
console.timeEnd("test")

Více info v kompletní dokumentaci.

Definice proměnných

const N = 8
N = 4      // exception
const M = [1, 2, 3]
M.push(4)  // ok
let x = 1
if (true) { let x = 2 }
alert(x)   // 1

Základní syntaktické prvky

let a = 1 + "dva"
let b = {} + {}
if (0 == "") { /* ... */ }
if (undefined == null)  { /* ... */ }
if (undefined === null) { /* ... */ }

Primitivní datové typy

let a = 3
let b = 0.1 + 0.2
let c = "ahoj" + 'ahoj'
let e = null
let f = undefined

Template string literals

let x = "world"
let y = `hello ${x}`
let z = `this is a
			very long string`
// html je uživ. funkce, která dostane jednotlivé tokeny k naformátování
html`<div> ${unsafe} </div>`
randomize`Hello, ${["mr", "ms", "mrs"]}. ${firstnames} ${lastnames}`

Komplexní datové typy

let a = {}               // prázdný objekt
let b = {c:3, "d":"hi"}
let e = [a, b]           // pole o dvou položkách
let f = function() {}
let g = /^.*/            // regulární výraz

{Weak,}{Map,Set} {}

let s = new Set()
s.add("hello").add("goodbye").add("hello")
s.size == 2
s.has("hello") == true
let m = new Map()
m.set("hello", 42)
m.set(s, 34)
m.get(s) == 34

Objekty, funkce a pole

let pole1 = [3, 2, 1]
let pole2 = []
pole1.length == 3
pole1[1]     == 2
pole2.length == 0
pole2.push(pole1)

Enhanced object literals

let x = 42
let obj = {
	x,                  // "x":42
	y() { return x; },
	["data_" + x]: x    // "data_42":42
}

Destructuring

let [a, b, c] = [1, 2, 3]
let f = function() { return {x:42} }
let { x } = f()

Funkce

function f1(a, b) { return a+b }
let f2 = function(a, b) { return a+b }
let add = function(a, b) { return a+b }
add.c = 123
add(add.c, add["c"])

Default + Rest + Spread

function f(x, y = 12) {
	return x + y
}
f(10) // 22
function f(x, ...y) {
	alert(y.length)
}
f(1, 2, 3) // 2
function f(a, b, c) { return c }
f(...[1, 2, 3]) // 3

Spread v akci

function build(data) {
  let node = document.createElement("p")
  node.classList.add(data.status)
  node.append(data.text)
  return node
}
const DATA = [/* pole struktur */]
parent.append(...DATA.map(build))

Arrow functions

let square = a => a*a
let add = (a, b) => a+b
// lexical this
setTimeout( () => this.doStuff(), 1000 )

Classes

class B extends A {
	constructor(x) {
		super() // v konstruktoru dědící třídy povinné; před ním neexistuje this
		this.x = x
	}
	static f2() {}
	get something() { /* .... */ }
	f1() {
		super.f1()
		return this.x
	}
}

Jak pracovat s moderní syntaxí?

Transpilace ES 2015+

Babel v praxi

Strukturování kódu

Předpoklad: kód členíme do více malých souborů

Modularizace \ Počet Mnoho souborů Jeden soubor
globální proměnné volitelně IIFE hloupý bundler
import+export module script
<script type=module>		 module-aware bundler

IIFE

IIFE

(function(){
	let document = "test"  // lokalni promenna
	alert(document)        // "test"
})();
alert(document)          // [object HTMLDocument]

ES Modules

// a.js
export let A = function() {}
export default function() {}
// b.js
import { A } from "./a.js"
A()
import myLocalName from "./a.js" // default

Moduly v praxi

Bundling

Prostor pro otázky

?