Un tout début de Javascript

Le Javascript, comme tout programme, est une suite d'instructions. Pour signaler au navigateur qu'on veux faire du Javascript, on borne nos instructions avec deux marqueurs . Il est fort recommandé ensuite de mettre les instructions Javascript dans un commentaire HTML. Si on ne le fait pas, un navigateur qui ne comprend pas le Javascript va afficher dans la page Web, toutes les instructions Javascript, ce qui sera du plus mauvais effet !!!

Veillez à respecter la syntaxe donnée dans la figure 1, surtout pour la fermeture du commentaire //-->, sinon, certains navigateurs font une erreur Javascript sur le -->. Le double / marque le début d'un commentaire Javascript qui se termine à la fin de la ligne.

<script>
<!--
   instructions javascript
//-->
</script>

Attention, les instructions Javascript sont généralement sensibles à la casse, c'est-à-dire qu'elles font la différence entre majuscules et minuscules. (Si vous faites des tests, souvent ça passe quand même, mais il vaut mieux s'habituer car la règle n'est pas très précise sur ce point.)

Les instructions javascript peuvent être regroupées en fonction. Ceci évite, quand le même code est utilisé plusieurs fois à des endroits différents, de retaper plusieurs fois ce code, on appelle simplement la fonction.

Premier exemple

Prenons un cas simple : Je veux afficher une petite fenêtre qui dit "Salut machin !". Ceci peut se faire par l'instruction alert("Salut Machin!");.

On peut créer une petite fonction que l'on va appeler Hello(). Pour déclarer une fonction, il faut utiliser l'instruction function , puis le nom que l'on veut donner à la fonction. (Attention ne pas utiliser des noms reservés par Javascript !!). Le nom de la fonction en cours de définition est suivi éventuellement de ses paramètres, entre parenthèses. Si une fonction n'a pas de paramètres, son nom est quand même suivi d'une parenthèse ouvrante et une parenthèse fermante. Enfin, les instructions de la fonction sont encadrées par une accolade ouvante et une accolade fermante. Une fonction Javascript peut (et c'est même recommandé) rendre un résultat. On le définit à l'aide de l'instruction return

Il est recommandé de mettre les déclarations de fonction dans l'entete de la page Html, entre les marqueurs et

<script>
<!--
function Hello() {
	alert ("Salut machin !");
}
//-->
</script>

Pour appeler ce code, on peut s'appuyer sur des méthodes de base associées à certains éléments HTML pour la gestion des événements.

Un événement est le résultat d'une action de l'utilisateur sur le clavier ou la souris. Par exemple, lorsque le mouvement de la souris fait passer le curseur au dessus d'un image, ou lorsque l'utilisateur clique sur un lien ou sur un bouton de formulaire, cela génère un événement.

Les méthodes associées aux événements sont essentiellement :
onClick() ,
onMouseOver() ,
onMouseOut() ,
onMouseDown() ,
onKeyPress() ,
onKeyDown() ,
onKeyUp() ,
onLoad() .

Le code qui appellera la fonction peut être par exemple (Essayer ce que ça donne sur l'image de la deuxième ligne) :
<img src="_img/phare.gif" onClick="Hello();">
<img src="_img/phare.gif" onMouseOver="Hello();">

Les objets du DOM

L'un des avantages de javascript par rapport à HTML employé seul est que les scripts peuvent manipuler le document Web et son contenu. Vous pouvez utiliser un script pour charger une nouvelle page dans le navigateur, manipuler des parties de la fenêtre du navigateur et du document, ouvrir de nouvelles fenêtres et même modifier le texte d'une page de manière dynamique et interactive.

Pour effectuer ces opérations, Javascript utilise une hiérarchie d'objets "parents" et "enfants", connue sous le nom de "Document Object Model", le DOM.

Une définition

Extrait de http://openweb.eu.org/dom/

Le DOM est l'interface programmatique (API) qui permet au développeur web d'accéder et de manipuler le contenu d'une page web, aussi appelée document. Il fournit une représentation structurée et orientée objet des éléments et du contenu d'une page avec les méthodes permettant de modifier les propriétés de ces objets. Il fournit aussi des méthodes permettant l'ajout et la suppression de tels objets, permettant ainsi au dévelopeur web de créer du contenu dynamique en modifiant le contenu, la structure et le style du document.

Le DOM fournit aussi une interface de gestion des événements, pour capturer les actions du navigateur et de son utilisateur, et d'y réagir.

Les objets du DOM ont des "propriétés", qui décrivent le document ou la page Web, et des "méthodes", qui permettent des les modifier.

Quand on se réfère à un objet, on utilise le nom de l'objet parent, suivi du ou des noms des objets enfants séparé par des points. javascript stocke par exemple les objets image comme enfants de l'objet document. pour se référer à l'objet phare, enfant de l'objet document, lui-même enfant de l'objet window, on utilisera l'expression suivante :

window.document.phare

L'objet window est le parent de tous les objet que l'on utilise courament.

La figure suivante représente la hiérarchie de cette partie du DOM.

Remarque : Les différentes versions de Javascript proposent différents choix d'objets pour représenter les différentes parties d'un document Web et les fonctionnalités du navigateur. Il n'y a jamais eu de véritable standard en la matière, et il existe toujours des différences entre les navigateurs.

Cependant, depuis Netscape 3.0 et internet Explorer 4.0, tous les objets de base (les objets vus ici) sont globalement pris en charge de la même façon par les 2 navigateurs initiaux et par les autres navigateurs actuels.

Le W3C (World Wide Web Consortium) a récemment mis au point la norme DOM. la norme ne concerne que les objets de base, mais tous les objets, couvrant toutes les composantes d'un document HTML, XML (eXtensible Markup Language) compris.

L'objet Window

L'objet window, qui représente la fenêtre du navigateur, est au sommet de la hiérarchie. Parmi ses principales méthodes et propriétés, se trouvent :

Plusieurs objets window peuvent exister en même temps, chacun représentant une fenêtre du navigateur ouverte. Les cadres (frames en anglais) sont également représentées par des objets window

Comment désigne-t-on une fenêtre ?

L'objet Document

L'objet document représente un document (ou page) Web. les documents Web sont affichés dans la fenêtre du navigateur. Il n'est donc pas surprenant que les objets document soient des objets enfants des window.

Dans la mesure où l'objet window représente toujours la fenêtre active (celle qui contient le script), on peut utiliser

window.document

pour se référer au document courant, mais on peut aussi simplement utiliser

document

, ce qui renvoie automatiquement sur le document de la fenêtre active.

Si plusieurs fenêtres ou plusieurs cadres sont ouverts, il existe plusieurs objets window, et un objet document pour chacun d'eux. Pour utiliser un document d'une autre fenêtre que la fenêtre courante, on doit utiliser la première méthode, qui permet de désigner la fenêtre concerné, suivi du nom du document.

Quelques propriété d'un objet document comprennent des informations générales sur le document courant :

Les méthodes les plus simples de l'objet document sont par exemple :

On ne peut appliquer ces méthodes qu'à l'intérieur de la page Web. Elles sont exécutées lors du chargement de la page.

Appel du code Javascript

Depuis Netscape 3.01, vous avez la possibilité de mettre vos scripts JavaScript dans des fichiers externes aux fichiers HTML.

Ceci est très pratique si vous utilisez le même script dans plusieurs page. Quand vous modifiez votre script, vous n'êtes plus obligé de modifier toutes les pages.

Pour utiliser cette fonctionalité, il faut d'abord modifier les caratéristiques du serveur web qui "sert" vos pages.

Les fichiers de code Javascript prennent l'extension .js . Pour que cette extension soit reconnue par le serveur, vous devez l'en "informer", ce qui se fait par l'intermédiaire des "types mimes" en rajoutant la ligne

AddType application/x-javascript .js 
dans un fichier de configuration du serveur. Pour cela,

D'autre part, comme dit précédement, votre "script" doit être contenu dans un fichier suffixé .js , par exemple "monfichier.js" et les pages HTML qui fonty appel à ce code doivent contenir la ligne :

<SCRIPT SRC="monfichier.js" LANGUAGE="javascript"></SCRIPT>

Le fichier "monfichier.js" ne doit pas contenir les balises <SCRIPT> et </SCRIPT>, mais directement du code javascript.

Remarques

Sur l'expression "un script JavaScript" :

C'est assez difficile à prononcer, mais il ne faut pas faire l'élision de la partie du mot "script" de "JavaScript". En effet, le language Javascript ne doit pas être assimilé au language Java, ce dernier reposant fondamentalement sur le concept de machine "virtuelle", rendant le code exécutable sur toute machine physique que ce soit un PC sous Windows, ou Linux ou un Mac, alors que le langage JavaScript est basé sur l'utilisation de classes d'objets dépendante du navigateur. - voir ../../../cours/M1B2/Programmation/1_introduction/lang-objet.html).

Sur la dépendance du code Javascript vis à vis du navigateur

De nombreuses classes d'objets JavaScript dépendent du navigateur utilisé par le visiteur.

C'est pourquoi, on trouve souvent des codes Javascript qui servent à identifier automatiquement le logiciel-client (navigateur), de façon à choisr d'utilser les méthodes qu'il connait pour les classes du DOM.

Par exemple le code :

var IE4 = (document.all && !document.getElementById) ? true : false;
var N4 = (document.layers) ? true : false;
var IE5 = (document.all && document.getElementById) ? true : false;
var N6 = (document.getElementById && !document.all) ? true : false; 

if(IE4){ scriptName="code/ie4.js"; }
if(IE5){ scriptName="code/ie5.js"; }
if(N6){ scriptName="code/n6.js"; }
if(N4){ scriptName="code/n4.js"; }

permet d'include le fichier Javascript qui utilise les classes d'objets adaptées à "Internet Explorer 4", "Internet Explorer 5", "Netscape 4", ou "Netscape 6",

Références et citations

Ci-dessous sont quelques références importantes et des citations extraites de ces pages (en novembre 2009) :

https://developer.mozilla.org/fr/Référence_du_DOM_Gecko - https://developer.mozilla.org/en/Gecko_DOM_Reference - https://developer.mozilla.org/en/DOM/document
la Référence du DOM Gecko, Gecko étant le composant logiciel de navigateurs Mozilla, Firefox et Netscape 6+ qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple window etc.) dans le contexte des pages Web et de l'interface applicative (ou chrome) du navigateur.
Ce site liste toutes les proporiétés et les méthodes des objets (window, document, élément, event, style, élément HTML form, élément HTML table, ...) avec leur état (par exemple : déprécié, nouveau dans Firefox 3...).
Les liens vers les objets pointent généralement dans le vide dans la page en français, alors qu'il y a du contenu dans les pages anglaises. De plus, les pages anglaise contiennent plus d'informations.
https://developer.mozilla.org/index.php?search=dom&language=fr
Qu'est-ce que le DOM ? (en français) : Le « Document Object Model », ou modèle objet de document, est une API pour les documents HTML et XML. Il fournit une structure de représentation du document, vous permettant de modifier son contenu et sa présentation visuelle.
https://developer.mozilla.org/fr/Le_DOM_et_JavaScript
Liens entre le DOM, le javascript, et DHTML : Les effets visuels comme le déplacement de calques au sein de la page, l'affichage ou non de certaines sections, les menus déroulants, etc. sont souvent appelés « DHTML » ou « Dynamic HTML ».
JavaScript est un « langage de scripting objet » à l'origine développé chez Netscape Communications Corp. par Brendan Eich, qui est aujourd'hui l'un des leaders du projet Mozilla. JavaScript n'est pas du « Java interprété », [même si sa ] syntaxe de base est intentionnellement similaire à Java et C++
https://developer.mozilla.org/en/About_JavaScript
Page de Javascript de Mozilla (en anglais) : JavaScript is the Netscape-developed object scripting language used in millions of web pages and server applications worldwide. Netscape's JavaScript is a superset of the ECMA-262 Edition 3 (ECMAScript) standard scripting language, with only mild differences from the published standard. [...] This engine, code named SpiderMonkey, is implemented in C.
https://developer.mozilla.org/en/A_re-introduction_to_JavaScript
A re-introduction to JavaScript : parcours "à la" manuel de référence des spécificités syntaxiques et lexicales du langage javascript, indépendament du DOM
https://developer.mozilla.org/fr/À_propos_du_Document_Object_Model
À propos du Document Object Model : Le Document Object Model, ou modèle objet de document, est une API pour les documents HTML et XML. Le DOM fournit une représentation structurelle du document, permettant de modifier son contenu et sa présentation visuelle. Fondamentalement, il relie les pages Web aux scripts et langages de programmation.[...]
Le World Wide Web Consortium établit un standard pour le DOM, appelé W3C DOM. Il doit permettre, maintenant que les navigateurs les plus importants l'implémentent correctement, de réaliser de puissantes applications multinavigateurs. [...]
« Dynamic HTML » (DHTML) ou HTML dynamique est un terme utilisé par certains pour décrire la combinaison de HTML, de feuilles de style et de script permettant à des documents d'être animés. [...]
L'interface utilisateur de Mozilla (ainsi que de Firefox et Thunderbird) est construite à l'aide de XUL, un langage d'interface utilisateur basé sur XML. Par conséquent, Mozilla utilise le DOM pour manipuler sa propre interface utilisateur.
http://www.yoyodesign.org/doc/w3c/dom2-core/Overview.html
La spécification du modèle objet de document (DOM) niveau 2 Core : traduction en français des recommandations du 13 novembre 2000 du W3C