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!`);
}

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