Technologies internet

Code JavaScript dans une page HTML

L'objet "document" (DOM)

Le DOM (Document Object Model) présente le document comme une hiérarchie d'objets (nodes) organisés en un arbre et il décrit une interface permettant à accéder et de mettre à jour le contenu, la structure et le style de documents HTML (plus généralement de type XML).

Intuitivement, l'objet "document" représente toute information attachée au contenu d'une page HTML, comme:

l'entête document.head
le "body" du document document.body
le contenu des formulaires
quoi faire si on clique sur un des éléments de la page
etc...

Grâce à ces structures et méthodes on peut créer dynamiquement des documents ou encore obtenir des informations sur le contenu d'un document.

L'objet document est créé au fur et à mesure quand les fichiers de la page se chargent. Parmi les méthodes de l'objet document on trouve:

createElement(tag)
createAttribute(name)
getElementById(id)

Types de noeuds

Document - la racine du DOM
Element - représente un élément
Attr - représente un attribut
Text - représente le contenu textuel d'un élément ou d'un attribut
...

Élément HTML

Chaque élément, node, du DOM, par exemple, retourné par document.getElementbyId(), contient plusieurs propriétés, comme:

node.attributes[] - tableau des attributs
node.childNodes[] - tableau des éléments enfants
node.parentNode - l'élément parent
node.style - l'attribut "style"
node.appendChild(elem) - ajoute l'élément elem comme son dernier enfant
node.insertBefore(elem,fils) - insère l'élément elem comme nouvel enfant juste avant son enfant existant fils
node.removeChild(oldChild)
node.replaceChild(newChild,oldChild)
node.click() - simule le "clique" sur l'élément
node.getElementByTagName(tagName) - retourne le tableau des éléments tagName sous-jacents

Par exemple:

var x = document.getElementById("titre");
x.attributes; /* [{name:"id", value:"my_id",...},
                  {name:"style", value:"color:blue", 
                   ...}, ... ] */
x.childNodes; // [{textContent:"Mon titre", ...}]
x.getElementsByTagName("li"); // []
x.parentNode.getElementsByTagName("li"); 
     /* [{id="i1",textContent:"un",...},
         {id="i2",textContent:"deux",...},
         {id="",textContent:"bla",...}] */

Insertion de code JavaScript dans un fichier *.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 !!!"

Voir la page.

B. Autres possibilités:

Le code réside dans un fichier externe:

  <head>
    ...
    <script type="text/javascript" src="mon_programme.js"/>
   ...

Certains tags HTML peuvent contenir des paramètres avec des valeurs en JavaScript (à suivre)

C. Gestion de navigateurs sans support JavaScript

Cacher un script:

<script>
//<!-- Begin to hide script contents from old browsers.

..... expressions JavaScript...

// End the hiding here. -->
</script>

Afficher un contenu alternatif pour ces navigateurs: <noscript>

<noscript>
  <p>This page uses JavaScript!</p>
</noscript>

Exécution du code JavaScript

Le code JavaScript est déclenché par 2 moyens:

Code JavaScript présent dans les éléments <script> de la page HTML - le code va être exécuté au moment de la construction de l'élément du DOM
Traitement d'un "événement" (event handler):
- un événement peut être produit par un "geste" de l'utilisateur comme: bouger la souris, cliquer sur un bouton, remplir un champ, etc.
- DOM prédéfinit un certain nombre d'événements que l'on peut exploiter
- On peut spécifier la correspondance entre les événements et des fonctions JavaScript. Par exemple:
```
 <p onclick="alert('Voilà');">Cliquez ici</p>
```

La gestion des événements

En utilisant JavaScript on peut créer des pages web dynamiques. Événements (events) sont des actions qui peuvent déclencher l'exécution du code JavaScript.

Certains éléments du DOM peuvent posséder des événements comme:

onBlur (en quittant)
onChange (après modification réussie)
onClick (en cliquant)
onFocus (en activant)
onKeydown (en appuyant sur une touche)
onKeypress (en maintenant une touche appuyée)
onKeyup (en relâchant la touche)
onLoad (en chargeant un fichier)
onMousedown (en maintenant la touche de souris appuyée)
onMousemove (en bougeant la souris)
onMouseout(en quittant l'élément avec la souris)
onMouseover (en passant sur l'élément avec la souris)
onMouseUp (en relâchant la touche de souris)
onReset (en initialisant le formulaire)
onSelect (en sélectionnant du texte)
onSubmit (en envoyant le formulaire)
onUnload (en quittant le fichier)

DOM supporte aussi les événements liés au temps, comme:

setTimeout("javascript statement",milliseconds)
clearTimeout(setTimeout_id)
setInterval("javascript statement",milliseconds)
clearInterval(setInterval_id)