Javascript

Ce cours ne nécessite aucune connaissance informatique préalable, excepté celle du HTML. Le Javascript est un langage de programmation appliqué aux objets d'un document HTML.

L'objet document


L'objet document possède un grand nombre de méthode nous permettant d'interagire avec la page affiché dans le bloc défini par les balises ouvrante et fermante "BODY".

Liste des propriétés de l'objet :

alinkColor valeur de l’attribut ALINK
anchors tableau représentant tous les marqueurs <A> dans un document
bgColor valeur de l’attribut BGCOLOR
cookie spécifie un “cookie”
fgColor valeur de l’attribut TEXT
forms tableau représentant tous les formulaires dans un document
lastModified date de dernière modification d’un document
linkColor valeur de l’attribut LINK
links tableau représentant tous les liens (links) dans un document
location l’URL du document
referrer URL du document qui a appelé le document courant
title contenu du marqueur <TITLE>
vlinkColor valeur de l’attribut VLINK

Liste des Méthode de l'objet :

clear efface le contenu et le document d’une fenêtre
close ferme un document
open ouvre un document
write écris dans un document
writeln écris dans un document + retour à la ligne

Les objets suivants sont aussi des propriétés de l’objet "document":

anchor Area history link Applet form Image Plugin

Remarque : les événements "onload" et "onunload" spécifiables dans la commande <BODY> sont des événements de l’objet fenêtre (window).

Document - méthode clear
Cette méthode permet de vider (effacer) le contenue d'un document sans refermer la fenêtre. Ne l'utilisez pas, car elle ne semble fonctionner sur aucun des navigateurs actuel. Certain document nous informe qu'elle sera prochainement retiré du Javascript.

Notre exemple créer une nouvelle fenêtre dans lequel il affiche un texte simple et un bouton. Ce dernier, lorsqu'il est activé, efface le document.

<HTML><body>

<FORM>
<INPUT type=button value=Clear
onclick=f.document.clear();>
<INPUT type=button value=OpenClose
onclick="f.document.open();f.document.close()">
</FORM>

<script><!--

var fnt=open("","","width=20,height=20");
fnt.document.open();
fnt.document.write("coucou");
fnt.document.close();

//--></script></body></HTML>

Document - méthode close
Cette méthode nous permet de terminer l'écriture du document. Nous pouvons comparer le document à un fichier séquentiel, et nous utilisons la méthode "open" pour l'ouvrir et "close" pour le fermer. Tant que notre fichier n'est pas refermer, certain navigateur ne vous affiche pas le contenu du document dans la fenêtre.

Notre exemple créer une nouvelle fenêtre dans lequel on affiche un texte simple. Le bouton vous permet de fermer le document.

<HTML><body>

<FORM>
<INPUT type=button value=Close
onclick=f.document.close();>
</FORM>

<script><!--

var fnt=open("","","width=20,height=20");
fnt.document.open();
fnt.document.write("coucou");

//--></script></body></HTML>

Document - méthode open(["typeMime"])

Cette méthode nous permet d'écriture dans un document comme nous le faisons dans un fichier séquentiel. Nous utilisons la méthode "open" pour ouvrir le document (création = destruction) et "close" pour le fermer. Tant que notre fichier n'est pas refermer, certain navigateur ne vous affiche pas le contenu.

A défaut de spécification le typeMime (format de document) "text/html" sera utilisé. La liste des "typeMime" dans l'objet "navigator.typeMimes". Pour plus d'information sur ce sujet, reportez vous à "l'objet navigator - typeMimes".

Notre exemple créer une nouvelle fenêtre dans lequel on affiche un texte simple.
<HTML><body>

<script><!--

var fnt=open("","","width=20,height=20");
fnt.document.open();
fnt.document.write("coucou");
fnt.document.close();

//--></script></body></HTML>

Document - méthode write, writeln

Avec le Javascript, il nous est possible d'écrire (générer) notre document HTML ; cela peut nous permet d'afficher un texte suivant une condition (exemple, suivant le navigateur de visualisation).

Pour cela, nous utiliserons la méthode "write" ou "writeln" ("ln" pour retour à la ligne). Ces méthodes appartient à l'objet "document", et écrive seulement du texte.

Syntaxe : document.write(liste de paramètres);

paramètre représente du texte ; liste signifie que l'on peut mettre plusieurs paramètre séparer par des virgules.

Cette exemple simple affiche le nom du navigateur dans le document.

Pour plus de renseignement sur l'objet navigateur, reportez vous à "L'objet navigator" ###.

<HTML><body><script><!--

document.write(
"Navigateur d'exploration : ",
navigator.appName);

//--></script></body></HTML>

Ce que "write" (ou "writeln") écrit dans le document est interprété par le navigateur ; ainsi write('<B>coucou</B>') affichera : coucou.

Nous pouvons donc affecter des styles à nos écriture. Dans cette idée, quelques méthodes sont à notre disposition. Pour plus d'information sur ces méthodes, reportez vous à "L'objet string" dont-elles proviennent.

méthode / fonction   désignation   balise html
big()   taille suppérieur   BIG
blink()   logo_ns.gif (173 octets) clignotant   BLINK
bold()   gras   B
fixed()   police non proportionnelle   TT
fontcolor(color)   couleur du texte   <FONT COLOR=>  </FONT>
fontsize(taille)   taille du texte   <FONT SIZE=>  </FONT>
italics()   italique   I
small()   taille inferrieur   SMALL
strike()   barré   STRINK
sub()   texte en indice   SUB
sup()   texte en exposant   SUP
Utilisons, arbitrairement, bold() dans un exemple simple. 
<HTML><body><script><!--

document.write(
  "<B>GOWAP</B><BR>",
  "GOWAP".bold());

//--></script></body></HTML>

Attention : vous pouvez créer entièrement un document, et même y placer des scripts ; dans ce dernier cas, veuillez à couper l'écriture de la balise "</script>" en "</"+"script>", afin que l'interpréteur (le navigateur) n'interprète pas ce texte comme étant la fin réel du script. Vous pouvez aussi utilisez le caractère d'échappement : "<\/script>".
<HTML><body><script><!--

st = "<script>document.write"
+"('GOWAP');</"+"script>";

document.write(st);

//--></script></body></HTML>

Document - propriété alinkColor
Dans la balise ouvrante BODY, ALINK nous permet de définir la couleur du lien actif, c'est-à-dire le lien possédant le focus ou cliqué et non lâché (seul ce dernier est valable pour Netscape). Un lien est un élément (texte ou image) encadré par la balise ouvrante et fermante "A". Pour que ce lien est le focus, vous pouvez utiliser la touche tabulation (passage d'un lien à un autre), ou cliquer sans relâcher sur le lien.

Dans notre exemple de droite, les boutons appelle la fonction CoLA (pour CouleurLienActif) avec leur propre nom en paramètre. Ces noms représente le nom des couleurs reconnue pas le navigateur.

<HTML><BODY>

<SCRIPT><!--
function CoLA(Co)
{ document.alinkColor=Co; }
//--></SCRIPT>

<A HREF="#">Lien 1</A> et
<A HREF="#">Lien 2</A>
<FORM>
Couleur du lien actif :<BR>
<INPUT TYPE=button
  NAME=RED VALUE=Rouge
  onClick=CoLA(this.name)>
<INPUT TYPE=button
  NAME=GREEN VALUE=Vert
  onClick=CoLA(this.name)>
<INPUT TYPE=button
  NAME=BLUE VALUE=Bleu
  onClick=CoLA(this.name)>
</FORM></BODY></HTML>

Document - propriété anchors
Cette propriété est un (objet) tableau d'objet "anchor". Il possède donc une propriété "length". Un objet "anchor" représente un lien interne (enclume) qui est définir par la balise ouvrante "<A name='le_nom'>". L'objet "anchors" est donc un recensement des liens internes (enclumes) contenues dans le document HTML.

Notre exemple affiche le contenue de l'objet "anchors".

<HTML><BODY>

<A name=a>a</a>
<A name=b>b</a>

<SCRIPT><!--

Var Ob=document.anchors;

for (i in Ob)
document.write("<br>"
  + i +" = "+Ob[i]);

//--></SCRIPT>

</BODY></HTML>

Document - propriété bgColor
Dans la balise ouvrante BODY, BGCOLOR nous permet de définir la couleur de fond (aussi nommé arrière plan) du document.

Dans notre exemple de droite, les boutons appelle la fonction CoBG (pour CouleurBackGround) avec leur propre nom en paramètre. Ces noms représente le nom des couleurs reconnue pas le navigateur.

<HTML><BODY>

<SCRIPT><!--
function CoBG(Co)
{ document.bgColor=Co; }
//--></SCRIPT>

<FORM>
Couleur du fond :<BR>
<INPUT TYPE=button
  NAME=RED VALUE=Rouge
  onClick=CoBG(this.name)>
<INPUT TYPE=button
  NAME=GREEN VALUE=Vert
  onClick=CoBG(this.name)>
<INPUT TYPE=button
  NAME=BLUE VALUE=Bleu
  onClick=CoBG(this.name)>
</FORM></BODY></HTML>

Document - propriété cookie
Cette propriété est une chaîne de caractère utilisé par le document pour mémoriser des données. Elle peut être stocké provisoirement sur votre ordinateur, si votre navigateur accepte le cookie.

Pour plus d'information sur cette propriété, reportez vous à "Utilisation des cookies". ###

Notre exemple affiche le contenue de la chaîne cookie.

<HTML><BODY>

<SCRIPT><!--

document.write(
document.cookie);
//--></SCRIPT>

</BODY></HTML>

Document - propriété fgColor
Dans la balise ouvrante BODY, TEXT nous permet de définir la couleur du texte du document.

Dans notre exemple de droite, les boutons appelle la fonction CoTXT (pour CouleurTexte) avec leur propre nom en paramètre. Ces noms représente le nom des couleurs reconnue pas le navigateur.

En lecture seul avec Netscape 4.06.

<HTML><BODY>

<SCRIPT><!--
function CoBG(Co)
{ document.bgColor=Co; }
//--></SCRIPT>

<FORM>
Couleur du text :<BR>
<INPUT TYPE=button
  NAME=RED VALUE=Rouge
  onClick=CoBG(this.name)>
<INPUT TYPE=button
  NAME=GREEN VALUE=Vert
  onClick=CoBG(this.name)>
<INPUT TYPE=button
  NAME=BLUE VALUE=Bleu
  onClick=CoBG(this.name)>
</FORM></BODY></HTML>

Document - propriété forms
Cette propriété est un (objet) tableau d'objet "form". Il possède donc une propriété "length". Un objet "form" représente un formulaire qui est définir par les balises ouvrante et fermant "form". L'objet "forms" est donc un recensement des formulaires internes contenues dans le document HTML.

Notre exemple affiche le contenue de l'objet "forms".

<HTML><BODY>

<form name=a></form>
<form name=b></form>

<SCRIPT><!--

Var Ob=document.forms;

for (i in Ob)
document.write(i
+" = "+Ob[i]+"<br>");

//--></SCRIPT>

</BODY></HTML>

Document - propriété lastModified
Cette propriété nous permet de lire (lecture seul) la date de dernière modification du document.

Dans notre exemple de droite, la date de dernière modification est écrite directement dans le document pendant l'interprétation du fichier.

<HTML><BODY>

<SCRIPT><!--

document.write(
document.linkModified);
//--></SCRIPT>

</BODY></HTML>

Document - propriété linkColor
Dans la balise ouvrante BODY, LINK nous permet de définir la couleur des liens (non visités). Un lien est un élément (texte ou image) encadré par la balise ouvrante et fermante "A".

Dans notre exemple de droite, les boutons appelle la fonction CoL (pour CouleurLien) avec leur propre nom en paramètre. Ces noms représente le nom des couleurs reconnue pas le navigateur.

Pas d'effet avec Netscape 4.06.

<HTML><BODY>

<SCRIPT><!--
function CoL(Co)
{ document.linkColor=Co; }
//--></SCRIPT>

<A HREF="#">Lien 1</A> et
<A HREF="#">Lien 2</A>
<FORM>
Couleur des liens :<BR>
<INPUT TYPE=button
  NAME=RED VALUE=Rouge
  onClick=CoL(this.name)>
<INPUT TYPE=button
  NAME=GREEN VALUE=Vert
  onClick=CoL(this.name)>
<INPUT TYPE=button
  NAME=BLUE VALUE=Bleu
  onClick=CoL(this.name)>
</FORM></BODY></HTML>

Document - propriété links
Cette propriété est un (objet) tableau d'objet "link". Il possède donc une propriété "length". Un objet "link" représente saut vers document ou/et une enclume (lien interne d'un document) définit par la balise ouvrante "<A href='doc_ou_enclume'>". L'objet "links" est donc un recensement des liens contenues dans le document HTML.

Notre exemple affiche le contenue de l'objet "links".

<HTML><BODY>

<A href=javascript:;>a</A>
<A href=javascript:;>b</A>

<SCRIPT><!--

Var Ob=document.links;

for (i in Ob)
document.write("<br>"
+ i +" = "+Ob[i]);

//--></SCRIPT>

</BODY></HTML>

Document - propriété location
Cette propriété contient l'adresse URL complète du document.

Dans notre exemple affiche l'URL du document.

<HTML><BODY>

<SCRIPT><!--

document.write(
document.location);
//--></SCRIPT>

</BODY></HTML>

Document - propriété referrer
Cette propriété contient l'adresse URL du document ayant appelé le document actuel.

Notre exemple affiche l'URL du document précédent.

<HTML><BODY>

<SCRIPT><!--

document.write(
document.referrer);
//--></SCRIPT>

</BODY></HTML>

Document - propriété title
Cette propriété, en lecture seulement, contient le titre du document notifié entre les balises ouvrante en fermante "title".

Notre exemple affiche le titre du document.

<HTML><BODY>

<SCRIPT><!--

document.write(
document.title);
//--></SCRIPT>

</BODY></HTML>

Document - propriété vlinkColor
Dans la balise ouvrante BODY, VLINK nous permet de définir la couleur des liens visités. Un lien est un élément (texte ou image) encadré par la balise ouvrante et fermante "A".

Dans notre exemple de droite, les boutons appelle la fonction CoLV (pour CouleurLienVisité) avec leur propre nom en paramètre. Ces noms représente le nom des couleurs reconnue pas le navigateur.

Pas d'effet avec Netscape 4.06.

<HTML><BODY>

<SCRIPT><!--
function CoLV(Co)
{ document.vlinkColor=Co; }
//--></SCRIPT>

<A HREF="#">Lien 1</A> et
<A HREF="#">Lien 2</A>
<FORM>
Couleur des liens visités:<BR>
<INPUT TYPE=button
  NAME=RED VALUE=Rouge
  onClick=CoLV(this.name)>
<INPUT TYPE=button
  NAME=GREEN VALUE=Vert
  onClick=CoLV(this.name)>
<INPUT TYPE=button
  NAME=BLUE VALUE=Bleu
  onClick=CoLV(this.name)>
</FORM></BODY></HTML>


Dernière mise à jour : dimanche 06 janvier 2008