Code JavaScript dans une page HTML

A. Utilisation de la balise "script"

on insère normalement toutes les fonctions et initialisations dans le "head" de la page HTML
```
<head>
  ...
  <script type="text/javaScript">
    ...
  </script>
  ...
</head>
```
Cela assure que les fonctions soient connues, avant d'être appelées

Exemple : fonction direBonjour() qui permettra d'afficher une petite fenêtre avec le texte: "Bonjour cher lecteur !!!"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Dire bonjour avec JavaScript (5 juillet 2006)</title>
    <script type="text/javascript">
    // Ici on definit une fonction JavaScript
    function direBonjour() {
      alert("Bonjour cher lecteur !!! ")
    }
    </script>
  </head>
  <body>
    <div>
      <h1>Dire bonjour avec JavaScript</h1>
      Cette page montre comment lancer une simple fonction JavaScript.<br/><br/>
      Rechargez la page pour voir encore une fois l'effet.
      <script type="text/javascript">
      // Ici on apelle la fonction
      direBonjour()
      </script>
    </div>
  </body>
</html>

Voir la page.

Utilisation de code JavaScript

B. Appel de fonction par un "événement"

un événement est produit par un "geste" de l'utilisateur
exemples : bouger la souris, cliquer sur un bouton, remplir un champ, etc.
JavaScript pré-définit un certain nombre d'événements que l'on peut exploiter

Exemple: direBonjour avec un événement Javascript

<form method="post">
<input type="button" value="Clickez ici" onclick="direBonjour()"/>
</form>

"onclick" est un événement qui est déclenché quand l'utilisateur clique sur le bouton.
Une fois l'événement déclenché, la fonction "direBonjour" est exécutée.
Pour savoir d'autres événements, consultez le tutoriel de w3schools.

Exemple 1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Effets divers en Javascript</title>
    <script type="text/javascript">
function setColor (color) {
  document.getElementById("body").style.backgroundColor = color;
  return 0;
}
    </script>
  </head>
<body id="body">
  <p>
    <button id="rouge" onclick="setColor('red');">rouge</button>
    <button id="vert" onclick="setColor('green');">vert</button>
    <button id="bleu" onclick="setColor('blue');">bleu</button>
    <button id="blanc" onclick="setColor('white');">blanc</button>
    <button id="noir" onclick="setColor('black');">noir</button>
    <button id="gris" onclick="setColor('gray');">gris</button>
  </p>
</body>
</html>

Cet exemple en action.

Exemple 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Effets divers en Javascript</title>
    <script type="text/javascript">
function setColor (color) {
  if (color == 'black') {
    objet = document.getElementById("para")
    objet.innerHTML =
      '<button id="rouge" onclick="setColor(\'red\');">rouge</button>' +
      '<button id="vert" onclick="setColor(\'green\');">vert</button>' +
      '<button id="bleu" onclick="setColor(\'blue\');">bleu</button>' +
      '<button id="blanc" onclick="setColor(\'white\');">blanc</button>' +
      ' <i>Nouveau contenu</i> ' +
      '<button id="gris" onclick="setColor(\'gray\');">gris</button>';
  }
  else {
    document.getElementById("body").style.backgroundColor = color;
  }
  return 0;
}
    </script>
  </head>
<body id="body">
  <p id="para">
    <button id="rouge" onclick="setColor('red');">rouge</button>
    <button id="vert" onclick="setColor('green');">vert</button>
    <button id="bleu" onclick="setColor('blue');">bleu</button>
    <button id="blanc" onclick="setColor('white');">blanc</button>
    <button id="noir" onclick="setColor('black');">remplacer par texte</button>
    <button id="gris" onclick="setColor('gray');">gris</button>
  </p>
</body>
</html>