Javascript

Introduktion

JavaScript är ett programmeringsspråk som används för att göra webbsidor interaktiva. Det körs i webbläsaren och låter dig manipulera HTML och CSS, hantera användarhändelser som klick och scroll, och även kommunicera med servrar.

Grundläggande Syntax

Variabler: var x = 10;
Funktioner: function sayHello() { alert('Hej!'); }
Villkor: if (x > 5) { /* gör något */ }
Loopar: for (var i = 0; i < 10; i++) { /* gör något */ }

DOM (Document Object Model)

DOM är en programmeringsgränssnitt för HTML och XML-dokument. Det representerar sidans struktur som ett träd av objekt, där varje objekt är en del av sidan (t.ex. ett element eller attribut).

Grundläggande Operationer

Välja element: document.getElementById('myId')
Ändra text: element.innerText = 'Ny text';
Lägga till element: parentElement.appendChild(newElement);
Ta bort element: parentElement.removeChild(element);

Exempel

För att ändra texten i ett element med id "myId":

var element = document.getElementById('myId');
element.innerText = 'Hej, detta är ny text!';

Lägga till Element

För att lägga till ett nytt element, skapar du först elementet och sedan lägger du till det i DOM-trädet.

// Skapa ett nytt <p>-element
var nyttParagraf = document.createElement('p');

// Lägg till text till det nya elementet
nyttParagraf.innerText = 'Detta är en ny paragraf.';

// Välj en förälder där det nya elementet ska läggas till
var foralder = document.getElementById('container');

// Lägg till det nya elementet som ett barn till föräldern
foralder.appendChild(nyttParagraf);

I det här exemplet antar vi att det finns ett element med id "container" där det nya <p>-elementet ska läggas till.

Ta Bort Element

För att ta bort ett element, behöver du först välja det och sedan ta bort det från dess förälder.

// Välj elementet som ska tas bort
var elementAttTaBort = document.getElementById('gammaltElement');

// Välj elementets förälder
var foralder = elementAttTaBort.parentElement;

// Ta bort elementet
foralder.removeChild(elementAttTaBort);

I det här exemplet antar vi att det finns ett element med id "gammaltElement" som ska tas bort.

Den här sidan designades av 21C: