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

Full text

(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

IE10+ FF4+ S5.1+ C13+

”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()

•  …..

(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)

Funktioner

function summera(tal1, tal2){

return tal1+tal2;

}

Funktionsdeklaration:

var summera = function(tal1, tal2){

return tal1+tal2;

};

Funktionsuttryck:

obs!

(7)

Deklaration vs. Uttryck

var summa = summera(5, 10);

function summera(tal1, tal2){

return tal1+tal2;

}

var summa = summera(5, 10); // Genererar ett fel då summera inte är skapad ännu.

var summera = function (tal1, tal2){

return tal1+tal2;

};

Funktionsdeklaration:

Funktionsuttryck:

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

(8)

Funktioner

function summera(tal1, tal2){

return tal1+tal2;

}

var summeraIgen = summera;

console.log(summera(2,3)); // 5 console.log(summeraIgen(2,3)); // 5 summera = null;

console.log(summeraIgen(2,3)); // 5

Detta betyder att vi inte har någon ”

overloading”, överlagring

(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>

<head>

<title>Funktioner</title>

<script src="myFuncs1.js"></script>

</head>

<body>

<script type="text/javascript">

myFunction1(); // Ok, inladdad

myFunction2(); // Fail, ej inladdad </script>

<script src="myFunc2.js"></script>

</body>

</html>

(11)

Variabelscope

var color = "blue";

function getColor(){

return color;

}

console.log( getColor() );

Zakas: sid 90-92 var color = "blue";

function getColor(){

var color = "red";

return color;

}

console.log( getColor() );

(12)

Pure functions

Funktioner utan sidoeffekter

f(x, y) Z

X

Y

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

(14)

Skapa egna objekt

var rect = new Object();

rect.width = 200;

rect.height = 300;

console.log(rect.width * rect.height);

rect.area = function(){

return rect.width * rect.height;

};

console.log(rect.area());

Vi kan även skapa metoder på vårt objekt med hjälp av en anonym funktion:

ex nihilo

(15)

Ta bort egenskaper och objekt

...

delete rect.width;

Vi kan ta bort egenskaper genom delete-operatorn:

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 rect = {

width: 200, height: 300,

area: function(){

return this.width * this.height;

} };

console.log(rect.width);

var point = {x:15, y:12};

(17)

Komma åt egenskaper

var objectives = {

info: "Save the world"

}

console.log(objectives.info); // Save the world

console.log( objectives["info"] ); // Save the world

(18)

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.

Array [ ]

[1] [2] [3] [4]

”Jack”  

34   84.23   567  

myVar myArr[0] myArr[1] myArr[2] myArr[3]

Array:

Variabel:

// 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, {}];

(19)

Array

Arrayer har ett antal nyttiga metoder och egenskaper

length

concat() slice()

join()

sort()

reverse()

push()

pop()

h"ps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array   reverse()

shift()

splice()

(20)

Array och for

for (var j = 0; j < myArr.length; j+=1) { console.log(typeof myArr[j]);

}

Använd for-loop:

var myArr = [34, "Jack", 84.23, {}];

for (var j=0, length=myArr.length; j < length; j+=1) { console.log(typeof myArr[j]);

}

Ännu mer resurssnålt:

(21)

Undvik for in på arrayer

for (var i in myArr) {

console.log(typeof myArr[i]);

}

Riskabelt att använda med for – in loopar:

(22)

Iterativa metoder

IE9+

[].map()

[].forEach() [].reduce()

[].every()

[].filter()

(23)

Matris (multidimensionell array)

var myArr = [];

myArr[0] = [10,11,12];

myArr[1] = [13,14,15];

myArr[2] = [16,17,18];

0  1  2   0  

  1     2  

15   10  

16  

11   12   13   14  

17   18  

myArr[1][2] = 45;

myArr[2][0] = 12;

0  1  2   0  

  1     2  

45

  10  

12

 

11   12   13   14  

17   18  

(24)

Matris

var myArr = [];

myArr[0] = [];

myArr[1] = [];

myArr[2] = [];

myArr[1][3] = 5;

myArr[0][1] = 8;

(25)

Date

var nowDate = new Date();

var myDate = new Date(2001, 10, 6, 21, 15, 20, 20);

var myDate = new Date(943410001010);

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:

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:

Datum-objektet ovan kommer att innehålla följande datum och tid:

2001-11-06 21: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 1970. Det går att skicka in antalet millisekunder till Dateobjektet:

(26)

Date

Användbara metoder på en instans av datumobjektet:

getDate() setDate()

getDay()

getMonth() setMonth()

getFullYear() serFullYear()

getHours() setHours() getMinutes()

setMinutes()

getSeconds() setSeconds()

getTime()

setTime()

var myDate = new Date(2001, 5);

console.log(myDate.getMonth()); // 5

(27)

Date

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

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:

var myDate = new Date(Date.UTC(2001, 10, 6, 21, 15, 20, 20));

(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()

floor()

round() random () pow()

h"ps://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math  

sqrt

()

sin()

cos()

tan()

(29)

try/catch/finally

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 }

if(userInput < 0) {

throw new Error(”User input less than 0. Must be greater-”);

}

Try/catch/finally-block kan användas för att fånga fel som kastas.

throw kan användas för att kasta egengjorda undantag

(30)

Testa dig själv

(31)

Douglas Crockford joined Greenpeace to fight global namespace pollution.

Källa: http://twitter.com/crockfordfacts

Figur

Updating...

Referenser

Updating...

Relaterade ämnen :