| Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente |
| web:javascript:hello:start [2021/08/11 10:21] – phil | web:javascript:hello:start [2021/08/11 10:54] (Version actuelle) – phil |
|---|
| [[|{{ :suivant.png?nolink&30|}}]] [[|{{ :retour.png?nolink&30|}}]][[web:javascript|{{ :iconemaison.jpg?nolink&30|Accueil JavaScript}}]] | [[web:javascript|{{ :iconemaison.jpg?nolink&25|Accueil JavaScript}}]] |
| |
| ===== Hello(s) World(s) en JavaScript ===== | ==== "Hello World" en JavaScript ==== |
| |
| [Mise à jour le 26/9/2020] | [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> | * **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|}} | {{ :web:javascript:hello:hellov1.png?nolink|}} |
| ==== Version 1 ==== | === Version 1 === |
| > La **méthode** //write// appliquée à l'**objet** //document// permet d'intégrer du texte à la page html. | La **méthode** //write// appliquée à l'**objet** //document// permet d'intégrer du texte à la page html. |
| |
| <code javascript *.js> | <code javascript *.js> |
| </code> | </code> |
| |
| ==== Version 2 ==== | === 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. | 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> | <code javascript *.js> |
| |
| <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> | <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 ==== | === 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//. | 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> | </code> |
| |
| | === Version 4 === |
| | |
| ==== Version 4 ==== | |
| {{ :web:javascript:hello:alert.png?nolink&350|}} | {{ :web:javascript:hello:alert.png?nolink&350|}} |
| Le script est placé à l'**extérieur** de //body//. Cette version utilise une **boîte de dialogue**. | Le script est placé à l'**extérieur** de //body//. Cette version utilise une **boîte de dialogue**. |
| </code> | </code> |
| |
| ==== Version 5 ==== | === Version 5 === |
| {{ :web:javascript:hello:console.png?nolink|}} | {{ :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**. | 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**. |
phil