Table des matières

Accueil JavaScript

"Hello World" en JavaScript

[Mise à jour le 11/8/2021]

Version 1

La méthode write appliquée à l'objet document permet d'intégrer du texte à la page html.

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Hello World V1</title>
</head>
 
<body>
    <p>
    <script type="text/javascript">
        window.document.write("Hello World"); // window peut être ommis
    </script>
    </p>
</body>
 
</html>

Version 2

Dans cette deuxième version, le script repère la balise <p> par son identifiant à l'aide de la méthode getElementById de l'objet document et y place un nouveau contenu à l'aide de la propriété innerHTML. On obtient le même résultat que dans la version précédente.

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Hello World V2</title>
</head>
 
<body>
    <p id="hw"></p>
    <script type="text/javascript">
        document.getElementById("hw").innerHTML="Hello World";
    </script>
</body>
 
</html>

<note important>L'éditeur VSCode identifie une méthode par un cube et une propriété par un parallélogramme rectangle . Cette indication permet d'identifier la syntaxe attendue par le navigateur.</note>

Version 3

Le script est placé à l'extérieur de body. Il crée une variable de type “objet paragraphe” nommée monparagraphe avec la méthode createElement de l'objet document. Il intègre le texte à monparagraphe avec la propriété innerHTML et place monparagraphe dans body avec la méthode appendChild.

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Hello World V3</title>
</head>
 
<body id="monBody"></body>
 
<script type="text/javascript">
    var monparagraphe = document.createElement("p");
    monparagraphe.innerHTML = "Hello World";
    document.getElementById("monBody").appendChild(monparagraphe);
</script>
 
</html>

Version 4

Le script est placé à l'extérieur de body. Cette version utilise une boîte de dialogue.

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Hello World V4</title>
</head>
 
<body></body>
 
<script type="text/javascript">
    alert("Hello World");
</script>
 
</html>

Version 5

Le script est placé à l'extérieur de body. L'affichage se fait dans la console du navigateur. On accède à a console avec F12 → onglet Console.

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Hello World V5</title>
</head>
 
<body></body>
 
<script type="text/javascript">
    var message = "Hello World";
    console.log(message);
</script>
 
</html>