JavaScript & events Flashcards
Hvad er JavaScript?
et programmeringssprog, der bruges til at gøre websider interaktive, fx ved at håndtere knaptryk, animationer og dynamisk indhold.
Hvordan føjes JavaScript til en HTML-fil?
tilføjes med <script tagget i HTML, typisk før <body>
Hvilke variabeltyper findes i JavaScript?
let → Kan ændres
const → Kan ikke ændres
var → (gammel metode, bør undgås)
Hvordan definerer man en variabel?
let navn = “zuzu”;
const alder = 30;
Hvad er de primitive datatyper i JavaScript?
Number → let tal = 23;
String → let tekst = “Hej”;
Boolean → let sandt = true;
Undefined → let tom;
Null → let ingenting = null;
Symbol → let unik = Symbol();
BigInt → let stortTal = 123456789n;
Hvad er forskellen på null og undefined?
null → En tom værdi sat af udvikleren.
undefined → Variablen er ikke tildelt en værdi.
Hvilke matematiske operators findes i JavaScript?
+ (addition)
- (subtraktion)
* (multiplikation)
/ (division)
% (modulus, rest)
Hvad gør === (strict equality)?
Sammenligner både værdi og datatype.
console.log(5 == “5”); ✅
console.log(5 === “5”); ❌
Hvordan definerer man en simpel funktion i JavaScript?
function hils() {
console.log(“Hej, verden!”);
}
hils();
Hvad sker der, hvis en funktion ikke har return?
Funktionen udfører en handling, men returnerer undefined.
Hvad er en Arrow Function (=>)?
en kortere måde at skrive en funktion i JavaScript på. Gør koden mere læsbar og kompakt.
Hvad er console.log?
en funktion i JavaScript, der bruges til at udskrive data i browserens udviklingskonsol.
Hvad er et objekt i JavaScript?
En samling af nøgle-værdi par.
Hvad definere en HTML event attribute?
definerer en handling, der sker, når en bruger interagerer med en webside.
Hvordan definerer man en event-handler i JavaScript?
Man kan bruge addEventListener() eller tilføje en event direkte i HTML.
(eventtype(‘click’), eventhandler(function))
Nævn vigtige HTML event attributes!!
onclick → Når en knap klikkes.
onmouseover → Når musen holdes over et element.
onkeydown → Når en tast trykkes ned.
onload → Når siden er indlæst.
Hvad er DOM-manipulation?
betyder, at JavaScript kan ændre HTML og CSS, så indholdet på en webside opdateres uden at genindlæse siden.
Hvad er document i JavaScript?
en del af DOM (Document Object Model) og repræsenterer hele HTML-dokumentet i JavaScript. Det giver adgang til og mulighed for at ændre HTML-elementer.
Hvordan ændrer JavaScript HTML-indhold?
Ved at bruge document.querySelector() til at finde et element og ændre dets indhold.
Hvordan reagerer JavaScript på brugerens klik?
Ved at bruge event listeners, der kører kode, når en bruger klikker.
Hvordan gemmer man data i browseren?
bruge localStorage, som gemmer data, selv efter siden genindlæses.
localStorage.setItem(“navn”, “Zuhur”);
console.log(localStorage.getItem(“navn”));
Hvad er forskellen mellem setTimeout() og setInterval()?
- setTimeout() udfører kode én gang efter en forsinkelse(eks. popup besked).
- setInterval() gentager kode med et fast tidsinterval. (eks ur)
Hvad er NaN i JavaScript?
NaN betyder “Not-a-Number” og opstår, når en beregning giver et ugyldigt tal.
Hvad er forskellen på isNaN() og Number.isNaN()?
- isNaN() konverterer værdien til et tal, før den tester.
- Number.isNaN() tester kun, hvis værdien allerede er et tal.
console.log(isNaN(undefined)); // true
console.log(Number.isNaN(undefined)); // false
Hvad betyder operator precedence i JavaScript?
Operator precedence bestemmer rækkefølgen, hvori operatorer evalueres i et udtryk
Hvad sker der, hvis et udtryk indeholder flere operatorer med forskellig precedence?
Den operator med højere precedence udføres først
Hvad betyder associativitet i forhold til operatorer?
Associativitet bestemmer, om et udtryk evalueres fra venstre mod højre (left-associative) eller højre mod venstre (right-associative).
Hvordan kan man ændre operator precedence i et udtryk?
Ved at bruge parenteser (), da de har den højeste precedence og tvinger en bestemt rækkefølge.
Hvilken associativitet har assignment-operatoren =?
Den er right-associative, hvilket betyder, at evalueringen sker fra højre mod venstre.
let x, y, z;
x = y = z = 10; // Alle får værdien 10
Hvad bliver værdien af a og b i dette eksempel?
let a, b;
a = b = 5;
b bliver sat til 5, derefter bliver a sat til værdien af b, så både a og b bliver 5
Hvad er forskellen på en unary og en binary operator?
- unary operator opererer på én operand (fx !true) (Kun én værdi at arbejde med)
- binary operator opererer på to operander (fx 3 + 5) (Kræver to værdier)
Hvordan fungerer precedence for unary og binary operatorer?
Unary operatorer som ! har typisk højere precedence end binary operatorer som + og -
Hvad bliver resultatet af følgende udtryk?:
const a = 1;
const b = 2;
console.log(typeof a + b);
“number2”, fordi typeof a evalueres først (“number”) og derefter concatenates med b
Hvad betyder short-circuiting i JavaScript?
Betyder, at en operator kan stoppe evalueringen tidligt, hvis det ikke er nødvendigt at evaluere resten.
let isLoggedIn = false && “Welcome!”;
console.log(isLoggedIn); // false
Hvilke operatorer i JavaScript er short-circuiting?
&& (AND), || (OR), ?? (nullish coalescing) og ?. (optional chaining)
Hvilken metode bruges til at vælge alle elementer med en bestemt klasse?
document.getElementsByClassName() eller document.querySelectorAll(), hvor den første returnerer en live HTMLCollection og den anden returnerer en statisk NodeList.
Hvordan opretter man et nyt HTML-element med JavaScript?
Ved at bruge document.createElement(“tagname”) og derefter tilføje det til DOM’en med metoder som append(), prepend(), before() eller after().
Hvad er forskellen mellem append() og prepend()?
append() tilføjer et element som det sidste barn i en forælder, mens prepend() indsætter det som det første barn.
Hvordan kan JavaScript ændre CSS-styling på et element?
Ved at bruge element.style.propertyName = “value”, f.eks. element.style.color = “red”
Hvad er event bubbling?
Når en begivenhed (event) starter på det målrettede element og derefter bobler op til dets forældre i DOM’en.
Hvad er event capturing?
Det er det modsatte af event bubbling, hvor en event fanges fra forældreelementet først og derefter bevæger sig nedad i DOM’en.
Hvordan vælger man et HTML-element med JavaScript?
Brug document.getElementById(), document.querySelector() eller document.querySelectorAll()
Hvad gør document.querySelector(“.klasse”)?
Den finder og returnerer det første HTML-element, der matcher en CSS-selektor. I parentesen skal der være en streng (“”) med en CSS-selektor, f.eks.:
Klasse: “.classnavn”
Id: “#idnavn”
Tag: “p”
Hvad gør document.getElementById(“minKnap”)?
finder og returnerer et HTML-element med det specifikke id. I parentesen skal der være en streng (“”) med id’et på elementet, f.eks. “minKnap”.
Hvad gør document.addEventListener(event, funktion)?
Den lytter efter en handling på hele dokumentet og kører en funktion, når den sker. I parentesen skal der være en eventtype (f.eks. “DOMContentLoaded”, “keydown”) og en funktion, der skal udføres, når eventet sker.
Hvad gør element.addEventListener(event, funktion)?
Den lytter efter en handling på et specifikt element og kører en funktion. I parentesen skal der være en eventtype (f.eks. “click”, “mouseover”) og en funktion, der skal udføres, når eventet sker.
Hvad menes der med, at DOM er ligesom et træ?
strukturerer HTML som et hierarkisk træ, hvor HTML-elementer er “grene”, og de kan have “børn” og “forældre”. Hvert element er en “node” i træet.
Bliver javascript kompileret
nej javascript er ikke et kompileret sprog
Hvordan ændrer man skriftstørrelsen på et element?
element.style.fontSize = “20px”;
Hvordan henter man et elements nuværende skriftstørrelse?
getComputedStyle(element).fontSize
debugger
Hvad betyder asynkron programmering?
betyder, at kode kan køre i baggrunden uden at blokere resten af programmet. Det bruges ofte til netværksanmodninger, filhåndtering og tidskrævende opgaver.
Hvad er forskellen på synkron og asynkron kode?
Synkron kode: Kører linje for linje, én ad gangen.
Asynkron kode: Tillader visse dele af koden at vente på eksterne processer, mens resten af programmet fortsætter.
Hvad er et Promise?
et JavaScript-objekt, der håndterer asynkrone operationer. Det kan enten:
Resolved (fulfilled) → Når opgaven lykkes.
Rejected → Når opgaven fejler.
Hvad er en executor function i et Promise?
funktionen, der køres, når Promise oprettes. Den tager resolve og reject som argumenter for at definere, hvad der sker, når operationen lykkes eller fejler.
Hvordan håndterer man et resolved Promise?
.then(result => {…}) bruges til at hente det løste resultat af et Promise.
Hvordan håndterer man et rejected Promise?
.catch(error => {…}) bruges til at håndtere fejl fra et Promise.
Hvad er en Promise consumer?
En consumer er en del af koden, der venter på et Promise-resultat og reagerer, når det bliver resolved eller rejected.
Hvad er en Promise Chain?
En Promise Chain er, når flere .then()-metoder kædes sammen, så næste .then() venter på den forrige at blive løst.
Hvad gør .catch() i et Promise?
Den fanger fejl i Promises og håndterer dem.
Hvad gør .finally() i et Promise?
kører uanset om Promiset blev resolved eller rejected og bruges ofte til oprydning.
Hvad er async og await i JavaScript?
- async gør en funktion asynkron og returnerer altid et Promise.
- await pauser koden, indtil Promiset er resolved.
