Le JavaScript

par **Squall** Lun 1 Mai 2006 - 0:32

1. LE JAVASCRIPT

1.1 Syntaxe (qui change un peu au fil du temps)

Voici après une longue attente, la partie sur le javascript Exclamation

Le javascript permet de combler la principale lacune du HTML à mon avis : il ne permet pas de communiquer entre l'internaute et le webmaster. Alors que le javascript permet d'afficher des boutons, d'entrer des données, etc.
Dans la suite, je mettrais les fonctions Javascript en rouge et gras et les arguments en italique, rouge et gras

1.2 Introduction

Dans Javascript, il y'a Java et Script Laughing

-Java est un langage de programmation récent (début des années 90) basé sur les langages C et C++ déjà puissants. La grande nouveauté de ce langages est qu'il est entièrement portable : une fois compilé, le programme peut être éxécuté sur n'importe qu'elle plateforme (linux, windows, solaris, etc).
-Script est une sorte de langage : les scripts sont des fichiers non compilés qui permettent d'éxécuter des commandes déjà programmées, comme par exemple créer un répértoire et mettre dedans toutes les images présentent dans un autre répértoire 8) .

Le Javasrcipt combine donc ces deux choses : il permet de combler de nombreuses lacunes du HTML, trop statique et ne nécéssite pas de compilation : c'est le navigateur qui exécute les actions correspondantes.

Et maintenant, voyons notre première page :

MAJ : je vous conseille d'utiliser un éditeur de texte plus puissant que le bloc-notes de Windows comme Notepad++ ou Script Edit que vous trouverez facilement sur Internet.
Ces logiciels reconnaissent le langage qui est tapé et colorent syntaxiquement le texte pour plus de facilités. Script Edit est un peu mieux car il permet en plus de connaître toutes les commandes des langages de script tels que le HTML, le JavaScript, le XML, etc Shocked

par **Squall** Lun 1 Mai 2006 - 0:33

2. Les bases du Javascript

La place du code
Tout d'abord, le code Javascript est toujours placé dans la page HTML, et pour le différencier du langage HTML il est placé entre les balises <SCRIPT langage="JavaScript"> et </SCRIPT>. C'est donc aussi simple à la base que le HTML Laughing

Ensuite, on peut le placer n'importe où dans la page HTML, bien évidemment n'importe où entre les balises <HTML> et </HTML>. Il est généralement placé entre les balises <BODY> et </BODY> mais ce n'est pas obligatoire.
Il existe d'autres façon de mettre du code Javascript mais nous verrons cela plus loin.

Les commentaires
De plus comme dans n'importe quel langage il existe des commentaires. Les commentaires du JavaScript s'écrivent de la même façon qu'en C, C++ ou Java. Ils débutent par un double-slash // et finissent à la fin de la ligne.
On peut également placé des commentaires sur plusieurs lignes, entre /* et */.
Cependant il existe une petite subtilité au cas où le navigateur utlisé ne supporte pas le Javascript, ce qui est aujourd'hui très rare. Pour ne pas que le navigateur affiche le code car il ne comprend pas ce que c'est, on le place entre des commentaires HTML . Mais pour que le code Javascript fasse effet si le navigateur le supporte, on place avant la balise de fin de commentaire un double-slash.
Cela donne donc :

<SCRIPT language="JavaScript">

</SCRIPT>

Point virgule
Généralement on place un point virgule à la fin de chaque ligne de code mais ce n'est pas obligatoire. C'est juste par convention puisque le point virgule était déjà présent en C et en C++.

Les guillemets
On peut placer des caractères alphanumériques entre guillemets " " ou ' ' : il n'y a pas de différence. Si on veut afficher l'un de ces caractères, il faut le placer après un slash / ou alors encadrer le texte par les guillemets non utilisés.. Par exemple, on peut écrire "l'université" on écrit 'l/'université'.

La casse
En Javascript, la casse (le fait de respecter les majuscules et les minuscules) est importante. Par exemple si on créer une variable var, ce ne sera pas la même que Var, VaR, vaR ou VAR Exclamation

Cela est seulement valable dans le code Javascript et pas dans les balises HTML qu'on peut insérer dans le code Very Happy

par **Squall** Lun 1 Mai 2006 - 0:33

3. Les variables

Vous trouverez à l'adresse suivante le premier exemple complet de toute cette partie : http://pl.a.free.fr/web/index.html

Afficher n'importe quoi
Pour afficher quelque chose sur la page web, il faut utiliser la commande document.write("texte à afficher");
Pour afficher une boîte de dialogue, voici la commande : alert("texte à afficher");
Pour sauter une ligne, on peut utiliser \n avec la fonction alert ou la balise <br>.
Par exemple document.write("Voici un saut de ligne<br>ici !"); affichera
Voici un saut de ligne
et un autre
ici

On peut également concaténer des chaînes de caractères, c'est à dire les mettre à la suite grâce à l'opérateur +.
Par exemple document.write("je concatène"+" des chaînes de "+"caractères"); affichera
je concatène des chaînes de caractères.
Il ne faut pas oublier les espaces ou alors votre texte sera attaché :
document.write("je concatène"+"des chaînes de"+"caractères"); affichera
je concatènedes chaînes decaractères. Laughing

La déclaration d'une variable
Une variable est une place dans la mémoire qui contient une valeur et qui sert à être réutiliser. Par exemple si l'on veut afficher la date, on peut créer une variable Date qui contiendra la date et pour l'afficher il suffira de l'appeler.

En Javascript, on déclare les variables, c'est à dire qu'on réserve une place dans la mémoire de l'ordinateur, avec le mot var.
Par exemple, pour déclarer la variable Date on écrit var Date.

L'initialisation d'une variable
Mais cette variable ne contient rien : elle n'a pas été initialisée. Il faut donc pour l'utiliser lui donner d'abord une valeur. On fait cela avec l'opérateur = qui n'est pas un opérateur d'égalité dans ce cas mais un opérateur d'affectation. Cette notion d'affectation est très importante dans les langages de programmation.
De plus, les variables en Javascript ont n'importe quel type : on peut mettre des chiffres, des caractères, des chaines de caractères ou textes, ...
Pour mettre la date dans la variable Date, on écrira donc
Date="jeudi 9 février 2006".

On peut également faire la déclaration en même temps que l'initialisation, ce qui donne avec la date
var Date="jeudi 9 février 2006"

On peut également attribuer à notre variable la valeur d'une fonction. La fonction navigator.appCodeName donne le nom du navigateur internet utlisé.
Pour donner cette valeur à la variable NomNavigateur, on écrit donc var NomNavigateur=navigator.appCodeName
Attention à bien respecter les majuscules et minuscules Exclamation

Voici finalement un exemple complet :
lien direct : http://pl.a.free.fr/web/variables.html

par **Squall** Lun 1 Mai 2006 - 0:34

4. Les variables : compléments

Les tableaux

Les tableaux sont quelque chose d'important dans tous les langages de programmation. En effet ils permettent de déclarer plusieurs variables d'un seul coup Exclamation

Ils possèdent également plusieurs dimensions qui correspondent à la largeur, la longeur, etc mais deux suffisent largement pour faire de très bon programmes.

Pour déclarer un tableau, on procède comme ceci :
var tableau = new Array(nombre de cases de la dimension 1, nombre de cases de la dimension 2, ..., nombre de cases de la dimension n); (les paramètres après le premier sont optionels).

Ensuite vient l'initialisation, c'est à dire le remplissage. Il existe pour cela deux méthodes :
-on déclare puis on initialise :
var jours_semaine = new Array(5);
jours_semaine[0]="lundi";
jours_semaine[1]="mardi";
jours_semaine[2]="mercredi";
jours_semaine[3]="jeudi";
jours_semaine[4]="vendredi";
-on déclare et on initialise en même temps :
var jours_semaine = ["lundi","mardi","mercredi","jeudi","vendredi"];

Comme on peut le voir, chaque variable du tableau a un nom différent mais l'indice entre crochets change à chaque fois. De plus cet indice est toujours entre 0 et (nombre de cases)-1. Enfin lorsqu'on initialise en même temps que la déclaration il est inutile de donner la taille du tableau car elle est calculée automatiquement. Je ne sais pas comment utliser cette méthode avec plus d'une dimension Embarassed

Pour un tableau à plusieurs dimensions, les indices sont entre les crochets et séparés par des virgules :
var tableau_3_dimensions = new Array(5,5,5);
tableau_3_dimensions[0,0,0]="première case";
tableau_3_dimensions[4,4,4]="dernière case";

les opérateurs
Voici la liste de tous les opérateurs utilisés en JavaScript suivant le type de variables utilisés.
Les nombres :
+ addition
- soustraction
* multiplication
/ division
% modulo : donne le reste de la division de a par b (3%2=1)

Les textes :
+ concaténation ("e"+"xemples" équivaut à "exemples")

Les comparaisons :
== égal
=== strictement égal
!= différent
!== strictement différent
<= inférieur ou égal
>= supérieur ou égal
< inférieur
> supérieur
La différence entre égal (respectivement différent) et strictement égal (resp. strictement différent) est que strictement égal (resp. strictement différent) test aussi le type : "3"==3 est vrai mais "3"===3 est faux alors que 3==3 et 3===3 sont vrais.

La logique :
&& et
|| ou
! non (inverse)

La logique est quelque chose d'important à comprendre. Voici les tables de vérité des opérateur ET, OU et NON : (V=vrai et F=faux)
A gauche de la flèche se trouvent les entrées et à droite se trouve la sortie. On observe ainsi par exemple que Vrai et Vrai vaut Vrai, que Vrai ou Faux vaut Vrai.

ET
-----------
V V -> V
V F -> F
F F -> F
F V -> F

OU
-----------
V V -> V
V F -> V
F V -> V
F F -> F

NON
----------
V -> F
F -> V

par **Squall** Lun 1 Mai 2006 - 0:34

5. Les instructions conditionelles

La boucle if
La boucle if (ou si en français) permet d'effectuer une opérations en fonction d'une instruction.
Par exemple, je veux afficher 1/x SI x est différent de 0 et "erreur" SINON (ce qui se traduit en anglais par else).
Voici donc comment procéder pour faire cela :
if (x!=0)
{
document.write(1/x);
}
else
{
document.write("erreur");
}

La syntaxe du if est donc la suivante :
if (conditions)
{
actions;
}
else
{
autres_actions;
}

Notez que lorsqu'il n'y a qu'une seule instruction à effectuer, on peut enlever les accolades qui alourdissent le code et cela est valable pourn'importe quelle instruction conditionelle. L'exemple devient alors :
if (x!=0)
document.write(1/x);
else
document.write("erreur");

Le switch
Le switch est un if un peu spécial car tous les cas sont listés et les actions correspondantes sont alors effectuées en fonction du cas présent. Il y'a également un cas par défault, qui correspond au else du if.
Sa syntaxe est la suivante :
switch (variable)
{
case 'valeur1':
actions;
case 'valeur2':
actions;
...
default:
actions;
}

Notre exemple se traduit par un switch de la façon suivante :
switch (x)
{
case 0:
document.write("erreur");
default:
document.write(1/x);
}

La boucle for
La boucle for est très importante car elle permet de répéter une ou plusieurs opérations, comme par exemple pour créer un compteur qui compte de 1 à 10 et affiche les valeurs.
Avant cette partie, vous auriez écrit :
document.write(1);
document.write(2);
...
document.write(10);
Cela est assez long et pénible, surtout lorsqu'il faut compter jusqu'a 10000 par exemple ou lorsqu'il faut effectuer d'autres opérations en fonction des valeurs.
Pour rendre la vie plus facile (les programmeurs sont des fénéants !!!), voici comment l'écrire avec une boucle for :
for (x=1;x<=10;i=i+1)
document.write(x);
Essayez de trouver plus court !!!

Vous l'aurez compris, voici la syntaxe de la boucle for (qui signifie au passage 'pour') :
for (valeur_de_depart;valeur_de_fin;incrémentation)
{
actions;
}

De plus, j'ai utilisé dans l'incrémentation x=x+1. Mathématiquement cela est faux car on aboutit à 0=1. Mais ici le signe égal est un signe d'affectation : on met dans x la valeur de x plus 1. Pour mieux comprendre, remplacez le par une flèche : x<-x+1.
Il y'a d'autres façons plus simple d'écrire cela, mais je ne les écrirais pas car je ne fait pas de cours de programmation et dans n'importe quel tutorial sur internet on peut les trouver.

Enfin, j'ai mis comme valeur de fin x<=10 et pas x=10 car cela ne marche pas, du moins en C, C++, Java et Javascript. La valeur de fin NE DOIT PAS être égale à la variable, c'est à dire qu'il ne faut jamais écrire x=10 ou x='n'importe quoi'.

Le while
Le while est la boucle qui signifie 'tant que j'ai la condition vraie, alors j'éxécute les actions, sinon j'arrête et je passe à la ligne après cette instruction.
Sachant cela, sa syntaxe devient évidente :
while (condition)
{
actions;
}

Elle est utilisé lorsqu'on doit faire une boucle sans connaître la valeur de fin. Voici un petit jeu comme exemple : tant que le nombre x est inférieur à 10, on ajoute 1, sinon si x est supérieur à 10, on enlève 1 :
while (x!=10)
{
if (x<10) x=x+1;
else if (x>10) x=x-1;
}

Ici, peut importe la valeur de x !
De plus j'ai écrit, pour revenir sur le if, else if, qui se traduit par 'sinon alors'. On peut faire cela car c'est équivalent à
else
{
if (x>10) x=x-1;
}
Et on a le droit d'imbriquer les if. J'ai également mis la condition sur la même ligne : cela n'est pas génant car le html et le javascript comprennent le code lorsqu'on l'écrit sur une seule ligne, même si cela devient vite ilisible.

Le do-while
Le do-while est équivalent au while sauf que dans ce cas j'éxécute la boucle AU MOINS UNE FOIS. Cela est pratique lorsq'on veut afficher un menu, ou lorsqu'on attend une valeur donnée par l'utilisateur.
Sa syntaxe est la suivante :
do
{
actions;
} while (condition);
Remarquez le point virgule après le while à la fin : il ne faut surtout pas l'oublier ou c'est la fin du monde car une brèche spatio-temporelle s'ouvrira sur un trou noir qui engloutira la terre !!!
Je rigoles bien sûr, si vous l'oubliez, ça ne marchera pas bien évidemment.

Les instructions break et continue
Ces deux instructions sont très utiles dans les boucles où c'est d'ailleur ici leur seul endroit où elles fonctionnent. Elles permettent d'arrêter la boucle mais de différentes façons, ce qui peut être utile pour éviter un bug ou d'autres choses.

Le break permet de sortir immédiatemment de la boucle, sans rien faire d'autre : on ne passe pas par la case départ et on ne touche pas 2000€ !

Quant à lui, le continue permet de passer par la case départ (et de toucher 2000€ fictifs bien sûr) : le continue va sortir de la boucle sans regarder ce qu'il y'a à la suite de cette instruction mais va revenir au début de la boucle pour recommencer, ce qui peut être utile si vous ne voulez pas effectuer des instructions pour une certaine valeur, comme par exemple l'affichage des valeurs de 1/x :
x=1;
while (1)
{
if (x==0) continue;
else document.write(1/x);
if (x>10) break;
x=x+1;
}
document.write("x vaut normalement 10 maintenant");

Ici, le test du while est 1, or comme 1 est toujours vrai, ma boucle ne va jamais s'arrêter. Mais j'ai prévu cela en utilisant un break si x devient supérieur à 10.
De plus si jamais x=0, je ne suis pas sorti de l'auberge, ou plutôt de la boucle car mon programme va regarder la valeur de x, aller au début de la boucle, regarder la valeur de x, etc.
Remarquez que comme j'ai mis le break après l'affichage, la valeur 1/x où x=11 va s'afficher.
Et pour éviter que ma boucle ne s'arrête jamais, j'ai pensé à dire que x augmente de 1 à chaque fois. A ce propos Script Edit me signale lorsque le script ne s'arrêtera jamais et me demande si je veut quand même l'éxécuter.

L'exemple
Vous trouverez à l'adresse
http://pl.a.free.fr/web/variables&tests.html l'exemple complet.

par **Squall** Lun 1 Mai 2006 - 0:35

6.1 Les Fonctions

Les fonctions
Nous maintenant savons faire beaucoup de choses en Javascript mais notre code n'est pas très beau : ce n'est qu'une suite d'instructions qui s'éxécutent dans l'ordre et qu'on recopie plusieurs fois de suite dans la même page.
Mais heureusement les fonctions existent Exclamation

Les fonctions sont des bouts de programme qu'on écrit qu'une seule fois et qu'on appelle lorsqu'on en a besoin. Les fonctions peuvent tout faire, ont parfois besoin de paramètres et peuvent renvoyer une valeure, par exemple le résultat d'une opération.

Voici la syntaxe des fonctions :
function nom_de_la_fonction(paramètres)
{
instructions à éffectuer;
return valeur;
}

On est pas obligé de retourner une valeur : dans ce cas on enlève la ligne
return valeur; et la fonction est appelée procédure.

Voici un exemple de fonction. Elle prend en paramètres deux nombre et renvoit la valeur de leur addition :
function addition(a,b)
{
add=a+b;
return add;
}

Si je veut maintenant faire l'addition de deux nombres x et y, je procède comme suit :
var x=10;
var y=5;

function addition(a,b)
{
add=a+b;
return add;
}

z=addition(x,y);
document.write(z);

Comme nous pouvons le voir, les variables a et b n'existent que dans le corps de la fonction : les paramètres ne s'appellent pas forcément a et b.
De plus lorsque la fonction renvoie une valeur, il faut affecter à une valeur la fonction : c'est ce que fait l'avant dernière ligne. Mais cela n'est pas valable pour une procédure Exclamation

Enfin, il faut déclarer la fonction et dire ce qu'elle fait AVANT de l'utiliser. C'est bête mais ça peut arriver de la mettre après.

Dernier point : si vous voulez être sûr que votre variable n'est utlisée que dans la fonction, ce qui vous permet d'en nommer plusieures qui auront le même nom dans des fonctions différentes, vous pouvez rajouter this. avant le nom de la variable dès sa création. Pour l'utiliser il faut alors écrire this.nom_de_la_variable

Maintenant c'est à votre tour de créer vos propres fonctions 8)

par **Squall** Lun 1 Mai 2006 - 0:35

6.2 Les objets

Définition des objets

Le C++, Java et Visual Basic .net sont des langages orientés objet. Les langages orientés objets sont un type de langage où on définit des objets qui possèdent plusieurs propriétés. La notion d'objet est compliquée c'est pourquoi des livres entiers en parlent. Mais voici un exemple qui permet de comprendre :
J'ai une voiture. Dans cette voiture je peux :
-demarrer le moteur
-allumer l'autoradio
-baisser les vitres
-ouvrir les portières
-allumer les phares
-allumer les essuis-glaces
-...
Ici, mon objet est la voiture et les propriétés sont ce que je peux faire. Par exemple pour démarrer la voiture j'utiliserais l'objet "voiture" et la propriété "demarrer le moteur". Cela se notera alors voiture.demarrer_le_moteur, le point faisant la séparation entre l'objet et la propriété. (J'ai mis des tirets et pas des espaces car les espaces ne sont pas pris en compte dans la plupart des langages de programmation, voir même dans tous).

Maitenant il fait nuit et il pleut. Je vais donc ouvrir les portières pour rentrer, démarrer le moteur, allumer les phares et les essuis-glaçes puis fermer les portieres et partir.
Voici ce que cela donnera dans un langage orienté objet :
voiture.ouvrir_les_portières
voiture.démarrer_le_moteur
voiture.allumer_les_phares
voiture.allumer_les_essuis-glaçes
voiture.fermer_les_portieres
...

De plus, on peut créer des objets qui sont des sous objets d'un autre objet.
Je vais par exemple modifier la propriété "ouvrir les portières" dans l'objet voiture : elle va devenir l'objet portières et aura comme objets "ouvrir" et "fermer". Ces deux objets auront des propriétés :
"portiere avant droit", "portiere avant gauche", "coffre", "toutes les portieres", etc.

Pour ouvrir la portière du conducteur, je ferais alors voiture.portieres.ouvrir.portiere_avant_gauche !
On a bien trois objets imbriqués les uns dans les autres : voiture, portieres et ouvrir.

Les propriétés et les méthodes

Dans le paragraphe ci-dessus, nous venons de voir ce que sont les propriétés.
Les propriétés des objets sont donc des caractèristiques (couleur, nom, etc).

Mais il existe également des méthodes. La différence entre les méthodes et les objets est bien visible quand on les regarde : write() de l'objet document est une méthode, tandis que appCodeName est une propriété de l'objet navigator !
On remarque donc que les méthodes ont des parenthèses, ce qui signifie qu'elles prennent des arguments. Ce sont donc des fonctions associés à des objets.

Pour en revenir à notre voiture, pour savoir quel est son nom, je tape voiture.nom .
Pour modifier le nom de son propriétaire, je tape voiture.nom_proprietaire("SquallDjidane") .

On peut évidemment combiner les deux, par exemple, en javascript, pour afficher le nom du navigateur que j'utilise je tapes document.write(navigator.appName);
Ici, document et navigator sont des objets.
Par contre, write est une méthode (car il y'a des parenthèses) et appName est une propriété.

L'utilisation des objets

Pour utiliser un objet, c'est très simple : objet.propriete_ou_methode , sans oublier le point bien sûr !
Pour utiliser la propriété (ou la méthode) d'un objet qui est dans un autre objet et même plus :
objet1.objet2. ... .objetn.propriete_ou_methode où objetn peut être objet2, objet100, objet10^100 (10 à la puissance 100, soit 10*10 cent fois ou 1 avec 100 zéros derrière, c'est le fameux googol !)

La création d'objets

En plus des objets déjà donnés en JavaScript, on peut créer soit même des objets. Ainsi l'exemple de la voiture devient tout à fait crédible Wink

Pour cela, il faut créer une variable qui sera notre nouvel objet.
On utilise la commande var nom_variable = new Object(); où l'espace entre new et Object() est à respecter sans quoi il y'aura des erreurs.
Je vais donc créer l'objet voiture : var voiture = new Object();

Maintenant il faut lui associer des propriétés.
La syntaxe à utliser est nom_variable.propriete = valeur;
Je vais lui associer les propriétés marque, nom, nom_proprietaire et annee_creation :
voiture.marque = "Reuno";
voiture.nom = "Cly-au";
voiture.nom_proprietaire = "SquallDjidane";
voiture.annee_creation = 2006;

Enfin, je veux dire à tout le monde sur Internet que j'ai une Reuno Cly-au qui date de 2006 :
document.write("Moi, "+voiture.nom_proprietaire+", j'ai une "+voiture.marque+" "+voiture.nom+" qui date de "+voiture.annee_creation+"<br>");

Et si jamais je la vends, il me suffit de changer la propriété nom_proprietaire et pas toute la ligne à afficher qui est assez longue pour devenir pénible à relire Sad

.

L'utilisation de plusieurs objets à la suite

J'ai donc créer mon objet, mais c'est assez pénible, quand j'ai plein de propriétés, d'écrire à chaque fois voiture.propriete1= ...
voiture.propriete2= ...
voiture.propriete3= ...
...
voiture.propriete10= ...

Pour cela et parceque les programmeurs sont des fainéants Wink

il existe la fonction with() qui permet d'utiliser plusieurs propriétes d'un même objet sans se fatiguer, ou en tout cas un peu moins.
Voici la syntaxe :
with(nom_objet)
{
code à exécuter;
}

Avec mes voitures, je peux alors écrire
with(voiture)
{
marque = "Reuno";
nom = "Cly-au";
nom_proprietaire = "SquallDjidane";
annee_creation = 2006;

document.write("Moi, "+nom_proprietaire+", j'ai une "+marque+" "+nom+" qui date de "+annee_creation+"<br>");
}
Ce qui est quand même plus court !

La création de méthodes

Et les méthodes, comment les créer ?
A vrai dire je n'en sais rien. Mais vu que les méthodes sont des fonction un peu particulière, ce doit être compliqué et de toutes façons des fonctions normales suffisent.

Pour finir

Enfin, j'ai crée l'exemple, qui me parait vraiment clair : c'est un petit exercice sympa à faire. Vous le trouverez sur http://pl.a.free.fr/web/objets.html

PS : au niveau de la coloration syntaxique, j'ai fait le minimum et pas comme j'avais écrit quelques posts plus haut. J'espère que vous ne m'en tiendrez pas rigueur et je pense adopter cela pour le reste : c'est plus simple à écrire Laughing

par **Squall** Lun 1 Mai 2006 - 0:37

7.1 Les objets NAVIGATOR et WINDOW

Ces deux objets sont omnipresents dans une page web et définissent ses propriétés. Ils existent dès qu'une page est ouverte, puisqu'une page internet est une fenêtre (window) ouverte dans un navigateur (navigator).
Voici la liste de leurs propriétés et méthodes :

navigator

Il permet de connaitre les caracteristique du navigateur utilisé.

appCodeName : nom de code du navigateur
appName : nom du navigateur
appVersion : version du navigateur
userAgent : renvoie toutes ces proprietes en une seule fois mais ça n'est pas très utilisable pour faire des tests sur le navigateur utilisé

window

il est parent de tous les objets JavaScript, c'est à dire que window.document.write("") aura le même effet que document.write("") par exemple.
Voici seulement quelques propriétés mais il en existe de nombreuses autres :

defaultStatus : message par défaut ds la barre d'état (tout en bas à gauche du navigateur !)
status : message temporaire dans la barre d'état, par exemple pour le modifier lorsqu'on clique sur un lien

methodes de window

open : ouvre une fenetre
close : ferme une fenetre
alert : ouvre une boite de dialogue
confirm : ouvre une boite de dialogue
prompt : ouvre une boite de dialogue

Bien sûr comme ce sont des méthodes il ne faudra pas oublier de mettre les parenthèses lors de leur écriture Wink

Nous reparlerons de ces trois dernières méthodes plus tard

paramètres de open

Voici la syntaxe à utiliser pour ouvrir une fenêtre avec la méthode open :
window.open("url","nom_fenetre","parametres séparés par des virgules et sans espaces");

Si on ne veut pas mettre de paramètres, on écrit alors window.open("url","nom_fenetre");

Et voici ses paramètres :
directory = yes/no : affiche les boutons de navigation
location = yes/no : affiche le champ d'adresse
menubar = yes/no : affiche la barre des menus
resizable = yes/no : modification autorisée ou non du changement de la taille de la fenêtre
scrollbars = yes/no : affiche les barres de défilement
status = yes/no : affiche la barre d'état
toolbar = yes/no : affiche la barre d'outils
height = (pixels) : définit la hauteur
width = (pixels) : définit la largeur

paramètres de close

Pour fermer une fenêtre, on utilise close, qui peut aussi prendre en paramètre le nom de la fenêtre à fermer. Si vous l'utilisez dans une page parent pour fermer la fenêtre que vous venez d'ouvrir, votre navigateur vous dira que "la page web en cours tente de fermer la fenêtre, voulez vous fermet la fenêtre ?".
Lorsque vous recevez un nouveau MP sur le forum, c'est à partir de ces propriétés que la fenêtre qui vous l'annonce est créée !!!
C'est de plus pour cela qu'on peut donner un nom à la fenêtre : on ferme une fenêtre de la façon suivante
window.close("nom de la fenêtre");

quelques objets de window

L'objet window est parent de plusieurs objets window : history, screen et document par exemple. Nous allons voir les deux premiers.

L'objet history permet de se déplacer dans l'historique de l'internaute, à la manière des boutons "précédent" et "suivant" du navigateur.
Il a les méthodes suivantes où n est un nombre entier :
back(n) : permet de se déplacer de n pages en arrière dans l'historique
forward(n) : permet de se déplacer de n pages en avant dans l'historique
go(n) : avance de n pages dans l'historique si n est positif ou recule de n pages si n est négatif. De plus, si n vaut 0 cela réactualise la page courante et si n est une chaîne de caractères, va à l'adresse qui contient cette chaîne

L'objet screen permet de connaître la largeur ( height ) et la hauteur ( width ) de votre écran, c'est à dire sa résolution.
J'utilise alors window.screen.height pour connaître sa hauteur et window.screen.widht pour connaître sa largeur.

L'exemple

Voici un exemple qui utilise tout cela, enfin presque : http://pl.a.free.fr/web/objets1.html
Si une nouvelle fenêtre ne s'ouvre pas, ne bloquez pas les pubs avec votre navigateur et votre firewall !

par **Squall** Lun 1 Mai 2006 - 0:37

7.2 L'objet Document

L'objet document contient tous les éléments concernant le contenu de la page : images, textes, liens, ...

Propriétés de l'objet document

alinkColor : couleur des liens activés
bgColor : couleur de l'arrière plan
fgColor : couleur du texte
lastModified : dernière modification de la page
linkColor : couleur des liens non cliqués
referrer : pages déjà visitées
title : titre de la page
url : url (adresse) de la page
vlinkColor : couleur des liens cliqués
formName : nom du formulaire dans le document (nous verrons plus loin les formulaires)

Propriétés en lien avec le html

forms[] : tableau des formulaires
images[] : tableau des images
links[] : tableau des liens

Méthodes

clear() : efface tous les éléments d'un document
close() : ferme un document
elementFromPoint(x,y) : indique quel est l'élément situé aux coordonnées (x,y)
getElementByld : retourne le premier élément d'une collection, par exemple le nom de la première image
getSelection : retourne une chaine de caractères contenant le texte de la séléction courante
handleEvent(événement) : invoque l'handle d'un élément spécifié, par exemple le clic de souris sur un lien déclenche l'ouverture d'une fenêtre
write(" expression ") : écrit des expressions html ds le document

Evénements associés

onClick : clic sur le bouton de la souris
onDblClick : double-clic sur le bouton de la souris
onKeyDown : touche du clavier enfoncé
onKeyPress : la touche du clavier enfoncée est relachée
onKeyUp : touche du clavier relachée
onMouseDown : bouton de la souris enfoncé sur l'élément input
onMouseUp : bouton de la souris relaché sur l'élément input
onMouseOver : curseur sur l'objet
onMouseOut : curseur quittant l'objet

Exercice

Tout cela est bien beau, mais comment y utiliser ?
Nous allons ici réaliser un lien qui, lorsqu'on clique dessus, ouvre une nouvelle fenêtre contenant une image.
Et lorsqu'on clique sur cette image, la fenêtre affiche la première fois une boîte de dialogue et se ferme la seconde fois.

Tout d'abord il nous faut créer une image quelconque de taille modérée (100*100 pixels suffisent).
Vous trouverez celle que j'ai fait sur http://pl.a.free.fr/web/objdoc1.jpg
Ensuite il nous faut une fonction qui ouvre une page avec cette image. Appelons la page ouverte IMAGE. La fonction devient alors :
function ouvrir_image()
{
window.open("objdoc2.html","IMAGE","height=130,width=130");
//width=height=130 et non pas 100 car il y'a un blanc entre le navigateur et l'image !
}

Il nous faut également réaliser le lien :
Lorsqu'on clique sur le lien, la fonction ouvrant la fenêtre est appelée.
Ce bout de code n'est pas entre les balises script, puisqu'on va utiliser onClick qui est un ajout
sur le code HTML. De plus, comme c'est un lien on utilise la balise <A></A> mais comme c'est la fonction JavaScript qui se charge du lien on met # pour que l'intérpréteur HTML ne fasse rien.
<A HREF=# onClick=ouvrir_image()>Cliquez ici !</A>

Pour que ça soit plus joli, on va également modifier quelques propriétés de l'objet document :
with(document)
{
alinkColor="orange";
bgColor="pink";
fgColor="white";
linkColor="red";
title="L'objet document en JavaScript"
vlinkColor="orange";
}

Enfin, pour être sûr que le code JavaScript soit bien chargé au chargement de la page, on va le placer, pour la première fois, entre les balises <HEAD></HEAD> !

Nous avons maintenant réalisés la première page : http://pl.a.free.fr/web/objdoc1.html
Passons à la seconde : http://pl.a.free.fr/web/objdoc2.html

Il faut tout d'abord charger l'image : le HTML s'en charge, même si le JavaScript aurait pu faire pareil :
<IMG SRC="objdoc.jpg">

Il faut également mettre le lien autour, qui appelera la fonction :
<A HREF=# onClick=compteur=click_image(compteur) onMouseOver=souris_dessus()><IMG border=0 align="center" SRC="objdoc.jpg"></A>

Et voici toute la partie JavaScript :
<script language="javascript">

</script>

Notez qu'il fera peut-être redimensionner la fenêtre pour voir le statut. De plus Mozilla ne semble pas vouloir afficher le violet de la première page et Internet Explorer ne veut pas afficher le statut "fermeture" Sad

par **Squall** Lun 1 Mai 2006 - 0:38

7.3 L'objet image

L'objet image est un objet important en JavaScript puisqu'il gère ... les images !!
Il permet de travailler dessus ce qui enrichit beaucoup la page web : la présentation peut devenir meilleure en utilisant les outils JavaScript qu'en utilisant les outils HTML.

Propriétés

border : affiche et contrôle l'epaisseur de la bordure
complete : contrôle le chargement de l'image.
height : hauteur
hspace : espace horizontal entre les images
length : nombre d'image sur la page
lowsrc : vignette de l'image
name : nom de l'image
src : nom du fichier image
vspace : espace vertical entre les images
width : largeur de l'image

Utilisation

L'objet image est le fils de l'objet document. Cela veut donc dire que l'objet document est parent de l'objet image.
De plus, souvenez vous que l'objet document possède un tableau des images présentent sur la page.

Pour utiliser les propiétés de l'objet image on écrit donc document.images[n].<propriété> où n est le numéro de la case du tableau ( images[0] par exemple ).

Création de liens avec des images

Je fais ici un petit retour sur le HTML pour vous expliquer comment rendre votre page très jolie avec d'autres liens que les liens bleus.
Lorsqu'on crée une image, on peut définir directement en HTML un lien, ce qui permet de créer sur votre page web un menu avec des images, des images et des images !

Voici directement la syntaxe à utiliser :
<A HREF="lien"><IMG SRC=nom_de_l'image border=0></IMG></A>

J'ai mis border=0 car c'est plus joli comme ça, mais ça n'a pas trop d'importance suivant l'effet désiré.
De plus le JavaScript va permettre, grâce aux propriétés hspace et vspace de définir pour toutes les images l'espace entre elles, ce qui était impossible en HTML.

Si par exemple j'ai n images, il suffit d'écrire une boucle for pour définir tout de suite l'espace entre chaques :

for (i=0;i<n;i=i+1)
{
document.images[n].hspace=3;
document.images[n].vspace=5;
}

Chargement de l'image

Il peut être utile de savoir si l'image a été entiérement chargée. Par exemple si on met l'image d'une voiture et que l'on veut qu'une boîte de dialogue s'ouvre seulement si l'image est complétement chargée.
Pour cela, on utilise la propriété complete.

Cette propriété prends la valeur false lorsque l'image est entiérement chargée et true sinon.
Pour tester le chargement, on utilise donc la syntaxe suivante qui s'avère être très simple :
if (!document.images[0].complete) // je met ! devant l'objet car c'est la négation : VRAI devient FAUX et inversement
{
// code à exécuter;
}

Notez que je n'ai pas écrit document.images[0].complete==false ou !document.images[0].complete==true.
C'est parceque ça ne sert à rien de dire si VRAI == VRAI et non(FAUX)=VRAI

Un menu

L'exemple qui va avec ça est un menu disponible à la page http://pl.a.free.fr/web/objimg.html

par **Squall** Mer 3 Mai 2006 - 0:22

7.4 L'objet formulaire

7.4.1 Présentation sans Javascript

L'objet formulaire fait que le Javascript est plus intéressant que le HTML ! Grâce à lui la communication avec l'internaute s'avère possible.
Il permet par exemple de prendre des informations rentrés par l'utilisateur sur un site de vente en ligne mais il permet également de restreindre l'accès à certaines pages du site grâce à un mot de passe ...
L'objet formulaire gère des boutons radio, des boîtes de saisie, des cases à cocher, etc.

Les bases de la communication

Le Javascript permet de receuillir et de traiter immédiatement des informations. Cependant il faut commencer par bien renseigner les internautes :
vous voulez que ceux qui visitent votre page web vous donnent leur département pour s'abonner à une revue. Mais devront ils le donner sous forme de lettres (isère par exemple) ou sous forme de chiffres (38).

Et si jamais ils se trompent, comment faire pour ne pas créer un bug énorme ? C'est pour cela qu'en plus de l'avertir, le webmaster devra également vérifier, à tout hasard, les informations fournies. Il faudra également lui dire que ça a marché pour l'empêcher de cliquer 10 fois de suite sur le même bouton de peur que l'action correspondante ne se fasse pas ce qui enverra 10 fois son département.

Petit retour vers le HTML

Les formulaires sont présents dans le HTML, même si il faut un autre langage derrière, comme le javascript, pour qu'ils puissent êtres utiles au webmaster : lorsque vous faites vos courses sur internet, ce n'est pas le HTML qui envoie votre commande !
Un formulaire est placé entre les balises <FORM></FORM>.

On trouve ensuite le bouton ou l'autre objet dans une balise <INPUT ...>. Cette balise contient des informations sur le type d'objet mit, sa taille, les événements liés, son nom, sa valeur, ...

Par exemple, voici un bout de code qui demande votre nom, votre prénom, votre age et votre sexe :
<FORM>
<P>Votre nom : <INPUT TYPE="text" name="nom" size="15">
<BR>Votre prénom : <INPUT TYPE="text" name="prenom" size="20">
<BR>Votre âge : <INPUT TYPE="text" name="age" size="1">

<BR>Votre sexe :
<INPUT TYPE="radio" name="sexe" value="masculin">Masculin
<INPUT TYPE="radio" name="sexe" value="feminin">Féminin
</P>
</FORM>

Il est possible d'affecter à cette boîte de saisie une action. Par exemple, onblur="actions()" appelera la fonction actions() lorsque l'utilisateur aura cliqué en dehors de la boîte.
Voici quelques événements intéressants :
onblur : recevra le contrôle lorsque l'utilisateur aura cliqué en dehors de l'élément qui avait le focus jusqu'ici, c'est à dire l'élément séléctionné par l'utilisateur, par exemple suite à un clique de souris.
onfocus : recevra le contrôle lorsque l'utilisateur aura le focus
onchange : recevra le contrôle lorsque l'élément aura perdu le focus après que son contenu ait été modifié. C'est utile pour vérifier la valeur saisie par exemple.

les éléments d'un formulaire : l'élément TEXT

Le premier élément, qui est également le plus utile, est l'élément TEXT, qui permet comme le montre l'exemple ci-dessus d'afficher une zone de saisie de texte.
Voici la balise <INPUT ...> associée : <INPUT TYPE="text" name="nom du formulaire" size="taille en chiffres" value="valeur initiale de la zone de texte">.

On peut également faire plus simple : <INPUT TYPE="text" NAME="nom du formulaire">.
Remarquez que les propriétés peuvent s'écrire indiféramment en majuscules ou minuscules et que leur valeur DOIT ETRE entre guillemets. De plus si l'on ne précise pas la taille celle-ci sera par défaut de 20.

les éléments d'un formulaire : l'élément TEXTAREA

L'élément TEXT est utile lorsque ce qu'on a à saisir n'est pas trop long. Mais dès qu'il faut saisir un texte cela devient pénible avec un élément TEXT. C'est pourquoi l'élément TEXTAREA vient à sa rescousse : il affiche une grande boîte de saisie dont la capacité est de plusieurs lignes.

Voici comment l'utiliser : <TEXTAREA name="nom du formulaire" rows="nombre de lignes" cols="nombre de colonnes">Texte initial, pas obligatoire !</TEXTAREA>
Bien sûr le nombre de lignes et de colonnes est en chiffres et le nombre de lignes est le nombre de lignes visibles : il faudra descendre dans le formulaire pour pouvoir avoir accès à la suite avec la barre de défilement.

les éléments d'un formulaire : l'élément SELECT

L'élément SELECT permet à l'internaute de faire un (ou plusieurs) choix dans une liste défilante.

Voici comment l'utiliser :
<select size="taille" name="nom" multiple>
<option>option 1</option>
<option>option 2</option>
</select>

Cependant, il existe une toute petite variante qui permet de sélectionner plusieurs options à la fois. Il faut pour cela rajouter l'attribut MULTIPLE tout seul dans la balise <select ...>.
Il faut alors appuyer sur CTRL + clic pour selectionner plusieurs choix.

les éléments d'un formulaire : l'élément RADIO et l'élément CHECKBOX

Les boutons radio sont nommés radio car, comme sur une radio, on ne peut en activer qu'un seul à la fois (essayer de recevoir les chaînes de radio des bandes FM et MW à la fois Wink

).
Ils permettent donc de faire une séléction sans que la préscence d'une liste défilante soit nécessaire.

Utilisation : <INPUT TYPE="radio" name="nom" value="valeur qui ne sera connue que par le navigateur">valeur qui sera affichée à l'internaute.

L'élement radio affiche des ronds et on ne peut en cocher qu'un seul à la fois. Par contre l'élément checkbox affiche des carrés et on peut en cocher plusieurs à la fois ! Ici se limite leur différence : ils sont tous les deux affichés de la même façon.

les éléments d'un formulaire : l'élément PASSWORD

l'élement password est comme un élément text à la différence que les caractères affichés sont remplacés dans la boîte de saisie par des astérisques.

les éléments d'un formulaire : les boutons RESET et SUBMIT

Après avoir rempli le formulaire, deux choix s'offrent à nous : l'envoyer (submit) ou recommencer (reset). C'est donc pour cela que ces deux boutons existent !

Utilisation de SUBMIT : <input type="submit" value="texte affiché" onclick="action en cas de clic">

Utilisation de RESET : <input type="reset" value="texte affiché" onclick="action en cas de clic, facultatif">

Comment envoyer le formulaire

Pour dire au navigateur quelle est la façon d'envoie du formulaire, il faut lui préciser dans la balise <FORM>.
Il faut alors lui spécifier : -un mode d'action (GET ou POST) grâce à l'attribut METHOD
-où on l'envoie, ce peut être l'URL d'une routine du serveur ou une adresse e-mail grâce à l'attribut ACTION.
Cependant nous n'allons faire qu'utiliser l'attribut ACTION et ce seulement pour envoyer des e-mails : <FORM ACTION="mailto:adresse_e-m@il" METHOD=POST>.

Après appuye sur le bouton SUBMIT, un mail sera envoyé à l'adresse indiquée avec en pièce jointe un fichier *.ATT !
Il contient les réponses que l'internaute a émis dans le formulaire. Pour les voir, ouvrez le fichier avec le bloc-notes !!!

J'ai ajouté un exemple sur le site habituel :
http://pl.a.free.fr/web/Formulaire.html

par **Squall** Ven 5 Mai 2006 - 19:24

7.4.1 Utilisation de Javascript avec un formulaire

Retour aux sources

Maitenant que nous allons utiliser Javascript avec nos formulaires, il va falloir leur donner un nom pour avoir accès à leurs propriétés et méthodes. La balise <FORM> contient alors en plus l'attribut name="nom du formulaire".

L'objet formulaire

Le Javascript permet un contrôle de la saisie en temps réel, cela permet de mettre à jour une zone de texte instantanément ou de tester tout de suite si les informations entrés sont valides (préscende de l'arobase @ dans une adresse mail par exemple).

L'objet formulaire est désigné par son nom en Javascript et est descendant de l'objet document, puisqu'il est dans un document HTML !
Pour y accéder, on écrit donc document.nom_du_formulaire.propriété_ou_méthode.

Voici quelques propriétés de l'objet formulaire :
action : adresse du destinataire, si envoi; affiche le contenu de l'attribut ACTION de la balise FORM
length : nombre d'objets du formulaire présents sur la page (boutons, zones de saisie, ...)
name : nom du formulaire

Et quelques méthodes :
reset : réinitialiser le formulaire
submit : envoyer le formulaire

Les éléments d'un formulaire

Les méthodes et propriétés ci-dessus ne sont pas très utiles : autant ne faire que du HTML !
Mais heureusement on peut également jouer avec les éléments du formulaire qui ont des propriétés associées. Ces propriétés sont intéressantes car ce sont grâce à elles que l'on peut tester le contenu saisie.

Pour accéder à un élément, il suffit d'utiliser son nom, renseigné dans la balise HTML qui l'a créé :
document.nom_du_formulaire.nom_de_l_element.propriete_ou_methode.

Ensuite, les propriétés sont les attributs de l'élément :
name : nom du formulaire
value : valeur du formulaire
Nous n'utiliserons que ces deux là car on peut tout faire avec ça.

Dans la balise de l'élément, on peut utiliser les attributs "onBlur", "onFocus" et "onChange" pour lancer des fonctions javascript, ce qui va nous permettre de savoir quand démarrer le contrôle des informations.

Exemple 1 : remplissage d'une zone de saisie en fonction du focus

Dans cette exemple, nous allons modifier la propriété value d'un élément TEXT.
Lorsque l'utilisateur cliquera dans la zone de saisie, le message "Clic dans la zone de saisie" apparaîtra. Lorsque l'utilisateur cliquera en dehors, le message "Clic en dehors de la zone de saisie" apparaîtra.
Lorsque l'utilisateur aura changé le contenu, un message contenant le contenu apparaîtra dans une boîte de dialogue.

Tout d'abord, il nous faut le bout de code HTML correspondant :
<FORM name="exemple1">

<INPUT type="text" name="contenu" size="40" value="Cliquez !!!" onBlur="dehors()" onFocus="dedans()" onChange="changement()">

</FORM>

Nous avons défini 3 fonctions Javascript, maitenant il faut les décrire : (je n'ai pas écrit la balise <SCRIPT> pour gagner de la place)
1)
function dehors()
{
document.exemple1.contenu.value="Clic en dehors de la zone de saisie";
}

2)
function dedans()
{
document.exemple1.contenu.value="Clic dans la zone de saisie";
}

3)
function changement()
{
alert(document.exemple1.contenu.value);
}

Exemple 2 : affichage de vos goûts

Dans cette exemple, nous allons afficher dans un élément TEXTAREA vos réponses à un formulaire
Les questions seront :
-pseudo
-art préféré parmi peinture, cinéma, littérature, photographie.

Voici la partie HTML :
<FORM name="gouts">

Votre pseudo : <INPUT type="text" name="pseudo">

<BR>

Votre art préféré : <INPUT type="radio" name="art" value="peinture" onClick="choix('peinture')"> peinture
<INPUT type="radio" name="art" value="sculpture" onClick="choix('sculpture')"> littérature
<INPUT type="radio" name="art" value="photographie" onClick="choix('photographie')"> photographie
<INPUT type="radio" name="art" value="cinema" onClick="choix('cinema')"> cinéma

<BR><BR>
<input type="button" value="Allons-y !" name="OK" onClick="resultat()"><BR>
<TEXTAREA name="bilan" rows="3" cols="70">
</TEXTAREA>

</FORM>

Et la partie Javascript, toute commentée :
// variable globale pour le choix effectué
var monChoix;

// permet de connaitre le choix effectué
function choix(choix)
{
monChoix=choix;
}

// est nécessaire pour ne pas afficher "la cinema" ou "le sculpture" !
function artprefere()
{
var contenu = "";
var comment = "";

if (monChoix=="cinema") contenu = contenu + "le ";
else contenu = contenu + "la ";

contenu = contenu + monChoix;

switch(monChoix)
{
case "peinture" : comment = "Turner, Van Gogh, Monnet, ... Que des grands artistes"
break;
case "sculpture" : comment = "Rodin et ses sculptures impresionnantes !"
break;
case "photographie" : comment = "Ha la photo, ou comment reproduire le monde"
break;
case "cinema" : comment = "Art impur car réunion de plusieurs autres, mais magnifique"
break;
}
contenu = contenu + "\n" + comment; // \n permet un retour à la ligne dans une variable de type texte,
// mais ne fait rien avec la méthode document.write("");

return contenu;
}

// affiche le resultat
function resultat()
{
var contenu = ""; // contenu est la variable qui va contenir le texte à afficher

contenu = contenu + document.gouts.pseudo.value; // on rajoute au contenu la valeur du pseudo
contenu= contenu + ", Votre art préféré est ";

contenu = contenu + artprefere();

document.gouts.bilan.value=contenu; // on affiche le contenu

}

Exemple 3 : test de la validité d'une adresse e-mail

Dans cette exemple, nous allons tester une valeur et en l'ocurrence une adresse e-mail.
Pour cela, il faut savoir que toute adresse e-mail s'écrit de cette façon : nom@domaine.extension.
Nous allons donc tester la préscence de l'arobase @ et de l'espace.

Voici la partie HTML :
<FORM name="test">

Votre adresse e-mail : <INPUT type="text" name="email" size="35" value="nom@domaine.extension">

<BR><BR><input type="button" value="Test de l'adresse e-mail" name="OK" onClick="resultat()">

</FORM>

Et la partie Javascript :
function resultat()
{
var i, arobase, resultat;
i=arobase=resultat=0;

// test de la préscence des caractères
for (i=0; i<document.test.email.value.length; i=i+1)
{
if (document.test.email.value.charAt(i)=="@") arobase=arobase+1; // au cas où il y'ait plusieurs arobases !
if (document.test.email.value.charAt(i)==" ") resultat=1;
}

// action en fonction du test
if (resultat==0 && arobase==1) alert("adresse mail valide");
else if (resultat==1 || arobase!=1) alert("adresse mail invalide : une adresse mail ne peut pas contenir d'espace et doit contenir un caractère arobase @");
}

Site web

J'ai regroupé ces troix exemples à l'adresse http://pl.a.free.fr/web/objform.html

par **Squall** Mar 6 Juin 2006 - 17:29

8. L'interactivité

Description

Dans cette partie, nous allons voir les cookies tant attendus mais également les outils disponibles pour accéder à des pages personalisées ou protégés.

8.1 Juste avant les cookies

La sécurité

JavaScript permet de faire un bon en avant en matière de sécurité sur Internet par rapport à HTML car on peut restreindre l'accès à certaines pages. Mais le niveau de sécurité atteind par Javascript est faible : si le code est dans le fichier HTML il suffit de regarder le code source et si il est dans un fichier annexe il suffit de regarder ce fichier en tapant son adresse dans le navigateur. C'est pour cela que d'autres langages existent pour la renforcer comme PHP.

Par exemple, le document http://www.jesais.pasquoi.fr/code.html me demande un mot de passe pour continuer. Lorsque je regarde le code source de ce fichier, je vois que la partie javascript est dans un fichier code.js.
Pour accéder à ce fichier, je n'ai plus qu'a taper http://www.jesais.pasquoi.fr/code.js et j'ai le mot de passe requis !

Avertir l'utilisateur

Pour avertir l'utilisateur, il existe trois commandes importantes :
-alert("texte à afficher"); affiche une boîte de dialogue avec le texte entre crochets. Seul le bouton OK est présent.
Dans l'exemple ci-dessus, cette commande peut servir à afficher "Mot de passe correct" ou "Mot de passe incorrect".

-confirm("texte"); affiche une fenêtre (ou boîte de dialogue) avec les boutons OK et Annuler. Cela peut servir par exemple pour afficher "Voulez vous continuer ?".
L'interêt de cette fonction est de permettre à l'utilisateur de choisir. Mais le programmeur doit alors tester la réponse : dans un formulaire par exemple, si l'utilisateur appuye sur OK on envoie le formulaire sinon on revient au formulaire (ce qui équivaut à on ne fait rien).

Pour cela, un if est necessaire. De plus la valeur renvoyée par confirm est true si on clique sur OK ou false sinon.
Donc on obtient par exemple :
if ( confirm("Continuer ?")==true ) alert("Oui");
else alert("Non");

Ce qui peut s'écrire également :
if ( confirm("Continuer ?") ) alert("Oui");
else alert("Non");

-prompt("texte"); permet à l'utilisateur de saisir une valeur. Ici "texte" est la question ou la demande concernant la valeur à saisir comme "Entrez votre mot de passe", "Quel est votre age ?", ...
Cela est donc utile pour rentrer un mot de passe : un formulaire se charge très bien de demander l'age de quelqu'un.

Mais le plus intéressant est de tester la valeur rentrée par l'utilisateur. Prompt renvoie un texte entre guillemets.
Il suffit alors de faire un test sur cette valeur comme pour confirm :
if ( prompt("Entrez votre mot de passe :")=="007" ) alert("Mot de passe correct");
else alert("Mot de passe incorrect");

On peut également utiliser une variable pour stocker cette valeur et l'afficher ensuite :
var mdp=prompt("Entrez votre mot de passe :")
if ( mdp=="007" )
{
alert("Mot de passe correct");
alert("Bienvenue "+mdp);
}
else alert("Mot de passe incorrect");

Utliser un autre fichier pour mettre le Javascript

Contrairement à ce que j'ai dit au tout début, on est pas obligé de mettre le code JavaScript dans le document HTML, mais je l'ai dit pour ne pas trop compliquer tout dès le début.
On peut en effet mettre le JavaScript dans un fichier JavaScript portant l'extension .js et le code HTML dans un fichier HTML.

Cela est très utile pour réutiliser ses fonctions.
Par exemple, on a déjà des fonctions mathématiques et des fonctions sur les formulaires. Et maintenant on veut faire un programme qui utilise les maths dans les formulaires. Au lieu de recopier toutes les fonctions utilisés de ces deux fichiers, on les incorpore à notre nouvelle page HTML qui ne contiendra que le code minimum.

De plus, pour ceux qui ont déjà utilisés d'autres langages comme le C, C++, Java, visual basic, cette notion de réutilisation est importante : on trouve de nombreuses classes ou bibliothèques pour un domaine en particulier (graphisme, compression, sécurité, bases de données) sur Internet. Et cela évite de devoir écrire soit même quelque chose de compliqué qui existe déjà sur Internet en plus complet !

Pour incorporer un fichier dans notre page HTML, il faut utliser la balise <SCRIPT SRC="..."></SCRIPT> où l'attribut SRC est le lien de cette feuille, par exemple essai.js .

Voici un exemple :
fichier essai.html :
<html>
<head>
<title>Essai d'un fichier externe</title>
</head>

<body>

<SCRIPT SRC="essai.js"></SCRIPT>

<P>Si vous voyez cette page c'est que le mot de passe est correct !</P>
</body>
</html>

fichier essai.js :
var mdp=prompt("Veuillez rentrer votre mot de passe");

if ( mdp!="007" ) this.location.href="http://www.google.fr";

Ce programme vous renvoie donc sur google si le mot de passe est incorrect et vous laisse sur la page sinon.

par **Squall** Sam 22 Juil 2006 - 14:57

8.2 Les cookies, enfin Wink

8.2.1 Introduction

Qu'est-ce qu'un cookie

Un cookie est un fichier texte crée sur l'ordinateur de l'internaute. Il est de petite taille et ne contient que des caractères. Il n'a donc rien de dangereux sous cet aspect là : il ne peut contenir de virus, cheval de troie, trojan, ...

De plus ce fichier ne contient que des informations entrées par l'utilisateur : il ne peut pas récuperer votre nom, mot de passe, adresse e-mail sauf si ces informations sont communiqués de votre part.

Et pour ceux qui pensent encore que les cookies sont dangereux, il est possible et même très simple de les désactiver dans les options du navigateur.

Les cookies permettent donc de stocker des valeurs, ce qui est impossible en HTML. Les cookies sont souvent utilisés sur les forums, site de vente en ligne, etc.
Sur ces sites, ils vont servir par exemple à stocker le login / mot de passe de l'utilisateur pour qu'il n'ai plus à les rentrer par la suite mais également la date de dernière connexion, le nombre de visites depuis x jours et tout un tas d'informations statistiques.

Voici le contenu de mon cookie du forum ( je l'ai quand même un peu modifié pour des raisons de sécurité ) : a%3A2%3A%3A%22autologinid%22%3Bs%226cff705bff2d74ac18592c716cac502ace3463e18a3b50ffa9b853870da34ab2%22userid%21%3Bi

Où trouver les cookies sur mon ordinateur

Les cookies sont toujours stockés sur l'ordinateur de l'internaute et pas sur le serveur. Cependant suivant le navigateur utilisé ils ne se trouvent pas au même endroit :
- sous Nestcape, ils se trouvent tous dans un fichier Cookies.txt. Il faut alors parcourir ce fichier pour trouver celui qui nous intéresse.
- sous Internet Explorer, ils se trouvent dans le dossier C:\Documents and Settings\login\Local Settings\Temporary Internet Files sous Windows XP. Leur nom commence par "Cookie:".
- sous Mozilla Firefox, je n'ai pas encore trouvé, mais allez dans l'onglet Outils -> Options -> Vie privée -> Cookies. En bas de la fenêtre, cliquez sur "Afficher les cookies" pour les voir.

Que contient un cookie

Un cookie contient une chaîne de caractères. Mais cette chaîne n'est pas dépourvu de sens.
Le cookie contient dans cette chaîne obligatoirement :
- son nom ( par exemple c-est-la-pause.forumpro.fr )
- le texte : la châine de caractère qui contient l'information à stocker
- la date d'expiration du cookie après laquelle il devra être effacer

Il peut également contenir :
- le nom du domaine qui l'a déposé ( c-est-la-pause.forumpro.fr )
- une valeur booléenne (vrai ou faux) qui indique si le cookie est accessible uniquement sur un serveur sécurisé ( préscence de HTTPS au lieu de HTTP dans l'URL de la page visitée et préscence du cadenas en bas à droite du navigateur ).
Si ces variables ne sont pas définies par le créateur du cookie, leur valeur est celle par défaut c'est à dire que la valeur booléenne vaut false et que le nom du domaine est le nom du site qui a déposé le cookie.

Le nom de domaine est une valeur importante car seul le site qui a déposé le cookie peut le lire, ce qui empêche que d'autres sites regardent vos cookies.

par **Squall** Dim 30 Juil 2006 - 19:48

8.2.2 Création et utilisation du cookie

Comment créer un cookie : la chaîne de caractères

En Javascript, les cookies sont très simples. En effet puisque c'est une chaîne de caractère il suffit d'écrire cette chaîne de caractère dans une certaine propriété.
On peut donc mettre facilement les données d'un formulaire dans le cookie.

Le plus simple pour voir comment créer un cookie est de voir le plus compliqué. Voici une chaîne de caractère contenant toutes les informations possibles que peut contenir un cookie. Je vais créer un cookie nommé visites qui va contenir un login et un chiffre. Ce cookie expirera le 31 décembre 2006 et viendra du site www.squall.com. De plus ce cookie sera utilisé pour des transactions sécurisées : il contient donc la valeur booléenne : (les espaces sont pour bien séparés et le signe & est pour séparer le login du chiffre)
"visites = squall & 1 ; expires = Sun, 31-Dec-2006 23:59:59 GMT ; domain = www.squall.com ; secure"

Ce qui donne également sans espace :
"visites=squall&1;expires=Sun, 31-Dec-2006 23:59:59 GMT;domain=www.squall.com;secure"
On peut constater que j'ai laissé les espaces pour la date d'expiration : c'est ça le format GMT !

Et maintenant on va donner à nos textes des petits noms :
nom = "visites" ;
login = "squall" ;
nombre = "1" ;
date_expire = "Sun, 31-Dec-2006 23:59:59 GMT" ;
domaine = "www.squall.com" ;
securite = "secure" ;

On a alors : nom + "=" + login + "&" + nombre + ";expires=" + date_expire + ";domain=" + domaine + ";" + secure

Notre chaîne de caractère ressemblera le plus souvent à ça plutôt qu'a ce qu'il y a écrit plus haut.

Comment créer un cookie : la fonction

La fameuse propriété qui contient notre chaîne de caractère à mettre dans le cookie est document·cookie .

Pour créer un cookie, la façon la plus simple est de créer une fonction nomée setCookie par exemple qui prend en paramètre les informations que contient le cookie.
On aura donc :
function setCookie(nom, texte, date)
{
document·cookie = nom + "=" + texte + ";expires=" + date ;
}

On peut de plus créer plusieurs cookies dans un même fichier javascript. Pour cela le plus simple est de créer plusieurs versions de cette fonction qui contiennent un nom presque pareil (setCookie1, setCookie2, etc ou cookieNb_visiteurs, cookieMot_passe, etc).

Cependant on ne peut pas créer plus de 20 cookies provenant du même serveur sur l'ordinateur d'un internaute sous peine de voir les premiers détruits. Mais cette limite est difficilement atteinte sauf peut être sur des sites de vente.

Enfin, je voudrais ajouter un mot à propos du domaine : si jamais vous en mettez un pour essayer de voir comment ça marche ça ne marchera pas ! En effet tant que le fichier est sur l'ordinateur il n'a pas de nom de domaine mais dès qu'il est mis sur internet il en a un. Il ne faut donc pas oublier cela sous peine de ne pas comprendre pourquoi ça ne marche pas !

Comment créer un cookie : la date d'expiration

La date d'expiration doit être dans un certain format : Sun, JJ-MM-AA HH:MM:SS GMT
- Sun est le jour de la semaine en abrégé et en anglais (Mon, Tue, Wed, Thu, Fri, Sat, Sun)
- JJ-MM-AA est une date comme 04-07-06
- HH:MM:SS est l'heure comme 10:30:25 pour 10 heures 30 minutes 25 secondes
- GMT signifie que l'heure est par rapport au méridien de Greenwich, petite ville d'angleterre.

Mais pour faire simple, il existe en Javascript l'objet Date qui permet de ne pas trop se poser de questions par rapport à ce format : il suffira de créer une variable renfermant un nombre de millisecondes et de mettre ce nombre au format ci-dessus.

Tout d'abord il faut créer un nouvel objet Date :
var expDate = new Date()

Ensuite il faut définir la valeur de cette date :
expDate.setTime(expDate.getTime() + (jours * 24 * 3600 * 1000))
Ici on utilise la méthode setTime() qui permet de définir le temps en millisecondes.
expDate.getTime() est le temps lors de la création du cookie et (jours * 24 * 3600 * 1000) est le temps en millisecondes après lequel le cookie devra disparaitre. Comme il y'a 24 heures dans un jour, qu'une heure dure 60 minutes et qu'une minute dure 60 secondes et qu'une seconde dure 1000 millisecondes on a la formule 24*60*60*1000 = 24*3600*1000.
Si l'on veut que le cookie reste deux jours sur l'ordinateur il suffit de remplacer jours par 2.

Enfin, il faut mettre cette date au format GMT car pour l'instant on a juste un nombre de millisecondes. On utilise la méthode expDate.toGMTString().

Cela donne alors :
document·cookie = nom + "=" + texte + ";expires=" + expDate.toGMTString();

Voici le petit récapitulatif :
var expDate = new Date()
expDate.setTime(expDate.getTime() + (jours * 24 * 3600 * 1000));
document·cookie = nom + "=" + texte + ";expires=" + expDate.toGMTString();

Exemple de création d'un cookie

Cette fonction va créer un cookie avec le login d'un utilisateur et son mot de passe. Comme ça il sera authentifié à chaque visite du site.
De plus le cookie sera valable une semaine.

// fonction
function setCookie(nom, password, date)
{
document·cookie = nom + "=" + password + ";expires = " + date;
}

// création de la date de fin
var date = new Date()
date.setTime(date.getTime() + (7 * 24 * 3600 * 1000)) // 7 jours plus tard ...

// création du cookie "authentification" avec le login "CIA", le mot de passe "Kennedy" et la date d'expiration date au format GMT. On va rajouter & pour séparer le login du mot de passe.
setCookie("authentification", "CIA&Kennedy", date.toGMTString());

par **Squall** Lun 31 Juil 2006 - 20:08

8.2.2bis Création et utilisation du cookie

Quelques outils pour lire un cookie

Avant de lire un cookie, il faut voir certaines propriétés de l'objet String qui permet de manipuler des chaînes de caractères :
- length : renvoie le nombre de caractères contenus dans une chaîne. Par exemple "Bonjour !".length renvoie 9.

- indexOf(ssch, index) : retourne la position de la première occurence de la chaîne ssch en commençant à la position indiquée par index. Par défaut index vaut 0 et si la chaîne n'est pas trouvée indexOf renvoie -1.
"ces serpents qui sifflent".indexOf(ent) retourne 8, "ces serpents qui sifflent".indexOf(ent, 10) retourne 22 et "ces serpents qui sifflent".indexOf(rien) retourne -1.

- split(separateur, nbsplit) : retourne un tableau contenant les sous-chaînes obtenues en découpant la chaîne fourni selon le séparateur separateur. nbsplit indique le nombre maximal d'éléments qu'on veut avoir dans le tableau de la sous-chaîne et est optionnel.
decoupe = "zero/un/deux".split("/") crée le tableau suivant :
decoupe[0] = "zero", decoupe[1] = "un" et decoupe[2] = "deux".
Par contre,
decoupe = "zero/un/deux".split("/", 2) crée le tableau suivant :
decoupe[0] = "zero" et decoupe[1] = "un".

- substring(debut, fin) : retourne la chaîne de caractères contenu entre les indices debut et fin. Si fin n'est pas précisé ça retourne toute la chaîne à partir de debut.
"je suis grand et beau".substring(8,12) retourne "grand" et "je suis grand".substring(8) retourne "grand et beau".

Comme vous avez pu le remarquer il ne faut pas oublier que le premier caractère a l'indice 0 et pas 1 tout comme dans un tableau. Cela est dû au fait que une chaîne de caractère est souvent un tableau avec un caractère de fin.
Par exemple en C/C++ la chaîne "il fait beau" équivaut au tableau |i|l| |f|a|i|t| |b|e|a|u|\n| où | sépare les cases du tableau.

Avant de lire un cookie

La première chose à faire avant de lire un cookie est de savoir comment il a été écrit : si mon cookie contient son nom, un login et un chiffre il va falloir que je le sache pour écrire une fonction qui va traiter ces trois données. Si je prends une fonction prévue pour lire un nom, un login et un mot de passe le mot de passe contiendra le chiffre ce qui n'est pas encore embêtant en Javascript puisqu'il n'y a pas de types de variables. Mais si ma fonction n'est prévue que pour lire un nom et un chiffre alors là je n'aurais accès qu'au login et jamais au chiffre. C'est pourquoi il faut savoir modifier la fonction de lecture pour l'adapter à ses besoins.

Dans l'exemple qui va suivre, ma fonction me permet de lire un nom, un login et un mot de passe.
Sur mon site, la fonction dans la page sur les cookies permet de lire un nom, un login et un chiffre.

Lire un cookie

Nous allons tout d'abord utiliser le cookie écrit un cookie avec la fonction présentée plus haut. Notre cookie contient donc "authentification=CIA&Kennedy". Il ne contient que cela car on a pas accès au reste (domaine, date d'expiration, etc) : c'est le navigateur qui s'en charge.

Dans l'ordre des choses :
- on va vérifier si le cookie existe
- si il n'existe pas on renvoie une chaîne vide à la fonction de traitement
- si il existe on doit extraire "CIA&Kennedy" de toute la chaîne. Pour cela on va devoir connaître la position du signe "="
- c'est finalement cette chaîne qu'on va fournir à la fonction de traitement qui va se charger de la découper.

On a donc :
function lectureCookie(nom)
{
var egal = 0 ; // contient la position du signe "="
var resultat = "" ; // le resultat envoyé à la fonction de traitement

// on regarde si le cookie existe et si il existe pas on retourne rien
egal = document·cookie.indexOf("="); // on met la position du signe "="
if (document·cookie.substring(0, egal) != nom) return "" ; // on retourne une chaîne vide si le nom du cookie n'est pas celui donné en paramètre à la fonction

resultat = document·cookie.substring(egal+1); // on extrait la chaîne contenu à partir de l'indice egal+1
return resultat ; // on renvoie le résultat
}

Maintenant nous n'avons plus qu'a faire le traitement car notre chaîne contient soit "" soit "CIA&Kennedy" :
function traitement(resultat)
{
// on regarde si le cookie existe ou pas
if ( resultat == "" ) document.write("<br><br> Le cookie n'existe pas !");
else
{
var donnees = "" ;
donnees = resultat.split("&"); // on découpe la chaîne avec le séparateur "&"
document.write("<br><br> Votre login est : " + donnees[0] + "<br> Votre mot de passe est : " + donnees[1]); // on affiche le résultat
}
}

Voici une utilisation de nos deux fonctions :
var resultat = "" ; // resultat va contenir le resultat retourné par la fonction lectureCookie
resultat = lectureCookie("authentification") ;

// traitement du cookie
traitement(resultat);

Exemple complet

Voici le code source de toute une page HTML nommée cookie.htm et qui va écrire le cookie "authentification" et lire son contenu :

<html>
<head>
<title></title>
</head>

<body>

<script>

</script>

</body>

</html>

Lire plusieurs cookies

Si l'on créé plusieurs cookies sur une même page, la chaîne document·cookie contiendra le contenu des deux cookies. Par exemple je crée le cookie authentificationCIA avec CIA&Kennedy et le cookie authentificationNSA avec NSA&DES. La chaîne document·cookie contient alors :
"authentificationCIA=CIA&Kennedy;authentificationNSA=NSA&DES"

Dans ce cas il faut d'abord découper cette chaîne en deux suivant le point virgule. Ensuite il faut appeler chaque sous-chaîne ainsi créée et les traiter l'une après l'autre.
On doit également modifier notre fonction lectureCookie pour qu'elle prenne en paramètre le nom du cookie ainsi que la sous-chaîne correspondante.

La lecture de plusieurs cookies est un peu plus compliquée et je ne pense pas que vous en ayez besoin : on peut mettre déjà beaucoup de choses dans un seul cookie puisque la limite de taille par cookie est de 4 ko. Cela fait déjà au minimum 2000 caractères en tout ce qui représente le contenu d'une lettre d'une page !
Exemple :

function lectureCookie(nom, contenu)
{
var egal = 0 ;
var resultat = "" ;

// on regarde si le cookie existe et si il existe pas on retourne rien
egal = contenu.indexOf("=");
if (contenu.substring(0, egal) != nom) return "" ;

resultat = contenu.substring(egal+1);
return resultat ;
}

// -------------------------------------------------------------------------- \\

var chaqueCookie = document·cookie.split(";");
var resultat = "" ;

// premier cookie
resultat = lectureCookie("authentificationCIA", chaqueCookie[0]) ;
traitement(resultat);

// second cookie
resultat = lectureCookie("authentificationNSA", chaqueCookie[1]) ;
traitement(resultat);

L'exemple du web

A l'adresse http://pl.a.free.fr/web/cookies.html vous trouverez une boîte de dialogue qui vous demande un login. Si c'est la première fois que vous venez un cookie sera créé contenant le login et le nombre de visites de cette page qui sera de 1. Si ce n'est pas la première fois la valeur du cookie sera incrémentée.

Bien sûr dans cet exemple il ne peut y avoir qu'un seul login par ordinateur à la fois puisque la fonction n'est pas faite pour en gérer plusieurs. Donc si vous changez de login il va falloir supprimer l'ancien cookie.

par **Squall** Dim 6 Aoû 2006 - 15:42

9. Le projet

Qu'allons nous faire ?

Dans cette partie nous allons créer, pour terminer la partie sur le Javascript, une petite calculatrice à quatres opérations.
Pour cela nous allons avoir besoin de créer des fonctions qui vont tout gérer et faire le calcul mais également une page HTML utilisant les formulaires pour saisir les chiffres, afficher le résultat, etc.

Nous allons séparer le javascript de la page HTML : la page HTML sera projet.html et la page Javascript sera calculatrice.js .

Notre calculatrice va se présenter de la manière suivante : il y'aura un élément TEXT au dessus de 10 touches numérotées de 0 à 9. Il y'aura également 4 touches pour les opérations ( +, -, *, / ), une touche = pour le résultat et une touche C pour tout remettre à zéro.

Du coté Javascript, l'appuie sur chaque touche sera géré par une fonction qui, suivant la touche appuyée, appelera d'autres fonctions qui vont s'occuper du calcul, de l'affichage, etc.

9.1 Le HTML

Ici, pas de Javascript, sauf pour appeler certaines fonctions lors de l'appuye sur une touche.
Pour cela nous allons admettre les choses suivantes :
-nous avons une fonction ajoutChiffre(n) qui prend en paramètre un entier n. Cette fonction permet de rentrer un chiffre.
-une fonction operation(n) prend en paramètre un entier et permet de savoir quelle va être l'opération à effectuer.
On code de la manière suivante : 1 -> + ; 2 -> - ; 3 -> * ; 4 -> / .
-il y'a également une fonction qui permet de tout remettre à zéro : annul().
-sans oublier le plus important : la fonction resultat() qui calcule et affiche le résultat.

Tout d'abord nous allons créer le formulaire. Je ne m'occuperais pas de toute la mise en page et des différentes balises et des textes à rajouter ensuite. Nous l'appelerons "calc" pour calculatrice :
<form name="calc"></form>

Ensuite, il nous faut notre champ de saisie qui s'appelera "res" pour résultat : <input type="text" name="res">

Nous allons créer chaque bouton de la même façon : <input type="button" value="n" onClick=fonction()>.
Ici n est la valeur du boutton, soit un chiffre entre 0 et 9, un opérateur, le signe égal ou le C pour annuler.
fonction() est la fonction qu'on va appeler avec ce bouton.

Nous allons mettre quatres boutons par ligne puis un simple saut à la ligne nous permettra d'écrire sur la ligne suivante : pas besoin de faire de tableau, sauf peut être pour aligner les boutons mais ça peut être une bonne idée de ne pas les aligner pour une fois !

Voici donc un exemple de mise en page :
<form name="calc">

<input type="text" name="res"> <br>

<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()> <br>

<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()> <br>

<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()> <br>

<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()>
<input type="button" value="n" onClick=fonction()> <br>

</form>

Il ne reste plus qu'a remplir les champs value et onClick. Pour cela, les trois premiers boutons de chaque groupe seront un chiffre de 1 à 9. Le quatrième sera un opérateur. Et dans le dernier groupe on aura de gauche à droite : le bouton annuler, le 0, le égal, le quatrième opérateur.

Cela donne alors en ajoutant les bonnes fonctions :
<form name="calc">

<input type="text" name="res"> <br>

<input type="button" value="1" onClick=ajoutChiffre(1)>
<input type="button" value="2" onClick=ajoutChiffre(2)>
<input type="button" value="3" onClick=ajoutChiffre(3)>
<input type="button" value="+" onClick=operation(1)> <br>

<input type="button" value="4" onClick=ajoutChiffre(4)>
<input type="button" value="5" onClick=ajoutChiffre(5)>
<input type="button" value="6" onClick=ajoutChiffre(6)>
<input type="button" value="-" onClick=operation(2)> <br>

<input type="button" value="7" onClick=ajoutChiffre(7)>
<input type="button" value="8" onClick=ajoutChiffre(8)>
<input type="button" value="9" onClick=ajoutChiffre(9)>
<input type="button" value="*" onClick=operation(3)> <br>

<input type="button" value="C" onClick=annul()>
<input type="button" value="0" onClick=ajoutChiffre(0)>
<input type="button" value="=" onClick=resultat()>
<input type="button" value="/" onClick=operation(4)>

</form>

par **Squall** Dim 6 Aoû 2006 - 15:44

9.2 Le javascript

Ici nous ne traiterons que la partie javascript du projet qui sera contenue dans le fichier calculatrice.js .

L'algorithme

Avant de commencer, regardons de plus près comment nous effectuons un calcul sur une calculatrice.
Tout d'abord nous entrons un chiffre. Lorsque nous entrons un second chiffre, celui-ci se plaçe à gauche du premier.
Après avoir entré notre premier nombre, nous appuyons sur une touche d'opération. Notre premier nombre est donc mis en mémoire ainsi que l'opérateur utilisé. Nous entrons à nouveau un nombre puis nous appuyons sur la touche égal. Cet appuie permet à la fonction qui est derrière de lier les deux nombres avec l'opérateur utilisé.
Voici un petit schéma :

Nous pouvons voir que les fonction permettant de rentrer un nombre ou un opérateur ainsi que la fonction de calcul partagent des variables ensemble. Les deux nombres ainsi que l'opérateur seront donc des variables globales.
De plus nous allons avoir besoin d'une autre variable permettant d'afficher le nombre dans la zone de saisie sans modifier les nombres déjà rentrés.

Les moyens utilisés

Voici les principales variables que nous allons utiliser :
nombre : va permettre de ne pas modifier les nombres déjà entrés et de travailler sur les nombres.
nombre1 et nombre2 : serviront à stocker les deux nombres nécessaires au calcul.
oper : va stocker l'opérateur utilisé.

Et les fonctions :
-ajoutChiffre(nb) : va permettre d'ajouter le chiffre nb au nombre.
-operation(op) : va permettre de saisir l'opérateur op à utiliser.
-resultat() : va faire le calcul et va afficher le résultat.
-annul() : va tout remettre à 0.

Nous allons pour le reste peut être utiliser d'autres fonctions ou variables mais nous avons déjà le necesaire.

Les variables

Il faut pour commencer déclarer les 4 variables. On va également les initialiser à 0 par précaution :
var nombre,nombre1,nombre2,oper;
nombre=nombre1=nombre2=oper=0;

La fonction annul()

Etant donné que c'est la fonction la plus simple, je vais commencer par celle-ci.
Cette fonction remet tout à zéro puis affiche 0 dans la zone de saisie. Cela donne alors :

function annul()
{
nombre=nombre1=nombre2=oper=0;
document.calc.res.value=nombre;
}

La fonction operation(op)

Cette fonction n'est pas plus compliqué, sauf pour la seconde ligne :

function operation(op)
{
oper=op;
nombre1=nombre;
nombre=0;
}

Tout d'abord on met l'opérateur op fourni par la partie HTML dans la variable oper.
Ensuite le premier nombre qu'on a rentré dans le premier appel de la fonction ajoutChiffre(nb) est mis dans la variable nombre1. Ce nombre est toujours le premier puisqu'on rentre un nombre avant de chosir l'opérateur.
Et enfin on remet la variable nombre à 0 pour bien montré à l'internaute qu'on a pris en compte l'opérateur. Si on ne faisait pas ça ça ne marcherait pas.

La fonction ajoutChiffre(nb)

Dans cette fonction, on va rentrer un chiffre nb puis un autre pour former le premier nombre.
De plus on va mettre à jour l'affichage à chaque appuie.
Pour que le premier chiffre entré soit décalé à gauche, il faut qu'on le multiplie par 10.
Cela donne alors :

function ajoutChiffre(nb)
{
nombre=10*nombre+nb;
document.calc.res.value=nombre;
}

La fonction resultat()

Pour le résulat c'est un peu plus compliqué d'autant plus que je ne peut l'afficher avec les tabulations : ça devient pénible à lire.
Tout d'abord il faut mettre dans la variable nombre2 la valeur que l'on a mis dans nombre, c'est à dire le dernier nombre entré.
Ensuite, suivant l'opérateur choisi auparavant, on fait soit une addition des deux variables, soit une soustraction, soit une multiplication ou une division.
Ici il ne faut pas oublier comment on a codé les opérateurs et ne pas oublier le break dans les cas du switch sinon il y'aura un bug.
Enfin on affiche le résultat final.

function resultat()
{
nombre2=nombre;

switch (oper)
{
case 1:
nombre=nombre1+nombre2;
break;
case 2:
nombre=nombre1-nombre2;
break;
case 3:
nombre=nombre1*nombre2;
break;
case 4:
nombre=nombre1/nombre2;
break;
}

document.calc.res.value=nombre;
}

Et après ?

Et voilà on a fini le projet ! Il ne reste plus que la mise en page et en fichiers mais je vous laisse faire. De toute façon le code est déjà sur internet à l'adresse http://pl.a.free.fr/web/projet.html .

Bien sûr cette calculatrice est vraiment très simple et a besoin d'être améliorée d'urgence pour concurrencer celle de Windows mais ça n'est pas le but.

par **Squall** Dim 6 Aoû 2006 - 15:45

Comme pour le sujet sur le HTML, vous pouvez maitenant enrichir cette partie et mettre par exemple vos réalisations (si jamais vous avez une meilleure calculatrice !).

par **Squall** Lun 7 Aoû 2006 - 21:15

Pour ceux qui veulent en savoir plus sur le Javascript, le HTML ou d'autres langages, voici quelques livres et sites internet que j'ai utilisé dans ces deux rubriques :

-HTML et Javascript chez Eyrolles de P. Chaléat et D. Charnay. Ce livre est très complet sur le HTML et le Javascript. Mon seul regret est qu'il est assez vieux et qu'il parle énormément de Nestcape. Certaines choses ne vont alors pas marcher.

-Débuter en programmation de Greg Perry chez Campus Press. Ce livre est une découverte de la programmation à travers de nombreux langages. Il commençe avec Liberty Basic, continue avec des algorithmes, le Java, le C/C++, Javascript, le HTML et le XML. Cependant si vous voulez une initiation dans un langage précis je vous conseille de prendre le livre qui ne traite que de ce langage puisque par exemple dans ce livre il y'a 10 pages sur le HTML et 10 autres sur le Javascript !

-Javascript chez Dunod de François Pellerin. Ce livre est un résumé du Javascript et c'est avec celui-là que j'ai commencé. Il peut être un bon aide-mémoire et regroupe l'essentiel et le plus utilisé. Par contre certains fonctions, méthodes ou objets sont présentés en supposant que le lecteur a déjà quelques connaissances.

-les livres de C. Delannoy chez Eyrolles sont très bien conçus pour le langage C, C++ et Java.

-www.asp-php.fr est un très bon site sur les langages du Web : HTML, Javascript, ASP, PHP, XML, ...
C'est en partie avec celui-ci que j'ai compris les cookies.

-www.developpez.com est le site où les développeurs francophones se retrouvent. On peut y trouver de nombreux tutoriaux et des conseils.

-www.codes-sources.com est un site, qui fait partie de nombreux autres, où l'on retrouve de nombreuses sources dans différents langages ainsi que des tutoriaux. Ce site est intéressant lorsque vous cherchez à créer quelque chose sans voir comment le faire (il m'a aidé pour mon projet en informatique à l'université !).
Cependant il faut s'enregistrer pour pouvoir y télécharger quelque chose et même si c'est gratuit c'est toujours inquiétant de s'enregistrer (enfin moi ça m'inquiète).

par **Squall** Mer 9 Aoû 2006 - 17:37

Petit rajout qui me posait problème

Durant toute cette partie, pour écrire quelque chose à l'écran en Javascript je vous ai dit de procéder de la manière suivante :
document.write("quelque chose à écrire <br> et un saut à la ligne");

Or je savais qu'on pouvait utiliser le caractère d'échappement "\n" pour effectuer un saut à la ligne mais je n'y arrivais pas Sad

Mais maitenant je sais comment faire : j'ai vu ça sur un tutorial sur le PHP (ce qui permet de lancer entre vous la rumeure suivante : vais-je vous apprendre le PHP ???). En fait il suffit d'encadrer le texte à écrire ou tout le script Javascript (donc avant la balise <script> et après </script>) par les balises <pre> et </pre>.

Cela donne donc :
document.write("<pre>Salut tout le monde ! \n</pre>");

Mais on peut également écrire :
<pre>
<script>
document.write("Salut tout le monde ! \n");
</script>
</pre>

Il y'a également une autre nouveauté que j'ai pu grâce à cela réussir à faire : utiliser la méthode document.writeln("texte à écrire").

Cette fonction a la même utilité que document.write("") à ceci près que le ln au bout dit qu'il faut effectuer à la fin un retour à la ligne.

On a donc l'équivalence suivante :
document.writeln("texte à écrire") = document.write("texte à écrire \n")

En C, on a a peu près la même équivalence entre printf("") et puts("").

Enfin, pour effectuer une tabulation, on peut remplacer "\n" par "\t".

Quant à la balise <pre></pre>, elle sert tout simplement à afficher le texte de la façon dont cela a été défini dans le code HTML (j'en ai dit 2 mots dans la rubrique sur le HTML).

par **Squall** Sam 4 Nov 2006 - 13:53

Une faille de sécurité dans les formulaires !

J'ai découvert ça avec le PHP, mais le Javascript est aussi concerné (et l'HTML aussi mais un peu moins). Il existe une faille importante de sécurité dans les formulaires et l'attaque a un charmant nom : le Cross Site Scripting.

Cela consiste à rentrer dans un formulaire du code Javascript, HTML ou PHP pour qu'il soit exécuté par le serveur. Vu qu'en PHP on peut manipuler des fichiers ça peut devenir dangereux.
Par contre en Javascript ou en HTML cela permet de modifier partiellement un site en ajoutant des pubs ou des liens vers des sites plus ou moins nets.

Le problème vient du traitement de la chaîne envoyée dans le formulaire. C'est pour cela qu'il est important de vérifier que ce que l'utilisateur rentre est conforme à ce que l'on attend (par exemple une adresse e-mail, un code postal, etc).

Mais lorsqu'il doit rentrer un texte (dans un forum, livre d'or ou ailleurs) c'est là qu'il faut faire le plus attention et seul le PHP peut venir au secours de l'utilisateur car il existe des fonctions qui permettent de supprimer les balises ou de transformer les caractères.

Voici un exemple simple :
<pre>
<script>
x=0;
y=1;
for (i=0;i<=20;i=i+1)
{
z=x+y;
x=y;
y=z;
document.write(z);
}
</script>
</pre>
Si vous essayez de le mettre dans un post dans ce forum ça ne marchera pas : la faille est controlée. Par contre si rien n'avait été fait on aurait vu apparâitre quelques nombres.

Quant au HTML, essayez ça, ça marche :
<TABLE>
<TR ALIGN="center"><TD>A<TD>B<TD>C
<TR ALIGN="right"><TD VALIGN="middle">D<TD>E
<TR ALIGN="left"><TD VALIGN="bottom">F<TD>G<TD>H

<TR ALIGN="center"><TD>I<TD>J<TD>K pas là ou il faut !
<TR ALIGN="center"><TD>K là ou il faut !
</TABLE>

par **Squall** Dim 26 Nov 2006 - 17:10

Ne réinventez pas la roue à chaque fois !

Lorsque vous avez à faire un script ou un programme un peu compliqué dans n'importe quel langage, ne vous lancez pas tout de suite mais cherchez d'abord si ce que vous voulez faire n'existe pas déjà. Car comme dirait mon prof d'info "ça ne sert à rien de réinventer la roue à chaque fois".

Pour cela tapez ce que vous cherchez dans votre moteur de recherche préféré et normalement vous trouverez votre bonheur parmi les 5 premiers résultats. Il ne vous restera plus qu'a faire un simple copier coller ou à installer une petite librairie en plus (par exemple en C/C++ pour faire des logiciels avec des graphismes sous Windows on peut trouver Allegro ou la SDL ou les Widgets de Windows).

Par exemple je veux insérer un calendrier dans mon site perso. Je vais sur mon moteur de recherche préféré (www.mozbot.fr) et je tape "ajouter un calendrier en javascript" (sans les guillemets de préférence).

En tête des résultats je trouve


Recherche de scripts : calendrier - 26 scripts trouvés [ L'éditeur ...  [Ouvrir dans une nouvelle fenêtre]
Calendrier dynamique [Site : l'éditeur JavaScript > Temps > Scripts à copier/coller] ... Ajouter le moteur à votre barre de recherche FireFox. ...
http://www.editeurjavascript.com/scripts/search-asked_calendrier.php  - Document récent (24 nov 2006)
Infos | Mettre en favori | Exclure ce site | Envoyer par mail | Historique | Pages similaires

Je clique dessus et je trouve pas moins de 26 scripts qu'il ne reste plus qu'a copier dans mon site perso et j'ai ainsi gagner pas mal de temps car ça a pas l'air simple !!!

par **Squall** Mar 19 Juin 2007 - 14:13

Encore une petite remarque concernant les cookies : certains sites (comme www.systran.fr pour des traductions) vous disent que vous ne pouvez utiliser leur service qu'un certain nombre de fois.

C'est tout simplement dû à un cookie qui est écrit avec le nombre d'essai restants et qui est décrémenté à chaque nouvel essai.

Pour pouvoir à nouveau utiliser le service, il suffit de supprimer le(s) cookie(s) correspondant(s) et de réactualiser la page Smile

par Contenu sponsorisé

Le JavaScript

Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript

Re: Le JavaScript