Javascript
Afficher du texte
HomeUpDown

Méthode de l'objet document

Rappelez-vous... Nous avions montré que ce qui apparaît sur votre écran, peut être "découpé" en objets et que Javascript allait vous donner la possibilité d'accéder à ces objets (Un peu de théorie objet).
La page Html qui s'affiche dans la fenêtre du browser est un objet de type document.

A chaque objet Javascript, le concepteur du langage a prévu un ensemble de méthodes (ou fonctions dédiées à cet objet) qui lui sont propres. A la méthode document, Javascript a dédié la méthode "écrire dans le document", c'est la méthode write().

L'appel de la méthode se fait selon la notation :

nom_de_l'objet.nom_de_la_méthode

Pour appeler la méthode write() du document, on notera

document.write();


 
La méthode write()

La syntaxe est assez simple soit

write("votre texte");

On peut aussi écrire une variable, soit la variable resultat,
write(resultat);

Pour associer du texte (chaînes de caractères) et des variables, on utilise l'instruction write("Le résultat est " + resultat);

On peut utiliser les balises Html pour agrémenter ce texte
write("<B>Le résultat est</B>" + resultat); ou
write ("<B>" + "Le résultat est " + "</B>" + resultat)


 
Exemple (classique !)

On va écrire du texte en Html et en Javascript.

    <HTML>
    <BODY>
    <H1>Ceci est du Html</H1>
    <SCRIPT LANGUAGE="Javascript">
    <!--
    document.write("<H1>Et ceci du Javascript</H1>");
    //-->
    </SCRIPT>
    </BODY>
    </HTML>

Ce qui donnera comme résultat :

Fin de la partie prévue pour les débutants --- Début de la partie considérée comme avancée

L'instruction writeln()

La méthode writeln() est fort proche de write() à ceci près qu'elle ajoute un retour chariot
à la fin des caractères affichés par l'instruction. Ce qui n'a aucun effet en Html. Pour faire fonctionner write() ll faut l'inclure dans des balises <PRE>.

    <PRE>
    <SCRIPT LANGUAGE="Javascript">
    <--
    document.writeln("Ligne 1");
    document.writeln("Ligne 2");
    //-->
    </SCRIPT>
    </PRE>

Autrement dit l'emploi de writeln() est anecdotique et on utilise simplement le tag <BR> avec la méthode write().


 
De la belle écriture en Javascript...

variable.big();

L'emploi de .big() affichera la variable comme si elle était comprise entre les balises Html <BIG></BIG>.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Something"; (str est une variable)
    document.write("<BIG>"+str+"</BIG>");
    document.write('<BIG>Something</BIG>');
    document.write(str.big());
    document.write("Something".big());

variable.small();

L'emploi de .small() affichera la variable comme si elle était comprise entre les balises Html <SMALL></SMALL>.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Something";
    document.write("<SMALL>"+str +"</SMALL>");
    document.write("<SMALL>Something" +"</SMALL>");
    document.write(str.small());
    document.write("Something".small());

variable.blink();

L'emploi de .blink() affichera la variable comme si elle était comprise entre les balises Html <BLINK></BLINK>. Pour rappel, cette balise (qui est par ailleurs vite ennuyeuse) n'est valable que sous Netscape 3 et plus.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Something";
    document.write('<BLINK>'+str+'</BLINK>');
    document.write("<BLINK>Something</BLINK>");
    document.write(str.blink());
    document.write("Something".blink());

variable.bold();

L'emploi de .bold() affichera la variable comme si elle était comprise entre les balises Html <B></B>.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Some words";
    document.write("<B>"+str+"</B>");
    document.write("<B>Some words</B>");
    document.write(str.bold());
    document.write("Some words".bold());

variable.fixed();

L'emploi de .fixed() affichera la variable comme si elle était comprise entre les balises Html <TT></TT>.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Something";
    document.write("<TT>"+str+"</TT>");
    document.write("<TT>Something</TT>");
    document.write(str.fixed());
    document.write("Something".fixed());

variable.italics();

L'emploi de .italics() affichera la variable comme si elle était comprise entre les balises Html <I></I>.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Something";
    document.write("<I>"+str+"</I>");
    document.write("<I>Something</I>");
    document.write(str.italics());
    document.write("Some word".italics());

variable.fontcolor(color );

L'emploi de .fontcolor(color) affichera la variable comme si elle était comprise entre les balises Html <FONT COLOR="color"> </FONT>.
Les quatre instructions Javascript suivantes sont équivalentes :

    str1="Some words";
    str2="red";
    document.write("<FONT COLOR='red'>" +str1+"</FONT>");
    document.write("<FONT COLOR='red'>" +"Something</FONT>");
    document.write(str1.fontcolor(str2));
    document.write(str1.fontcolor("red"));

variable.fontsize(x);

L'emploi de .fontsize(x) affichera la variable comme si elle était comprise entre les balises Html <FONT SIZE="x"></FONT> où x est un nombre de 1 à 7 ou exprimé en plus ou en moins par rapport à 0 par exemple -2, -1, +1, +2.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Something";
    x=3;
    document.write("<FONT SIZE=3>" +str+"</FONT>");
    document.write("<FONT SIZE=3>" +"Something</FONT>");
    document.write(str.fontsize(3));
    document.write(str.fontsize(x));

variable.strike();

L'emploi de .strike() affichera la variable comme si elle était comprise entre les balises Html
<STRIKE></STRIKE>.
Les quatre instructions Javascript suivantes sont équivalentes :

    str="Something";
    document.write("<STRIKE>"+str +"</STRIKE>");
    document.write("<STRIKE>Something" +"</STRIKE>");
    document.write(str.strike());
    document.write("Something".strike());

variable.sub();

L'emploi de .sub() affichera la variable comme si elle était comprise entre les balises Html
<SUB></SUB>.
Les quatre instructions Javascript suivantes sont équivalentes :

str="Something";
document.write("<SUB>"+str+"</SUB>");
document.write("<SUB>Something" +"</SUB>");
document.write(str.sub());
document.write("Something".sub());

variable.sup();

L'emploi de .sup() affichera la variable comme si elle était comprise entre les balises Html .
<SUP></SUB>.
Les quatre instructions Javascript suivantes sont équivalentes :

str="Something";
document.write("<SUP>"+str+"</SUP>");
document.write("<SUP>Something</SUP>");
document.write(str.sup());
document.write("Something".sup());


 
Les instructions de formatage de document

Rappelons tout d'abord que ce qui suit est optionnel et que vous pouvez utiliser l'instruction document.write() de façon tout à fait classique.
Soit document.write("<BODY BGCOLOR="#FFFFFF");

document.bgColor

Cette instruction permet de spécifier la couleur d'arrière-plan d'un objet document. On peut employer le nom ou la valeur RGB de la couleur.

document.bgColor="white";
document.bgColor="#FFFFFF";

document.fgColor

Cette instruction permet de spécifier la couleur d'avant-plan (texte) d'un objet document. On peut employer le nom ou la valeur RGB de la couleur.

document.fgColor="black";
document.fgColor="#000000";

document.alinkColor

Cette instruction permet de spécifier la couleur d'un lien actif (après le clic de la souris mais avant de quitter le lien) d'un objet document. On peut employer le nom ou la valeur RGB de la couleur.

document.alinkColor="white";
document.alinkColor="#FFFFFF";

document.linkColor

Cette instruction permet de spécifier la couleur d'un hyperlien d'un objet document. On peut employer le nom ou la valeur RGB de la couleur.

document.linkColor="white";
document.linkColor="#FFFFFF";

document.vlinkColor

Cette instruction permet de spécifier la couleur d'un hyperlien déjà visité d'un objet document. On peut employer le nom ou la valeur RGB de la couleur.

document.linkColor="white";
document.linkColor="#FFFFFF";


HomeDown