JavaScript und HTML

Articles

JavaScript und HTML

Dieser Artikel erklärt JavaScript und 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>

Das `window`-Objekt in JavaScript

Das window-Objekt in JavaScript ist das globale Objekt in einer Browser-Umgebung, das Funktionen und Informationen zur Webseite und zum Browserfenster bietet. Da window der globale Gültigkeitsbereich des Browsers ist, wird jeder JavaScript-Code, der im Browser ausgeführt wird, Teil des window-Objekts. Das window-Objekt spielt eine wichtige Rolle bei der Ausführung von JavaScript in der Browser-Umgebung und bietet viele APIs und Eigenschaften.

Schlüsselfunktionen des `window`-Objekts

Eigenschaften

 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: Greift auf das aktuelle HTML-Dokument zu.
window.location: Verwaltet die aktuelle URL und die Browsenavigation.
window.history: Greift auf die Verlaufinformationen des Browsers zu und ermöglicht die Navigation vorwärts und rückwärts.
window.navigator: Bietet Informationen über den Browser und das Gerät.
window.innerWidth / window.innerHeight: Ruft die Breite und Höhe des Viewports ab.

Methoden

 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(): Zeigt ein Warnungsdialogfenster an.
window.confirm(): Zeigt ein Dialogfenster zur Bestätigung an und gibt ein OK- oder Abbrechen-Ergebnis zurück.
window.prompt(): Zeigt ein Eingabedialogfenster an und ruft den eingegebenen Wert ab.
window.open(): Öffnet ein neues Fenster oder einen neuen Tab.
window.setTimeout() / window.setInterval(): Setzt einen Timer, um eine Funktion nach einer bestimmten Zeit oder in regelmäßigen Abständen auszuführen.

Ereignisverwaltung

 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: Dieses Ereignis wird ausgelöst, wenn die Seite vollständig geladen ist.
window.onresize: Dieses Ereignis wird ausgelöst, wenn das Fenster in der Größe verändert wird.
window.onscroll: Dieses Ereignis wird ausgelöst, wenn der Benutzer auf der Seite scrollt.

Rolle als globale Variable

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

Das window-Objekt enthält globale Variablen und Funktionen. Mit anderen Worten: Deklarierte Variablen und Funktionen werden automatisch Eigenschaften von window.

DOM-Manipulation in JavaScript

Die JavaScript-DOM-Manipulation (Document Object Model) wird verwendet, um dynamisch mit Elementen auf der Webseite zu interagieren. Das DOM stellt die Struktur eines HTML-Dokuments als Baum dar, der mit JavaScript geändert werden kann, um die Struktur zu bearbeiten und die Anzeige der Seite zu steuern.

Grundlagen des DOM

Das DOM behandelt das HTML einer Webseite als Objekte, wodurch der Zugriff auf Elemente und Attribute sowie deren Änderung möglich wird. Verwenden Sie das document-Objekt, um auf das HTML-Dokument zuzugreifen.

Abrufen von DOM-Elementen

JavaScript bietet verschiedene Methoden, um auf Elemente im DOM zuzugreifen.

document.getElementById(): Ruft ein Element anhand seines id-Attributs ab.
document.getElementsByClassName(): Ruft Elemente anhand ihres Klassennamens ab. Gibt eine HTMLCollection zurück. HTMLCollection ist eine Live-Sammlung, die Änderungen im DOM in Echtzeit widerspiegelt.
document.getElementsByTagName(): Ruft Elemente anhand ihres Tag-Namens ab. Gibt eine HTMLCollection zurück.
document.querySelector(): Verwendet einen CSS-Selektor, um das erste passende Element abzurufen.
document.querySelectorAll(): Verwendet einen CSS-Selektor, um alle passenden Elemente abzurufen. Gibt eine NodeList zurück. NodeList ist eine statische Sammlung, die den Stand zum Zeitpunkt der Abfrage enthält und nachfolgende Änderungen am DOM nicht widerspiegelt.

Beispiel: `getElementById` und `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-Manipulation

Auf abgerufene Elemente können verschiedene Operationen angewendet werden.

Text ändern

Um den Text eines Elements zu ändern, verwenden Sie textContent oder innerHTML.

textContent: Den Textinhalt eines Elements abrufen oder ändern. HTML-Tags werden nicht interpretiert.
innerHTML: Den HTML-Inhalt eines Elements abrufen oder ändern. Zeichenfolgen mit HTML-Tags werden ebenfalls verarbeitet.

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

Attribute ändern

Verwenden Sie setAttribute() und getAttribute(), um Elementattribute zu ändern.

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

CSS ändern

Verwenden Sie die style-Eigenschaft, um CSS-Stile zu ändern.

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

Klassen manipulieren

Verwenden Sie classList, um Klassen zu einem Element hinzuzufügen oder zu entfernen.

add(): Fügt eine Klasse hinzu.
remove(): Entfernt eine Klasse.
toggle(): Fügt eine Klasse hinzu oder entfernt sie, je nachdem, ob sie bereits existiert.
contains(): Überprüft, ob eine Klasse existiert.

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

DOM-Elemente erstellen und löschen

Neue Elemente erstellen

Verwenden Sie document.createElement(), um ein neues Element zu erstellen und zum DOM hinzuzufügen.

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

Elemente löschen

Verwenden Sie die Methode remove(), um ein Element zu löschen.

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

Ereignisse hinzufügen

Im Rahmen der DOM-Manipulation können Sie Ereignis-Handler hinzufügen, die auf Benutzerinteraktionen reagieren. Verwenden Sie addEventListener(), um Ereignisse wie Klicks und Tastaturinteraktionen zu behandeln.

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

In diesem Beispiel ändert das Klicken auf eine Schaltfläche den Text des #content-Elements.

Im DOM-Baum navigieren

Sie können im DOM navigieren, um auf übergeordnete und benachbarte Elemente zuzugreifen.

parentNode: Greift auf das übergeordnete Knoten zu.
childNodes: Greift auf die untergeordneten Knoten zu. Sie können auf alle Arten von Knoten zugreifen, nicht nur auf Elementknoten wie HTML-Tags, sondern auch auf Text- und Kommentarknoten.
firstChild / lastChild: Greift auf das erste und letzte untergeordnete Element zu.
nextSibling / previousSibling: Greift auf das nächste und vorherige Geschwisterelement zu.

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

Beispiel: Ein neues Element zu einer Liste hinzufügen

Hier ist ein Beispiel dafür, wie ein neues Element zu einer Liste hinzugefügt wird.

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

In diesem Code fügt das Klicken auf die Schaltfläche "Element hinzufügen" ein neues <li>-Element zur Liste hinzu.

Zusammenfassung

Die Manipulation des JavaScript DOM ermöglicht es Ihnen, Elemente in einem HTML-Dokument abzurufen, zu ändern, zu erstellen und zu löschen.
Sie können Elemente mithilfe von Methoden wie getElementById() und querySelector() abrufen.
Verwenden Sie textContent oder innerHTML, um Text und HTML zu ändern, und setAttribute(), um Attribute zu manipulieren.
Verwenden Sie createElement(), um neue Elemente zu erstellen, und remove(), um sie zu löschen.
Sie können interaktive Webseiten erstellen, die durch Ereignisbehandlung auf Benutzeraktionen reagieren.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Generator-Funktionen in JavaScript Shadow DOM in JavaScript

JavaScript und HTML

YouTube Video

Das window-Objekt in JavaScript

Schlüsselfunktionen des window-Objekts

Eigenschaften

Methoden

Ereignisverwaltung

Rolle als globale Variable

DOM-Manipulation in JavaScript

Grundlagen des DOM

Abrufen von DOM-Elementen

Beispiel: getElementById und querySelector

DOM-Manipulation

Text ändern

Attribute ändern

CSS ändern

Klassen manipulieren

DOM-Elemente erstellen und löschen

Neue Elemente erstellen

Elemente löschen

Ereignisse hinzufügen

Im DOM-Baum navigieren

Beispiel: Ein neues Element zu einer Liste hinzufügen

Zusammenfassung

YouTube Video

Das `window`-Objekt in JavaScript

Schlüsselfunktionen des `window`-Objekts

Beispiel: `getElementById` und `querySelector`