DEMO Html5DEMO WORDPRESSDEMO WEBSHOP

Javascript

Alert

alert("Hello World!")

alert (pop up) med en string som er selve teksten: Hello World!

Tilbage til toppen

Hvad er Javascript

Javascript er et “High Level” “Object-Oriented” “Multi Paradigm” kodesprog

High Level = Vi behøver ikke tænke på hukommelse af data
Object-Oriented = Baseret på objekter … vi kan arbejde og gemme “klynger” af data
Multi Paradigm = Vi kan bruge forskellige metoder til at kode / arbejde med Javascript

Tilbage til toppen

Hvad bruges Javascript til i webudvikling

Du kan tilføjer dynamiske effekter og interaktive metoder til hjemmesiden via Javascript.

Vi kan også bruge Javascript til at ændre HTML eller CSS.
Hente data fra helt andre hjemmesider

Tilbage til toppen

console.log

Du kan med console.log sende din Javascript kode til Google Dev Tools.

console.log(40 + 8 + 23 - 10);

Tilbage til toppen

At kalde Javascript

Med inlineScript kan du kalde Javascript direkte i din HTML fil via:

<script> ... </script>

Du kan kalde en ekstern Javascript fil med:

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

src="stien til filen"

Tilbage til toppen

Values

Value er et lille stykke data … den mest enkle form for af data

'Morten Peter Andersen' er en value
'1998' er en value

Tilbage til toppen

Variables

Variables kan indholde en eller flere values.
En Variable er en “kasse” med elementer og med en label skrevt på den.

Her en kasse der indeholder en value = Morten Andersen om med en label = firstName

let firstName = "Morten Andersen";

Navngivning af variables:
Navnet skrives med camelCase, altså som en langt tekst hvor et nyt ord begynder med et stort bogstav => firstName
Man kan også benytte underscore, som i dette eksempel vil blive first_name
Det er god praktisk, at navnet er beskrivende!

Når man navngiver variables skal der overholdes visse regler for ikke at få:
Uncaught SyntaxError: Invalid or unexpected token

  • Begynde med et tal
  • Indholde andre tegn end tal, underscore, bogstav eller dollartegnet ($)
  • new
  • function
  • name (virker men er ikke smart!)
  • Begynde med stort bogstav (virker men er heller ikke smart!)
  • Variable der kun er med STORE bogstaver er til variables der ikke ændres (eks. PI) => Konstant

Tilbage til toppen

Number

Alle tal i Javascript er decimaltal!
Det betyder at hel-tallet 3 fortolkes som 3.0 (punktum … ikke komma!)

Tilbage til toppen

String

Strings er en samling af bogstaver … ord.
Der benyttes ‘…’ eller “…” rundt omkring en string.

'Jeg er en string'
"og jeg er en string"

let enSangTitel = 'Dengang jeg drog af sted';

Tilbage til toppen

Boolean

Boolean benyttes til valg, da det kun kan være true eller false
(sandt eller falsk).

Tilbage til toppen

Undefined

Undefined er en value som endu ikke er deklareret.
En tom værdi.

let firstName;

Variablen firstName er undefined da navnet endu ikke er angivet!

Tilbage til toppen

Null

En tom værdi

Tilbage til toppen

Symbol

En værdi der er unik og som derfor ikke kan ændres.

Tilbage til toppen

BigInt

Benyttes til meget store tal værdier

Tilbage til toppen

Typeof

typeof bruges til at vise hvilken type data en variabel er.

console.log(typeof true); vil i Dev Tools konsol vise boolean
console.log(typeof "Morten"); en string
console.log(typeof 23); et number

Tilbage til toppen

let

For at deklarerer en variable kan vi benytte let
let bruger vi hvis en variable kan ændres som nedenstående eksempel

let firstName = "Morten Andersen";
firstName = "Jens Hansen";

let er en “a mutable variable”

Tilbage til toppen

const

const bruges til at “declare a variable” som IKKE skifter … er konstant!

const birthYear = 1968

Ens fødselsår skifter aldrig, så derfor giver det mening at benytte const når variablen birthYear skal angives.

const = immutable variable

Tilbage til toppen

var

var er en gammel metode til at deklarere variabler i javascript, som ikke længere er smart at bruge!

var blev benytte før ES6

Tilbage til toppen

operator

operators gør det muligt at ændre værdier eller sætte værdier sammen.

Matematiske operators => +,-, /, * etc.
(4 ** 3 betyder 4 * 4 * 4)
+ kan også bruges til at sammenkæde konstanter som:

const firstName = "Morten";
const lastName = "Andersen";
console.log(firstName + lastName);

Resultat = MortenAndersen

console.log(firstName + " " + lastName);

Resultat = Morten Andersen

Assignment operators

let x = 10 + 5; // 15
x += 10; // x = 15 + 10 = 25
x *= 4 // x = x * 4 = 100
x++; // x = x + 1 = 101
x--; // x = x - 1 = 100

Comparison operators

const now = 2024;
const minAlder = now - 1968;
const susAlder = now - 1966;
console.log(minAlder < susAlder);

Resultat = true

<
>
<=
>=

operatores til at sammenligne værdier

Logiske operators

operators der forbinder værdier

typeof

=

Tilbage til toppen

Operator precedence

developer.mozilla.org

En tabel over hvilke operators der udføres først og hvorfra de “læses” … fra venstre til højre eller omvendt

Tilbage til toppen

Template literals / Template strings

Se mere om emnet her: developer.mozilla.org

Der anvendes backtick `...`

Denne kode der skal bruge mellemrum imellem ord for at give mening

const firstName = "Morten";
const lastName = "Andersen";
const job = "webnørd";
const birth = 1968;
const now = 2024;
const morten = "Hej jeg hedder " + firstName + " " + lastName + " og jeg er " + (now - birth) + " år gammel.";
console.log(morten);

Dette kan skrives nemmere på denne måde:

const mortenNy = `Hej jeg hedder ${firstName} ${lastName} og jeg er ${now - birth} år gammel`;
console.log(mortenNy);

Tilbage til toppen

if / else Statements

developer.mozilla.org

if(...){
...
} else {
...
}

Er du gammel nok til at få kørekort?

const age = 12;
if (age >= 18) {
console.log(`Da du er ${age} år gammel, må du godt få kørekort.`);
} else {
console.log(`Da du er ${age} år gammel, er du desværre ikke gammel nok endu. Men om ${18 - age} år er du klar!`);
}

Vi kan tjekke flere gange før vi benytter else

if(...){
...
} else if {
...
} else {
...
}

Tilbage til toppen

Type Conversion and Coercion

Type conversion

Vi har en konstant = inputYear men den er desværre en gemt som en tekst.
For at ændre den til et tal, så vi kan lave beregninger, må vi benytte Number(...)

const inputYear = "1991";
console.log(Number(inputYear) + 9);

Resultat skulle nu gerne være = 2000

Vi kan selvfølgelig også gå den modsatte vej, hvor vi kan ændre et tal til en tekst (String).

console.log(String(23));

Type coercion

console.log("Jeg er " + 56 + " år gammel.");

Ved ovenstående bliver tallet 56 automatisk ændret så det hele er en tekst!
“Jeg er 56 år gammel.”

Plus og minus har meget forskellige effekt:

console.log("23" + "10" + 3);
console.log("23" - "10" - 3);

Ved plus (+) ændres det sidste 3 til tekst og derfor er resultatet = 23103
Ved minus(-) ændres “23” og “10” til tal og derfor er resultatet = 10

Tilbage til toppen

Sande og falske værdier / Truthy and Falsy Values

Falske værdier

  • 0
  • ´´ (empty sting)
  • undefined
  • null
  • NaN

Tilbage til toppen

Equality Operators

developer.mozilla.org

Strict equality

developer.mozilla.org

===

const age = 18;
if (age === 18) console.log("Du er lige blevet myndig!");

Benyttes når de skal være 100% ens!
Strict equality benytter IKKE Type coercion, hvilket betyder at (eks.)

'18' === 18 er FALSK (false)

Loose equality

==

Loose equality benytter Type coercion, hvilket betyder at (eks.)

'18' == 18 er SANDT (true)

NB!
Brug Strict equality så ofte du kan, da det gør det meget nemmere at fejlrette din kode.

Different operator

!== (strict)

!= (loose)

Tilbage til toppen

Boolean Logic

AND &&, OR ||, NOT !

&& alle udsagn skal være sande for at det er sandt (TRUE)

|| hvis blot en af udsagnene er sande er det sandt

! gør sandt til falsk og falsk til sandt

Tilbage til toppen

Switch Statement

const day = "mandag";

switch (day) {
case "mandag":
console.log("I dag er det mandag");
console.log("I morgen er det tirsdag");
break;
case "tirsdag":
console.log("I dag er det tirsdag");
break;
case "onsdag":
console.log("I dag er det onsdag");
break;
case "torsdag":
console.log("I dag er det torsdag");
break;
case "fredag":
console.log("I dag er det fredag");
break;
case "lørdag":
case "søndag":
console.log("Endelig blev det weekend");
break;
default:
console.log("HOV det er slet ikke en dag???");
break;
}

Tilbage til toppen

Statements and Expressions

Expressions er kode dele der beskriver en værdi.

3 + 4

eller

1968

true && false && !false

giver en Boolean værdi, så derfor også en Expression

Statements

En Statement er en lidt større kode stump der IKKE repræsentere en værdi, men kode der udfører det vi ønsker at udføre.

if (23 > 10) {
const str = '23 er større end 10'
}

Tilbage til toppen

The Conditional (Ternary) Operator

developer.mozilla.org/

const age = 13;
age >= 18
? console.log("Jeg må heldigvis drikke øl")
: console.log("Øv jeg er ikke gammel nok til at drikke øl");

const age = 23;
const drik = age >= 18 ? "øl" : "vand";
console.log(Jeg må drikke ${drik});

Tilbage til toppen

Strict Mode

Ved at bruge Strict Mode i din Javascript, bliver din kode mere “rigtigt” og der er mulighed for, at du under kodningen vil modtage meddelelser, hvis en del af din kode ikke virker.
Kan hjælpe med stavefejl, undgå at du benytter “reserverede ord” etc.

developer.mozilla.org

Øverst i din .js fil skriver du:

'use strict';

Tilbage til toppen

Functions

developer.mozilla.org

Hvad er er en Function?
I sin mest simple for er det en kode-stykke, som kan genbruges igen og igen.

Function body:

function navn() {

}

En simpel function med navnet “logger” som bliver “kaldt” via logger();

function logger() {
console.log("Mit navn er Morten");
}
// Calling / running / invoking
logger();

Function med parameters og arguments
Her har vi to parameters = æbler og appelsiner

function fruitProcessor(æbler, appelsiner) {
const juice = Juice med ${æbler} æbler og ${appelsiner} appelsiner.;
return juice;
}

Her kalder vi function appelJuice med 2 arguments … som er 5 og 0

const appelJuice = fruitProcessor(5, 0);
console.log(appelJuice);

Resultat = “Juice med 5 æbler og 0 appelsiner.

Tilbage til toppen