Osnove JavaScripta in HTML DOM API

Transcript

1. HTML, CSS in JavaScript Klemen Slavič http://about.me/klemen.slavic
2. Brskalnik JavaScript HTML CSS DOM HTTP(S) AJAX
3. 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 <audio>, <video>
4. 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
5. 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
6. 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
7. Življenjski cikel strani O Zahteva dokumenta za nek URL O Branje dokumenta (parsing) O Ustvarjanje HTML elementov O Prenos vsebine <script> elementov O Izvajanje JavaScript kode O Proženje dogodkov (event) v dokumentu
8. 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
9. 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
10. 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)
11. 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)
12. Objekti var myObject = new Object(); myObject.name = 'John Doe'; myObject.age = 29; alert( myObject.name + ': ' + myObject.age );
13. Objekti var myObject = { name: 'John Doe', age : 29 }; alert( myObject.name + ': ' + myObject.age );
14. 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();
15. 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
16. Vidljivost var a = 3; function myFunction() { var b = 7; alert(a); // 3 }; alert(a); // 3 alert(b); // undefined
17. Skrivanje vrednosti function makePerson(name) { var _name = name; return { getName: function() { return _name; } }; };
18. Skrivanje vrednosti var john = makePerson('John'); var mary = makePerson('Mary'); john.getName() // 'John' mary.getName() // 'Mary' john._name // undefined john.name // undefined
19. Skrivanje vrednosti (function() { var a = 3; })(); alert(a); // undefined
20. 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, ...
21. 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
22. 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
23. 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
24. Primer OOP v JavaScriptu function Entity(name) { this.name = name; } function Person(name, gender) { this.super(name); this.gender = gender; } Common.inherit(Entity, Person);
25. 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'); };
26. 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
27. 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
28. Spreminjanje this konteksta function increment() { this.counter++; } var myObject = { counter: 1 }; increment.call(myObject); alert(myObject.counter); // 2
29. 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]);
30. 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; };
31. 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
32. Naloga O Razmisli, kako bi z razširitvami osnovnih razredov izboljšal prejšnji primer razredov za izračun parametrov geometrijskih teles
33. 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, ...]
34. Pogosti vzorci O Filtriranje seznamov var people = [ ... ]; // Array var adults = people.filter(function(person) { return person.age >= 18; }); alert(adults); // [Object, Object, ...]
35. 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, ...]
36. 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
37. 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
38. Pogosti vzorci O Alternativna "vezava" this var myObject = { counter: 0 }; var increment = (function(self) { return function() { self.counter++; }; })(myObject); increment(); alert(myObject.counter); // 1
39. 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]); } }
40. 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 σ
41. Življenjski cikel dokumenta O document.readyState O 'loading' O 'interactive' O 'complete' O 'DOMContentLoaded' event O window.onload
42. 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
43. 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()
44. 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()
45. 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()
46. 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' });
47. 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)
48. Potek dogodkov document body p a img
49. 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
50. 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 );
51. 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
52. Odstranjevanje poslušalcev function handleLinkClick(ev) { ev.preventDefault(); alert("Oh no you don't!"); } el.addEventListener('click', handleLinkClick, false); el.removeEventListener('click', handleLinkClick, false);
53. Event object O type O target O currentTarget O bubbles, cancelable, defaultPrevented O eventPhase O preventDefault() O stopPropagation()
54. 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
55. Primer: seznam vnosnih polj <ul class="value-list"> <li><input /></li> <li><a href="#" class="add">Add</a></li> </ul> function handleClick(ev) { if (ev.target.nodeName == 'A' && ev.target.className == 'add') { //... } }
56. 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
57. Dinamično izvajanje kode O Generiranje kode ali izvrševanje kode iz AJAX klica s pomočjo eval() O Vstavljanje novih <script> 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
58. Primer: preprost kalkulator <input name="exp"/> <button id="calc">Calculate!</button> document.getElementByid('calc').addEventListener( 'click', function(ev) { var str = document.querySelector('[name=exp]').value; alert(eval(str)); } );
59. Upravljanje z JS moduli O RequireJS O AMD O Browserify (Node.js + CommonJS) O Clientside (Node.js + CommonJS) O Grunt (Node.js build system)
60. 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
61. 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
62. 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
63. 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, ...