Articles
Einführung in JavaScript
JavaScript und HTML

JavaScript und HTML

Dieser Artikel erklärt JavaScript und HTML.

YouTube Video

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(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, 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: Ein Ereignis, das ausgeführt wird, wenn die Seite vollständig geladen ist.
  • window.onresize: Ein Ereignis, das ausgeführt wird, wenn sich die Fenstergröße ändert.
  • window.onscroll: Ein Ereignis, das ausgelöst wird, wenn der Benutzer die 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.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Abrufen von DOM-Elementen

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

  • document.getElementById(): Ein Element über das id-Attribut abrufen
  • document.getElementsByClassName(): Elemente über den Klassennamen abrufen (HTMLCollection)
  • document.getElementsByTagName(): Elemente über den Tag-Namen abrufen (HTMLCollection)
  • document.querySelector(): Das erste übereinstimmende Element mit einem CSS-Selektor abrufen
  • document.querySelectorAll(): Alle übereinstimmenden Elemente mit einem CSS-Selektor abrufen (NodeList)

Beispiel: getElementById und querySelector 

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"

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(): Eine Klasse hinzufügen
  • remove(): Eine Klasse entfernen
  • toggle(): Eine Klasse je nach Vorhandensein hinzufügen oder entfernen
  • contains(): Überprüfen, 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: Auf das übergeordnete Element zugreifen
  • childNodes: Auf Kindknoten (aller Typen) zugreifen
  • firstChild / lastChild: Erstes/letztes Kindelement
  • nextSibling / previousSibling: Nächstes/vorheriges Geschwisterelement
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<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

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