Programmation JavaScript/Programmer en deux minutes

Un livre de Wikilivres.
Sauter à la navigation Sauter à la recherche


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 prompte et alerte puis 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 et 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>

A l'ouverture de ce document, le navigateur affiche le corps puis prompt et alert.

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, munissez votre navigateur d'un outil tel Firebug.

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 :

  1. Une page wiki
  2. Compteur en temps réel des dépenses militaires.
  3. Tout un site web dans un seul document.
  4. Neige dans la fenêtre du navigateur.

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[modifier | modifier le wikicode]


Voir aussi le livre : Programmer en deux minutes.