Programmation JavaScript/Programmer en deux minutes
JavaScript est un langage exécuté par le navigateur web, à l'affichage d'une page web. (il est surtout utilisé pour ça)
Créer ce document HTML (le nom du fichier se terminera généralement par .html) puis l'ouvrir avec un navigateur.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
alert(prompt("bonjour le monde !"));
</script>
</head>
<body>
Corps de la page.
</body>
</html>
Le navigateur vous demande dâentrer un texte dans une pop-up, affiche le texte donnĂ© dans une seconde pop-up, et enfin affiche le corps du document. FĂ©licitations, vous avez Ă©crit vos premiĂšres instructions JavaScript dans un document HTML !
Note : La plupart des navigateurs exécuteront sans problÚme ce code simplifié :
<body>
Corps de la page.
<script type="text/javascript">
alert(prompt("bonjour le monde !"));
</script>
</body>
Une minute
[modifier | modifier le wikicode]- Une page web est un document composĂ© d'une tĂȘte et d'un corps (
<html> <head></head> <body></body> </html>). - Le corps du document est affichĂ© Ă l'Ă©cran tandis que la tĂȘte contient le titre de la page, son favicon, ses mots-clĂ©s, etc. (pour un exemple, afficher le code source de cette page (on peut souvent utiliser le raccourci clavier Ctrl + U))
La tĂȘte comme le corps d'un document HTML peuvent contenir des instructions JavaScript :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
Corps.
<script type="text/javascript">
alert(prompt("bonjour le monde !"));
</script>
</body>
</html>
Le navigateur se comporte comme pour le premier document de cette page, exceptĂ© le fait que le contenu de la page est affichĂ© avant lâouverture des pop-ups
une minute trente : une fonction JavaScript
[modifier | modifier le wikicode]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function Prompt_et_alert() {
alert(prompt("bonjour le monde !"));
}
</script>
</head>
<body>
<a onmouseout="Prompt_et_alert();"> <!-- une ancre balise un hyperlien -->
Corps.
</a>
</body>
</html>
La fonction est dĂ©finie en tĂȘte de document et est exĂ©cutĂ©e lorsque la souris sort de l'ancre (onmouseout).
Deux minutes
[modifier | modifier le wikicode]Afin d'aller plus loin, ouvrez la console du navigateur.
Pour apprendre à manipuler cet outil, introduisez une erreur dans votre document, par exemple en oubliant un des guillemets ", et vérifiez la présence de l'erreur dans la console JavaScript.
FĂ©licitation, vous ĂȘtes parĂ© pour Ă©crire davantage d'instructions !
En deux minutes :
- Une page wiki
- Compteur en temps réel des dépenses militaires.
- Tout un site web dans un seul document.
console.log()
[modifier | modifier le wikicode]Par la suite, nous utiliserons cette instruction pour faire apparaitre des messages en console, ce qui est pratique pour dĂ©buguer sans impacter le fonctionner du site (contrairement Ă alert()). De plus, on peut y utiliser du code CSS et mĂȘme y publier des tableaux.
- Voir aussi le livre : Programmer en deux minutes.