Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche DOM : Introduction au DHTML (javascript)

Objet de la fiche

État de la fiche Validé


Plan de la fiche :

Avant propos

Le DHTML (Dynamic HyperText Markup Language) est un ensemble de technologies Internet qui associées entre elles offrent la possibilité de construire des pages HTML interactives, c'est-à-dire dont le contenu peut être modifié grâce à des événements (mouvements de la souris, survol d'un objet par le curseur, ...) après le chargement de la page.

Parmi les principales technologies mises en oeuvre dans le cadre du DHTML citons :

  • Le HTML, langage à balises pour la mise en forme du contenu du document.
  • Les feuilles de style (CSS), pour définir le style du document (texte, police de caractères, bordures, position des objets etc.).
  • Le document objet modèle (DOM), qui présente les objets d'une page HTML sous forme d'une hiérarchie d'objets, afin de faciliter leur manipulation.
  • Le Javascript, qui est un langage de script essentiel pour définir des événements utilisateur et activer des actions. Ce langage est en connexion directe avec le DOM via l'objet window.

Lorsque l'on enrichie cet ensemble de technologie de l'objet XMLHttpRequest qui permet d'échanger et de manipuler les données de manière asynchrone avec le serveur Web et de manière totalement transparente pour l'internaute, on parle de technologie AJAX ( Asynchronous JavaScript And XML).

Cet ensemble de technologies permet de faire des documents HTML originaux et vivants.

Généralités sur les scripts


Les langages informatiques

Voici une définition des langages informatiques tirée du document intitulé « Langages informatiques - Introduction » issu de Comment Ça Marche (www.commentcamarche.net)

On appelle « langage informatique » un langage destiné à décrire l'ensemble des actions consécutives qu'un ordinateur doit exécuter. Un langage informatique est ainsi une façon pratique pour nous (humains) de donner des instructions à un ordinateur.

A contrario, le terme « langage naturel » représente les possibilités d'expression partagé par un groupe d'individus (par exemple l'anglais ou le français).

À CHAQUE instruction correspond UNE action du processeur. Le langage utilisé par le processeur est appelé langage machine. Il s'agit des données telles qu'elles arrivent au processeur, constituées d'une suite de 0 et de 1 (données binaire).

Le langage machine n'est ainsi pas compréhensible par l'être humain, c'est pourquoi des langages intermédiaires, compréhensibles par l'homme, ont été mis au point. Le code écrit dans ce type de langage est transformé en langage machine pour être exploitable par le processeur.

Les langages de programmation (1) peuvent être classés en deux grandes familles : les langages compilés et les langages interprétés. Les jeux d'instructions que proposent ces langages permettent de concevoir divers programmes informatiques(2).

  • Langage compilé (3) : après avoir été écrit de manière classique, la liste d'instructions ne peut être utilisée telle quelle, mais doit être traduite dans  un langage dit « compilé » qui va traduire ces instructions en un programme autonome auto exécutable. Le concepteur compile le programme une seule fois  à l'aide d'un logiciel annexe appelé compilateur(5) (relatif au type de langage utilisé), et peut l'intégré le programme autonome auto exécutable résultant (6) dans une page HTML (7) ou le mettre à disposition d'autres utilisateurs : les activeX ou les applets Java en sont de bons exemples. L'exécution de ce type de programme dans une page Web présente l'avantage d'être rapide (car le navigateur n'a rien à interpréter, seulement lancer ce programme qui va s'exécuter tout seul), et de de garantir la sécurité et l'intégrité du code source (car seul le concepteur peut en théorie le modifier et le recompiler). Pour un programme écrit dans un tel langage le fichier exécutable est différent du fichier source.
  • Langage interprété (4) : plus couramment appelés 'script' ne nécessitent pas de compilation avant d'être exécutés. Pour un programme écrit dans un tel langage le fichier 'exécutable' est le fichier source lui-même et est directement exploitable (7). Les instructions sont analysées (interprétées) l'une après l'autre par un logiciel appelé interpréteur intégré au navigateur de l'internaute (interpréteur javascript), ou sur le serveur lui-même (interpréteurs php, asp).

Il existe aussi des langages mixtes dont le fichier résultant  est  compilée mais ne donne pas un fichier final auto exécutable.

Les scripts

Les scripts sont des programmes informatiques écrits en langage interprété qui offrent aux concepteurs  une méthode pour étendre considérablement les possibilités du HTML en lui ajoutant une interactivité et une dynamisation importante. On va parler de HTML Dynamique.
Par exemple :

  • des scripts peuvent être activés au moment du chargement du document pour écrire dynamiquement une partie ou le reste du document.
  • des scripts peuvent être écrits en conjonction avec un formulaire pour traiter et filtrer l'entrée de données au moment précis ou elle est effectuée. Les concepteurs disposent d'un moyen de remplir automatiquement une partie de formulaire suivant la valeur d'un autre champ. Ils pourront de plus vérifier que les valeurs entrées et soumises sont bien dans les plages admises de chacune d'entre elles, que les champs ne se contredisent pas entre eux, etc.
  • des scripts peuvent être lancés en réponse à des événements intervenant dans le document, tels que le chargement, le déchargement, l'activation d'un contrôle particulier, un mouvement de souris, etc.
  • des scripts pourront être liés à des contrôles de formulaires (des boutons par exemple) pour constituer des contrôles d'interface homme machine complets.

Un concepteur pourra attacher des scripts à un document HTML :

  • Durant la phase de chargement de la page HTML.
  • Automatiquement en début ou en fin de chargement de la page HTML.
  • Chaque fois qu'un événement précis survient.

Types de script

Dans les tutoriaux de monwebfacile nous nous limiterons à l'étude de deux types de scripts : les scripts écrits en langage javascript et les scripts écrits en langage PHP

  • les scripts javascript : ils sont incontournables pour réaliser un site dynamique. Ces scripts s'exécutent sur le poste de travail de l'internaute et l'interpréteur javascript est disponible sur tous les navigateurs.
  • les scripts PHP : ces scripts s'exécutent sur le serveur (Apache) qui abrite le site. Avant de renvoyer la page HTML demandée le serveur parcourt la page, interprète les script PHP, les exécutent, et renvoie une page HTML  tenant compte des directives PHP contenues dans le script. Ce type de script sera détaillé dans les fiches PHP.

Les script  javascript

Script internes

Toute information contenue entre les balise <script> et </script> n'importe ou dans un document HTML, sera considérée comme une information de script. Pour les navigateurs ne supportant pas les scripts, ou dont l'exécution de script a été désactivée les informations de script seront purement et simplement ignorées. Le concepteur de page HTML utilisant les scripts devra inclure des alternatives de contenu spécifiées dans un élément <noscript>.

Une page HTML peut contenir plusieurs balises <script>et </script>, mais elles ne doivent pas être imbriquées. On peut placer une balise <script>et </script> soit dans l’entête (<head>), soit dans le corps (<body>) de la page HTML. On placera de préférence les balises <script> contenant  des fonctions dans l’entête, car cela permet qu’elles soient chargées avant le reste de la page.
Comme il existe plusieurs langage de script, il est nécessaire de préciser l’attribut type="text/javascript" dans la balise <script> lorsque l'on utilise des scripts javascript.

Script externes

Il est possible (comme pour les feuilles de style externes) d'ajouter des scripts à une page HTML à partir d'un fichier externe. Dans ce cas, on ajoute à la balise <script> un paramètre précisant le nom du fichier contenant les scripts. Ce type de syntaxe ne doit contenir que l'instruction src à l'exclusion de toute autre. Exemple dans le cas de script externes de type javascript :
<script type="text/javascript" src="../../JVS/Tutos/Action_Onload.js"></script>
Ces fichiers sont des fichiers texte auxquels on peut donner n'importe quel nom et n'importe quelle extension, toutefois le bon usage veut d'utiliser l'extension .js dans le cas des scripts javascript.
Attention : les balises <script> et </script> ne doivent pas apparaître dans les fichiers externes.

Structure classique d'une page HTML contenant du JavaScript



Exécution de scripts Javascript

Les scripts s'exécutent sur le poste du client et sont téléchargés avec la page HTML à partir du serveur.

Une page HTML contenant des feuilles de style (CSS) des scripts javascript ( informations contenues entre les balise <script> et </script>) et des éléments HTML  (tableaux, formulaires, textes, images etc) est disponible sur un serveur distant (ou sur le PC de l'utilisateur). L'utilisateur via son navigateur et une URL(1) accède à cette page (2). Après connexion cette page est renvoyée directement vers le navigateur (3) qui commence à la charger. Lorsque le navigateur rencontre les balises <script> il s'adresse à son interpréteur javascript (4) pour effectuer les actions décrites dans le script et mettre à jour la page web en conséquence (6). Lorsque le navigateur rencontre des balises HTML il met à jour directement la page web (actions natives du navigateur)(5). En fin de chargement de la page HTML, la totalité de la page Web est affichée sur l'écran(7). Certaines parties de script sont initialisées mais non exécutées à l'issue du chargement de la page : ces scripts pourront être activés par des actions de l'internaute (clic, mouvement de souris ..), ou cycliquement (rafraîchissement automatique), ou uniquement en fermeture de page Web...

Le javascript


Généralités (source wikipedia)

JavaScript a été créé en 1995 par Brendan Eich pour Netscape Communications Corporation. Il est apparu pour la première fois dans les versions bêta de Netscape Navigator 2.0. D'abord appelé LiveScript, il a été rebaptisé JavaScript et est décrit comme un complément à Java dans un communiqué de presse commun de Netscape et Sun Microsystems, daté du 4 décembre 1995. Cette initiative a contribué à créer auprès du public une certaine confusion entre les deux langages, proches syntaxiquement mais pas du tout dans leurs concepts fondamentaux, et qui perdure encore aujourd'hui. Le propos de JavaScript est de manipuler de façon simple des objets, au sens informatique, fournis par une application hôte et de présenter des pages Internet conviviales et interactives. Du code JavaScript est intégré directement au sein des pages Web, pour y être exécuté sur le poste client (votre PC). C'est alors votre navigateur Web qui prend en charge l'exécution de ces petits bouts de programmes appelés scripts, mais pour cela encore faut-il que les paramètres de sécurité de votre navigateur autorisent l'exécution de ces script.

Un langage informatique classique

Javascript le langage Comme tout langage informatique javascript met à disposition des concepteurs un jeu d'instructions classiques pour manipuler des variables, des chaînes de caractères, des tableaux, effectuer des tests conditionnels et des boucles, créer et faire appel à des procédures.

Afin de faciliter la tache des concepteurs javascript met aussi à disposition des objets relatifs à la gestion des tableaux (objet Array), des chaînes de caractères (objet String), des calculs numériques (objet Math), et des opérations liées aux dates (objet Date).

Un moyen de communication avec les éléments d'une page HTML

javascript interface HTMLParmi tous les objets que peut gérer javascript il en est un qui va nous être particulièrement utile pour rendre dynamique notre page Web. C'est l'objet window dont la structure détaillée est abordée dans les fiches suivantes. En fait cet objet représente la fenêtre courante du navigateur et possède de nombreuses propriétés dont un grand nombre permettent l'accès aux différents éléments situés dans la page HTML. En utilisant cet objet, ses propriétés, ses méthodes, nous allons pouvoir agir directement sur, la présentation de la page (couleurs, styles, position des objets), créer de nouveaux  éléments, mais aussi et surtout superviser, gérer et réagir aux événements déclenchés par le lecteur de la page Web. L'objet window est l'objet principal avec lequel  javascript va communiquer.


Ce qu'il faut bien retenir

Les scripts sont des instructions écrites dans un langage informatique et encadrées par des balises spécifiques (<script> et </script>) qui vont nous permettre de construire un site dynamique, réagissant à certains évènements externes (clic de souris, appui sur touche clavier..) ou internes (minuterie ...).

Le langage informatique que nous allons utiliser sera javascript. Ce langage présente les avantages d'être relativement simple à utiliser, et surtout d'être équipé d'une partie communication simple et efficace avec les divers éléments de la page HTML via l'objet window.



Respectons la propriété intellectuelle