Cours de JavaScript - Premiers effets

version 1.3.1, dernière mise à jour le 5 octobre 2015.

   

Table des matières (TdM)

  1. I. Généralités
    1. Qu'est-ce que le DOM ?
    2. À quoi cela sert-il ?
    3. Quelles sont les techniques mises en jeu ?
  1. II. Les premiers effets
    1. Attributs de gestion d'événements
      1. Introduction
      2. Les attributs
    2. Modification des propriétés de style
      1. Introduction
      2. Exercice : Modification de la couleur
      3. Exercice : Déplacement d'élément
      4. Exercice : Modification de la police
    3. Modification d'un attribut quelconque
      1. Exercice : Modification de contenu

Retour au menu

Contenu du cours

I. Généralités

1. Qu'est-ce que le DOM ?

Le DOM , ou Document Object Model est un standard du W3C désignant l'ensemble des techniques permettant à un langage de script (comme JavaScript) d'accéder au contenu d'un document balisé (comme par exemple une page (X)HTML).

>Retour à la TdM

2. À quoi cela sert-il ?

>Retour à la TdM

3. Quelles sont les techniques mises en jeu ?

Le DOM est la conjonction d'un ensemble de techniques, qui sont supportées par les plus récentes versions des navigateurs (partiellement à partir de la version 4 d'Internet Explorer et 5 d'Opéra, des versions 4 de Netscape ; presque totalement et de manière « compatibilisable » à partir des versions 6, ainsi que toutes les versions de Mozilla).

  1. une vue orientée objet de la page web et de ses éléments. Chaque élément <tag id="id_du_tag"> blabla </tag> est identifié par son identifiant (l'attribut id) et accessible de manière univoque. De plus, la structure entière de la page peut être représentée sous la forme d'une arborescence, permettant l'accès direct (et la modification) à chacun de ses éléments. C'est à proprement parler cette structure qui constitue le DOM du W3C.

  2. l'appel systématique aux feuilles de style (les CSS) qui permettent une modification précise de l'apparence de chacun des éléments.

  3. le recours éventuel à des langages de script pour la gestion des événements. Nous nous limiterons au JavaScript, mais cela pourrait être du VBscript.

>Retour à la TdM

II. Les premiers effets

1. Attributs de gestion d'événements

a. Introduction

La gestion d'événements est un processus complexe si on veut pouvoir tirer parti de toutes les possibilités offertes par le DOM. Fort heureusement, lorsqu'il s'agit de coder un effet simple, destiné à n'être utilisé que ponctuellement dans un fichier, il est possible de faire appel aux attributs définis dans la recommandation HTML.

b. Les attributs

Ces attributs définis dans la recommandation du W3C sont suffisants pour la gestion des événements de base. On trouve :

>Retour à la TdM

2. Modification des propriétés de style

a. Introduction

Il est possible de modifier localement les propriétés de style d'un élément. On fait alors appel à l'objet courant this en JavaScript. En voici quelques exemples :

<p onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'"> Ceci est un texte dont la couleur va changer au passage de la souris. </p>

<p style="position: absolute; left: 10px; top: 230px; width:400px" onmouseover="this.style.left='100px'; this.style.top='300px'; this.style.width='600px'; this.style.textAlign='center'" oumouseout="this.style.left='10px'; this.style.top='230px'; this.style.width='400px'; this.style.textAlign='left'">Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable.Exemple de texte à géométrie variable. Exemple de texte à géométrie variable.Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. </p>

Noter dans l'exemple précédent l'utilisation de majuscules pour éviter d'utiliser le tiret présent dans la propriété CSS, mais qui a un sens différent en JavaScript, puisqu'il permet d'effectuer une soustraction.

Il y a une autre exception, avec la propriété float : elle est accessible via la propriété this.styleFloat pour Internet Explorer, et this.style.cssFloat pour les autres navigateurs.

Exercice 1. Modification de la couleur

Énoncé
Correction

Exercice 2. Déplacement d'élément

Énoncé
Correction

Exercice 3. Modification de la police

Énoncé
Correction

>Retour à la TdM

3. Modification d'un attribut quelconque

Il est aussi possible de modifier d'une manière similaire n'importe quel attribut d'un élément.

Exercice 1. Modification de contenu

Énoncé
Correction

>Retour à la TdM

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu