JavaScript introduktion

Indholdsfortegnelse

Denne side indeholder nogle eksempler på, hvad JavaScript kan.

JavaScript kan ændre HTML-indhold

En af mange JavaScript HTML-metoder er getElementById().

Eksemplet nedenfor "finder" et HTML-element (med id="demo"), og ændrer elementindholdet (innerHTML) til "Hej JavaScript":

Eksempel

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

Prøv det selv →

<!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 accepterer både dobbelte og enkelte anførselstegn:

Eksempel

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

Prøv det selv →

<!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 kan ændre HTML-attributværdier

I dette eksempel ændrer JavaScript værdien af src (kilde) attributten for et <img> tag:

Lyspæren

Prøv det selv →

<!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 kan ændre HTML-stile (CSS)

Ændring af stilen på et HTML-element er en variant af at ændre en HTML attribut:

Eksempel

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

Prøv det selv →

<!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 kan skjule HTML-elementer

Du kan skjule HTML-elementer ved at ændre display-stilen:

Eksempel

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

Prøv det selv →

<!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 kan vise HTML-elementer

Visning af skjulte HTML-elementer kan også gøres ved at ændre display-stilen:

Eksempel

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

Prøv det selv →

<!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>

Vidste du?

JavaScript og Java er helt forskellige sprog, begge i konceptet og design.

JavaScript blev opfundet af Brendan Eich i 1995 og blev en ECMA-standard i 1997.

ECMA-262 er det officielle navn på standarden. ECMAScript er det officielle navn på sproget.