JavaScript-introduktion


Innehållsförteckning

    Visa innehållsförteckning

Den här sidan innehåller några exempel på vad JavaScript kan göra.

JavaScript kan ändra HTML-innehåll

En av många JavaScript HTML-metoder är getElementById().

Exemplet nedan "hittar" ett HTML-element (med id="demo"), och ändrar elementets innehåll (innerHTML) till "Hej JavaScript":

Exempel

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

Prova själv →

<!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 accepterar både dubbla och enkla citattecken:

Exempel

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

Prova själv →

<!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 ändra HTML-attributvärden

I det här exemplet ändrar JavaScript värdet på attributet src (källa) för en <img>-tagg:

Glödlampan

Prova själv →

<!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 ändra HTML-stilar (CSS)

Att ändra stilen på ett HTML-element är en variant av att ändra en HTML attribut:

Exempel

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

Prova själv →

<!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 dölja HTML-element

Dölja HTML-element kan göras genom att ändra stilen visning:

Exempel

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

Prova själv →

<!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 visa HTML-element

Att visa dolda HTML-element kan också göras genom att ändra stilen visning:

Exempel

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

Prova själv →

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

Visste du?

JavaScript och Java är helt olika språk, båda i koncept och design.

JavaScript uppfanns av Brendan Eich 1995 och blev en ECMA-standard år 1997.

ECMA-262 är det officiella namnet på standarden. ECMAScript är det officiella namnet på språket.