Introduction à Javascript

Table des matières

Cette page contient quelques exemples de ce que JavaScript peut faire.

JavaScript peut modifier le contenu HTML

L'une des nombreuses méthodes HTML JavaScript est getElementById().

L'exemple ci-dessous "trouve" un élément HTML (avec id="demo"), et modifie le contenu de l'élément (innerHTML) en "Bonjour JavaScript" :

Exemple

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

Essayez-le vous-même →

<!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 accepte les guillemets doubles et simples :

Exemple

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

Essayez-le vous-même →

<!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 peut modifier les valeurs des attributs HTML

Dans cet exemple, JavaScript modifie la valeur de l'attribut src (source) d'une balise <img> :

L'ampoule

Essayez-le vous-même →

<!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 peut modifier les styles HTML (CSS)

Changer le style d'un élément HTML, est une variante de la modification d'un HTML attribut:

Exemple

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

Essayez-le vous-même →

<!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 peut masquer les éléments HTML

Le masquage des éléments HTML peut être effectué en modifiant le style d'affichage :

Exemple

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

Essayez-le vous-même →

<!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 peut afficher des éléments HTML

L'affichage des éléments HTML masqués peut également être effectué en modifiant le style d'affichage :

Exemple

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

Essayez-le vous-même →

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

Saviez-vous?

JavaScript et Java sont des langages complètement différents, tous deux dans leur concept et conception.

JavaScript a été inventé par Brendan Eich en 1995 et est devenu un standard ECMA en 1997.

ECMA-262 est le nom officiel de la norme. ECMAScript est le nom officiel du langage.