Chapitre 7 Les objets window, string et
math...
7.1 Propriétés et méthodes de
l'objet window
Certaines propriétés
et méthodes de l'objet window ne vous sont pas inconnues : celles des
boites de dialogue avec alert(),
confirm(), et prompt(), et celles du ou des minuteries. Soit
setTimeout() et clearTimeout(). Une autre série ayant trait aux
frames : frames[], length, parent,
opener et top.Une
série a trait à la barre d'état avec status et defaultStatus.
Une série pour l'ouverture et la fermeture d'une fenêtre :
open() et close(). Et
enfin self qui renvoie à la fenêtre
en cours.
7.2 Utilisation de la barre d'état
Avec Javascript, la barre
d'état (petite bande située au bas de la fenêtre du browser
et qui vous informe sur l'état des transferts et des connections) peut
être utilisée pour afficher des messages. Les
propriétés mises en oeuvre sont :
|
Propriété |
Description |
|
|
|
status |
valeur du texte affiché dans la barre
d'état de la fenêtre. |
|
DefaultStatus |
valeur par défaut qui s'affiche dans
la barre d'état. |
Généralement, cet
événement est mis en oeuvre par un onmouseOver() sur un lien hypertexte.
En voici un exemple :
A voir
ici
<HTML>
<BODY>
<A HREF="#" onmouseover="self.status='Votre texte'; return
true;"> A voir ici </A>
</BODY>
</HTML>
Il est indispensable d'ajouter return
true;
7.3 Ouverture et fermeture de fenêtres
Les méthodes mises en oeuvre sont :
|
Méthodes |
Description |
|
|
|
open() |
ouvre une nouvelle fenêtre. |
|
close() |
ferme la fenêtre en cours. |
La syntaxe est :
[window.]open("URL","nom_de_la_fenêtre","caractéristiques_de_la
fenêtre") où URL est l'URL de
la page que l'on désire afficher dans la nouvelle fenêtre (si on
ne désire pas afficher un fichier htm existant, on mettra simplement
''"), et où caractérstiques_de_la
_fenêtre est une liste de certaines ou de toutes les
caractéristiques de fenêtre suivantes que l'on note à la
suite, séparées par des virgules et sans espaces ni passage
à la ligne.
|
Caractéristique |
Description |
|
|
|
toolbar=yes ou no |
Affichage de la barre d'outils |
|
location=yes ou non |
Affichage de champ d'adresse (ou de
localisation) |
|
directories=yes ou no |
Affichage des boutons d'accès
rapide |
|
status=yes ou no |
Affichage de la barre d'état
|
|
menubar=yes ou no |
Affichage de la barre de menus |
|
scrollbars=yes ou no |
Affichage des barres de
défilement.
(scrollbars=no fonctionne mal sous Explorer
3.0) |
|
resizable=yes ou no |
Dimensions de la fenêtre
modifiables |
|
width=x en pixels |
Largeur de la fenêtre en pixels
|
|
height=y en pixels |
Hauteur de la fenêtre en pixels
|
On peut aussi utiliser 1 ou 0 au lieu de yes ou
no.
Remarques :
Cette nouvelle fenêtre va
s'afficher un peu n'importe où sur votre écran. Vous ne pouvez
pas décider de l'endroit exact où elle peut apparaître.
Cependant sous Netscape 4 (sous Javascript 1.2) , ce petit "plus" est
possible.
Sous Microsoft Explorer 3,
l'apparition de la nouvelle fenêtre se fait après une grimace du
browser (il ouvre temporairement une nouvelle fenêtre du browser).
L'usage des nouvelles fenêtres
est assez sympathique en Javascript pour afficher des informations
complémentaires sans surcharger la page (ou fenêtre) de
départ. Cependant, aussi longtemps que l'utilisateur ne ferme pas ces
nouvelles fenêtres, celles-ci restent ouvertes. Le pire est lorsqu'on les
minimise. Pour peu qu'on utilise souvent cette technique, le navigateur se
retrouve avec plusieurs dizaines de fenêtres ouvertes ce qui fait
désordre, ralentit le système et peut finir par le planter.
Veillez donc à toujours faire fermer ces
nouvelles fenêtres.
Voici quelques exemples:
Pour ouvrir un petite fenêtre qui affiche le
fichier test.htm avec un bouton dans la page.
Fichier test.htm :
<HTML>
<BODY>
<H1>Ceci est un test<HI>
<FORM>
<INPUT TYPE="button" value= " Continuer " onClick="self.close()">
</FORM>
</BODY>
</HTML>
où self.close()
fermera la fenêtre courante, ie la nouvelle fenêtre.
Dans la page de départ :
<FORM>
<INPUT
TYPE ="button" value="Ouvrir une nouvelle fenêtre"
onClick="open('test.htm', 'new',
'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
(sans espaces ni passage à la ligne)
</FORM>
Dans la page de départ :
<SCRIPT
LANGUAGE="javascript">
<!--
function new_window() {
xyz="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
//
sans espaces ni passage à la ligne
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE ="button" value="Ouvrir une
nouvelle fenêtre" onClick="new_window()">
</FORM>
Avec ce script, sans intervention de
l'utilisateur, la nouvelle fenêtre se ferme de façon automatique
après 4 secondes. En cliquant sur le bouton, l'utilisateur interrompt
prématurément le compteur et ferme la fenêtre. Avec ce
système, on est certain que le nouvelle fenêtre sera
fermée.
La page test.htm devient testc.htm :
<HTML>
<BODY
onLoad='compt=setTimeout("self.close();",4000)'>
<H1>Ceci est un
test</H1>
<FORM>
<INPUT TYPE="button" value=" Continuer
" onClick="clearTimeout(compt);self.close();">
</FORM>
</BODY>
</HTML>
Dans la page de départ :
<FORM>
<INPUT
TYPE ="button" value="Ouvrir une nouvelle fenêtre"
onClick="open('testc.htm', 'new',
'width=300,height=150,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no')">
(sans espaces ni passage à la ligne)
</FORM>
On ajoute simplement le
"onClick=open..." à la balise <A> du lien ou de l'image. Dans la
page de départ, on a :
<A HREF="#"
onClick="open('testc.htm', '',
'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')">lien de test</A> (sans espaces
ni passage à la ligne)
La fermeture automatique est
particulièrement utile ici car si l'utilisateur clique quand même,
la nouvelle fenêtre disparaît derrière la fenêtre de
départ et risque donc de ne pas être fermée.
On utilise ici onmouseOver. Pour rappel, Javascript 1.0 donc compatible
Explorer 3.0. Dans la page de départ, on a :
<A HREF="#"
onmouseOver="open('testc.htm', '',
'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')">lien de test</A> (sans espaces
ni passage à la ligne)
On utilise ici onmouseOver et onmouseOut.
Pour rappel, onmouseOver est du Javascript 1.1 et ne fonctionne donc pas sous
Explorer 3.0. Dans la page de départ, on a :
<A HREF="#"
onmouseOver="open('test.htm', '',
'width=300,height=150,toolbar=no,location=no,directories=no,status=no,menubar=
no,scrollbar=no,resizable=no')" onmouseOut="self.close()">lien de
test</A>
(sans espaces ni passage à la ligne)
On passe par l'ouverture d'un nouvelle fenêtre
par l'appel d'une fonction. Dans la page de départ :
<SCRIPT
LANGUAGE="Javascript">
<!--
function opnw(){
msg=window.open("","","width=300,height=50,toolbar=no,location=no,directories=no,
status=no,menubar=no,scrollbars=no,resizable=no");
msg.document.write('<HTML> <BODY>' + '<CENTER><H1>Ceci
est un test<H1></CENTER>' + '</BODY></HTML>')
//
sans espaces ni passage à la ligne
}
// -->
</SCRIPT>
7.4 Généralités sur l'objet
string
Intéressons nous à la
manipulation des caractères. On signale une limitation de la longueur
des strings à 50/80 caractères. Cette limitation du compilateur
Javascript peut toujours être contournée par l'emploi de signes +
et la concaténation.
|
Instruction |
Description |
|
|
|
length |
C'est un entier qui indique la longueur de
la chaîne de caractères. |
|
charAt() |
Méthode qui permet d'accéder
à un caractère isolé d'une chaîne. |
|
indexOf() |
Méthode qui renvoie la position d'une
chaîne partielle à partir d'une position déterminée
(en commençant au début de la chaîne pricipale soit en
position 0). |
|
LastIndexOf() |
Méthode qui renvoie la position d'une
chaîne partielle à partir d'une position déterminée
(en commençant à la fin soit en position length moins
1). |
|
substring(x,y) |
Méthode qui renvoie un string partiel
situé entre l position x et la position y-1. |
|
toLowerCase() |
Transforme toutes les lettres en
minuscules. |
|
toUpperCase() |
Transforme toutes les lettres en
Majuscules. |
7.5 La propriété length
La propriété length
retourne un entier qui indique le nombre d'éléments dans une
chaîne de caractères. Si la chaîne est vide (" "), le nombre
est zéro. La syntaxe est simple : x=variable.length; x=("chaîne de
caractères").length;. La propriété length ne sert
pas que pour les Strings, mais aussi pour connaître la longueur ou le
nombre d'éléments de formulaires, de boutons radio, de cases
à cocher, d'options, de frames "enfants", d'ancres, de etc.
7.6 La méthode CharAt()
Il faut d'abord bien noter que les
caractères sont comptés de gauche à droite et que
la position du premier caractère est 0. La position du dernier
caractère est donc la longueur (length) de la chaîne de
caractère moins 1. Si la position que vous indiquez est
inférieure à zéro ou plus grande que la longueur moins 1,
Javascript retourne une chaîne vide. La syntaxe de charAt() est :
chaîne_réponse =
chaîme_départ.charAt(x); où x est un entier compris
entre 0 et la longueur de la chaîne à analyser moins 1. Notez les
exemples suivants :
|
var str="Javascript";
var chr=str.charAt(0);
var chr="Javascript".charAt(0);
ou var
chr=charAt(str,0);
ou var chr=charAt("Javascript",0); |
La réponse est "J". |
|
var str="Javascript";
var chr=str.charAt(9);
var chr=charAt(str,9); |
La réponse est "t". |
|
var
str="Javascript";
var chr=charAt(str,13); |
La réponse est "" soit vide. |
7.7 Les méthodes indexOf() et lastIndexOf()
La première méthode
renvoie la position, soit x, d'un string partiel (lettre unique, groupe de
lettres ou mot) dans une chaîne de caractères en commençant
à la position indiquée par y. Cela vous permet, par exemple, de
voir si une lettre, un groupe de lettres ou un mot existe dans une phrase.
variable="chaîne_de_caractères";
var="string_partiel";
x=variable.indexOf(var,y);
où y est la position à
partir de laquelle la recherche de gauche vers la droite doit commencer. Cela
peut être tout entier compris entre 0 et la longueur - 1 de la
chaîne de caractères à analyser. Si y n'est pas
spécifié, la recherche commencera par défaut à la
position 0. Si le string partiel n'est pas trouvé dans la chaîne
de caractères à analyser, la valeur retournée sera
égale à -1. Quelques exemples :
variable="Javascript"
var="script"
x=variable.indexOf(var,0);
x vaut 4
variable="VanlanckerLuc&ccim.be"
var="@"
x=variable.indexOf(var);
x vaut -1
La deuxième méthode
est fort semblable à indexOf() sauf que la recherche va cette fois de
droite à gauche (en commençant donc par la fin). La syntaxe ext
en tous points identique sauf que y signale une position située vers la
fin de la chaîne de caractères. x=variable.lastIndexOf(var,y); . Les exemples suivants
montrent la différence entre index0f() et lastIndexOf() : notez que
même lorsqu'on commence à lire de la fin de la chaîne, la
position retournée est comptée depuis le début de la
chaîne avec le comptage commençant à zéro.
variable="Javascript"
var="a"
x=variable.indexOf(var,0); ici x vaut 1 soit la position du
premier a.
x=variable.lastIndexOf(var,9); ici
x vaut 3 soit la position du second a.
7.8 La méthode substring()
La méthode substring() est du
même genre que indexOf(), lastIndexOf() et charAt().Elle sera
particulièrement utile, par exemple, pour prendre différentes
données dans une longue chaîne de caractères.
variable = "chaîne de
caractères"
resultat=variable.substring(x,y)
où resultat est un sous
ensemble de la chaîne de caractère (ou de la variable). Les x et y
sont des entiers compris entre 0 et la longueur moins 1 de la chaîne de
caractères. Si x est inférieur à y, la valeur
retournée commence à la position x et se termine à la
position y-1. Si x est supérieur à y, la valeur retournée
commence à la position y et se termine à la position x-1. En
fait, ceci donne le même résultat et il est équivalent
d'écrire par exemple substring(3,6) ou substring(6,3). Si x est
égal à y, substring() retourne une chaîne vide. Quelques
exemples :
str="Javascript";
str1=str.substring(0,4); str1="Java"; soit les positions 0,1,2 et 3.
str2="Javascript".substring(0,4); str2="Java";
soit les positions 0,1,2 et 3.
str3=str.substring(6,9); str3="rip"; soit les positions
6,7 et 8.
7.9 Les méthodes toLowerCase() et
toUpperCase()
La méthode toLowerCase()
affiche toutes les majuscules d'une chaîne de caractères variable2
en minuscules. L'autre méthode affiche toutes les minuscules d'une
chaîne de caractères variable2 en majuscules.
|
variable2="chaîne
de caractères";
variable1=variable2.toLowerCase(); |
str="JavaScript";
str1=str.toLowerCase();
str1="javascript"; |
L'utilité de ces 2
méthodes ne saute pas aux yeux. Il faut se rappeler que Javascript est
case sensitive. Ainsi une recherche sur Euro ne donnera pas le même
résultat que sur euro ou EUro. Ainsi, pour les bases de données,
il est prudent de tout convertir en minuscules (ou en majuscules). A fortiori,
pour certaines informations des utilisateurs introduites par le biais d'un
formulaire.
7.10 Les méthodes de l'objet math
x=Math.abs(y);
La méthode abs() renvoie la valeur absolue (valeur positive) de
y. Il supprime en quelque sorte le signe négatif d'un nombre.
y = 4;
x =
math.abs(y);
x = Math.abs(4);
x = math.abs(-4); ont comme
résultat x = 4
x=Math.ceil(y); La méthode ceil() renvoie
l'entier supérieur ou égal à y. x=Math.floor(y); La méthode floor() renvoie
l'entier inférieur ou égal à y. Ces fonctions
n'arrondissent pas le nombre.
|
y=1.01;
x=Math.ceil(y); a comme résultat 2. |
y=1.999;
x=Math.floor(y); a comme résultat 1. |
x=Math.round(y); La
méthode round() arrondit le nombre à l'entier le plus proche.
y=20.355;
x=Math.round(y); a comme résultat x=20;
x=(Math.round(y*100))/100; et dans ce
cas x=20.36;
|
x=Math.max(y,z);
La méthode max(y,z) renvoie le plus
grand des
2 nombres y et z. y=20; z=10;
x=Math.max(y,z);
a comme résultat x=20; |
x=Math.min(y,z);
La méthode min(y,z) renvoie le plus
petit des
2 nombres y et z. y=20; z=10;
x=Math.min(y,z);
a comme résultat x=10;
|
x=Math.pow(y,z); La
méthode pow() calcule la valeur d'un nombre y à la puissance
z.
y=2; z=8; x=Math.pow(y,z); a comme
résultat 256.
x=Math.random(); La méthode random() renvoie la
valeur d'un nombre aléatoire choisi entre 0 et 1. Cela ne fonctionne que
sous Unix.
x=Math.sqrt(y); La
méthode sqrt() renvoie la racine carrée de y.
y=25; x=Math.sqrt(y); a comme résultat
x=5;
x=parseFloat("variable"); Cette fonction convertit une
chaîne contenant un nombre en une valeur à virgule flottante. Elle
retourne les chiffres derrière la virgule d'un nombre. Le
résultat risque d'être surprenant si Javascript rencontre autre
chose dans la chaîne que des nombres, les signes + et -, le point
décimal ou un exposant. S'il trouve un caractère
"étranger", la fonction ne prendra en compte que les caractères
avant le caractère "étranger". Si le premier caractère
n'est pas un caractère admis, x sera égal à 0 sous Windows
et à "NaN" sur les autres systèmes.
str0 = '-.12345';
str1 =
'$5.50';
x0 = parseFloat(str0);
x1 = parseFloat(str1);
x0 =
-.12345;
x1 = 0 ou "NaN";
x=parseInt(variable);
Retourne la partie entière d'un nombre avec une virgule.
str='1.2345'; x=parseInt(str); x=1;
x=eval(variable); Cette fonction évalue une
chaîne de caractère sous forme de valeur numérique. On peut
stocker dans la chaîne des opérations numériques, des
opérations de comparaison, des instructions et même des fonctions.
str='5 + 10'; x=eval(str);
a comme résultat x=15;
Pour les matheux :
|
x=Math.PI;
x=Math.sin(y);
x=Math.asin(y);
x=Math.cos(y);
x=Math.acos(y);
x=Math.tan(y);
x=Math.atan(y); |
x=Math.exp(y);
x=Math.log(y);
x=Math.LN2;
x=Math.LN10;
x=Math.E;
x=Math.LOG2E;
x=Math.LOG10E; |
|
