Häufige Beispiele in JavaScript

Diese Seite enthält einige Beispiele, was JavaScript tun kann.

Hinweis:Falls diese Beispiele Methoden verwenden, die Sie noch nicht gelernt haben:BitteMachen Sie sich keine Sorgen. Sie werden sie im nächsten Kapitel kennenlernen.

JavaScript kann den Inhalt von HTML ändern

Die Methode getElementById() gibt das Element zurück, dessen ID mit dem angegebenen Wert übereinstimmt.

In diesem Beispiel wird mit diesem Verfahren nach einem HTML-Element gesucht (id="para"), und der Inhalt des Elements (innerHTML) wird in "Hello world" geändert:

document.getElementById("para").innerHTML = "Hello world";

JavaScript kann den Wert der HTML-Attribute ändern

In diesem Beispiel hat JavaScript geändert<img>des TagssrcWert der Eigenschaft:

JavaScript kann HTML-Stile (CSS) ändern

JavaScript styleEigenschaften können zum Setzen der Inline-Stile von Elementen verwendet werden.

document.getElementById("demo").style.color = "blue";

JavaScript kann HTML-Elemente verbergen

Die Versteckung von HTML-Elementen kann auch durch Ändern des Display-Stils erreicht werden.

document.getElementById("demo").style.display = "none";

JavaScript kann HTML-Elemente anzeigen

Die Anzeige versteckter HTML-Elemente kann auch durch Ändern des Display-Stils erreicht werden.

document.getElementById("demo").style.display = "block";

JavaScript kann Benachrichtigungs-Dialogfenster erstellen

In diesem Beispiel erstellt JavaScript ein Alert-Dialogfeld.

alert("Hello world!");

JavaScript kann Ereignisbehandler auf das Dokument anhängen

In diesem Beispiel überwacht JavaScript den Mausklick und reagiert darauf.

document.addEventListener("click", myFunc);
function myFunc() {
　　　document.body.style.backgroundColor = "coral";
}

JavaScript kann die Zeit anzeigen

In diesem Beispiel zeigt JavaScript die aktuelle Zeit an.

var intervalID = setInterval(startTimer,　1000);
function startTimer() {
　　　　var date = new Date();
　　　　var x = document.getElementById("result");
　　　　x.innerHTML = date.getHours();　+　":"　+　date.getMinutes();　+　":"　+　date.getSeconds();
}