狠狠撸

JavaScript och DOM
Det h盲r har vi gjort f枚rut
Johan Holmberg 2019-04-07

Dagens f枚rel盲sning
鈥� F枚rra veckans bravader
鈥� DOM
鈥� H盲ndelser i JavaScript

F枚rra veckan
鈥� Vi tittade p氓 vad JavaScript 盲r och dess bakgrund
鈥� Vi tittade p氓 syntaxen i JavaScript
鈥� Vi l盲rde oss att arbeta med variabler, operationer och
fl枚deskontroll (if, switch, loopar)
鈥� Vi tittade p氓 funktioner

Spr氓ket Javascript
鈥� Ursprungligen avsett f枚r att g枚ra webbsidor roligare
鈥� Bra st枚d f枚r att manipulera DOM
鈥� Bra st枚d i de flesta webbl盲sare
鈥� K枚rs numera lite 枚ver allt
鈥� Har numera ett bra st枚d av tredjepartsbibliotek

Spr氓ket Javascript
鈥� Syntaxen liknar C, Java, etc
鈥� L枚st typat 鈥� inga explicita variabeltyper
鈥� Multiparadigm:
鈥� H盲ndelsedrivet
鈥� Funktionellt
鈥� Prototypbaserat (ungef盲r som objektorienterat)
鈥� Imperativt

VanillaJS 鈥� JavaScript utan ramverk

Vad 盲r DOM?
HTML DOM (Document Object Model):
鈥� En representation av HTML-dokumentet som ett tr盲d
av element 鈥� noder.
鈥� HTML-objektet kan ses som ett stort objekt

Vad 盲r DOM?
<!DOCTYPE html>
<html>
<head>
<title>The Batcave</title>
</head>
<body>
<p>
Hello <span>there</span> Batman!
<img src=/slideshow/javascript-och-dom/140006121/"batman_logo.png">
</p>
</body>
</html>
html
head body
title p
span img
The
Batcave
Hello Batman!
there

Kom 氓t element/noder
Det finns fyra s盲tt att komma 氓t element i DOM-tr盲det:
鈥� document.getElementById(id) 鈫� ett element
鈥� document.getElementByTagName(tagName) 鈫� en
samling av element
鈥� document.getElementByClassName(className) 鈫� en
samling av element
鈥� document.querySelector(query) 鈫� ett element

Hitta alla element av en specifik typ
var elements = document.getElementByTagName("p");
Hittar alla p-element och returnerar ett objekt av typen
HTMLCollection, som liknar ett array-objekt:
var el = elements[0]; // F枚rsta elementet i samlingen
var size = elements.length; // Antal element

ID kontra klass i HTML
鈼�
Enskilda HTML-element (kan) identifieras med ett ID:
鈥� Ett ID best氓r av en str盲ng
鈥� ID:n 盲r unika och kan bara finnas en g氓ng per dokument
鈥� Refereras till som #mitt_id
鈼�
Ett element kan tillh枚ra en klass:
鈥� Ett klassnamn best氓r av en str盲ng
鈥� Flera element kan tillh枚ra samma klass.
鈥� Refereras till som .min_klass

Exempel p氓 anv盲ndande av ID
<!DOCTYPE html>
<html>
<head>
<title>Sample Site</title>
</head>
<body>
<p>
Hello <span id="location">there</span> Batman!
</p>
<button onclick="relocate()">Change text</button>
<script>
function relocate() {
document.getElementById("location").innerHTML = "here";
}
</script>
</body>
</html>
V氓rt ID
V氓rt ID

Exempel p氓 anv盲ndande av klass
<!DOCTYPE html>
<html>
<head>
<style>
li.real_deal {
color: red;
}
</style>
</head>
<body>
<h1>Batman's gadgets</h1>
<ul>
<li class="real_deal">Batarang</li>
<li class="real_deal">Batmobile</li>
<li class="bad_pun">Batteries</li>
</ul>
</body>
</html>
Den h盲r regeln
matchar de h盲r elementen

Exempel p氓 anv盲ndande av b氓da
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul id="gadget_list">
<li class="real_deal">Batarang</li>
<li class="real_deal">Batmobile</li>
<li class="bad_pun">Batteries</li>
</ul>
</body>
</html>

Query Selector
var element = document.querySelector(".someClass");
Returnerar den f枚rsta noden av klassen someClass.
Kan anv盲ndas med:
鈥� Taggnamn: document.querySelector("tag");
鈥� Klassnamn: document.querySelector(".someClass");
鈥� ID: document.querySelector("#someID");

Navigera i DOM
<!DOCTYPE html>
<html>
<head>
<title>The Batcave</title>
</head>
<body>
<p>
</p>
</body>
</html>
html
head body
title p
span img
The
Batcave
Hello Batman!
there

Navigera i DOM 鈥� f枚r盲ldrar och barn
html
head body
title p
span img
The
Batcave
Hello Batman!
there
parentNode
firstChild lastChild
body.parentNode 鈫� html
html.firstChild 鈫� head
html.lastChild 鈫� body
html.childNodes[1] 鈫� body

Navigera i DOM 鈥� syskon
html
head body
title p
span img
The
Batcave
Hello Batman!
there
nextSibling
previousSibling
head.nextSibling 鈫� body
body.previousSibling 鈫� head

Modifiera en nod
Vi beh枚ver k盲nna till tv氓 typer av egenskaper hos en nod:
鈥� InnerHTML
鈼�
Den text som 鈥渋nnesluts鈥� av ett HTML-element
鈼�
Kan vara HTML-kod
鈥� Attribut
鈼�
F枚r盲ndrar ett elements beteende. Exempel:
鈥� src
鈥� style

Vad 盲r vad?
...
<p>
</p>
...
p
span imgHello Batman!
there
src
span.innerHTML
Attribut: img.src

Arbeta med innerHTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome to the Batcave!</h1>
<p>
Alfred is <span id="status">out</span>.
</p>
<script>
var status = document.getElementById("status");
status.innerHTML = "in";
</script>
</body>
</html>

Arbeta med attribut
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome to Arkham Asylum!</h1>
<h2>Inmate of the month:</h2>
<img id="inmate" src=/slideshow/javascript-och-dom/140006121/"penguin.jpg">
<script>
var imnate = document.getElementById("inmate");
inmate.setAttribute("src", "joker.jpg");
</script>
</body>
</html>

Special: attribut-noder och CSS
鈥� Attributet style (inline CSS) 盲r en attribut-nod och hanteras
s氓 h盲r:
...
<body>
<h1>Welcome to Wayne Mansion!</h1>
<p>
Alfred is <span id="status" style="color: red">out</span>.
</p>
<script>
var status = document.getElementById("status");
status.innerHTML = "in";
status.style.color = "green";
</script>
</body>
...

L盲gg till nya element till tr盲det
Vi skapar nya element genom att anv盲nda oss av
document.createElement("tag_name")
Nya element beh枚ver ofta text. Det skapas s氓 h盲r:
document.createTextNode("My text")
Dessa sammanfogas sedan:
var p = document.createElement("p");
var textNode = document.createTextNode("Batman");
p.appendChild(textNode);

L盲gg in nya element till tr盲det
Vi har tv氓 s盲tt att l盲gga till nya element till tr盲det
鈥� element.appendChild(node)
l盲gg node sist bland barnen till element
鈥� element.insertBefore(node, child)
l盲gg till f枚re elementet child

Exempel p氓 appendChild()
<!DOCTYPE html>
<html>
...
<body>
<li id="batarang" class="real_deal">Batarang</li>
<li id="batmobile" class="real_deal">Batmobile</li>
<li id="batteries" class="bad_pun">Batteries</li>
</ul>
<script>
var batcave = document.createElement("li");
var label = document.createTextNode("Bat cave");
batcave.appendChild(label);
var parent = document.getElementById("gadget_list");
parent.appendChild(batcave);
</script>
</body>
</html>

Exempel p氓 insertBefore()
<!DOCTYPE html>
<html>
鈥�
<body>
</ul>
<script>
var batteries = document.getElementById("batteries");
parent.insertBefore(batcave, batteries);
</script>
</body>
</html>

Exempel p氓 insertBefore()
<!DOCTYPE html>
<html>
鈥�
<body>
</ul>
<script>
batteries.parentNode.insertBefore(batcave, batteries);
</script>
</body>
</html>

Ta bort element fr氓n tr盲det
Vi har tv氓 s盲tt att ta bort element fr氓n DOM-tr盲det:
鈥� parent.removeChild(child)
tar bort ett element
鈥� parent.replaceChild(element1, element2)
ers盲tter ett element

Ta bort ett element
<!DOCTYPE html>
<html>
...
<body>
</ul>
<script>
var child = document.getElementById("batmobile");
parent.removeChild(child);
</script>
</body>
</html>

Ta bort ett element
<!DOCTYPE html>
<html>
...
<body>
</ul>
<script>
var child = document.getElementById("batmobile");
child.parentNode.removeChild(child);
</script>
</body>
</html>

Ers盲tt ett element
<!DOCTYPE html>
<html>
鈥�
<body>
</ul>
<script>
parent.replaceChild(batcave, batteries);
</script>
</body>
</html>

Ers盲tt ett element
<!DOCTYPE html>
<html>
鈥�
<body>
</ul>
<script>
batteries.parentNode.replaceChild(batcave, batteries);
</script>
</body>
</html>

Vad 盲r h盲ndelser?
En h盲ndelse 盲r ett meddelande som skickas till JavaScript-
motorn, och som sedan p氓verkar k枚rningen av programmet.
Exempel:
鈥� Anv盲ndaren klickar p氓 en knapp
鈥� Ett AJAX-anrop (dvs HTTP) slutf枚rs
鈥� En timeout tar slut
鈥� Ett formul盲r skickas
Vi kan lyssna efter dessa h盲ndelser och reagera p氓 dem!

Vanliga h盲ndelser i JavaScript/DOM
鈥� Blur 鈥� n盲r ett objekt f枚rlorar fokus
鈥� Click 鈥� n盲r anv盲ndaren klickar p氓 ett objekt
鈥� Focus 鈥� n盲r ett objekt f氓r fokus
鈥� Load 鈥� n盲r objektet 盲r f盲rdigladdat
鈥� Mouseover 鈥� n盲r muspekaren sv盲var 枚ver objektet
鈥� Select 鈥� n盲r ett val i en drop down-meny v盲ljs
鈥� Submit 鈥� n盲r ett formul盲r skickas

Reagera p氓 h盲ndelser
K枚rning av JavaScript i webbl盲saren 盲r asynkron. JS-
motorn har en lista av kod som den kan k枚ra.
Motorn k枚r kod s氓 l盲nge den kan, en funktion i taget, och
delegerar allt h氓rt arbete till webbl盲saren.
N盲r webbl盲saren 盲r f盲rdig med ett uppdrag (eller f氓r en
input fr氓n anv盲ndaren) l盲ggs ett uppdrag i JavaScript-
motorns att g枚ra-lista.

Metoden .addEventListener()
element.addEventListener(event, function, useCapture);
鈥� Parametern event 盲r en str盲ng som anger vilken h盲ndelse vi vill
lyssna efter.
鈥� Parametern function 盲r en funktionspekare och ber盲ttar vilken
funktion som ska k枚ras n盲r h盲ndelsen intr盲ffar. Den kan vara
anonym.
鈥� Parametern useCapture ber盲ttar om vi vill anv盲nda event bubbling
eller event capturing. 脰verkurs, och helt frivilligt att anv盲nda.
鈥� Ett element kan ha flera event listeners, 盲ven per h盲ndelse!

Exempel med addEventListener()
<!DOCTYPE html>
<html>
...
<body>
<h1>Welcome to the Wayne Mansion intercom system!</h1>
<span id="caller">Click to summon Alfred</span>
<script>
var caller = document.getElementById("caller");
caller.addEventListener("click", callAlfred);
function callAlfred() {
alert("You called, Master Wayne");
}
</script>
</body>
</html>

狠狠撸

JavaScript och DOM

Recommended

More Related Content

Similar to JavaScript och DOM (20)

More from Johan Holmberg (10)

JavaScript och DOM