JaaScriptv - fnac-static.com · 29,90 € ISBN : 978-2-409-01473-4 Ce livre s’adresse aux...

ISBN

: 97

8-2-

409-

0147

3-4

29,9

0 €

Ce livre s’adresse aux développeurs qui souhaitent se lancer dans le développement de sites et d’applications web dynamiques avec PHP et JavaScript. Pour tirer pleinement profit de la lecture de ce livre, la maî-trise du langage HTML, des connaissances sur CSS ainsi que quelques connaissances sur les bases de données sont un plus.

À l’instar de la conception d’un site internet, ce livre s’articule en deux parties. Dans la première, vous posez les fondations. À l’aide de PHP, vous composez ainsi les bases des pages (avec HTML et CSS), leur contenu, le moteur et tout ce qui gravite autour de l’application comme les données, les échanges, les interactions avec l’utilisateur, les liens, les images...

Puis une fois que la structure de l’application est bien en place, vous verrez dans la seconde partie comment la rendre plus dynamique à l’aide de JavaScript pour arriver à une application esthétique et fonc-tionnelle. Vous découvrirez ainsi par exemple comment réaliser des effets de style, animer vos pages, gérer également l’interaction avec l’utilisateur, mais cette fois côté navigateur…

Tout au long du livre, l’auteur propose de nombreux exemples pour illustrer la plupart des fonctionnalités décrites. Il met également à disposition du lecteur à la fin du livre une série d’exercices (avec propositions de solution) pour mettre en pratique les notions étudiées.

Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr.

PHP et JavaScriptDynamisez vos sites et applications web (avec exercices et corrigés)

Pour plus d’informations :

PHP

et JavaScript Dynamisez vos sites et applications web

(avec exercices et corrigés)

Mickaël ROULEAU

PHP

et J

avaS

crip

t D

ynam

isez

vos

site

s et

app

licat

ions

web

Mickaël ROULEAU

Développeur depuis plus de 20 ans, Mickaël ROULEAU a eu l’occasion de développer avec de nombreux langages et pour des environnements très différents. Depuis plus de 10 ans, il s’est spécialisé dans le développement web. Après un passage en tant que développeur PHP indépendant, il a ensuite intégré une équipe de développeurs dans une start-up toujours à la pointe des dernières technologies. Cette riche expérience acquise depuis toutes ces années le conduit aujourd’hui à proposer un livre très opéra-tionnel sur le développement d’applications web dynamiques avec PHP et JavaScript.

Avant-propos • Préparer son environne-ment de travail • Partie 1 - PHP : Introduc-tion au langage PHP • Les bases du langage PHP • Les conditions • Les boucles • Les tableaux • Les tableaux multidimension-nels • Les fonctions • Les variables super-globales • Transmettre des données entre les pages • Transmettre des données via les formulaires • Les fichiers • Les objets • Les bases de données SQL • L’architecture MVC • PHP 7 • Partie 2 - JavaScript : Appor-ter du dynamisme avec JavaScript • Les bases du langage JavaScript • Les expres-sions en JavaScript • Les fonctions JavaScript • Les objets JavaScript • Les tableaux JavaScript • Les expressions régulières • Utilisation de JavaScript sur les formulaires • Utilisation d’Ajax • Manipula-tion des propriétés CSS • Introduction à jQuery • Partie 3 : Exercices et corrigés : Mise en pratique

Les chapitres du livre

Téléchargementwww.editions-eni.fr.fr

sur www.editions-eni.fr : b Le code source

des exemples du livre

1Table des matières

Avant-propos

1. Objectif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2. À qui s'adresse ce livre et prérequis . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Chapitre 1

Préparer son environnement de travail

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

2. Sous Windows : WAMP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

3. Sous Mac OS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

4. Sous Linux. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

5. Les navigateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

6. Utiliser un éditeur de texte ou un IDE . . . . . . . . . . . . . . . . . . . . . . . . 25

7. Une première page PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Partie 1 : PHP - Introduction au langage PHP

Chapitre 2

Les bases du langage PHP

1. Les balises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

2. Afficher du texte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

3. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32

4. Sauvegarder et tester sa page PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334.1 Sauvegarder sa page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334.2 Tester sa page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

Les exemples à télécharger sont disponibles à l'adresse suivante :http://www.editions-eni.fr

Saisissez la référence ENI de l'ouvrage RIPHPJAV dans la zone de rechercheet validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement.

lcroise

Tampon

2Dynamisez vos sites et applications web

PHP et JavaScript

5. Les inclusions de page. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345.1 Principe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345.2 En pratique. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

6. Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396.1 Description. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396.2 Affecter une valeur à une variable . . . . . . . . . . . . . . . . . . . . . . . 406.3 Les types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

6.3.1 Le type string . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416.3.2 Le type integer (nombre entier). . . . . . . . . . . . . . . . . . . . 426.3.3 Le type float (nombre décimal) . . . . . . . . . . . . . . . . . . . . 436.3.4 Le type booléen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 436.3.5 Le type NULL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

6.4 Manipuler les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 446.4.1 Afficher le contenu d'une variable . . . . . . . . . . . . . . . . . . 446.4.2 Concaténer les variables. . . . . . . . . . . . . . . . . . . . . . . . . . 446.4.3 Les variables dynamiques. . . . . . . . . . . . . . . . . . . . . . . . . 466.4.4 Les calculs simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47

7. Les constantes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Chapitre 3

Les conditions

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

2. Quelques opérateurs de comparaison . . . . . . . . . . . . . . . . . . . . . . . . . 51

3. Les conditions simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.1 If... else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523.2 Elseif . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543.3 L'imbrication de conditions if . . . . . . . . . . . . . . . . . . . . . . . . . . . 553.4 Les booléens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563.5 Switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

4. Les conditions multiples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

5. L'opérateur ternaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61


Chapitre 4

Les boucles

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

2. La boucle for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

3. La boucle while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65

4. La boucle do…while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

Chapitre 5

Les tableaux

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

2. Les tableaux numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

3. Les tableaux associatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

4. Les constantes de type tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72

5. Parcourir un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 725.1 La boucle for. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 735.2 La boucle foreach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745.3 La fonction print_r . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.4 La fonction var_dump . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

6. Les fonctions sur les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796.1 Rechercher dans un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

6.1.1 La fonction in_array() . . . . . . . . . . . . . . . . . . . . . . . . . . . 796.1.2 La fonction array_key_exist() . . . . . . . . . . . . . . . . . . . . . 806.1.3 La fonction array_search() . . . . . . . . . . . . . . . . . . . . . . . . 81

6.2 Autres fonctions utiles sur les tableaux . . . . . . . . . . . . . . . . . . . 826.2.1 Ajouter une valeur dans un tableau

à la fin d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 826.2.2 Modifier une valeur dans un tableau. . . . . . . . . . . . . . . . 836.2.3 Supprimer une valeur dans un tableau . . . . . . . . . . . . . . 836.2.4 Supprimer entièrement le contenu d'un tableau . . . . . . 846.2.5 Nombre d'éléments dans un tableau . . . . . . . . . . . . . . . . 846.2.6 Trier un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85


PHP et JavaScript

6.3 Une multitude de fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

7. Les tableaux multidimensionnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

Chapitre 6

Les fonctions

1. Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93

2. Créer une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

3. Les fonctions existantes de PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Chapitre 7

Les variables superglobales

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

2. Description . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 992.1 $GLOBALS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1002.2 $_SERVER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1012.3 $_ENV . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1012.4 $_SESSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1022.5 $_COOKIE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1042.6 $_FILES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1072.7 $_GET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1072.8 $_POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

Chapitre 8

Transmettre des données entre les pages

1. Envoyer des paramètres via l'URL . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

2. Testez l'existence et le type de vos paramètres . . . . . . . . . . . . . . . . 112

3. $_POST . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113


Chapitre 9

Transmettre des données via les formulaires

1. Description d'un formulaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

2. La méthode POST. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

3. $_POST avec les autres types d'éléments . . . . . . . . . . . . . . . . . . . . . 1193.1 Type mot de passe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1193.2 Type Liste déroulante à choix unique . . . . . . . . . . . . . . . . . . . 1203.3 Type Liste déroulante à choix multiples . . . . . . . . . . . . . . . . . 1213.4 Type cases à cocher . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1233.5 Type boutons radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1243.6 Type champs cachés . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

4. Prévention des failles de sécurité . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

Chapitre 10

Les fichiers

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

2. Ouverture d'un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

3. Fermeture d'un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

4. Lecture du contenu d'un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.1 Lecture avec fgetc() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1294.2 Lecture avec fgets() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1314.3 Lecture avec fread() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1324.4 Lecture avec file_get_contents() . . . . . . . . . . . . . . . . . . . . . . . . 1334.5 Lecture avec readfile() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1334.6 Lecture avec file(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

5. Écriture dans un fichier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345.1 Écriture avec fputs() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345.2 Écriture avec fwrite(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1355.3 Écriture avec file_put_contents() . . . . . . . . . . . . . . . . . . . . . . . 135


PHP et JavaScript

6. Autres fonctions utiles sur les fichiers . . . . . . . . . . . . . . . . . . . . . . . 1356.1 Fseek() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1356.2 Ftell() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.3 Rewind() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.4 File_exists() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.5 Unlink() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366.6 Rename() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Chapitre 11

Les objets

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

2. Les classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1382.1 Déclaration d'une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1382.2 Instancier une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1392.3 L'encapsulation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1392.4 La visibilité des attributs et des méthodes . . . . . . . . . . . . . . . . 1392.5 Utilisation d'une classe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1412.6 Passage d'une instance ou d'un objet en paramètre. . . . . . . . . 1472.7 Le constructeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1482.8 Le destructeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1532.9 Les constantes de classe. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1532.10 Les méthodes statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1562.11 Les attributs statiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1572.12 Notion d'héritage. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1612.13 Redéfinition d'une méthode ou d'un attribut

dans une classe fille . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1652.14 Les attributs protected . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1662.15 Classes ou méthodes abstraites . . . . . . . . . . . . . . . . . . . . . . . . 1682.16 Classes ou méthodes finales . . . . . . . . . . . . . . . . . . . . . . . . . . . 1702.17 Les interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1702.18 Les exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1732.19 Les traits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1752.20 Déclarer et cloner un objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178


Chapitre 12

Les bases de données SQL

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183

2. Structure d'une base de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184

3. PhpMyAdmin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1853.1 Création d'une table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1893.2 Index et clé primaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1923.3 Insérer des enregistrements. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1933.4 Afficher le contenu d'une table. . . . . . . . . . . . . . . . . . . . . . . . . 1933.5 Exporter les données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1943.6 Importer des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1973.7 Les opérations sur les tables . . . . . . . . . . . . . . . . . . . . . . . . . . . 1973.8 Rechercher des données dans une table . . . . . . . . . . . . . . . . . . 198

4. PHP et le langage SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2004.1 Connexion à la base de données à l'aide de PHP . . . . . . . . . . . 2004.2 Lire les données de la base de données . . . . . . . . . . . . . . . . . . . 2034.3 Les requêtes préparées . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2084.4 Écrire des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2104.5 Modifier des données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2124.6 Supprimer des données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

Chapitre 13

L'architecture MVC

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

2. Les avantages de cette architecture . . . . . . . . . . . . . . . . . . . . . . . . . . 216

3. Fonctionnement MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216

4. Le routeur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

5. Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218


PHP et JavaScript

Chapitre 14

PHP 7

1. Les différences avec PHP 5.x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2191.1 L'opérateur <=>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2191.2 L'opérateur ?? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2201.3 Mysql_query . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2201.4 Définition du type des arguments dans une fonction . . . . . . 2211.5 Retour de fonction typé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2211.6 Et bien d'autres... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Partie 2 : JavaScript - Apporter du dynamisme avec JavaScript

Chapitre 15

Les bases du langage JavaScript

1. Introduction - Pourquoi JavaScript ?. . . . . . . . . . . . . . . . . . . . . . . . . 223

2. JavaScript, un langage balisé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

3. Un premier exemple . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

4. Les commentaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

5. Les inclusions de pages JS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

6. Débogage du code JS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

7. Point-virgule en fin d'instruction. . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

8. Les variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2298.1 Les variables de chaînes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2298.2 Les variables numériques. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2308.3 Les tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2308.4 Les tableaux multidimensionnels . . . . . . . . . . . . . . . . . . . . . . . 231

9. Les opérateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2319.1 Les opérateurs arithmétiques . . . . . . . . . . . . . . . . . . . . . . . . . . 2319.2 Les opérateurs d'affectation . . . . . . . . . . . . . . . . . . . . . . . . . . . 232


9.3 Les opérateurs de comparaison . . . . . . . . . . . . . . . . . . . . . . . . . 2339.4 Les opérateurs logiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2339.5 Les concaténations de chaînes . . . . . . . . . . . . . . . . . . . . . . . . . 2349.6 Les caractères d'échappement . . . . . . . . . . . . . . . . . . . . . . . . . . 234

10. Les types de données . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235

11. Les fonctions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

12. Les variables globales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236

13. Les variables locales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237

14. Le DOM (Document Object Model). . . . . . . . . . . . . . . . . . . . . . . . . 23814.1 Utilisation du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

15. Document.write() et autres fonctionnalités . . . . . . . . . . . . . . . . . . 242

Chapitre 16

Les expressions en JavaScript

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

2. Les expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

3. Littéraux et variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246

4. Les opérateurs relationnels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2474.1 L'opérateur d'égalité. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2474.2 Les opérateurs de comparaison . . . . . . . . . . . . . . . . . . . . . . . . . 2484.3 Les opérateurs logiques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

5. L'instruction with . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

6. Capter les erreurs JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2506.1 onerror . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2506.2 try ... catch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251

7. Les conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2537.1 L'instruction if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2537.2 L'instruction else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2537.3 L'instruction switch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2547.4 L'opérateur ternaire (… ? … : …) . . . . . . . . . . . . . . . . . . . . . . . 256


PHP et JavaScript

8. Les boucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2568.1 Les boucles while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2568.2 Les boucles do ... while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2578.3 Les boucles for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2588.4 Sortir d'une boucle avant la fin. . . . . . . . . . . . . . . . . . . . . . . . . 2598.5 L'instruction continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Chapitre 17

Les fonctions JavaScript

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261

2. Création d'une fonction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

3. Les paramètres d'une fonction : arguments . . . . . . . . . . . . . . . . . . . 263

4. Valeur de retour d'une fonction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

Chapitre 18

Les objets JavaScript

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

2. Déclarer et utiliser un objet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265

3. Convention et bonne pratique de nommage . . . . . . . . . . . . . . . . . . 269

4. Le mot-clé prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270

Chapitre 19

Les tableaux JavaScript

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

2. Les tableaux numériques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2732.1 Déclaration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2732.2 Ajouter des éléments dans un tableau . . . . . . . . . . . . . . . . . . . 2742.3 Taille d'un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2742.4 Parcourir un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275


3. Les tableaux associatifs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2763.1 Déclaration. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2763.2 Ajouter un élément . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2773.3 Parcourir le tableau associatif . . . . . . . . . . . . . . . . . . . . . . . . . . 277

4. Manipulation des tableaux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2784.1 La concaténation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2784.2 Parcourir un tableau à l'aide de forEach . . . . . . . . . . . . . . . . . . 2794.3 Utilisation de la méthode join . . . . . . . . . . . . . . . . . . . . . . . . . 2804.4 Ajouter ou supprimer des éléments d'un tableau . . . . . . . . . . 2804.5 La méthode reverse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2814.6 Trier un tableau . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

Chapitre 20

Les expressions régulières

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

2. La syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

3. Utilisation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2863.1 Utilisation de regex et de la méthode test(). . . . . . . . . . . . . . . 286

3.1.1 Tenir compte de la casse . . . . . . . . . . . . . . . . . . . . . . . . 2873.1.2 Plusieurs valeurs possibles : Ou . . . . . . . . . . . . . . . . . . . 2873.1.3 Vérification en début de chaîne . . . . . . . . . . . . . . . . . . . 2883.1.4 Vérification en fin de chaîne . . . . . . . . . . . . . . . . . . . . . 2893.1.5 Ensemble de caractères ou classe de caractères. . . . . . . 2903.1.6 Les intervalles de caractères . . . . . . . . . . . . . . . . . . . . . . 2913.1.7 L'exclusion de caractères . . . . . . . . . . . . . . . . . . . . . . . . 2913.1.8 Rechercher un caractère quelconque . . . . . . . . . . . . . . . 2923.1.9 Les ensembles prédéfinis . . . . . . . . . . . . . . . . . . . . . . . . 2923.1.10 Les quantificateurs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2933.1.11 L'échappement et les caractères spéciaux . . . . . . . . . . . 294

3.2 Exemple pratique : le numéro de téléphone. . . . . . . . . . . . . . . 2953.3 Exemple pratique : l'adresse e-mail. . . . . . . . . . . . . . . . . . . . . . 2963.4 Utilisation de l'objet RegExp. . . . . . . . . . . . . . . . . . . . . . . . . . . 298


PHP et JavaScript

Chapitre 21

Utilisation de JavaScript sur les formulaires

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299

2. Élaboration du formulaire en PHP. . . . . . . . . . . . . . . . . . . . . . . . . . . 300

3. Introduction du code JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3033.1 Vérifier que les champs ne sont pas vides . . . . . . . . . . . . . . . . 3033.2 Ajouter du contrôle de contenu . . . . . . . . . . . . . . . . . . . . . . . . 3053.3 Testez vos fonctions JavaScript . . . . . . . . . . . . . . . . . . . . . . . . 307

Chapitre 22

Utilisation d'Ajax

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311

2. Utilisation de l'objet XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . 3122.1 Instanciation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3122.2 Description des méthodes et des propriétés . . . . . . . . . . . . . . 3132.3 Envoyer une requête HTTP . . . . . . . . . . . . . . . . . . . . . . . . . . . 3142.4 Traitement côté serveur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3162.5 Récupération des données. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3172.6 Une seule requête à la fois. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320

Chapitre 23

Manipulation des propriétés CSS

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323

2. La fonction getElementById() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324

3. La fonction getElementByClassName() . . . . . . . . . . . . . . . . . . . . . . 324

4. La fonction setAttribute() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

5. La fonction hasAttribute() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327

6. La fonction removeAttribute() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

7. Exemple de mise en forme d'un élément du DOM . . . . . . . . . . . . . 328

8. Accéder aux propriétés de la fenêtre . . . . . . . . . . . . . . . . . . . . . . . . . 329


9. JavaScript en ligne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331

10. Les évènements que JavaScript peut capter . . . . . . . . . . . . . . . . . . . 333

11. Ajouter un élément au DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342

12. Supprimer un élément du DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344

13. Alternative à la création et à la suppression d'un élément. . . . . . . . 344

14. Utilisation d'un timer via setTimeout . . . . . . . . . . . . . . . . . . . . . . . 345

15. La fonction setInterval() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347

16. Simplifiez le code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34916.1 Première simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34916.2 Deuxième simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34916.3 Troisième simplification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351

Chapitre 24

Introduction à jQuery

1. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3531.1 Les différences entre jQuery et JavaScript . . . . . . . . . . . . . . . . 3541.2 Comment utiliser jQuery ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3541.3 La syntaxe jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3561.4 La documentation jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357

2. Sélectionner des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3572.1 Relation parent enfant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3582.2 Les enfants immédiats. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3602.3 Les éléments frères immédiats ou jumeaux . . . . . . . . . . . . . . . 3602.4 La sélection par les filtres . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362

2.4.1 :first . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.4.2 :last . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.4.3 :eq(indice) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3622.4.4 :gt(indice) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3632.4.5 :lt(indice). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3642.4.6 :not(sélecteur) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364

2.5 Les filtres additionnels. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364


PHP et JavaScript

3. Utilisation des méthodes jQuery. . . . . . . . . . . . . . . . . . . . . . . . . . . . 3653.1 Manipuler le contenu du document. . . . . . . . . . . . . . . . . . . . . 365

3.1.1 .html() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3663.1.2 .replaceWith() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.1.3 .text(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.1.4 .append() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3673.1.5 .prepend() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3683.1.6 .after() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3693.1.7 .before() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3693.1.8 .remove() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3693.1.9 .attr() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3703.1.10 .removeAttr() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.1.11 .addClass(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.1.12 .removeClass() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3713.1.13 .toggleClass() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3723.1.14 .css(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372

3.2 Appliquer des effets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3733.2.1 .show() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3733.2.2 .hide() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3733.2.3 .toggle() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3743.2.4 .fadeIn(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3753.2.5 .fadeOut() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3763.2.6 .fadeTo() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3763.2.7 .slideUp(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3773.2.8 .slideDown() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3773.2.9 .slideToggle(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378

3.3 Ajuster la taille des éléments . . . . . . . . . . . . . . . . . . . . . . . . . . 3783.3.1 .height() et .width() . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3783.3.2 .innerHeight() et .innerWidth(). . . . . . . . . . . . . . . . . . . 3793.3.3 .outerHeight() et .outerWidth() . . . . . . . . . . . . . . . . . . 3803.3.4 .outerHeight(true) et .outerWidth(true) . . . . . . . . . . . 3803.3.5 .offset() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3803.3.6 .position() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381


3.4 Les méthodes pour parcourir les éléments . . . . . . . . . . . . . . . . 3813.4.1 .find(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3813.4.2 .parent(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3833.4.3 .children() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384

3.5 Les évènements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3853.5.1 La méthode .on(). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3853.5.2 L'objet event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386

Partie 3 : Exercices et corrigés

Chapitre 25

Mise en pratique

1. Exercice 1 - Manipulation des tableaux. . . . . . . . . . . . . . . . . . . . . . . 3891.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3891.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

1.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3901.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3901.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3921.2.4 Question 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3921.2.5 Question 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3921.2.6 Question 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396

2. Exercice 2 - Manipulation des classes . . . . . . . . . . . . . . . . . . . . . . . . 3972.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3972.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398

2.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3982.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3982.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3992.2.4 Question 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4002.2.5 Question 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401


PHP et JavaScript

3. Exercice 3 - Manipulation des classes (complet) . . . . . . . . . . . . . . . 4013.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4013.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403

3.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4033.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4043.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4053.2.4 Question 4. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4063.2.5 Question 5. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4073.2.6 Question 6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411

4. Exercice 4 - Manipulation de JavaScript . . . . . . . . . . . . . . . . . . . . . . 4134.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4134.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415

4.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4154.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4184.2.3 Question 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

5. Exercice 5 - PHP, MySql et Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4235.1 Énoncé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4235.2 Réponses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

5.2.1 Question 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4245.2.2 Question 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 431

115

Chapitre 9

Transmettre des données viales formulaires

Transmettre des données via les formulaires1. Description d'un formulaire

Vous avez certainement déjà saisi des informations pour vous connecter à unsite web, pour dialoguer sur un blog, pour demander des compléments d'infor-mation sur un site marchand, etc.

Pour échanger ces informations, vous avez utilisé des formulaires, ils sont par-tout sur les sites web, c'est le meilleur moyen pour transmettre des données.

Vous verrez dans les paragraphes suivants que pour récupérer les informationssaisies par le visiteur, on utilisera essentiellement la méthode POST (on abor-dera succinctement la méthode GET, vue au chapitre précédent).

Remarque

Le but de ce chapitre n'est pas de concevoir des formulaires, mais d'en récu-pérer les données transmises au serveur.

lcroise

Tampon

© E

dit

ions

EN

I -

All r

ights

rese

rved


PHP et JavaScript

2. La méthode POST

Afin de comprendre la transmission des données via les formulaires, on vasuivre un exemple à partir d'un petit formulaire de contact, qui permettra auvisiteur de saisir quelques données le concernant et de poser une question.

Voici l'affichage que l'on souhaite obtenir :

Le formulaire est écrit en HTML, en voici le code source :

<h2>Formulaire de contact</h2>

<form action="ch11_traitement_du_formulaire.php" method="post"> Nom<br /><input type "text" name="nom"><br /><br /> Prenom<br /><input type "text" name="prenom"><br /><br /> Question<br /><textarea rows="5" cols="40"name="question"></textarea><br /> <br /> <input type="submit" name="valider" value="Valider"></form>

117Transmettre des données via les formulairesChapitre 9

On va s'attarder un peu sur la balise <form> du formulaire et ses deux attri-buts importants : action et method :

– Action : cet attribut contient tout simplement le nom de la page PHP quisera appelée lorsque le visiteur aura cliqué sur le bouton Valider, et c'estdans cette page que l'on pourra récupérer les données saisies par le visiteur.

– Method : c'est le mode ou la méthode de récupération des données, vous enconnaissez déjà une, GET (cf. chapitre Transmettre des données entre lespages) qui permet de récupérer les valeurs via l'URL, et la méthode POST,qui permet de récupérer les données transmises à la page décrite dans l'attri-but action, via la variable superglobale $_POST.

Dès que le visiteur va cliquer sur le bouton Valider, les données seront trans-mises à la page PHP "ch11_traitement_du_formulaire.php" :

Bien entendu, vous pouvez nommer comme bon vous semble la page définiedans l'attribut action, par exemple "reception_données.php", ou "post.php",etc. Vous pouvez même utiliser le même nom que le fichier d'origine :"ch11ex01.php", cela veut dire que la gestion de la récupération des donnéessera effectuée dans le même fichier que celui qui décrit le formulaire en HTML.

Voici maintenant (ci-dessous) un exemple de fichier PHP qui permettra degérer les données transmises dans le tableau associatif $_POST :

<?php if (isset($_POST['nom'])) { $nom=$_POST['nom']; }

if (isset($_POST['prenom'])) { $prenom=$_POST['prenom']; }

if (isset($_POST['question'])) { $question=$_POST['question']; }

© E

dit

ions

EN

I -

All r

ights

rese

rved


PHP et JavaScript

echo "Le visiteur se nomme ".$nom." ".$prenom."<br>"; echo "Sa question est: ".$question."<br>";?>

<p>Cliquez <a href="ch11_ex01.php">ici</a> pour revenir au formu-laire.</p>

dTestez la page du formulaire, puis voyez le résultat, en supposant que vousayez saisi les trois champs :

Ce n'est pas plus compliqué que ça! N'oubliez jamais de tester l'existence desdifférentes données attendues (on le répète, on n’est jamais à l'abri d'incohé-rences).

Si vous modifiez le premier fichier en appliquant la méthode GET, vous devrezégalement modifier le second fichier en changeant tous les $_POST par$_GET.

Comme on l'a évoqué au chapitre précédent, la méthode GET permet de passerles données dans l'URL, voici ce que l'on obtiendrait :

La méthode POST permettra de gérer tous les types d'éléments du formulaire,c'est ce que l'on va voir ci-dessous.

119Transmettre des données via les formulairesChapitre 9

3. $_POST avec les autres types d'éléments

Dans l'exemple ci-dessus, on a vu les zones de texte classiques et les grandeszones de texte (textarea). Il en existe bien d'autres que vous allez découvrir ci-après.

3.1 Type mot de passe

La zone de texte mot de passe est une zone de type texte qui permet de ca-cher la saisie du visiteur (tous les caractères sont remplacés par des astérisques(*)), voyez plutôt :

Pour obtenir cet affichage, il faudra écrire en HTML :

Mot de passe<br /><input type="password" name="motdp">

Et pour récupérer la valeur, il faudra écrire en PHP :

<?php echo $_POST['motdp'];?>

Ceci affichera le mot de passe que vous avez saisi.

© E

dit

ions

EN

I -

All r

ights

rese

rved


PHP et JavaScript

3.2 Type Liste déroulante à choix unique

Vous avez déjà tous eu à choisir une valeur dans une liste déroulante commecelle ci-dessous :

Le code HTML de cet exemple :

<h2>Formulaire de contact</h2> <form action="ch11_ex03_post.php" method="post"> Quel sport pratiquez-vous?<br /> <select name="choix_sport"> <option value="Football">Football</option> <option value="Tennis">Tennis</option> <option value="Rugby">Rugby</option> <option value="Autre">Autre</option> </select></form>

Et pour récupérer la valeur sélectionnée, il faudra utiliser le tableau $_POSTcomme ceci :

<?php echo $_POST['choix_sport'];?>

Ce code affiche Tennis si c'est votre choix. C'est la valeur qui est inscrite dansla balise value qui est transmise à la variable superglobale $_POST.

Si vous omettez de définir les attributs value, c'est la valeur entre les balises<option> qui sera transmise.

JaaScriptv - fnac-static.com · 29,90 € ISBN : 978-2-409-01473-4 Ce livre s’adresse aux...

Documents

Transcript of JaaScriptv - fnac-static.com · 29,90 € ISBN : 978-2-409-01473-4 Ce livre s’adresse aux...