JavaScript och HTML

Articles

JavaScript och HTML

Den här artikeln förklarar JavaScript och HTML.

YouTube Video

javascript-html-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

Objektet `window` i JavaScript

window-objektet i JavaScript är det globala objektet i en webbläsarmiljö och tillhandahåller funktioner och information relaterade till webbsidan och webbläsarfönstret. Eftersom window är webbläsarens globala omfattning, blir all JavaScript-kod som körs i webbläsaren en del av window-objektet. window-objektet spelar en viktig roll när JavaScript körs i webbläsarmiljön och tillhandahåller många API:er och egenskaper.

Viktiga funktioner hos `window`-objektet

Egenskaper

 1// Get and display the document's title
 2console.log(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport Height: ${window.innerHeight}`);

window.document: Åtkomst till det aktuella HTML-dokumentet.
window.location: Hanterar den aktuella URL:en och webbläsarnavigeringen.
window.history: Åtkomst till webbläsarens historik och möjliggör framåt- och bakåtnavigering.
window.navigator: Ger information om webbläsaren och enheten.
window.innerWidth / window.innerHeight: Hämtar bredden och höjden på visningsområdet.

Metoder

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

window.alert(): Visar en varningsdialog.
window.confirm(): Visar en dialog som ber om användarens bekräftelse och returnerar ett OK- eller Avbryt-resultat.
window.prompt(): Visar en dialog för att be om användarinmatning och hämtar det angivna värdet.
window.open(): Öppnar ett nytt fönster eller flik.
window.setTimeout() / window.setInterval(): Ställer in en timer för att köra en funktion efter en viss tid eller med regelbundna intervall.

Händelsehantering

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

window.onload: Denna händelse utlöses när sidan har laddats helt.
window.onresize: Denna händelse utlöses när fönstret ändrar storlek.
window.onscroll: Denna händelse utlöses när användaren rullar sidan.

Roll som en global variabel

1var myVar = 10;
2console.log(window.myVar); // 10

window-objektet håller globala variabler och funktioner. Med andra ord blir deklarerade variabler och funktioner automatiskt egenskaper tillhörande window.

DOM-manipulering i JavaScript

JavaScript DOM (Document Object Model)-manipulering används för att dynamiskt interagera med element på webbsidan. DOM representerar strukturen för ett HTML-dokument som ett träd, vilket kan ändras med JavaScript för att modifiera strukturen och styra sidans visning.

Grunderna i DOM

DOM behandlar HTML för en webbsida som objekt, vilket möjliggör åtkomst och ändring av element och attribut. Använd document-objektet för att komma åt HTML-dokumentet.

Hämta DOM-element

JavaScript har flera metoder för att komma åt element i DOM.

document.getElementById(): Hämtar ett element med dess id-attribut.
document.getElementsByClassName(): Hämtar element efter klassnamn. Returnerar en HTMLCollection. HTMLCollection är en levande samling som speglar ändringar i DOM i realtid.
document.getElementsByTagName(): Hämtar element efter taggnamn. Returnerar en HTMLCollection.
document.querySelector(): Använder en CSS-selektor för att hämta det första matchande elementet.
document.querySelectorAll(): Använder en CSS-selektor för att hämta alla matchande element. Returnerar en NodeList. NodeList är en statisk samling som behåller tillståndet vid hämtningstillfället och speglar inte efterföljande förändringar i DOM.

Exempel: `getElementById` och `querySelector`

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

DOM-manipulering

Olika operationer kan utföras på de erhållna elementen.

Ändra text

För att ändra texten på ett element, använd textContent eller innerHTML.

textContent: Hämta eller ändra textinnehållet för ett element. HTML-taggar tolkas inte.
innerHTML: Hämta eller ändra HTML-innehållet för ett element. Strängar med HTML-taggar behandlas också.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Ändra attribut

Använd setAttribute() och getAttribute() för att ändra elementattribut.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"
3console.log(id);

Ändra CSS

Använd egenskapen style för att ändra CSS-stilar.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Hantera klasser

Använd classList för att lägga till eller ta bort klasser från ett element.

add(): Lägger till en klass.
remove(): Tar bort en klass.
toggle(): Lägger till eller tar bort en klass beroende på om den finns.
contains(): Kontrollera om en klass finns.

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Skapa och ta bort DOM-element

Skapa nya element

Använd document.createElement() för att skapa ett nytt element och lägga till det i DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Ta bort element

Använd metoden remove() för att ta bort ett element.

1newDiv.remove();  // Remove the created element

Lägga till händelser

Som en del av DOM-manipulation kan du lägga till händelsehanterare som svarar på användarinteraktioner. Använd addEventListener() för att hantera händelser som klick och tangentbordsinteraktioner.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

I detta exempel ändras texten i #content-elementet när du klickar på en knapp.

Navigera i DOM-trädet

Du kan navigera i DOM för att komma åt föräldrar och syskonelement.

parentNode: Kommer åt föräldernoden.
childNodes: Kommer åt barnnoderna. Du kan komma åt alla typer av noder, inte bara elementnoder som HTML-taggar, utan även textnoder och kommentarnoder.
firstChild / lastChild: Kommer åt det första och sista barnaelementet.
nextSibling / previousSibling: Kommer åt nästa och föregående syskonelement.

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Exempel: Lägga till en ny post i en lista

Här är ett exempel på att lägga till ett nytt objekt i en lista.

 1// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

I den här koden läggs ett nytt <li>-element till i listan när du klickar på knappen "Lägg till objekt".

Sammanfattning

Manipulering av JavaScript-DOM låter dig hämta, ändra, skapa och ta bort element i ett HTML-dokument.
Du kan hämta element med metoder som getElementById() och querySelector().
Använd textContent eller innerHTML för att ändra text och HTML, och setAttribute() för att manipulera attribut.
Använd createElement() för att skapa nya element och remove() för att ta bort dem.
Du kan skapa interaktiva webbsidor som svarar på användarens handlingar genom händelsehantering.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Generatorfunktioner i JavaScript Shadow DOM i JavaScript

JavaScript och HTML

YouTube Video

Objektet window i JavaScript

Viktiga funktioner hos window-objektet

Egenskaper

Metoder

Händelsehantering

Roll som en global variabel

DOM-manipulering i JavaScript

Grunderna i DOM

Hämta DOM-element

Exempel: getElementById och querySelector

DOM-manipulering

Ändra text

Ändra attribut

Ändra CSS

Hantera klasser

Skapa och ta bort DOM-element

Skapa nya element

Ta bort element

Lägga till händelser

Navigera i DOM-trädet

Exempel: Lägga till en ny post i en lista

Sammanfattning

YouTube Video

Objektet `window` i JavaScript

Viktiga funktioner hos `window`-objektet

Exempel: `getElementById` och `querySelector`