Osnove JavaScripta in HTML DOM API

Slide 1

Slide 1 text

HTML, CSS in JavaScript Klemen Slavič http://about.me/klemen.slavic

Slide 2

Slide 2 text

Brskalnik JavaScript HTML CSS DOM HTTP(S) AJAX

Slide 3

Slide 3 text

HTML5, CSS3 in JavaScript O Novi semantični elementi O section, article, header, footer, ... O Novi API moduli za večjo interaktivnost O File, Canvas, WebRTC, WebGL, ... O Novi CSS atributi O transform, animation, transition, ... O ECMAScript razširitve v novejših brskalnikih O Multimedia O ,

Slide 4

Slide 4 text

Orodja za razhroščevanje O Internet Explorer + Visual Studio Debugger (tudi ScriptDebugger) O Mozilla Firefox + Web Developer Tools (tudi Firebug) O Google Chrome + Web Developer Tools O Opera + Dragonfly O Safari + Web Developer Tools

Slide 5

Slide 5 text

Uvod v GitHub O Platforma za upravljanje s softverskimi projekti (open- in closed-source) O Gostovanje kode, dokumentacije in orodij za upravljanje s projektom O Gostovanje git repozitorijev O Celoten sistem gosti največje število aktivnih odprtokodnih projektov

Slide 6

Slide 6 text

Testiranje JavaScript kode O Široka paleta orodij za testiranje O Unit test: QUnit, Jasmine, Mocha, ... O UI test: Selenium, CasperJS, ... O Integration test: Selenium, CasperJS, ... O V tej delavnici bomo uporabljali Mocha testno knjižnico za testiranje v brskalniku

Slide 7

Slide 7 text

Življenjski cikel strani O Zahteva dokumenta za nek URL O Branje dokumenta (parsing) O Ustvarjanje HTML elementov O Prenos vsebine elementov O Izvajanje JavaScript kode O Proženje dogodkov (event) v dokumentu

Slide 8

Slide 8 text

Izvajanje JavaScript kode O Izvajalno okolje strani je eno-nitno; ko teče JavaScript koda, se ne izvaja nič drugega (blocking) O Med izvajanjem kode se stran ne odziva na uporabnikova dejanja O Dogodki se prožijo po koncu izvajanja trenutnega run loop-a O Implementacija API-jev odvisna od posameznega brskalnika

Slide 9

Slide 9 text

JavaScript O Interpretiran jezik s prototipnim modelom dedovanja razredov in objektov O Vse podatkovne strukture so objekti (vključno s primitivnimi tipi), podobno kot pri Javi O Vsi objekti so dinamični in jih lahko koda spreminja po potrebi

Slide 10

Slide 10 text

Vgrajeni tipi O Jezikovni tipi (niso objekti) O true, false, null, undefined O Števila (Number) O Besedilo (String) O Funkcija (Function) O Regular expressions (RegExp) O Seznam (Array)

Slide 11

Slide 11 text

Objekti O Vsi objekti dedujejo iz Object tipa (tudi funkcije!) O Vsakemu objektu lahko spremenimo lastnosti O Ko metode ni na trenutnem objektu, jo izvajalec išče po verigi prototipov; če je ne najde, vrže izjemo (Exception ali Error)

Slide 12

Slide 12 text

Objekti var myObject = new Object(); myObject.name = 'John Doe'; myObject.age = 29; alert( myObject.name + ': ' + myObject.age );

Slide 13

Slide 13 text

Objekti var myObject = { name: 'John Doe', age : 29 }; alert( myObject.name + ': ' + myObject.age );

Slide 14

Slide 14 text

Objekti in kontekst O Do trenutne instance objekta lahko pridemo s pomočjo ključne besede this: var myObject = { name : 'John Doe', sayHello : function() { alert('Hi, my name is ' + this.name); } }; myObject.sayHello();

Slide 15

Slide 15 text

Vidljivost O Globalni kontekst je window O Sem se shranijo vse ustvarjene spremenljivke brez var predpone O Vsaka funkcija ob izvajanju ustvari nov kontekst O Konteksti so gnezdeni; če spremenljivke ni v trenutnem kontekstu, išče v naslednjem višjem kontekstu

Slide 16

Slide 16 text

Vidljivost var a = 3; function myFunction() { var b = 7; alert(a); // 3 }; alert(a); // 3 alert(b); // undefined

Slide 17

Slide 17 text

Skrivanje vrednosti function makePerson(name) { var _name = name; return { getName: function() { return _name; } }; };

Slide 18

Slide 18 text

Skrivanje vrednosti var john = makePerson('John'); var mary = makePerson('Mary'); john.getName() // 'John' mary.getName() // 'Mary' john._name // undefined john.name // undefined

Slide 19

Slide 19 text

Skrivanje vrednosti (function() { var a = 3; })(); alert(a); // undefined

Slide 20

Slide 20 text

Globalni imenski prostor O Pri kodi, ki teče v neznanih okoljih, je potrebno zagotoviti varnost, delovanje in okolje, v katerem teče O Z zaščito internih funkcij in vrednosti lahko uspešno zavarujemo izvajanje naše kode na tujih straneh O Idealno v globalni imenski prostor zapišemo največ eno spremenljivko O Primer: jQuery ($), YUI, MooTools, ...

Slide 21

Slide 21 text

Prototipno dedovanje O Operator new naredi nov objekt, ki predstavlja instanco danega konstruktorja (funkcije): function Person(name) { this.name = name; } var jack = new Person('Jack'); alert(jack.name); // 'Jack' alert(typeof jack); // 'object' alert(jack instanceof Person); // true

Slide 22

Slide 22 text

Prototipno dedovanje function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; }; var jack = new Person('Jack'); jack.getName(); jack.hasOwnProperty('getName'); // false

Slide 23

Slide 23 text

Prototipi vs. OOP O V JavaScriptu lahko simuliramo klasični OOP O Statične metode so metode na konstruktorju (this.constructor.*) O Instančne metode so metode na objektu ali verigi prototipov (this.*) O Za klasično dedovanje potrebujemo pomožne funkcije O Več knjižnic na voljo: http://microjs.com/#class

Slide 24

Slide 24 text

Primer OOP v JavaScriptu function Entity(name) { this.name = name; } function Person(name, gender) { this.super(name); this.gender = gender; } Common.inherit(Entity, Person);

Slide 25

Slide 25 text

Primer OOP v JavaScriptu function Entity() {} function Person() {} Common.inherit(Entity, Person); Person.prototype.method = function() { alert('Prototype method'); }; var mike = new Person(); mike.method = function() { this.prototype.method(); alert('Override method'); };

Slide 26

Slide 26 text

Naloga O Napiši osnovni razred Shape, ki opisuje ravninski lik in vsebuje naslednje metode: O getArea() površina O getPerimeterLength() obseg O getBoundingBox() oklepajoči pravokotnik O Napiši razrede z ustrezno hierarhično strukturo: O Rectangle, Circle, Triangle

Slide 27

Slide 27 text

Spreminjanje this konteksta O Ob izvajanju funkcije na objektu je this kazalec na objekt, na katerem se nahaja funkcija O Kontekst lahko poljubno spreminjamo ob izvajanju funkcije O Če funkcijo izvedemo brez objektne predpone, je this enak window, kontekst ostalih spremenljivk pa je nespremenjen

Slide 28

Slide 28 text

Spreminjanje this konteksta function increment() { this.counter++; } var myObject = { counter: 1 }; increment.call(myObject); alert(myObject.counter); // 2

Slide 29

Slide 29 text

Podajanje argumentov O Funkcijam lahko poleg konteksta podajamo tudi poljubno število argumentov function sum(a, b, c) { return a + b + c; } sum.call(this, a, b, c); sum.apply(this, [a, b, c]);

Slide 30

Slide 30 text

Izvajanje metod v OOP function Person(name) { this.name = name; } Person.prototype.getName = function() { return this.name; }; Common.inherit(Person, Sir); function Sir() { this.super.apply(this, arguments); } Sir.prototype.getName = function() { return 'Sir ' + this.name; };

Slide 31

Slide 31 text

ECMAScript razširitve O Setter/getter O Object.defineProperty(obj, name, descriptor); O Array metode (filter, map, reduce, forEach, ...) O Function.bind() za vezavo konteksta this O Podporto na vseh modernih brskalnikih O IE9+, Chrome, Firefox, Safari, Android, iOS, Opera

Slide 32

Slide 32 text

Naloga O Razmisli, kako bi z razširitvami osnovnih razredov izboljšal prejšnji primer razredov za izračun parametrov geometrijskih teles

Slide 33

Slide 33 text

Pogosti vzorci O Urejanje seznamov var people = [ ... ]; // Array people.sort(function(a, b) { if (a.age > b.age) return 1; else if (a.age < b.age) return -1; else return 0; }); alert(people); // [Object, Object, ...]

Slide 34

Slide 34 text

Pogosti vzorci O Filtriranje seznamov var people = [ ... ]; // Array var adults = people.filter(function(person) { return person.age >= 18; }); alert(adults); // [Object, Object, ...]

Slide 35

Slide 35 text

Pogosti vzorci O Sprehod po seznamu var people = [ ... ]; // Array people.forEach(function(person) { var prefix = (person.gender == 'male') ? 'Sir' : 'Madame'; person.name = prefix + ' ' + person.name; }); alert(people); // [Object, Object, ...]

Slide 36

Slide 36 text

Pogosti vzorci O Redukcija seznama var numbers = [ 1, 2, 3, 4 ]; // Array var sum = numbers.reduce(function(prev, curr) { return prev + curr; }, 0); alert(sum); // 10

Slide 37

Slide 37 text

Pogosti vzorci O Vezava this konteksta na funkciji var myObject = { counter: 0 }; var increment = function() { this.counter++; }; increment = increment.bind(myObject); increment(); alert(myObject.counter); // 1

Slide 38

Slide 38 text

Pogosti vzorci O Alternativna "vezava" this var myObject = { counter: 0 }; var increment = (function(self) { return function() { self.counter++; }; })(myObject); increment(); alert(myObject.counter); // 1

Slide 39

Slide 39 text

Pogosti vzorci O Enumeracija lastnosti objekta var person = { name: 'Mike', age: 13 }; for (var prop in person) { if (person.hasOwnProperty(prop)) { alert(prop + ': ' + person[prop]); } }

Slide 40

Slide 40 text

Naloga O Napiši definicijo objekta, ki v konstruktor sprejme seznam števil in izračuna naslednje vrednosti: O vsota O povprečje O minimum in maksimum O standardna deviacija 2 1 1 2             − = ∑ ∑ = = n a n a n i i n i i σ

Slide 41

Slide 41 text

Življenjski cikel dokumenta O document.readyState O 'loading' O 'interactive' O 'complete' O 'DOMContentLoaded' event O window.onload

Slide 42

Slide 42 text

DOM API O Specifikacija objektov, vmesnikov in funkcij, s katerimi upravljamo z modelom HTML dokumenta O Preko API-ja vplivamo na vsebino in izgled dokumenta O Ponuja vmesnik za poslušanje dogodkov, ki jih prožita uporabnik ali brskalnik

Slide 43

Slide 43 text

Element O childNodes O parentNode O className O id O innerHTML O nodeName O nodeType O offsetLeft, offsetTop O style.* O appendChild(), removeChild() O getElementsBy*() O querySelector*() O insertBefore() O *Attribute*() O addEventListener(), removeEventListener() O focus(), blur(), click()

Slide 44

Slide 44 text

Document O activeElement O head, body O documentElement O anchors, images, embeds, forms, links, scripts, styleSheets O readyState O open(), write(), close() O createElement(), createTextNode() O elementFromPoint()

Slide 45

Slide 45 text

Window O innerWidth, innerHeight, outerWidth, outerHeight O frames (ugh...) O history, location O navigator.userAgent O parent, top O screen O console.*() O setTimeout(), setInterval() O alert(), prompt(), confirm() O getSelection() O scroll*(), resize*(), sizeToContent() O open(), close() O getComputedStyle() O atob(), btoa()

Slide 46

Slide 46 text

Naloga O Napiši funkcijo, ki vzame HTML element in objekt ter aplicira stile na objekt preko style vmesnika: var el = document.querySelector('p'); setCSS(el, { fontSize : '24px', color : 'red' });

Slide 47

Slide 47 text

Dogodki (events) O Dogodki so primarni način komunikacije med uporabnikom in dokumentom O Vsa uporabnikova dejanja se prevedejo v dogodke, ki se prožijo na posameznih elementih znotraj dokumenta O Vsakemu elementu lahko pripnemo poslušalce za določen tip dogodka O Dogodkom lahko prekličemo privzeta dejanja in širjenje po dokumentu (bubbling)

Slide 48

Slide 48 text

Potek dogodkov document body p a img

Slide 49

Slide 49 text

Potek dogodkov O Proženje dogodkov poteka v dveh fazah (če ni dogodek preklican) O capture: sproži se na dokumentu in prenaša skozi verigo navzdol do elementa, kjer se je dogodek zgodil O bubble: prenaša se od elementa navzgor po verigi do dokumenta O Poslušalce lahko pripnemo v katerikoli izmed faz

Slide 50

Slide 50 text

Pripenjanje poslušalcev var el = document.querySelector('a.next'); el.addEventListener('click', function( ev ) { ev.preventDefault(); if (confirm('Are you sure you want to leave?')) { window.location = 'http://www.google.com'; } }, false );

Slide 51

Slide 51 text

Odstranjevanje poslušalcev O removeEventListener() zahteva isto funkcijo, ki je bila podana addEventListener() O Knjižnice navadno same skrbijo za shranjevanje funkcij v internem seznamu O Izogibajmo se pripenjanju anonimnih funkcij, do katerih nimamo dostopa

Slide 52

Slide 52 text

Odstranjevanje poslušalcev function handleLinkClick(ev) { ev.preventDefault(); alert("Oh no you don't!"); } el.addEventListener('click', handleLinkClick, false); el.removeEventListener('click', handleLinkClick, false);

Slide 53

Slide 53 text

Event object O type O target O currentTarget O bubbles, cancelable, defaultPrevented O eventPhase O preventDefault() O stopPropagation()

Slide 54

Slide 54 text

Delegacija dogodkov O Ker se dogodki prenašajo navzdol in navzgor po hierarhiji, lahko lovimo dogodke na poti do/od elementa O Namesto pripenjanja na seznam elementov lahko poslušamo dogodke višje v hierarhiji O Boljša performanca aplikacije O Ni treba skrbeti za pripenjanje poslušalcev na novo ustvarjene elemente in odstranjevanje s premaknjenih elementov

Slide 55

Slide 55 text

Primer: seznam vnosnih polj

function handleClick(ev) { if (ev.target.nodeName == 'A' && ev.target.className == 'add') { //... } }

Slide 56

Slide 56 text

Naloga O Napiši funkcijo, ki za dani element najde prvi starševski element določenega tipa (ali vrne trenutni element, če se ujema) O Napiši event handler za prejšnji HTML primer O Bonus: prepiši prvo funkcijo, da deluje podobno kot filter() funkcija na Array objektih

Slide 57

Slide 57 text

Dinamično izvajanje kode O Generiranje kode ali izvrševanje kode iz AJAX klica s pomočjo eval() O Vstavljanje novih elementov O Problemi: O Kdaj so vsi resursi, potrebni za tek aplikacije, na voljo? O Izvajanje kode se vrši na globalnem nivoju O Potencialna varnostna luknja

Slide 58

Slide 58 text

Primer: preprost kalkulator Calculate! document.getElementByid('calc').addEventListener( 'click', function(ev) { var str = document.querySelector('[name=exp]').value; alert(eval(str)); } );

Slide 59

Slide 59 text

Upravljanje z JS moduli O RequireJS O AMD O Browserify (Node.js + CommonJS) O Clientside (Node.js + CommonJS) O Grunt (Node.js build system)

Slide 60

Slide 60 text

CommonJS function factorial(n) { var r = 1; for (var i = 2; i <= n; i++) { r *= i; } return r; } module.exports = factorial; // fact.js var factorial = require('./fact'); console.log(factorial(5)); // main.js

Slide 61

Slide 61 text

AJAX O "Asynchronous JavaScript and XML" O Mehanizem, s katerim lahko prožimo HTTP zahteve in beremo rezultate teh zahtev O Omejen s Same-origin varnostnim filtrom O Za meddomensko komunikacijo obstaja CORS ("Cross-Origin Request Sharing") O Obstaja alternativa: JSONP

Slide 62

Slide 62 text

AJAX O Izvajanje zahtev omogoča XMLHttpRequest objekt O Ni enotnega API modela za vse brskalnike, obnašanje je včasih nekonsistentno med posameznimi različicami O Priporočljivo izvajati ukaze preko AJAX knjižnice, kar zgladi razlike med posameznimi brskalniki

Slide 63

Slide 63 text

JSONP O Alternativa AJAX zahtevam, namenjena prenosu JSON objektov za komunikacijo izključno podatkov O Večina ponudnikov spletnih storitev ponuja JSONP dostop: O Flickr, Google, Facebook, Twitter*, GitHub, ...