E03 "Day 3: 2:00 p.m 3:00 p.m"

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "E03 "Day 3: 2:00 p.m 3:00 p.m""

Jörgen Ekström
för 7 år sedan
Visningar:

1 E03 "Day 3: 2:00 p.m 3:00 p.m" Föreläsning 3, HT2013 Funktioner och objekt Kurs: 1dv403 Webbteknik I Johan Leitet

2 E03 Day 3: 2:00 p.m. - 3:00 p.m. Dagens agenda Funktioner Ordning av inladdning Objekt (skapa och ta bort) Arrayer Date Math try/catch/finally

3 Strict mode use strict ; // Använd strict-mode globalt function dostuff(){ use strict ; // Använd i funktionen } Undviker globala varibler. Ger fel vid felaktig hantering I samband med objekt Ger kod i eval() ett eget scope förändring av parseint().. IE10+ FF4+ S5.1+ C13+

4 Funktioner Funktioner låter oss dela upp vår kod vilket främjar återanvändning av kod samt gör vår kod mer lättläst och överskådbar. Funktioner är en av grundpelarna och vi kommer framöver att se hur vi kan använda funktioner på objekt. (metoder)

5 Funktioner function carinfo(brand, year){ } return "Din "+brand+" är av årsmodell "+year; var result = carinfo("chrysler", 2006); console.log(result); // "Din Chrysler är av årsmodell 2006"

6 Funktionsdeklaration: Funktioner function summera(tal1, tal2){ } return tal1+tal2; Funktionsuttryck: var summera = function(tal1, tal2){ }; return tal1+tal2; obs!

Detta gäller inte om funktion och anrop ligger i olika filer Funktionsuttryck: var

7 Funktionsdeklaration: Deklaration vs. Uttryck var summa = summera(5, 10); function summera(tal1, tal2){ return tal1+tal2; } Detta gäller inte om funktion och anrop ligger i olika filer Funktionsuttryck: var summa = summera(5, 10); // Genererar ett fel då summera inte är skapad ännu. var summera = function (tal1, tal2){ return tal1+tal2; };

8 Funktioner function summera(tal1, tal2){ } return tal1+tal2; Detta betyder att vi inte har någon overloading, överlagring var summeraigen = summera; console.log(summera(2,3)); // 5 console.log(summeraigen(2,3)); // 5 summera = null; console.log(summeraigen(2,3)); // 5

9 Funktionsuttryck function calculator(calcfunction){ var var1 = 10; var var2 = 20; return calcfunction(var1, var2); } var sum = function(x,y){ }; return x+y; var svar = calculator(sum); console.log(svar); //30 svar = calculator(function(x,y) { return x-y;};); console.log(svar); //-10

10 Ordningen spelar roll <html> </html> <head> </head> <body> </body> <title>funktioner</title> <script src="myfuncs1.js"></script> <script type="text/javascript"> myfunction1(); // Ok, inladdad myfunction2(); // Fail, ej inladdad </script> <script src="myfunc2.js"></script>

11 Variabelscope var color = "blue"; function getcolor(){ return color; } console.log( getcolor() ); var color = "blue"; function getcolor(){ var color = "red"; return color; } console.log( getcolor() ); Zakas: sid 90-92

12 Pure functions Funktioner utan sidoeffekter X Y f(x, y) Z

13 Objekt Objekt är en oerhört central del i JavaScript. Språket är i allra högsta grad objektorienterad, till och med objektbaserat. Nästan allt är objekt i grunden.

height); Vi kan även skapa metoder på vårt objekt med hjälp av en

14 ex nihilo Skapa egna objekt var rect = new Object(); rect.width = 200; rect.height = 300; console.log(rect.width * rect.height); Vi kan även skapa metoder på vårt objekt med hjälp av en anonym funktion: rect.area = function(){ return rect.width * rect.height; }; console.log(rect.area());

width; För att ta bort ett objekt använder vi inte delete, utan vi ser

15 Ta bort egenskaper och objekt Vi kan ta bort egenskaper genom delete-operatorn:... delete rect.width; För att ta bort ett objekt använder vi inte delete, utan vi ser till att det inte finns några referenser till objektet: var myobj = new Object(); var onemore = myobj; myobj = null; onemore = null;

16 Object literals { } var point = {x:15, y:12}; var rect = { width: 200, height: 300, }; area: function(){ return this.width * this.height; } console.log(rect.width);

17 Komma åt egenskaper var objectives = { info: "Save the world" } console.log(objectives.info); // Save the world console.log( objectives["info"] ); // Save the world

Array [ ] En array är ett inbyggt objekt som kan användas för att spara flera värden. Vi har lärt oss att variabler kan hålla ett och endast ett värde åt gången.

18 Array [ ] En array är ett inbyggt objekt som kan användas för att spara flera värden. Vi har lärt oss att variabler kan hålla ett och endast ett värde åt gången. Arrayer kan däremot hålla flera värden på samma gång Jack Variabel: Array: [1] [2] [3] [4] myvar // Dekalarera användningen av en ny array var myarr = []; myarr[0] = 34; myarr[1] = "Jack"; myarr[2] = 84.23; myarr[3] = {}; myarr = [34, "Jack", 84.23, {}]; myarr[0] myarr[1] myarr[2] myarr[3]

19 Array Arrayer har ett antal nyttiga metoder och egenskaper length join() pop() slice() sort() push() reverse() shift() reverse() splice() concat() h"ps://developer.mozilla.org/en/javascript/reference/global_objects/array

20 Array och for var myarr = [34, "Jack", 84.23, {}]; Använd for-loop: for (var j = 0; j < myarr.length; j+=1) { console.log(typeof myarr[j]); } Ännu mer resurssnålt: for (var j=0, length=myarr.length; j < length; j+=1) { console.log(typeof myarr[j]); }

21 Undvik for in på arrayer Riskabelt att använda med for in loopar: for (var i in myarr) { console.log(typeof myarr[i]); }

22 Iterativa metoder [].map() [].foreach() [].filter() [].reduce() [].every() IE9+

[16,17,18]; 0 1 2 0 1 2 10 13 14 16 11 12 15 17 18

23 Matris (multidimensionell array) var myarr = []; myarr[0] = [10,11,12]; myarr[1] = [13,14,15]; myarr[2] = [16,17,18]; myarr[1][2] = 45; myarr[2][0] = 12;

24 Matris var myarr = []; myarr[0] = []; myarr[1] = []; myarr[2] = []; myarr[1][3] = 5; myarr[0][1] = 8;

25 Date Med Date-objektet kan vi hantera tid, vilket ofta är väldigt centralt. För att skapa ett Date-objekt som håller nuvarande tid skapar vi ett tomt Date-objekt: var nowdate = new Date(); Detta objekt kommer att innehålla den tid som var då objektet skapades. Vi kan även skapa ett Date-objekt som innehåller en annan, lokal, tid: var mydate = new Date(2001, 10, 6, 21, 15, 20, 20); Datum-objektet ovan kommer att innehålla följande datum och tid: :15:20:20 Där det sista 20 är millisekunder. (Observera att månaden börjar på 0!) Datumobjekt spara sin tid i antalet millisekunder sedan den 1e Januari Det går att skicka in antalet millisekunder till Dateobjektet: var mydate = new Date( );

26 Date Användbara metoder på en instans av datumobjektet: getdate() setdate() getday() getseconds() setseconds() getfullyear() serfullyear() gettime() settime() getminutes() setminutes() getmonth() setmonth() gethours() sethours() var mydate = new Date(2001, 5); console.log(mydate.getmonth()); // 5

Date JavaScript har inbyggda metoder för att hantera UTC-tid (Coordinated Universal Time). UTC hette tidigare GMT (Greenwich Mean Time ) Lägg bara till UTC på funktionerna på förra sidan. T.ex: getutchour() för att få tiden i UTC.

27 Date JavaScript har inbyggda metoder för att hantera UTC-tid (Coordinated Universal Time). UTC hette tidigare GMT (Greenwich Mean Time ) Lägg bara till UTC på funktionerna på förra sidan. T.ex: getutchour() för att få tiden i UTC. UTC var mydate = new Date(Date.UTC(2001, 10, 6, 21, 15, 20, 20)); Lita på klienten? Att tiden på klienten stämmer kan vi inte lita på. Detta beror helt på vilka inställningar klienten har, t.ex. krävs att rätt tidszon är inställd. Bättre är då att låta servern ge klienten rätt tid. Detta kan vi dock inte åstadkomma utan serversideskript:

28 Math Math-objektet tillhandahåller en uppsättning av användbara metoder och egenskaper för att göra olika typer av beräkningar. console.log( Math.abs( -123 ) ); // 123 ceil() sin() floor() round() sqrt() pow() random () cos() tan() h"ps://developer.mozilla.org/en/javascript/reference/global_objects/math

29 try/catch/finally Try/catch/finally-block kan användas för att fånga fel som kastas. try { var myobj = x; // Kastar ett undantag om x inte är deklarerad. } catch(error){ console.log(error.message); } finally { // Kod här körs oavsett vad } throw kan användas för att kasta egengjorda undantag if(userinput < 0) { throw new Error( User input less than 0. Must be greater- ); }

30 Testa dig själv

31 Douglas Crockford joined Greenpeace to fight global namespace pollution. Källa:

Relevanta dokument

E13 "Behind the Wild"

E13 "Behind the Wild" Föreläsning 13, HT2014 Det vi missat och lite till Kurs: 1dv403 Webbteknik I Johan Leitet E13 Behind the Wild Dagens agenda Cookies Web storage Context/ändra context Augmentation