JavaScript

Optimiser ses développements

2010-09-10T18:26:00.000-07:00

L'optimisation du code et des temps de réponse est un sujet rarement évoqué dans le développement web.
L'optimisation est souvent réservée aux applications professionnelles sensibles. Pourtant tout webmaster est concerné directement par cette question.
Le développement des accès haut-débit depuis près de 2 ans a 2 conséquences majeures :
- l'augmentation du nombre d'internautes et donc de visiteurs potentiels
- l'augmentation du temps moyen de connexion et donc du nombre de pages vues

Les hébergeurs ont pour la plupart déjà fait profiter leurs clients d'augmentation de la bande passante. Par exemple chez OVH, la bande passante fournie avec les serveurs dédiées a pratiquement été multipliée par 10 en 2004, sans supplément de prix.
La bande passante qui était encore récemment un point critique ne pose plus réellement de problème, sauf pour certaines applications spécifiques de téléchargement ou de radio en ligne par exemple.
En revanche, la puissance des serveurs n'a pas suivi le même rythme de croissance que l'augmentation de la population d'internautes : on considère généralement que la puissance des processeurs double tous les 18 mois selon la loi de Moore qui prédit "seulement" que "le nombre de transistors par cicuit de même taille va doubler tous les 18 mois".
C'est bien la puissance CPU qui est devenu le facteur limitant aujourd'hui.
Les hébergeurs sont très attentifs à la consommation CPU des sites sur hébergements mutualisés. En cas de dépassement des limites, l'accès peut être coupé.
Pour un site sur serveur dédié, l'optimisation du code permet de proposer à ses visiteurs un site rapide et fiable et d'éviter la surenchère technologique et les coûts associés à l'augmentation des capacités matérielles.

Une optimisation réussie apporte pour vos visiteurs un plus grand confort de navigation et pour vous une meilleure maîtrise des coûts d'hébergement et surtout une plus grande sérénité par rapport aux risques de plantages du site.

Nous allons voir dans ce tutorial comment mesurer les performances d'un site et les différents moyens d'optimiser les temps de traitement coté SQL, PHP et configuration.
Je n'ai pas la prétention d'être exhaustif dans ces quelques pages. Je donne simplement quelques solutions que j'ai mises en application moi-même avec un certain succès au niveau PHP, MySQL et Apache.
N'hésitez pas à me signaler les éventuelles erreurs et vos solutions d'optimisation.

Voici le sommaire de cet article (les prochaines parties suivent bientôt).
1 - Mesurer les performances
Etape indispensable pour optimiser : être capable de faire l'état des lieux et de mesurer les améliorations.

2 - Optimiser MySQL
Le moteur SQL est certainement l'élément qui a le plus fort potentiel d'optimisation.

3 - Utiliser le cache MySQL
A partir de la version 4 de MySQL, une gestion de cache ouvre de nouvelles possibilités.

4 - Utiliser les caches fichiers
Les principes du cache et une solution détaillée avec Cache Lite.

5 - Optimiser le serveur
Il existe de nombreuses astuces efficaces pour accélérer les traitements sur le serveur.

Structure d'une base de données

2010-09-10T18:24:00.001-07:00

Introduction
Devant le succès des premiers tutoriaux sur le PHP, voici une introduction aux bases de données.
L'avantage considérable d'un langage serveur comme le PHP est qu'il peut conserver des données saisies par des utilisateurs, les traiter, les trier et les afficher aux autres visiteurs. Avec le PHP, on peut donc faire des forums, des livres d'or, des sondages. Bref tout ce qui est interactif sur le web.

Pour sauver des données, beaucoup pensent que le meilleur moyen est d'utiliser des fichiers texte. C'est une solution possible. La solution la plus souple et nécessitant le moins de développements est la base de données. Toutes les fonctions de sélection, de tri, de recherche, d'insertion, de modification et de suppression sont possibles grâce aux langage de requêtes SQL (Structured Query Language).

C'est donc l'utilisation des bases de données MySQL avec PHP que nous allons aborder dans ce tutorial.

PHP est très souvent utilisé en association avec le système de gestion de base de données (SGBD) MySQL. Les hébergeurs qui supportent le PHP proposent tous MySQL. De même le package EasyPHP que nous avons déjà vu dans le tutorial Introduction au PHP installe automatiquement MySQL. Nous sommes donc prêts à démarrer avec une base de données.

Avertissement 1 : La lecture des tutoriaux "JavaScript et PHP", "Introduction au PHP" et "Traiter des données en PHP" est un pré-requis absolument nécessaire.
Avertissement 2 : Ce tutorial est une vulgarisation des bases de données. L'objectif est de comprendre leur fonctionnement et leur intérêt (par rapport aux fichiers texte par exemple) et d'apprendre à les utiliser. Celui qui vient me parler de 3ème forme normale ou de méthode MERISE dans ce contexte n'a rien compris à l'esprit de cette section du site...
Avertissement 3 : Les bases de données sont très puissantes, mais il faut un minimum de concentration et de travail pour comprendre. N'imaginez pas que vous allez faire un script de forum en 30 minutes. Que les fainéants passent directement à autre chose.

Plan du tutorial :
1 - Structure d'une base de données
2 - Utilisation de PHPMyAdmin
3 - Accès à une base de données en SQL
4 - Accès à une base de données en PHP

Structure d'une base de données
A quoi sert une base de données
Une base de données est destinée :
- à stocker des données structurées et organisées - à manipuler ces données grâce a leur organisation.

Une base de données contient des tables ayant des rapports logiques entre elles.
Une table peut être comparer à un tableau de données.

Dans ce tutorial, nous allons prendre l'exemple de la base de données Catalogue qui contient les tables Catégorie et Produit. L'objectif est donc de créer une base de données qui contiendra toutes les informations d'un catalogue de produits.
On a souvent tendance à confondre base et table. Ce sont pourtant 2 objets bien différents.
Une base regroupe des tables sur le même domaine d'informations (ici le domaine catalogue de produits).

Table et clé primaire
La table "Categorie", dont le but est de lister toutes les catégories du catalogue, est définie comme ceci :

Identifiant	Nom
1	Processeur AMD
2	Processeur Intel
3	Mémoire RAM
4	Carte mère

Chaque ligne d'une table correspond à un enregistrement. Ici un enregistrement est une catégorie.
Une colonne est une propriété d'un enregistrement.
Cette table contient 2 colonnes :
La colonne "Nom" sert à enregistrer le nom d'une catégorie sous forme de texte.
La colonne "Identifiant" est un nombre entier qui sert à identifier de manière unique un enregistrement (ou ligne) de la table.
On appelle cet identifiant unique la clé primaire de la table. On pourrait également identifier une catégorie par son nom. Mais il faut éviter car :
- le nom peut changer (erreur de saisie par exemple)
- le SQL est beaucoup plus rapide pour manipuler des entier.

L'identifiant d'une table permet également de faire des liens avec d'autres tables. Nous allons voir comment faire un lien entre un produit et sa catégorie.

Liens entre tables
La table "produit", dont le but est de contenir les produits d'un catalogue, est définie comme ceci :

Identifiant	Nom	Prix	Vignette	Categorie
1	AMD Athlon XP 2000 +	98	vignette/athlon.gif	1
2	Intel Pentium 4 2GHz	245	vignette/p4.gif	2
3	Intel Céléron 2 GHz	145	vignette/celeron.gif	2
4	Barette DDR 512 Mo PC2100	56	vignette/ddr.gif	3

Ici aussi, une ligne correspond à un enregistrement, c'est-à-dire à un produit.
- Nous retrouvons également l'identifiant unique (ou clé primaire)
- La colonne Nom contient le nom du produit
- La colonne Prix contient le prix sous forme numérique
- La colonne Vignette contient l'adresse d'une image correspondant au produit
- La colonne Categorie contient un nombre qui est un lien vers la clé primaire de la table Categorie. Vous remarquez qu'on n'enregistre pas le nom de la catégorie dans cette colonne, mais juste un identifiant. Dans ce cas, la colonne est une clé externe vers la table Categorie.
Voici les avantages d'utiliser une clé externe :
- Gain de place de stockage (Enregistrer un entier est bien moins volumineux que d'enregistrer un libellé complet)
- Gain de mise à jour (Si un jour le libellé Processeur Intel doit devenir Processeur INTEL, il suffit de changer la ligne 2 de la table Categorie et tous les produits de la catégorie 2 profiteront de la mise à jour)
- Gain de rapidité (Manipuler un entier est plus rapide que manipuler du texte)

Modèle de données
Un modèle graphique de représentation du schéma de la base avec les liens entre base serait :

Les tables sont représentées par des boîtes avec leur nom et leurs colonnes.
La colonne Identifiant est soulignée car elle correspond à la clé primaire.
La clé externe Categorie de la table Produit est reliée par une flèche à la table Categorie pour montrer le lien.
La simple flèche vers la table Categorie montre qu'un produit peut être attaché à une seule catégorie.
La double flèche vers la table Produit montre qu'une catégorie peut concerner plusieurs produits.

On pourrait enrichir la base en ajoutant une table des marques de produits avec une clé externe entre un produit et sa marque. Le modèle de données serait alors :

Questions fréquentes sur les bases de données
* Le nombre de produits n'est pas stocké dans la table Categorie car on peut le retrouver autrement.
Il suffit de compter le nombre de produits par colonne Categorie.
On sait par exemple qu'il y a 2 produits de la catégorie "Processeur Intel".
En règle générale, il faut éviter de stocker des données redondantes qui peuvent être retrouvées autrement. Sauf dans certains cas, si le moyen de retrouver cette donnée est gourmand en ressources CPU ou si cette donnée est souvent demandée.

* Il n'est pas utile de gérer les numéros d'identifiant manuellement. Le système de base de données le gère automatiquement en incrémentant l'identifiant d'une unité à chaque insertion de ligne.

* Les caractères spéciaux (accents, espace, ...) sont à éviter dans les noms des tables et des colonnes.
Il est egalement conseillé d'éviter d'appeler une table ou une colonne par un mot réservé du SQL.

Le formulaire HTML

2010-09-10T18:23:00.000-07:00

Ce tutorial est un complément du script "Notation par curseur et smileys" qui permet ainsi d'enregistrer la note saisie par les visiteurs. Le traitement dédié à ce script est détaillé dans la troisième page de cet article.
Le javascript ne permet pas de traiter des données pour les enregistrer dans une base de données ou un fichier.
La solution est d'utiliser un langage serveur. PHP est de loin le plus accessible et le plus courant. Je vous conseille la lecture des tutoriaux "Introduction au PHP" et "Javascript et PHP".

1 - Le formulaire HTML

Définition d'un formulaire
Le moyen le plus courant pour transmettre des informations depuis le visiteur vers le serveur est d'utiliser les formulaires.
Un formulaire est défini par la balise <FORM> et </FORM>.
Voici un exemple de formulaire

<FORM name="monform" action="page.php" method="post" target="_blank">
Zone de texte : <INPUT type="text" name="champtexte">
<INPUT type="submit" value="Envoyer">
</FORM>

qui donne l'affichage suivant :

Un objet FORM a comme paramètre un nom, une action et une méthode de transmission vers le serveur.
name sert à manipuler et reconnaître l'objet FORM dans la page
action contient l'adresse du script qui va recevoir et traiter les données du formulaire. Ici le formulaire sera envoyé à "page.php".
method indique le type de transmission des données. "post" cache les données transmises au visiteur. "get" les rend visibles. Je préfère utiliser "post" qui est plus discret et qui n'allonge pas l'url dans la barre d'adresse.
On peut aussi définir une destination par le paramètre target, équivalent au target de la balise de lien <A>.

Envoi du formulaire
L'envoi du formulaire (ou soumission ou submit en anglais) peut se faire de 2 manières.
- Soit par un bouton de type submit :
<INPUT type="submit" value="Envoyer">
Dans ce cas, le formulaire est envoyé directement quand on clique sur le bouton

- Soit par du javascript :
document.monform.submit()
Voir le tutorial javascript sur les formulaires pour tous les détails sur la manipulation des formulaires.

PHP langage serveur

2010-09-10T18:22:00.000-07:00

J'ai décidé de présenter cette introduction au PHP pour 3 raisons :
1 - Le PHP est un langage de plus en plus utilisé qu'il serait dommage de ne pas adopter très vite,
2 - Beaucoup me posent des questions de base sur le php,
3 - Le javascript ne peut pas tout faire (loin de la) et le PHP est un allié puissant.

Je n'ai pas l'ambition dans ce tutorial de faire mieux que mes collègues spécialistes du PHP (voir l'annuaire pour une sélection des meilleurs sites traitant du php). Je souhaite simplement présenter les bases de ce langage puissant, facile et passionnant.
Je vous invite à lire cet autre tutorial qui présente le principe d'un langage serveur et les différences entre le javascript et le PHP.

1 - PHP langage serveur
A la grande différence du javascript, le PHP est exécuté sur le serveur, AVANT que le visiteur ne recoive la page.
Pour simplifier, un visiteur tape une adresse dans son navigateur (www.monsite.com/page.php), le script PHP contenu dans le fichier page.php est exécuté par le serveur puis renvoyé vers le visiteur. Si cette page contient du code javascript, le visiteur pourra alors l'exécuter sur son ordinateur.
Cela signifie donc que pour exécuter du code PHP, il faut faire un appel au serveur, c'est-à-dire ouvrir une page dans le navigateur.

Pour exécuter un script PHP, il faut que le serveur reconnaisse et comprenne le PHP. Ce n'est pas le cas de tous les hébergeurs, même si de plus en plus ont intégré le support du PHP.

Quelques hébergeurs gratuits qui supportent le PHP :

Hébergeur	Adresse	Inconvénients	Mon avis
Multimania	www.multimania.fr	Pub par popup ou DHTML	La pub est vraiment trop présente Acheté par Lycos
Chez	www.chez.com	Publicité par popup ou frame	Trop de pub aussi Acheté par Tiscali
Respublica	www.respublica.fr	Migration vers Chez.com	Trop de pub aussi Acheté par Tiscali
Freesurf	www.freesurf.fr	Publicité par popups	Trop de pub aussi
Free	www.free.fr	Obligation de souscrire à l'offre d'accès sans abonnement	Aucune publicité. Hébergement vivement conseillé

Il y en a bien d'autres...

Attention, Wanadoo ou Ifrance, par exemple, ne le supportent pas encore (septembre 2002).
Je vous recommande Free.fr comme hébergement, sans aucune publicité. La seule contrepartie est d'ouvrir un compte (sans abonnement) chez eux.

PHP langage serveur

2010-09-10T18:21:00.000-07:00

Hébergeur	Adresse	Inconvénients	Mon avis
Multimania	www.multimania.fr	Pub par popup ou DHTML	La pub est vraiment trop présente Acheté par Lycos
Chez	www.chez.com	Publicité par popup ou frame	Trop de pub aussi Acheté par Tiscali
Respublica	www.respublica.fr	Migration vers Chez.com	Trop de pub aussi Acheté par Tiscali
Freesurf	www.freesurf.fr	Publicité par popups	Trop de pub aussi
Free	www.free.fr	Obligation de souscrire à l'offre d'accès sans abonnement	Aucune publicité. Hébergement vivement conseillé

AJAX / XMLHTTPRequest

2010-09-10T18:20:00.000-07:00

Tutorial sur les requêtes serveur en JavaScript

Une question revient souvent sur les forums dédiés au JavaScript : Peut-on réaliser une requête sur le serveur sans (re)charger une page et sans utiliser d'astuces telles qu'une frame invisible ou une fenêtre popup ? Jusqu'à peu, je pensais que la réponse était aussi claire que négative. Et puis j'ai découvert XMLHTTPRequest et la réponse est devenue : « Oui ! » Mais les documentations sur ce sujet ne se bousculent pas sur le net, notamment en français. D'où cette petite introduction aux objets XMLHTTPRequest (que nous appellerons ainsi même si le nom diffère d'un navigateur à l'autre). Pour l'instant, c'est uniquement compatible Internet Explorer et Firefox mais je crois avoir lu quelques informations intéressantes pour Opera[1]. Quant à Netscape, bah... je ne suis pas nécrophile.
Avant d'entrer dans le vif du sujet, je tiens à remercier tous les habitués du forum de ToutJavaScript.com et notamment Aurélien pour son explication limpide sur les fonctions à retardement (j'espère les avoir bien utilisées) et poof65 pour sa collaboration lors de la création d'une classe d'abstraction des objets XMLHTTPRequest.

[1] Opera est actuellement en train d'évoluer et devrait bientôt gérer complètement ces objets. Au moment où j'écris ces lignes, les exemples des sections 1. et 2. fonctionnent normalement sous Opera 8 beta. L'exemple de la section 3. fonctionne mais le résultat arrive deux fois. Celui de la section 4. ne fonctionne qu'avec la méthode get. Et le dernier, celui de la section 5. fait carrément planter l'application.

Accès rapide aux sections

1. Présentation

Comme leur nom ne l'indique pas, les objets XMLHTTPRequest permettent de récupérer toutes sortes de données, et pas seulement des fichiers XML. Pour effectuer une requête, il faut tout d'abord déclarer une certaine variable. Ce qui se fait de manière différente avec IE et Firefox. Sous IE, on utilise un objet ActiveX et sous Firefox, on dispose d'un type ad hoc. Ensuite, on envoie la requête et enfin, on attend la réponse. Ci-après, vous pouvez voir un exemple très basique faisant une requête sur la présente page (location.href). Une fois la réponse obtenue, une boîte d'alerte s'affiche.

> Voir le code JavaScript

Comment ça marche ?

ligne 4 : on crée une instance de l'objet XMLHTTPRequest sous Firefox ;
ligne 6 : on crée une instance de l'objet XMLHTTPRequest sous IE ;
ligne 12 : on spécifie la méthode de transmission des données, l'URL et le mode de transmission de la requête ;
ligne 13 : on exécute la requête proprement dite ;
ligne 14 : on affiche une boîte d'alerte dès que la requête est terminée.

Note : Ces fonctions sont détaillées en section 6.

[haut de la page]

2. À quoi cela peut-il servir ?

Dans l'exemple précédent, la requête se contente de demander un certain fichier sans s'occuper du résultat. Mais en fait, lorsque la requête se termine, on reçoit (et heureusement) des informations du serveur. Ces informations sont contenues dans la variable xhr_object.responseText ou xhr_object.responseXML, selon que le résultat est au format texte (il est possible de mettre n'importe quoi dedans, tout est question d'interprétation ultérieure de ce résultat) ou XML. Remplaçons simplement l'alerte de l'exemple précédent par alert(xhr_object.responseText) (cf. ligne 14) et voyons le résultat :

Comme vous l'avez constaté, c'est tout le code de la présente page HTML qui s'est affiché (ça a d'ailleurs dû sortir de l'écran, désolé). En fait, lors d'une telle requête, tout se passe exactement comme si vous aviez tapé l'URL dans la barre d'adresse de votre navigateur. Ce qui signifie que si vous demandez un fichier PHP, il sera exécuté et c'est le résultat de son exécution qui se retrouvera dans xhr_object.responseText. À partir de là, on se rend vite compte qu'il n'y a pas de limite à l'utilisation de ce type de requête. On peut simplement afficher le résultat reçu avec un alert. On peut mettre le résultat dans un DIV (ou tout autre conteneur HTML), mais on peut tout aussi bien récupérer et exécuter du code JS grâce à eval.
Note : La section 5 présente un exemple concret d'utilisation.

[haut de la page]

3. Synchrone Vs. Asynchrone

Dans les exemples que nous avons vus jusqu'à maintenant, c'est le mode synchrone qui était utilisé. Cela signifie que tant que le résultat de la requête ne nous est pas parvenu, le script est en pause et le navigateur bloqué. Avec un bon débit et/ou peu de données à transmettre, on pourrait s'en contenter mais cela peut vite s'avérer gênant pour l'utilisateur qui voit son navigateur figé. Ce mode de transmission est donc à proscrire. Heureusement, il existe le mode asynchrone. Dans ce mode, après avoir envoyé la requête via send, le script poursuit son exécution, sans bloquer le navigateur. Évidemment, dans ce mode, il faut prévoir quelque chose pour nous prévenir quand la requête a abouti. C'est le rôle de la fonction onreadystatechange (en fait, onreadystatechange est une propriété et non une fonction, mais comme on lui affecte un pointeur vers une fonction nous pouvons nous permettre cet abus de langage). Prenons comme nouvel exemple une requête sur un simple fichier texte :

> Voir le code JavaScript

> Voir le contenu de foo.txt

Comment ça marche ?

C'est le troisième argument de la fonction open (cf. ligne 12) qui spécifie que le mode doit être asynchrone.
L'objet xhr_object possède une propriété readyState (cf. ligne 15) qui prend successivement 5 valeurs récapitulées dans le tableau suivant :

Valeur	Description
0 (uninitialized)	non initialisé
1 (loading)	début du transfert des données
2 (loaded)	données transférées
3 (interactive)	les données reçues sont accssibles en partie
4 (complete)	les données sont complètement accessibles

Code	Description
100	Continue
101	Switching protocols
200	OK
201	Created
202	Accepted
203	Non-Authoritative Information
204	No Content
205	Reset Content
206	Partial Content
300	Multiple Choices
301	Moved Permanently
302	Found
303	See Other
304	Not Modified
305	Use Proxy
307	Temporary Redirect
400	Bad Request
401	Unauthorized
402	Payment Required
403	Forbidden
404	Not Found
405	Method Not Allowed
406	Not Acceptable
407	Proxy Authentication Required
408	Request Timeout
409	Conflict
410	Gone
411	Length Required
412	Precondition Failed
413	Request Entity Too Large
414	Request-URI Too Long
415	Unsupported Media Type
416	Requested Range Not Suitable
417	Expectation Failed
500	Internal Server Error
501	Not Implemented
502	Bad Gateway
503	Service Unavailable
504	Gateway Timeout
505	HTTP Version Not Supported

Et lors de chaque changement d'état de readyState, la fonction onreadystatechange (cf. ligne 14) est appelée. On peut ainsi lui faire faire ce que l'on veut en fonction de l'avancement de la requête. Mais de toute manière, c'est l'état 4 qui nous intéresse et il est généralement très rapidement atteint. Il existe une autre propriété intéressante qui est status et qui représente le code HTTP retourné par la requête. Il est bon de savoir que Firefox déclenche une erreur si on tente d'accéder à cette propriété avant que readyState ne vaille 4. Pour voir toutes les valeurs que peut prendre status, cliquez sur le lien suivant :
> Voir toutes les valeurs

[haut de la page]

4. Transmettre des données

Réaliser une requête et recevoir un résultat, c'est bien. Mais réaliser une requête en transmettant des données c'est mieux. Les données sont transmises de la même façon que lors de la soumission d'un formulaire, c'est-à-dire via l'une des deux méthodes get ou post. Évidemment, si on transmet des données, il faut que la requête porte sur un fichier capable de les interpréter correctement. Dans l'exemple suivant, nous allons envoyer deux chaînes de caractères au fichier strings2.php et celui-ci va nous les retourner « renversées ».

> Voir le code JavaScript

	view plain \| print \| ?
1	var xhr_object = null;
2
3	if(window.XMLHttpRequest) // Firefox
4	xhr_object = new XMLHttpRequest();
5	else if(window.ActiveXObject) // Internet Explorer
6	xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
7	else { // XMLHttpRequest non supporté par le navigateur
8	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
9	return;
10	}
11
12	var method = f.elements["method"][0].checked ? "GET" : "POST";
13	var filename = "strings2.php";
14	var s1 = f.elements["string1"].value;
15	var s2 = f.elements["string2"].value;
16	var data = null;
17
18	if(s1 != "" && s2 != "")
19	data = "s1="+s1+"&s2="+s2;
20
21	if(method == "GET" && data != null) {
22	filename += "?"+data;
23	data = null;
24	}
25
26	xhr_object.open(method, filename, true);
27
28	xhr_object.onreadystatechange = function() {
29	if(xhr_object.readyState == 4) {
30	var tmp = xhr_object.responseText.split(":");
31	if(typeof(tmp[1]) != "undefined") {
32	f.elements["string1_r"].value = tmp[1];
33	f.elements["string2_r"].value = tmp[2];
34	}
35	alert(tmp[0]);
36	}
37	}
38
39	if(method == "POST")
40	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
41
42	xhr_object.send(data);

var xhr_object = null;

if(window.XMLHttpRequest) // Firefox
   xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   return;
}

var method   = f.elements["method"][0].checked ? "GET" : "POST";
var filename = "strings2.php";
var s1       = f.elements["string1"].value;
var s2       = f.elements["string2"].value;
var data     = null;

if(s1 != "" && s2 != "")
   data = "s1="+s1+"&s2="+s2;

if(method == "GET" && data != null) {
   filename += "?"+data;
   data      = null;
}

xhr_object.open(method, filename, true);

xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4) {
      var tmp = xhr_object.responseText.split(":");
      if(typeof(tmp[1]) != "undefined") {
         f.elements["string1_r"].value = tmp[1];
         f.elements["string2_r"].value = tmp[2];
      }
      alert(tmp[0]);
   }
}

if(method == "POST")
   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr_object.send(data);

> Voir le contenu de strings2.php

Comment ça marche ?

Tout commence en JS. Si la méthode sélectionnée est get, les données à transmettre sont concaténées à l'URL (cf. lignes 21-24) et si la méthode est post, elles sont envoyées via la fonction send (cf. ligne 42). Dans ce dernier cas, on doit aussi préciser l'encodage en spécifiant l'en-tête adéquat avec setRequestHeader (cf. ligne 40).
Ensuite, côté PHP, les données sont reçues, quelle que soit la méthode de transmission et les chaînes sont renversées grâce à strrev (cf. lignes 3-12). Les données reçues via la méthode POST sont décodées grâce à utf8_decode sinon les caractères accentués sont mal interprétés. La chaîne affichée par le code PHP (et retournée, donc) est de la forme Données reçues en XXX:STRING1:STRING2: où XXX vaut soit GET soit POST et où STRING1 et STRING2 sont les chaînes renversées. On précise aussi, grâce à la fonction header le type des données qui vont être transférées depuis le serveur (ici, du texte utilisant le jeu de caractères iso-8859-1) (cf. ligne 1).
Enfin, côté JS, il ne reste plus qu'à séparer les données, avec split et à mettre les chaînes dans les champs correspondants (cf. lignes 30-34).

[haut de la page]

5. Exemple concret d'utilisation

Comme nous l'avons vu dans les exemples précédents, nous disposons d'une grande liberté d'action avec cet outil. On peut simplement afficher le résultat de la requête dans une boîte d'alerte. On peut également l'afficher dans un div (ou tout autre élément HTML). Mais on peut tout aussi bien, si la chaîne récupérée représente du code JS, exécuter ce code grâce à eval.
Voici un exemple dans lequel une liste déroulante est peuplée en fonction du choix réalisé dans une première liste. Le code JS qui permet de remplir la seconde liste est généré côté serveur, suite à une requête MySQL et simplement évalué côté client.

> Voir le code JavaScript

	view plain \| print \| ?
1	var l1 = f.elements["list1"];
2	var l2 = f.elements["list2"];
3	var index = l1.selectedIndex;
4	if(index < 1)
5	l2.options.length = 0;
6	else {
7	var xhr_object = null;
8
9	if(window.XMLHttpRequest) // Firefox
10	xhr_object = new XMLHttpRequest();
11	else if(window.ActiveXObject) // Internet Explorer
12	xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
13	else { // XMLHttpRequest non supporté par le navigateur
14	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
15	return;
16	}
17
18	xhr_object.open("POST", "species.php", true);
19
20	xhr_object.onreadystatechange = function() {
21	if(xhr_object.readyState == 4)
22	eval(xhr_object.responseText);
23	}
24
25	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
26	var data = "family="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";
27	xhr_object.send(data);
28	}
29

ID	Family	Species
1	Bovidés	vache
2	Bovidés	taureau
3	Bovidés	zébu
4	Bovidés	buffle
5	Bovidés	yack
6	Canidés	chien
7	Canidés	loup
8	Canidés	renard
9	Canidés	lycaon
10	Équidés	âne
11	Équidés	cheval
12	Équidés	zèbre
13	Félidés	chat
14	Félidés	lynx
15	Félidés	puma
16	Félidés	tigre
17	Félidés	lion
18	Félidés	Frosty

> Voir le contenu de species.php

> Voir la table « Animals »

Comment ça marche ?

Dans cet exemple, seules les notions couvertes dans les sections 1. à 4. sont utilisées, ainsi que quelques notions élémentaires de JS et de PHP. Vous devriez donc logiquement pouvoir comprendre le code par vous-même. Si, si, j'en suis sûr.

[haut de la page]

6. Propriétés et méthodes

Cette section n'est pas exhaustive. Elle présente les propriétés et méthodes les plus utiles, même s'il est vrai que cette notion est assez subjective. Pour une liste complète, je vous invite à consulter la MSDN dont un lien est donné en section 7.

Propriétés

onreadystatechange : Spécifie la fonction à appeler lorsque la propriété readyState varie. lecture/écriture. (Cf. section 3 pour les valeurs)
readyState : Représente l'état d'avancement de la requête. lecture seule.
responseText : Chaîne de caractères contenant la réponse à la requête. lecture seule.
responseXML : Objet XML contenant la réponse à la requête. lecture seule.
status : Représente le code HTTP retourné par la requête. lecture seule. (Cf. section 3 pour les valeurs)

Méthodes

abort() : Annule la requête courante.
getAllResponseHeaders() : Retourne les noms et les valeurs de tous les en-têtes HTTP sous forme d'une chaîne.
getResponseHeader(headerName) : Récupère la valeur d'un certain en-tête HTTP (headerName) sous forme d'une chaîne.
open(method, url[, asynchrone[, user[, password]]]) : Initialise une requête en spécifiant la méthode (method), l'URL (url), si le mode est asynchrone (asyncFlag vaut true ou false) et en indiquant d'éventuelles informations d'identification (user et password).
send(data) : Envoie la requête HTTP au serveur en transmettant éventuellement des données (data doit alors être différent de null) sous forme d'une « postable string » (je suis preneur pour une traduction) ou sous forme d'un objet DOM.
setTimeouts(timeout) : Spécifie la durée maximale (timeout) accordée à une requête pour quelle s'effectue complètement.
setRequestHeader(headerName, headerValue) : Spécifie un en-tête HTTP (headerName et headerValue) à envoyer avec la requête.

[haut de la page]

7. Quelques liens

Des exemples d'utilisation :

Une petite page de démonstration (qui perd un peu de son sens face à ce tutorial) :
http://robloche.free.fr/javascript/js_request/test.html
Et voici le concept poussé un plus loin, avec un jeu de morpion acceptant un grand nombre de participants (enfin, deux par jeu, quand même). J'ai écrit dans ce but une classe d'abstraction qui permet de manipuler ces objets sans se soucier du navigateur. Cette classe constitue une surcouche aux objets XMLHTTPRequest et permet de réaliser certaines opérations complexes en ne fournissant que quelques paramètres :
http://robloche.free.fr/javascript/morpion/morpion.php
Une nouvelle mouture de Google, actuellement en version beta, propose des suggestions pour votre recherche, en utilisant cette technique :
http://www.google.com/webhp?complete=1&hl=en
Et bien sûr, tout ceux qui ont un compte Gmail savent à quel point il est fait un usage intensif de cette technologie :
http://gmail.google.com
Depuis quelques mois, on voit régulièrement fleurir de nouvelles utilisations de ces requêtes JS sur le net. Et ça ne risque pas de s'arrêter, tant il est vrai que ça simplifie la vie des visiteurs. Observez bien les sites que vous fréquentez et essayez de deviner s'ils utilisent cette technique.

D'autres liens utiles :

La page de la MSDN détaillant toutes les méthodes et propriétés des objets XMLHTTPRequest :
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjpmeserverxmlhttp.asp
Un article intitulé Dynamic HTML and XML: The XMLHttpRequest Object sur developer.apple.com :
http://developer.apple.com/internet/webcontent/xmlhttpreq.html
Une page traitant également du sujet sur www.mozilla.org :
http://www.mozilla.org/xmlextras/
Un article intitulé Using the XML HTTP Request object introduisant ces mêmes objets :
http://jibbering.com/2002/4/httprequest.html
Comme vous l'avez remarqué, tous les codes visibles sur cette page présentent une coloration syntaxique bien sympatique. Celle-ci est faite en JS et CSS grâce à un bel outil (compatible IE et Firefox) créé par Dream Projections Inc. :
http://www.dreamprojections.com/SyntaxHighlighter/Default.aspx

[haut de la page]

Les erreurs fréquentes

2010-09-10T18:16:00.001-07:00

Cet article est destiné à vous aider à résoudre vos problèmes de scripts. Il se compose de 4 pages :
- La liste des erreurs courantes (cette page),
- Les réponses à apporter aux erreurs de syntaxe,
- Les réponses à apporter aux anomalies de fonctionnement,
- Une aide pour commencer le débug.

Comment débugger

On peut distinguer deux types d'erreurs :

Les erreurs de syntaxe détectées par le navigateur,
Les erreurs qui amènent à un fonctionnement différent de celui attendu.

Voici la liste des messages d'erreur les plus courants. En face de chaque message, un ou plusieurs liens redirigent vers une explication de l'origine de l'erreur et vers une correction possible.

Une seconde liste présente les fonctionnements anormaux des scripts et les moyens d'y remédier.

La liste des erreurs courantes

Comment repérer le message d'erreur retourné par le navigateur?
Retrouvez votre message d'erreur et voyez la réponse à apporter pour débugger.

Libellé de l'erreur	Aller à
'XXXXX' est indéfini	Erreur de majuscules/minuscules XXXXX est une fonction Erreur dans la structure du script
'XXXXX' n'est pas un objet	Erreur de majuscules/minuscules XXXXX est une fonction Erreur dans la structure du script
'parent.XXXXX' est indéfini 'top.XXXXX' est indéfini	Erreur due à l'utilisation des frames
Constante de chaîne non terminée	Erreur de déclaration de chaîne de caractères
')' attendu	Erreur d'appel à une fonction Erreur de déclaration de chaîne de caractères
';' attendu	Erreur de structure Erreur de déclaration de chaîne de caractères
Propriété ou méthode non gérée par cet objet	Erreur de programmation objet Incompatibilité entre navigateurs
Objet attendu	Erreur de structure Erreur d'écriture

REMARQUE : Les messages d'erreur varient en fonction du navigateur (Netscape, IE, Opera, ...) , de l'environnement (Windows, Mac, Linux, ...) et de la langue.

Les fonctionnements anormaux

Un fonctionnement anormal n'est pas une erreur détectée par le navigateur, mais une erreur de conception ou d'écriture qui donne des résultats différents de ceux attendus.

Anomalie de fonctionnement	Aller à
Le résultat d'un test if est incohérent	Erreur dans l'écriture du test if
Le résultat d'une fonction est incohérent	Erreur dans l'écriture de l'appel à une fonction
Le script ne se termine pas Boucle infinie	Erreur de déclaration de boucle
Les calculs mathématiques sont inexacts	Anomalie de calcul
Impossible de lire un cookie	Gestion des cookies
Fonctionnement différent entre local et online	Différence local / online Gestion des cookies

Deux exemples pour commencer

2010-09-10T18:15:00.000-07:00

Les expressions régulières sont des objets qui existent dans la plupart des langages de programmation, mais qui sont mal connus, car relativement complexes.
Ce tutorial a pour objet de vous montrer comment les expressions régulières fonctionnent et surtout à quoi elles servent.
C'est aussi l'occasion pour moi de les apprendre une fois pour toute, car leur puissance dépasse largement leur difficulté :)

Avant de voir comment programmer les expressions régulières, je pense qu'il faut d'abord voir à quoi cela peut servir !
Les expressions régulières permettent de réaliser des traitements sur des chaînes de caractères, traitements qui peuvent être assez complexes à réaliser sans l'aide de ces fameuses expressions.

1er exemple : Trouver des mots dans un texte
Comment savoir si un mot est présent dans un texte. Voici le code correspondant :
function SearchRegExp1(f) {
  var lemot = f.mot.value
  var exp=new RegExp(lemot,"g");
  if ( exp.test(f.texte.value) ) {alert("Le mot ["+lemot+"] a été trouvé :)"); }
  else {alert(" E R R E U R !\n\nLe mot ["+lemot+"] n'est pas présent !!!!"); }
}

2ème exemple : Est-ce un login valide ?
La principale utilité des expressions régulières en javascript est de vérifier la saisie dans un formulaire.
Cette fonction vérifie que le login saisi est bien formaté : de 3 à 8 caractères et sans caractères spéciaux (uniquement des chiffres et des lettres).
Voici le code correspondant :
function VerifLogin(login) {
  var exp=new RegExp("^[a-zA-Z0-9]{3,8}$","g");
  if ( exp.test(login) ) {alert("Le login ["+login+"] est valide :)"); }
  else {alert(" E R R E U R !\n\nLe login ["+login+"] n'est pas valide !!!!"); }
}

Les chaînes de caractères

2010-09-10T18:14:00.000-07:00

Tous les langages de programmation prévoient une gestion des chaînes de caractères. JavaScript est particulièrement adapté pour le traitement des chaînes.

1 - La déclaration des chaînes
2 - Les opérations sur les chaînes
3 - Des exemples utiles

La déclaration des chaînes

La déclaration
Pour déclarer une chaîne de caractères, vous pouvez utiliser les guillemets (") ou l'apostrophe (').
   var chaine1="Bonjour";
   var chaine2='Bonjour';
Ces deux lignes ont le même effet.

Cela se corse quand il s'agit d'initialiser une chaîne avec un de ces caractères :
   var chaine1="Bonjour l'ami";
   var chaine2='Je vous dis "Bonjour"';
Le secret est d'alterner les guillemets et les apostrophes selon les caractères spéciaux à afficher.

Il faut veillez à ne pas fermer la chaîne de caractères avant sa fin normale pour éviter les erreurs javascript. Exemple de déclaration incorrecte :
   var chaine1="Je vous dis "Bonjour"";
                            ^ici, le " indique la fin de chaîne

Il existe aussi une autre solution :
   var chaine1="Je lui dis \"Bonjour l'ami\"";
La variable chaine1 contient Je lui dis "Bonjour l'ami". Javascript a interprété \" comme un guillemet.

Les types de variables javascript
Les variables javascript ne sont pas typées, c'est-à-dire qu'elles n'ont pas de type prédéfini (entier, chaîne, ...) comme dans les autres langages. C'est le navigateur qui interprète dynamiquement le type le plus approprié. Par exemple :
   var chaine="azerty";
   var pi=3.14159;
La variable chaine est initialisée avec une chaîne de caractères.
La variable pi est initialisée avec un nombre.

Une variable peut être transformée en une chaîne de caractères à tout moment. Il est possible de modifier dynamiquement le type de la variable :
   var chaine="azerty";
   var pi=3.14159;
   chaine=pi;
   pi=pi+"2654";
A la fin de ce script, chaine est un nombre qui vaut 3.14159 ;
pi est une chaîne qui contient "3.14152654".

La différence peut sembler sans importance. Il n'en est rien. Quand une variable est un nombre, il est possible de lui appliquer des opérations (addition, multiplication, ...). Quand une variable est de type chaîne de caractères, on peut lui appliquer les méthodes propres aux objets chaînes.
JavaScript n'est pas exigeant sur le type des variables, mais si vous essayez d'appliquer une méthode de traitement des chaînes à un nombre, vous risquez une errreur.

Les opérations sur les chaînes
La concaténation
L'opération de base est la concaténation de chaînes. Elle consiste à assembler deux chaînes en une seule. L'opérateur est le +, à ne pas confondre avec l'opérateur addition qui s'applique aux nombres.
   var chaine1="Vive le ";
   var chaine2="JavaScript";
   var chaine=chaine1+chaine2;
La variable chaine contient après ce script "Vive le JavaScript".

La concaténation est une opération simple et très utile.

La longueur d'une chaîne
Une chaîne de caractères en javascript est un objet string sur lequel s'appliquent des propriétés et des méthodes. (Voir la page JavaScript, langage Objet pour plus d'informations)
La propriété length indique le nombre de caractères de la chaîne.
Pour une chaîne définie par var chaine="azerty";, chaine.length retourne le nombre de caractères, ici 6 caractères.

Récupérer le n^ième caractère
La méthode charAt(n) récupère le caractère n. Attention, le premier caractère a comme indice 0.
Pour une chaîne initialisée par var chaine="azerty", chaine.charAt(1) retourne "z".

Extraire une sous-chaîne
Il est utile de pouvoir extraire un morceau d'une chaîne. Par exemple, déclarons la variable date="15/08/2000". La question est de récupérer le jour, le mois et l'année dans 3 variables différentes.
   var date = "15/08/2000";
   var jour = date.substring(0,2);
   var mois = date.substring(3,5);
   var annee = date.substring(6,10);

La méthode substring attend 2 paramètres :
- l'indice du premier caractère (inclus),
- l'indice du dernier caractère (exclus).
Si les deux paramètres sont inversés, javascript rétablit l'ordre logique :
chaine.substring(6,10) et chaine.substring(10,6) auront le même effet.
Si le deuxième paramètre est omis, la chaine retournée commence à l'indice indiqué et se termine à la fin de la chaîne.

Retrouver une sous-chaîne dans une chaîne
Deux méthodes permettent de retrouver une sous-chaîne d'une chaîne. Ces méthodes retrouvent la position d'une chaîne et retourne son indice.
Par exemple, vous avez dans une variable javascript un nom de domaine et vous souhaitez retrouver l'extension :
   var domaine="www.toutjavascript.com";
   var extension=domaine.substring(domaine.lastIndexOf("."));

La méthode lastIndexOf(souschaine) retourne l'indice de la dernière occurrence de souschaine.
Si la sous-chaîne n'est pas trouvé, lastIndexOf retourne -1.

Retrouver une sous-chaîne dans une chaîne, le retour
Il existe une autre méthode très proche
   chaine.indexOf(souschaine,debut)
qui retourne l'indice de la première occurrence de souschaine trouvée à partir du caractère debut de chaine.
Cette méthode permet par exemple d'extraire le domaine d'une url complète :
   var url="http://www.toutjavascript.com/magicmenu/index.html;
   var domaine=url.substring(7,url.indexOf("/",7));

La variable domaine contient dans cet exemple www.toutjavascript.com qui est une sous-chaine de url qui commence au caractère 7 et qui se termine au premier slash (/) après "http://".

MAJUSCULES / minuscules
JavaScript offre deux méthodes pour transformer les lettres (et uniquement les lettres) d'un mot en majuscules ou en minuscules.
   var chaine="Ceci est un texte";
   var maj=chaine.toUpperCase();
   var min=chaine.toLowerCase();

A la fin de ce script, maj contient :
   CECI EST UN TEXTE
et min contient :
   ceci est un texte

On peut penser que ces traitements sont superflus. Ils permettent en fait de rendre plus homogène une saisie.
Imaginez que vos visiteurs remplissent un formulaire avec leurs coordonnées postales, certains mettront sans doute leur nom sans majuscule, le pays en minuscules... Grâce à ces méthodes, vous pourrez corriger leur saisie et avoir un fichier client homogène. Un exemple complet est traité dans le paragraphe suivant.

Quelques exemples utiles
Ce paragraphe présente des applications concrètes du traitement des chaînes de caractères.

Vérifier qu'un mail est valide
Pour vérifier qu'un mail est valide, il suffit de tester la présence de @ et du point.
   function verifiermail(mail) {
      if ((mail.indexOf("@")>=0)&&(mail.indexOf(".")>=0)) {
         return true
      } else {
         alert("Mail invalide !");
         return false
      }
   }
Cette fonction vérifie la présence du caractère @ et du . pour vérifier la validité. Si ces 2 caractères sont trouvés, la fonction retourne true sinon, elle affiche un message et retourne false.
Les noms propres
Voici une fonction qui ajoute une majuscule à la première lettre d'un mot.
Par exemple pierre, Pierre ou PIERRE deviennent Pierre.
   function nompropre(mot) {
      var m=mot.charAt(0).toUpperCase() +
       mot.substring(1).toLowerCase();
      return m;
   }
Dans cette fonction, on récupère le premier caractère pour le mettre en majuscule et on lui ajoute le reste du mot forcé en minuscules.
Remplacer toutes les occurrences d'une sous-chaîne
Cette fonction recherche dans une chaîne expr toutes les occurrences d'une sous-chaîne a et les remplace par une sous-chaîne b.
Ce script fonctionne pour toutes les versions de navigateurs au-delà de 3.

   function Remplace(expr,a,b) {
      var i=0
      while (i!=-1) {
         i=expr.indexOf(a,i);
         if (i>=0) {
            expr=expr.substring(0,i)+b+expr.substring(i+a.length);
            i+=b.length;
         }
      }
      return expr
   }

Les fonctions mathématiques

2010-09-10T18:12:00.001-07:00

avaScript est tout à fait adapté pour les calculs sur le poste du visiteur, de nombreuses fonctions mathématiques ont été implémentées.
Voici le sommaire de cette page.

1 - La conversion de chaînes en nombres
2 - L'objet JavaScript Math
3 - Des exemples utiles

La conversion de chaînes de caractères en nombres

Les fonctions de conversion
Une précédente page décrit en détail tous les traitements sur les chaînes de caractères.
En JavaScript, les variables ne sont pas typées, mais il est utile de savoir transformer une chaîne en un entier ou un réel (nombre à virgule).
Imaginons ce script :
   var chaine="3.14";
   var entier=parseInt(chaine);
   var reel=parseFloat(chaine);

A l'issue de ce script, entier contient 3 et reel contient 3.14

Est-ce un nombre ?
Supposons maintenant que la variable chaine soit initialisée avec "azerty"
   var chaine="azerty";
   var entier=parseInt(chaine);
   var reel=parseFloat(chaine);
   var rate=isNaN(entier);

A l'issue du script, entier et reel contiennent NaN, car "azerty" ne peut pas se convertir en nombre.
Pour détecter que chaine a bien le format d'un nombre, il existe une fonction isNaN(valeur) qui renvoie :
- true si valeur n'est pas un nombre
- false si valeur est un nombre
Dans ce cas, rate est à vrai car la conversion a échoué.

ATTENTION, isNaN(valeur) retourne vrai si valeur  N'est PAS un nombre
Ces trois fonctions (attention aux majuscules) sont très utiles pour manipuler des variables en étant sur d'avoir affaire à des nombres. Cela permet par exemple de convertir une saisie dans un formulaire et de vérifier que le visiteur a bien entré un nombre (prix, quantité, âge, année, ...)

L'objet JavaScript Math
En JavaScript, la plupart des fonctions mathématiques sont des méthodes de l'objet Math. (Voir la page JavaScript, langage Objet pour plus de détail sur la programmation Objet)

Un exemple
Voici sûrement la fonction la plus utilisée, la génération d'un nombre aléatoire.
var nb=Math.random();
La méthode random() est appliquée à l'objet Math et retourne un nombre compris entre 0 et 1. Toutes les autres fonctions mathématiques sont appelées sur le même principe.

Les fonctions de base

Math.abs(a)	Retourne la valeur absolue de a
Math.round(a)	Retourne l'entier arrondi le plus proche de a
Math.ceil(a)	Retourne l'entier immédiatement supérieur (ou égal) à a
Math.floor(a)	Retourne l'entier immédiatement inférieur (ou égal) à a
Math.sqrt(a)	Retourne la racine carrée de a
Math.log(a)	Retourne le logarithme de a
Math.ln(a)	Retourne le logarithme népérien de a
Math.exp(a)	Retourne l'exponentielle de a
Math.pow(a,b)	Retourne a à la puissance b
Math.min(a,b)	Retourne le plus petit des paramètres a ou b
Math.max(a,b)	Retourne le plus grand des paramètres a ou b

Les fonctions trigonométriques
Réservées aux initiés !

Math.cos()	Retourne le cosinus d'un angle en radians
Math.sin()	Retourne le sinus d'un angle en radians
Math.tan()	Retourne la tangente d'un angle en radians
Math.acos()	Retourne l'arc cosinus en radians
Math.asin()	Retourne l'arc sinus en radians
Math.atan()	Retourne l'arc tangente en radians

Des exemples utiles
Générer un nombre aléatoire entier entre 1 et N
Imaginons le lancer de trois dés à 6 faces :    function aleatoire(N) {
      return (Math.floor((N)*Math.random()+1));
   }

La fonction retourne un nombre aléatoire entier entre 1 et N

Une horloge dynamique à aiguilles
REMARQUES :
Ce paragraphe s'appelle Exemples utiles :)
Donc, vous n'y trouverez pas les scripts de calcul d'aires de triangles, cercles, losanges...
Ni les jeux sans intérêt "plus petit-plus grand", "devine un nombre", etc...

Une horloge à aiguilles, ca peut être marrant, non ? Et en plus, c'est très bon pour revoir la trigonométrie.
Télécharger le script

Un convertisseur francs-euros
Saisissez des francs ou des euros et cliquez sur "Convertir"
Utile pour les sites de commerce en ligne...
Télécharger le script

Javascript et les Frames

2010-09-10T18:11:00.001-07:00

Les frames sont de plus en plus rejetées par le monde de l'internet. La plupart des grands sites les ont abandonnées et ont choisi de recopier sur chaque page le menu et tous les liens de leur navigation. Nous allons tout de même aborder la mise en place des frames et surtout leur intérêt dans la programmation JavaScript.

1 - Comment intégrer des frames ?

Pour créer une page séparée en plusieurs frames, il faut à l'origine une page principale qui remplace la zone BODY par la déclaration et le positionnement des frames.
La structure classique d'une page découpée en frames est celle-ci.

<HTML>
<HEAD>
<TITLE>Titre de page</TITLE>
</HEAD>

<FRAMESET cols="140,*">
 <FRAMESET rows="*,50" frameborder=0>
  <FRAME name="FRAME1" src="frame1.html">
  <FRAME name="FRAME2" src="frame2.html">
 </FRAMESET>
 <FRAME name="FRAME3" src="frame3.html">
</FRAMESET>

Cette déclaration crée une page découpée de la sorte :

FRAME 1	FRAME 3
FRAME 2

Nous n'allons pas voir en détail comment créer des frames, c'est là du langage HTML et la documentation est riche dans ce domaine.

2 - Le JavaScript dans les frames
La première application qui vient à l'esprit avec les frames est la création de menu. C'est en effet la principale utilité des frames - nous verrons qu'il y en a d'autres.
En HTML, pour créer un lien qui charge une page dans une frame, il faut écrire :

 <A HREF="page.html" target="nom_frame">Le Lien</A>

Dans la balise A, target contient le nom de la frame à charger avec le fichier (ici page.html).
En JavaScript, pour charger une page dans une frame, on utilise une des instructions suivantes :

 parent.frames[nu_frame].window.location="page.html"

Ici, on fait appel au tableau frames indicé par nu_frame. Ici la frame numéro nu_frame contient page.html.

 parent.frames["frame1"].window.location="page.html"

Maintenant, on accède au tableau des frames par son nom. Le résultat est identique avec l'instruction suivante :

 parent.frame1.window.location="page.html"

Si vous souhaitez charger 2 pages dans 2 frames différentes avec 1 seul clic, JavaScript le permet.
On commence par déclarer une fonction charger avec en paramètre les noms des pages à charger dans les 2 frames :

 function charger(nom_page1,nom_page2) {
  parent.frames["frame1"].window.location=nom_page1;
  parent.frames["frame2"].window.location=nom_page2;
 }

On suppose dans cet exemple que les frames s'appellent frame1 et frame2.
On crée ensuite un lien qui appelle la fonction JavaScript charger :

 <A HREF="JavaScript:charger('page1.html','page2.html')">1 Clic et 2 pages chargées</A>

La seconde application est la sauvegarde d'informations tout au long d'une session de navigation. Les frames remplacent avantageusement les cookies s'il s'agit de stocker des informations juste pendant la navigation du visiteur. Les informations stockées sont perdues dès que le visiteur ferme son navigateur ou s'il remplace votre page par une autre.
Pour stocker des informations, il suffit de déclarer une variable dans l'entête de la fenêtre mère (celle qui contient la déclaration des frames grâce aux balises <FRAMESET>). Cette variable peut être juste une valeur (nombre, chaîne, ...) ou un objet complexe.

Exemple de stockage de l'heure d'ouverture de la session
Dans l'entête (entre les balises <HEAD> et </HEAD>) de la fenêtre parent, on déclare :

 <SCRIPT language="javascript">
  var heure=new Date();
  heure=date.getTime() // transformation de la date en millisecondes
 </SCRIPT>

Rappel : la fenêtre parent est celle qui contient la déclaration des frames

Dans la frame1, on a accès à cette variable en codant :

 <SCRIPT language="javascript">
  var h=parent.heure;
 <SCRIPT>

Cette possibilité peut être étendue aux fonctions. De la même façon que la fenêtre parente peut sauver des variables, il est possible de coder des fonctions dans son entête et de les récupérer ensuite dans toutes les frames.

Exemple de déclaration d'une fonction dans la page parente
On souhaite utiliser dans toutes les frames une fonction qui affiche une ligne de copyright.
On commence par déclarer dans l'entête de la fenêtre parente la fonction AffCopyright().

 <SCRIPT language="javascript">
 function AffCopyright() {
  document.write("<CENTER>Copyright 2000 - Tous droits réservés</CENTER>"); 
 }
 <SCRIPT>

Dans toutes les frames du site, il suffit, pour afficher cette note de copyright, d'appeler la fonction ainsi :

 <SCRIPT language="javascript">parent.AffCopyright()<SCRIPT>

L'intérêt est évidemment la facilité de mise à jour sur toutes les pages du site de cette note de copyright. Il suffit de changer la fonction dans la page parent et les modifications se reportent automatiquement dans toutes les pages du site où la fonction est intégrée.

Les frames sont très utiles dans la conception de sites :

Elles facilitent la création et la mise à jour de la navigation
Elles offrent des possibilités de programmation en javascript (sauvegarde d'informations)

Javascript et les cookies

2010-09-10T18:10:00.001-07:00

Avec JavaScript, il est possible de programmer les célèbres cookies.
Nous allons voir ici à quoi servent les cookies et comment stocker et récupérer des informations grâce à eux.
En bas de cette page, vous trouverez des exemples de programmation de cookies.

1 - A quoi servent les cookies ?

Les cookies sont très utilisés, par tous les sites commerciaux et par de plus en plus de sites perso. La raison est simple. Un cookie permet de stocker de manière permanente des informations sur le poste du visiteur, qui pourront être récupérées lors des futures visites.
Voyons quelques unes des principales informations stockées dans les cookies :

Le nombre de visites, la date de la dernière visite,... (Exemple : Tout JavaScript.com)
Un identifiant et un mot de passe pour une reconnaissance automatique du visiteur (Exemple : CDNow)
Une liste de mots-clés utilisés dans les moteurs de recherche pour cibler les publicités à afficher (Exemple : beaucoup de moteurs de recherche)
Une liste de paramètres de préférences de navigation pour personnaliser la page présentée (Exemple : Mon Yahoo !)
Des informations à transférer d'une page à l'autre du site.

2 - Comment STOCKER des informations ?
Le type d'informations à stocker n'a aucune influence sur le code. Un cookie est un fichier de texte qui contient une chaîne de caractères contenant les informations concaténées.
Voici la fonction qui permet de stocker une information dans un cookie

function SetCookie (name, value) {
 var argv=SetCookie.arguments;
 var argc=SetCookie.arguments.length;
 var expires=(argc > 2) ? argv[2] : null;
 var path=(argc > 3) ? argv[3] : null;
 var domain=(argc > 4) ? argv[4] : null;
 var secure=(argc > 5) ? argv[5] : false;
 document.cookie=name+"="+escape(value)+
  ((expires==null) ? "" : ("; expires="+expires.toGMTString()))+
  ((path==null) ? "" : ("; path="+path))+
  ((domain==null) ? "" : ("; domain="+domain))+
  ((secure==true) ? "; secure" : "");
}

La valeur à stocker est associée à un nom de cookie.
La date d'expiration permet de définir la longévité du cookie. Si elle est omise, le cookie est détruit à la fermeture du navigateur.
Le path indique simplement d'où vient le cookie.
Le nom de domaine permet d'identifier le cookie parmi tous ceux stockés sur la machine.
La variable secure indique si l'accès au cookie est protégé.

Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la fonction comme ceci :

 var pathname=location.pathname;
 var myDomain=pathname.substring(0,pathname.lastIndexOf('/')) +'/';
 var date_exp = new Date();
 date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));
 // Ici on définit une durée de vie de 365 jours
 SetCookie("prenom","Arthur",date_exp,myDomain);

3 - Comment RECUPERER les informations ?

Voyons un cookie qui contiendrait les informations suivantes :

prenom = Arthur
nb_visite = 3

Pour récupérer l'information prenom, il faut extraire, de la chaîne de caractères composant le cookie, le nom de la variable soit prenom. La valeur de prenom est la chaine de caractères située immédiatement après et séparée par ';' et par ' '.
Voici le code des fonctions nécessaires à la récupération d'une information :

function getCookieVal(offset) {
 var endstr=document.cookie.indexOf (";", offset);
 if (endstr==-1)
        endstr=document.cookie.length;
 return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
 var arg=name+"=";
 var alen=arg.length;
 var clen=document.cookie.length;
 var i=0;
 while (i<clen) {
  var j=i+alen;
  if (document.cookie.substring(i, j)==arg)
                        return getCookieVal (j);
                i=document.cookie.indexOf(" ",i)+1;
                        if (i==0) break;}
 return null;
}

Si la variable demandée n'est pas contenue dans le cookie, elle est considérée comme valant null.
Pour récupérer la variable prenom, il suffit d'appeler la fonction :

 le_prenom=GetCookie("prenom");

Maintenant, vous savez tout. Il ne reste plus qu'à faire preuve d'imagination. La gestion des cookies est toujours la même, mais leur utilisation est illimitée :-)

le DHTML

2010-09-10T18:09:00.001-07:00

Le DHTML est devenu incontournable depuis que la plupart (la totalité ?) des visiteurs utilisent des navigateurs qui supportent ce langage.
Malheureusement, l'apprentissage du DHTML est complexe, tant à cause des possibilités offertes qu'en raison des soucis de compatibilité entre navigateurs.

Ce tutorial sur le DHTML est donc découpé en plusieurs parties :

Partie 1 - Les bases du DHTML
   Introduction au DHTML : usage et (in)compatibilité
   Manipulation de calques selon la norme officielle
   Reconnaître les navigateurs

Partie 2 - Assurer la compatibilité
   Assurer la compatibilité
   Un exemple complet et détaillé

Partie 3 - Fonctionnement avancé (A venir)

Les formulaires

2010-09-10T18:08:00.000-07:00

Sommaire du document
La partie formulaire HTML et JavaScript est très riche. Ce document est découpé en plusieurs parties.

Les éléments de formulaires en détail
Toutes les balises HTML en détail pour créer des zones de texte, des boutons, des listes, des cases à cocher...
L'accès aux éléments de formulaire par JavaScript
Comment détecter les événements de l'utilisateur, manipuler les propriétés des éléments de formulaires...
Trucs et astuces
Par exemple donner le focus, empêcher plusieurs clics sur un bouton, détecter la touche [Entrée], ajouter des lignes à une liste, ...
Contrôles de saisies
Cette page présente les différents contrôles de saisie que l'on peut faire dans un formulaire : saisir un nombre, une date, un email...

Introduction aux formulaires
Les formulaires sont la base des échanges entre le site et le visiteur.
JavaScript ne peut pas échanger d'information à partir de fichier texte ou de base de données.
Pour permettre au visiteur de transmettre des informations, les formulaires sont indispensables. Et grâce au JavaScript, il est possible de les rendre très pratiques.

Le javascript associé aux formulaire permet :

d'assister et de guider le visiteur,
de contrôler la saisie,
de faire des traitements (calcul, manipulation de chaînes de caractères),
d'envoyer les résultats au serveur.

Les popups, le guide définitif

2010-09-10T18:07:00.000-07:00

Devant le nombre de questions concernant les popups, devant la richesse des options et des possibilités, je crois que ce tutorial est indispensable. Il est découpé en 2 pages :
1 - Les bases des popups
2 - Aller plus loin

C'est quoi un popup ?
Le mot popup peut être traduit par fenêtre surgissante. L'ouverture de cette fenêtre est déclenchée par un événement utilisateur (clic, ouverture de site, minuterie, ...) via une seule ligne de code javascript. Un popup est ouvert grâce à la méthode (ou fonction) appelée sur l'objet window. Cette fonction attend 3 paramètres :
  window.open( page [,nom] [,options] )

Les trois paramètres sont des chaînes de caractères.
- page contient l'adresse de la page à afficher.
- nom contient le nom du popup qui va être ouvert. Non obligatoire.
- options est une chaîne de caractères contenant les options de paramétrage du popup. Non obligatoire.
Les 2 derniers paramètres ne sont pas indispensables.

Pour ouvrir un popup sur un lien, voici la syntaxe HTML :
   <A href="javascript:popup('popup.html')">Ouverture popup basique</A>
avec comme déclaration la fonction popup() :
  <SCRIPT language="javascript">
    function popup(page) {
      window.open(page);
    }
  </SCRIPT>
Voici le résultat de ce lien:
Ouverture popup basique

Les options d'affichage
Il est possible grâce au second paramètre d'affecter un nom au popup ouvert. Ainsi les autres popups seront ouverts dans le même popup. Cela évite d'envahir l'écran du visiteur avec de multiples fenêtres. Pour remettre le popup en premier plan, voir la page "Aller plus loin".
Sans le paramètre nom, un nouveau popup est ouvert à chaque fois.

Le dernier paramètre contient une chaîne d'options d'affichage. Chaque option est séparée par une virgule (à ne pas confondre avec la syntaxe des feuilles de style qui demande un point-virgule). Voici la liste des options :

Propriétés	Effets	Valeurs possibles
directories	Affichage de la barre de liens	yes \| no
menubar	Affichage de la barre de menu	yes \| no
status	Affichage de la barre de statut	yes \| no
location	Affichage de la zone d'adresse	yes \| no
scrollbars	Affichage des barres de scrolling	yes \| no \| auto
resizable	Autorise le redimensionnement du popup	yes \| no
height	Hauteur en pixels	nombre entier
width	Largeur en pixels	nombre entier
left	Position horizontale en pixels sur l'écran	nombre entier
top	Position verticale en pixels sur l'écran	nombre entier
fullscreen	Popup en plein écran (version 5 et +)	yes \| no

Quelques exemples de combinaisons d'options :

Popup positionné
Position fixe en haut à gauche
OuvrirPopup('popup.html','','top=10,left=10')

Popup minimaliste
Aucune barre de menu, non redimensionnable, taille fixe
OuvrirPopup('popup.html', '', 'resizable=no, location=no, width=200, height=100, menubar=no, status=no, scrollbars=no, menubar=no')

Popup fullscreen
Page en plein écran (version 5 et +). Faire un ALT [F4] pour fermer la fenêtre
OuvrirPopup('popup.html','','fullscreen=yes')

Voici la fonction javascript qui ouvre un popup pour tous ces exemples :
  <SCRIPT language=javascript>
    function OuvrirPopup(page,nom,option) {
       window.open(page,nom,option);
    }
  </SCRIPT>

Les limites de javascript

2010-09-10T18:06:00.000-07:00

Cette page est destinée à définir précisément les possibilités et les limites du language JavaScript. De nombreux webmasters pensent que javascript permet toutes les fantaisies et répond à tous les besoins. C'est loin d'être le cas.

Si vous confondez Java et JavaScript, je vous invite à lire cette page de comparaison.
Nous allons commencer par voir ce qu'il est possible de faire avec JavaScript. Nous verrons ensuite comment la sécurité implique des limites au langage. En fin nous aborderons des alternatives avec d'autres langages pour internet.

1 - Ce que permet JavaScript
Le language JavaScript est parfaitement adapté pour des traitements sur le poste du navigateur. Voici quelques exemples de cas où JavaScript est efficace (voire irremplaçable) :

Vérification de saisie dans des formulaires (Adresse, email)
Calculs simples suite à des saisies de formulaire (Tarifs, calculatrice)
Moteur de recherche (base de recherche définie par le webmaster)
Gestion des dates et des heures (Date du jour, Date de mise à jour, Calendriers)
Gestion des cookies (Sauvegarde d'information : nombre de visites, caddie virtuel)
Gestion de la navigation (Menus dynamique, popup)
Animations graphiques (Dynamic HTML, MouseOver, bannières rotatives, jeux)
...

La liste n'est pas terminée. L'imagination du développeur peut repousser les limites du JavaScript, sans pour autant réaliser l'impossible. Voyons maintenant les raisons des limites techniques qu'imposent ce langage.

2 - JavaScript et la sécurité
JavaScript a été conçu pour limiter (presque) complètement les risques pour le visiteur. En ce sens, on peut dire que exécuter un javascript sur son navigateur ne comporte aucun risque pour les données et le matériel. JavaScript ne permet pas d'écrire ou de lire un fichier sur le disque dur du visiteur ou sur le serveur. Ainsi, vous ne risquez pas de voir des données confidentielles récupérées à votre insu. De même, il n'est pas possible de lister les logiciels copiés et non enregistrés. Impossible aussi de détruire des fichiers indispensables ou d'introduire un virus sur le poste d'un visiteur.
JavaScript permet quand même d'écrire et de lire le disque dur dans la zone réservée aux cookies. C'est la seule interaction que javascript peut avoir avec votre disque dur.

Certains me diront que JavaScript possède des fonctions pour lire des fichiers texte. En fait, javascript permet d'intégrer des applets Java ou ActiveX qui elles sont capables d'agir sur le disque dur. Il ne s'agit pourtant pas de javascript pur : si vous désactivez Java et ActiveX, rien ne se passera.

JavaScript seul ne peut pas non plus récupérer l'adresse IP d'un visiteur. Il est indispensable également de passer par des appels à Java ou à ActiveX.

J'ai dit que javascript est presque sans risque. Il est possible de coder un javascript qui ouvre des popups jusqu'à épuiser complètement les ressources système. Dans ce cas, la seule solution est de rebooter votre ordinateur. On peut aussi imaginer un javascript qui tourne en tâche de fond d'une page web, occupant ainsi des ressources et réduisant les performances de votre poste.

Les performances de javascript en terme de sécurité pour les visiteurs font que JavaScript est accepté par (presque) tous. Le prix de cette sécurité et de cette quasi universalité se traduit par des limites techniques que nous allons détailler tout de suite.

3 - Les limites de JavaScript
La principale limite de JavaScript est qu'il ne permet pas de lire et d'écrire sur le disque dur du visiteur (en dehors des cookies) et du serveur. Il est donc impossible en javascript de générer par exemple un fichier de connexions sur le serveur, ou un compteur de visites sur une page donnée. De même, JavaScript ne peut pas s'interfacer avec une base de données. Impossible alors de concevoir un forum de discussion, un script de sondage ou de vote, dont les données sont stockées, soit dans un fichier, soit en base sur le serveur. Impossible aussi de lier un catalogue en base sur le serveur à votre boutique en ligne.
JavaScript n'échange pas avec d'autres machines connectées. Impossible donc de créer une page de chat (discussion en direct).

Les limites sont nombreuses et réelles. Heureusement, d'autres technologies existent.

4 - Les alternatives
Il existe une multitude de technologies actuellement qui permettent de combler les lacunes de javascript. On peut les séparer en 2 catégories :

Celles dont le code est exécuté sur le poste du visiteur
Celles dont le code est exécuté par le serveur qui renvoie une page au format HTML

Dans la première catégorie, on peut citer Flash, Java, et d'autres qui permettent par exemple de créer des univers 3D. En général, ils nécessitent un plugin et ne sont donc pas compatibles avec tous les navigateurs. Ils repoussent les limites de l'animation graphique et offrent en général plus de possibilité de lecture/écriture sur le disque. La sécurité n'est pas assurée : plantages fréquents, accès au disque, ...

Il existe surtout de nombreux langages de scripts qui sont exécutés sur le serveur, permettant ainsi de stocker des informations et de générer des pages dynamiques à partir de bases de données. Tout JavaScript.com utilise de plus en plus la technologie PHP que je recommande à tous.
Les risques pour la sécurité sont nuls, car le visiteur ne reçoit que des pages en HTML, éventuellement enrichies par du JavaScript.
Si vous voulez en savoir plus sur le PHP, lisez le tutorial sur l'introduction au PHP.

J'ai, dans cette page, donné mon avis sur les limites de JavaScript. Je ne prétends pas que JavaScript est LA solution à tous nos besoins. Les languages CGI, ASP ou PHP sont indispensables. Mon but était de re-situer les possibilités de JavaScript (et de mettre en garde les internautes des risques liés aux plugins).

La structure d'un Script

2010-09-10T18:04:00.000-07:00

Le javascript a une structure de programmation proche du langage C, moins riche naturellement.
Dans cette page, nous verrons :
   Les commentaires
   Le groupement d'instructions
   Les tests conditionnels
   Les structures de boucle

Ecrire un commentaire
Indispensable les commentaires en programmation.
Pour mettre en commentaire une partie de code, jusqu'au prochain retour à la ligne :
   var age=25; // Ceci est en commentaire

Pour mettre en commentaire plusieurs lignes de code :
   /* Ceci est en commentaire ligne 1
   Ligne 2
   Dernière ligne */

Grouper des instructions
Comme en C, les instructions sont regroupées par les accolades { et }. Dans un script, il doit y avoir autant d'accolades ouvertes que d'accolades fermées.
Le groupement d'instructions est utile. Il permet par exemple de regrouper les instructions d'une fonction :
   function somme(a,b) {
      var sum=a+b;
      return sum;
   }
Cette fonction inutile retourne la somme de deux paramètres.

Le test conditionnel
Test simple
L'instruction if permet de diriger l'exécution du script suivant le résultat d'un test.
Il y a 2 moyens d'utiliser if.
Si l'action à réaliser tient en une instruction :
   if (age<18) alert("Vous devez être majeur");
Ici, si l'âge du visiteur est inférieur à 18 ans, un message est affiché.

Si l'action à réaliser tient en plusieurs instructions :
   if (age<18) {
      alert("Vous devez être majeur");
      window.location="mineur.php3";
   }
Ici, si l'âge du visiteur est inférieur à 18 ans, un message est affiché et le visiteur est redirigé vers la page mineur.php3.

Test Si - Sinon
Reprenons notre dernier exemple :
   if (age<18) {
      alert("Vous devez être majeur");
      window.location="mineur.php3";
   } else {
      window.location="majeur.php3";
   }
Ici, si le visiteur est mineur, il est redirigé vers mineur.php3, sinon il est redirigé vers la page majeur.php3.

Les structures de boucles
Comme en C, le javascript reconnaît les boucles itératives et les boucles conditionnelles.
Les boucles itératives
Une boucle itérative exécute un groupe d'instructions tant que le compteur d'itérations n'a pas atteint une valeur donnée.
Voici la syntaxe générale :
   for(initialisation;condition;opération) {
      // Vos instructions
   }
Initialisation permet d'initialiser la valeur du compteur.
Condition teste si le compteur a atteint la valeur limite. Si condition est vraie, la boucle continue.
operation permet d'incrémenter le compteur à chaque passage de la boucle.

Voici quelques exemples concrets.
Faire une boucle pour i variant de 0 à 100 inclus par pas de 1
   for (var i=0;i<=100;i=i+1)

Faire une boucle pour i variant de 10 à 0 inclus par pas de -1
   for (var i=10;i>0;i=i-1)

Voici une application mathématique. Il s'agit de calculer la somme des nombres de 1 à N.
Entrez N dans le champ texte et cliquez sur le bouton :
La fonction qui calcule cette somme est déclarée :
   function somme(N) {
      var sum=0;
      for (var i=1;i<=N;i=i+1) {
         sum=sum+i;
      }
      alert("Somme de 1 à "+N+" = "+sum);
   }

Astuces d'écriture
Le javascript reprend du C la syntaxe particulière pour les additions et soustractions.
Ainsi, écrire a=a+1; est équivalent à a++;
Et a=a-1; est équivalent à a--;

Dans la même idée, on peut aussi remplacer a=a+5; par a+=5;

Vous trouverez donc souvent les boucles for avec cette syntaxe :
   for(var i=0;i<100;i++)

Les boucles conditionnelles
Il peut être utile de faire une boucle tant qu'une condition est vraie.
La boucle "tant que" est déclarée par while :
   while (condition) {
      // Les instructions de la boucle
   }
Ici, tant que condition est vraie, la boucle est exécutée.

On peut imaginer de demander au visiteur de saisir un nombre supérieur à 100 et de recommencer tant que ce nombre n'est pas supérieur à 100.
Voici la fonction appelée par le bouton :
   function demander() {
      var nb=0;
      while (nb<=100) {
         nb=prompt("Entrez un nombre supérieur à 100");
      }
      alert("Merci !");
   }
Ici, la boucle est répétée tant que nb n'est pas supérieur à 100. Dès que nb est plus grand que 100, on quitte la boucle et le message Merci est affiché.

La programmation
Les structures de programmation sont indispensables et sont utilisées dans tous les scripts du site.
Il peut être intéressant de lire aussi la page sur les limites de javascript.

Introduction à javascript

2010-09-10T18:00:00.000-07:00

JavaScript est un langage de programmation complètement lié au langage HTML. Le développeur internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l'intermédiaire de son navigateur, charge le code des pages.
C'est le navigateur qui interprète le code HTML et JavaScript. L'interprétation dépend naturellement du type de navigateur utilisé et de sa version.
JavaScript est un langage objet et événementiel. Le développeur peut créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d'événements déclenchés par le visiteur (passage de souris, clic, saisie clavier, etc...)

1 - Comment intégrer du code JavaScript dans une page HTML ?

Il y a plusieurs endroits dans une page web où il est possible d'intégrer du code JavaScript :

dans le corps de la page,
en entête de page,
dans un événement d'un objet de la page.

La structure classique d'une page HTML contenant du JavaScript est la suivante :

<HTML>
<HEAD>
<TITLE>Titre de page</TITLE>
<SCRIPT language="JavaScript">
<!--   // Cache ce qui suit aux navigateurs qui ne supportent pas JavaScript


//-->  // Fin de la partie cachée
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT type="text/JavaScript">
<!--   // Cache ce qui suit aux navigateurs qui ne supportent pas JavaScript


//-->  // Fin de la partie cachée
</SCRIPT>
</BODY>
</HTML>

C'est donc entre les balises <SCRIPT> qu'est inséré le code javascript. Veillez à bien respecter la syntaxe proposée, en particulier les  pour cacher le script aux anciens navigateurs.

Il est possible aussi de faire appel à un script quand l'utilisateur clique sur un lien :

<A HREF="javascript:ma_fonction()">Cliquez ici</A>

2 - La déclaration des variables, des objets et des tableaux

JavaScript utilise l'instruction var pour la déclaration. Toute nouvelle variable doit être initialisée.

Déclaration des variables basiques
Pour déclarer une variable basique, c'est-à-dire de type entier, numérique, chaîne de caractères, etc, il ne faut pas déclarer le type. Le navigateur le détecte.
EXEMPLES de déclaration de variables basiques :

var prenom_visiteur="Marcel";
var nom_visiteur="Dupond";
var age_visiteur=29;

On remarque la présence du point virgule (;) à la fin de chaque instruction.
Il est possible de placer sur une même ligne plusieurs instructions séparées par des points virgules.

Une variable déjà déclarée s'utilise ensuite normalement :

var accueil="Bonjour " + prenom_visiteur + " " + nom_visiteur;

Déclaration et création d'objets
JavaScript intègre d'origine plusieurs type d'objets. Voyons tout d'abord l'objet Date, très utile dans un environnement internet.
La déclaration se fait toujours avec var. Pour créer un objet, il faut utiliser le mot-clé new suivi du type d'objet Date. ATTENTION, le respect des majuscules/minuscule est indispensable et source de nombreuses erreurs.

var date_jour=new Date();

Cette ligne crée un objet Date contenant la date du jour.

var une_date=new Date(annee,mois-1,jour,heure,min)

Cette ligne crée un objet date avec une date paramétrable.

Déclaration et utilisation des tableaux

En JavaScript, les tableaux sont des objets et leur déclaration est identique à celle vue plus haut.

var un_tableau=new Array(10)

Cette ligne crée un tableau de 10 éléments de type basique (réel, entier, chaîne de caractères). En JavaScript, le premier élément est indexé à 0. Il est possible de déclarer un tableau sans dimension fixée. La taille du tableau s'adapte en fonction du contenu :

var un_autre_tableau=new Array;

Pour accéder aux éléments du tableau, on utilise les crochets "[" et "]"

un_tableau[0]=10;
un_tableau[9]=5;

Des méthodes associées à l'objet permettent d'effectuer des traitements ou d'accéder à des propriétés. On utilise la notation pointée pour appliquer une méthode sur un objet ou pour accéder à une propriété.

var dimension=un_tableau.length;

Cette ligne retourne le nombre d'éléments de l'objet Array appelé "un_tableau".

3 - La déclaration des fonctions et des instructions

Les fonctions et instructions sont déclarées et codées dans l'entête de la page et peuvent être appelées ensuite à n'importe quel endroit de la page. Pour déclarer une fonction ou une instruction, on utilise le mot-clé "function", suivi de son nom et des éventuels paramètres.

function ma_fonction(param1, param2)
 {
 ....
 }

function mon_autre_fonction()
 {
 ....
 }

Le corps des fonctions et instructions est délimité par "{" et "}" dans lequel on place la déclaration des variables locales, propres à la fonction, ainsi que l'ensemble des traitements.
Une fonction aura dans son corps une ou plusieurs instructions return qui permet de renvoyer une valeur ou un objet. L'instruction return n'est pas obligatoire; on a alors affaire à une instruction qui ne renvoie pas de valeur.
Les fonctions déclarées dans l'entête de la page peuvent être appelées elles-mêmes, de manière itérative, dans d'autres fonctions et dans le corps de la page.

	view plain \| print \| ?
1	header('Content-type: text/html; charset=iso-8859-1');
2
3	if(count($_POST) > 0) {
4	echo "Données reçues en POST:";
5	foreach($_POST as $v)
6	echo strrev(utf8_decode($v)).":";
7	}
8	elseif(count($_GET) > 0) {
9	echo "Données reçues en GET:";
10	foreach($_GET as $v)
11	echo strrev($v).":";
12	}
13
14	if(count($_POST) == 0 && count($_GET) == 0)
15	echo 'Aucune donnée n\'a été reçue par "'.basename($_SERVER["PHP_SELF"]).'"...';

	view plain \| print \| ?
1	header('Content-type: text/html; charset=iso-8859-1');
2
3	$mysql_db = @mysql_connect("sql.free.fr", "robloche", "********");
4	@mysql_select_db("robloche");
5
6	$query = "SELECT `Species` FROM `Animals` WHERE `Family` = '".$_POST["family"]."'";
7	$query .= " ORDER BY `Species`";
8	$result = @mysql_query($query);
9
10	echo 'var o = null;';
11	echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';
12	echo 's.options.length = 0;';
13	while($r = mysql_fetch_array($result))
14	echo 's.options[s.options.length] = new Option("'.$r["Species"].'");';
15
16	@mysql_close($mysql_db);