Osnove JavaScripta in HTML DOM API

Osnove JavaScripta in HTML DOM API

A9b044960d076e43d18e07f09f7a15c6?s=128

Klemen Slavič

September 11, 2012
Tweet

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, ...