Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell.
Fördjupning i märkspråk där det huvudsakliga innehållet är standarderna för HTML och CSS med särskilt fokus på responsiv design.
Ramverk eller klassbibliotek inom design eller skriptspråk.
Riktlinjer för god praxis inom webbutveckling.
Uppnående av interoperabilitet genom att följa standarder och testa på olika plattformar.
Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
Terminologi inom området webbutveckling.
Fakta
1. DOM
DOM (Document Object Model)
definierar hur ett HTML-dokument är uppbyggt och hur man kommer åt att ändra värden med JavaScript. DOM definierar:
Alla HTML-element
Alla attribut för HTML-elementen
Metoder för att komma åt alla HTML-element
Händelser (event) för alla HTML-element
DOM är en standard för hur man hämtar, ändrar, lägger till och raderar HTML-element.
Med DOM och JavaScript kan vi skapa dynamiska webbsidor.
JavaScript kan:
ändra alla HTML-element
ändra alla atribut
ändra alla CSS-regler
ta bort HTML-element och attribut
lägga till nya HTML-element och attribut
reagera på HTML-händelser (event)
skapa nya HTML-händelser (event)
2. Metoden getElementById
Det vanligaste sättet att hitta och hämta ett HTML-element är att använda elementets id och metoden getElementById.
Det enklaste sättet att komma åt innehållet i ett HTML-element är att använda egenskapen innerHTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 1</title>
</head>
<body>
<h1>document.getElementById</h1>
<p id="demo">1</p>
<p id="test">2</p>
<script>
//Hämta elementet med id:t demo och tilldela den texten "Hej, Världen!"
document.getElementById("demo").innerHTML = "Hej, Världen!";
</script>
</body>
</html>
<!--
******************************************************************************
ÖVNING: Ändra i koden så att texten "Hej, Världen!" skrivs istället för texten
"2" i p-elementet.
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 2</title>
</head>
<body>
<h1>document.getElementById</h1>
<p id="demo">1</p>
<p id="test">2</p>
<script>
//Använd getElementById och hämta elementet med id:t test och tilldela den texten "Hej, Världen!"
</script>
</body>
</html>
<!--
******************************************************************************
ÖVNING: Använd getElementById för att ändra texten i p-elementet med id = test
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 3</title>
</head>
<body>
<!-- En knapp med ett event, onclick -->
<!-- När knappen klickas utförs JavaScript-kod -->
<button onclick="document.getElementById('demo').innerHTML=Date()">
Vad är klockan?
</button>
<p id="demo"></p>
</body>
</html>
<!--
******************************************************************************
JavaScript-koden körs när knappen klickas
ÖVNING: Ändra texten på knappen till "Klicka här!"
ÖVNING: Skriv texten "JavaScript rockar" när knappen klickas
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 4</title>
</head>
<body>
<h1>Vad kan JavaScript göra?</h1>
<!-- p-taggen med id=demo -->
<p id="demo">JavaScript kan ändra innehållet i HTML-taggar</p>
<!-- knapp med händelsen onclick, som innehåller JavaScript -->
<!-- JavaScriptet körs när knappen trycks -->
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hej JavaScript!"'>
Klicka här!
</button>
</body>
</html>
<!--
******************************************************************************
ÖVNING: Ändra så att när knappen klickas ska texten "JavaScript äger!" skrivs ut.
ÖVNING: Ändra id-attributet på p-taggen från demo till test:
<p id="test">JavaScript....</p>.
Vad behöver du ändra mer för att koden ska fungera när du klickar på knappen?
******************************************************************************
-->
3. Hitta ett HTML-element
Om du t.ex. ska ändra ett HTML-element med JavaScript måste man först hitta och hämta elementet.
Det finns några olika sätt att göra det:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById</title>
</head>
<body>
<h2>JavaScript HTML DOM</h2>
<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>
<p id="demo"></p>
<script>
var element = document.getElementById("intro");
document.getElementById("demo").innerHTML = "The text from the intro paragraph is: " + element.innerHTML;
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByTagName</title>
</head>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
<p id="demo"></p>
<script>
var elements = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'The text in first paragraph (index 0) is: ' + elements[0].innerHTML;
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByClassName</title>
</head>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">
This example demonstrates the <b>getElementsByClassName</b> method.
</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>querySelectorAll</title>
</head>
<body>
<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">
This example demonstrates the <b>querySelectorAll</b> method.
</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>
</body>
</html>
Övningar
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 1</title>
</head>
<body>
<p id="demo">Use the DOM to change my text!</p>
<script>
// Use the getElementById method to find the <p> element, and change its text to "Good Job!"
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 2</title>
</head>
<body>
<p>Use the DOM to change my text!</p>
<script>
// Use the getElementsByTagName method to find the <p> element, and change its text to "Good Job!".
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 3</title>
</head>
<body>
<p class="test">Use the DOM to change my text!</p>
<script>
// Use the getElementsByClassName method to find the <p> element, and change its text to "Good Job!".
</script>
</body>
</html>
3.1 Hitta HTML-element, special sedan tidigare version av HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
<p>Click the button to display the title of the document.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x = document.title;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
</head>
<body>
<p id="demo">
JavaScript används för att ändra utseendet på en webbsida.
</p>
<button value="Hide text" onclick="document.getElementById('demo').style.visibility='hidden'">
Hide text
</button>
<button value="Show text" onclick="document.getElementById('demo').style.visibility='visible'">
Show text
</button>
</body>
</html>
Övningar
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 1</title>
</head>
<body>
<img id="image" src="https://www.w3schools.com/js/smiley.gif" width="100" height="100">
<script>
// Use HTML DOM to change the value of the image's src attribute to "https://www.w3schools.com/js/pic_mountain.jpg"
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 2</title>
</head>
<body>
<input type="text" id="myText" value="Hello">
<script>
// Use HTML DOM to change the value of the input's value attribute to "Goodbye"
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 3</title>
</head>
<body>
<p id="demo">Hello World!</p>
<script>
// Use the HTML DOM to set the text color of <p> to "red"
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 4</title>
</head>
<body>
<p id="demo">Hello World!</p>
<script>
// Use the HTML DOM to add a yellow background color to <p>
document.getElementById("demo").style.background = "yellow";
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 5</title>
</head>
<body>
<p id="demo">Hello World!</p>
<script>
// Use the HTML DOM to center-align the text of <p>
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 6</title>
</head>
<body>
<p id="demo">Hello World!</p>
<script>
// Use the HTML DOM to change the text size of <p> to 40 pixels
</script>
</body>
</html>
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 7</title>
</head>
<body>
<p id="demo">Hello World!</p>
<script>
// Use the HTML DOM to hide the <p> element
</script>
</body>
</html>
Begrepp
DOM: Document Object Model, definierar hur ett HTML-dokument är uppbyggt och hur man kommer åt att ändra värden med JavaScript.
Element: Start och sluttagg och innehållet mellan dem.
Tagg: Ett märkord/instruktion till hur webbläsaren ska visa något.
Attribut: Extra information i en tagg.
id: Ett attribut alla HTML-element kan ha, men flera element kan inte ha samma värde.
class: Ett attribut alla HTML-element kan ha, flera element kan ha samma värde.
Selektor: Taggnamn, class eller id som identifierar element.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 1</title>
</head>
<body>
<h1>Vad kan JavaScript göra?</h1>
<p id="demo">JavaScript kan gömma HTML-element.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
Klicka här!
</button>
</body>
</html>
<!--
******************************************************************************
ÖVNING: Ändra texten på knappen till Göm.
ÖVNING: Ändra id-attributet på p-taggen från demo till test:
<p id="test">JavaScript....</p>.
Vad behöver du ändra mer för att koden ska fungera när du klickar på knappen?
+
ÖVNING: Lägg till en ny knapp (låt den gamla knappen vara kvar) som visar elementet.
Den ska sätta style-värdet för display till block.
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 2</title>
</head>
<body>
<h1>JavaScript körs vid en händelse/event</h1>
<button onclick='window.alert("du klickade på knappen");'>
Klicka
</button>
<!-- JavaScript koden anropar en funktion när knappen klickas -->
<!-- knappen har attributet onclick -->
<button onclick='foo()'>
Anropa en funktion
</button>
<script>
//Visar en dialogruta med texten "Hej, världen!"
window.alert("Hej, världen!");
//En funktion körs bara när den anropas
function foo()
{
window.alert("Text från en funktion");
}
</script>
</body>
</html>
<!--
******************************************************************************
ÖVNING: När visas dialogrutan med texten "Hej, världen?" Varför?
ÖVNING: När visas dialogrutan med texten "du klickade på knappen"? Varför?
ÖVNING: När visas dialogrutan med texten "Text från en funktion"? Varför?
******************************************************************************
-->
X
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 3</title>
</head>
<body>
<p>Eventet onclick anropar en funktion, som skriver ut tiden</p>
<button onclick="displayDate()">
Vad är klockan?
</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
<!--
******************************************************************************
JavaScript-koden för funktionen körs inte förrän den anropas.
Funktionen anropas när användaren klickar på knappen.
ÖVNING: Ändra id-attributet på p-taggen från demo till test: <p id="test"></p>.
Vad behöver du ändra mer för att koden ska fungera?
ÖVNING: Ändra namnet på funktionen till visaDatum.
På vilka ställen behöver du ändra?
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 4</title>
</head>
<body>
<button>
Klicka här!
</button>
<script>
function fooBar(tal)
{
document.getElementById("demo").innerHTML = "Talet är " + tal;
}
</script>
<p id="demo"></p>
</body>
</html>
<!--
******************************************************************************
JavaScript-koden för funktionen foo körs inte förrän den anropas.
Funktionen fooBar anropas när användaren klickar på knappen.
ÖVNING: Skriv eventet till knappen så att funktionen fooBar anropas
när användaren klickar på knappen. Skicka med argumentet 5.
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 5</title>
</head>
<body>
<button>
Klicka här
</button>
<script>
function fuuBar(namn)
{
document.getElementById("demo").innerHTML = "Hej " + namn;
}
</script>
<p id="demo"></p>
</body>
</html>
<!--
******************************************************************************
JavaScript-koden för funktionen foo körs inte förrän den anropas.
Funktionen fuuBar ska anropas när användaren klickar på knappen.
ÖVNING: Skriv eventet till knappen så att funktionen fuuBar anropas
när användaren klickar på knappen. Skicka med argumentet "Nisse".
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 6</title>
</head>
<body>
<button onmouseout="changeColorToWhite()" onmouseover="changeColorToRed()" >
Röd
</button>
<button onmouseout="changeColor('white')" onmouseover="changeColor('green')" >
Grön
</button>
<script>
function changeColorToRed()
{
document.body.style.backgroundColor = "red";
}
function changeColorToWhite()
{
document.body.style.backgroundColor = "white";
}
function changeColor(color)
{
document.body.style.backgroundColor = color;
}
</script>
</body>
</html>
<!--
******************************************************************************
När användaren för musmarkören över knapparna ändras bakgrundsfärgen.
När musmarkören flyttas från knapparna byts bakgrundsfärgen till vit.
ÖVNING: Lägg till en knapp Blå, som ska fungera som de andra knapparna.
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 7</title>
</head>
<body>
<button onclick="foo()">
Klicka här!
</button>
<script>
</script>
<p id="demo"></p>
</body>
</html>
<!--
******************************************************************************
JavaScript-koden för funktionen foo körs inte förrän den anropas.
Funktionen foo ska anropas när användaren klickar på knappen.
ÖVNING: Skriv funktionen foo som skrivet ut texten "Hej Världen!"
till innehållet i HTML-elementet som har id:t demo.
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 8</title>
</head>
<body>
<!-- En textruta med händelsen onclick, som anropar funktionen welcome -->
<input id="förnamn" type="text" placeholder="förnamn" >
<input id="efternamn" type="text" placeholder="efternamn" >
<button onclick="welcome()">OK</button>
<script>
//JavaScript funktion, körs bara när den anropas -->
function welcome()
{
var namn = document.getElementById("förnamn").value;
window.alert("Hej, " + namn);
}
</script>
</body>
</html>
<!--
******************************************************************************
ÖVNING: Skriv JavaScript koden så att även efternamnet syns i dialogrutan
******************************************************************************
-->
X
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Övning 9</title>
</head>
<body>
<h1 id="id1">Ändra bakgrundsfärg</h1>
<button onclick='document.body.style.backgroundColor = "red"'>
Klicka här!
</button>
<script>
//Skriv funktionen changeBackgroundColor här
</script>
</body>
</html>
<!--
******************************************************************************
ÖVNING: Ändra så att färgen på bakgrunden blir blå när knappen klickas
ÖVNING: Skriv funktionen changeBackgroundColor som sätter bakgrundsfärgen till
blå och funktionen ska anropas när knappen klickas
******************************************************************************
-->
DOM
Det här är en uppgift där du ska prova på lite olika saker man kan göra med JavaScript.
Du kommer också prova på att leta efter information om hur man löser de olika uppgifterna.
Se uppgiften
Använd webbläsarens JavaScript-konsol (F12 -console). När saker inte fungerar är det oftast ett fel som
skrivs ut i konsolen. Konsolen hjälper dig att hitta fel!
OBS! Använd inte AI-genererad kod med addEventListener eller anonyma funktioner med () =>
Kontrollera: - Validera HTML - Validera CSS (om du har någon)
- Använd strict mode.
- Inga fel i konsolen när JavaScriptet körs (F12 - console).
- du har indenterat html & css koden
- startsidan heter index.html
- filnamn med små bokstäver, inga mellanslag eller åäö
- Som med all programmering ska koden vara indenterad, ha bra variabelnamn och vara översiktligt kommenterad.
Lämna in: Packa (zippa) ihop projektet och lämna in den packade filen i Unikum
