JavaScript-Einführung


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Diese Seite enthält einige Beispiele dafür, was JavaScript leisten kann.

JavaScript kann HTML-Inhalte ändern

Eine von vielen JavaScript-HTML-Methoden ist getElementById().

Das folgende Beispiel „findet“ ein HTML-Element (mit id="demo"), und ändert den Elementinhalt (innerHTML) in „Hallo JavaScript“:

Beispiel

document.getElementById("demo").innerHTML = "Hello JavaScript";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

JavaScript akzeptiert sowohl doppelte als auch einfache Anführungszeichen:

Beispiel

document.getElementById('demo').innerHTML = 'Hello JavaScript';

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>

</body>
</html>

JavaScript kann HTML-Attributwerte ändern

In diesem Beispiel ändert JavaScript den Wert des Attributs src (Quelle) eines <img>-Tags:

Die Glühbirne

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="pic_bulboff.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>

</body>
</html>


JavaScript kann HTML-Stile (CSS) ändern

Das Ändern des Stils eines HTML-Elements ist eine Variante der Änderung eines HTML-Elements Attribut:

Beispiel

document.getElementById("demo").style.fontSize = "35px";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html> 

JavaScript kann HTML-Elemente ausblenden

Das Ausblenden von HTML-Elementen kann durch Ändern des Anzeigestils erfolgen:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>
</html> 

JavaScript kann HTML-Elemente anzeigen

Das Anzeigen versteckter HTML-Elemente kann auch durch Ändern des Anzeige-Stils erfolgen:

Beispiel

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>
</html> 

Wussten Sie?

JavaScript und Java sind vom Konzept her völlig unterschiedliche Sprachen und Design.

JavaScript wurde 1995 von Brendan Eich erfunden und wurde zum ECMA-Standard in 1997.

ECMA-262 ist der offizielle Name des Standards. ECMAScript ist der offizielle Name der Sprache.