Guide pratique et progressif du langage Javascript

Fenêtres, frames, opérateurs, le point

Les fenêtres

J'aurais préféré me faire couper la main plutôt que de vous donner la solution pour faire ouvrir vos fenêtres de pub et d'enquiquiner le monde, mais comme vous êtes sûrement quelqu'un de bien, voici comment présenter le résultat de vos cogitations Javascript sans modifier ou surcharger la page principale.

variable=window.open(nom du fichier html[,nom de la fenêtre[,autres paramètres]]);

Les crochets "[]" indiquent juste que ce qui est inclu est facultatif, ne les tapez pas.

La variable contiendra une éventuelle erreur ou la référence de l'objet fenêtre ouvert et permettra d'atteindre cet objet et ceux qu'elle contient.
Le nom du fichier html (ou adresse complète) sera le contenu affiché de la page, si vous ne désirez pas que quelque chose s'affiche (en plus de ce que votre programme va faire dedans), fabriquez juste un squelette HTML vide avec éventuellement une couleur de fond ou ne mettez pas de nom entre les guillemets.
Le nom de la fenêtre est facultatif.
Les autres paramètres permettent un contrôle approfondi de la nouvelle fenêtre, en demandant (ou pas) des bords, des glissières, une certaine taille, la possibilité ou pas de déplacer la fenêtre etc...
Comme d'habitude ces paramètres sont différents pour netscape et msie (sans parler des autres navigateurs), consultez la méga référence sous "window" à ce sujet.

Exemple:

fenetre2=window.open("vide.html","ma_nouvelle_fenetre","toolbar=no,scrollbars=no");

Pour écrire dans cette nouvelle fenêtre:

fenetre2.document.write("Génial !");

Pour la fenêtre d'origine:

window.document.write("Retour case départ !");

Pour fermer une fenêtre:

fenetre2.close();
window.close();

Mais si vous fermez la fenêtre du script...

Exemple:

<FORM METHOD="" ACTION=""><INPUT TYPE="BUTTON" VALUE="Non !" onClick="fenetre()"></FORM>
Et dans le script: w1 = window.open ('non.html', 'Non', 'height=200, width=120, menubar=no, resizable=no, status=no, toolbar=no, scrollbars=no')

En ce qui me concerne, vous pouvez toujours abuser de la pub, car je surfe avec Javascript désactivé, comme ça, je reçois beaucoup moins de cacaboudin...

Les frames

Je ne l'avoue que sous la torture et pas très fort, les frames qui portent un nom sont atteignables à travers l'objet "top" (sans le caractère "_" devant, comme en HTML), par exemple, pour lire l'état d'un objet dans la frame de nom "frame2" on utilisera: "top.frame2.form.radio.checked". La frame courante et ses sous frames sont aussi atteignables par l'objet "self", celle du niveau en dessus avec "parent", tous ces objets sont en fait des sous-objets de window, pour atteindre une frame dans une autre fenêtre, on utilisera: ma_fenêtre.top.framex
Je ne donnerai pas d'exemple pour ça, pour les détails, voir l'objet window dans la mega reférence (plus bas)...

Les opérateurs

Bien qu'au premier abord il puisse sembler évident pour certaines personnes de faire des comparaisons ou un test d'égalité, il en existe sûrement un plus grand nombre encore qui ne doit pas savoir comment procéder, comme il existe aussi en javascript des opérateurs un peu spéciaux nous allons tous les passer en revue. Désolé de vous imposer une stupide liste, mais elle est courte et vitale.

La base
Symbole	Description	Exemple
`+`	Addition, concaténation de deux chaînes de caractères	`3+4 "Rolling"+"stones"`
`-`	Soustraction	`7-5` Etonnant non ?
`*`	Multiplication	`3*4` Encore plus fort
`/`	Division	`18/3`
`%`	Reste de division (modulo)	`16%3` (3*5=15 retranché de 16, soit 1)
`=`	Affectation d'une valeur	`var total=15`
`++`	Incrémentation (pre ou post)	`a=x++ (a=x puis x=x+1) ou a=++x (x=x+1 puis a=x)`
`--`	Décrémentation (pre ou post)	`a=x-- (a=x puis x=x-1) ou a=--x (x=x-1 puis a=x)`
`==`	Test d'égalité, ne pas confondre avec "=" !	`if (a==15) {} ET NON PAS: if (a=15) {}`
`!=`	Test d'inégalité	`if (a!=15) {}` (si a n'est pas égal à 15, alors...)
`>`	Plus grand que	`if (a>15) {}`
`>=`	Plus grand ou égal à	`if (a>=15) {}`
`<`	Plus petit que	`if (a<15) {}`
`<=`	Plus petit ou égal à	`if (a<=15) {}`
`&&`	ET logique	`if (a==15 && b==2) {}` (si a=15 ET b=2 alors...)
`\|\|`	OU logique	`if (a==15 \|\| b==2) {}` (si a=15 OU b=2 alors...)
`!`	NON (inverse un état true/false)	`if !(a==15 \|\| b==2) {}` (si a ne vaut pas 15 NI b ne vaut 2, alors...)
Beaucoup plus technique et moins fréquent
Symbole	Description	Exemple
`&`	ET binaire	`a&b` (retourne les bits de a ET b à un)
`\|`	OU binaire	`a\|b` (retourne les bits de a OU b à un)
`^`	OU EXCLUSIF binaire	`a^b` (retourne les bits de a OU EXCLUSIF b)
`~`	NON binaire	`~a` (inverse les bits de a)
`<<`	Décalage à gauche de n bits avec intro de 0	a<<n
`>>`	Décalage à droite de n bits avec le signe	a>>n
`>>>`	Décalage à droite de n bits avec intro de 0	a>>>n
Divers
Symbole	Description	Exemple
`() ? X:Y`	Valeur conditionnelle	`Statut= (age>=18) ? "Adulte" : "Mineur"`
`,`	Sépare des valeurs dans une boucle for() {}	`for (x=0,y=0;x<10;x++) {}`
`delete`	Efface un objet ou une proriété	`delete voiture.moteur`
`new`	Crée un objet ou un tableau	`voitures=new Array(10)`
`typeof`	Retourne le type (chaîne/nombre/objet...)	`typeof(zoubida)` retourne "number" pour un nombre, etc...
`void`	Indique l'absence de paramètre en retour	`<A HREF="javascript:void(0)">Rien</A>` :-)

Les opérateurs unaires

Autre saleté pour les débutants: les opérateurs unaire. Pour "gagner du temps" un type a imaginé une nouvelle formulation, ainsi au lieu d'écrire par exemple x=x+1, il s'est dit, x+=1 est bien suffisant. Au final, quand vous verrez dans un programme un truc du genre:
"zopérateur=calcul"
Ne vous cassez pas la tête, traduisez par: "z=zopérateurcalcul", exemple: w*=5 devient w=w*5.

Priorités des opérateurs

Les calculs se font dans le sens de la lecture, mais certains opérateurs sont prioritaires, voire même encore plus prioritaires que d'autres.

Vous l'avez oublié ou peut-être ne l'avez-vous jamais su, mais un calcul simple comme 2+3*6 ne donnera pas un résultat égal à 30, mais 20, car les opérations ne s'effectuent pas seulement dans le sens de la lecture, il existe des conventions qui attribuent la priorité aux divisions et multiplications par rapport aux additions/soustractions, ainsi il ne faut pas faire 2+3=5 et 5*6=30 mais bien d'abord: 3*6=18 puis 18+2=20, les parenthèses, permettent de modifier l'ordre des opération, on écrira alors par exemple: (2+3)*6 pour obtenir d'abord la somme, puis la multiplication. D'autres opérations ont différentes priorités, les voici:

Priorités des opérateurs
Plus faible	`= += -= *= /= %= <<= >>= >>>= &= ^= \|=`
	`?:`
	`\|\|`
	`&&`
	`\|`
	`^`
	`&`
	`== !=`
	`< <= > >=`
	`<< >> >>>`
	`+ -`
	`* / %`
	`! ~ - ++ -- typeof void`
Plus fort	`() [] .`

Avec toutes ces explications sur les opérateurs, peut-être comprendrez-vous mieux maintenant le fonctionnement des routines de validation de formulaire de la page précédente, les boucles elles, vous seront expliquées plus loin, je ne voulais pas faire trop de blabla avant de vous montrer quelque chose de solide et d'utilisable pour ne pas trop vous décourager.

Le point

Nous avons survolé d'une manière supersonique tout ce qui est le Javascript pur, mais pour aller plus loin maintenant il vas falloir regarder tranquillement de quoi est fait un programme, puis beaucoup plus loin, de quoi est fait et comment on écrit un programme Javascript, ce qui est, si j'ose dire (et j'ose car je suis bavard, incorigible, gonflé et ne craignant pas les très mauvais calembours) tout un programme.

Je résume et complète:

Les quatre listes ci-dessus et ce que nous avons vu permettent théoriquement de tout connaître (et de tout changer) de tous les objets javascripts, sans vraiment savoir pour autant comment faire de "colle" interactive, même si cela a été vaguement montré dans les exemples précédents, ce qui permet tout juste d'essayer de modifier un des nombreux programmes que l'on trouve sur internet pour l'adapter à ses besoins.

Grâce à un type génial ayant abattu un boulot absolument phénoménal (non, je ne parle pas de moi), voici encore quatre mega références aussi complètes qu'il est possible de l'être dans ce domaine et qui permettent de trouver relativement facilement presque n'importe quoi que ce soit sur netscrap ou messie (version inderterminée), car comme précédement seriné, ils n'ont pas grand chose en commun à part d'être différents.

Malheureusement, seules les listes sont en français, les références chez netscrade et microcrotte sont en anglais, onc ne me payant pour traduire et maintenir la doc des dits "produits" pour la gaule (sans parler de la traduction gratuite de ces listes qui m'ont déjà coûté beaucoup trop de temps).

L'original (tout en anglais et par ordre alphabétique pur, mais mis à jour)
Ordre alphabétique pur, permet de retrouver facilement n'importe quoi.
Par type, permet de rechercher une commande, une fonction, un objet, etc...
Par description, dernière possibilité de recherche par thème.

Et n'oubliez pas que votre merveilleux navigateur est équipé d'une splendide fonction de recherche qui vous permet de trouver un ou plusieurs mots clef à l'intérieur d'une page web...

Il est temps maintenant, d'oublier un moment le coté objet du Javascript et se consacrer à la fabrication de la colle c'est à dire à la programmation pure.

Et le ciment

Attention, le reste du guide ne prétend pas vous apprendre toutes les finesses de la programmation, ce qui n'a rien à voir avec les connaissances que vous pourriez avoir d'un langage ou d'un autre, y compris celles que vous allez vous faire plus loin, si vous êtes vraiment novice, il vous faudrait théoriquement suivre un cours sur le sujet, mais d'après mon expérience c'est plus simple que la plomberie, qui nécessite obligatoirement de l'adresse, et bien plus facile que d'élever un enfant qui nécessite de la patience et beaucoup d'autres qualités, alors que la programmation ne demande qu'un peu de réflexion et quelques connaissances, mais je m'efforcerais de détailler autant que possible tout en essayant d'éviter de tomber dans l'excès.

Retour Suite

Dernière mise à jour de cette page: 04/09/2001, visiteurs:

depuis le 6 avril 2002