GOWAP - Programmation en Javascript

Dans la plupart des cas, il est plus facile de regarder directement la propriété d'un objet, que de fouiner sur le net à la recherche de documentation. Nous utiliserons pour cela une instruction spécifique :

Le code exécuter lors de l'appui sur le bouton n'est pas le même, mais a exactement la même interprétation.

Avec "var st ='';" nous déclarons une variable nommée "st" et nous l'affectons d'une chaîne vide. Puis, nous utilisons notre boucle "for" qui va travailler avec la variable "t". Cette dernière va prendre successivement le nom des propriétés contenues dans l'objet notifier après le terme "in" ; ici, nous travaillons sur l'objet "document" (par défaut en sélection) contenue par la variable "My_Obj". A chaque affectation de la variable "t", le bloc de code encadré d'accolade est exécuter. Dans ce bloc, nous possédons dans "t" le nom d'une propriété de l'objet exploré. Pour accéder à la valeur de cette propriété, nous accédons à l'objet comme nous le ferions avec un tableau, en précisant l'élément par le contenue de la variable "t" ; ce qui nous donne "My_Obj[t]" (équivalent à "document[t]").

Si "t" a la valeur "title", "document[t]" peut être aussi écrit "document['title'] et "document.title".

Dans le but de charger toutes les images que vous avez besoin en une seule fois, vous pouvez les mémoriser dans des variables ; ainsi, l'interaction sera plus rapide. Cependant, la page ne sera pas fonctionnelle tant que tous vos images ne seront pas chargées.

var img = new Array();
img[0] = new Image(); img[0].src ="logo_ie.gif";
img[1] = new Image(); img[1].src ="logo_ns.gif";

function Set(n)
{ document.my_img.src = img[n].src;}

Set(0);
</script>

Dans la balise "img", je ne désigne pas l'image à afficher. Grâce à cette méthode, nous pouvons affecter l'image par notre fonction "Set' (ici, à la fin de notre script).

Dans le but de charger toutes les images que nous avons besoin en une seule fois, nous pouvons les mémoriser dans des variables ; ainsi, l'interaction en sera plus rapide. Dans notre exemple, nous allons utiliser deux images de tailles différentes ; cela nous permettra de mettre en évidence la notion de dynamisme du document.

my_img.src = img[0].src;
</script>

Dans la balise "img" (première ligne), je ne désigne pas l'image à afficher. Grâces à cette méthode, si vous utilisez un éditeur HTML évolué, il n'indiquera pas la taille de l'image. Ainsi, les images de différentes tailles seront ajustées correctement par le navigateur (visualisez cet effet en déplaçant votre curseur sur l'image). Cependant, il me faut définir l'image de repos : je fais cela avec la dernière ligne du script.

Vous pouvez utiliser la propriété "innerText" d'un balise gras (<B ID=RW><B>) par exemple pour affecter une zone de texte modifiable.

Il peut être intéressant d'offrir un formulaire à vos visiteurs pour qu'ils puissent vous contacter. Voici un exemple de formulaire avec code de vérification de validité avant envoi ; nous vérifions juste que le message n'est pas vide.

<script>
function Verif()
{ return f_mail.Nom.value!=''; }
</script>

<form METHOD="POST" ENCTYPE="text/plain"
ACTION="mailto:gowap@piegeacons.apinc.org"
onsubmit="return Verif();" name="f_mail">

<p>Nom : <input type="text" name="Nom"></p>
<p><input type="submit"><br>
<input type="reset"></p>
</form>

Avec ce code, le formulaire est envoyé seulement si la zone de texte n'est pas vide. Il n'y a pas de message d'erreur, c'est pour la simplicité.

Il peut être utile de pouvoir intercepter les caractères saisis au clavier dans certain cas particuliers. Prenons par exemple une saisie hexadécimale filtrée et mise en majuscule. Voici une méthode :

<script>

function Filtre()
{
 if (event.keyCode >= 97) event.keyCode-=32;
 if (!(  ((event.keyCode >= 48)&&(event.keyCode<=57))
       ||((event.keyCode >= 65)&&(event.keyCode<=70))
       ||(event.keyCode==32)
      )) event.keyCode=0;
}

</script>

<form onkeypress="JavaScript:Filtre();">
<p>Code : <input type="text" size="10"></p>
</form>

Pour écrire des guillemets dans une chaîne de caractères, vous devez le précéder du caractère spécial "\".

<script>
function Aff_msg()
{
alert("\"Coucou\"");
}
</script>

<input type="button" value="Msg" onclick="Aff_msg();">

Il est simple d'empêcher l'utilisation d'un menu contextuel par l'ouverture d'une fenêtre d'information.

<script>
function Bt_2()
{
 if (event.button==2)
  {alert('Pas de propriété.')};
};
</script>

<img src="../../matos/micropro/les_pro.gif"
 onmousedown="Bt_2();">

Le pointeur de la souris peut être localisé par rapport aux objets. Dans l'exemple, nous localisons le pointeur dans l'écran.

<script>
function Aff_xy()
{
 zx.value=event.screenX;
 zy.value=event.screenY;
};
</script>

<table onmouseover="Aff_xy">
...
X : <input type="text" size="10" name="zx">
Y : <input type="text" size="10" name="zy">
...
</table>

<script>
function Aff_val()
{
 n_dx.value=screen.availWidth;
 n_dy.value=screen.availHeight;
 e_dx.value=screen.width;
 e_dy.value=screen.height;
};
</script>

Navigateur

dx :
dy :

Ecran

dx :
dy :

Internet Explorer nous propose un menu "favoris" dans lequel nous pouvons ajouter des adresses (URL) et aussi nous y abonner (mise à jours automatique). Netscape propose en équivalence des favoris, les signets (si vous avez un code pour Netscape, informez moi).

Voici un code permettant d'accéder directement à la fenêtre d'ajout d'adresse.

<a href="javascript:AddFavoris()">Ajouter au favoris</a>

Netscape nous propose une console Javascript qui nous permet de localiser les erreurs d'une page interprété et d'évaluer / interpréter du code immédiat.