web:javascript:hello:start

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
web:javascript:hello:start [2020/09/26 09:08] – [Version 4] philippeweb:javascript:hello:start [2021/08/11 10:54] (Version actuelle) – phil
Ligne 1: Ligne 1:
 +[[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]]
  
 +==== "Hello World" en JavaScript ====
 +
 +[Mise à jour le 11/8/2021]
 +
 +  * **Sources** : <html><a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript" target="_blank">MDN web docs Mozilla</a></html>
 +
 +----
 +
 +{{ :web:javascript:hello:hellov1.png?nolink|}}
 +=== Version 1 ===
 +La **méthode** //write// appliquée à l'**objet** //document// permet d'intégrer du texte à la page html.
 +
 +<code javascript *.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>
 +</code>
 +
 +=== 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.
 +
 +<code javascript *.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>
 +</code>
 +
 +<note important>L'éditeur **VSCode** identifie une **méthode** par un cube {{:web:javascript:hello:symbolmethod.png?nolink&200|}} et une **propriété** par un parallélogramme rectangle {{:web:javascript:hello:symbolfield.png?nolink&200|}}. 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//.
 +
 +<code javascript *.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>
 +</code>
 +
 +=== Version 4 ===
 +{{ :web:javascript:hello:alert.png?nolink&350|}}
 +Le script est placé à l'**extérieur** de //body//. Cette version utilise une **boîte de dialogue**.
 +
 +<code javascript *.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>
 +</code>
 +
 +=== Version 5 ===
 +{{ :web:javascript:hello:console.png?nolink|}}
 +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**.
 +
 +<code javascript *.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>
 +</code>