Extrait du document

 JavaScript est un langage interprété par le navigateur. Le JavaScript est un langage « client », c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est chargée. Il a pour but de dynamiser les sites Internet. JavaScript est à ne pas confondre avec Java !

> Retrouvez également tous les cours d'informatique ingénieur.

Plan du document :

I. Présentation du langage JavaScript et des navigateurs

II. Syntaxe

III. Evenements

IV. Utiliser les objets du navigateur

V. Manipuler la page - Les grandes lignes du DOM

VI. Conclusion - Liens divers - Remerciements

I. Présentation du langage JavaScript et des navigateurs

A. JavaScript

Le JavaScript est un langage sensible à la casse (« case sensitive »).

JavaScript est un langage objet : chaque objet possède des méthodes (ou fonctions), des propriétés et .... des objets. Dans une page Web, l'objet le plus élevé dans la hiérarchie est la fenêtre du navigateur : window. Cet objet window contient entre autres l'objet document qui lui même contient tous les objets contenus dans la page Web (paragraphes, formulaires, etc...). En plus de ces objets, il existe des objets créés par l'utilisateur. Les méthodes sont des fonctions qui permettent d'agir sur certaines propriétés de l'objet, les propriétés contiennent les paramètres d'un objet.

Exemple d'un objet voiture : nous allons lui attribuer

• des propriétés : la couleur, la marque, le numéro d'immatriculation ; 

• des méthodes : tourner(), avancer (), changer la couleur () ; 

• des objets : les phares, les pneus. 

Pour résumer une méthode engendre une action, un verbe qualifie une action, une propriété est généralement qualifiée par un nom. 
Dans l'exemple de la voiture une méthode permet de changer la couleur de la voiture, par contre aucune méthode ne nous autorise à changer la marque de cette voiture (ce qui entraînerait une modification des autres propriétés et éventuellement l'apparition ou la disparition de méthodes).

Il en sera ainsi également avec nos objets JavaScript : nous pourrons accéder voire modifier les propriétés (couleur du texte, style de la fonte) des objets grâce aux méthodes.

B. Navigateurs

Liste non exhaustive des navigateurs disponible sur le documetn à télécharger gratuitement. 

Tout irait pour le mieux si ces navigateurs utilisaient pour un même objet, les mêmes propriétés et les mêmes méthodes pour les définir. Ce qui est loin d'être le cas. Par ailleurs, Internet Explorer interprète également le JScript, un JavaScript créé par Microsoft (ActiveX). Nous n'aborderons pas ce langage spécifique à IE.

C. Limites de JavaScript

Le JavaScript est difficilement compatible entre les différents navigateurs. Il faut toujours se décider jusqu'à quel point ça doit être compatible.

Tout le monde n'a pas JavaScript : Il faut toujours que la page contienne l'ensemble de l'information, accessible même sans JavaScript. JavaScript est là pour apporter un plus (ergonomie, dynamisme), mais on doit pouvoir s'en passer.

JavaScript n'est pas sécurisé. Les programmes JS sont exécutés sur le client, on n'est jamais sûr de leurs résultats, il ne faut donc jamais faire confiance à une donnée provenant du client.

II. Syntaxe

Il est fortement recommandé de terminer l'ensemble des instructions JavaScript par un point virgule (même si, en effet, ce n'est pas toujours nécessaire). Les instructions ci-dessous ne se terminent pas par un point virgule :

 ? Cette partie est disponible sur le document à télécharger gratuitement 

III. Evenements

 Tous les événements commencent par on : onclick, onload, onmouseout, onmouseover.... Ils peuvent être insérés dans les balises HTML du document. Il est vivement conseillé de les écrire en minuscules.

Il arrive souvent que l'un des arguments de la fonction appelée lors d'un événement soit l'objet event (gestionnaire des événements). Le cas le plus classique est lorsque l'on veut connaître la position de la souris. Avec Internet Explorer, l'objet event est contenu dans l'objet window : window.event. Avec Firefox ou Netscape, l'objet event est généré lors d'un événement (onclick par exemple) à la seule condition que celui-ci soit inclus dans la balise HTML. Par conséquent, pour récupérer l'événement produit, il faut que l'objet event soit un paramètre de la fonction.

Cependant, (et c'est un gros avantage) ce code fonctionne également sous Internet Explorer . Il n'est donc pas nécessaire d'ajouter des tests pour savoir s'il faut utiliser le paramètre ev de la fonction ou le gestionnaire d'événements window.event que seul IE comprend.

IV. Utiliser les objets du navigateur

 Script d'affichage des propriétés des objets du document

Ce script affiche les propriétés (et la valeur de ces propriétés) d'un élément choisi dans une liste. Il permet, entre autres, pour un même élément de mettre en évidence les différentes propriétés utilisées par les navigateurs (pour cela il doit être exécuté sur différents navigateurs).

Cet objet représente le navigateur contenant l'objet document. Il est créé lors de l'ouverture du navigateur et contient toutes les propriétés et les méthodes de gestion de la fenêtre. Ses propriétés et ses méthodes peuvent être appelées sans devoir préciser l'objet window.

Cet objet contient les propriétés du navigateur (nom, version, langue, etc...). On utilise de moins en moins souvent cet objet pour identifier la navigateur de l'utilisateur car certaines propriétés peuvent être modifiées (cas d'Opera). On utilisera plutôt certaines propriétés de l'objet document pour réaliser ces tests.

L'objet document regroupe toutes les méthodes de gestion de la page Web. Ses fonctions permettent de cibler un objet (un paragraphe par exemple) pour modifier ses attributs. Pour modifier les attributs d'un élément (paragraphe, lien, etc...), celui-ci doit être au préalable identifié par un identifiant unique (attribut id). L'objet est ensuite ciblé grâce à la méthode getElementById() contenue dans l'objet document. Si l'élément possédant cet id n'existe pas la méthode renvoie null .

 ? Cette partie est disponible sur le document à télécharger gratuitement 

V. Manipuler la page - Les grandes lignes du DO

Le DOM (Document Object Model) est un modèle standardisé par le W3C (World Wide Web Consortium). Ce modèle propose de représenter un document sous la forme d'un arbre. Toutes les balises HTML sont donc des noeuds de l'arbre et les feuilles sont soit des balises sans contenu, soit le texte de la page HTML.

innerHTML est une instruction qui permet de modifier le contenu d'une balise ou d'insérer un objet dans la page.

Une image sera insérée dans le paragraphe. Néanmoins, cette méthode présente quelques inconvénients lorsqu'il s'agit de modifier le contenu d'un formulaire (balise form). Lors de l'envoi du formulaire, les valeurs des objets créés via innerHTML ne sont pas toujours transmises au serveur. C'est pour cette raison qu'il est préférable d'utiliser les méthodes gérant les noeuds.

 ? Cette partie est entièrement disponible sur le document à télécharger gratuitement 

VI. Conclusion - Liens divers - Remerciements

Le JavaScript facilite la navigation au sein d'un site Web. Au fil du temps, des améliorations et des fonctionnalités sont apportées (Ajax, par exemple). Cependant, compte-tenu des différences d'interprétation d'un navigateur à un autre, il est conseillé de tester chaque script sur différents navigateurs voire sous différents sytèmes d'exploitation pour assurer une portabilité du code.

.