Javascript
Alert
alert("Hello World!") alert (pop up) med en string som er selve teksten: Hello World!
Anonymous functions
Function expression
En function uden navn!
// Function expression
const calcAge = function (birthYear) {
return 2024 - birthYear;
};
const age = calcAge(1968);
console.log(age); Resultat = 56
Læs mere om function expression her
Arrow function
En “Arrow function” laves … ja med netop en pil =>
(birthYear) => 2024 - birthYear; Her "gemmes" den i en konstant (calcAge3).
Bagefter vises den i console.log med parameter 1968 (mit fødselsår)
const calcAge3 = (birthYear) => 2024 - birthYear;
const age3 = calcAge3(1968);
console.log(age3); Læs mere her.
Herunder en Arrow function med udregninger:
const yearsUntilRetirement = (birthYear, firstName) => {
const age = 2024 - birthYear;
const retirement = 65 - age;
return `${firstName} kan gå på pension om ${retirement} år`;
};
console.log(yearsUntilRetirement(1968, "Morten")); Hvilket viser at jeg kan gå på pension om 9 år 🙂
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"
BigInt
Benyttes til meget store tal værdier
Boolean
Boolean benyttes til valg, da det kun kan være true eller false
(sandt eller falsk).
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
console.log
Du kan med console.log sende din Javascript kode til Google Dev Tools.
console.log(40 + 8 + 23 - 10); 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
Equality Operators
Strict equality
===
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)
Functions
Function declaration
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."
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
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
if / else Statements
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 {
...
} let
For at deklarerer en variable kan vi benytte letlet bruger vi hvis en variable kan ændres som nedenstående eksempel
let firstName = "Morten Andersen";
firstName = "Jens Hansen"; let er en "a mutable variable"
Null
En tom værdi
Number
Alle tal i Javascript er decimaltal!
Det betyder at hel-tallet 3 fortolkes som 3.0 (punktum … ikke komma!)
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
=
Operator precedence
En tabel over hvilke operators der udføres først og hvorfra de “læses” … fra venstre til højre eller omvendt
Sande og falske værdier / Truthy and Falsy Values
Falske værdier
- 0
- ´´ (empty sting)
- undefined
- null
- NaN
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'
} 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.
Øverst i din .js fil skriver du:
'use strict'; 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'; 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;
} Symbol
En værdi der er unik og som derfor ikke kan ændres.
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); The Conditional (Ternary) Operator
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}); 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
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 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!
Values
Value er et lille stykke data … den mest enkle form for af data
'Morten Peter Andersen' er en value
'1998' er en value 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
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