Fiche DOM : Introduction au DHTML (javascript)
Objet de la fiche
État de la fiche 
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.
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
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
 Parmi 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.
|
