1ME323 Webbteknik 3 Lektion 4 Objektbaserad programmering Rune Körnefors Medieteknik 1 2018 Rune Körnefors rune.kornefors@lnu.se
Agenda Objekt i JavaScript Strukturering av data Strukturering av programkod 2
Från föreläsning 3 i 1ME322 Objekt Gruppering av: egenskaper (variabler) metoder (funktioner) instans objektklass instans instans instans = new Object() d = new Date(); x = new Date(2016,1,9); s1 = new String("abc"); s2 = "abc"; r = Math.random(); McPeak, J. & Wilton, P. (2015) Beginning JavaScript, Fifth Edition, John Wiley & Sons, Inc., s.100f 3
Allt är objekt <img src="bild.jpg" alt="bildbeskrivning"> <a href="somewhere.htm" target="_blank">gå dit</a> p {color:#de4; font-size:18px;} s1 = "en text"; n = s1.length; d = new Date(); y = d.getfullyear(); elems = document.getelementsbyid("abc").getelementsbytagname("p"); elems[i].innerhtml = "en text"; elems[i].style.color = "#3C9"; movie* category [attr] title year 4 <movie category="western"> <title>sheriffen</title> <year>1952</year> </movie> <movie> </movie>
Från lektion 3 DOM (Document Object Model) Events Node Style Document Element Attr CharacterData HTMLDocument HTMLElement Text Comment a body img document style element element element attr event text text nodevalue element element nodevalue text text style nodevalue nodevalue 5
Generellt objekt {egenskap1:data, egenskap2:data, } Skapa ett generellt objekt obj = new Object(); obj.e1 = x; obj.e2 = y; obj.e3 = z; obj= {} obj.e1 = x; obj.e2 = y; obj.e3 = z; obj= {e1:x,e2:y,e3:z} Egenskaper obj.egenskap = data Variabel som är referens till objektet Namn på egenskapen Kan vara enkel data som text, tal, etc. eller ett objekt 6
Objekt och variabler a = 123; b = "text"; x = { e1:56; e2:78; }; a b 123 text x e1:56 e2:78 c = a; y = x; c y 123 7
Garbage Collection x = { e1:56; e2:78; }; y = x; x y e1:56 e2:78 x = null; x y e1:56 e2:78 y = null; x y e1:56 e2:78 Automatisk "garbage collection" då det inte längre finns någon referens till objektet. 8
lekt4-ex1-1 lekt4-ex1-2 lekt4-ex1-3 Exempel 1 Skapa objekt på några olika sätt 1. Tre olika objekt 2. Array av objekt 3. Lägg till underobjekt Struktur movie title year director Jämför med XML <movie> <title> </title> <year> </year> <director> </director> </movie> McPeak, J. & Wilton, P. (2015) Beginning JavaScript, Fifth Edition, John Wiley & Sons, Inc., s.144f 9
lekt4-ex2 Exempel 2 Funktioner för att lägga till och ta bort filmer movielist push(m) addmovie() film film film film film obj movielist movielist splice deletemovie() film film film film film film film film film film 10
lekt4-ex3 Exempel 3 Reference Type "Constructor function" för att skapa ett nytt objekt "Mall" för objektet // Constructor function MyObject(d1,d2,d3) { this.e1 = d1; this.e2 = d2; this.e3 = d3; } obj= new MyObject(x,y,z); McPeak, J. & Wilton, P. (2015) Beginning JavaScript, Fifth Edition, John Wiley & Sons, Inc., s.148f 11
lekt4-ex4 Exempel 4 Sammansättning av flera objekt Beroende mellan objekt movielist film film film film film namn namn namn directorlist 12
Strukturera programkoden i objekt Objekt med endast data var objekt1 = { egenskap1: "data", egenskap2: "data", egenskap3: "data" } Objekt med både data och funktioner (egenskaper och metoder) var objekt2 = { egenskap1: "data", egenskap2: "data", egenskap3: "data", Obs! Kommatecken mellan varje egenskap och metod. Ej efter sista. } metod1:function() { // programsatser }, metod2:function() { // programsatser }, metod3:function() { var a = objekt1.egenskap2; objekt2.egenskap3 = 5; objekt2.metod1(); } 13
lekt4-ex5 Exempel 5 Strukturering av programkoden som objekt Dela upp i objekt Globala variabler görs om till egenskaper i objekten Varje objekt har en init-funktion Övriga funktioner fördelas mellan objekten Döp om egenskaper och metoder, så de blir kortare och passar ihop med objektens namn directors list, formelem, init(), add() movies list, formelem, reselem, init(), write(), add(), delete() egenskaper metoder objekt global init-funktion som anropar directors.init() och movies.init(). 14
lekt4-ex6 Exempel 6 Spara objekt i localstorage Objekten måste göras om till textsträngar Alternativ 1: firstname lastname firstname lastname firstname lastname firstname,lastname;firstname,lastname;firstname,lastname Alternativ 2: directorlist firstname;firstname;firstname lastname;lastname;lastname 15