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- 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<!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
modifierAfin 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()
modifierPar 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.