Introduction to JavaScript
Chapitre 2
Voici le code:
J'ai du vous dire que JavaScript ne possédait pas de véritable type date. Mais comme vous pouvez le voir
vous pouvez les utiliser sans trop de problèmes. Ceci marche parce que les dates sont représentées en millisecondes
depuis le 1/1/1970 0:0h. Cela semble compliqué, mais il s'agit d'une méthode habituelle pour représenter
les dates sur les ordinateurs. Mais ne vous souciez pas de ça, et faites juste attention aux fonctions qui ne
sont d'ailleurs guère difficiles. Je veux juste vous dire de ne pas douter de ce que je viens d'expliquer.
Un problème courant réside dans l'utilisation de nombres aléatoires avec les langages de programmations
et les langages scripts. Pour l'instant la fonction random de JavaScript n'est pas encore implémentée
mais cela ne saurait tarder, enfin j'espère... Vous devez utiliser donc quelques astuces,
enfin ce ne sont pas exactement des astuces, seulement un moyen très simple que la plupart des
compilateurs utilisent pour calculer des nombres aléatoires. Mais si, mais si, ils les calculent!
Vous prenez l'heure et la date de la machine, puis vous les combinez d'une certaine façon.
Je crois que la version final de JavaScript utilisera la même méthode (à peu de choses près).
Comme je vous l'ai dit précédemment l'heure est stockée sous la forme d'un très grand nombre.
Vous pouvez utiliser ce nombre pour effectuer certains calculs, puisqu'il change tout le temps le résultat semble aléatoire ce qu'il n'est pas.
Par exemple, il vous est possible de calculer son sinus, puis d'utiliser sa valeur absolue. Ceci vous
fournira un nombre compris entre 0 et 1. Puisque le temps change à chaque milliseconde, vous ne risquerez pas
d'obtenir deux fois le même nombre (si on les calcule les uns après les autres). Si vous voulez calculer
beaucoup de nombres aléatoires sur une courte durée, vous ne devriez pas utiliser le sinus seul.
Vous obtiendriez des nombres décrivant une courbe sinusoïdale! Ceci n'est pas vraiment aléatoire.
Mais si vous voulez obtenir des nombres aléatoires toutes les 20 secondes, cette fonction convient
parfaitement.
Ceci est un nombre aléatoire:
Voici le code source de cet exemple:
Bien entendu la fonction random présentée ici ne convient pas à tout les desseins.
Il s'agit juste de vous donner une petite idée de leur fonctionnement.
Maintenant je vais vous présenter une fonction que j'ai obtenue de Maynard Demmon.
Il vous suffit de fixer les limites de la variable aléatoire dont vous avez besoin (100 par exemple).
Ainsi vous obtiendrez un 'bon' nombre aléatoire entre 0 et 99. En voici le code:
Créer des fenêtres est une belle caractéristique de JavaScript. Vous pouvez construire de nouvelles
fenêtres, charger un document HTML, naviguer sur INTERNET, et tout ça avec JavaScript. Je vais
vous montrer comment ouvrir une fenêtre et y afficher quelque chose. Si vous pressez ce bouton
vous verrez le résultat de ce que je vais expliquer un peu plus loin.
Pour changer des traditions je n'ai pas écrit Salut! dans cette page...
toolbar
Le nombre de pixels doit être mis à la place de pixels. Grâce à cela, vous pouvez indiquer
au navigateur la taille (largeur et hauteur) de fenêtre que vous désirez.
ATTENTION! Très important: Lorsque vous écrivez quelque chose dans une fenêtre
vous devez toujours mettre une balise <br> après la dernière ligne inscrite.
Sinon vous ne verrez probablement pas la dernière ligne de votre texte. La cause provient du fait
que les navigateurs n'affichent que des lignes complètes et si ce n'est pas le cas il attend la suite.
<img src="mycool.gif" height=100 width=100>
La propriété onMouseOver
Vous pourrez observer la prochaine caractéristique de JavaScript en déplaçant votre pointeur
de souris au-dessus de ce lien. Regardez attentivement la barre d'état au bas de votre navigateur.
Bien entendu vous pouvez combiner ceci avec d'autres fonctions JavaScript.
Si vous passez au-dessus de celui-ci une fenêtre apparaîtra.
Voici maintenant les sources de ces deux effets:
<a href="stupid.php" onMouseOver="window.status='Encore un lien idiot...';
return true">
La seule chose qu'il vous reste à faire c'est d'ajouter la propriété onMouseOver dans votre balise <a>.
La référence 'window.status' vous permet d'écrire dans la barre d'état de votre navigateur.
Comme vous pouvez le voir, il vous suffit de modifier l'intérieur des guillemets. Vous ne pouvez pas
utiliser " à chaque fois, car JavaScript ne serait plus à même d'identifier la chaîne à afficher dans
la barre d'état. Après la chaîne, vous devez absolument écrire ;return true.
Le second exemple fait appel à la fonction alert. Voici son code:
<html>
<head>
<script language="JavaScript">
<!-- Masque
function hello() {
alert("Salut!");
}
// -->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">lien</a>
</body>
</html>
Celui-ci est relativement simple, il utilise la méthode onMouseOver, qui, lors de
son déclenchement, appelle la fonction hello()
D'autres fonctions calendrier
Maintenant je veux vous montrer un autre exemple utilisant des méthodes de calendrier et d'horloge.
Vous avez déjà vu la propriété lastModified à l'oeuvre. Maintenant nous allons afficher
l'heure locale dans une page. Cette méthode obtient la date et l'heure de la machine, donc
si cette dernière est erronée (le 5/17/1983 par exemple), vous obtiendrez un résultat tout aussi
faux. La date et l'heure ne sont pas obtenues à travers Internet (ou par autre chose de semblable).
<script language="JavaScript">
<!-- masque
today = new Date()
document.write("Il est actuellement: ",today.getHours(),":",today.getMinutes())
document.write("
Nous sommes aujourd'hui le: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());
// Fin du masque -->
</script>
Tout d'abord nous avons créé un variable date. Ceci s'est opéré grâce à l'instruction today=new Date().
Si l'on ne spécifie ni heure ni date, l'initialisation se fait avec les valeurs locales qui seront
placées dans la variable today.
Remarquez que nous n'avons déclaré la variable today nulle part. Ceci est une différence
avec Java et la plupart des autres langages de programmations où vous devez spécifier les types
que vous utiliserez avant de vous les utiliser. Nous avons créé un objet temps contenant l'heure et la date locale.
Maintenant non pouvons facilement afficher son contenu dans un document.
Vous devez écrire today devant chaque méthode get... . Sinon le navigateur ne sauras pas
quel objet référencer. La méthode getMonth() renvoie un nombre
entre 0 et 11 (de 0 pour janvier jusqu'à 11 pour décembre). Il suffit donc d'ajouter 1 pour
obtenir le bon mois.
Un truc intéressant auquel vous pouvez penser est de créer une date, celle par exemple où vous avez créé
le document. Ensuite vous calculerez combien de temps après votre document est lu.
S'il est âgé de plus de 10 jours vous pourrez afficher: Hey, ceci est vraiment trop vieux, inutile de le lire!!!
Pour cela vous aurez besoin de récupérer la date actuelle (cf. le script précédent) et d'un objet date.
Ce dernier sera initialisé lors de sa création par une déclaration du type:
docStarted= new Date(96,0,13)
Vous devez spécifier dans cet ordre l'année, le mois (n'oubliez pas d'ôter 1!) et enfin
le jour. Vous pouvez aussi indiquer l'heure:
docStarted= new Date(96,0,13,10,50,0)
Les premiers nombres demeurent la date. Ils sont suivi des heures, des minutes et des secondes.
Nombres aléatoires
<html>
<head>
<script language="JavaScript">
function RandomNumber() {
today = new Date();
num= Math.abs(Math.sin(today.getTime()%360));
return num;
}
</script>
</head>
<body>
<script language="JavaScript">
<!--
document.write("Ceci est un nombre aléatoire:", RandomNumber());
// -->
</script>
</body>
</html>
function random() {
today = new Date();
num = today.getTime();
num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
return num;
}
Créer des fenêtres
Voici la source:
<html>
<head>
<script language="JavaScript">
function WinOpen() {
msg=open("","NouvelleFenetre","toolbar=no,directories=no,menubar=no");
msg.document.write("<HEAD><TITLE>Yo!</TITLE></HEAD>");
msg.document.write("<CENTER><h1><B>Ceci est vraiment COOL!</B></h1></CENTER>
Comme toujours, une fonction est appelée par un bouton. La fonction WinOpen() crée une nouvelle
fenêtre en appelant la méthode open. Les premiers guillemets contiennent l'URL de la page, vous indiquez ici
l'adresse du document HTML que vous voulez charger. Si vous les laissez vide aucune page n'est chargée
et vous pouvez y écrire grâce à JavaScript!
Les guillemets suivants contiennent le nom de la fenêtre, vous pouvez y écrire ce que vous désirez car
cela n'aura aucun effet sur nos exemples. Toutefois vous obtiendrez un message d'erreur en écrivant
Nouvelle Fenetre (avec un espace entre les deux mots. Netscape vous indiquera autre chose mais j'ai passé
une demi-heure à chercher l'erreur!). Les guillemets suivants spécifient les propriétés de la fenêtre. Ceci est
vraiment intéressant car vous pouvez choisir si vous voulez une barre d'outil, des ascenseurs (scrollers)...
Si vous écrivez toolbar=yes une barre d'outil sera présente. Certaines des propriétés listées ci-dessous
peuvent changer. Vous pouvez spécifier toutes les propriétés possibles. Vous devez les référencer de la manière
décrite précédemment. Il est possible de remplacer "yes" par "no".
Voici la liste de ce que vous pouvez modifier dans vos pages:
");
}
</script>
</head>
<body>
<form>
<input type="button" name="Button1" value="Pressez moi" onclick="WinOpen()">
</form>
</body>
</html>
location
directories
status
menubar
scrollbars
resizable
copyhistory
width=pixels
height=pixels
Après avoir ouvert et appelé cette fenêtre msg (juste devant l'appel à la méthode open),
vous pouvez écrire dedans simplement avec du code HTML! Ceci est une très bonne chose.
Vous pouvez construire un document HTML utilisant les renseignements fournis par les utilisateurs
dans un formulaire précédant. Par exemple, dans le formulaire d'une première page l'utilisateur inscrit son nom,
puis vous en créez une nouvelle contenant son nom! Quelques mois auparavant, ceci n'était pas possible sans
un script CGI!
Une autre chose importante:
Si vous désirez y insérer des images, pensez à spécifier les paramètres height et width
de la balise <img>. Dans le contraire, vous ne les verrez au mieux pas apparaître s'il n'y a point eu de crash système.
Ceci peut créer de très étranges problèmes dont vous suspecterez pas l'image en tant que cause.
Ecrivez donc toujours quelque chose de ce type pour ne rencontrer aucun problème: