PHP : Personal Home Page

(P. Torguet / Ph. Truillet – UPS)

15 Octobre 2001 – v. 1.04

1. Introduction

PHP est né avec le site de Rasmus Lerdof en 1994 : une page personnelle qui permettait de conserver une trace de passage des utilisateurs.

A la suite de la demande de la mise à disposition de cet outil par de nombreux utilisateurs, Lerdof a décidé de mettre en ligne la version 1.0 de PHP (Personal Home Page). A la surprise de son auteur, PHP est devenu rapidement très populaire et il a fallu ajouter de nouvelles fonctionnalités telles que boucles, structures conditionnelles, etc.

La version 2.0 permettra ainsi au développeur d’intégrer des instructions de programmation puissantes directement dans du code HTML. Un script PHP peut ainsi analyser les données soumises par un formulaire HTML, communiquer avec des bases de données et effectuer des calculs complexes à la volée. Et l’exécution de tels scripts est très rapide, car le code source du langage est directement compilé dans le serveur web. Ainsi, les instructions PHP sont exécutées à l’intérieur même du serveur, sans aucune ressource supplémentaire, contrairement aux CGI (Common Gateway Interface).

La correction d’erreurs d’analyse et le soutien d’autres développeurs a permis la sortie de nouvelles versions de PHP : la version 3 (encore très utilisée) et la version 4. depuis mi-2000.

Contrairement à ce que certains disent, l’acronyme PHP ne signifie pas "People Hate Perl", mais “Personal Home Page”, nom hérité de la première version. Aujourd’hui, par consensus, PHP signifie “PHP is an Hypertext PreProcessor”.

2. Généralités

2.1. Qu’est-ce que PHP ?

PHP est un langage de script qui s’inclut dans le langage HTML et est traité par le serveur web. La syntaxe du langage PHP provient des langages C, Java et Perl, avec un petit nombre de fonctions inédites par rapport à ces langages.

Le but du langage PHP est de permettre aux développeurs de site web d’écrire rapidement des pages web dynamiques. PHP permet de construire dynamiquement des pages HTML contenant les résultats de calculs ou de requêtes SQL adressées à un système de gestion de bases de données (SGBD). Il ne demande pas de connaissances importantes de la machine sur laquelle on travaille, et permet de faire fonctionner les scripts sur n’importe quel système d’exploitation (Unix, Mac, Windows).

Grâce à de nombreuses extensions, PHP3 peut générer des fichiers PDF, s’interfacer avec des serveurs de messagerie ou encore générer des images et graphiques GIF à la volée.

En outre, PHP3 peut s’interfacer à la quasi totalité des SGBD du marché.

Son objectif consiste à produire des pages HTML côté serveur moyennant des traitements permettant d’enrichir ces pages par l’insertion des données en provenance de bases de données.

Enfin, PHP est distribué librement et gratuitement sous la licence GNU GPL.

2.2 A qui s’adresse PHP ?

Reprenant une syntaxe claire très proche de celle du langage C, PHP est un langage dont la prise en main est généralement rapide.

C’est donc un langage qui conviendra autant au débutant désireux de se familiariser “sans douleur” avec les techniques du web dynamique, qu’au professionnel cherchant une solution simple mais toutefois puissante et fiable pour des sites de taille moyenne.

2.3 Les atouts de PHP

Pourquoi devrais-je apprendre le langage PHP ? Le temps des sites web statiques développés avec des pages HTML et quelques scripts CGI sera bientôt révolu. Désormais, les catalogues de produits des entreprises doivent pouvoir être convertis en moins de 24 heures pour être consultables en ligne, à travers l’interface d’une boutique électronique par exemple.

v PHP est librement modifiable et il a été conçu pour intégrer de multiples extensions. Cela n’est pas étonnant, car il est programmé en C. De plus, PHP propose une API (Application Programming Interface) très stable. Les développeurs expérimentés pourront ainsi aisément ajouter de nouvelles fonctions.

v PHP est uniquement dédié au développement de pages web dynamiques, contrairement à des langages généraux (Perl, C et Java, entre autres), qui représentent d’excellents outils de programmation, mais restent très difficiles à manier pour le web. Les applications PHP sont rapides à mettre en place et faciles à créer, car leur code est directement intégré dans les pages HTML.

v Enfin, PHP est un langage très populaire. Plusieurs fournisseurs d’accès ou hébergeurs de sites l’ont d’ores et déjà adopté, autorisant ainsi les utilisateurs à développer leurs propres applications web sans exposer leur serveur aux risques des CGI.

3. Structures de base

3.1. Introduction

Voici pour commencer la célèbre adaptation du programme “Hello World” en PHP :

<?php

echo "Hello World<P>";

</body></html>

Simplissime, non ?

Le code PHP est placé directement dans le code source HTML, il est encadré par deux balises spéciales (<?php et ?>) qui sont destinées à être reconnues par l’interpréteur PHP. On aurait pu tout aussi bien utiliser les balises <script language="php"> et </script> comme on le fait pour du JavaScript.

3.2. Syntaxe

La syntaxe de PHP n’a vraiment rien de déroutante puisqu’elle est très proche de celle du langage C. On place généralement une instruction par ligne. Une instruction est terminée par un point-virgule en fin de ligne.

3.3. Opérateurs et expressions

Les types de données standards en PHP sont :

v integer (entiers)

v double (réels représentés par des valeurs à virgule flottante)

v string (chaînes de caractères)

v array (tableaux)

v object (objets cf. la programmation par objet)

PHP n’est pas un langage fortement typé. C’est PHP qui décide à l’exécution, en fonction de son contenu, quel type sera le plus indiqué pour la variable.

Note : les variables en PHP commencent toutes par le caractère “$”. Par exemple : $var, $toto, $i…

Quand vous utilisez une variable, vous n’avez pas besoin de la déclarer au préalable.

Attention, une variable peut changer de type en fonction de son contenu. Nous allons voir comment jongler avec les différents types de variables.

$foo = "0"; // $foo est une chaîne de caractères : string "0" (code ASCII 48)

$foo++; // $foo est une chaîne de caractères : string "1" (ASCII 49)

$foo += 1; // $foo est maintenant un entier : integer (2)

$foo = $foo + 1.3; // $foo est maintenant un réel : double (3.3)

$foo = 5 + "10 Little Piggies"; // $foo est maintenant un entier (15)

$foo = 5 + "10 Small Pigs"; // $foo est maintenant un entier (15)

Conclusion ? Eh bien, si l’interpréteur PHP s’en sort plutôt bien, ce genre de construction ne devrait jamais être utilisé en pratique, à moins que vous ne soyez le seul à maintenir votre code PHP et encore !

3.3.1. Opérateurs arithmétiques

Quelques exemples valent souvent mieux qu’un long discours...

v $a + $b Addition Somme de $a et $b.

v $a - $b Soustraction Reste de la différence de $b et $a.

v $a * $b Multiplication Produit de $a par $b.

v $a / $b Division Dividende de $a par $b.

v $a % $b Modulo Reste de la division entière de $a par $b.

3.3.2. Opérateurs sur les chaînes

Il n’existe qu’un seul opérateur en PHP3 sur les chaînes, c’est l’opérateur de concaténation “.”.

$a = "Hello ";

$b = $a . "World!"; // $b contient "Hello World!"

Il est à noter que vous pouvez spécifier une chaîne en l’encadrant entre des simples ou des doubles quotes (guillemets simples ou doubles). Les double quotes permettent le remplacement des variables par leur valeur.

$val=‘Pengo’;

echo ‘Hello $val’; // Affiche Hello $val

echo "Hello $val"; // Affiche Hello Pengo

3.3.3. Opérateurs binaires

Il s’agit des opérateurs binaires dits “bit à bit”, et non pas des opérateurs logiques booléens.

v $a & $b Et Les bits qui sont à 1 dans $a ET dans $b sont mis à 1.

v $a | $b Ou Les bits qui sont à 1 dans $a OU dans $b sont mis à 1.

v ~ $a Non Les bits sont inversés.

3.3.4. Opérateurs Logiques

Chose originale avec PHP, il existe deux versions des opérateurs logiques ET et OU, avec des précédences différentes.

v $a and $b Et Résultat vrai si $a ET $b sont vrais

v $a or $b Ou Résultat vrai si $a OU $b est vrai (ou les deux)

v $a xor $b Ou Exclusif Résultat vrai si $a OU $b est vrai, mais pas si les deux sont vrais

v ! $a Résultat vrai si $a est faux, et réciproquement

v $a && $b Et Résultat vrai si $a ET $b sont vrais

v $a || $b Ou Résultat vrai si $a OU $b est vrai (ou les deux)

3.3.5. Opérateurs de Comparaison

Encore du classique. Sans surprise pour les habitués de la syntaxe C.

v $a == $b Egal Résultat vrai si $a est égal à $b

v $a != $b Différent Résultat vrai si $a est différent de $b

v $a < $b Inférieur Résultat vrai si $a est strictement inférieur à $b

v $a > $b Supérieur Résultat vrai si $a est strictement supérieur à $b

v $a <= $b Inf ou égal Résultat vrai si $a est inférieur ou égal à $b

v $a >= $b Sup ou égal Résultat vrai si $a est supérieur ou égal à $b

3.4. structures de contrôle

Les structures de contrôle If, If…else, If…else…elseif ainsi que les instructions de boucle do…while, for, break, continue et switch sont disponibles avec PHP.

v if (ressemble au C)
if ($expr) {

echo "$expr est vrai" ;

}

elseif ($expr2) {

echo "$expr2 est vrai" ;

}

else {

echo "tout est faux" ;

}

v switch (comme en C)
switch ($i) {

case 0:

print "i égale 0";

break;

case 1:

print "i égale 1";

break;

case 2:

print "i égale 2";

break;

default :

print "autre chose"

}

v do…while, for, while, (ressemblent à ceux du C, à part que les variables sont non typées)

Exemple de for :

for($i = 0; $i < 10; $i++) {

echo $i;

}

4. PHP et …

4.1. les tableaux

Pourquoi les tableaux sont-ils si importants en PHP ? Parce les fonctions qui retournent plusieurs valeurs le font généralement sous la forme de tableaux. C’est la cas des fonctions liées aux bases de données. Il est donc particulièrement intéressant de bien maîtriser les tableaux en PHP.

Il existe en PHP deux types de tableaux :

v Premier type : les tableaux que l’on pourrait nommer "Classiques" dans lesquels on se déplace en utilisant l’indice de l’élément, comme en langage C. Le premier élément porte comme en C l’indice zéro.
On peut remplir un tableau en adressant chaque élément un par un, ou d’un coup en fournissant toutes les valeurs :

$tab[0] = "P";

$tab[1] = "H";

$tab[2] = "P";

// Equivalent à

$tab = array("P","H","P");

v Et un deuxième type : les tableaux “associatifs”, c’est à dire les tableaux qui contiennent pour chaque élément une valeur associée qui sert de clé d’accès.

Voici un exemple avec un indice de type chaîne de caractères :

$villes["toulouse"] = 370000 ;

$villes["paris"] = 2200000 ;

$villes["lyon"] = 420000 ;

4.2. les fonctions

Pour définir des fonctions en PHP on utilise le mot-clef function. La syntaxe est la suivante :

function nomFonction($arg1, $arg2, ..., $argn) {

instructions ;

}

Passage de paramètres :

· $arg : par valeur

· &$arg : par référence

Les derniers paramètres peuvent avoir des valeurs par défaut (ex. $arg3=1)

Pour que la fonction retourne une valeur on utilisera comme en C : return $val ;

Les variables créées dans la fonction sont par défaut locales.

On peut les déclarer globales (peu recommandé) en écrivant global lors de la première initialisation.

Exemple : global $var = 10 ;

Une variable locale peut être mémorisée d’un appel à l’autre de la fonction en utilisant le mot-clé static comme en C.

On peut écrire des bibliothèques de fonctions qu’on pourra ensuite inclure avec l’instructions : require.

Exemple :

require("ma_bibliotheque.php") ;

Note : il y a aussi une instruction include qui s’utilise de la même façon mais elle ne provoque pas d’erreur si le fichier n’est pas trouvé. Le fichier est donc optionnel.

4.3. les Entrées/Sorties fichiers

Les fonctions qui gèrent les E/S fichiers en PHP ressemblent beaucoup aux fonctions du langage C.

v fopen permet d'ouvrir un fichier en lecture, écriture ou ajout en fin de fichier.
Exemples :
$fich = fopen("fich.txt", "r"); /* ouvre un fichier en lecture */
$fich = fopen("fich.txt", "w"); /* ouvre un fichier en écriture */
$fich = fopen("fich.txt", "a"); /* ouvre un fichier en ajout en fin de fichier */

v fgets permet de lire un certain nombre de caractères dans un fichier (ouvert en lecture).

Exemple :

$chaine = fgets($fich, 1024); /* lit au maximum 1024 caractères et les place dans la chaîne $chaine */

v feof permet de savoir si on est arrivé à la fin du fichier.

Exemple :

if (feof($fich)) print("fin du fichier atteinte");

v fputs permet d'écrire une chaîne de caractères dans un fichier (ouvert en écriture ou en ajout).
Exemple :

fputs($fich, $chaine); /* écrit la chaîne $chaine dans le fichier */

v fclose ferme un fichier.

Exemple :
fclose($fich); /* ferme le fichier - à ne pas oublier */

v file_exists teste l’existence d’un fichier (retourne TRUE si le fichier existe, et FALSE sinon)

Exemple :
if (file_exists("fich.txt")) print("le fichier existe");

4.4. les formulaires

La récupération des paramètres de formulaires en PHP est assez simple mais dépends de la méthode utilisée par le formulaire.

Si on utilise method="get" on devra utiliser le tableau associatif $_GET en précisant comme « indice » le nom du champ. Si on utilise method="post" le nom du tableau sera $_POST.

Attention, la syntaxe de PHP a changé depuis la version 4.2. Auparavant, pour récupérer la valeur d'un champ d'un formulaire envoyé par la méthode HTTP GET, et dénommé id, on écrivait $id. Il faut maintenant écrire $_GET['id']. Il existe une option de compatibilité avec l'ancienne syntaxe (register_globals on), mais elle n'est pas activée, car l'ancienne syntaxe est à l'origine d'un trou de sécurité grave. Si vous récupérez un script utilisant l'ancienne syntaxe, il ne marchera pas.

Voici un petit exemple pour bien comprendre :

Votre nom : <input type=text name=nom><br>

Votre âge : <input type=text name=age><br>

</form

Lorsqu’on clique sur le bouton Ok de la page web contenant le formulaire précédent, la page TraiteFormulaire.php est appelée. Cette dernière contient des ordres PHP :

...

Bonjour <?php echo $_POST[‘nom’]; ?>, <p>

vous avez bien <?php echo $_POST[‘age’]; ?> ans <br>

cette année ?

...

On peut aussi si on veut récupérer les valeurs dans un tableau à deux dimensions.

C’est cette fonctionnalité qui est utilisée pour récupérer les valeurs d'un choix multiple. Exemple :

Nom : <input type="text" name="personnel[nom]"><br>

Email : <input type="text" name="personnel[email]"><br>

Vins préférés : <br>

<input type=checkbox name="vin[]" value="medoc">Médoc<br>

<input type=checkbox name="vin[]" value="madiran">Madiran<br>

<input type=checkbox name="vin[]" value="chablis">Chablis<br>

<input type=checkbox name="vin[]" value="riesling">Riesling<br>

</form>

Le fichier PHP suivant fait le traitement :

...

Bonjour <?php echo $_POST[‘personnel’][‘nom’]; ?>, <p>

Votre adresse est <?php echo $_POST[‘personnel’][‘email’]; ?> <p>

Vos vins préférés sont : <br>

<?php

for($i = 0 ; $i < count($_POST[‘vin’]); $i++) {

echo $_POST[‘vin’] [$i];

echo “, <br>";

}

echo "<p>";

Note : la fonction count qui prend un tableau en paramètre compte le nombre de valeurs de ce tableau.

4.5. les cookies

Pour envoyer un cookie au navigateur on utilise la fonction :

int setcookie (string name, string value , int expire , string path , string domain , int secure )
setcookie() définit un cookie qui sera envoyé avec le reste des en-têtes. Les cookies doivent passer avant toute autre en-tête (c'est une restriction des cookies, pas de PHP). Cela vous impose d'appeler cette fonction avant toute balise <HTML> ou <HEAD>.

Tous les arguments sauf name (nom) sont optionnels. Si seul le nom est présent, le cookie portant ce nom sera supprimé du navigateur de l'internaute. Vous pouvez aussi utiliser une chaîne vide comme valeur, pour ignorer un argument. Le paramètre expire est une estampille temporelle UNIX (nombre de secondes depuis le 1er janvier 1970 00:00:00 GMT). Le paramètre secure indique que le cookie doit être uniquement transmis à travers une connexion HTTPS sécurisée.

Erreurs communes :

· Les cookies ne seront accessibles qu'au chargement de la prochaine page, ou au rechargement de la page courante.

· Les cookies doivent être effacés avec les mêmes paramètres que ceux utilisés lors de leur création.

En PHP 3, les appels multiples à setcookie() dans le même script seront effectués dans l'ordre inverse. Si vous essayez d'effacer un cookie avant d'insérer une nouvelle valeur, vous devez placer l'insertion avant l'effacement.

En PHP 4, les appels multiples à setcookie() sont effectués dan un ordre naturel.

Exemples avec setcookie()

<?php

setcookie("TestCookie","Valeur de test");

setcookie("TestCookie",$value, time()+3600);  /* expire dans une heure */

setcookie("TestCookie",$value, time()+3600,"/~sid/",".ups-tlse.fr",1);

/* cookie valable pour toutes les pages dont le chemin commence par /~sid/ sur toutes les machines serveur dont le nom finit par .ups-tlse.fr */

?>

Pour voir le résultat, essayez le script suivant :

<?php

echo $_COOKIE["TestCookie"];

?>

Pour d'autres informations sur les cookies, jetez un oeil sur :

http://www.netscape.com/newsref/std/cookie_spec.html.

4.6. les bases de données (MySQL)

PHP peut s’interfacer avec de nombreuses bases de données mais celle qui est la plus utilisée est MySQL. Ses avantages sont : gratuité (pour les utilisations non commerciales), portabilité (Linux, Solaris, MacOsX, Windows…), gestion de plusieurs utilisateurs simultanés, rapidité, facilité d’utilisation…

Nous n’allons ici présenter que les bases de l’utilisation de MySQL depuis PHP pour plus de détail se reporter à la documentation en ligne sur http://www.php.net/ .

4.6.1 Connexion à la base de données

Avant d’utiliser une base de données il convient de se connecter à MySQL et de choisir la base de données.

Ceci est fait simplement en utilisant deux fonctions (mysql_connect et mysql_select_db) voici un exemple d’utilisation :

// connexion a mysql

$lien = mysql_connect("localhost", "login", "mot_de_passe");

if ($lien ==0)

exit("impossible d'etablir la connexion");

// selection de la base de nom "etudiants"

if(mysql_select_db("etudiants", $lien) == 0)

exit("impossible de se connecter a la base etudiants");

NB : les paramètres de l’appel à mysql_connect sont en général précisés par l’administrateur du serveur web.

Au CICT on peut consulter les pages suivantes :

http://www.cict.fr/WWW/instructions.html, http://www.cict.fr/WWW/php.html et

http://www.cict.fr/app/mysql.html

4.6.2 Interrogation d’une base de données

Pour interroger une base de données on utilise typiquement l’instruction select du langage SQL de la façon suivante (on suppose que la base de données contient une table appelée etat_civil qui contient au minimum les champs nom et prenom) :

// requete sur la table etat_civil

$requete="select nom, prenom from etat_civil ORDER BY nom";

$result = mysql_query($requete);

if($result == 0)

exit("impossible d'effectuer la requete <BR>$requete");

if (mysql_num_rows($result)==0)

exit("désolé nous n'avons aucune information");

// il y a des etudiants, on les affiche dans un tableau

print("\n<TABLE>\n");

print("<TR><TH>Nom</TH><TH>Prénom</TH></TR>\n");

while($ligne = mysql_fetch_row($result))

{

$nom = $ligne[0];

$prenom = $ligne[1];

print("\n<TR>\n");

print("\t<TD>$nom</TD>\n");

print("\t<TD>$prenom</TD>\n");

print("</TR>\n");

}

print("\n</TABLE>");

NB : les résultats de la requête sont obtenu ligne par ligne grâce à la fonction mysql_fetch_row et sont rangés dans un tableau à une dimension dans l’ordre indiqué lors du select. Ici $ligne[0] contiendra donc le nom et $ligne[1] le prénom. La requête peut évidemment être beaucoup plus complexe et travailler sur plusieurs tables.

4.6.3 Modification d’une base de données

Pour modifier une base de données le principe est le même en utilisant les instructions SQL insert, update et delete. Voilà trois exemples :

// effacement :

$requete = "delete from etudiants where nom ='$nom'";

if(mysql_query($requete) == 0)

exit("impossible de supprimer la ligne");

else

print("l’étudiant : $nom est supprimé");

// mise à jour :

$requete = "update etudiants set ";

$requete .= " prenom='$prenom', adresse='$adresse' ";

$requete .= "where nom='$nom'";

if(mysql_query($requete) == 0)

exit ("impossible de modifier la ligne<BR>");

else

print("l’étudiant : $nom est modifié");

// insertion :

$requete = "insert into etudiants (nom, prenom, adresse)";

$requete .= "values ('$nom', '$prenom', '$adresse')";

if(mysql_query($requete) == 0)

exit("impossible d'ajouter la ligne");

else

print("<BR> l’étudiant : $nom a été ajouté");

4.6.4 Déconnexion

Il ne faut pas oublier de fermer la connexion à la base MySQL :

if (mysql_close()==false)

exit("Fermeture impossible de la base");

5. ressources web

v http://fr.php.net

v http://www.phpinfo.net

v http://dev.nexen.net/docs/php/annotee/manuel_toc.php (Manuel de PHP en ligne)

Création et mise en place de pages HTML et PHP

- But du TP : Ecrire des pages HTML et PHP et les tester.

Testez le fonctionnement de PHP :

Recopiez la page suivante dans le fichier ~/web/test.php

<HTML>

<HEAD>

<BODY>

<?php

echo "<H1><center>Test de PHP</center></H1>";

echo "Si cette page s'affiche correctement, PHP fonctionne sur votre compte.";

</BODY>

</HTML>

Changez les droits d'accès : chmod o+rx ~/web/test.php

Dans netscape tapez l'URL : http://marine.edu.ups-tlse.fr/~login/test.php

Premier programme PHP

Ecrivez une page HTML php1.html contenant le formulaire suivant :

Ecrivez un programme PHP qui récupère les différents paramètres, calcule l'âge, vérifie qu'il est raisonnable (compris entre 1 et 120) et affiche une page de ce type :

Si l'âge est correct

Si l'âge n'est pas correct

Bonjour Pierre Dupond.

Vous êtes né en 1979.

Nous sommes en 2000.

Vous avez donc environ 21 ans.

La page a été visitée 10 fois depuis sa création.

Bonjour Pierre Dupond.

Vous êtes né en 2000.

Nous sommes en 2000.

Votre âge : 0 ne me semble pas très correct.

La page a été visitée 11 fois depuis sa création.

Pour programmer cette page PHP on utilisera les fonction de gestion des fichiers pour gérer le nombre de visite et la fonction date qui permet d'obtenir la date courante.

Exemple :

$annee = date("Y"); /* renvoie simplement l'année actuelle*/

$date_complete = date("d/m/Y"); /* renvoie une chaîne de caractère de ce type : 7/12/2000 */

Programmation d’un carnet d'adresses

Le but de cet ensemble de programmes PHP est de gérer un carnet d'adresse (qui sera sauvegardé dans une base de donnée MySQL).

La première page (en HTML) a écrire permettra de choisir entre :

- l'ajout d'une entrée dans le carnet

- la recherche dans le carnet

- l'affichage de tout le carnet

Un couple de pages (une en HTML l'autre en PHP) permettra l'ajout d'une entrée au carnet :

L'entrée :

Nom : Dupond

Prénom : Jean

Adresse : 118 route de Narbonne

Code postal et ville : 31062 Toulouse

Tél : 05 61 55 66 11

A été ajoutée au carnet d'adresse.

Retourner au sommaire du carnet

Page d'ajout 1

Page d'ajout 2

Un couple de pages (une en HTML l'autre en PHP) permettra la recherche d'une entrée en tapant un nom :

Entrée trouvée :

Nom : Dupond

Prénom : Jean

Adresse : 118 route de Narbonne

Code postal et ville : 31062 Toulouse

Tél : 05 61 55 66 11

Retourner au sommaire du carnet

Page d'ajout 1

Page d'ajout 2

La dernière page (en PHP) permettra l'affichage complet du carnet.

Javascript

(P. Torguet – UPS)

17 Novembre 2003 – v. 1.00

1. Introduction

Le langage JavaScript a été créé par la société Netscape pour la version 2.0 de son navigateur Web. Comme PHP il s’agit d’un langage qui permet de créer des programmes embarqués dans des pages Web mais à l’inverse de PHP les programmes sont ici en général exécutés par le navigateur.

On utilise beaucoup JavaScript pour créer des pages dynamiques comportant des menus, des fenêtres filles (les fameux pop-ups tant décriés), des permutations d’images lorsque le pointeur de la souris passe au dessus (on appelle cela des « roll-over ») et pour vérifier des formulaires avant leur émission.

Il existe de nombreuses versions de JavaScript (appelé également JScript par Microsfot) qui ne sont malheureusement pas compatibles entre elles. Il conviendra donc pour une utilisation professionnelle de tester les pages avec plusieurs navigateurs comme Netscape 4, Mozilla et Internet Explorer par exemple.

Le langage a néanmoins été standardisé en 1997 par l'European Computer Manufacturers Association (ECMA) sous le nom d’ECMAScript (ECMA-262). Cette version correspond à la version 1.4 de JavaScript et à la version 4.0 de Jscript.

2. Inclusion dans des pages HTML

Pour intégrer du JavaScript dans du code HTML il faut utiliser la balise SCRIPT :

<SCRIPT language=JavaScript>

< !--

    code JavaScript...

-->

</SCRIPT>

Le code compris entre <SCRIPT> et </SCRIPT> n'est pas affiché, il est interprété par le navigateur. Comme il existe encore des navigateurs qui ignorent les scripts, il est recommandé de mettre le contenu du script sous forme de commentaire HTML :

<SCRIPT language=JavaScript>

<!--

  code JavaScript

//-->

</SCRIPT>

Ainsi le script sera simplement ignoré au lieu de placer n’importe quoi sur la page.

Position du code dans un fichier HTML

dans l'en-tête : pour définir des fonctions dès le chargement ;
entre l'en-tête et le corps ;
dans le corps : pour gérer les événements.

Insertion de code dans une URL d'une balise HTML

Le code se met sous la forme :

javascript:code

Exemple : pour exécuter du code JavaScript il est possible d'utiliser :

<A href="JavaScript:code">texte</A>

Quand on clique sur le texte le code s'exécute (le plus souvent c'est un appel de fonction).

NB : dans href, si on écrit "JavaScript:void(0)" cela empêche le navigateur de faire un chargement quand on clique sur le lien.

Code JavaScript pour les événements dans les balises

On peut insérer du code JavaScript pour indiquer les actions à effectuer en réaction à un événement provoqué par l'utilisateur (souvent ce code inséré se contente d'appeler une fonction déclarée plus haut dans le document au sein d'un élément SCRIPT). Pour réagir à un événement provoqué par le client :

<BALISE onEvenement="code">

Attributs d'événements existants
nom	événement	s'applique à
onAbort	interruption de chargement	image
onBlur	perte du focus	champs de saisie des formulaires ou à une fenêtre
onFocus	attribution du focus	champs de saisie des formulaires ou à une fenêtre
onClick	clic sur un objet	button, checkbox, radio, reset, submit, lien retourne false pour annuler l'action
onChange	changement de champ de saisie	fileupload, password, select, text, textarea
onDblClick	double clic	lien, image, bouton(JS1.2)
onError	erreur JS ou de chargement d'une image	image, fenêtre
onKeyDown	touche enfoncée	document, image, lien, text retourne false pour annuler
onKeyPress	l'utilisateur a appuyé sur une touche
onKeyUp	touche relâchée
onLoad	chargement	image, window
onMouseDown	un bouton de la souris est enfoncé	document, lien, image, button retourne false pour annuler
onMouseUp	le bouton de la souris est relâché	document, lien, image, button retourne false pour annuler
onMouseMove	déplacement de la souris
onMouseOut	la souris vient de quitter une zone	lien, image, layer retourne true pour empêcher l'affichage de l'URL
onMouseOver	la souris entre sur une zone
onReset	annulation des données saisies	formulaire ; retourne false pour annuler, ex : <FORM action="fich.php3" onSubmit="return Verif()">
onSubmit	soumission du formulaire
onSelect	sélection d'un champ de texte	champs de saisie
onUnload	déchargement d'un document	image, fenêtre

3. Syntaxe du langage

3.1 Opérateurs et expressions

Les types de données standards en JavaScript sont :

v number (entiers et réels représentés par des valeurs à virgule flottante avec éventuellement une partie exposant : 3.4e12)

v string (chaînes de caractères)

v boolean (booléens – valeurs true ou false)

v Array (tableaux)

v object (objets cf. la programmation par objet)

La déclaration des variables n’est pas obligatoire (bien que fortement conseillée).

Elle est réalisée de la façon suivante :

var i = 10 ;

var j = 3.4e12;

var s = "chaine";

3.1.1. Opérateurs arithmétiques

Quelques exemples valent souvent mieux qu’un long discours...

v a + b Addition Somme de a et b.

v a - b Soustraction Reste de la différence de b et a.

v a * b Multiplication Produit de a par b.

v a / b Division Dividende de a par b.

v a % b Modulo Reste de la division entière de a par b.

3.1.2. Opérateurs sur les chaînes

Il n’existe qu’un seul opérateur sur les chaînes, c’est l’opérateur de concaténation “+”.

a = "Hello ";

b = a + "World!"; // b contient "Hello World!"

Il est à noter que vous pouvez spécifier une chaîne en l’encadrant entre des simples ou des doubles quotes (guillemets simples ou doubles).

3.1.3. Opérateurs binaires

Il s’agit des opérateurs binaires dits “bit à bit”, et non pas des opérateurs logiques booléens.

v a & b Et Les bits qui sont à 1 dans a ET dans b sont mis à 1.

v a | b Ou Les bits qui sont à 1 dans a OU dans b sont mis à 1.

v ~ a Non Les bits sont inversés.

3.1.4. Opérateurs Logiques

v ! a Non Résultat vrai si a est faux, et réciproquement

v a && b Et Résultat vrai si a ET b sont vrais

v a || b Ou Résultat vrai si a OU b est vrai (ou les deux)

3.1.5. Opérateurs de Comparaison

Encore du classique. Sans surprise pour les habitués de la syntaxe C.

v a == b Egal Résultat vrai si a est égal à b

v a != b Différent Résultat vrai si a est différent de b

v a < b Inférieur Résultat vrai si a est strictement inférieur à b

v a > b Supérieur Résultat vrai si a est strictement supérieur à b

v a <= b Inf ou égal Résultat vrai si a est inférieur ou égal à b

v a >= b Sup ou égal Résultat vrai si a est supérieur ou égal à b

3.2. structures de contrôle

Les structures de contrôle if, If…else, ainsi que les instructions de boucle do…while, for, break, continue et switch sont disponibles en JavaScript et sont identiques au C (ici aussi il ne faut pas oublier les break lors des switch !).

Exemple de for :

for(i=0 ; i<5; i++)

    document.writeln(i);

3.4. fonctions

En JavaScript on peut définir des fonctions un peu comme en C mais on ne précisera pas le type des arguments ou de la valeur retournée. Les passages de paramètres se font par valeur (les modifications réalisées dans la fonction ne sont pas effective en dehors de celle-ci sauf pour les objets et les tableaux – cf. plus loin)

function nom_fonction(arg1,...,argN){

instruction1;
...
instructionM;
return val; // optionnel

}

Appel :

variable = nom_fonction(arg1, ..., argN);

3.5 Javascript et la programmation orientée objet

Le langage JavaScript est un langage orienté objet. Ce concept sera présenté en détail plus tard dans votre cursus. Néanmoins nous le présenterons ici très simplement.

Les objets peuvent être vus simplement comme une collection de variables (appelées ici attributs ou propriétés) et de fonctions (appelées ici méthodes) liés entre eux par un nom qui s’utilise comme une variable et qu’on appelle une référence.

Pour bien comprendre le concept, prenons un exemple : la fenêtre du navigateur qui exécute le script. Cet objet informatique est défini par une variable référence nommée window.

Pour accéder aux propriétés de cet objet on écrira (ici pour connaître la hauteur de la fenêtre) :

hauteur = window.innerHeight;

De même pour utiliser une méthode de l’objet on écrira (ici pour redimensionner la fenêtre ) :

window.resizeTo(500, 500);

On peut aussi affecter des valeurs aux propriétés (ainsi pour redimensionner la fenêtre on peut aussi écrire) :

window.innerHeight = 500;

window.innerWidth = 500;

Enfin, on peut créer de nouveaux objets en utilisant le mot clé new. Par exemple pour créer une image on écrira :

var mon_image = new Image();

Image() est une méthode un peu particulière qu’on appelle un constructeur. Les constructeurs peuvent avoir des paramètres. Enfin, il peut y avoir plusieurs paramètres pour un même type d’objet.

Pour éviter de réécrire le nom d’un objet on peut utiliser le mot clé with. Exemple :

with (window) {

innerHeight = 500;

innerWidth = 500;

}

3.6 Tableaux

Les tableaux en JavaScript sont en fait des objets un peu particuliers.

On peut les créer de deux façons différentes :

En utilisant les constructeurs Array :

var mon_tableau = new Array();

var mon_tableau = new Array(taille);

var mon_tableau = new Array(el1, el2, ..., elN);

En utilisant une construction spécifique (depuis JavaScript 1.2) :

var mon_tableau = [el1, el2, ..., elN]

Un tableau peut comme en PHP contenir des éléments de types différents :

var tab = new Array(3, 'chaine', 4.5);
var tab = [3, 'chaine', 4.5];

3.6.1 Propriétés

mon_tableau.length -> taille du tableau

i = tab.length;

3.6.2 Accès aux éléments

mon_tableau[0]
mon_tableau[1]
...
mon_tableau[N-1]

NB : pour le parcours du tableau on peut utiliser une boucle for un peu spéciale :

for (i in mon_tableau) {

document.writeln(mon_tableau[i]);

}

3.6.3 Méthodes

join(separateur)	concatène les cases du tableau avec le separateur (JavaScript 1.1, ECMA)
pop()	dépile et retourne le dernier élément du tableau (Navigator 4)
push(val,...)	ajoute des éléments au tableau (Navigator 4)
reverse()	renverse le tableau (JavaScript 1.1, ECMA)
shift()	supprime et retourne le 1er élément (Navigator 4)
slice(deb, fin)	retourne une portion du tableau (JavaScript 1.2)
sort()	tri des éléments (JavaScript 1.1, ECMA)
splice(deb, nbel, val, ...)	retire des éléments du tableau (Navigator 4)
toString()	conversion du tableau en chaîne (JavaScript 1.1, ECMA)
unshift(val,...)	insère des éléments (Navigator 4)

3.7 Interaction avec le navigateur Web

L’interaction avec le navigateur passe par l’objet window et ses sous-objets. Il existe un objet window pour chaque zone du navigateur (fenêtre ou frame).

3.7.1 Propriétés de window

closed	pour savoir si la fenêtre a été fermée ou non
defaultStatus	texte à afficher par défaut dans la barre d'état en bas
document	accès à toutes les informations de la zone
frames[]	tableau d'objets pour les frames de la zone
frames[]	window.frames.length window.frames[num]
history	pour naviguer
length	nombre de cadres dans la fenêtre
location	informations sur l'URL de la zone
name	nom de la zone
navigator	informations sur le navigateur utilisé
opener	fenêtre à partir de laquelle a été créée la zone
parent	document contenant <FRAME> associé au frame
screen	propriétés de l’écran qui affiche le navigateur
status	texte à afficher dans la barre d'état

Document

Note : on peut utiliser directement document au lieu de window.document.

Exemple :

document.writeln("Hello World !") ;

Propriétés de window.document
bgColor	couleur de fond
fgColor	couleur du texte par défaut
alinkColor	couleur des liens activés
linkColor	couleur des liens non visités
vlinkColor	couleur des liens visités
anchors[num]	cible d'un lien hypertexte
anchors[num]	window.document.anchors.length = nombre d'ancres window.document.anchors[i].name = nom de l'ancre
cookie	cookies du document
forms[num]	formulaires du document
images[num]	images du document
links[]	tableau pour les liens du document
links[]	window.document.links.length attributs : hash, host, hostname, href, pathname, port, protocol, search, target (c.f. propriétés de location)
lastModified	date de modification du document
title	titre du document
URL	URL du document

Méthodes de document

write(paramètre1, ..., paramètreN) : insertion dynamique dans le document.
writeln(paramètre1, ..., paramètreN) : idem avec retour à la ligne
open() : vide le document et en crée un nouveau
close() : affichage de tout ce qui a été écrit avec write() ou writeln()

History

Propriétés de history

current : URL du document courant
length : nombre d'éléments dans l'historique
next : URL suivante dans l'historique
previous : URL précédente dans l'historique

Méthodes de history

back() pour simuler l’appui sur le bouton back
go(+/-n) effectuer un retour ou une avancée dans l'historique de +/- n pages
forward() pour simuler l’appui sur le bouton forward

Exemples :

 <INPUT type="button" value="back" onClick="window.history.back()">

 <INPUT type="button" value="back2" onClick="window.history.go(-2)">

 <INPUT type="button" value="forward" onClick="window.history.forward()">

Location

Propriétés de location

href : totalité de l'URL
hash : partie ancre de l'URL (après #)
host : nom du serveur et port
hostname : adresse IP ou nom
pathname : chaîne après le nom du script et avant '?'
port : numéro de port
protocol : nom du protocole (http)
search partie requête (après '?')
Méthodes de location
reload() : pour recharger le document
replace(URL) : pour charger le document situé à l'adresse URL

 <INPUT type="button" value="recharger" onClick="window.location.reload()">

 <INPUT type="button" value="remplacer" onClick="window.location.replace('../Navigator.html')">

Screen

propriétés de l'objet Screen
height	hauteur de l'écran en pixels
width	largeur de l'écran en pixels
availHeight	hauteur moins les barres de menu ou de tâches
availWidth	largeur disponible
colorDepth	nombre de bits pour coder un pixel dans le navigateur

Navigator

propriétés de l'objet Navigator
appName	nom d'application du navigateur (Netscape, Internet Explorer)
appVersion	plate-forme et version du navigateur (4.5 [fr] (Macintosh; I; PPC)) parseFloat(navigator.appVersion) ->4.5
language	langage du navigateur (fr, en) sous Navigator 4
platform	système d'exploitation (MacPPC)

Pour accèder au nom d'application du navigateur il suffit donc d'écrire : navigator.appName.

3.7.2 Méthodes de window

open(arguments)	ouvrir une nouvelle fenêtre
close()	fermer une fenêtre
alert(texte)	ouvre une fenêtre d'alerte contenant le texte
prompt(txt, val)	ouvre une fenêtre avec un message txt et un champ de texte contenant au départ la valeur val, retourne le texte tapé par l’utilisateur à la place de val
confirm(texte)	fenêtre de confirmation qui retourne un booléen
back()	bouton back du navigateur
find()	recherche dans le document
forward()	bouton forward du navigateur
home()	bouton accueil du navigateur
stop()	bouton stop du navigateur
moveBy(x,y)	déplace la fenêtre (zone, couche) de x pixels horizontaux et y verticaux
moveTo(x,y)	déplace le coin gauche en (x,y)
resizeBy(l,h)	pour retrécir ou agrandir la fenêtre
resizeTo(l,h)	largeur et hauteur de la fenêtre à agrandir ou réduire
scrollBy(x,y)	déplacement horizontal et vertical du document dans la fenêtre (ascenseurs)
scrollTo(x,y)	déplacement du coin x,y du document en haut de la fenêtre

La méthode open(URL, nom, options) prend comme paramètres :

· URL : URL du document à afficher dans la fenêtre (optionnel)

· nom : nom de la fenêtre (target pour les autres documents HTML)

· option :

o height : hauteur initiale

o width : largeur initiale

o left : distance bord gauche fenêtre - bord gauche écran

o location = yes / no : barre de localisation

o menubar = yes / no : barre de menus

o resizable = yes / no : autorisation de redimensionnement

o scrollbars = yes / no : barres de défilement

o status = yes / no : barre de statut

o toolbars = yes / no : barre d'outils

Pour plus d’informations vous pouvez consulter la page suivante :

http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/

3.7.3 Interaction avec les formulaires

Accès aux textes contenus dans les champs

Les éléments de formulaire concernés sont :

boîtes de saisie de texte (INPUT type="text")
saisie de textes sur plusieurs lignes (TEXTAREA)
boîtes de saisie masquées (INPUT type="password")
boîtes de soumission de fichier (INPUT type="file")
données masquées (INPUT type="hidden")

Lecture

window.document.nom_formulaire.nom_champ.value

Écriture

window.document.nom_formulaire.nom_champ.value = texte;

NB : le champ contiendra le texte affecté à l'élément, ce texte remplacera celui qui était affiché.

Lire le texte par défaut

Lorsqu'on définit les éléments de formulaires textuels il est possible de donner un texte par défaut qui s'affiche lorsque le formulaire est chargé (par exemple un nombre de personnes à 4 ou une adresse à n'oubliez pas de donner l'étage).

Pour obtenir dans un script le texte qui est affiché au chargement, il suffit d'écrire :
window.document.nom_formulaire.nom_champ.defaultValue

Accès aux choix cochés par le client

Les éléments de formulaire concernés sont :

cases à cocher (INPUT type="checkbox")
boutons radio (INPUT type="radio")

Recherche des choix cochés

window.document.nom_formulaire.nom_champ[num_case].checked (retourne une valeur true/false)
window.document.nom_formulaire.nom_champ[num_case].value (retourne le nom donné à la boîte)

Cocher ou décocher un choix

window.document.nom_formulaire.nom_champ[num_case].checked = true/false

Obtenir le choix coché par défaut au chargement

window.document.nom_formulaire.nom_champ[num_case].defaultChecked

Accès aux choix dans les listes de choix

L'élément de formulaire concerné est SELECT

Lire les choix

window.document.nom_formulaire.nom_champ.options[num_case].selected (retourne une valeur true/false)
window.document.nom_formulaire.nom_champ.options[num_case].value (retourne le nom donné au choix)
window.document.nom_formulaire.nom_champ.length (retourne le nombre de choix possibles dans la liste)
window.document.nom_formulaire.nom_champ.options[num_case].text (retourne le texte HTML associé)

NB : pour les listes à choix unique il est possible d'obtenir directement quel est le choix sélectionné avec :
window.document.nom_formulaire.nom_champ.selectedIndex

Modifier les choix

window.document.nom_formulaire.nom_champ.options[num_case].selected = true/false

Dans l'exemple ci-dessous nous supposons qu'on peut choisir plusieurs plats (attribut multiple dans SELECT)

Accès aux textes sur les boutons

Les éléments de formulaire concernés sont :

boutons de soumission (INPUT type="submit")
boutons de soumission avec image(INPUT type="image")
boutons d'annulation (INPUT type="reset")
boutons simples (INPUT type="button")

window.document.nom_formulaire.nom_boutton.value

Evènements dans un formulaire

Lorsque le client clique dans le formulaire, modifie des champs, coche des boutons radio..., il est possible d'exécuter du code JavaScript. Ce code sert généralement à :

vérifier la validité des données entrées (pas de lettres dans un numéro de fax)
donner des informations (affichage d'un message dans la barre d'état lorsqu'on clique dans un champ de formulaire)

Les événements se placent dans l'élément de formulaire comme des attributs, ils sont de la forme nom_evenement = "code JavaScript", le code JavaScript étant la plupart du temps un appel à une fonction JavaScript définie plus haut dans la page.

ex :
<INPUT type="button" value="Informations" name="binfo" onClick="Info()">

Les évènements suivants sont utiles :

· onClick (clic sur un élément). Balises concernées :

o cases à cocher (INPUT type="checkbox")

o boutons radio (INPUT type="radio")

o boutons de soumission (INPUT type="submit") (on devra utiliser une instruction JavaScript return pour indiquer si la soumission doit être réalisée)

o boutons de soumission avec image (INPUT type="image")

o boutons d'annulation (INPUT type="reset")

o boutons simples (INPUT type="button")

· onChange (modification dans l'élément). Balises concernées :

o boîtes de saisie de texte (INPUT type="text")

o saisie de textes sur plusieurs lignes (TEXTAREA)

o boîtes de saisie masquées (INPUT type="password")

o boîtes de soumission de fichier (INPUT type="file")

o listes (SELECT)

· onFocus, onBlur (attribution, perte du focus). Balises concernées :

o boîtes de saisie de texte (INPUT type="text")

o saisie de textes sur plusieurs lignes (TEXTAREA)

o boîtes de saisie masquées (INPUT type="password")

o boîtes de soumission de fichier (INPUT type="file")

o listes (SELECT)

· onSelect (sélection dans un champ). Balises concernées :

o boîtes de saisie de texte (INPUT type="text")

o saisie de textes sur plusieurs lignes (TEXTAREA)

o boîtes de saisie masquées (INPUT type="password")

o boîtes de soumission de fichier (INPUT type="file")

onReset, onSubmit. Balise concernée : FORM

Lorsque le formulaire est soumis en appuyant sur le bouton de soumission il est possible d'appeler un événement onSubmit (pour vérifier par exemple la validité des données avant d'envoyer le formulaire ou pour demander la confirmation de la soumission). Le script devra renvoyer soit true soit false (avec une instruction JavaScript return) pour indiquer si on doit soumettre ou non le formulaire.

L'événement reset est appelé lorsqu'on a cliqué sur le bouton annuler.

Quelques méthodes sont aussi disponibles

nom	rôle
blur()	enlève le focus d'un champ du formulaire
click()	simule un clic de souris sur le champ du formulaire
focus()	attribue le focus à un champ du formulaire
select()	sélectionne le contenu d'un champ du formulaire

Exemple : window.document.nom_form.nom_champ.focus()

Il existe également les méthodes submit() et reset() sur le formulaire.

Un exemple complet

Soit le formulaire suivant :

Nom : <input type="text" name="nom"><br>

Email : <input type="text" name="email"><br>

Vin choisi : <br>

<input type=radio name="vin" value="medoc">Médoc<br>

<input type=radio name="vin" value="madiran">Madiran<br>

<input type=radio name="vin" value="chablis">Chablis<br>

<input type=radio name="vin" value="riesling">Riesling<br>

Quantité :

<br>

</form>

Voici les fonctions JavaScript qu’on peut placer par exemple dans l’entête du document :

<!--

// fonction qui vérifie si « chaine » est une chaîne composée de chiffres

// elle affiche le message d’erreur « message_d_erreur » dans le cas contraire

function VerifNb(chaine, message_d_erreur)

{

var chiffre = true;

// si la chaîne est vide elle n’est pas correcte

// les chaînes comme les tableaux ont la propriété length

if (chaine.length == 0) {

window.alert(message_d_erreur);

return false;

}

// si on trouve un caractère non compris entre 0 et 9 c’est incorrect

for(i=0 ; i < chaine.length; i++)

// la méthode charAt permet de récupérer le I-ème caractère

if(chaine.charAt(i)<'0'||chaine.charAt(i)>'9') {

chiffre=false;

}

if(!chiffre)

{

window.alert(message_d_erreur);

return false;

}

else {

return true;

}

// fonction qui vérifie le formulaire

function Verif()

{

with(window.document.commande) // pour éviter de répéter le nom du formulaire

{

// on vérifie que le nom et l’adresse e-mail ont été saisis

if(nom.value.length == 0)

{

alert("veuillez entrer votre nom");

return false;

}

if(email.value.length == 0)

{

alert("veuillez entrer une adresse email");

return false;

}

// on regarde si un vin a été choisi

var choix = false;

for(i=0; i<vin.length; i++) {

if(vin[i].checked) choix = true;

}

if(!choix) {

alert("veuillez choisir un vin");

return false;

}

// on vérifie la quantité avec la fonction ci-dessus

if(!VerifNb(quantite.value, "veuillez écrire le nombre de caisses en chiffres"))

{

// si ce n’est pas bon on sélectionne le contenu du champ quantité

// pour que l’utilisateur n’est plus qu’a corriger

quantite.focus();

quantite.select();

return false;

}

// si on renvoie true le formulaire sera soumis

return true;

}

// fonction qui demande à l’utilisateur s’il veut vraiment soumettre le form

function Confirmer()

{

return window.confirm("Voulez-vous vraiment soumettre ?");

}

//-->

</SCRIPT>

4. ressources web

v http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/

v http://magali.contensin.free.fr/html/InternetLicPro.html (cours sur le web dont est tiré celui-ci)

v http://www.editeurjavascript.com/cours/index.php

5. exercice à réaliser

Modifiez le carnet d’adresse de façon à vous assurer que les entrées ajoutées sont correctes.