Noter: JavaScript (3)

Noter om JavaScript taget på UCL på MMD. Undervisningsmateriale udgivet af Thomas Jessen.

Litteratur, som ligger grundlag for undervisningen: Murach’s JavaScript (2nd Edition) by Mary Delamater, kapitel 1 og 3.

Læringsmål

Beskriv følgende:

1. Hvad er operatorer og hvordan kodes de?
2. Hvad er en kontrolstruktur og hvordan kodes de?
   • if-else 
   • While loops 
   • For loops 
3. Hvad er et array og hvordan kodes de?

Operatorer

Rational operators

Kilde: Side 84-85 i Murach’s JavaScript & JavaScript Comparison Operators via. https://www.w3schools.com/js/js_operators.asp.

• ==
  • Lige med
• ===
  • Lige med værdi og type
• !=
  • Ikke lige med
• !==
  • Ikke lig med værdi og type
• <
  • Mindre end
• <=
  • Mindre end eller lige med
• >
  • Større end
• >=
  • Større end eller lige med
• ?
  • Ternær operation

Rationelle operatorer er operatorer man bruger til sammenligning. Sammenligninger returnerer TRUE eller FALSE, afhængigt af om sammenligningen var sand eller ej.

Nedenfor er der indskrevet eksempler på brug af rational operators, hvor x har fået værdien 1.

var x = 1;
var y = false;
/*
== | Lige med
*/
// Eksempel:
x == 1; // Returnerer TRUE, da x er 1
x == 0; // Returnerer FALSE, da x ikke er 0
x == 2; // Returnerer FALSE, da x ikke er 2
x == true; // Returnerer TRUE, da x er TRUE

/*
=== | Lige med værdi og type
*/
// Eksempel:
x === 1; // Returnerer TRUE, da x er 1 og er et tal
x === 0; // Returnerer FALSE, da x ikke er 0
x === 2; // Returnerer FALSE, da x ikke er 2
x === true; // Returnerer FALSE, da x ikke er en boolean

/*
!= | Ikke lige med
*/
// Eksempel:
x != 1; // Returnerer FALSE, da x er 1
x != 0; // Returnerer TRUE, da x ikke er 0
x != 2; // Returnerer TURE, da x ikke er 2
x != true; // Returnerer FALSE, da x er TRUE

/*
!== | Ikke lige med værdi og type
*/
// Eksempel:
x !== 1; // Returnerer FALSE, da x er 1
x !== 0; // Returnerer TRUE, da x ikke er 0
x !== 2; // Returnerer TURE, da x ikke er 2
x !== true; // Returnerer TRUE, da x ikke er en boolean

/*
< | Mindre end
*/
// Eksempel:
x < 1; // Returnerer FALSE, da x er ikke er mindre end 1
x < 0; // Returnerer FALSE, da x ikke er mindre end 0
x < 2; // Returnerer TRUE, da x er mindre end 2
x < true; // Returnerer FALSE, da x ikke er mindre end true

/*
<= | Mindre end eller lige
*/
// Eksempel:
x <= 1; // Returnerer TRUE, da x er er mindre end lige 1
x <= 0; // Returnerer FALSE, da x ikke er mindre eller lige end 0
x <= 2; // Returnerer TRUE, da x er mindre end eller lige 2
/*
> | Større end
*/
// Eksempel:
x > 1; // Returnerer FALSE, da x er ikke større er større end 1
x > 0; // Returnerer TRUE, da x  er større end 0
x > 2; // Returnerer FALSE, da x er ikke er større end 2
/*
>= | Større end eller lige
*/
// Eksempel:
x >= 1; // Returnerer TRUE, da x er er større end lige 1
x >= 0; // Returnerer TRUE, da x er større eller lige end 0
x >= 2; // Returnerer FALSE, da x ikke er større end eller lige 2
/*
? | Ternær operation
*/
// Eksempel:
x ? true : false // returnerer TRUE, fordi x er TRUE
x ? false : true // returnerer FALSE, fordi x er TRUE
y ? true : false // returnerer FALSE, fordi y er FALSE
y ? false : true // returnerer TRUE, fordi y er FALSE

Logical operators

Kilde: Side 84-85 i Murach’s JavaScript.

• !
  • Ikke / Omvendt
  • Gør et sandt tilfælde usandt (ved TRUE returneres i stedet FALSE)
  • Gør et usandt tilfælde sandt (ved FALSE returneres i stedet TRUE)
  • Sættes før en variabel, værdi, array, funktion eller constant.
• &&
  • Og
  • Returnerer TRUE hvis alle tilfælde er TRUE.
  • Returnerer FALSE hvis et eller flere tilfælde er FALSE
  • Sættes mellem statements
• ||
  • Eller
  • Returnerer TRUE hvis et eller flere tilfælde er TRUE.
  • Returnerer FALSE hvis alle tilfælde er FALSE
  • Sættes mellem statements

Logical operators er operatorer der beskriver om tilfælde er sande. De kan sammensættes.

Nedenfor er der indskrevet eksempler på brug af logical operators, hvor der afprøves en bred variation af JavaScript værdier.

x = true;
y = false;
z = 1;
text = 'false';
fun = function() {
   return(true);
}; 
n = null;
x; // Returnerer TRUE
y; // Returnerer FALSE
z; // Returnerer 1, hvilket er TRUE
text; // Returnerer 'false', hvilket er TRUE
fun(); // Returnerer TRUE
n; // Returnerer null, hvilket ikke er tidssvarende TRUE eller FALSE
/*
&& | Og
*/
// Eksempel:
x && y; // Returnerer FALSE, fordi y er FALSE
x && !y; // Returnerer TRUE, fordi x og y er TRUE
!x && y; // Returnerer FALSE, fordi x og y er FALSE
/*
|| | Eller
*/
// Eksempel:
x || y; // Returnerer TRUE, fordi x er TRUE
x || !y; // Returnerer TRUE, fordi x og y er TRUE
!x || y; // Returnerer FALSE, fordi x og y er FALSE
// Eksempel med || og &&
x && x || y; // Returnere TRUE. Er tilsvarende (x && x) || y;
!x && x || y; // Returnere FALSE. Er tilsvarende (!x && x) || y;

Assignment Operators

Kilde: JavaScript Assignment Operators via. https://www.w3schools.com/js/js_operators.asp.

• =
  • Lig værdien
• +=
  • Nuværende værdi + den nye værdi
• -=
  • Nuværende værdi – den nye værdi
• *=
  • Nuværende værdi ganget med den nye værdi
• /=
  • Nuværende værdi divideret med den nye værdi
• %=
  • Overskud af nuværende værdi divideret med den nye værdi
• **=
  • Nuværende værdi ganget eksponentielt med den nye værdi

Assignment operators tilskriver en værdi.

Nedenfor er der indskrevet eksempler på brug af assignment operators, hvor x tilskrives nye værdier.

var x = 1; // 1
x += 1; // 2
x -= 1; // 1
x *= 1; // 1
x *= 2; // 2
x *= 2; // 4
x /= 2; // 2
x %= 3; // 2
x **= 2 // 4
x **= 2 // 16

JavaScript String Operators

Kilde: JavaScript String Operators via. https://www.w3schools.com/js/js_operators.asp.

Tekst strenge. Man kan bruge ” eller ‘.

Eksempler:

"Tekst i en streng";
'Hello world';

Øvrige JavaScript Operators

Kilde: JavaScript Type Operators via. https://www.w3schools.com/js/js_operators.asp.

Kontrolstruktur

Kilder: Side 86-87 i Murach’s JavaScript & https://www.w3schools.com/js/js_switch.asp

Kontrolstrukturer if og else statements og cases.

If og else statements bygges op således

if(… condition …){… statements …} ifelse(… alernate condition…){… statements …} else{… statements …}

Hvis condition (krav) i if returnerer TRUE udføres statements deri. Hvis ikke, afprøves alle ifelse conditions. Hvis ingen if eller ifelse conditions er sande, udføres else, hvis den er sat.

Nedenfor er der indskrevet eksempler på brug af kontrolstruktur i if & else og switch og case.

var x = true;
var y = false;
var n = null;
// If and else
if(x){
   return(1);
} elfeif(x == false) {
   return(2);
} else {
   return(3);
}
// Returnerer 1
if(y){
   return(1);
} elfeif(x == false) {
   return(2);
} else {
   return(3);
}
// Returnerer 2
if(y){
   return(1);
} elfeif(x == false) {
   return(2);
} else {
   return(3);
}
// Returnerer 3

// Switch and Case
switch(x) {
  case true:
    return(1);
    break;
  case false:
    return(2);
    break;
  default:
    return(3);
}
// Returnerer 1
switch(y) {
  case true:
    return(1);
    break;
  case false:
    return(2);
    break;
  default:
    return(3);
}
// Returnerer 2
switch(n) {
  case true:
    return(1);
    break;
  case false:
    return(2);
    break;
  default:
    return(3);
}
// Returnerer 3

for- While- & do while- loops

Kilder: Side 88-91 i Murach’s JavaScript.

for loops er et loop der eksekverer på baggrund af en værdi der stiger eller falder, indtil det rammer en ønsket værdi.

While- og do while loops er noget kode der bliver ved med at blive udført indtil et statement er sandt. Do-while loop vil altid blive kørt en gang.

I loops der er afhængige af en værdi, bruges værdien i typisk.

Nedenfor kan der ses eksempler på hvordan man kan skrive 1-10 til console med hver metode.

for(i=1; i<=10; i++){
   console.log(i);
}
i=1;
while(i<10){
   console.log(i);
   ++i;
}
i=1;
do{
   console.log(i);
   ++i;
}
while(i<10);

Fordele og ulemper

Alle loops kan bruges til at køre en række af værdier igennem.

• for er godt, da kravene kan skrives øverst, og derfor er nem at læse og forstå
• do-while og while er praktisk hvis regnestykket for den næste iteration er komplekst.

Ikke lineære eller tilfældige iterationer kan implementeres i begge strukturer, men implementeringen er nemmest i do-while og while.

do-while vil altid blive anvendt en gang. Så man skal være påpasselig med hvordan det stilles op.

while loop har det med at blive eksekveret 2 gange til sidst, medmindre man er påpasselig med sin opsætning.

Arrays

Kilder: Side 98-99 i Murach’s JavaScript.

Arrays er en samling af 0 eller flere elementer.

Længden af et array er defineret af antallet af elementer deri.

Indekseringen af array starter på 0.

Nedenfor kan der ses et eksempel på et array

var liste = []; // tomt array
liste[0] = 'Hello'; // liste[0] returnerer fremover 'Hello'
liste[1] = 'World'; // liste[1] returnerer fremover 'World'
liste; // Returnerer ["Hello", "World"]