Le Javascript est un langage qui permet de créer ce que l'on appelle des pages DHTML. Ce terme désigne les pages Web qui modifient elles-mêmes leur propre contenu sans charger de nouvelle page. C'est cette modification de la structure d'une page Web que nous allons étudier dans cette partie.

• le DOM (Document Object Model)

le Document Object Model en abrégé DOM est une interface de programmation pour les documents HTML et XML( l'eXtensible Markup Language est un langage de description de données permettant de définir des balises que l'on veut en fonction de son besoin).
Une interface de programmation que l'on abrège la plupart des temps API pour application Programming Interface, est un ensemble d'outils qui permet de faire communiquer entre eux plusieurs programmes ou dans le cas présent différent langage.
Le DOM est donc une API qui s'utilise avec les documents HTML et XML, et qui va nous permettre, via le JavaScript d'accéder au code XML ou HTML d(un document. C'est grâce au DOM que nous allons modifier les éléments HTML (afficher ou masquer un div par exemple), en ajouter, supprimer faire bouger ou même supprimer un élément.

1.1. L'objet window
avant de nous lancer dans l'étude du DOM, il sera intéressant de parler de l'objet window.
L'objet window représente la fenêtre de l'application. Contrairement à ce qui a été dit dans ce cours, alert() n'est pas vraiment une fonction. Il s'agit en réalité d'une méthode appartenant à l'objet window. Mais l'objet window est dit implicite, c'est-à-dire qu'il n'y a généralement pas besoin de le spécifier. Ainsi, ces deux instructions produisent le même effet, à savoir ouvrir une boîte de dialogue :

En outre si vous affectez une valeur à une variable sans l'avoir au préalable déclaré, celle-ci devient une propriété de l'objet window en d'autres termes, elle devient une variable globale. faite bien attention à toujours déclarer vos variables avant de les affecter les valeurs.
1.2. l'objet document
 L'objet document est un sous objet de l'objet window. il est l'un des plus utilisé car il représente la page web plus précisément là l'élément html. C'est grâce a lui que nous allons accéder aux éléments html et les modifier.

• les objets dans java script

Comme énoncer précédemment, un objet est un concept, une idée, un chose matériel ou immatériel représentant une entité dans le monde réel. il existe des objets natifs de JavaScript qui sont nombreux et très utile. Mais l'on se trouve très souvent dans le besoin d'utiliser nos propres Objet. JavaScript offre la possibilité de créer ses propres objets.

• • création simple d'un objet

exemple: code JavaScript

2.2. Les objets littéraux
S'il est possible d'accéder aux items d'un tableau via leur indice, il peut être pratique d'y accéder au moyen d'un identifiant. Par exemple, dans le tableau des prénoms, l'item appelé sister pourrait retourner la valeur « Laurence ».
Pour ce faire, nous allons créer nous-mêmes un tableau sous la forme d'un objet littéral. Voici un exemple :

pour accéder aux valeurs des items, on procède de deux manières soit :

2.3. naviguer dans le document
            2.3. la structure de DOM
Du point de vu du DOM, la page web est vu comme un arbre présentant une hiérarchie de d'élément. Ainsi, le code ci-dessous produira le schéma ci-contre :

représentation du code sous forma d'arbre

2.3. Accéder aux éléments
L'accès aux éléments HTML via le DOM est assez simple mais demeure actuellement plutôt limité. L'objet document possède trois méthodes principales : getElementById(), getElementsByTagName() et getElementsByName().

• getElementById()

Cette méthode permet d'accéder à un élément en connaissant son ID qui est simplement l'attribut id de l'élément. Cela fonctionne de cette manière

Aperçu:

le navigateur dit que div est un élément de type HTMLParagraphElement. en d'autre terme, c'est un élément HTML qui se trouve dans un paragraphe <p>.

• getElementsByTagName()

Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments de la famille. Si, dans une page, on veut récupérer tous les <div>, il suffit de faire comme ceci :

La méthode retourne une collection d'éléments (utilisable de la même manière qu'un tableau). Pour accéder à chaque élément, il est nécessaire de parcourir le tableau avec une petite boucle.
Deux petites astuces :

• Cette méthode est accessible sur n'importe quel élément HTML et pas seulement sur l'objet document.
• En paramètre de cette méthode vous pouvez mettre une chaîne de caractères contenant un astérisque * qui récupérera tous les éléments HTML contenus dans l'élément ciblé

• getElementsByName()

Cette méthode est semblable à getElementsByTagName() et permet de ne récupérer que les éléments qui possèdent un attribut name que vous spécifiez. L'attribut name n'est utilisé qu'au sein des formulaires, et est déprécié depuis la spécification HTML5 dans tout autre élément que celui d'un formulaire. Par exemple, vous pouvez vous en servir pour un élément <input> mais pas pour un élément <map>.
Sachez aussi que cette méthode est dépréciée en XHTML mais est maintenant standardisée pour l'HTML5.

il existe deux autres méthodes de sélections plus récentes mais qui ne sont pas prises en charge par les navigateurs récents. Ces méthodes sont querySelector() et querySelectorAll(). Ils prennent tous les deux comme paramètre une chaine de caractère qui est identique à un sélecteur CSS.

• L'héritage des propriétés et des méthodes

Le Javascript voit les éléments HTML comme étant des objets, cela veut donc dire que chaque élément HTML possède des propriétés et des méthodes. Cependant faites bien attention parce que tous ne possèdent pas les mêmes propriétés et méthodes. Certaines sont néanmoins communes à tous les éléments HTML, car tous les éléments HTML sont d'un même type : le type Node, qui signifie « nœud » en anglais.

3.1. Notion d'héritage
Nous avons vu qu'un élément <p> est un objet HTMLParagraphElement, mais un objet, en Javascript, peut appartenir à différents groupes. Ainsi, notre <p> est un HTMLParagraphElement, qui est un sous-objet d'HTMLElement qui est lui-même un sous-objet d'Element. Element est enfin un sous-objet de Node. Ce schéma est plus parlant :

• les évènements

Il a été dit plus haut que le JavaScript permet de déclencher un certain nombre opération lorsque l'utilisateur effectue une action particulière sur la page web (survole de la sourie, appuyer une touche du clavier, cliquer sur un bouton, etc.). Se sont les évènements qui permettent de déclencher ces actions.
Il existe de nombreux événements, tous plus ou moins utiles. Voici la liste des événements principaux, ainsi que les actions à effectuer pour qu'ils se déclenchent :

4.1. Associer un évènement a un élément
Pour ce faire il suffit des mettre dans la balise le nom de l'évènement et de lui associer une fonction
exemple :

parametres1 et parametre2 correspondes à des paramètres que l'on veut transmettre à la fonction. On peut exécuter plusieurs fonctions sur le même évènement pour ce faire il suffit de rajouter un point-virgule.

4.2. Associer dynamiquement un évènement a un élément
Consiste à ajouter un évènement a une balise dans la page HTML alors que la page est déjà chargée ou à une balise HTML crée dynamiquement. Il existe trois méthodes,

• Méthode 1,

la plus ancienne de cette méthode consiste à pointer vers l'élément cible à lui associer l'évènement et à lui adjoindre le nom de la fonction sans les parenthèses.

exemple code JavaScript:

très utile car compatible même avec les anciens navigateurs et simple à mettre en œuvre  on peut aussi lui adjoindre une fonction anonyme (fonction sans nom) afin de lui adjoindre un ou des paramètres.
exemple :

le problème de cette méthode est que l'on peut adjoindre qu' une seule fonction pour le même évènement la plus par du temp c'est suffisant mais dans certains cas comme au chargement d'une page plusieurs fonctions peuvent être appelé.

• Méthode 2,

la deuxièmement méthode s'appelle 'addEventListener' et fait partie de l'objet event que l'on abordera plus bas sa syntaxe est légèrement différente.
exemple :

avec cette méthode on peut adjoindre plusieurs fonctions pour le même évènement.


Il est possible de retirer l’évènement en utilisant 'removeEventListener' en précisant la fonction et au cas où plusieurs fonction son lancer pour l’élément auquel est rattaché l' évènement les autres fonctions seront toujours exécuté.

à noter que l’évènement n'est pas précédé par "on".

avec cette méthode il est possible de mettre une fonction anonyme mais comme une fonction anonyme ne contient pas de nom il ne sera pas possible de retirer l' évènement avec removeEventListener car pour être utilisé removeEventListener doit comporter l’évènement ainsi que la fonction a retiré.

• Methode 3

un évènement dans une balise est considéré comme un attribut et pour cette troisième méthode nous allons utiliser 'setAttribute'.

exemple:

la méthode va insérer dans la balise l'évènement de la même manière que si on le faisait soit même on peut rajouter des paramètres et plusieurs fonction pour le même évènement sur l'élément.
le problème de cette méthode c'est que s'il y a plusieurs fonctions associées à l'évènement il ne sera pas possible de retirer l'évènement a l'une des fonctions on pourra uniquement toutes les retirer en retirant l'attribut de la balise avec removeAttribute

Exercice d'application: écrire un script qui permettra de changer la couleur d'un élément div lorsque l'utilisateur fera un clic sur un élément button. On utilisera trois boutons pour modifier la couleur du div. A chaque bouton il sera associé un une couleur.

solution:

aperçu sur le navigateur