COURS DE - alwaysdataessaierasme2012.alwaysdata.net/C_CoursSite2016.docx · Web viewPour développer un site internet, il n'est pas nécessaire d'avoir un programme spécifique. Tout

COURS DE

© HOFMANS PierreSeptembre 2016

CREATION D'UN SITE WEB© Pierre Hofmans

PARTIE 1 : INTRODUCTION GENERALE........................11. Introduction générale.....................................................12. Qu'est-ce qu'un bon site WEB ?............................................13. Les différentes étapes pour publier un site sur le web....................24. Que peut-on trouver dans un site ?........................................35. Avertissements sur le cours...............................................3

PARTIE 2 : LE LANGAGE HTML5 (partie 1)..................11. Introduction..............................................................12. La structure de base en HTML5.............................................33. Les abréviations Entity...................................................64. Les balises "Lignes/Paragraphes"..........................................75. Les balises "texte".......................................................86. Les balises "Titres"......................................................97. Les balises "Listes".....................................................10

A. Les listes ordonnées.................................................10B. Les listes non-ordonnées.............................................11C. Les listes imbriquées................................................11D. Les listes de définitions............................................11

8. Les balises "Images".....................................................12A. Insérer une image....................................................12B. Format des images à insérer..........................................14

9. Redéfinir l'icône du site................................................1510. Tracer une ligne.........................................................1611. Les hyperliens internes et externes......................................1612. Les images mappées.......................................................17

A. Principe.............................................................17B. Exemple de base......................................................18C. Les différentes balises et leurs attributs...........................18D. Trucs et astuces.....................................................19E. Création d'une map avec Mcc HTML Mapper..............................20

PARTIE 3 : LES FEUILLES DE STYLE (partie 1)............11. Qu'est-ce qu'une feuille de style ?.......................................12. Les feuilles de style en cascade (ou CSS).................................1

A. Comment appliquer un style ?..........................................1B. L'héritage............................................................3C. Les classes...........................................................3D. Priorité des propriétés CSS et attributs HTML.........................4E. Class ou Id ?.........................................................4F. Les boîtes............................................................5G. Les balises HTML <div> et <span>......................................5H. Syntaxe...............................................................6

3. Liste des propriétés......................................................7

16.05.23


A. Introduction..........................................................7B. Les couleurs..........................................................7C. Les unités de mesure..................................................7D. Les propriétés Background.............................................7E. Les dégradés de couleur linéaires.....................................9F. Les propriétés Font..................................................11G. Les propriétés Text..................................................12H. Les Pseudo-Classes/Elements..........................................13I. Les propriétés List..................................................13J. Les propriétés Aspect général des boîtes.............................14K. Les propriétés Padding...............................................15L. Les propriétés Border................................................16M. Les coins arrondis...................................................17N. Les propriétés Margin................................................19O. Diverses propriétés..................................................19P. Les effets de transition.............................................20Q. Les positions........................................................22

PARTIE 4 : LES TABLEAUX (HTML & CSS)....................11. Les balises et propriétés "Tableaux"......................................1

PARTIE 5 : STRUCTURER UNE PAGE (HTML & CSS).............11. Les cadres locaux (ou iframe).............................................12. Les nouvelles balises de structure en HTML5...............................13. La mise en page avec les propriétés Flexbox...............................34. Exemple complet d'une page................................................65. CSS - Configuration de l'écran...........................................11

PARTIE 6 : HEBERGER SON SITE............................11. Créer un domaine..........................................................12. Utilisation de FTP........................................................53. Le référencement et les balises META......................................7

PARTIE 7 : LES FORMULAIRES..............................11. Introduction..............................................................12. Les balises spécifiques aux formulaires...................................13. Mise en forme des formulaires.............................................54. Exemple...................................................................5

PARTIE 8 : PHP..........................................11. Introduction..............................................................12. Préparation du PC.........................................................13. Syntaxe générale..........................................................34. Les variables.............................................................3

A. Avant-propos..........................................................3B. Initiation aux variables..............................................4

5. Etude des nombres.........................................................5A. Etude basique des nombres.............................................5B. Informations supplémentaires sur les nombres..........................6

16.05.23


6. Etude des string..........................................................7A. Etude basique des String..............................................7B. Informations supplémentaires sur les String...........................8

7. Conversion string - nombres..............................................108. Les fonctions............................................................10

A. Introduction.........................................................10B. Déclaration..........................................................11C. Appel................................................................11D. Les paramètres.......................................................11E. Renvoi d'une valeur..................................................12F. Variables locales ou globales ?......................................13

9. Les conditions...........................................................14A. Les variables booléennes.............................................14B. Les opérateurs de comparaison........................................14C. Les opérateurs logiques..............................................15D. La commande if.......................................................15E. Les conditions ternaires.............................................17F. La commande switch...................................................17

10. Les boucles..............................................................18A. La boucle For........................................................18B. La boucle While......................................................19C. La boucle Do ... While...............................................19D. Les instructions de contrôle Continue et Break.......................19

11. Les tableaux.............................................................20A. Les tableaux numérotés : Création et initialisation..................20B. Les tableaux numérotés : Lecture.....................................21C. Les tableaux numérotés : Modification................................21D. Les tableaux associatifs.............................................22E. La boucle foreach....................................................23F. Les fonctions de recherche spéciales.................................24G. Divers...............................................................26

12. Les commandes du type "include"..........................................2813. Transmission des données.................................................30

A. La méthode get.......................................................30B. La méthode post......................................................32C. Les différents champs d'un formulaire................................32D. Diverses remarques importantes.......................................35E. Une page PHP s'appelant elle-même....................................35F. Sécuriser son site...................................................36

14. Les dates................................................................3815. Les sessions.............................................................3816. Les cookies..............................................................4017. Les variables superglobales..............................................4218. La gestion des directories...............................................4219. La gestion des fichiers..................................................4320. L'upload d'un fichier dans un formulaire.................................45

A. Etape 1 : Définition du formulaire...................................46B. Etape 2 : Réception des fichiers.....................................46C. Etape 3 : Contrôle en PHP des fichiers...............................47D. Etape 4 : Sauvegarde des fichiers dans un dossier permanent..........48

21. La fonction mail().......................................................49

16.05.23


PARTIE 9 : GESTION D'UNE BASE DE DONNEES................11. Note de l'auteur..........................................................1

PARTIE 10 : JAVASCRIPT..................................11. Introduction..............................................................12. Où placer mon code JavaScript ?...........................................1

A. Cas 1 : Dans une balise HTML..........................................1B. Cas 2 : Dans le corps d'une page HTML.................................2C. Cas 3 : Dans l'en-tête d'une page HTML................................2D. Cas 4 : Dans un fichier externe.......................................3

3. Un peu de syntaxe.........................................................34. Dialoguons avec l'internaute..............................................45. Les variables.............................................................5

A. Introduction..........................................................5B. Déclaration, initialisation et utilisation............................5C. Etude basique des String..............................................6D. Etude basique des nombres.............................................7E. Conversion String → nombre............................................8F. Conversion nombre → String............................................9

6. Les fonctions............................................................10A. Introduction.........................................................10B. Déclaration..........................................................10C. Appel................................................................11D. Renvoi d'une valeur..................................................11E. Variables locales ou globales ?......................................12

7. Les événements...........................................................128. La commande innerHTML....................................................149. Les outils de comparaison................................................16

A. Les variables booléennes.............................................16B. Les opérateurs de comparaison........................................16C. Les opérateurs logiques..............................................17D. L'instruction de test if.............................................18E. L'instruction de test switch.........................................19F. Le contrôle des données numériques encodées via la fonction prompt(). 19

10. Les boucles..............................................................2011. Les tableaux.............................................................22

A. Création d'un tableau................................................22B. Initialisation d'un tableau..........................................22C. Lecture d'un tableau.................................................22D. Modification d'un tableau............................................23E. Tri d'un tableau.....................................................24F. Les tableaux à 2 dimensions..........................................24

12. Fonction : les arguments facultatifs ou illimités........................25A. Les arguments facultatifs............................................25B. Les arguments illimités..............................................25

13. Introduction à la Programmation Orientée Objet...........................26A. Qu'est-ce qu'un objet ?..............................................26B. Créer une instance...................................................26C. Les attributs et méthodes............................................27D. Destruction d'un objet...............................................27E. Les objets HTML......................................................27

16.05.23


F. Le mot-clé this......................................................2814. JavaScript et les feuilles de style......................................2815. POO spécifique aux formulaires...........................................30

A. Les gestionnaires d'événements onsubmit et onreset...................30B. Accéder aux éléments du formulaire...................................30C. Méthodes spécifiques aux formulaires.................................31D. Etude détaillée des éléments d'un formulaire.........................31

16. Les objets JavaScript en détail..........................................37A. Math.................................................................37B. Number...............................................................38C. String...............................................................39D. Array................................................................40E. Timing events........................................................42F. Date.................................................................43

17. Partie "Dépassements"....................................................46A. Rediriger vers un autre site après quelques secondes.................46B. Diverses fonctions...................................................46C. Mettre un plan en valeur.............................................47D. Les cookies..........................................................49

16.05.23


1. INTRODUCTION GÉNÉRALE Le but de ce cours est de vous apprendre les bases essentielles nécessaires à la création d'un site internet.

Le langage utilisé à l'origine pour la création des pages web est l'HTML. Celui-ci est d'ailleurs, encore et toujours, le langage universel utilisé par tous les systèmes internet. C'est pourquoi la première partie du cours sera dédicacée à son apprentissage. Toutefois, l'informatique évoluant constamment, d'autres langages tels que JavaScript, PHP, ASP.Net, ... sont apparus. Ceux-ci sont généralement utilisés pour certaines fonctionnalités plus spécifiques et plus complexes.

Durant cette année de cours, nous étudierons notamment l'HTML5, le CSS3, le PHP, MySQL et JavaScript. Attention, il faut savoir que si l'HTML est connu partout, il n'en est pas de même pour le PHP et l'ASP.Net. En effet, vous ne pourrez les utiliser que si le serveur qui vous hébergera connaît ce langage.

Pour développer un site internet, il n'est pas nécessaire d'avoir un programme spécifique. Tout simple éditeur de texte tel que Notepad (ou Bloc-notes) suffit. C'est pourquoi, nous utiliserons celui-ci dans un premier temps afin de mieux nous familiariser avec le langage HTML. Par la suite, nous utiliserons le logiciel "PSPad" qui est un éditeur plus élaboré qui facilite l'encodage des commandes et diminue ainsi le nombre d'erreurs de syntaxe. Si ce logiciel n'est pas le plus puissant, nous verrons qu'il est plus que suffisant pour un usage normal et il a l'avantage d'être gratuit.

2. QU'EST-CE QU'UN BON SITE WEB ? Vous vous préparez à créer votre propre site WEB. Très bien, mais avant de vous lancer tête baissée dans la rédaction du fichier HTML, avez-vous réfléchi à ce qu'est un bon site ? Pensez-vous que le vôtre en fera partie ou ne sera-t-il qu'un site parmi d'autres?

Qu'est-ce qu'un bon site ? Qu'est-ce qui fait qu'un site rencontre le succès mérité ou non ? Difficile à dire. C'est un peu comme les chansons à succès. On ne peut pas prédire si une chanson sera disque d'or ou de platine, mais par contre on peut souvent dire si le disque est destiné à la poubelle. Pour un site, c'est la même chose, si on veut que le site ait une chance de marcher, il faut respecter certains critères mais rien ne dit qu'il sera pour cela le site le plus visité dans sa catégorie.

Voici une liste de critères (dans le désordre) :- Les informations doivent être correctes et, le cas échéant, mises-à-jour régulièrement.

- Le temps de chargement doit être court. Si la page est trop longue à

16.05.23 Intro - 1


s'afficher à l'écran, l'utilisateur sera déjà parti sur un autre site. Il faut donc éviter la surcharge d'images.

- La clarté. L'utilisateur trouve-t-il facilement l'information qu'il recherche sur vos pages ?

- Navigation aisée. Les menus, boutons de commande et hyperliens sont-ils efficaces et clairement identifiables ?

- L'attractivité. Le look doit être attractif, différent des autres sites.

- L'interactivité. Les visiteurs peuvent-ils vous contacter par téléphone, courrier, e-mail, formulaires, ... ? Existe-t-il un forum lié à votre site ?

- L'accessibilité, c'est-à-dire la possibilité de visualiser votre site sur le plus grand nombre d'ordinateurs quelle que soit leur configuration (navigateurs, résolutions d'écran, ...). Si le critère de la résolution d'écran est assez facile à régler (on admet en général que les écrans actuels acceptent une résolution de 1024*768 pixels), le problème des navigateurs est plus embêtant. En effet, si l'HTML est le langage universel utilisé sur le Web permettant à votre information d'être transportée sur cette gigantesque toile de réseaux interconnectés pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser (Ce dernier vous permet de surfer sur le net et d'afficher sur votre écran les pages qu'il a interceptées), il y a beaucoup de navigateurs différents, des simples et des plus élaborés (ex.: Internet Explorer, Mozilla, ...). Chaque browser a sa propre façon de travailler. A la différence d'un traitement de texte qui restitue exactement votre document sur une feuille de papier avec votre police de caractères et votre mise en page, vous ne saurez jamais ce que le browser de votre lecteur affichera sur son écran. En HTML, vous n'avez pas la maîtrise totale de votre document. De plus, certaines commandes HTML ne sont connues que par certains browsers. Il faudra donc éviter l'utilisation de certaines commandes et tester votre site à partir de plusieurs navigateurs si vous souhaitez qu'il soit accessible par tous. Eventuellement, vous ajouterez sur la page d'accueil un message stipulant que votre site a été optimisé pour un browser particulier.

En conclusion, avant de vous lancer sur votre ordinateur, veuillez réfléchir à la conception de votre site.

Attention, n'oubliez pas que votre site doit également respecter les règles du copyright, ainsi que ne pas heurter certaines personnes (religion, ...). Il est également interdit de faire du négationnisme.

3. LES DIFFÉRENTES ÉTAPES POUR PUBLIER UN SITE SUR LE WEB Voici les différentes étapes nécessaires à la publication d'un site sur internet (Elles seront plus détaillées lors de la suite du cours) :- Conception analytique du site- Création des pages sur son pc- Réservation d'un nom de domaine- Transfert de ses pages vers l'hébergeur- Référencer son site- Maintenance du site

16.05.23 Intro - 2


4. QUE PEUT-ON TROUVER DANS UN SITE ? Si au départ, un site est composé d'un simple écran de texte, on peut y ajouter différents éléments dont :- Des images - Des hyperliens internes (un peu plus loin sur la même page) - Des hyperliens externes (sur une autre page du site ou vers un autre site) - Un menu - Un écran de login avec mot de passe - La possibilité de nous envoyer un e-mail - L'accès à une base de données

5. AVERTISSEMENTS SUR LE COURS Etant conscient que la matière étudiée durant l'année n'est pas très aisée, j'ai séparé les exemples et exercices en deux catégories.

La première reprend tous les codes dont le but est de vous permettre de mieux comprendre les dernières commandes étudiées.

La seconde est réservée à la création et l'amélioration de sites. Ces derniers seront construits et modifiés au fur et à mesure des exercices. Ceux-ci ont donc pour but de vous apprendre à mettre en pratique tout ce qui aura déjà été étudié afin de vous apprendre à construire un site étape par étape.

De plus, afin de faciliter l'apprentissage des langages de programmation tels que JavaScript et PHP, il sera effectué parallèlement à l'étude des algorithmes.

16.05.23 Intro - 3


1. INTRODUCTION Nous verrons dans ce chapitre la première partie du langage HTML5 de base. D'autres informations seront données dans les chapitres suivants.

Avant toute chose, parlons un petit peu du contenu informatique des sites WEB. Si les premiers sites web étaient rédigés au moyen du seul langage HTML, l'informatique a fortement évolué depuis lors.

En effet, dans les premières versions de l'HTML, le texte et la présentation des pages se faisaient au niveau de l'HTML. Mais les concepteurs ont pris conscience qu'il y avait un problème à ce niveau lorsque l'on créait un site avec plusieurs pages. Il fallait à chaque fois redéfinir toute la présentation pour chaque élément de chaque page. Ce n'est déjà pas amusant de taper tous ces paramètres lors de la création du site, mais en plus, si on veut modifier la présentation générale (couleurs, polices, etc.) par après, c'est un travail énorme pour pas grand-chose. Il aurait été plus simple d'avoir un endroit où l'on définit les différents styles de présentation que l'on veut avoir sur son site (ex.: pour les paragraphes normaux, pour les titres, pour les définitions à mettre en évidence, etc.) et un autre endroit où l'on n'a que le contenu des pages avec un lien vers les définitions des styles. C'est à partir de cette constatation que les feuilles de style (ou le langage CSS) ont été créées.

A présent, tous les sites WEB dignes de ce nom sont basés sur différents langages dont, au minimum, l'HTML et le CSS.

Suite à cette constatation et donc la création des feuilles de style, de nouvelles normes ont été établies entre les différents concepteurs. Ceux-ci ont notamment décidé de déprécier un grand nombre de commandes HTML. Cela signifie que ces attributs sont encore connus par les navigateurs mais sont destinés à disparaître prochainement !

Nous allons avoir affaire à deux langages qui se complètent car ils ont des rôles différents :

• HTML (HyperText Markup Language) dont le rôle est de gérer et organiser le contenu. C'est en HTML que l'on précisera la structure (ex.: ceci est un titre, ceci est le sujet principal de la page, ...) et le contenu de la page (ex.: le texte, les images, ...).L'HTML5 est la dernière version. Bien qu'elle ne soit pas encore tout-à-fait finalisée, elle est de plus en plus répandue car elle apporte de nombreuses améliorations comme un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc.

• CSS (Cascading Style Sheets, aussi appelées Feuilles de style) dont le rôle est de gérer l'apparence de la page (positionnement, décoration, couleurs, taille du texte, police de caractères, ...).Le CSS 3 est la dernière version. Elle apporte différentes fonctionnalités particulièrement attendues telles que les bordures arrondies, les dégradés,

16.05.23 HTML5 (partie 1) - 1


les ombres, etc.

Toutefois, lorsqu'un internaute consulte un site, il ne voit pas ces lignes de commandes car son navigateur (ou browser) les aura traduites afin d'afficher la page telle que le webmaster l'a souhaité.

Pour vous donner une idée, les images suivantes montrent :- un extrait des commandes HTML et CSS

- la page affichée sans tenir compte des commandes CSS

16.05.23 HTML5 (partie 1) - 2


- la page affichée en tenant compte des commandes CSSPour info, le site http://www.csszengarden.com est dédicacé à la présentation des possibilités que les feuilles de style apportent à un site. En effet, les nombreuses pages vous montrent toujours le même contenu mais présenté différemment. Pour ce faire, le webmaster a uniquement modifié la partie CSS du site ; les pages HTML n'ont pas été modifiées.

Mais comment la demande d'affichage d'un site fonctionne-t-elle pratiquement ?

Lorsque vous demandez à votre navigateur web d'afficher une page, le navigateur (client) envoie une requête à un autre ordinateur sur lequel la page demandée a été stockée (le serveur). Celui-ci recherche les fichiers demandés (HTML et CSS) et les envoie au client. Ensuite, le client va les lire, les interpréter et les afficher. Il en profitera pour demander au serveur tous les fichiers joints à la page initialement demandée (images, scripts, animations, ...).

Pour que tous ces transferts se fassent assez rapidement, les fichiers HTML et CSS sont en réalité de simples fichiers "texte" qui contiennent le texte à afficher avec toutes sortes de règles pour l'affichage (afficher le texte en gras, italique, insérer une image, etc.). Ces règles ou instructions destinées au browser sont différenciées du texte par les signes < et > (ex.: <html>). Ces instructions s'appellent "tags" ou "balises". Comme nous le verrons, certaines balises sont accompagnées d'attributs qui précisent les modalités de l'action (ex.: l'image à afficher <img src="nomImage.gif">).

2. LA STRUCTURE DE BASE EN HTML5 Conseil : Etudiez au préalable le cours "CREATION D'UN SITE WEB - Les Editeurs"

Avant de voir les premières balises, il faut savoir plusieurs choses :- La grande majorité des commandes HTML sont composées d'une paire de balises :

la balise de début d'action <...> et la balise de fin d'action </...>.Exemple : les balises indiquant un titre <h1>Mon titre</h1>

16.05.23 HTML5 (partie 1) - 3

http://www.csszengarden.com/


D'autres balises, appelées balises orphelines, ne sont composées que d'un seul élément.Exemple : Les balises insérant une image <img src="maVoiture.gif" />Ces balises servent le plus souvent à insérer un élément à un endroit précis (ici, une image). Il n'est pas nécessaire de délimiter le début et la fin de l'élément, on veut juste dire à l'ordinateur d'insérer l'élément à cet endroit. Ces balises n'ont en effet pas besoin de balises de fin d'action.Notez que le / de fin n'est pas obligatoire. Néanmoins, pour ne pas les confondre avec les balises du premier type, les webmasters recommandent de rajouter ce / (slash) à la fin des balises orphelines.

- Les balises ne sont pas "case sensitive". Vous pouvez donc les écrire au moyen de majuscules ou minuscules. Toutefois, certains nouveaux langages dérivés de l'HTML n'aiment que les minuscules...

Voyons à présent la structure de base d'une page en HTML5 :

La première balise <!DOCTYPE html> indique que ce fichier correspond bien à une page WEB rédigée en HTML5.

La paire de balises <html> </html> indiqueront toujours respectivement le début et la fin de la page WEB. Votre page, et donc les autres balises, sera placée entre ces deux tags.

Votre document est divisé en deux grandes parties : l'en-tête et le corps. L'en-tête du document, partie non visible et délimitée par les balises <head> et </head>, contient notamment, comme nous le verrons dans la suite du cours, les informations permettant aux moteurs de recherche de trouver votre site.

La balise <meta charset="UTF-8" /> présente dans la section <head> indique l'alphabet des caractères utilisés dans le fichier. Sans ces informations, certains navigateurs afficheront les pages bizarrement. En effet, les caractères accentués,... pourraient être remplacés par d'autres.Le code UTF-8 représente les caractères internationaux, y compris les caractères accentués des langues européennes.

C'est également dans l'en-tête que vous définirez le titre de votre page grâce aux balises <title> et </title>. Celui-ci apparaîtra sur la barre de titre ou comme titre de l'onglet correspondant de votre navigateur. Cette balise (obligatoire) permettant aussi aux moteurs de recherche de vous trouver, il est conseillé d'y placer un texte explicite.

Le corps du document correspond à la partie visible par l'internaute qui visitera votre site. Il est délimité par les balises <body> et </body>.

16.05.23 HTML5 (partie 1) - 4


Exemple :

a) Créons à présent notre première page HTML au moyen du logiciel PSPad. Encodons le texte suivant et sauvons le fichier sous le nom exemplel.html. Rem.: L'HTML n'impose pas cet alignement des balises, il est utilisé ici pour plus de clarté Conseil : Respectez cette indentation !

b) Visualisons à présent notre page à partir d'un navigateur. Pour cela, il suffit de double-cliquer sur le nom du fichier.

c) Tout en gardant le navigateur ouvert, ajoutons les phrases "Pour moi, tout va bien. J'ai bien profité de mes congés pour me reposer et ainsi être prêt pour les cours." à la suite du texte précédent (sur la même ligne ou sur la suivante). Sauvons le fichier et rafraîchissons la fenêtre du navigateur.

d) Agrandissons et rétrécissons la largeur de la fenêtre du navigateur.

e) Exécutons la commande Menu contextuel / Afficher le code source.

Remarques :

a) Les fichiers HTML ont, en général, l'extension .htm ou .html

b) Il est possible d'afficher le code source d'une page HTML au moyen de la commande du menu contextuel / Afficher le code source.

16.05.23 HTML5 (partie 1) - 5


c) Le texte se dispose automatiquement dans la fenêtre en fonction de la taille de celle-ci. Si l'on souhaite imposer une certaine présentation, il faudra utiliser des balises supplémentaires ou les feuilles de style (CSS) tout en sachant que l'on n'aura jamais la maîtrise totale de la présentation.

d) Il peut arriver que l'on souhaite mettre un commentaire dans la source de la page web. Celui-ci ne doit apparaître que lors de l'édition du fichier via un éditeur HTML et pas lors de la visualisation de la page via un navigateur. Les commentaires s'écrivent de la manière suivante : . Ces commentaires ne sont visibles par l'internaute que lors de l'affichage du code source.

Exercice :

Faire l'exercice Cl.

3. LES ABRÉVIATIONS ENTITY Avant l'apparition de l'Unicode, les caractères étaient codés sur 7 bits. Cela signifie que le système ne connaissait qu'au maximum 128 caractères. Ce qui est trop peu pour reprendre tous les caractères (chiffres, lettres majuscules, lettres minuscules, lettres accentuées, etc.). C'est pourquoi certains caractères spéciaux (lettres accentuées, etc.) étaient mal supportés par certains browsers. Lorsque l'on souhaitait utiliser un de ces caractères dans notre page, il fallait insérer soit le code ISO le représentant, soit son abréviation Entity dans le document HTML. Par exemple, à la place du caractère é, il fallait taper soit é, soit é (ex.: défi s'écrivait défi ou défi). Pratique, non ?

Voici une liste des caractères les plus utilisés, ainsi que leur abréviation ENTITY :

Caractère Code ISO ENTITY Caractère Code ISO ENTITY Caractère Code ISO ENTITY… ² ² ² ä ä ä‰ ³ ³ ³ æ æ æ‹ µ µ µ ç ç çŒ º º º è è è™ " » » é é é› ¼ ¼ ¼ ê ê êœ ½ ½ ½ ë ë ë espace ¾ ¾ ¾ î î î§ § § ¿ ¿ ¿ ï ï ï¨ ¨ ¨ Ç Ç Ç ñ ñ ñ© © © à à &agrace; ÷ ÷ ÷® ® ® á á á ù ù ù° ° ° â â â û û û± ± ± ã ã ã ü ü ü

Les browsers ne tiennent compte que d'un seul espace entre les mots. En d'autres mots, si vous mettez 5 espaces entre deux mots, le browser en éliminera 4 pour n'en afficher qu'un seul... Et en plus, si vous mettez des espaces au début d'un paragraphe, il les enlève tous ! Chouette, non ? Si on en met trop par erreur,

16.05.23 HTML5 (partie 1) - 6


c'est pratique. Evidemment, si on veut vraiment les avoir, c'est plus embêtant... Une astuce? Il faut remplacer chaque espace par son code iso ou son abréviation Entity

4. LES BALISES "LIGNES/PARAGRAPHES" Comme vous avez pu le constater dans les exemples et exercices précédents, le navigateur affiche le texte qu'on lui envoie en passant à la ligne lorsqu'il atteint le bord de la fenêtre. Vous conviendrez avec moi et surtout avec les concepteurs de l'HTML que ce n'est pas une bonne façon de présenter le texte sur les pages WEB. C'est pourquoi ils ont défini des balises pour le structurer. Nous verrons dans la suite du cours qu'il existe plusieurs niveaux de formatage, mais voyons dès à présent les balises de base.

La première paire de balises à connaître est <p>...</p> qui permet de délimiter un paragraphe.

Exemple :

Reprenons l'exemple précédent et ajoutons-y les balises <p>

Attention, si les anciennes versions de l'HTML permettaient d'aligner le texte au sein du paragraphe au moyen de l'attribut Align, ce n'est plus le cas dans cette version-ci ! En effet, rappelons qu'il a été décidé de déplacer tout ce qui concerne l'apparence de la page au niveau des commandes CSS (voir suite du cours), l'HTML ne traite plus que le contenu et sa structure.

Comme vous pouvez le constater, un changement de paragraphe s'accompagne d'un saut de ligne également. Si l'on souhaite n'effectuer qu'un passage à la ligne,

16.05.23 HTML5 (partie 1) - 7


on utilisera la balise orpheline <br />. Attention, cette balise doit obligatoirement se trouver au sein d'un paragraphe !

La paire de balises <blockquote>...</blockquote> permet de mettre un texte en évidence en lui appliquant, par défaut, un retrait des marges gauche et droite. En fait, le rôle premier de ces balises est d'encadrer une citation venant d'une autre source. La présentation par défaut, quant à elle, pourra toujours être modifiée au moyen des CSS (voir suite du cours).

Vous en avez marre de définir tous ces alignements, de mettre des espaces en quantité, etc. ? Utilisez dans ce cas les balises <pre> et </pre>. Celles-ci affichent un texte dit préformaté. Le browser prend ainsi en compte tous les espaces et sauts de ligne définis à l'écran dans le fichier source HTML. Attention, il est toutefois recommandé de ne pas trop utiliser ces balises car il est préférable de laisser le browser redisposer correctement le contenu de la page en fonction de la largeur de la fenêtre dédicacée.

5. LES BALISES "TEXTE" Dans les exemples et exercices précédents, les caractères ont tous les mêmes caractéristiques. Voyons à présent comment améliorer la présentation du texte en appliquant un format spécifique à certains caractères.

Attention, pour rappel, au niveau de l'HTML5, on utilisera les balises mises à notre disposition pour indiquer l'importance de certaines parties du texte présent sur les pages du site sans pour autant pouvoir redéfinir avec précision l'aspect souhaité des caractères. Ces définitions se feront en CSS.

La première paire de balises, <em> ... </em>, permet d'indiquer que le texte encadré est à mettre un peu en valeur. Par défaut, les navigateurs le mettront

16.05.23 HTML5 (partie 1) - 8


en italique ; mais attention, n'oublions pas que le webmaster peut décider d'attribuer d'autres caractéristiques à ces balises que l'italique grâce au CSS.

La deuxième paire de balises, <strong> ... </strong>, permet d'indiquer que le texte encadré est important et qu'il faut le mettre bien en valeur. Par défaut, les navigateurs le mettront en gras sauf si le webmaster a attribué d'autres caractéristiques à ces balises grâce au CSS.

La troisième paire de balises, créée en HTML5, <mark> ... </mark>, permet d'indiquer que le texte encadré est à faire ressortir visuellement. L'extrait n'est pas forcément considéré comme important mais on veut qu'il se distingue du reste du texte. Par défaut, les navigateurs le surligneront sauf si le webmaster a attribué d'autres caractéristiques à ces balises grâce au CSS.

N'oublions pas de citer :- La paire de balises <sub> ... </sub> qui permet d'écrire le texte encadré

sous forme d'indice (ex.: H2O).- La paire <sup> ... </sup> qui permet d'écrire le texte sous la forme

d'exposant (ex.: a2).

6. LES BALISES "TITRES" Ces balises sont utilisées pour formater et donc mettre en évidence les titres. Il en existe 6 niveaux : h1 étant le plus important et h6 le moins important. Les balises <h…> et </h…> délimitent les zones "titres".

Remarquons qu'un saut de paragraphe est inclus dans ces balises. Il n'est donc pas nécessaire d'ajouter un saut de ligne ou de paragraphe dans le fichier HTML après le titre pour que celui-ci soit seul sur la ligne dans la page web.

Attention, pour rappel, il est important de choisir sa balise en fonction de l'importance du titre et non en fonction de l'aspect généré par défaut par l'HTML. En effet, n'oublions pas que toutes les présentations pourront être redéfinies en CSS par après.

16.05.23 HTML5 (partie 1) - 9


Exercices :

Faire les exercices C2 et FR1.

7. LES BALISES "LISTES" En HTML, il existe trois sortes de listes, mais les deux premières sont les plus utilisées :- Les listes ordonnées- Les listes non-ordonnées- Les listes de définitions

A. LES LISTES ORDONNÉES

Une liste ordonnée est une liste numérotée qui s'incrémente automatiquement. Si les balises <ol> et </ol> indiquent le début et la fin d'une liste numérotée ; il faudra utiliser les balises <li> et </li> pour indiquer chaque élément de la liste.

Si on le souhaite on peut ajouter l'attribut type à la balise <ol>. Bien que déprécié depuis l'HTML4, il est toujours supporté en HTML5. Celui-ci permet d'indiquer le type de marqueur à utiliser pour la liste. Les valeurs possibles sont : A pour avoir des marqueurs en majuscules

a pour avoir des marqueurs en minusculesI pour avoir des marqueurs en chiffres romains (majuscules)i pour avoir des marqueurs en chiffres romains (minuscules)1 pour avoir des marqueurs en chiffres arabes (par défaut)

On pourra également ajouter l'attribut start à la balise <ol> afin d'indiquer la valeur de départ du marqueur (par défaut 1). Attention, cette valeur doit toujours être exprimée en chiffres arabes, et ce quel que soit le type de marqueur choisi. Bien que déprécié depuis l'HTML4, il est toujours supporté en HTML5.

Exemple :

B. LES LISTES NON-ORDONNÉES

Une liste non-ordonnée est une liste dont chaque élément est précédé d'une puce. Cette liste sera créée au moyen des balises <ul> et </ul> qui en indiquent le début et la fin ; ainsi que des balises <li> et </li> pour chaque élément.

16.05.23 HTML5 (partie 1) - 10


Par défaut, la puce utilisée a la forme d'un disque plein. Il sera toutefois possible d'en modifier l'aspect grâce aux CSS.

Exemple :

C. LES LISTES IMBRIQUÉES

Il est possible d'imbriquer les deux types de liste l'un dans l'autre.

Exemple :

D. LES LISTES DE DÉFINITIONS

Ce type de liste est moins utilisée que les deux autres. Néanmoins, elle peut servir pour afficher une liste de définitions ou même un dialogue.

Ces listes sont composées de trois paires de balises :- La paire <dl>...</dl> qui encadre la liste- La paire <dt>...</dt> qui encadre le mot à définir ou le nom de l'acteur- La paire <dd>...</dd> qui encadre la définition ou le texte de l'acteur

16.05.23 HTML5 (partie 1) - 11


Exemple :

Exercice :

Faire l'exercice C3.

8. LES BALISES "IMAGES"

A. INSÉRER UNE IMAGE

Quelques images sur un site web peuvent le rendre plus attractif et plus convivial. Cependant, il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement assez long et peuvent dans certains cas nuire à la lisibilité.

Lorsque l'on souhaite insérer une image dans une page HTML, on n'insère pas directement l'image dans le fichier HTML, mais on insère une adresse qui permet au navigateur de trouver l'endroit où l'image est stockée. En fait, lors de l'affichage d'une page web, le browser procède en plusieurs étapes. Il rapatrie d'abord la page HTML, l'analyse et ensuite récupère les fichiers images.

La balise généralement utilisée pour insérer une image est la balise orpheline <img> qui a plusieurs attributs.

Le premier attribut, src, est obligatoire. Il indique l'emplacement de l'image. Si l'image est dans le même dossier que le fichier HTML, il suffit de donner son

16.05.23 HTML5 (partie 1) - 12


nom. Si, par contre, l'image est dans un autre dossier, il faudra donner son nom précédé du chemin relatif (par rapport au fichier HTML) permettant d'y accéder.

Attention, il faut absolument que l'image et le fichier HTML soient sauvés sur le serveur dans les mêmes dossiers que sur le PC utilisé pour créer le site.

Exemple :Supposons que l'on ait l'architecture suivante :

C:\ └ MesDocuments └ Site ├ FileHTML └ Dessins

Si les fichiers HTML et ImgChat.gif se trouvent dans le même dossier, l'attribut src sera égal à "ImgChat.gif".

Si le fichier HTML se trouve dans le dossier Site et l'image ImgChat.gif dans le dossier Dessins, l'attribut src sera égal à "Dessins/ImgChat.gif" (NB: Il est préférable de mettre le caractère / à la place du \). Cela signifie que le browser devra chercher l'image dans le sous-dossier Dessins.

Si le fichier HTML se trouve dans le dossier FileHTML et l'image ImgChat.gif dans le dossier Dessins, l'attribut src sera égal à "../Dessins/ImgChat.gif". Les .. signifient au browser qu'il doit remonter d'un niveau dans l'arborescence du disque avant de trouver le sous-dossier Dessins contenant l'image.

Pas très facile tout ça ?! PSPad peut vous aider ! Pour ce faire, il suffit de faire appel à la boîte de dialogue qui facilite l'encodage des attributs de la balise <img>. Si vous insérez la valeur de l'attribut src au moyen du bouton de sélection lié (se trouvant à la droite de la zone de texte), PSPad introduira le nom du fichier image sélectionné dans la zone de texte. Ce nom sera le nom complet si le fichier HTML n'avait pas encore été sauvé ; par contre, si le code HTML a déjà été sauvé (et donc PSPad connaît son emplacement sur le disque), c'est le nom raccourci qui sera repris.

L'attribut alt, également obligatoire, associe un texte à l'image qui sera affiché à la place de cette dernière si le navigateur n'a pas l'option image activée (ou s'il ne la trouve pas).

L'attribut title associe un texte à l'image qui sera affiché sous la forme d'infobulle lorsque la souris sera positionnée sur l'image.

Les attributs height et width indiquent respectivement la hauteur et la largeur en pixels que l'image doit avoir à l'écran. L'image sera automatiquement ajustée (rétrécie, agrandie, voire déformée) pour occuper tout l'espace réservé.

Une image s'insère dans le texte comme un simple caractère. Par défaut, elle est placée sur une ligne et le texte est aligné sur le bas de l'image. Nous verrons qu'il y a moyen, grâce au CSS, de modifier ce comportement.

16.05.23 HTML5 (partie 1) - 13


Exemple :

B. FORMAT DES IMAGES À INSÉRER

L'ennemi sur le Web, c'est la taille des images ! Plus l'image sera grande, plus le temps de chargement sera long... au risque de décourager vos visiteurs.

Quand vous créez ou modifiez une image, vous pouvez l'enregistrer sous différents formats. La taille (en Kb, voire en Mb) du fichier sera plus ou moins élevée selon le format choisi et la qualité de l'image va changer.

Mais, attention, il faudra choisir le format le plus adéquat en fonction de l'image (photo, dessin, image animée, ...).

Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela signifie que l'ordinateur fait des calculs afin de réduire la taille des fichiers et ainsi rendre le téléchargement par l'internaute plus rapide.

16.05.23 HTML5 (partie 1) - 14


Les principaux formats utilisés sont :

Le format JPEG Les images au format JPEG sont très répandues sur le Web. Ce format est conçu pour réduire le poids des photos (= la taille du fichier associé).Les images JPEG sont enregistrées avec l'extension .jpg ou .jpeg.Ce format est efficace pour réduire le poids des photos car il ne détériore qu'un peu la qualité de l'image, d'une façon généralement imperceptible quand il s'agit d'une photo. Par contre, si ce n'est pas une photo, il vaut mieux utiliser le format PNG.

Le format PNG Le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques. Le PNG a deux gros avantages : il peut être rendu transparent et il n'altère pas la qualité de l'image.Le PNG a été inventé pour concurrencer le format GIF. Depuis, le PNG a bien évolué et est devenu le format le plus puissant pour enregistrer la plupart des images.On continuera toutefois à préférer le format JPEG pour les photos car la compression est plus puissante et donc les photos enregistrées en JPEG se chargeront toujours plus vite qu'en PNG.

Le format GIF C'est un format assez vieux. Aujourd'hui, le PNG est globalement bien meilleur que le GIF. On continue toutefois à utiliser le format GIF pour les images animées.

Conseils :

Présenter une petite image indiquant un lien vers l'image complète est également un bon conseil.

Si vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent.

9. REDÉFINIR L'ICÔNE DU SITE Pour redéfinir l'icône placée à la gauche du titre du site, il faut :- Créer l'icône.

Celle-ci sera de forme carrée et aura généralement une taille de 32 pixels de côté. Afin de pouvoir l'afficher dans les différents navigateurs, on la sauvera sous les formats et noms favicon.png et favicon.ico (dans Paint, on sauve sous le format .BMP et puis on renomme le fichier en .ICO)

- Insérer les 3 lignes de commandes <link> (voir exemple lignes 6 à 8)

Attention, certains navigateurs (ex.: Edge) ne tiennent compte de ces commandes

16.05.23 HTML5 (partie 1) - 15


que lorsque le site est en ligne. Si on teste le site en local, cela ne fonctionne pas.

10. TRACER UNE LIGNE La balise <hr> permet, en HTML5, de marquer un break thématique à l'écran. En fait, cette balise permet, comme en HTML4, de tracer une ligne horizontale.

A nouveau, son aspect sera défini au moyen des commandes CSS.

Exercices :


11. LES HYPERLIENS INTERNES ET EXTERNES L'HTML est un langage hypertexte (et hypergraphique) qui permet en cliquant sur un mot, généralement souligné, ou sur une image d'atteindre :

- un autre endroit de la page web en cours- un autre fichier html du site en cours- un autre site- etc.

La syntaxe à utiliser pour créer ces liens est la suivante :<a href="..." title="..." target="...">Texte ou image à cliquer</a>

L'attribut obligatoire et le plus important de la commande est bien évidemment href. C'est en effet lui qui indique où l'internaute se positionnera après avoir cliqué sur le texte ou l'image à l'écran. Son contenu variera en fonction du souhait du webmaster :

Si l'on veut surfer vers un autre site, il suffit d'en taper l'adresse complète.Exemple : <a href="http://www.google.be">Accès direct à Google</a>

Si l'on veut se positionner sur une autre page de notre site, on tape l'adresse relative comme pour l'attribut src de la balise img.Exemple : <a href="animaux/lions.html">Les Lions</a>

Le lien peut être effectué au sein même de la page actuellement affichée à l'écran. Cela peut être pratique si celle-ci est assez longue et que l'on veut donner la possibilité à l'internaute de se connecter directement à un paragraphe bien précis.Pour cela, il faut d'abord créer des ancres aux endroits auxquels on désire accéder et ensuite ajouter la balise <a>.Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre

16.05.23 HTML5 (partie 1) - 16


par exemple. Lors de son utilisation dans un hyperlien, on fera toujours précéder son nom du caractère #.Exemple : <h1 id="Girafe">Girafe</h1><a href="#Girafe">Accéder au descriptif des girafes</a>

On peut d'ailleurs combiner les deux cas précédents en créant un lien direct vers un endroit donné d'une page déterminée.Exemple: <a href="animaux/lions.html#Aliment">L'alimentation du lion</a>

Notons qu'il existe une ancre prédéfinie : top. Celle-ci permet d'aller au début de la page web.Exemple : <a href="#top">Retour en haut de la page</a>

Il est également possible d'utiliser cette technique pour donner la possibilité à l'internaute de vous envoyer un mail (pour autant qu'il ait un programme de messagerie...). Pour cela, il suffit de préciser l'adresse e-mail de réception, précédée de mailto:, dans l'attribut href.Exemple : <a href="mailto:[email protected]">Nous contacter</a>

Attention, en HTML5, si un lien (c.à.d. adresse) contient le caractère &, il est conseillé de le remplacer par son code Entity &

Notons qu'il est également possible d'associer un lien à une image. Pour cela, il suffit de remplacer le texte à cliquer par une balise image.Exemple : <a href="animaux/lions.html"><img src="animaux/lions.gif" /></a>

Le deuxième attribut, title, permet d'encoder une infobulle à afficher lorsque l'internaute positionnera sa souris sur l'hyperlien (= le texte à cliquer).

Le troisième attribut, target, spécifie où le lien doit être ouvert. Faut-il l'afficher sur la page en cours (valeur par défaut : _self) ou faut-il ouvrir une nouvelle fenêtre (valeur _blank) pour l'afficher ?

Exercices :


12. LES IMAGES MAPPÉES

A. PRINCIPE

Il est possible d'associer une partie d'une image à un lien et d'autres parties de l'image à d'autres liens. Ainsi, si nous avons la photo d'un zoo, il est possible d'associer chaque animal à sa propre page. Mais pour cela, il va falloir connaître exactement la position de chaque animal sur la photo. Commençons d'abord par quelque chose de simple pour voir le principe de fonctionnement. Nous verrons après comment "découper" une image.

B. EXEMPLE DE BASE

Soit l'image . Supposons que l'on souhaite que l'internaute se connecte respectivement à la page web fichA.htm, fichB.htm ou fichC.htm lorsqu'il clique

16.05.23 HTML5 (partie 1) - 17


sur le premier, deuxième ou troisième carré.

Pour ce faire, on va définir les zones dans l'image, un peu comme une carte géographique ("map" en anglais) et associer un fichier à chacune d'elles. On obtient ainsi une image dite "mappée" car elle est découpée en zones à l'instar des cartes géographiques. On appellera la "map" les balises HTML qui reprendront à la fois les zones et les fichiers associés.

On remarquera que l'attribut name de la balise <map> et l'attribut usemap de la balise <img> ont la même valeur afin de les relier (obligatoire).

C. LES DIFFÉRENTES BALISES ET LEURS ATTRIBUTS

Comme on peut le voir dans l'exemple précédent, trois balises sont utilisées conjointement. Les deux premières, à savoir :- la balise <img> à laquelle on a ajouté l'attribut usemap ;- la balise <map> et son attribut name ;permettent de faire le lien entre l'image et la map à utiliser.

La troisième balise, <area>, quant à elle, permet de définir les zones cliquables de l'image ainsi que l'hyperlien associé à chacune d'entre-elles. En voici les principaux attributs :- shape Spécifie le type de cette zone cliquable dans l'image :

rect : Rectangle (ses coordonnées sont abscisse sup gauche, ordonnéesup gauche, abscisse inf droit, ordonnée inf droit)

circle : Cercle (ses coordonnées sont abscisse centre, ordonnéecentre, rayon)

poly : Polygone irrégulier (ses coordonnées sont les abscisses etordonnées de chaque point "extrémités des segments de droite"formant le polygone séparées par des virgules)

- href Spécifie où l'internaute se positionnera après avoir cliqué à cetendroit sur l'image

- coords Contient les coordonnées de la zone cliquable

<map name="MyMap"> <area shape="rect" coords="0,0,48,28" href="fichA.htm" /> <area shape="circle" coords="50,30,10" href="fichB.htm" /> <area shape="poly" coords="60,50,80,30,100,40,50,100" href="fichC.htm" /></map><img src="images/image.gif" width=150 height=70 usemap="#MyMap" alt="image"/>

Attention, les coordonnées dépendent de la taille de l'image : si vous réduisez

16.05.23 HTML5 (partie 1) - 18


celle-ci, votre map ne se réduira pas et se déplacera !

D. TRUCS ET ASTUCES

Voici quelques petites astuces pour pouvoir créer vos maps plus facilement.

Exemple 1 :

Imaginons que vous ayez cette image:

Vous voulez que la zone bleue vous envoie vers page1.htm, et que la zone rouge vous renvoie vers page2.htm.

Pour la zone bleue, un simple cercle suffit, mais pour la zone rouge ?

Sachez qu'il y a une priorité pour les maps : les premières formes sont prioritaires sur les suivantes...

Donc, il suffit d'avoir un code du genre :

<map name="MyMap"> <area shape="circle" coords="25,15,15" href="page1.htm" title="zone bleue" /> <area shape="circle" coords="15,15,15" href="page2.htm" title="zone rouge" /></map>

Exemple 2 :

Cette fois, vous avez cette image:

Même chose que pour la première, sachez que le rectangle rouge prend toute l'image. Il suffit donc de créer un rectangle bleu, puis un autre rouge qui prend toute l'image. Ce qui donne par exemple :

<map name="MyMap"> <area shape="rect" coords="15,8,88,29" href="page1.htm" title="zone bleue" /> <area shape="rect" coords="0,0,103,37" href="page2.htm" title="zone rouge" /></map>

Exemple 3 :

Cette fois, vous avez cette image:

Même chose que pour la deuxième, mais le rectangle blanc n'est pas cliquable. Ici, il suffit de supprimer l'attribut href de la première area. Ce qui donne :

<map name="MyMap"> <area shape="rect" coords="15,8,88,29" title="zone vide" /> <area shape="rect" coords="0,0,103,37" href="page2.htm" title="zone rouge" /></map>

E. CRÉATION D'UNE MAP AVEC MCC HTML MAPPER

Pour connaître les coordonnées nécessaires à une map, on peut utiliser le programme Paint de Microsoft (les coordonnées sont affichées sur la gauche de la barre d'état) lorsque les différentes zones sont simples à délimiter.

On peut aussi utiliser le logiciel gratuit Mcc HTML Mapper. Pour télécharger ce dernier, connectez-vous sur le site : www.01net.com/telecharger/windows/Internet/editeur_de_site/fiches/115290.html

Si vous exécutez le programme, une fenêtre semblable à celle-ci apparaîtra :

16.05.23 HTML5 (partie 1) - 19


L'écran est divisé en plusieurs parties :- L'explorateur de Maps : permet de changer de document parmi ceux ouverts.

Une map est un simple fichier contenant le code HTML minimal généré par leprogramme.

- Les propriétés de l'image en cours.- Les propriétés de l'item en cours (= zone sélectionnée).- La fenêtre principale (ou scène) reprenant l'image liée à la map et où l'on

délimite les items.- L'afficheur HTML qui affiche le code HTML correspondant à la map.- La barre d'état affichant diverses informations.

Voici les différentes étapes pour mapper une image :- On ouvre le programme Mcc HTML Mapper- On exécute la commande Fichier / Ouvrir une image si l'on veut créer une

nouvelle map ou Fichier / Ouvrir une map si l'on veut modifier une map existante.

- On sélectionne l'image à mapper ou la map à modifier.Une fois l'image choisie, celle-ci va apparaître dans la scène, le code va apparaître dans l'afficheur HTML et les propriétés de base de l'image vont s'afficher dans la table des propriétés de l'image.

- Vérification et modification, le cas échéant, des propriétés de base de l'image que sont alt, src et usemap.Il n'est pas possible de supprimer ces propriétés de base, mais leurs valeurs peuvent être modifiées. Pour cela, il faut double-cliquer sur la case correspondante (seconde colonne) et modifier le texte qui s'y trouve et enfin appuyer sur Return.

16.05.23 HTML5 (partie 1) - 20


Pour ajouter une propriété (ex.: title), il faut la sélectionner dans la liste déroulante, cliquer sur le bouton Ajouter et puis en préciser la valeur.

- Définition des items au moyen, notamment, des outils Rectangle, Cercle et Polygone :- On délimite la zone en glissant la souris pour les deux premiers outils.

Pour le Polygone, on clique à chaque extrémité des segments du polygone en déplaçant la souris et l'on double-clique pour terminer la forme.

- L'outil Sélection permet d'ajuster la définition d'une zone en permettant son déplacement ainsi que le réajustement de sa taille.

- On définit les propriétés (alt, href, title, etc.) des items dans la fenêtre de l'écran dédicacée.

- Si l'on souhaite supprimer une zone, il suffit de la sélectionner et de cliquer sur le bouton Supprimer.

- On sauve la map au moyen de la commande Enregistrer.- On modifie la propriété src de l'image pour y mettre son adresse relative.- On sauve à nouveau la map.- On copie le code HTML de la map dans le code HTML de notre page web

Exercice :

Faire l'exercice FR4.

16.05.23 HTML5 (partie 1) - 21


1. QU'EST-CE QU'UNE FEUILLE DE STYLE ? Si au début du WEB, l'HTML permettait de définir le contenu et la présentation des pages, il n'en est plus ainsi depuis la version 5 de l'HTML.

Les concepteurs ont pris conscience qu'il y avait un problème au niveau de l'HTML lorsque l'on créait un site avec plusieurs pages, etc. En effet, il fallait à chaque fois redéfinir toute la mise en page avec plein d'attributs partout. Ce n'est déjà pas amusant de les taper lors de la création du site, mais en plus, si on veut modifier la présentation générale (couleurs, polices, etc.) par après, c'est un travail énorme. Il aurait été plus simple d'avoir un endroit où l'on définit les différents styles de présentation que l'on veut avoir sur son site (ex.: pour les paragraphes, pour les titres, pour les définitions à mettre en évidence, etc.) et un autre endroit où l'on n'a que le contenu des pages avec un lien vers les définitions des styles.

C'est à partir de cette constatation qu'il a été décidé de séparer la définition du contenu et celle de la présentation. C'est pourquoi, dorénavant, on encode le contenu et la structure des pages en HTML5 ; et on définit la présentation au moyen des feuilles de style (CSS3).

2. LES FEUILLES DE STYLE EN CASCADE (OU CSS)

A. COMMENT APPLIQUER UN STYLE ?

Il existe plusieurs manières pour appliquer un style à une balise HTML.

On peut :- Soit l'appliquer directement à une balise particulière en définissant le

style au sein de la balise (pas très conseillé).- Soit définir les styles dans la partie <head> du fichier HTML.- Soit définir les styles dans un fichier spécifique séparé et créer un lien

entre les différents fichiers HTML du site et celui-ci (conseillé).

La syntaxe générale et les différentes propriétés seront décrites plus loin dans ce chapitre, mais essayons déjà de mettre de simples exemples en pratique afin de mieux comprendre les différentes possibilités.

Cas 1 : Au sein de la balise

Attention, cette méthode est déconseillée car elle est en contradiction avec le principe même d'indépendance entre structure et mise en page de la page Web décrit précédemment. En effet, si la définition du style se fait individuellement, autant utiliser les attributs...

<p style="font-size: 14pt;">...</p>→ Définit une taille de caractères pour le paragraphe.

16.05.23 CSS3 (partie 1) - 1


Cas 2 : Dans la partie <head> du fichier HTML

Attention, dans ce cas, les styles sont exclusivement applicables à la page HTML en cours.

La liste des éléments et leurs propriétés sont encodés entre les balises paires <style>. L'ancien attribut type="text/css" n'est plus obligatoire car l'HTML5 prend cette valeur par défaut.

→ Les titres seront en rouge et centrés et les paragraphes en noir.

Cas 3 : Dans un fichier séparé

Les styles sont définis dans un fichier séparé dont l'extension est .css. Celui-ci est appelé "Feuille de style externe". Attention, aucune balise HTML ne doit être encodée dans un fichier de ce type !

On ajoute une balise <link rel="stylesheet" type="text/css" href="xxx.css"> (où xxx.css correspond au nom du fichier des styles) dans la section <head> de la page HTML afin de faire le lien entre la page et son style :- L'attribut rel indique que le fichier lié est une feuille de style.- L'attribut type indique que le contenu du fichier lié est de type CSS.- L'attribut href fait le lien avec le fichier CSS externe.

Cette solution permet de n'avoir qu'une seule feuille de style pour plusieurs pages HTML. D'où l'avantage des feuilles de style d'unifier le style des pages d'un site et de faciliter les modifications de la présentation du site. En effet, celles-ci ne sont effectuées qu'une fois, dans le fichier CSS lié à toutes les pages HTML.

16.05.23 CSS3 (partie 1) - 2


Remarquez qu'il est également possible de lier un fichier HTML à plusieurs feuilles de style. Il y aura alors plusieurs balises <link> dans le fichier HTML (C'est une des raisons pour lesquelles on appelle cela "Cascade de feuilles de style" ou "Cascading Style Sheet").

B. L'HÉRITAGE

Certains éléments sont parfois imbriqués dans un autre élément. Ils vont alors hériter des propriétés de celui-ci. On dit que les éléments enfants héritent du style de leurs parents.

Exemple :

Quand une propriété est définie au niveau de l'élément <body>, tous les éléments enfants de <body> en héritent si celle-ci s'y prête (sauf contre-ordre). Cet héritage s'étend à tous les niveaux. Ainsi, la couleur de fond spécifiée au niveau de <body> s'applique à tous les éléments de la feuille concernée ainsi que leurs enfants. Celle-ci ne s'appliquera toutefois pas à la balise <img> qui ne possède pas cette propriété.

Il arrive toutefois que l'on souhaite qu'une des propriétés du parent ne s'applique pas à un des enfants. Dans l'exemple, les caractères de la page (ex.: <h1>) seront jaunes (propriété définie au niveau de <body>) ; mais ceux-ci seront blancs au niveau des paragraphes (et enfants). On outrepasse l'héritage en introduisant une règle spécifique pour p. L'élément paragraphe hérite la couleur de fond de body mais la couleur des caractères d'un paragraphe est différente.

Remarque :N'hésitez pas à mettre des commentaires dans les feuilles de style ! Cela permet de retrouver facilement le style à appliquer dans votre page HTML. Pour cela, il suffit d'encadrer le commentaire par /* et */.

C. LES CLASSES

Jusqu'à présent, on a vu comment appliquer une mise en forme à un ensemble complet d'éléments (ex.: tous les titres h1, tous les paragraphes, etc.). Mais comment peut-on faire pour appliquer, proprement, un style à certains éléments spécifiques comme, par exemple, un paragraphe plus important que les autres ? Vous l'aurez deviné, on va utiliser les (sélecteurs de) classes !

Cas 1 :

Dans l'exemple précédent, tous les paragraphes sont écrits en blanc. Si l'on souhaite appliquer une couleur différente pour certains paragraphes, on procèdera de la manière suivante :- Dans la page HTML, on liera le paragraphe en question à la classe au moyen de

16.05.23 CSS3 (partie 1) - 3


l'attribut class → <p class="tresimportant">- Dans la feuille de style, on ajoutera le style souhaité en précisant le nom

de la classe → p.tresimportant { color: red; }

Seuls les paragraphes associés à la classe tresimportant seront en rouge.

Cas 2 :

Il arrive que l'on veuille appliquer un style défini dans une classe à différents types d'éléments. Par exemple, on souhaiterait que la classe tresimportant de l'exemple précédent puisse être appliquée à certains paragraphes, mais aussi à certains titres. On procèdera de la manière suivante :- Dans la page HTML, on liera l'élément en question à la classe au moyen de

l'attribut class → <h1 class="tresimportant">- Dans la feuille de style, la classe existera sans le préfixe correspondant à

l'élément (Attention, le point est conservé) → .tresimportant { color: red; }

Notons qu'il est possible de limiter l'usage de la classe à certains types d'éléments en les citant de la manière suivante dans la feuille CSS → h1.tresimportant, h2.tresimportant, p.tresimportant { color: red; }

Cas 3 :

Remarquons qu'il est possible d'associer un élément de la page HTML à plusieurs classes → <p class="classe1 classe2">. Les styles des 2 classes seront alors appliqués à l'élément en question.

Mais que faire dans le cas où une propriété est définie dans chaque classe avec des valeurs différentes ? La propriété qui sera appliquée sera celle de la dernière classe du fichier CSS (et non de l'attribut class) !

D. PRIORITÉ DES PROPRIÉTÉS CSS ET ATTRIBUTS HTML

Puisque l'on a terminé le point précédent en parlant de priorité, profitons-en pour en donner quelques règles supplémentaires.

En cas de concurrence entre plusieurs éléments de style, intervient alors la notion de "cascade" ou d'ordre de priorité. La règle de priorité appliquée par le navigateur sera d'appliquer pour la présentation du document la feuille de style la plus proche de l'élément. Ainsi, un style spécifié dans le "BODY" sera retenu par rapport à un style déclaré dans un fichier externe.

Les propriétés des feuilles de style l'emportent sur les attributs HTML. Si les deux sont spécifiés, les attributs HTML seront affichés avec les browsers qui ne supportent pas les CSS et n'auront aucun effet avec ceux qui les supportent.

E. CLASS OU ID ?

Les éléments HTML peuvent spécifier un attribut id et/ou class. Ces attributs sont presque identiques. Ils permettent notamment la mise en forme via les CSS.

Le même attribut class peut être appliqué sur plusieurs balises et donc

16.05.23 CSS3 (partie 1) - 4


permettre à plusieurs éléments au sein d'une page d'appartenir à la même classe. Par contre, la valeur de l'attribut id doit être unique dans une page html. Cela permet de référencer un élément précis dans une page.

De plus, le nom du sélecteur id commencera par le caractère # dans le fichier CSS, contrairement au sélecteur de classe qui commence par un point.

F. LES BOÎTES

En CSS, tous les éléments HTML sont vus comme des boîtes. Les CSS permettent de contrôler tous les aspects de la boîte.

Chaque boîte a une aire de contenu (content) dont la taille s'adapte à la quantité ; il existe une largeur d'espacement (qui peut être nulle) entre le contour de l'aire et le contenu de celle-ci (padding). L'aire peut être entourée d'une bordure (border) qui peut avoir une épaisseur, une couleur et un style propres.

Enfin, la marge (margin) encadre la bordure. La marge fournit le moyen de créer un espace entre les différents éléments d'une page. Quand deux boîtes sont côte à côte, les marges permettent de maintenir un espace entre elles.

L'espacement et la marge peuvent être différents en haut, en bas, à gauche et à droite. Ils sont transparents, n'ont ni couleur, ni décoration. Par défaut, la marge et l'espacement sont nuls et il n'y a pas de bordure. Vous verrez plus loin dans la liste des propriétés comment modifier ces propriétés.

G. LES BALISES HTML <DIV> ET <SPAN>

Supposons que l'on souhaite faire apparaître une page web reprenant un groupe de 2 paragraphes en rouge, ainsi que tous les noms des personnes en gras et les noms des pays en italique.

On aurait pu attribuer la classe parImportant aux 2 paragraphes séparément, ou alors, utiliser les balises <div> </div> pour les regrouper et appliquer en une fois la classe à tous les éléments qui y sont regroupés.

16.05.23 CSS3 (partie 1) - 5


En effet, les balises <div> et </div> délimitent un bloc qui regroupe d'autres éléments tels que les paragraphes par exemple. Créer un bloc div permet d'appliquer le même style à tous les éléments le composant.

Les balises <span> et </span>, quant à elles, permettent de créer un élément qui n'est qu'une partie d'un autre élément. Par exemple, si je veux que toutes les instances d'un mot apparaissent en gras, je peux entourer chaque instance par la balise <span> dans mes pages.

Dans cet exemple, on n'a changé à chaque fois qu'un seul attribut ; mais un style peut regrouper une multitude d'attributs (ex.: gras, couleur et taille du texte, etc.) que l'on appliquerait à chaque occurrence d'un texte en une seule opération. N'oublions pas non plus que si nous voulons changer une apparence (ex.: gras en grands caractères), il suffit de changer un style pour que tous les éléments concernés soient adaptés.

H. SYNTAXE

La définition de base d'un style est simple :

sélecteur { propriété de style: valeur; propriété de style: valeur; }

Quelques commentaires sont toutefois nécessaires :- En CSS, l'élément HTML (ou balise) dont on veut définir le style est désigné

sans mettre des <> autour de son nom. Il s'appelle le sélecteur (ex.: body).- Le sélecteur est suivi d'une accolade ouvrante et puis de la liste des

propriétés.- Chaque propriété a un nom (ex.: color) suivi de : et de la valeur que l'on

veut donner à cette propriété (ex.: black). La valeur est suivie d'un ;- La description du sélecteur se termine par }.- Il n'y a pas de limite pour le nombre de couples "propriété de style/valeur".- On peut attribuer plusieurs valeurs à une même propriété. Dans ce cas, on

séparera les différentes valeurs par des virgules.→ ex.: h3 { font-family: Arial, Helvetica, sans-serif; }

- On peut attribuer un même style à plusieurs balises séparées par des virgules→ ex.: h1, h2, h3 { font-family: Arial; font-style: italic; }

- N'oublions pas la notion de classe décrite précédemment ! Dans ce cas, la structure du sélecteur devient balise.nom_de_classe ou comme la mention de la balise est facultative .nom_de_classe (en n'oubliant pas le point devant le nom de classe !)

Il est conseillé de respecter une certaine indentation afin de faciliter la lecture : nom du sélecteur sur la première ligne, liste des propriétés à raison d'une par ligne et pour terminer l'accolade fermante.

L'ordre dans lequel apparaissent les règles CSS n'a aucune importance mais le bon usage veut que l'on commence par la règle la plus générale, c'est-à-dire la règle body correspondant à la balise <body> en HTML.

L'ordre dans lequel apparaissent les propriétés d'un sélecteur n'a également aucune importance et il n'existe pas de recommandation à ce sujet.

Exercice :

Avant de voir la liste des principales propriétés, faites quelques exercices en vous basant sur les exemples déjà vus afin de vous familiariser avec la notion

16.05.23 CSS3 (partie 1) - 6


des styles.

3. LISTE DES PROPRIÉTÉS

A. INTRODUCTION

- Certaines propriétés CSS ou certaines de leurs valeurs ne seront pas présentes dans la liste suivante car elles sont moins utilisées.

- Dans les définitions suivantes, les mots en gras correspondent aux mots réservés (que l'on écrit donc tels quels), tandis que les mots en italique sont à remplacer par la valeur correspondante.

- Certaines valeurs présentes dans différentes propriétés (ex.: les couleurs et les unités de mesure) peuvent être exprimées de différentes manières. Etudions-les directement.

B. LES COULEURS

Une valeur "couleur" peut être exprimée de plusieurs manières différentes dont :- Par son nom (ex.: color:"red";) Connectez-vous au site http://www.w3schools.com/colors/colors_names.asp pour avoir une liste de couleurs web disponibles- Par son code hexadécimal (ex.: color:"#FF0000";)- Par la fonction rgb valeur (ex.: color:rgb(255,0,0);)- Par la fonction rgb pourcentage (ex.: color:rgb(100%,0,0);)- Par la fonction rgba valeur (ex.: color:rgba(255,0,0,0.5);) La dernière valeur (comprise entre 0 et 1) représente le taux d'opacité de l'arrière-plan : 0 = transparent ; 1 = opaque

C. LES UNITÉS DE MESURE

Certaines tailles peuvent être exprimées sous différentes unités de mesure :- Le pixel (px) : 1 pixel = 1 point de l'écran- Le point (pt) : taille typographique. 12pt = taille normale d'une police- Le pourcentage (%) : Permet de préciser une taille relative- L'unité em (em) : Correspond à la taille normale. 1em = 100% ; 1.4em = 140%- Et encore : les pouces (in), les centimètres (cm) et les millimètres (mm)

ex.: font-size: 1.5em; width: 100%;

D. LES PROPRIÉTÉS BACKGROUND

Celles-ci permettent de définir la présentation de l'arrière-plan d'un élément.

Propriétés Description Valeurs

background-color Définit la couleur d'arrière-plan d'un élément

color transparent

background-image Indique l'image à utiliser pour l'arrière-plan

url(URL)none

background-repeat Indique si l'image d'arrière- repeat

16.05.23 CSS3 (partie 1) - 7

http://www.w3schools.com/colors/colors_names.asp


plan doit être répétée repeat-xrepeat-yno-repeat

background-clip Précise l'étendue de la couleur d'arrière-plan ou de l'image

border-boxpadding-boxcontent-box

background-attachment Indique si l'image d'arrière-plan est fixe ou se déplace avec le reste de la page

scrollfixed

background-position Définit la position de départ de l'image d'arrière-plan

S'il n'y a qu'une valeur encodée, la seconde sera "center"

left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottomx% y%xpos ypos

background-size Définit la taille de l'image de fond

Si l'on donne un pourcentage, celui-ci représente la taille de l'image par rapport à son parent. Si l'on ne donne qu'une valeur, celle-ci correspond à la largeur, la hauteur étant calculée pour ne pas déformer l'image.

autowidth (→ hauteur auto)width heightpourcentage

background Permet de définir toutes les propriétés en une étape.

Toutes les valeurs ne sont pas obligatoires, mais les valeurs présentes doivent être données dans l'ordre

background-colorbackground-imagebackground-position background-repeatbackground-clip background-attachment

Rmq : La valeur soulignée = valeur par défaut

Exemples :body {

background: #ff0000 url('images/lion.jpg') no-repeat fixed right top;}

h1 {background-image:url('images/tigre.jpg');background-repeat:repeat-x;

}

16.05.23 CSS3 (partie 1) - 8


Depuis CSS3, il est possible de donner plusieurs images de fond à un élément. Pour cela, il suffit de séparer les déclarations par une virgule, comme ceci :body { background: url("soleil.png") fixed no-repeat right top, url("ciel.png") fixed;}

La première image de cette liste sera placée par-dessus les autres. L'ordre de déclaration des images a donc son importance : si l'on inverse le soleil et le ciel dans le code CSS précédent, on ne verra plus le soleil !

E. LES DÉGRADÉS DE COULEUR LINÉAIRES

Pour les objets qui acceptent une image de fond, il est possible de remplacer celle-ci par un dégradé de couleur linéaire ou radial en CSS. Dans ce cours, nous ne verrons toutefois que les dégradés linéaires ; mais n'hésitez pas à consulter la page http://www.w3schools.com/css/css3_gradients.asp pour voir le fonctionnement des dégradés radiaux.

Comme vous pouvez le voir ci-dessous, la syntaxe de la commande est relativement simple. Malheureusement, les différents navigateurs fonctionnant parfois différemment, nous allons devoir écrire une même commande plusieurs fois avec des syntaxes différentes afin d'avoir le résultat espéré dans la plupart des navigateurs.

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Le premier paramètre, à savoir direction, indique la direction du dégradé. Plusieurs valeurs sont possibles :- Du haut vers le bas (= par défaut) : généralement to bottom- Du bas vers le haut : généralement to top- De la gauche vers la droite : généralement to right- De la droite vers la gauche : généralement to left- En diagonale : par exemple to bottom right- Suivant un angle bien précis : exemple -90deg (0deg=to top / -90deg=to left).

Les paramètres suivants reprennent les couleurs souhaitées (dans l'ordre ; soit via leur nom, soit au moyen des fonctions rgb, rgba,...) ; ainsi que, si souhaité, le pourcentage représentant la position d'arrêt de cette couleur par rapport à la forme complète.

Le fait que l'on puisse utiliser la fonction rgba est très intéressant car grâce à elle, il sera possible de faire varier l'opacité/transparence d'une couleur.

Voici quelques exemples de dégradés. Attention, remarquez que pour chaque dégradé, on doit taper 5 lignes de commandes pour satisfaire les différents navigateurs !

16.05.23 CSS3 (partie 1) - 9


16.05.23 CSS3 (partie 1) - 10


F. LES PROPRIÉTÉS FONT

Ces propriétés permettent de définir la police de caractères d'un élément.


font-family Spécifie la famille de la police

Cette propriété peut contenir plusieurs valeurs séparées par des virgules. Ainsi, si le browser ne supporte pas la première police, la seconde sera utilisée.

Les family-names sont times, courier, arial, etc. Les generic-family représentent le style de famille comme serif, sans-serif, cursive, fantasy, monospace.

family-namegeneric-family

font-style Spécifie le style de police normalitalicoblique

font-size Spécifie la taille des caractères

% = taille par rapport à la taille des caractères de l'élément parent de celui-ci.

xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%

font-weight Spécifie l'épaisseur des caractères

(400 = normal ; 700 = bold)

normalboldbolderlighter100, 200, ..., 900

font-variant Spécifie si les caractères doivent être affichés en petites majuscules

normalsmall-caps

font Permet de définir toutes les propriétés en une étape.

Toutes les valeurs ne sont pas obligatoires, mais les valeurs présentes doivent être données dans l'ordre.

(line-height = voir ci-après)

font-stylefont-variantfont-weightfont-size/line-heightfont-family


16.05.23 CSS3 (partie 1) - 11


Exemples :p.ex2 {

font: italic bold 12px/20px arial, sans-serif;}

G. LES PROPRIÉTÉS TEXT

Ces propriétés permettent de définir le format du texte.


color Spécifie la couleur du texte color

letter-spacing Augmente ou diminue l'espace entre les caractèresh1 {letter-spacing:1px;}h2 {letter-spacing:-3px;}

normallength

line-height Spécifie la taille de l'interligne normalnumberlength%

text-align Spécifie l'alignement horizontal du texte

leftrightcenterjustify

text-decoration

Ajoute une "décoration" au texte noneunderlineoverlineline-through

text-indent Spécifie l'indentation de la première ligne du texte

length%

text-transform Spécifie la casse des lettres du texte (version originale - première lettre de chaque mot en majuscule - tout majuscule - tout minuscule)

nonecapitalizeuppercaselowercase

vertical-align Permet de spécifier l'alignement vertical d'un élément. Par exemple, l'alignement d'une image par rapport à la ligne de base.

img.top {vertical-align:text-top}<p>Une <img class="top" src="logo.gif" width=270/> image dans un texte.</p>

baselinesubsupertoptext-topmiddlebottomtext-bottomlength%

16.05.23 CSS3 (partie 1) - 12


white-space Traitement des espaces :

normal = espaces comprimés et passage à la ligne quand c'est nécessairenowrap = espaces comprimés et passage à la ligne uniquement sur ordre (<br>, etc.)pre = comme la balise <pre> de l'HTMLpre-wrap = comme pre, mais passe à la ligne quand c'est nécessaire

normalnowrapprepre-wrap

text-shadow Définit l'ombre du texte

Les paramètres à préciser sont :- Position horizontale de l'ombre- Position verticale de l'ombre- La taille du flou - Couleur de l'ombre

Exemple :text-shadow:20px 40px 2px red;

noneparamètres


H. LES PSEUDO-CLASSES/ELEMENTS

Les pseudo-classes suivantes permettent de définir le format du texte.


:link:visited:hover:active

Permet de définir un style pour chaque état des éléments (souvent des hyperliens). Attention, l'ordre des pseudo-classes doit être respecté.

color

:first-letter Permet d'appliquer un style au premier caractère d'un texte

fontcolorbackgroundmarginpaddingbordertext-decorationtext-transformline-heightfloat

Exemples :a:link {color:red} /* lien non visité */a:visited {color:green} /* lien visité */a:hover {color:blue} /* souris positionnée sur l'élément (ici un hyperlien) */a:active {color:yellow} /* lien sélectionné */

I. LES PROPRIÉTÉS LIST

Ces propriétés permettent de définir le format des listes ordonnées ou non-

16.05.23 CSS3 (partie 1) - 13


ordonnées.


list-style-type Permet de définir un style pour les listes non-ordonnées ou ordonnées.

nonedisccirclesquare

decimallower-alphaupper-alphalower-romanupper-roman

list-style-image Indique l'image devant servir comme puce. (Si l'image indiquée n'est pas présente, le browser utilisera la valeur spécifiée au moyen de la propriété list-style-type.)

url(URL)none

list-style Permet de définir toutes les propriétés en une étape.

Toutes les valeurs ne sont pas obligatoires, mais les valeurs présentes doivent être données dans l'ordre.

list-style-typelist-style-image


Exemples :

ul.a {list-style-type: circle;}ol.b {list-style-type: upper-roman;}

Exercices :


J. LES PROPRIÉTÉS ASPECT GÉNÉRAL DES BOÎTES

Ces propriétés permettent de définir l'aspect général d'un élément/boîte (dimensions,...) (image, paragraphe, etc.).


box-sizing content-box :les tailles données correspondent à la partie content uniquement (sans padding, border, margin)

border-box :les tailles données correspondent à la partie content, padding et border, sans les marges

content-boxborder-box

16.05.23 CSS3 (partie 1) - 14


overflow Spécifie ce que le browser doit faire lorsque la taille du contenu dépasse la taille de la boîte dans laquelle il se trouve.

auto → Affiche des barres de défilement si besoinhidden → La partie du contenu qui dépasse est invisible et perduescroll → Affiche toujours des barres de défilementvisible → Affiche tout le contenu

autohiddenscrollvisible

height Définit la hauteur de l'élément.NB: Si une taille trop petite est spécifiée pour afficher un paragraphe entier par exemple, le navigateur agrandira celle-ci automatiquement.

autolength

width Définit la largeur de l'élément. autolength

max-widthmax-heightmin-widthmin-height

Ces propriétés permettent de définir des tailles minimum/maximum pour la hauteur et la largeur. Si width et height sont données en % de la fenêtre, ces propriétés-ci permettent d'imposer une taille minimale/maximale.

nonelength

box-shadow Définit l'ombre autour de l'élément.

Les paramètres à préciser sont :- Position horizontale de l'ombre- Position verticale de l'ombre- La taille du flou- La différence de taille de l'ombre par rapport à l'élément - Couleur de l'ombre

Exemple :box-shadow:50px 40px 20px -5px red;

Remarques :- La position de l'ombre est calculée par rapport au centre de l'image.- La différence de taille de l'ombre est appliquée dans les 4 directions. Ce qui veut dire que sa valeur est doublée ! En effet, si on demande d'agrandir l'ombre de 5 pixels, l'ombre aura 5px de plus vers la gauche, mais aussi vers le haut, la droite et le bas. Et donc, il aura en fait 10px de plus en hauteur et 10 de plus en largeur.

noneparamètres


K. LES PROPRIÉTÉS PADDING

Pour rappel, un élément est composé de plusieurs

16.05.23 CSS3 (partie 1) - 15


parties.

Ces propriétés permettent de définir la taille de chaque côté du cadre Padding.


padding-top Définit la taille de la partie supérieure.

length

padding-right Définit la taille de la partie droite.

length

padding-bottom Définit la taille de la partie inférieure.

length

padding-left Définit la taille de la partie gauche.

length

padding Permet de définir toutes les propriétés en une étape.

Si une seule valeur est précisée, chaque côté aura cette taille.

Si 2 valeurs sont précisées, la 1ère indique la hauteur des parties sup. et inf. ; la 2ème donne les largeurs G. et D.

Si 3 valeurs sont précisées, la 1ère donne la hauteur du haut ; la 2ème les largeurs G. et D. ; la 3ème la hauteur du bas.

Si 4 valeurs sont précisées, elles doivent être données dans l'ordre haut, droite, bas, gauche.

lengthlength lengthlength length lengthlength length length length

L. LES PROPRIÉTÉS BORDER

Les propriétés Border permettent de définir la taille, le style et la couleur de chaque côté du cadre Border.


border-xxx-width Définit la taille du bord spécifié (xxx aura la valeur top, right, bottom ou left)→ ex.: border-left-width

length

border-xxx-style Définit le style du bord spécifié (xxx aura la valeur top, right, bottom ou left)

style (voir ci-après)

border-xxx-color Définit la couleur du bord spécifié color

16.05.23 CSS3 (partie 1) - 16


(xxx aura la valeur top, right, bottom ou left)

border-width Définit la taille des 4 côtés length

border-style Définit le style des 4 côtés style (voir ci-après)

border-color Définit la couleur des 4 côtés color

border-xxx Permet de définir toutes les propriétés du bord spécifié en une étape (xxx aura la valeur top, right, bottom ou left).

Toutes les valeurs ne sont pas obligatoires.

lengthstyle (voir ci-après)color

border Permet de définir toutes les propriétés en une étape.

Toutes les valeurs ne sont pas obligatoires.

lengthstyle (voir ci-après)color

Rmq : D'autres combinaisons de propriétés sont possibles, mais retenons déjà celles-ci...

Styles :

M. LES COINS ARRONDIS

Petite nouveauté apparue dans la version 3 des CSS ! Les propriétés décrites dans ce chapitre permettent de définir des coins arrondis pour, notamment, les cadres tracés au moyen des propriétés Border vues dans le chapitre précédent.


border-xxx-radius Définit l'arrondi du coin spécifié (xxx aura la valeur top-left, top-right, bottom-right ou bottom-left)→ ex.: border-top-left-radius

length%

16.05.23 CSS3 (partie 1) - 17


border-radius Permet de définir l'arrondi de tous les coins une étape

Si une seule valeur est précisée, chaque coin aura cet arrondi.

Si 2 valeurs sont précisées, la 1ère définit les coins SupG et InfD ; la 2ème celui des coins SupD et InfG.

Si 3 valeurs sont précisées, la 1ère donne l'arrondi du coin SupG ; la 2ème des coins SupD et InfG ; la 3ème du coin InfD.

Si 4 valeurs sont précisées, elles doivent être données dans l'ordre SupG, SupD, InfD, InfG.

length (1 à 4 valeurs)% (1 à 4 valeurs)

Exemple :

Remarquez la différence des arrondis selon que l'on précise les valeurs en

16.05.23 CSS3 (partie 1) - 18


pixels ou en pourcentage. Les valeurs en pixels ne tiennent pas compte de la différence de taille entre la hauteur et la largeur de la forme ; contrairement aux pourcentages !

N. LES PROPRIÉTÉS MARGIN

Les propriétés Margin permettent de définir la taille de chaque côté du cadre Margin. En d'autres mots, les marges représentent l'espace entre cet élément et les éléments qui lui sont adjacents.


margin-top Définit la taille de la partie supérieure.

lengthauto

margin-right Définit la taille de la partie droite.

length auto

margin-bottom Définit la taille de la partie inférieure.

length auto

margin-left Définit la taille de la partie gauche.

length auto

margin Permet de définir toutes les propriétés en une étape.

La définition de cette propriété suit les mêmes règles que la propriété padding vue précédemment.

lengthlength lengthlength length lengthlength length length length

auto

Remarques :

Quand on spécifie la largeur (ou hauteur) d'un élément avec les feuilles de style, on définit uniquement la taille de la partie "Content" (en fonction de la propriété box-sizing). Pour connaître la taille réelle d'un élément, il faut aussi ajouter les tailles du padding, du border et du margin (Attention, 2 fois car il y a deux côtés !).

Il est possible, grâce aux propriétés déjà vues, de demander aux navigateurs de centrer horizontalement un bloc de texte. Pour cela, il suffit de donner une largeur au bloc et spécifier que les marges gauche et droite doivent être calculées automatiquement par le système.

O. DIVERSES PROPRIÉTÉS


cursor Définit l'aspect du curseur auto

16.05.23 CSS3 (partie 1) - 19


lorsqu'il survole cette zone. crosshairdefaulte-resizehelpmoven-resizene-resizenw-resizepointerprogresss-resizese-resizesw-resizetextw-resizewait

opacity Définit l'opacité d'un élément et de son contenu (0=transparent / 1=opaque).

valeur


Exemples :

Encodez et testez cette page pour visualiser les différents aspects du curseur :

Exercices :


P. LES EFFETS DE TRANSITION

La version 3 des CSS nous apporte des commandes permettant de changer en douceur

16.05.23 CSS3 (partie 1) - 20


les valeurs des propriétés d'un élément. Ces effets de transition permettent, par exemple, d'agrandir la taille d'un paragraphe lorsque l'internaute le survole au moyen de la souris.

Attention, ces effets de transition ne fonctionnent pas dans la version Internet Explorer 9 et les précédentes.


transition-property

Spécifie le nom des propriétés cibles des effets de transition

noms des propriétés séparés par des virgules

transition-duration

Spécifie la durée de la transition (en secondes s ou millisecondes ms)

durée

transition-timing-function

Spécifie la courbe de vitesse de l'application de l'effet :- ease : départ lent, puis rapide, puis fin lente- linear : même vitesse du début à la fin- ease-in : départ lent- ease-out : fin lente- ease-in-out : départ et fin lents

easelinearease-inease-outease-in-out

transition-delay

Spécifie le délai avant que la transition ne débute (en secondes)

durée

transition Permet de définir toutes les propriétés en une étape.

propertydurationtiming-functiondelay

Exemple :

16.05.23 CSS3 (partie 1) - 21


Dans cet exemple, vous pouvez voir comment on peut faire évoluer l'aspect d'un paragraphe lorsque l'internaute y positionne la souris. Ces effets peuvent également s'appliquer à d'autres éléments tels que des images (que l'on pourrait agrandir),...

Exercice :


Q. LES POSITIONS

Nous avons vu précédemment qu'un des principes des CSS était de découper les pages HTML en boîtes, chacune étant caractérisée par ses propriétés et par son positionnement.

Par défaut, les boîtes sont disposées séquentiellement de la gauche vers la droite et de haut en bas. Grâce aux propriétés CSS décrites ci-après, nous allons voir qu'il est possible de modifier ce positionnement.

Malheureusement, nous verrons que cette manipulation sera délicate car :- Elle risque de produire des recouvrements de blocs.- Les différents navigateurs ne calculent pas les positions d'une manière

identique (notamment à cause de la manière de calculer la taille des éléments, mais pas uniquement).

- Ces commandes ne sont pas très faciles à utiliser pour des pages web plus élaborées.

Nous verrons dans un prochain chapitre que les concepteurs de l'HTML5 et des CSS3 ont été conscients de cette problématique et ont essayé d'y apporter des solutions au moyen de nouvelles commandes. Néanmoins, la plupart des sites actuels utilisant encore l'ancienne technique, il est important de la connaître.

Avant toute chose, n'oublions pas qu'il est impératif de tester son site avec les différents navigateurs les plus utilisés sur le marché avant de l'héberger (à savoir : Edge, Internet Explorer, Google Chrome, Mozilla Firefox, Opera et Safari).

Position Fixed

Ce type de positionnement permet de placer un élément à une position précise et fixe par rapport à la fenêtre du navigateur. Il ne sera pas déplacé sur l'écran même si l'internaute utilise la barre de défilement de la fenêtre. Il reste donc toujours visible.

Un élément de ce type est retiré du traitement normal du texte. En d'autres mots, on ne tient pas compte de cet élément pour disposer les autres éléments de la page. Il est donc possible d'avoir des superpositions d'éléments.

Le positionnement de la boîte peut être spécifié pour l'un et/ou l'autre des côtés : top, bottom, right et left.

16.05.23 CSS3 (partie 1) - 22


Ce type de positionnement est idéal lorsque l'on veut définir une image en arrière-plan qui couvre toute la fenêtre réservée au site.

Attention, il ne fonctionnait pas avec Internet Explorer en HTML 4. Cette propriété a toutefois été ajoutée dans la version I.E.9 pour autant que l'on spécifie que l'on travaille en HTML 5.

Ordre de superposition des éléments

La propriété z-index permet de définir la position d'un élément par rapport aux autres lorsque plusieurs éléments se superposent. Un élément peut avoir un index "position" positif ou négatif. Les éléments disposés au premier-plan sont ceux ayant les index les plus élevés.

Position Absolute

Ce type de positionnement permet de placer un élément à une position précise par rapport à son premier parent non-static (= dont la position a été redéfinie) ou, à défaut, à la fenêtre du navigateur. Contrairement au positionnement fixed, il est déplacé lorsque l'internaute utilise la barre de défilement.

Un élément de ce type est retiré du traitement normal du texte. En d'autres mots, on ne tient pas compte de cet élément pour disposer les autres éléments de la page. Il est donc possible d'avoir des superpositions d'éléments.


16.05.23 CSS3 (partie 1) - 23


Position Relative

Ce positionnement permet de déplacer un élément par rapport à sa position prévue initialement.

Bien que l'espace à la position initiale de cet élément soit toujours réservé, le fait qu'il soit déplacé peut entraîner une superposition d'éléments.


16.05.23 CSS3 (partie 1) - 24


Position Float

Une autre manière de positionner des éléments d'une page HTML est d'utiliser le mode float (flottant) qui retire une boîte du flux normal pour la placer le plus à droite (float:right;) ou le plus à gauche (float:left;) possible dans son conteneur, permet de créer une colonne, etc. (voir les exemples ci-après)

Exemples :

Supposons que l'on souhaite faire apparaître une image à la gauche d'un texte :

L'image peut être placée à la gauche ou à la droite du paragraphe en fonction de la valeur de la propriété float liée ; mais, attention, il faut que la balise img soit placée au début du paragraphe.

Le problème que l'on a parfois avec ce genre de présentation est le fait que l'on veuille avoir un paragraphe à côté(/autour) de l'image mais que, quoi qu'il arrive, le paragraphe suivant doit commencer d'office en-dessous de l'image. Or, si le texte n'est pas assez long, voici ce que l'on aura :

16.05.23 CSS3 (partie 1) - 25


Pour régler ce problème, on appliquera la propriété clear:both au 2° paragraphe:

Si on veut avoir l'image à gauche et tout le texte s'y rapportant, quelle que soit sa taille, à sa droite, on procèdera comme suit :

16.05.23 CSS3 (partie 1) - 26


La classe "p_cote_img" a été définie afin de décaler le paragraphe lié par rapport au bord gauche de l'écran. Sans celle-ci le paragraphe encadrerait totalement la photo : aucun espace ne serait laissé entre la photo et le texte et la dernière ligne du paragraphe serait écrite en dessous de la photo à partir du bord de la fenêtre.

Pour avoir une page semblable à celle-ci :

Le navigateur place tout d'abord la boîte jaune, alignée sur le bord droit de cette partie de notre page, puis reprend le cours normal du flux dans l'espace laissé libre à sa gauche pour afficher la boîte verte. Le flux occupe tout l'espace disponible : la boîte verte reprend donc toute la largeur de la page sitôt passée la limite inférieure de la boîte flottante jaune.

Supposons que l'on souhaite avoir une mise en page à 4 colonnes :

Exercices :Faire les exercices C8 et FR8.

16.05.23 CSS3 (partie 1) - 27


1. LES BALISES ET PROPRIÉTÉS "TABLEAUX" Les tableaux sont très souvent utilisés car ils permettent d'améliorer la présentation des pages en facilitant la disposition et l'alignement des données.

Un tableau est composé de lignes et de colonnes qui forment des cellules. Une cellule peut contenir du texte, des images, des hyperliens,...

Les tableaux étant des objets assez complexes, il a fallu créer 5 paires de balises, accompagnées d'un certain nombre d'attributs et de propriétés CSS, pour parvenir à définir le format exact souhaité.

Les premières balises sont <table> et </table> qui délimitent respectivement le début et la fin du tableau. Si en HTML4 il existait plusieurs attributs, ils ont été remplacés par des propriétés CSS en HTML5.

Les secondes balises, <tr> et </tr>, indiquent le début et la fin d'une ligne.

Les balises suivantes <td> et </td> indiquent le début et la fin d'une cellule. La balise de début contient les attributs de définition de la cellule :- rowspan Fusionne le nombre de cellules adjacentes indiqué dans une même

colonne.- colspan Fusionne le nombre de cellules adjacentes indiqué sur une même ligne.

Les balises paires <th> sont identiques aux balises <td> à l'exception du fait qu'elles sont utilisées pour définir un en-tête de colonne ou de ligne. Leur contenu sera affiché en gras et centré horizontalement.

Les balises paires <caption> permettent de définir une légende de tableau. Par défaut, le texte écrit entre les balises sera placé au-dessus de celui-ci.

Exemple :

16.05.23 Les Tableaux (HTML & CSS) - 1


Euh… On a parlé de tableau, non ? Vous voyez un tableau, vous ? Quand on regarde l'exemple, on n'a pas l'impression d'avoir un tableau ! Effectivement, on ne le voit pas, mais il est là. Le problème vient des définitions des propriétés CSS qui n'ont pas été définies. Etudions-les et corrigeons l'exemple pour avoir un tableau digne de ce nom.


border Propriété déjà décrite qui permet de définir l'aspect des lignes (bordures)

lengthstylecolor

border-collapse Indique si les bordures des cellules et du tableau doivent être communes ou séparées.

collapseseparate

border-spacing Dans le cas de bordures séparées, permet de spécifier les écarts horizontaux et verticaux entre chaque bordure. Si une seule valeur est indiquée, elle sera utilisée pour les deux types d'écart.

lengthlength length

caption-side Spécifie la position de la légende du tableau.

topbottom

empty-cells Si tableau "separate", spécifie s'il faut ou non afficher les bordures et l'arrière-plan des cellules vides.

hideshow

table-layout Automatique :La largeur de chaque colonne est déterminée par le plus long contenu insécable des cellules la composant.

Fixe :La largeur des colonnes est définie par les propriétés width appliquées au tableau et aux cellules les composant.

autofixed


Rappelons encore que d'autres propriétés déjà étudiées s'appliquent également aux tableaux et cellules :- width : largeur- height : hauteur- text-align : alignement horizontal- vertical-align : alignement vertical- padding : écart entre les bordures et le contenu des cellules



Si nous reprenons l'exemple précédent et lui ajoutons quelques propriétés CSS, nous verrons apparaître un beau tableau.

Attention, il faut définir la propriété border pour la table, mais aussi pour th et td, sans quoi seules les bordures extérieures du tableau seront tracées.

Exemples :

Voici quelques exemples qui vous montrent les possibilités offertes par CSS.

Supposons que l'on souhaite avoir un tableau avec de simples lignes horizontales séparant les données du tableau :



On procédera de la manière suivante :

Dans l'exemple suivant, on souhaite afficher la ligne de titre en noir et les autres lignes en gris ou blanc, une ligne sur deux. Attention, la ligne survolée par la souris doit être en bleu :



Le sélecteur tr:nth-child(even) permet d'indiquer l'aspect que doivent avoir les lignes paires (even). On écrira tr:nth-child(odd) pour les lignes impaires.

Le sélecteur tr:hover permet d'appliquer un style spécifique pour les lignes survolées par la souris.

Dans l'exemple suivant, on affiche un tableau assez large et on voudrait qu'il



ne soit pas coupé à cause de l'étroitesse de la fenêtre. On veut qu'il affiche une barre de défilement horizontale liée au tableau si nécessaire.



Le tableau doit être placé dans une division qui possède la propriété style="overflow-x:auto;".

Exercices :




1. LES CADRES LOCAUX (OU IFRAME) Il est possible de définir à l'intérieur d'une page HTML contenant du texte, des images, etc., un cadre local à l'intérieur duquel s'affichera le contenu d'une autre page HTML.

La technique des cadres locaux s'obtient avec la balise <iframe> qui permet d'insérer une fenêtre à n'importe quel endroit de votre document. La balise <iframe> doit être dans le corps de votre document, c'est-à-dire entre les balises <body> et </body>.

Cette balise possède notamment l'attribut src qui indique le document HTML à afficher par défaut dans le cadre.

Il est possible de définir la hauteur et la largeur du cadre au moyen des attributs height et width, mais il est préférable de le faire aux moyens des styles CSS.

Il est également conseillé d'insérer un petit message entre les balises <iframe> et </iframe> à l'intention des internautes utilisant un navigateur ne traitant pas les cadres locaux.

Exemple :

2. LES NOUVELLES BALISES DE STRUCTURE EN HTML5 Partant de la constatation que la plupart des sites WEB sont constitués des mêmes types d'éléments, les concepteurs du langage ont créé de nouvelles balises dans la 5ème version de l'HTML afin de faciliter la définition de la structure des pages. Attention, ces balises ne s'occupent pas de la mise en page, elles indiquent seulement le sens/l'utilité de leur contenu.

16.05.23 Structurer une page (HTML & CSS) - 1


En général, une page web est constituée d'un en-tête, d'un menu de navigation (en haut ou sur les côtés), de différentes sections (et/ou articles) au centre et d'un pied de page.

Voici les (paires de) balises :

<header> - Définit l'en-tête de la page ou d'une section

<nav> - Définit une boîte pour un menu (navigation)

<section> - Définit une section dans un document

<article> - Définit un article indépendant

<aside> - Définit une boîte annexe, disposée généralement sur le côté, permettant de donner des informations complémentaires sur le sujet de la page

<footer> - Définit le pied de page de la page ou d'une section

Certains navigateurs ne connaissant malheureusement pas ces balises, il est conseillé d'encoder les commandes suivantes dans la partie <head> de la page afin de remédier au problème :

Exemple :





3. LA MISE EN PAGE AVEC LES PROPRIÉTÉS FLEXBOX Comme vous avez déjà pu le constater, il existe plusieurs manières de mettre en page un site.

Au fil du temps, plusieurs techniques ont existé :- Au début, on utilisait principalement les tableaux pour faire la mise en page- Ensuite, CSS étant apparu, on a essentiellement utilisé les propriétés float

et position. Mais, il faut bien reconnaître que ce n'était pas toujours évident.

- A présent, une bien meilleure technique est apparue : les propriétés Flexbox.



Le principe de la mise en page avec Flexbox est simple : on définit un ou plusieurs conteneurs dans lesquels on place les différents éléments souhaités ; et on définit ensuite les paramètres de positionnement au niveau du conteneur.

La première propriété à définir, au niveau du conteneur, indique qu'il devra suivre le positionnement Flexbox. Pour ce faire, on lui associe la propriété display:flex;. Dès cet instant, tous les éléments qu'il contiendra seront disposés selon le mode Flexbox.

Dans l'exemple suivant, on constate que, grâce à cette propriété, les différents éléments ne sont plus disposés les uns en-dessous des autres mais les uns à côté des autres.

Le sélecteur nth-child(n°) permet d'indiquer le numéro d'ordre de l'élément dont on souhaite définir l'aspect. Par exemple, .element:nth-child(2) désigne le deuxième élément.


flex-direction Les éléments seront positionnés selon la valeur spécifiée :- row : sur une ligne- column : sur une colonne- row-reverse : sur une ligne, en ordre inversé- column-reverse : sur une colonne, en ordre

inversé

rowcolumnrow-reversecolumn-reverse

flex-wrap Cette propriété permet de gérer les retours à la ligne des éléments présents dans le conteneur :- nowrap : pas de retour à la ligne. Les

éléments sont comprimés pour tenir sur une ligne

- wrap : les éléments vont à la ligne lorsqu'il n'y a plus la place

nowrapwrapwrap-reverse



- wrap-reverse : les éléments vont à la ligne lorsqu'il n'y a plus la place en sens inverse (le dernier dans le code source sera celui au début du conteneur)

justify-content Alignement des éléments sur l'axe principal (= axe horizontal si flex-direction = row... ou vertical si flex-direction = column...) :- flex-start : alignés au début- flex-end : alignés à la fin- center : alignés au centre- space-between : les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux)- space-around : les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémitésles éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités

flex-startflex-endcenterspace-betweenspace-around

align-items Alignement des éléments sur l'axe secondaire (= axe vertical si flex-direction = row... ou horizontal si flex-direction = column...) :- stretch : étirés sur tout l'axe- flex-start : alignés au début- flex-end : alignés à la fin- center : alignés au centre- baseline : alignés sur la ligne de base

stretchflex-startflex-endcenterbaseline

align-self Permet de faire une exception pour un élément sur l'axe secondaire

Exemple :.element:nth-child(2) {align-self:flex-end;}

stretchflex-startflex-endcenterbaseline

align-content Permet d'indiquer la manière de répartir les lignes verticalement dans le conteneur lorsqu'il y a plusieurs lignes

stretchflex-startflex-endcenterspace-betweenspace-around

order Permet de changer l'ordre d'affichage des éléments à l'écran sans changer le code HTML.

Exemple :

numéro

flex Indique dans quelle mesure un élément peut grossir par rapport aux autres éléments afin de

nombre



remplir tout l'espace du conteneur

Exemple :

Ici, l'élément 2 a 3 fois la largeur des autres.




4. EXEMPLE COMPLET D'UNE PAGE

Lorsque l'on souhaite créer un site, il est important de respecter différentes étapes :- Dessiner le squelette de la page- Organiser le contenu en HTML- Mettre en forme au moyen des CSS :

- Les polices de caractères- Les styles principaux de la page (largeur site, fond, couleurs,...)- La bannière- La section principale- Le pied de page



Voici les codes correspondant à la page WEB ci-avant :









Exercices :


5. CSS - CONFIGURATION DE L'ÉCRAN Il est à présent possible de définir des styles à appliquer qui tiennent compte de la configuration de l'écran de l'internaute.

Pour ce faire, il suffit de définir plusieurs fois le même style en adaptant ses paramètres en fonction des caractéristiques du média. C'est le navigateur utilisé par l'internaute qui activera les styles ad-hoc.

Exemple :



1. CRÉER UN DOMAINE Bravo, vous avez créé un superbe site ! Malheureusement, il n'est disponible que sur votre PC ! Pourquoi ne pas en faire profiter la planète entière ? Comment ?! Mais simplement en le publiant sur la toile ! Vous ne savez pas comment faire ?!

Pour publier un site, il faut d'abord trouver un hébergeur. Il en existe un grand nombre. Trouvons-en un. Mais avant de le sélectionner, il faut faire attention à plusieurs points dont notamment :

- L'espace disque qui nous sera alloué- Les langages et ressources disponibles : l'HTML, les feuilles de styles,

JavaScript, PHP, MySql (gestion d'une base de données), etc.- Le nom de domaine que l'on pourra utiliser. Peut-on utiliser, s'il est

disponible, le nom de domaine composé du nom de notre société suivi de .comou le nom de domaine devra-t-il impérativement comporter une référence ànotre hébergeur ?

- Le prix de l'hébergement.- Notre site sera-t-il infesté de publicités ?- etc.

Dans le cadre de ce cours, on veillera aux langages et ressources disponibles, ainsi qu'à la gratuité de l'hébergement. On ne fera donc pas attention au nom du domaine, à l'envahissement de publicités, à l'espace disque, etc.

Au début de la création du cours, j'avais opté pour un hébergeur. Mais, après quelques mois, j'ai dû accepter le fait que celui-ci n'était plus disponible. Faillite, cessation d'activité, submergé par les internautes, ... ? Je n'en sais rien. Tout ce que je sais c'est que ni l'hébergeur, ni mon site ne sont encore accessibles. Que faut-il tirer comme conclusion de tout cela ? Premièrement, on doit avoir une copie de sauvegarde de son site chez soi. Deuxièmement, les hébergeurs gratuits, encore plus que les autres, sont susceptibles de disparaître sans prévenir !

Prenons-en donc un autre, par exemple www.alwaysdata.com

Avant de réserver un nom de domaine, il est souvent conseillé d'avoir une boîte e-mail disponible car plusieurs hébergeurs veulent une confirmation de notre demande au moyen d'un e-mail.

Avant de passer à la pratique, citons les différentes étapes du processus de création d'un site : - Création d'une boîte e-mail

- Création du site sur le PC- Création du domaine- Transfert du site via FTP- Vérification de l'accès et du fonctionnement du site- Faire connaître le site via le référencement, etc.

16.05.23 Hébergement - 1


Etape 1 : Création d'une boîte e-mail :

Créons chacun une boîte e-mail du style ErasmeNomAnné[email protected] à partir du site fr.yahoo.com (ex.: [email protected]).

Etape 2 : Création du site sur le PC :

Pour cet exercice, créons une simple page et sauvons-la sous le nom ExSite.htm

Etape 3 : Création du domaine :Demandons la création de notre domaine :

- Connectons-nous au site www.alwaysdata.com

- Cliquons sur le bouton Inscription

- Remplissons les informations demandées et passons à l'Etape suivante



- Remplissons la suite des informations demandées et passons à l'Etape suivante

Précisons le nom du domaine souhaité en encodant le Nom du compte qui fera partie de l'url de notre site. Dans notre exemple,

l'adresse de notre site sera http://courserasme2016.alwaysdata.net.

Indiquons le Produit souhaité (ici, le Pack gratuit).

Introduisons le Mot de passe (Attention, on en aura besoin pour la mise à jour du site → il faut le retenir !)

- Vérifions les informations et validons la Création du compte



- AlwaysData nous confirme alors la création du compte et nous invite à nous connecter à l'Interface d'administration

- Connectons-nous à l'interface d'administration



- Vérifions l'adresse du Site créé (http://courserasme2016.alwaysdata.net) et retenons l'URL de l'interface d'administration qui nous permet d'accéder directement à l'écran de login du site de configuration de notre domaine (https://admin.alwaysdata.com/login).



- Vérifions les données FTP

Tous nos domaines sont créés et donc opérationnels. Mais, il reste néanmoins un problème... Lorsque l'on visite les sites, ils sont tous vides ! Evidemment, nous avons réservé tous les hébergements, mais nous n'y avons pas chargé les données du site (les pages HTML, etc.). Passons donc à l'étape suivante.

2. UTILISATION DE FTP Etape 4 : Transfert du site via FTP :

Transférons à présent nos fichiers HTML, etc. sur le disque de l'hébergeur. Pour cela, il faut utiliser un programme du type FTP (File Transfer Protocol).

Soit l'hébergeur propose un programme de ce type, soit il faut en télécharger un autre. Un des programmes les plus utilisés étant FileZilla, étudions-le.

- Commençons par le télécharger à partir de l'adresse www.filezilla.fr

- Exécutons-le

- Connectons-nous chez l'hébergeur via la commande File / Site Manager et en précisant les valeurs : Host (ftp-courserasme2016.alwaysdata.net), User (courserasme2016), Password et Port (21); puis cliquons sur le bouton Connect.

- Sélectionnons également le Site Local



- Il nous suffit à présent de sélectionner les fichiers à transférer et à les glisser du site local au site distant (ou l'inverse le cas échéant) dans le dossier www du serveur (Si le dossier www ne semble pas exister, il faut copier les fichiers dans le dossier maître).

Etape 5 : Vérification de l'accès et du fonctionnement du site :

Voyons à présent si notre site est disponible et fonctionne correctement. Tapons donc l'url courserasme2016.alwaysdata.net dans un navigateur.

Mais, mais, où est-il ? Je ne le vois pas !

Et oui, je ne vous l'avais pas dit mais il y a un point très important à ne pas oublier. Comment le navigateur peut-il deviner à partir du nom de votre site le premier fichier à afficher ? Bonne question, non ?! Une des conventions les plus répandues est d'afficher en premier lieu le fichier index.html ! Renommez votre fichier (sur l'hébergeur aussi !) et réessayez... Super, le site est visible !

Bon, évidemment, cela serait trop beau si tout était si simple...

Problème n°1 : Affichage de la liste des fichiers et dossiers

Attention, lorsque le système ne trouve pas le fichier à afficher, il arrive souvent qu'il affiche la liste des fichiers et dossiers présents sur le site. Il y a donc un risque au niveau de la sécurité et confidentialité des données.

Supposons qu'un grand nombre de fichiers composent mon site et sont répartis en plusieurs dossiers :

Le premier fichier à afficher se trouve dans le dossier FichHtml et s'appelle debutsite.htm. Comment faire pour que le système le trouve ? Il faut créer le fichier .htaccess que l'on placera dans le dossier racine du site. Dans celui-ci, on écrira notamment l'instruction DirectoryIndex FichHtml/debutsite.htm en respectant la casse ! Cette commande permet d'indiquer au serveur la première page du site à afficher par défaut.

Certains internautes malintentionnés contourneront facilement ce paramètre pour afficher la liste des fichiers et dossiers. Pour les contrer, il suffira



d'ajouter l'instruction Options -Indexes dans le fichier .htaccess. Cette commande empêche la génération du listing des sources du dossier.

Problème n°2 : Faire connaître le site

Le site est créé et accessible. Super ! Euh, à part vos connaissances à qui vous avez envoyé l'adresse URL, comment le trouvera-t-on ? En faisant une recherche via Google, etc. ? Et comment Google, etc. vont-ils savoir que vous existez et ce qu'il y a dans votre site ?

Pour régler ce problème, on va devoir référencer le site. Mais, attention, même si la définition du référencement se fait assez rapidement, il faut parfois plusieurs semaines avant que celui-ci ne soit réellement actif !

3. LE RÉFÉRENCEMENT ET LES BALISES META Etape 6 : Faire connaître le site via le référencement, etc. :

N'ayant pas encore un vrai site à publier avec des informations intéressantes pour les internautes, ce chapitre se limitera à montrer les différentes manières de procéder. Il ne sert en effet à rien d'essayer de faire connaître un site "vide" car les moteurs de recherche n'en tiendront jamais compte et risquent même de mettre le site sur une liste noire.

Il existe différentes techniques pour se faire connaître :- Envoyer son adresse à toutes ses connaissances- Aller sur les différents forums et citer son adresse- S'inscrire dans différents annuaires- Le référencement- Payer pour placer son site en tête des recherches

Avant de procéder aux demandes de référencement, il faut d'abord adapter nos fichiers afin d'augmenter les chances d'être repris et, si possible en bonne place, par un ou plusieurs moteurs de recherche.

Il faut savoir que beaucoup de moteurs de recherche se basent sur plusieurs informations pour référencer un site dont :

- Le contenu de la balise <title> de chaque fichier HTML du site- Les mots présents dans les pages HTML- Le contenu des balises <meta>

Il faut aussi savoir qu'ils n'aiment pas trop les sites en construction.

Etudions donc d'un peu plus près les balises <meta>. Ces balises apportent une série d'informations relatives à la teneur de la page web et sont donc comprises entre les balises <head>.

La première balise <meta> à spécifier reprend le type de contenu et les caractères utilisés pour son encodage (pour rappel <meta charset>). Sans ces informations, certains navigateurs afficheront les pages bizarrement.

Il existe bien d'autres balises <meta>, mais nous retiendrons essentiellement les 2 suivantes qui sont les plus importantes au niveau des moteurs de recherche.

La première keywords reprend une liste de mots-clés, séparés par une virgule, qui représentent le contenu du site. Tout l'art consiste à trouver les bons



mots. Mettez-vous à la place des internautes. Quels mots, quels synonymes vont-ils encoder dans les moteurs de recherche lorsqu'ils auront envie de trouver votre site ? (Certains systèmes accepteraient jusque 1000 mots ???)

La seconde description reprend une description brève de la page. (Certains systèmes ne tiendraient compte que des 150 à 240 premiers mots ???)

Après avoir défini correctement les balises <meta>, il faut à présent activer les référencements. Pour cela, il faut aller sur les sites des moteurs de recherche souhaités et y demander d'inscrire notre site. Il existe plusieurs sites de ce type. Il suffit de suivre les étapes affichées à l'écran.Exemples : www.google.fr/addurl, www.bing.com/toolbox/submit-site-url, ...

Une autre commande <meta> qui pourrait être utile est la commande refresh qui permet de rediriger automatiquement une page sur une autre après un certain délai exprimé en secondes. Dans l'exemple suivant, la page est automatiquement redirigée vers la page CoursErasmeCreationSite2.html après 2 secondes.

Exercice :




1. INTRODUCTION Qu'est-ce qu'un formulaire ? Un formulaire est une page WEB composée de différentes zones, appelées champs, qui donnent la possibilité aux internautes de dialoguer avec les auteurs du site selon un canevas choisi par ces derniers. Ce dialogue peut être de différents types. Il peut s'agir d'un simple avis sur le site, d'une demande d'inscription à un stage de vacances, d'une commande de produits, etc.

Les auteurs du site vont donc disposer sur la page différents champs (ex.: liste déroulante, boutons radio, cases à cocher, etc.) que l'internaute pourra ou devra remplir avant de soumettre le tout.

Dans un premier temps, nous allons nous contenter de créer des formulaires dont le traitement après soumission consiste à envoyer par e-mail le contenu des champs à une adresse fixée par les créateurs du site.

Dans un second temps, nous verrons que grâce, notamment, à PHP, nous pourrons traiter automatiquement certaines demandes des internautes.

Et, enfin, dans un troisième temps, nous verrons que grâce, notamment, à JavaScript, nous pourrons contrôler le contenu des champs avant leur traitement.

2. LES BALISES SPÉCIFIQUES AUX FORMULAIRES Attention, à ce niveau du cours, nous nous limiterons aux attributs utilisables sans PHP, JavaScript, etc. Ceux-là seront étudiés dans les prochains chapitres qui seront dédicacés à PHP et au JavaScript.

Commençons donc par les premières balises indispensables aux formulaires : <form> et </form> qui délimitent l'étendue du formulaire ; et qui surtout indiquent l'adresse d'envoi et le type de données introduites par l'internaute.Les principaux attributs sont :

action Cet attribut contient l'adresse d'envoi des données introduites parl'internaute. A ce niveau-ci du cours, on y indiquera une adressee-mail. Plus tard, on verra qu'on peut lui associer un script PHP.Cette adresse e-mail sera associée à la commande mailto et utiliseradonc la messagerie de l'internaute. A la place de ça, on aurait puutiliser le système de messagerie du serveur en encodant simplementson adresse au niveau de cet attribut. Mais pour cela, il faut quele serveur dispose de ce système et le mette à notre disposition...

method L'http est un protocole qui reçoit deux types de requêtes : get etpost. Avec get, les variables sont ajoutées à la fin de l'url dansla barre d'adresse du navigateur lorsque l'on soumet la requête auserveur. Ces valeurs sont donc visibles par l'internaute et limitéesà 255 caractères. Avec post, les variables sont rassemblées avantd'être envoyées au serveur de manière "invisible" pour l'internaute.Dans ce cas, il n'y a pas de limite de taille. A ce niveau du cours,

16.05.23 Formulaires - 1


on utilisera la méthode post.enctype Cet attribut permet de choisir le format d'envoi des données. Le

premier format text/plain est le format standard. Toutefois, il nepermet pas d'envoyer des fichiers joints. Dans ce cas-là, onutilisera le format multipart/form-data ; mais celui-ci demande untraitement PHP par la suite... Attendons donc encore un peu.

autocomplete Cet attribut permet de préciser au browser s'il doit proposerdans une liste les anciennes valeurs présentes lors des envoisprécédents (off ou on)

La balise suivante, à savoir <input />, est fort utilisée. C'est en effet elle qui permet d'encoder toute une série de champs (ligne de texte, boutons radio, cases à cocher, etc.). Etudions donc ces différents champs les uns après les autres plutôt que la balise en général.

Le premier champ étudié sera la zone de texte monoligne <input type="text" /> avec les attributs :

- name → Nom du champ (obligatoire)- id → Identifiant unique du champ- value → Valeur par défaut- placeholder → Information affichée quand la zone est vide- size → Taille du champ à l'écran (en nombre de caractères)- maxlength → Nombre maximum de caractères autorisés- required → Indique au browser que ce champ est obligatoire- autofocus → Indique au browser que le focus doit être placé dans ce champ lors du chargement de la page- autocomplete → Précise si une liste des anciennes valeurs doit être proposée (off ou on)

Les commandes oninvalid() et onchange() sont des commandes JavaScript utilisées pour afficher et effacer le message d'erreur lié à une zone obligatoire. Si vous ne les mettez pas, le message d'erreur par défaut sera affiché.

N'oubliez jamais que la présentation est très importante sur internet et donc il faut penser à utiliser tout ce qu'il y a moyen pour améliorer le site.

D'abord, il y a une chose qui m'ennuie. Lorsque je veux sélectionner un bouton radio ou une case à cocher, ou si je veux placer mon curseur dans une zone de texte,... je clique parfois sur son nom et le formulaire n'en tient pas compte. On pourrait peut-être rendre cela possible ?

Pour cela, il suffit de remplacer le libellé associé au champ par les balises <label> et </label> en définissant l'attribut for qui fait le lien avec l'attribut id de la balise <input>.

Voyons à présent le champ mot de passe <input type="password" /> qui a les mêmes



attributs que le champ texte vu ci-dessus. Il lui est identique à l'exception du fait que tous les caractères sont affichés sous une forme masquée à l'écran.

Quant aux boutons radio, ils seront affichés grâce à <input type="radio" /> et aux attributs : - name → Nom du champ identique pour tous les boutons de la

série (obligatoire)- id → Identifiant unique du champ- value → Valeur qui sera transmise au serveur- checked → Indique le bouton radio activé par défaut

Attention, n'oublions pas de définir l'attribut id si l'on veut activer les labels.

Remarque :On ajoutera la balise <label> avant ou après la balise <input> en fonction de la position souhaitée du libellé par rapport au bouton (ou case).

Les cases à cocher, elles, sont semblables aux boutons radio si ce n'est le fait que l'on utilisera la balise <input type="checkbox" /> et que l'on pourra cocher plusieurs valeurs.

Cette balise reprend aussi les boutons d'annulation <input type="reset" /> et d'envoi du formulaire <input type="submit" /> dont l'attribut value permet de modifier le libellé inscrit sur les boutons.

Il est parfois nécessaire, pour s'y retrouver lorsqu'on reçoit les données dans sa messagerie, d'inclure des données cachées permettant de savoir de quel formulaire viennent les données ou d'insérer des données issues de calculs ou encore des données provenant de JavaScript indiquant le navigateur, l'adresse IP, le nombre de visites ou tout autre renseignement sur le visiteur... Pour cela, on utilise la balise <input type="hidden" /> accompagnée des attributs name et value. Ces champs cachés ne seront pas vus par l'internaute mais seront inclus aux données envoyées au serveur et donc à la messagerie.



L'HTML5 a vu apparaître une série de champs <input> supplémentaires dans le but de faciliter la vie du webmaster. Mais ceux-ci ne fonctionnent pas encore avec tous les browsers... En voici des exemples :- Les premiers, du type email ou url, ont les caractéristiques des champs texte- Les seconds sont du type number (bouton de quantité) ou range (curseur de

quantité). Ces champs reprennent les attributs name, id, value, required, autofocus auxquels on ajoute les attributs min, max et step.

Il est également possible d'ajouter des zones de texte de longueur libre dans les formulaires. Ce type de zone permet à l'internaute d'écrire un commentaire assez long,... Pour cela, on utilisera les balises <textarea> </textarea> et ses attributs : - name → Nom du champ (obligatoire)

- id → Identifiant unique du champ- cols → Largeur du champ à l'écran (en nombre de caractères)- rows → Hauteur du champ à l'écran (en nombre de lignes)

La valeur par défaut sera écrite entre les deux balises.

Oui, oui, oui, le formulaire prend forme. Il n'y a plus que les listes qui manquent et cela sera parfait. Les listes sont définies au moyen de plusieurs balises. Les balises <select> et </select> servent à délimiter la définition de la liste et en indiquer les paramètres de fonctionnement. Les balises <option> et </option>, quant à elles, permettent de définir les éléments de la liste.La balise <select> a pour attributs :

- name → Nom du champ (obligatoire)- id → Identifiant unique du champ- multiple → La présence de cet attribut signifie que l'internaute pourra sélectionner plusieurs éléments dans la liste. Dans ce cas, on ajoutera les caractères [] à la fin de l'attribut name afin que le browser envoie un tableau avec les différentes valeurs sélectionnées. Dans le cas contraire, seul le dernier élément sélectionné sera envoyé.- size → Indique le nombre d'éléments visibles de la liste. Si il y a plus d'éléments que la size, une barre de défilement sera affichée. Attention, une liste déroulante sera affichée si et seulement si la size vaut 1 (ou n'est pas spécifiée) et que l'attribut multiple n'est pas spécifié. Dans le cas contraire, une simple liste apparaîtra.

La balise <option> a pour attributs :- value → Valeur qui sera transmise au serveur- selected → Indique que cette valeur doit être sélectionnée par défaut- Le texte écrit entre les deux balises <option> sera celui affiché à l'écran dans la liste



Il est possible de regrouper les valeurs de la liste en plusieurs catégories. Par exemple, une liste regroupant différents pays pourrait être divisée en continents... Pour cela, if suffit d'ajouter simplement les balises <optgroup> et </optgroup> en n'oubliant pas l'attribut label.

3. MISE EN FORME DES FORMULAIRES Retenons que l'on peut utiliser les feuilles de style pour toutes les balises des formulaires. Néanmoins, par facilité, on utilisera souvent les tableaux pour disposer les différents champs à l'écran. Les cellules de la première colonne contiendront les libellés des champs, tandis que les champs se trouveront dans les cellules de la deuxième colonne.

N'oubliez jamais que la présentation est très importante sur internet et donc il faut penser à utiliser tout ce qu'il y a moyen pour améliorer le site. Revenons donc un peu sur les balises déjà vues.

Ne pourrait-on pas un peu améliorer la présentation en encadrant les différents champs liés ? Les balises <fieldset> et </fieldset> délimitent une zone à encadrer. Les balises <legend> et </legend> permettent d'associer une légende à la boîte en question. Celle-ci sera affichée sur la ligne formant le cadre.

Il est également possible d'appliquer un style aux champs grâce aux pseudos-classes :required, :focus et :invalid.

4. EXEMPLE Le but de cette section est de montrer un simple exemple de mise en page d'un formulaire en associant un formulaire à une table et une feuille de style. Le but n'est absolument pas d'en faire une œuvre d'art, ni de créer un code parfait.





Exercices :




1. INTRODUCTION Avec ce chapitre, nous entamons une nouvelle section du cours : celle des algorithmes et de la programmation.

Si les premiers sites développés au début de la mondialisation de l'Internet pouvaient se contenter de l'HTML, il est évident qu'à présent cela ne suffit plus. Les nouveaux sites se doivent d'être dynamiques. C'est la raison pour laquelle la programmation y joue un grand rôle quel que soit le langage choisi. Mais étudier les commandes et la syntaxe d'un langage ne suffit pas, il faut également apprendre à développer un algorithme (= suite d'instructions qui permet de solutionner un problème et d'obtenir le résultat attendu). Afin de faciliter le dur apprentissage de la programmation, j'ai placé des invitations à étudier certains chapitres du cours "Les Algorithmes" avant de parcourir les notes sur PHP, MySQL et JavaScript. Tenez-en compte !

Comme vous le savez, le réseau Internet est composé de deux parties : le côté Client et le côté Serveur. Le Client correspond à la machine de l'internaute, le Serveur correspond au système de l'hébergeur.

Dans ce chapitre, nous allons étudier le PHP qui est un langage utilisé sur les serveurs. Ce langage permettra de valider avec certitude le contenu d'un formulaire, mais également d'effectuer certaines opérations lors de la réception de celui-ci. Il peut également être utilisé pour élaborer le contenu de la page du site à afficher ou envoyer des commandes pour accéder à la base de données via MySQL notamment. C'est grâce à toutes ces fonctionnalités que notre site deviendra un site dynamique.

Un site est dit "dynamique" lorsque son contenu peut changer sans l'intervention du webmaster. Les sites "statiques" sont des sites réalisés uniquement en HTML et CSS. Ils fonctionnent très bien mais leur contenu ne peut pas être mis à jour automatiquement. Il faut modifier le code pour y ajouter des nouveautés.

Trois étapes sont réalisées lors de la consultation d'un site dynamique par un internaute : - Le client demande au serveur à voir une page Web.

- Le serveur prépare la page spécialement pour le client.- Le serveur lui envoie la page qu'il vient de générer.

Avant d'aller plus loin dans l'étude du PHP, il faut bien comprendre que ce langage n'est traité que du côté Serveur et qu'aucun navigateur ne comprend ce langage. C'est pourquoi le PHP ne sera utilisé que lors de la seconde phase du processus d'affichage d'une page Web. En fait, dès que le Serveur aura exécuté le script PHP d'une page, le résultat de cette exécution prendra la place du code PHP lui-même. Le navigateur recevra donc la page sans script PHP.

2. PRÉPARATION DU PC Il ne faut jamais oublier que PHP est un langage utilisé sur les serveurs mais

16.05.23 PHP - 1


que les navigateurs ne comprennent pas. PHP permet d'insérer dans les pages web des instructions que le serveur web (le plus souvent Apache) exécutera avant d'envoyer les pages "résultats" aux navigateurs qui les demandent.

Par conséquent, si PHP est supporté par pratiquement tous les hébergeurs, il n'en est pas de même pour votre pc... Ce qui est embêtant lors de la construction ou modification d'un site que l'on souhaite tester en local sur son pc avant de l'héberger et le rendre ainsi accessible à tous les internautes. C'est pourquoi on installera sur son pc un serveur local qui permettra de tester son code avant de l'héberger.

Pour procéder à son installation, je vous conseille de suivre mes notes de cours "Installation de Wamp Server pour Windows 10".

Attention, il faut installer tout wamp dans le dossier c:\wamp.

Essayons directement le code suivant :

Attention, pour que cela fonctionne, il faut suivre les règles suivantes :

- Bien respecter la syntaxe

- Sauver le fichier avec l'extension .php

- Le fichier doit se trouver dans le dossier C:\wamp\www (ou sous-dossier) sur votre pc pour qu'il puisse fonctionner en local

- Le serveur local (WampServer) doit être démarré.Le cas échéant, on changera la langue du serveur au moyen d'un clic droit sur l'icône de WampServer de la barre de tâches / Language / french.Si nécessaire, on peut vérifier si le serveur local fonctionne correctement en cliquant avec le bouton gauche sur son icône de la barre de tâches / commande Localhost. Si tout va bien il affichera un écran comparable à :

16.05.23 PHP - 2


- Appeler la page à afficher à partir du browser.Attention, les scripts PHP exigent que le serveur web lise et exécute le code PHP qu'ils contiennent avant d'envoyer le code HTML produit au browser. Il faut donc entrer une adresse url spéciale afin que le browser demande le fichier au serveur. Si le fichier s'appelle C:\wamp\www\Exemple1.php, on encodera l'url http://localhost/Exemple1.php

3. SYNTAXE GÉNÉRALE Comme beaucoup de langages, PHP n'échappe pas à l'obligation de respecter une certaine syntaxe.

En PHP, en dehors de la syntaxe spécifique à chaque commande, il y a 4 grandes règles à respecter :- PHP étant case sensitive, il faut respecter la casse des lettres.- La fin de chaque instruction doit être indiquée par le caractère ;- Chaque script PHP commence par les caractères <?php (parfois dans sa forme

raccourcie <?) et termine par ?>.- Tout fichier contenant du code PHP doit avoir une extension indiquant qu'il

contient ce type de code (en général .php).

En PHP, encore plus qu'en HTML et en CSS, il est conseillé de mettre des commentaires pour expliquer ce que font les instructions. Il existe deux manières de le faire :- On peut les écrire en fin de ligne après les caractères // (deux slashs).- On peut, comme en CSS, écrire de longs commentaires entre /* et */

Les commentaires sont également souvent utilisés pour rechercher une erreur dans un programme en masquant momentanément certaines instructions afin de se concentrer sur les commandes problématiques.

PHP ne tient pas compte du nombre d'espaces entre les mots des instructions. Il ne faut donc pas hésiter à en mettre pour faciliter la lecture du code.

4. LES VARIABLES

A. AVANT-PROPOS

Avant d'étudier les variables, parlons quelques instants de la commande echo de PHP. Cette commande, que nous étudierons plus en profondeur plus tard, permet d'afficher le contenu des variables et valeurs passées en paramètres. Le résultat de cette commande n'est pas considéré comme du script PHP et sera donc traité, côté Client, par le browser de l'internaute.

16.05.23 PHP - 3


B. INITIATION AUX VARIABLES

Conseil : Etudiez au préalable les chapitres du cours "Les Algorithmes" :- Introduction Générale : 1. Evolution des langages informatiques

2. Importance de l'informatisation3. Introduction générale aux algorithmes

- Les Algorithmes : 1. Introduction2. Structure d'un algorithme3. Les variables

Lorsque l'on programme, on doit souvent demander à l'ordinateur de retenir certaines informations pendant le traitement. Ces informations, ou données, sont de différents types : nombres, caractères, dates, etc.

Ces informations seront stockées par l'ordinateur dans des zones de sa mémoire que l'on peut comparer aux tiroirs d'une armoire. On devra simplement placer une étiquette sur chaque tiroir utilisé afin de pouvoir retrouver l'information souhaitée. On pourra alors par la suite facilement relire cette information, mais aussi la modifier, voire la supprimer.

En informatique, et donc en PHP, un tiroir est appelé une variable et l'étiquette, son nom.

Les variables sont utilisées afin de sauvegarder temporairement des valeurs telles que des nombres, des chaînes de caractères (string), des booléens ou des tableaux (array).

En PHP, la déclaration se fait automatiquement lors de la première affectation au moyen du signe = (variable = valeur;).

C'est l'endroit où la variable a été déclarée qui détermine son accessibilité. Une variable déclarée à l'intérieur d'un bloc d'instructions (dans une fonction ou une boucle par exemple) aura une portée limitée à ce seul bloc d'instructions. On parle dans ce cas de variable locale. Une variable déclarée en dehors de ces blocs est appelée variable globale et est accessible de partout.

Il est toutefois bien évidemment obligatoire de nommer les variables. Les noms doivent respecter certaines règles :- Ils doivent commencer par le caractère $ suivi d'une lettre ou du caractère _- A l'exception des deux premiers caractères, les noms ne peuvent contenir que des lettres, des chiffres et le caractère _

Autre point important à savoir est que PHP est un langage peu typé. Cela signifie qu'une variable peut contenir n'importe quel type de données (un nombre, une string, etc.) et qu'elle peut changer de type au cours de son existence. En fait, les variables PHP ont un type dynamique. Cela signifie que PHP convertit le type de ses variables en fonction de leur contenu et usage.

16.05.23 PHP - 4


La commande utilisée pour attribuer une première valeur (= initialiser) ou pour modifier une valeur existante est la même, elle est représentée par le symbole d'affectation =.

5. ETUDE DES NOMBRES

A. ETUDE BASIQUE DES NOMBRES

Les variables du type nombre se distinguent des String par :- Leur syntaxe : on ne met jamais de guillemets pour les délimiter.- Leur rôle : elles servent essentiellement dans des calculs.- Les opérateurs et fonctions liés.

Avant d'aller plus loin, notons bien que le séparateur de décimales est un point et pas une virgule en PHP.

Les opérateurs de base bien connus sont l'addition +, la soustraction -, la multiplication * et la division / ; auxquels s'ajoute l'opérateur modulo % qui renvoie comme résultat le reste de la division (ex.: 14%3 donne 2). Tous ces opérateurs respectent les priorités mathématiques classiques → () ; * / % ; + -.

Cela n'a pas l'air trop compliqué mais un test étant plus concret que toute cette théorie, vérifions-le en testant ce petit programme.

A ceux-là s'ajoutent les opérateurs moins classiques en mathématique mais néanmoins fort répandus en informatique :

- L'incrémentation ++ : ex.: $cpt++ → si $cpt valait 3, il vaut 4 à présent.- La décrémentation -- : ex.: $cpt-- → si $cpt valait 3, il vaut 2 à présent.

Ils sont effectivement fort utilisés car cela fait plus professionnel mais, attention, encore faut-il savoir les utiliser correctement ! Etudiez l'exemple suivant afin de comprendre les résultats obtenus.

16.05.23 PHP - 5


Constatations :- Il n'est pas nécessaire d'écrire $x = $x++; pour que la valeur de $x soit

changée. Le simple fait d'écrire ++ à côté de son nom suffit.- Lorsqu'on écrit $x = ++$y; le système incrémente d'abord $y, puis assigne

la nouvelle valeur de $y à $x.Lorsqu'on écrit $x = $y++; le système assigne d'abord la valeur de $y à $x, puis incrémente la valeur de $y.Il faut donc faire très attention quand on utilise ce genre d'écriture !

A titre d'information, il existe aussi des raccourcis d'écriture, mais je déconseille leur utilisation car le programme perd en lisibilité :

- $x += $y est équivalent à $x = $x + $y- $x -= $y est équivalent à $x = $x - $y- $x *= $y est équivalent à $x = $x * $y- $x /= $y est équivalent à $x = $x / $y- $x %= $y est équivalent à $x = $x % $y

B. INFORMATIONS SUPPLÉMENTAIRES SUR LES NOMBRES

En informatique, il existe deux grandes catégories de nombres : les entiers (int) et les réels (float = avec décimales). PHP traite indifféremment les deux catégories.

Il existe aussi un grand nombre de fonctions disponibles (en fonction de la version PHP présente sur votre serveur). En voici quelques unes :

- abs(param1) retourne la valeur absolue du nombre passé en paramètre 1.

- is_numeric(param1) retourne true si la valeur passée en paramètre 1 est numérique ou false dans le cas contraire.

- max(param1,...,paramX) retourne le plus grand nombre des valeurs passées en paramètres.

- min(param1,...,paramX) retourne le plus petit nombre des valeurs passées en paramètres.

- pi() retourne la valeur de pi (→ 3.1415926535898). Notons que l'on peut aussi utiliser la constante M_PI à la place de la fonction.

- pow(param1,param2) retourne la valeur param1 élevée à la puissance param2.

- mt_rand(param1,param2) retourne un nombre entier positif aléatoire. Si les paramètres sont précisés, le nombre aléatoire sera compris entre les deux valeurs données incluses.

- round(param1,param2) retourne la valeur param1 arrondie. Si la valeur param2 est présente, elle indique le nombre de décimales à conserver. Dans le cas contraire, l'arrondi s'effectuera sur l'unité.Notons que param2 peut être négatif. Dans ce cas, la fonction arrondira à la dizaine, centaine, etc. (ex.: -3 → arrondit sur les milliers).

- sqrt(param1) retourne la racine carrée du nombre passé en paramètre.

16.05.23 PHP - 6


6. ETUDE DES STRING

A. ETUDE BASIQUE DES STRING

Une variable du type string contient une suite de caractères. Elle sera délimitée par des guillemets ou des apostrophes.

Le cas échéant, on préfixera un guillemet ou une apostrophe avec le caractère \ lorsqu'on souhaitera traiter le caractère préfixé comme un caractère normal et non comme un marqueur de début ou de fin de chaîne.

Attention, en PHP, il existe une grande différence entre les marqueurs " et ' :

Dans cet exemple, on constate que l'on peut mettre le nom d'une variable dans une chaîne de caractères. Si celle-ci est encadrée de guillemets, il sera substitué par le contenu de la variable (= interpolation). Par contre, si elle est encadrée d'apostrophes, le nom est conservé tel quel dans la chaîne.→ Il est conseillé d'utiliser les apostrophes et d'utiliser quand c'est

nécessaire l'opérateur de concaténation (voir ci-dessous).

En PHP, l'opérateur à utiliser pour concaténer 2 strings est le point. Notons que sa forme raccourcie .= existe aussi.

16.05.23 PHP - 7


B. INFORMATIONS SUPPLÉMENTAIRES SUR LES STRING

Il existe aussi un grand nombre de fonctions disponibles (en fonction de la version PHP présente sur votre serveur). En voici déjà quelques unes :

- number_format(nombre,nbrDec,separDec,separMil) retourne la valeur passée en paramètre 1 (= nombre) formatée en fonction des autres paramètres :- nbrDec : Nombre de décimales à afficher (Rem.: PHP arrondit)- separDec : Séparateur de décimales (par défaut .)- separMil : Séparateur des milliers (par défaut ,)Rem.:Le premier paramètre est obligatoire.Si le troisième ou quatrième paramètre est présent, tous les paramètres sont obligatoires.

- str_repeat(string,nbr) retourne une chaîne de caractères dont le contenu est égal à la string donnée en paramètre 1 répétée le nombre de fois demandé via le paramètre 2 qui doit être un nombre entier positif.

- str_replace(rech,rempl,string,nbre) retourne une string correspondant à la string passée en paramètre 3 dont le contenu a été modifié de la manière suivante : chaque occurrence de la valeur rech trouvée au sein de la string a été remplacée par la valeur rempl. Si une variable a été spécifiée au niveau du paramètre 4, elle contiendra le nombre de remplacements effectués.Attention, cette fonction est "case-sensitive".

- strlen(string) retourne la longueur de la string passée en paramètre.

- strpos(string,rech,posDeb) retourne la position de la valeur de rech dans la string passée en paramètre 1. Si le paramètre posDeb est présent, il indique la position à partir de laquelle la recherche doit commencer.Attention, si la valeur n'a pas été trouvée, la fonction retourne la valeur

16.05.23 PHP - 8


booléenne false.Attention, cette fonction est "case-sensitive".

- strtolower(string) retourne le contenu de la string converti en minuscules.

- strtoupper(string) retourne le contenu de la string converti en majuscules.

- substr(string,posDeb,lgr) retourne une chaîne de caractères dont le contenu est égal à une partie de la string passée en paramètre 1. Cette chaîne correspond à la partie commençant à la position posDeb sur une longueur lgr (ou jusqu'à la fin de la string si la longueur n'est pas précisée).

- substr_count(string,rech,posDeb,lgr) retourne le nombre d'occurrences de la chaîne de caractères rech dans la chaîne de caractères string. Il est possible de limiter la zone de recherche au moyen des paramètres optionnels posDeb (position de départ) et lgr (longueur).Attention, cette fonction est "case-sensitive".

- trim(string) retourne la string passée en paramètre 1 en ayant supprimé les espaces en début et en fin de chaîne.

Attention, regardons bien la différence entre l'affichage et la source HTML à l'origine de celui-ci. N'oublions pas que l'HTML remplace toujours une succession d'espaces par un seul...

16.05.23 PHP - 9


7. CONVERSION STRING - NOMBRES La conversion d'un nombre en string, et inversement, est faite automatiquement par PHP en fonction des commandes et opérateurs utilisés.

Regardons l'exemple suivant :

- Dans la première commande, PHP voit qu'il doit effectuer une addition (car opérateur +). Il transforme donc les deux éléments en nombres → 10 + 5 = 15.

- Dans la deuxième commande, PHP additionne simplement 2 nombres 10.5 et 2. Il affiche donc la somme (12.5).

- Dans la troisième commande, PHP voit qu'il doit, dans un premier temps, concaténer 2 chaînes de caractères (car opérateur .). Il transforme donc les 2 éléments en string → '10' . '5' = '105'. Ensuite, il voit qu'il doit effectuer une addition (car opérateur +). Il transforme donc le premier élément en nombre (le deuxième est déjà un nombre) → 105 + 2 = 107.

Toutefois, si vous avez besoin d'effectuer une conversion manuellement, une des techniques consiste à utiliser les fonctions intval(...), floatval(...) ou strval(...).

Exercice :


8. LES FONCTIONS Conseil : Etudiez le chapitre "Les sous-algorithmes" du cours "Les Algorithmes"

A. INTRODUCTION

Une fonction permet d'associer un nom à une série d'instructions que l'on souhaite exécuter à plusieurs reprises. Il suffira d'écrire son nom pour exécuter toutes les instructions qui y sont liées. Outre le fait que cela permet de ne les écrire qu'une seule fois, cette façon de travailler permet également de rendre le code du programme beaucoup plus lisible et facile à modifier.

En informatique, on parlera de la déclaration (= définition, création) et de l'appel (= exécution) d'une fonction. Lorsque l'on appelle certaines fonctions, il faut leur fournir des arguments ou paramètres (= données ou variables encodées au sein des parenthèses qui suivent le nom de la fonction) afin qu'elles puissent effectuer correctement leurs opérations. Et, enfin, certaines fonctions renvoient une valeur.

Attention, petite précision très importante. Il faut obligatoirement taper des parenthèses après le nom de chaque fonction que ce soit lors de sa déclaration ou lors d'un appel (même s'il n'y a aucun argument).

16.05.23 PHP - 10


B. DÉCLARATION

Une fonction est composée de plusieurs éléments :1) Le mot function2) Le nom de la fonction3) Entre parenthèses, les éventuels paramètres séparés par des virgules.

Attention, les parenthèses doivent être présentes même s'il n'y a aucun paramètre.

4) Entre accolades, les instructions de la fonction.

C. APPEL

Pour appeler une fonction, il suffit de taper son nom suivi des parenthèses. Entre celles-ci, on tapera la valeur des paramètres éventuels.

D. LES PARAMÈTRES

Si les paramètres peuvent être définis et utilisés comme dans beaucoup de langages, il existe néanmoins quelques particularités qui peuvent être très utiles en PHP.

Tout d'abord, il est possible de définir une valeur par défaut pour différents paramètres dans la déclaration de la fonction. Ceux-ci prendront ces valeurs lorsqu'ils sont absents de l'instruction appelante. Attention, pour que PHP accepte de traiter cet appel, il faut que les paramètres absents soient les derniers de la fonction.

Une autre particularité liée aux paramètres en PHP consiste à les faire précéder du caractère &. Ce préfixe indique que le paramètre est une variable passée par

16.05.23 PHP - 11


adresse (ou référence). Cela signifie que si une instruction modifie le contenu de la variable au sein de la fonction, la variable d'origine (utilisée lors de l'appel) est directement modifiée. En fait, dans ce cas, on passe un pointeur qui indique l'adresse mémoire de la variable, ce qui permet de modifier sa valeur.

E. RENVOI D'UNE VALEUR

Supposons que l'on souhaite qu'une fonction reçoive en paramètre un montant en euros et le renvoie converti en francs belges.

Comment faire ?

Pour renvoyer une valeur, il suffit d'utiliser la commande return suivie de la valeur à retourner à la fin de la fonction.

Facile, non ? Et dans quelques chapitres, vous pourrez même régler le problème du nombre de décimales...

Notons encore que lorsqu'une fonction retourne une valeur, son exécution se termine directement. Dans certains cas, cette fonctionnalité sera fort utile lorsque l'on voudra par exemple arrêter l'exécution d'une fonction car certains paramètres sont incorrects, etc. Il suffira alors de taper l'instruction return;

Notons encore que si l'on souhaite renvoyer plusieurs valeurs, il est possible :- de transmettre une array (voir plus loin) à la place d'une simple variable ;

16.05.23 PHP - 12


- d'utiliser les paramètres par adresse ;- d'utiliser les variables globales (voir ci-après).

F. VARIABLES LOCALES OU GLOBALES ?

Qu'est-ce que c'est que ça ? En fait, outre leur type, les variables sont également caractérisées par leur portée qui peut être locale ou globale.

Les variables telles que les paramètres et les variables définies au sein d'une fonction sont dites locales car on ne peut les utiliser que dans celle-ci. Dès que l'on quitte la fonction, ces valeurs sont perdues définitivement.

Il est possible de définir des variables, dites globales, qui sont accessibles à partir de n'importe quel endroit du programme : on les déclare en dehors de toute fonction.

Toutefois, en PHP, on remarquera que si l'on manipule une variable (que l'on pensait être globale car définie hors de la fonction) dans une fonction, cette variable retrouve sa valeur dès que l'on quitte la fonction.

Pourquoi ? Tout simplement car PHP considère que la première utilisation de la variable dans la fonction est en fait une déclaration d'une variable locale. Peu importe si cette variable existe déjà au niveau global !

Si l'on veut signifier à PHP qu'il doit utiliser la variable globale existante et donc ne pas créer de variable locale, il faut déclarer la variable au début de la fonction en mettant le mot-clé global devant le nom de la variable.

Notons qu'il existe aussi des variables locales un peu particulières. On leur attribue le niveau static. Celui-ci permet de définir une variable locale à la fonction mais qui persiste durant toute l'exécution du script.

Attention, bien que l'utilisation de variables globales soit souvent appréciée par les programmeurs débutants, il est toutefois conseillé d'utiliser les variables locales dès que c'est possible.

Exercice :


16.05.23 PHP - 13


9. LES CONDITIONS Conseil : Etudiez le chapitre "Les alternatives" du cours "Les Algorithmes"

Cette section est dédicacée à l'apprentissage de tout ce qui concerne les outils de test. Ceux-ci sont fort utiles en programmation. Ils permettent de vérifier la validité des valeurs encodées par l'internaute, de sélectionner le traitement à effectuer en fonction de certaines valeurs, etc.

A. LES VARIABLES BOOLÉENNES

Jusqu'à présent, vous avez utilisé les variables numériques et les String. Il en existe un troisième type : les variables booléennes. Ces dernières ne peuvent contenir que deux valeurs : true (= vrai) ou false (= faux).

Ces variables sont fort utilisées lors des comparaisons. En effet, le résultat d'une comparaison sera toujours une valeur booléenne. Lorsque l'on compare des valeurs, on effectue en fait un test sur celles-ci en stipulant la condition à vérifier (ex.: La valeur encodée par l'internaute est-elle correcte ?). Le résultat du test sera toujours true si la condition stipulée est respectée, ou false dans le cas contraire.

Le résultat du test pourra soit être utilisé directement dans une instruction, soit sauvé dans une variable booléenne afin de pouvoir utiliser ce résultat à plusieurs reprises sans devoir refaire le test.

B. LES OPÉRATEURS DE COMPARAISON

Vouloir effectuer un test signifie vouloir comparer deux valeurs. Pour cela, on va utiliser ce que l'on appelle les opérateurs de comparaison :

a == b Si les valeurs a et b sont égales, le résultat sera true ; dans le cas contraire, il sera false.Attention, dans les tests d'égalité, on double le signe = en PHP afin de ne pas confondre cet opérateur avec le signe = qui, lui, est utilisé pour affecter une valeur à une variable !

a != b Si les valeurs a et b sont différentes, le résultat sera true ; dans le cas contraire, il sera false.

a < b Si a est plus petit que b, le résultat sera true ; dans le cas contraire, il sera false.

a > b Si a est plus grand que b, le résultat sera true ; dans le cas contraire, il sera false.

a <= b Si a est plus petit ou égal à b, le résultat sera true ; dans le cas contraire, il sera false.

a >= b Si a est plus grand ou égal à b, le résultat sera true ; dans le cas contraire, il sera false.

Attention, vous risquez d'être surpris par les résultats lorsque vous comparez des String. En effet, "AAA" n'est pas égal à "aaa" car les majuscules et les minuscules n'ont pas la même valeur ! De même, si vous testez "111" < "22", vous aurez true pour résultat car le premier caractère de "111" est plus petit que le premier caractère de "22" ; alors que le test 111 < 22 vous donnera false car 111 est plus grand que 22.

16.05.23 PHP - 14


Rem.: Les parenthèses autour d'un test ne sont pas obligatoires, mais elles sont néanmoins souvent utilisées pour améliorer la lisibilité des programmes.

C. LES OPÉRATEURS LOGIQUES

Il est parfois nécessaire d'écrire des tests plus complexes qui combinent plusieurs conditions. Dans ce cas, on utilisera également les opérateurs logiques :

&& Est le symbole du "et". Lorsque l'on groupe deux conditions avec ce symbole, il faut que les deux conditions soient à true pour que le résultat final le soit aussi ; dans tous les autres cas, le résultat final sera false.

|| Est le symbole du "ou". Lorsque l'on groupe deux conditions avec ce symbole, il suffit qu'au moins une des deux conditions soit à true pour que le résultat final le soit aussi. Le résultat final sera false uniquement si les deux conditions le sont aussi.

! Est le symbole de la négation. En fait, il inverse le résultat d'un test. True devient false, et inversement. Il s'écrit devant la condition (ex.: ).

On peut bien évidemment faire des tests complexes combinant plus de deux conditions. Dans ce cas, il est vivement conseillé d'utiliser les parenthèses pour indiquer dans quel ordre les conditions doivent être vérifiées. Dans le cas contraire, les && sont prioritaires aux ||.

Exemple :

Pour participer au concours il faut avoir moins de 21 ans et habiter Anderlecht

D. LA COMMANDE IF

Si les variables booléennes sont utiles pour sauver le résultat d'un test, elles ne peuvent malheureusement pas indiquer au système les instructions à exécuter en fonction de leur valeur. Pour ce faire, il faut utiliser des commandes de test telles que if ou switch. Commençons par étudier l'instruction if.

La commande respecte la syntaxe générale suivante :

16.05.23 PHP - 15


En voici un exemple :

Mais voyons cela d'un peu plus près...

Tout d'abord, la première partie if (condition) est obligatoire. Elle reprend le test à effectuer. Si le résultat est true, le système exécutera l'instruction (ou le bloc d'instructions délimité par les accolades) suivante. Dans le cas contraire, le système effectuera l'instruction (ou le bloc d'instructions) suivant le mot else. La partie "else" n'étant pas obligatoire, le système n'effectuera aucune instruction dans le cas du false si cette partie n'a pas été encodée.

Notons que la partie condition peut être remplacée par une variable booléenne.

Une variante de cette instruction permet de remplacer les mots-clés else et if (dans des if imbriqués) en un seul mot-clé elseif :

Dans certains cas, vous aurez peut-être même envie d'écrire les instructions de la manière suivante afin d'éviter la répétition des commandes echo, les problèmes liés aux apostrophes, etc.

Cette manière de faire mélange le PHP et l'HTML.

16.05.23 PHP - 16


E. LES CONDITIONS TERNAIRES

Les conditions ternaires sont des conditions condensées ayant une syntaxe un peu particulière. Le but de ce chapitre n'est pas de vous apprendre à les utiliser mais simplement de vous apprendre à les lire au cas où vous les rencontriez un jour.

Une condition ternaire est une condition qui fait deux choses en une ligne :- Elle teste la valeur d'une variable.- En fonction du résultat du test, elle affecte une des deux valeurs spécifiées à une (autre) variable.

Dans l'exemple ci-dessus, la condition testée est $age >= 18. Si la condition est respectée, la valeur indiquée après le point d'interrogation (ici true) sera affectée à la variable $majeur. Dans le cas contraire, c'est la valeur qui suit le symbole "deux points" (ici false) qui sera affectée à $majeur.

F. LA COMMANDE SWITCH

Si l'on a besoin de tester plusieurs valeurs, on peut soit utiliser plusieurs if imbriqués, soit utiliser l'instruction switch.

En voici la syntaxe, un exemple et les explications :

La première ligne du test switch(variable) indique la variable dont on va tester le contenu.

Les accolades indiquent le début et la fin de l'instruction.

Pour chaque valeur à tester, on met : l'instruction case suivie de la valeur en question le caractère : les instructions à effectuer pour cette valeur la commande break pour terminer le traitement de cette valeur. Si

l'instruction break n'est pas mise, le traitement de la valeur continue.

16.05.23 PHP - 17


On termine le switch par la commande default qui permet d'effectuer un traitement par défaut pour toutes les valeurs non citées précédemment.

Exercice :


10. LES BOUCLES Conseil : Etudiez le chapitre "Les répétitives" du cours "Les Algorithmes"

Les boucles sont des instructions spéciales qui permettent de dire à PHP qu'il doit exécuter plusieurs fois un certain nombre d'opérations (exemples : afficher les nombres de 1 à 100, afficher une table de multiplication, etc.).

A. LA BOUCLE FOR

La commande for est utilisée pour effectuer une boucle lorsque l'on connaît dès le départ le nombre de fois qu'elle devra être exécutée.

La syntaxe est

Rem.: Les {} ne sont obligatoires que s'il y a plus d'une instruction dans la boucle ; mais il est néanmoins conseillé de les mettre dans tous les cas.

Exemple : Afficher le carré des nombres de 1 à 10 :

Explications :

Les instructions se trouvant dans la boucle sont exécutées pour toutes les valeurs d'un compteur.

Avant la première itération de la boucle, ce compteur est initialisé.

Ensuite, avant chaque itération, la commande for vérifie si la condition est respectée. Si c'est le cas, les instructions de la boucle sont exécutées et, ensuite, le compteur est incrémenté tel que c'est demandé au niveau de la troisième partie de la commande for. La boucle s'arrête dès que la condition n'est plus respectée.

Attention, on ne peut pas modifier la valeur du compteur de la boucle autrement que par la partie de la commande for dédicacée sans risquer de perturber le fonctionnement correct de la boucle.

Attention, comme pour toutes les boucles, il est impératif d'écrire une condition qui ne sera plus respectée à un certain moment, sans quoi vous aurez une boucle infinie et votre programme ne s'arrêtera jamais.

B. LA BOUCLE WHILE

La commande while est utilisée pour effectuer une boucle lorsque l'on ne connaît pas dès le départ le nombre de fois qu'elle devra être exécutée.

16.05.23 PHP - 18


La syntaxe est

Exemple : Compter le nombre d'échecs d'un élève avant son premier test réussi. (Les points en % sont stockés dans un tableau -> voir suite du cours)

Explications :

Les instructions se trouvant dans la boucle sont exécutées tant que la condition est respectée.

Remarquez que si la condition n'est pas respectée dès le départ, la boucle ne sera jamais exécutée.

C. LA BOUCLE DO ... WHILE

La commande do ... while est utilisée pour effectuer une boucle lorsque l'on ne connaît pas dès le départ le nombre de fois qu'elle devra être exécutée. La différence de cette commande par rapport à la commande while est le fait que cette commande-ci est exécutée au moins une fois. En effet, le test de la condition est effectué après le traitement de chaque itération et non avant.

La syntaxe est

Rem.: Il ne faut pas oublier le ; à la fin de la commande.

Explications :

On exécute une première fois la boucle, puis elle est répétée tant que la condition est respectée.

D. LES INSTRUCTIONS DE CONTRÔLE CONTINUE ET BREAK

Lorsque dans une boucle, on cherche une information à chaque itération, il arrive fréquemment que l'on contrôle celle-ci et que l'on ne veuille exécuter le reste de la boucle que si la donnée est correcte. Si ce n'est pas le cas, on souhaite passer à l'itération suivante sans exécuter les instructions restantes. Pour ce faire, il suffira d'utiliser l'instruction continue. Il arrive également que l'on souhaite arrêter l'exécution de la boucle soudainement (en cas d'erreur empêchant la bonne exécution, etc.). Pour cela, on utilisera l'instruction break.

Attention, même si ces instructions sont pratiques, il ne faut pas en abuser car elles ne font pas partie de la programmation dite "propre". Une boucle est faite

16.05.23 PHP - 19


pour être exécutée complètement et s'arrêter lorsque la condition spécifiée n'est pas respectée.

Exemple : Traitement spécifique pour chaque nombre pair d'un tableau :

Exercice :


11. LES TABLEAUX Conseil : Etudiez le chapitre "Les tableaux" du cours "Les Algorithmes"

Un tableau est un ensemble de variables ayant le même nom mais différenciées les unes des autres par un indice. Cet indice peut être soit numérique, soit alphanumérique ; on parle respectivement de tableaux numérotés ou associatifs.

Les tableaux (numérotés) sont donc, schématiquement, composés de cases (ou cellules) numérotées séquentiellement. La première cellule portant le numéro ... 0! Et oui, comme dans beaucoup de langages informatiques, on commence à compter à partir de 0. La cellule 2 porte donc le numéro 1, et ainsi de suite. On peut donc facilement accéder (et donc lire ou modifier) une cellule à partir de son numéro.

Cette façon de les nommer est très intéressante au niveau de la programmation. En effet, grâce à cela, on va pouvoir utiliser une boucle indicée pour traiter toutes les variables au lieu de devoir écrire le traitement complet pour chaque variable séparément (ex.: Encodage des points d'un élève).

A. LES TABLEAUX NUMÉROTÉS : CRÉATION ET INITIALISATION

Il existe plusieurs manières pour initialiser, et donc créer, un tableau.

En voici 3 :

16.05.23 PHP - 20


La première méthode consiste donc à utiliser la fonction array(). Chaque paramètre étant un élément du tableau. Le premier étant indicé à la position 0.

La deuxième méthode consiste à initialiser chaque élément du tableau l'un après l'autre en indiquant à chaque affectation l'indice de l'élément à définir.

La troisième méthode consiste à initialiser chaque élément du tableau l'un après l'autre sans indiquer l'indice de l'élément à définir. Dans ce cas, PHP ajoutera toujours cet élément à la fin du tableau.

En fait, par ces commandes, le système va créer un tableau en mémoire et mettre son adresse dans la variable associée. En effet, un tableau étant trop grand, il est impossible de le mettre dans une variable ; c'est pourquoi on met un simple pointeur dans celle-ci. Grâce à cette variable, le système pourra accéder facilement au tableau.

Attention, cela veut aussi dire que si l'on copie la variable dans une autre, on accédera au même tableau à partir de chaque variable. Et donc, une modification du tableau effectuée à partir d'une variable se verra aussi lorsque l'on accédera au tableau à partir de l'autre variable.

B. LES TABLEAUX NUMÉROTÉS : LECTURE

L'accès à une valeur d'un tableau est relativement simple. Il suffit de taper le nom de la variable liée au tableau, suivi de l'indice correspondant à la valeur souhaitée entre crochets. L'indice peut être un nombre ou une variable.

La taille (ou nombre d'éléments) du tableau est obtenue au moyen des fonctions count(array) ou sizeof(array).

Exemple : Afficher le contenu d'un tableau

Pour rappel, la variable $i sera remplacée par son contenu car elle est reprise dans une string délimitée par des ".

C. LES TABLEAUX NUMÉROTÉS : MODIFICATION

Pour modifier la valeur d'un élément du tableau, on procède de la même manière que pour une simple variable, il suffit de lui affecter une nouvelle valeur.

La fonction array_splice() permet :

16.05.23 PHP - 21


- d'insérer des nouvelles valeurs à un tableau à la position souhaitée- de supprimer des valeurs du tableau et de les "retourner"

La syntaxe est : array_splice(array1, indice, lgr, array2)où : - array1 est le nom du tableau à modifier. - indice représente la position des éléments à supprimer ou la position à partir de laquelle on insère les nouveaux éléments au tableau (obligatoire). Si l'indice est un nombre négatif, PHP comptera les éléments à partir de la fin du tableau. - lgr représente le nombre d'éléments à supprimer du tableau. Si l'on ne veut pas en supprimer, on mettra 0. Si ce paramètre n'est pas encodé, PHP effacera la fin du tableau. - array2 (optionnel) reprend les nouveaux éléments à ajouter au tableau. S'il n'y a qu'un élément à ajouter, on peut ne mettre qu'une string.

La fonction array_splice() modifie directement le contenu du tableau. Il n'est donc pas nécessaire d'affecter le résultat (donc pas $voitures = array_splice(...)).

D. LES TABLEAUX ASSOCIATIFS

Un tableau associatif est aussi une variable du type array ; mais, contrairement aux tableaux numérotés, l'indice utilisé est du type alphanumérique.

Si un tableau numéroté est généralement utilisé pour contenir une liste de données du même type ; les tableaux associatifs, quant à eux, sont plutôt utilisés pour contenir une liste de données de différents types mais ayant un lien entre elles. En d'autres mots, un tableau associatif est généralement utilisé pour structurer certaines données ayant un lien entre elles.

Supposons que l'on veuille créer un tableau reprenant toutes les données "signalétique" d'un client (son nom, son prénom, son adresse, etc.). Pour ce faire, on peut bien entendu utiliser un tableau numéroté. Mais dans ce cas, il faut retenir l'indice numérique correspondant à chaque donnée... Pas toujours facile à utiliser ! Il serait plus facile si l'on pouvait désigner chaque élément par un indice "étiquette". Ce que permettent justement les tableaux associatifs !

Il existe plusieurs manières pour initialiser, et donc créer, un tableau associatif.

La première méthode consiste à utiliser la fonction array() vue précédemment. Toutefois, dans ce cas, on doit associer une étiquette (= clé ou key) à chaque élément du tableau. Cette association se fait grâce à l'opérateur =>.

La deuxième méthode consiste à initialiser chaque élément du tableau l'un après l'autre en indiquant à chaque affectation l'étiquette de l'élément à définir.

16.05.23 PHP - 22


Ces deux exemples reviennent en fait à créer un tableau semblable à celui-ci :

Clé ValeurNom DupontPrenom PaulineRue MarienborreNumero 51Boite 10CodePost 1120Ville Bruxelles

Pour lire le contenu d'un élément du tableau, on tape le nom de la variable liée au tableau, suivi de l'étiquette de l'élément entre crochets.

Pour en modifier un élément, il suffit de lui affecter une nouvelle valeur.

Un tableau associatif est souvent combiné à un tableau numéroté pour former un tableau à deux dimensions. Chaque élément du tableau numéroté contient alors un tableau associatif. Dans l'exemple suivant, on a un tableau des élèves. Chaque élément (c'est-à-dire chaque élève) est divisé en 2 champs accessibles via leur étiquette.

Bien que nous n'ayons pas encore étudié les commandes nécessaires, j'ai repris dans cet exemple deux méthodes d'affichage du contenu d'une table à deux dimensions. Notons que la deuxième méthode est souvent utilisée lors de la correction d'un programme, mais n'est pas très présentable pour un internaute.

E. LA BOUCLE FOREACH

Quoi ?! Encore une boucle ! Est-ce bien utile ? Oh oui ! Si les trois boucles étudiées précédemment fonctionnent très bien avec les tableaux numérotés, elles ne conviennent pas du tout aux tableaux associatifs ! C'est là qu'intervient la nouvelle boucle.

La boucle foreach est une boucle spécialement conçue pour accéder à tous les

16.05.23 PHP - 23


éléments d'un tableau (qu'il soit numéroté ou associatif) les uns après les autres. Lors de l'accès à un élément, elle va copier son contenu dans une variable temporaire. Le cas échéant, il est possible de demander également la copie de la clé dans une autre variable temporaire.

La syntaxe est

Exemple : Affichage des données d'un client

Explications :

La boucle commence toujours à partir du premier élément et s'arrête lorsque tous les éléments ont été parcourus.

Le passage d'un élément à l'autre se fait automatiquement à chaque itération.

La clé et la valeur de l'élément accédé sont stockées dans les variables temporaires uniquement le temps de l'itération.

Les variables temporaires ne sont que des copies des données du tableau. Cela veut dire que si l'on modifie le contenu de ces variables, les données du tableau, quant à elles, ne sont pas modifiées.

F. LES FONCTIONS DE RECHERCHE SPÉCIALES

Il arrive fréquemment que l'on souhaite retrouver une donnée dans un tableau sans avoir envie d'écrire soi-même une boucle pour cela. Cela tombe bien, PHP

16.05.23 PHP - 24


l'a fait à notre place !

Cas 1 :

La fonction array_key_exists(clé, array) vérifie si la clé transmise via le paramètre 1 existe dans le tableau précisé via le paramètre 2. Si c'est le cas, la fonction renvoie la valeur true ; dans le cas contraire, elle renvoie false.

Cas 2 :

La fonction in_array(valeur, array) vérifie si la valeur transmise via le paramètre 1 existe au niveau des données dans le tableau précisé via le paramètre 2. Si c'est le cas, la fonction renvoie la valeur true ; dans le cas contraire, elle renvoie false.

Cette fonction est utilisée dans les deux types de tableaux.

Cas 3 :

La fonction array_search(valeur, array) recherche la valeur transmise via le paramètre 1 au niveau des données dans le tableau précisé via le paramètre 2. Si elle est trouvée, la fonction renvoie l'indice (numéro ou clé) correspondant à l'élément du tableau ; dans le cas contraire, elle renvoie false.

16.05.23 PHP - 25


G. DIVERS

Il existe beaucoup d'autres fonctions liées aux tableaux. En voici quelques unes qui pourraient être utiles un jour.

- array_count_values(array) retourne un tableau associatif dont les clés correspondent aux éléments de l'array passée en paramètre et les éléments correspondent au nombre d'occurrences de chaque valeur du tableau d'origine.

- array_pop(array) supprime le dernier élément du tableau passé en paramètre et retourne sa valeur.

- array_shift(array) supprime le premier élément du tableau passé en paramètre et retourne sa valeur. Si l'array est un tableau numéroté, tous les indices des autres éléments sont adaptés (tous décrémentés de 1).

- compact(nomVar1,...,nomVarX) retourne un tableau associatif créé à partir des paramètres. Chaque paramètre est une string dont la valeur correspond au nom (sans le $) d'une variable. Ces strings deviennent les clés de l'array et les contenus des variables correspondantes deviennent les éléments liés.Si une des strings ne correspond pas à une variable, PHP fera comme si ce paramètre n'existe pas.

- Les 4 fonctions suivantes permettent de trier un tableau sur la valeur de leurs éléments. Leurs différences se situent aux niveaux de l'ordre de tri (ascendant ou descendant) et de la conservation ou non de la clé initiale des éléments (Rem.: En général, on trie des tableaux numérotés...).- sort(array) trie dans l'ordre ascendant et recalcule les indices;- rsort(array) trie dans l'ordre descendant et recalcule les indices;- asort(array) trie dans l'ordre ascendant et garde les anciens indices;- arsort(array) trie dans l'ordre descendant et garde les anciens indices.

16.05.23 PHP - 26


- join(separ,array) ou implode(separ,array) renvoie une string composée de tous les éléments du tableau spécifié en paramètre 2 séparés soit par le séparateur donné en paramètre 1, soit par un séparateur "vide".

- explode(separ,string) renvoie un tableau dont les éléments ont été créés à partir de la string passée en paramètre 2. Pour ce faire, PHP décompose la string en fonction du séparateur spécifié en paramètre 1.

Exercice :


16.05.23 PHP - 27


12. LES COMMANDES DU TYPE "INCLUDE" Lorsque l'on crée un site internet, il arrive très fréquemment que l'on doive écrire le même code dans plusieurs fichiers sources (ex.: en-tête, bas d'écran, menus, etc.). Cela n'est ni très agréable, ni très pratique lorsque l'on doit le modifier (puisqu'on doit le faire dans tous les fichiers).

Un des avantages de PHP est justement de permettre l'écriture unique de morceaux de code et de les insérer lors de l'exécution via une commande dans un autre fichier source. Cette fonctionnalité permet donc de n'avoir qu'une version du code. Toute modification faite dans celui-ci est donc automatiquement propagée sur toutes les pages l'incluant.

Attention, comme vous pourrez le voir dans les exemples et exercices, ces bouts de codes ne sont pas nécessairement des fonctions. Par ailleurs, il arrive même souvent que ceux-ci contiennent principalement des balises HTML.

Il existe quatre commandes de ce type :- include(nomFichier)- require(nomFichier)- include_once(nomFichier)- require_once(nomFichier)

La différence entre les commandes include et require se situe au niveau du traitement de l'erreur "fichier introuvable". Lorsqu'une commande include ne trouve pas le fichier précisé, elle affiche un message d'avertissement, mais le reste de la page web est affiché. Lorsqu'une commande require ne trouve pas le fichier, elle affiche un message d'erreur et arrête tout traitement du reste de la page web.

Les commandes suffixées _once indiquent à PHP qu'il ne doit inclure qu'une seule fois le fichier indiqué. Quel en est l'intérêt ? Cela évite d'avoir des erreurs qui empêchent la génération de la page. Une des erreurs typiques est le fait d'inclure plusieurs fois un même fichier qui contient une fonction. Cette fonction serait donc présente plusieurs fois sur la page. Or, PHP interdit d'avoir plusieurs fonctions ayant le même nom... Evidemment, cela n'arrive pas souvent si l'on fait attention et que les fichiers insérés ne contiennent pas eux-mêmes des includes. Mais lorsque l'on insère des fichiers ayant eux-mêmes des includes, il arrive vite qu'un même fichier soit inclus plusieurs fois. Attention, le problème n'est pas d'insérer deux fois le même fichier, mais d'avoir deux fonctions avec un même nom.J'attire l'attention sur le fait que c'est le fichier entier qui n'est pas inclus en double et pas uniquement les fonctions. Ce qui veut dire que le reste du code n'est également pas inséré.

De plus, il faut faire attention aux chemins encodés dans les fichiers includes. En effet, si l'on encode une balise du type <img src="../images/img1.gif"> dans un fichier include, le système recherchera l'image en question non pas à partir du dossier dans lequel se trouve le fichier include, mais à partir du dossier du fichier qui contient l'instruction include... Ce qui complique les choses puisque l'on ne sait pas nécessairement où se trouve ce dernier puisque plusieurs fichiers de différents dossiers sont susceptibles d'insérer le fichier include. Pour éviter tout risque de ce type, on privilégiera les chemins absolus aux chemins relatifs le cas échéant.

Le nom d'un fichier include doit respecter les mêmes règles que les fichiers

16.05.23 PHP - 28


normaux. Toutefois, on remplace souvent l'extension .php par .inc.php pour rappeler au webmaster que c'est un fichier à inclure.

Attention, si l'on utilise des commandes PHP dans un fichier include, il faut y mettre les délimiteurs <?php ?>. Ceux du fichier appelant ne suffisent pas.

Exemple :

Créer le site suivant (3 écrans) en utilisant des CSS et des includes :

16.05.23 PHP - 29


Exercices :


13. TRANSMISSION DES DONNÉES Dans le chapitre réservé aux formulaires, nous avions parlé des attributs action et method de la balise form. Nous n'avions toutefois qu'effleuré le sujet en n'étudiant que la partie propre à l'envoi des données par mail. Nous allons à présent revenir sur ces notions plus en profondeur pour découvrir en fait que c'est également un moyen pour transmettre des données du client vers le serveur. Et en généralisant l'étude, nous étudierons différents systèmes de transmission de données entre les différentes pages et/ou entre le client et le serveur.

A. LA MÉTHODE GET

La première méthode consiste à utiliser l'url. Afin de comprendre le principe général avant d'étudier cette méthode en profondeur, testons l'exemple suivant :

16.05.23 PHP - 30


Dans cet exemple, on a créé un formulaire qui permet d'encoder un nom et un prénom. Lorsque l'on clique sur le bouton Envoyer, le navigateur envoie les deux champs au moyen de la méthode get. Celle-ci consiste à transmettre les données au serveur via l'url . En effet, si l'on regarde bien, on peut constater que tous les paramètres sont écrits après l'adresse habituelle de la page à afficher. Ces paramètres sont séparés de l'adresse par un point d'interrogation. Ensuite, les paramètres s'enchaînent selon la forme clé=valeur (chaque clé correspondant à l'attribut name des zones du formulaire) et sont séparés entre eux par le symbole &. La page PHP appelée, via l'attribut action du formulaire, reçoit tous les paramètres dans un tableau associatif dont le nom est $_GET ; les clés (ou indices) quant à elles sont les noms des différents paramètres.

Notons encore que dans cet exemple un simple formulaire a été utilisé, mais le webmaster aurait pu construire lui-même l'url complète et la placer directement au niveau de l'attribut href d'une balise a :

Rem.: Dans cet exemple, le caractère & a été remplacé par son code & afin derespecter les conventions W3C et donc passer leur validation HTML. Onaurait toutefois pu conserver la syntaxe & pour PHP.

Le grand avantage de cette méthode est le fait que lorsque l'internaute sauve cette url dans ses Favoris, les paramètres (ex.: langue, etc.) sont également sauvés et il ne devra plus les spécifier lors de sa prochaine visite.

Le grand inconvénient de cette méthode est le manque de discrétion. Si l'un des paramètres est un mot de passe, tout le monde le verra... De plus, il sera très facile de modifier les paramètres à partir de l'url sans aucun contrôle de l'écran d'encodage.

16.05.23 PHP - 31


Attention, il est également fortement conseillé de veiller à ce que l'url complète ne dépasse pas les 255 caractères.

B. LA MÉTHODE POST

La méthode post permet d'envoyer les paramètres sans les afficher dans l'url. Cela permet donc de diminuer les risques liés au manque de discrétion, sans éliminer d'autres risques. La vigilance reste donc de mise.

La page PHP appelée, via l'attribut action du formulaire, reçoit tous les paramètres dans un tableau associatif dont le nom est $_POST ; les clés (ou indices) quant à elles sont les noms des différents paramètres.Attention, il semblerait que l'attribut enctype ne puisse pas avoir la valeur text/plain. Si j'essaie en mettant la valeur multipart/form-data ou en supprimant l'attribut, cela fonctionne. Pourquoi ? Je ne sais pas et je n'ai pas trouvé la réponse sur internet.

Notons encore que si l'on souhaite que la page appelée fonctionne sans devoir tenir compte de la méthode d'appel, elle devra aller chercher les données dans la table $_REQUEST qui regroupe les données des tables $_GET et $_POST.

C. LES DIFFÉRENTS CHAMPS D'UN FORMULAIRE

Comme vous le savez, il est possible d'insérer dans un formulaire différents types de champs.

Construisons un formulaire reprenant un exemple de chaque type et essayons de récupérer ces données. Que constatons-nous ? Toutes les valeurs sont envoyées dans un tableau associatif, mais il y a un problème avec les cases à cocher et les listes multiples. En effet, on ne récupère que la dernière valeur sélectionnée. Pourquoi ? Parce que chaque valeur sélectionnée est associée à la même clé et donc lors de la création du tableau associatif, la dernière valeur remplace la précédente. On peut éviter ce "petit" désagrément en créant un sous-tableau de valeurs pour ce type de données.

Exemple :

16.05.23 PHP - 32


16.05.23 PHP - 33


Dans ce code, vous pouvez voir comment définir un sous-tableau au formulaire. Regardez la définition de l'attribut name="plats[]" de la balise <select> pour la liste multiple et l'attribut name="voiture[]" de la balise <input> pour les cases à cocher. Il suffit d'ajouter les crochets [] à la fin du nom.

16.05.23 PHP - 34


Ce code affiche les données récupérées sous les deux formats suivants :

Notons dans l'exemple l'utilisation des fonctions :- is_array(variable) qui permet de tester si la variable est un tableau- empty(variable) qui permet de tester si la variable est vide

D. DIVERSES REMARQUES IMPORTANTES

Lorsqu'une page PHP nécessitant certains paramètres est appelée, elle doit vérifier en premier lieu l'existence de ceux-ci. Pour ce faire, on utilisera la fonction isset(paramètre). Cette fonction renvoie true si le paramètre est présent, false dans le cas contraire.

Lorsque l'internaute devra encoder un nombre, il faudra s'assurer que cette valeur est bien présente (via isset()), qu'elle est numérique (via is_numeric()) et, le cas échéant, qu'elle est comprise entre certaines valeurs.

E. UNE PAGE PHP S'APPELANT ELLE-MÊME

Il arrive fréquemment qu'une page PHP s'appelle elle-même (ex.: des petits formulaires, etc.). Lors du premier accès à la page, celle-ci est appelée sans paramètre ; alors que par après ceux-ci lui seront fournis.

16.05.23 PHP - 35


Notre page aura une structure semblable à celle-ci :SI paramètres présents et corrects ALORS affichage partie résultats de la page SINON affichage partie accueil de la page

F. SÉCURISER SON SITE

Il faut toujours penser à sécuriser au maximum un site contre les pirates et autres petits malins.

Nous avons vu qu'il est facile pour un internaute de modifier les paramètres présents dans l'url lorsque l'on utilise la méthode de transmission get. Mais, attention, ce n'est pas parce que l'on utilise la méthode post qu'un pirate ne pourra pas nous atteindre. En effet, il peut facilement voir notre code source, puis écrire sur son site un formulaire qui se pointera directement sur notre page réceptrice. Pour cela, il lui suffit de mettre l'adresse de notre page dans l'attribut action (ex.: <form action="http://www.sitePho.be/pageForm.php">).

La première chose à faire est de toujours vérifier si les paramètres demandés sont présents et correspondent à des valeurs attendues et acceptables.

Il faut également éliminer toute tentative d'introduction de commandes HTML, PHP, etc. Pour ce faire, PHP met à notre disposition plusieurs fonctions qui convertissent les caractères spéciaux de HTML comme < et > en entités HTML comme < et >, ce qui empêche le navigateur d'interpréter le contenu de cette variable comme du code HTML. Si l'internaute tente néanmoins d'introduire du code tel que par exemple <b>Pierre</b> en espérant voir le mot apparaître en gras, le navigateur affichera <b>Pierre</b> et non Pierre. Ce n'est peut-être pas très joli, mais la sécurité n'a pas de prix !

Pour ce faire, on utilisera la fonction htmlspecialchars(string, ENT_QUOTES, 'UTF-8') où string représente la variable paramètre à traiter.

Notons que si l'on souhaite supprimer tous les tags, on peut utiliser la fonction strip_tags(string).

16.05.23 PHP - 36


Malheureusement, cela ne suffit pas car les versions actuelles de PHP traitent incorrectement certaines apostrophes. Pour corriger cela, il faut introduire le code suivant au début de toute page réceptrice afin d'éliminer les problèmes.

Voici un exemple "complet" d'un formulaire demandant l'encodage d'une zone de texte et l'affichage de celle-ci après contrôle :

Exercice :


16.05.23 PHP - 37


14. LES DATES En PHP, il existe un grand nombre de fonctions prédéfinies dont plusieurs concernent les dates. Dans ce cours, nous nous limiterons toutefois à celles qui nous seront utiles.

La première permet d'indiquer le fuseau horaire souhaité. Pour activer le fuseau de la Belgique, nous taperons date_default_timezone_set('Europe/Brussels');

La commande date(format, date_heure) renvoie la date/heure spécifiée via le second paramètre ou, par défaut, la date du jour sous le format demandé :- Le premier paramètre permet d'indiquer le format souhaité au moyen notamment

des codes suivants :- d → jour en 2 positions (avec zéro initial si nécessaire)- j → jour sans zéro initial- N → code du jour (1 = lundi ; 7 = dimanche)- m → mois avec zéro initial si nécessaire- n → mois sans zéro initial- t → nombre de jours du mois- L → renvoie 1 si c'est une année bissextile, 0 dans le cas contraire- Y → année en 4 positions- y → année en 2 positions- a → code am/pm- A → code AM/PM- g → heures 1-12 sans zéro initial- G → heures 0-23 sans zéro initial- h → heures 1-12 avec zéro initial- H → heures 0-23 avec zéro initial- i → minutes 0-59 avec zéro initial- s → secondes 0-59 avec zéro initial

- Le second paramètre permet de spécifier la date/heure à formater. Pour rappel, si ce paramètre n'est pas présent, la fonction affichera la date/heure actuelle.Attention, ce paramètre doit être donné sous un format spécifique. Pour ce faire, on utilisera la fonction mktime(hr,min,sec,mois,jour,an).

15. LES SESSIONS S'il est possible de transmettre des données d'une page à l'autre au sein d'un site au moyen des méthodes get et post, ce n'est pas toujours très pratique. La technique que l'on privilégiera est celle des sessions. Celles-ci permettent de définir certaines variables qui seront accessibles à partir de toutes les pages du site pendant toute la durée de la visite d'un internaute.

Les sessions fonctionnent selon le principe suivant :- On crée une session lors de l'arrivée de l'internaute sur le site grâce à la

commande session_start() placée obligatoirement au tout début de chaque page du site (avant même la balise <html>). Celle-ci est identifiée par un code

16.05.23 PHP - 38


généré automatiquement et appelé "ID de session" (ou PHPSESSID). Ce code se transmet de page en page et permet au serveur de reconnaître la session en cours et ainsi de donner accès aux variables liées.

- Dès que la session est créée, on peut facilement y sauver ou y lire des données. En effet, il suffit de savoir que PHP les sauve toutes dans un tableau associatif appelé $_SESSION dont les clés sont les noms des variables.

- La session est fermée et donc toutes les données supprimées lorsque le visiteur se déconnecte du site.En réalité, il est difficile de savoir précisément quand l'internaute quitte le site. En effet, lorsqu'il ferme le browser ou va sur un autre site, le site n'en est pas informé... Donc soit l'internaute clique sur un bouton "Déconnexion" (qui exécute la commande session_destroy()) avant de s'en aller, soit le serveur attend quelques minutes d'inactivité pour le déconnecter automatiquement (on parle de timeout).

Notons encore qu'il est possible de ne supprimer que certaines variables au moyen de la fonction unset($_SESSION[nomVariable]).

Les variables de session permettent également d'obliger tout visiteur à encoder un code d'accès avant de pouvoir parcourir librement un site. Si

16.05.23 PHP - 39


l'on encode les commandes suivantes au début de toutes les pages d'un site (sauf index.php), l'internaute est automatiquement redirigé sur la page index.php tant qu'il n'est pas autorisé à visiter le site.

Les variables de session sont par ailleurs souvent utilisées sur les sites de vente afin de gérer les paniers des clients.

16. LES COOKIES Comme vous allez pouvoir le constater, les cookies PHP ont beaucoup de points communs avec les cookies JavaScript et les variables de session.

Un cookie est un petit fichier stocké sur le pc "client" contenant différentes informations. Chaque fois que l'internaute demande d'accéder à un site via son navigateur, ce dernier envoie également automatiquement dans sa requête le cookie lié au site.

Les informations contenues dans les cookies dépendent du site. En effet, c'est ce dernier qui décide de ce qui lui est utile de retenir. Cela peut être la langue de l'internaute, mais également son nom, un mot de passe, etc.

De même, les créateurs du site décideront de la durée de vie qu'ils souhaitent attribuer aux cookies créés. Faut-il les garder durant plusieurs années ou au contraire ne doivent-ils servir que durant la session en cours ? En effet, certains cookies ne sont créés que pour transmettre des informations de page en page au sein du site.

Composition d'un cookie :Un cookie est donc un simple fichier texte contenant différentes variables. Celles-ci doivent être écrites en respectant la syntaxe nomVar=ValeurVar (nom de la variable, suivi de =, suivi de la valeur de la variable). On ajoute souvent à cette chaîne d'autres paramètres tels que la durée de validité du cookie, etc. Tous les paramètres du cookie ainsi que les différentes variables sont séparés par un point-virgule.

La création d'un cookie en PHP se fait au moyen de la fonction setcookie(nom, valeur, expire, path, null, false, true) où :- nom représente le nom du cookie- valeur représente sa valeur- expire représente le temps après lequel il expire. Cette période est exprimée

dans un format spécifique. C'est pourquoi on utilise généralement la fonction time() à laquelle on ajoute le nombre de secondes que l'on souhaite conserver le cookie. On peut également utiliser la fonction mktime().On spécifiera la valeur 0 si l'on ne désire pas conserver le cookie à la fin de la session.

- path est semblable au paramètre de JavaScript- Le dernier paramètre true permet de sécuriser son cookie avec le mode

httpOnly qui rend le cookie inaccessible en JavaScript. Cette option permet de réduire le piratage au cas où l'on oublie d'utiliser htmlspecialchars().

Attention, la création d'un cookie doit absolument se faire avant tout code HTML (comme pour session_start()). De plus, le cookie ne sera pas visible avant le prochain chargement de page.

16.05.23 PHP - 40


La lecture d'un cookie est très simple en PHP. En effet, il suffit de lire le tableau associatif $_COOKIE dont les clés correspondent aux noms des cookies.

Attention, afin d'éviter tout problème, il ne faut pas oublier de d'abord vérifier l'existence du cookie avec la fonction isset() avant d'y accéder.

Modifier un cookie se fait simplement au moyen de la fonction setcookie() que l'on exécute en spécifiant tous les paramètres. Le cas échéant, PHP écrase l'ancien cookie ayant le même nom.

Exemple :

Nous souhaitons que lors de la première visite d'un internaute, il doive saisir son nom dans un formulaire afin que lors de ses prochaines visites, on puisse afficher un petit message d'accueil personnalisé.

16.05.23 PHP - 41


17. LES VARIABLES SUPERGLOBALES Les variables superglobales sont des variables (du type array associatif) créées automatiquement et gérées par PHP chaque fois qu'une page est chargée. Vous en connaissez déjà plusieurs : $_GET, $_POST, $_REQUEST, $_SESSION et $_COOKIE.

Voici d'autres variables superglobales :- $_SERVER contient de nombreuses valeurs renvoyées par le serveur dont

notamment $_SERVER['REMOTE_ADDR'] qui reprend l'adresse IP du client qui a demandé à voir la page.

- $_FILES contient la liste des fichiers qui ont été envoyés via le formulaire précédent.

Exercice :


18. LA GESTION DES DIRECTORIES Il existe plusieurs fonctions liées aux directories. Nous en étudierons les plus utiles :

- opendir(path) renvoie un pointeur sur le dossier qu'on lui a demandé d'ouvrir en cas de succès ou false en cas d'échec. Si le path ne correspond pas à un dossier valide ou si le dossier ne peut être accédé pour des raisons de permissions ou des erreurs liées au système de fichiers, la fonction retourne false et génère une erreur PHP (warning). On peut toutefois supprimer cette erreur en ajoutant le caractère @ avant le nom de la fonction.

- is_dir(path) retourne true si le path existe et que c'est un dossier. Dans le cas contraire, false est renvoyé.

- closedir(pointeur) referme le pointeur créé précédemment avec opendir().

- readdir(pointeur) retourne le nom du fichier/dossier suivant du dossier précédemment ouvert avec opendir(). Les noms sont retournés dans l'ordre suivant lequel ils sont enregistrés dans le système de fichiers.Attention, en cas d'erreur, cette fonction peut retourner false ou une valeur équivalente comme 0 ou "".

- scandir(path, tri) retourne un tableau indicé reprenant la liste triée des fichiers/dossiers du dossier demandé en cas de succès ou false en cas d'échec. Si le path ne correspond pas à un dossier valide ou si le dossier ne peut être accédé pour des raisons de permissions ou des erreurs liées au système de fichiers, la fonction retourne false et génère une erreur PHP (warning). On peut toutefois supprimer cette erreur en ajoutant le caractère @ avant le nom de la fonction.Par défaut, la liste est triée alphabétiquement. Si le paramètre optionnel tri vaut 1, le tri sera en ordre alphabétique inverse.

- rewinddir(pointeur) repositionne le pointeur au début du dossier précédemment ouvert avec opendir().

16.05.23 PHP - 42


19. LA GESTION DES FICHIERS Il existe plusieurs fonctions liées aux fichiers. Nous en étudierons les plus utiles :

- basename(path, extension) renvoie la partie principale du nom du fichier transmis à la fonction via le premier paramètre. Le second paramètre, s'il est présent, indique à PHP qu'il doit supprimer la partie "extension du fichier" du nom renvoyé lorsque celle-ci correspond à l'extension envoyée en second paramètre.

- copy(nomOrigine, nomCopie) copie le fichier indiqué au niveau du premier paramètre. La fonction renvoie true si la copie s'est bien passée ; false dans le cas contraire.Attention, si un fichier existe déjà sous le nom spécifié au niveau du second paramètre, il sera écrasé par la copie !

- file_exists(path) vérifie si la directory ou le fichier spécifié au niveau du paramètre existe. La fonction renvoie true si c'est le cas ; false dans le cas contraire.

- filesize(nomFichier) renvoie la taille, exprimée en bytes, du fichier (ou

16.05.23 PHP - 43


false en cas d'erreur).

- fopen(nomFichier, mode) renvoie un pointeur sur le fichier (ou URL) qu'on lui a demandé d'ouvrir en cas de succès. Dans le cas contraire, la fonction retourne false et génère une erreur PHP. On peut toutefois supprimer cette erreur en ajoutant le caractère @ avant le nom de la fonction.Il existe plusieurs types d'ouverture. Ceux-ci sont désignés au moyen du paramètre mode qui peut avoir les valeurs suivantes :- r (Read) : Lecture - Démarre au début du fichier- r+ (Read+) : Lecture + écriture - Démarre au début du fichier- w (Write) : Ecriture - Crée un nouveau fichier (le cas échéant, écrase le

fichier existant)- w+ (Write+) : Lecture + écriture - Crée un nouveau fichier (le cas échéant,

écrase le fichier existant)- a (Add) : Ecriture - Crée un nouveau fichier ou ouvre et écrit à la fin

d'un fichier existant- a+ (Add+) : Lecture + écriture Crée un nouveau fichier ou ouvre et écrit

à la fin d'un fichier existant- x (Write) : Ecriture - Crée un nouveau fichier ou retourne false et une

erreur si le fichier existe déjà- x+ (Write+) : Lecture + écriture - Crée un nouveau fichier ou retourne

false et une erreur si le fichier existe déjà

- fclose(pointeur) ferme le fichier ouvert précédemment.

- feof(pointeur) renvoie true si la fin du fichier est atteinte, false dans le cas contraire.

- fgets(pointeur, lgr) lit une suite de caractères dans le fichier ouvert et la renvoie. Les caractères sont lus de la position du pointeur jusqu'à la fin de ligne, la fin du fichier ou, si elle est spécifiée, lorsque la longueur de la chaîne moins 1 caractère est atteinte.

- fgetss(pointeur, lgr, lstTags) lit une suite de caractères dans le fichier ouvert et la renvoie après en avoir retiré tous les tags HTML et PHP à l'exception de ceux, éventuellement, spécifiés au niveau du troisième paramètre (ex.: "<p>,<b>"). Les caractères sont lus de la position du pointeur jusqu'à la fin de ligne, la fin du fichier ou, si elle est spécifiée, lorsque la longueur de la chaîne moins 1 caractère est atteinte.Attention, le paramètre 2 est obligatoire si le troisième paramètre est présent.

- fgetc(pointeur) lit un caractère dans le fichier ouvert et le renvoie.

- fread(pointeur, lgr) lit le fichier ouvert et en renvoie le nombre de caractères spécifiés (ou moins si la fin du fichier est atteinte).

- fwrite(pointeur, string) écrit la chaîne de caractères dans le fichier spécifié à la position actuelle du pointeur (sauf si le fichier est ouvert dans un mode "a" ; dans ce cas, l'écriture se fera toujours à la fin du fichier) et déplace celui-ci au fur et à mesure de l'écriture. Le cas échéant, l'écriture écrase les données actuelles du fichier.

- is_file(nomFichier) retourne true si le fichier existe et que c'est un fichier. Dans le cas contraire, false est renvoyé.

- rename(nomAncien, nomNouveau) permet de renommer un fichier. Cette fonction

16.05.23 PHP - 44


renvoie true si tout a bien fonctionné ; false dans le cas contraire.

- rewind(pointeur) repositionne le pointeur au début du fichier.

- unlink(nomFichier) efface un fichier. Cette fonction renvoie true si tout a bien fonctionné ; false dans le cas contraire.

La fonction nl2br(string) bien que n'étant pas liée aux fichiers est souvent utilisée lors de la lecture de ceux-ci. En effet, cette fonction renvoie la string reçue en paramètre en ajoutant le code HTML <br> de changement de ligne devant tous les codes de changement de ligne \n d'une string.

La fonction die(string) (ou exit(string)) est régulièrement utilisée afin d'afficher un message d'erreur et interrompre le script en cours en cas de problème.

20. L'UPLOAD D'UN FICHIER DANS UN FORMULAIRE Ce chapitre est dédicacé à l'étude de l'envoi par les internautes de fichiers (ou upload) grâce aux formulaires.

Cet envoi est composé de plusieurs étapes :- L'internaute indique les fichiers à envoyer via le formulaire- PHP réceptionne les données du formulaire et, s'il y a des fichiers, les

16.05.23 PHP - 45


sauve dans un dossier temporaire du serveur- Contrôle en PHP des fichiers- Sauvegarde des fichiers dans un dossier permanent afin de les conserver

A. ETAPE 1 : DÉFINITION DU FORMULAIRE

Commençons par la première étape qui consiste à définir le formulaire. Pour cela, il faudra veiller aux points suivants :

- Ajouter une balise du type <input type="file" name="nomFichier1"> permettant à l'internaute de sélectionner le fichier à envoyer. L'attribut name est quant à lui nécessaire afin que PHP puisse reconnaître le champ lors du traitement.

- Attribuer la valeur "multipart/form-data" à l'attribut enctype de la balise form et "post" à l'attribut method (un fichier ne peut être passé via une url)

Notons qu'il est important que le webmaster impose des limites et empêche d'uploader n'importe quoi. Si la plupart des contrôles sont faits en PHP, il est toutefois déjà possible en HTML de fixer la taille maximale des envois. Cette limite est en fait communiquée au navigateur via la commande suivante :

Cette commande, placée avant la première balise <input type="file"> indique en bytes la taille maximale autorisée pour chaque envoi. Si le fichier dépasse la taille autorisée, PHP recevra le type d'erreur 2 (ou UPLOAD_ERR_FORM_SIZE) et le fichier ne sera pas uploadé (contrairement à son nom, etc.).

Voici un exemple d'un simple formulaire qui permet à l'internaute d'uploader jusqu'à deux fichiers :

B. ETAPE 2 : RÉCEPTION DES FICHIERS

Lorsque l'internaute clique sur le bouton Submit après avoir sélectionné un ou plusieurs fichiers, le navigateur les envoie aux serveurs et les place dans un dossier temporaire où seul le script PHP pourra y accéder.

Le tableau $_FILES contient différentes informations sur les fichiers uploadés. Ce tableau à deux dimensions contient une ligne pour chaque champ du formulaire de type file. Cette ligne aura le nom du champ du formulaire pour indice.

Chaque ligne du tableau sera composée des 5 champs suivants :- name qui contient le nom original du fichier- type qui contient le type du fichier

16.05.23 PHP - 46


- tmp_name qui contient le nom complet du fichier uploadé dans le dossier temporaire

- error qui contient un code d'erreur indiquant pourquoi l'upload n'a pas pu être effectué correctement. Si l'upload s'est bien déroulé, il vaudra 0.

- size qui contient la taille, exprimée en bytes, du fichier

Voici un exemple du tableau $_FILES après le transfert de 2 fichiers (NB: Le second fichier n'a pu être uploadé car sa taille était supérieure à celle autorisée en HTML) :

C. ETAPE 3 : CONTRÔLE EN PHP DES FICHIERS

Le script PHP doit à présent contrôler la validité de chaque fichier uploadé.

Le premier contrôle à effectuer est bien entendu vérifier si le fichier a été uploadé. Pour cela, il suffit de tester sa présence dans le tableau $_FILES via la fonction isset et vérifier la cellule error correspondante. Si celle-ci vaut 0, le fichier a été transféré ; dans le cas contraire, il ne l'a pas été. Les 4 erreurs possibles sont :

16.05.23 PHP - 47


Un deuxième contrôle à faire est de vérifier si la taille du fichier transmis est acceptable. Il est, en effet, utile de recontrôler la taille du fichier car le code HTML correspondant peut être contourné par l'internaute. Pour cela, il suffit de contrôler la valeur de la cellule size correspondante.

Le troisième contrôle consiste à vérifier le type de fichier transmis. En effet, il peut être très dangereux d'uploader un fichier .HTML, .PHP, etc. Le contenu de la cellule type n'étant pas toujours très pratique, on vérifie généralement l'extension du fichier. Et, afin de limiter les problèmes, on ne contrôle généralement pas si l'on doit rejeter le fichier, mais plutôt si l'on peut accepter le fichier. Pour ce faire, on définit une array reprenant les extensions autorisées et l'on vérifie si l'extension du fichier y est présente.

Si vous regardez attentivement l'exemple précédent, vous verrez l'instruction que nous n'avons pas encore

étudiée. Celle-ci renvoie l'extension d'un fichier et la transforme en minuscules.

D. ETAPE 4 : SAUVEGARDE DES FICHIERS DANS UN DOSSIER PERMANENT

Si l'on souhaite conserver les fichiers uploadés, il faut les déplacer dans un dossier permanent ; sans cela, ils seront détruits. Cela se fait au moyen de la commande move_uploaded_file(nom_fichier_temporaire, nom_complet_definitif).

Attention, n'oublions pas les règles de base de nommage d'un fichier :- Deux fichiers ne peuvent pas avoir le même nom dans le même dossier- Il faut faire attention à l'extension des fichiers afin qu'ils ne puissent

s'exécuter facilement (→ pas .php !).

Pour l'exemple suivant, j'ai créé un sous-dossier uploads dans lequel je place tous les fichiers uploadés en les renommant. Tous les fichiers de ce dossier ont pour nom un numéro suivi de leur extension d'origine.

16.05.23 PHP - 48


Il est évident que, dans un cas réel, il faudrait améliorer cette procédure pour éviter les problèmes si le dossier est vide, si le nom du dernier fichier n'est pas numérique, etc. De plus, cette méthode ne permet pas de faire le lien entre les internautes et leurs fichiers uploadés.

Attention, il faut aussi veiller à ce que PHP puisse placer les fichiers dans le dossier souhaité. Pour cela, il faut que ce dernier soit accessible en écriture, il faut donc vérifier et/ou adapter ses attributs. Avec FileZilla, on exécute la commande Attributs du fichier du menu contextuel du dossier en question et on vérifie que la valeur numérique soit d'au moins 733.

Une autre amélioration souhaitable est la protection du dossier via .htaccess afin d'éviter qu'un internaute puisse y accéder directement sans passer par vos scripts PHP.

Exercice :


21. LA FONCTION MAIL() Cette fonction permet d'envoyer un mail à partir d'un script PHP. Sa syntaxe est la suivante : mail(dest,sujet,message,enTete) où :- dest représente les destinataires principaux du mail (paramètre obligatoire).- sujet représente la ligne de texte qui sera reprise au niveau du champ titre/

sujet/objet du mail (obligatoire).- message représente le message à transmettre via le mail (obligatoire). Ce

paramètre peut être composé de plusieurs lignes de max. 70 caractères ; le séparateur de ligne étant \n. Ce paramètre peut contenir un simple texte ou une page HTML.

- enTete représente certains codes d'en-tête spécifiques tels que From (De), Cc, Bcc (Cci) (optionnel). Les codes d'en-tête doivent être séparés par les caractères \r\n.

Exemple 1 :

16.05.23 PHP - 49


La fonction wordwrap() coupe un texte continu en plusieurs lignes (en ajoutant le séparateur de ligne \n) en tenant compte de la longueur maximale autorisée pour une ligne indiquée au niveau du second paramètre.

Exemple 2 :

16.05.23 PHP - 50


1. NOTE DE L'AUTEUR Conseil : Etudiez les chapitres "Les chaînes de caractères", "Les fichiers" et

"Les fichiers indexés et Bases de données" du cours "Les Algorithmes"

Le cours de création d'un site WEB ayant été revu, un cours spécifique a été ajouté afin d'apprendre à gérer une base de données. Le syllabus de ce nouveau cours étant plus complet que la partie "Gestion d'une Base de Données" précédemment écrite dans ce cours-ci, j'ai décidé de supprimer ce chapitre et vous inviter à étudier la gestion d'une DB à partir du nouveau syllabus.

Conseil : Etudiez les parties "Introduction générale", "Conception d'une Base de

Données", "PhpMyAdmin", "Les commandes SQL" et "Gestion d'une DB d'un site internet" du cours "Gestion d'une Base de Données"

Exercices :

Faire les exercices DB1 à DB5 du cours "Gestion d'une Base de Données".

16.05.23 Base de données - 1


1. INTRODUCTION Avec ce chapitre, nous entamons une nouvelle section du cours. JavaScript est un langage de programmation que l'on ajoute à une page HTML afin de la rendre plus dynamique. Grâce à lui, on pourra notamment contrôler les données d'un formulaire, afficher ou masquer automatiquement certaines parties d'une page HTML (ex.: FAQ dont les explications apparaissent/disparaissent lorsque l'on clique sur le titre du sujet), changer une image en une autre lorsque l'internaute le souhaite, afficher l'heure, agir dynamiquement sur les styles d'un élément de la page, faire des calculs (ex.: factures), etc.

Que peut-on dire sur JavaScript ?- D'abord que, contrairement, aux idées reçues, il n'a rien à voir avec le

langage Java.- Ensuite, il faut savoir que ce langage est interprété et non compilé. Cela

signifie, sans être trop "technique", que ce langage est traduit en langage exécutable par l'ordinateur par le navigateur de l'internaute au moment où il doit l'exécuter et donc dépend de celui-ci. Mais, il ne faut pas trop s'inquiéter pour la version du browser car JavaScript est traité correctement par tous les navigateurs courants. Toutefois, il faut savoir qu'un internaute peut éventuellement interdire l'exécution des scripts au moyen d'une option de son browser... Tant pis pour lui, me direz-vous... Oui, d'accord, néanmoins, il ne faut pas perdre ce point de vue car cela signifie aussi que les éventuels contrôles d'un formulaire peuvent être désactivés ! Il faudra donc, le cas échéant, les effectuer du côté serveur également pour éviter les problèmes.

- Les scripts ne sont pas obligatoirement exécutés lors du chargement de la page HTML. On peut très facilement les associer à un événement généré par l'internaute (ex.: clic sur un bouton, envoi d'un formulaire, etc.).

2. OÙ PLACER MON CODE JAVASCRIPT ? Dans ce chapitre, nous allons voir où l'on peut placer le code JavaScript. Je n'expliquerai toutefois pas encore toutes les instructions JavaScript utilisées dans les exemples.

A. CAS 1 : DANS UNE BALISE HTML

La première méthode consiste à écrire l'instruction dans la balise HTML liée.

Si on veut afficher un message chaque fois que l'internaute cliquera sur une image, on encodera une commande HTML semblable à celle-ci :

<img src="images/astro.jpg" onclick="alert('Je vole !');" />

onclick est ce que l'on appelle un gestionnaire d'événements. Nous les étudierons plus tard, mais retenons que ces derniers indiquent aux browsers que

16.05.23 JavaScript - 1


les commandes qui suivent sont des instructions JavaScript.

B. CAS 2 : DANS LE CORPS D'UNE PAGE HTML

Toutes les instructions JavaScript ne peuvent toutefois pas toujours être écrites ainsi. Tout simplement parce que l'on veut qu'elles s'exécutent directement (sans événement du type clic, etc.) ou parce qu'elles sont beaucoup plus complexes qu'un simple affichage de message.

Afin de pouvoir comprendre concrètement où placer le code JavaScript, il faut connaître quelques instructions... En voici donc une qui affiche un titre du niveau h1 : document.write("<h1>Titre principal</h1>");

Le premier endroit auquel on pense placer le code est dans la partie body de la page HTML. Essayez... Pas terrible ! Le navigateur ne comprend pas que vous avez tapé des instructions JavaScript si vous ne lui dites rien. Vous devez placer ces instructions entre les balises <script type="text/javascript"> et </script>. Réessayez... Génial, non ? Oui, d'accord, c'est plus simple sans JavaScript. Mais c'est juste un exemple pour montrer le rôle des balises <script>.

Attention, si l'on veut éviter tout problème lorsque l'internaute utilise un vieux navigateur, on mettra tout le code JavaScript en commentaire sans quoi il sera considéré comme du simple texte et apparaîtra sur l'écran. Un navigateur récent saura qu'il n'a plus affaire à du HTML, et passera donc la balise du commentaire (), nous allons lui dire, en JavaScript, qu'il s'agit d'un commentaire, grâce à //.

Remarquons que le code JavaScript placé dans le corps d'une page HTML est directement exécuté lors du chargement de la page.

C. CAS 3 : DANS L'EN-TÊTE D'UNE PAGE HTML

Il arrive souvent que l'on ne souhaite exécuter du code JavaScript qu'après un certain événement, ou qu'un même code doive être exécuté plusieurs fois. Dans ce cas, il sera mis dans la partie head de la page. Et pour pouvoir l'exécuter, on lui associera un nom afin de l'appeler quand on en aura besoin. Tout cela revient en fait à définir ce qu'on appelle une fonction (voir suite du cours).

Si vous testez le code ci-après, vous constaterez que le titre s'affiche directement deux fois et que les messages n'apparaissent à l'écran que lorsque l'on clique sur l'image.

Remarquons au passage que le second message n'est affiché que lorsque le premier disparaît. En effet, JavaScript attend que la première instruction soit terminée avant d'exécuter la deuxième.



D. CAS 4 : DANS UN FICHIER EXTERNE

Tout comme pour les feuilles de style, il est possible de placer tout le code JavaScript dans des fichiers externes. Ceux-ci auront pour extension .js. On indiquera à la page HTML où ils se trouvent au moyen de l'attribut src de la balise <script>. Ces balises seront généralement placées dans l'en-tête de la page HTML. L'appel de la fonction, lui, ne change pas.

Remarques :

- Il n'est plus nécessaire de masquer le code aux anciens navigateurs puisqu'il n'y a plus de code entre les balises.

- Si plusieurs fichiers JS sont utilisés, il faut veiller à ce que les noms des fonctions soient différents. Sinon, le système en prendra une au choix (en général celle se trouvant dans le fichier externe défini en dernier lieu).

- Les fichiers .js ne doivent contenir que du JavaScript → Aucune balise HTML (et donc pas <script>).

3. UN PEU DE SYNTAXE La première règle syntaxique à retenir, c'est le fait que JavaScript est "case sensitive". Il faut donc absolument respecter la casse des lettres (minuscule, majuscule). En effet, a ≠ A, alert('') ≠ Alert(''), etc.

Une autre règle est le fait que l'on doit indiquer au navigateur la fin de chaque instruction (ou commande) JavaScript. On peut le faire soit en passant à la ligne (au moyen de la touche Enter), soit en encodant un ; à la fin de l'instruction. Cette seconde possibilité étant une règle fort répandue dans différents langages de programmation, il est fortement conseillé de le faire.

Attention, cette règle implique aussi qu'une instruction doit être encodée entièrement sur une seule ligne sans quoi le browser considèrera que chaque morceau doit être traité comme une instruction complète, ce qui ne peut évidemment pas fonctionner. Il est toutefois autorisé de couper une chaîne de



caractères en deux, grâce au caractère \, si nécessaire.

Nous verrons également plus tard qu'il est parfois nécessaire de grouper certaines instructions (dans les boucles, les tests, les fonctions, etc.). Ce groupement sera délimité par les accolades { et } placées respectivement au début et à la fin du groupe.

En JavaScript, encore plus qu'en HTML et en CSS, il est conseillé de mettre des commentaires pour expliquer ce que font les instructions. Il existe deux manières de le faire :- On peut les écrire en fin de ligne après les caractères // (deux slashs).- On peut, comme en CSS, écrire de longs commentaires entre /* et */

Les commentaires sont également souvent utilisés pour rechercher une erreur dans un programme en masquant momentanément certaines instructions afin de se concentrer sur les commandes problématiques.

JavaScript ne tient pas compte du nombre d'espaces entre les mots des instructions. Il ne faut donc pas hésiter à en mettre pour faciliter la lecture du code.

4. DIALOGUONS AVEC L'INTERNAUTE JavaScript met à notre disposition trois boîtes de dialogue afin que nous puissions dialoguer avec l'internaute.

La première est appelée au moyen de la commande alert('message'). Elle affiche le message et attend que l'internaute clique sur le bouton OK.

La deuxième est appelée au moyen de la commande confirm('message'). Elle affiche le message et attend que l'internaute confirme ou annule sa demande en cliquant respectivement sur OK ou Annuler. La fonction renverra alors la valeur booléenne true ou false (voir suite du cours).

La dernière, appelée grâce à la commande prompt('question','valeur par défaut'), affiche la question et attend la réponse de l'internaute. Celui-ci peut soit cliquer sur le bouton Annuler ; soit changer, le cas échéant, la valeur par défaut par la valeur souhaitée dans la zone de texte éditée et ensuite cliquer



sur le bouton OK. La fonction renverra alors la valeur de la zone sous la forme d'une String ou null si l'internaute a cliqué sur Annuler (voir suite du cours).

5. LES VARIABLES

A. INTRODUCTION

Lorsque l'on programme, on doit souvent demander à l'ordinateur de retenir certaines informations pendant le traitement. Ces informations, ou données, sont de différents types : nombres, caractères, dates, etc.

Ces informations seront stockées par l'ordinateur dans des zones de sa mémoire que l'on peut comparer à des tiroirs d'une armoire. On devra simplement placer une étiquette sur chaque tiroir utilisé afin de pouvoir retrouver l'information souhaitée. On pourra alors par la suite facilement relire cette information, mais aussi la modifier, voire la supprimer.

En informatique, et donc en JavaScript, un tiroir est appelé une variable et l'étiquette, son nom.

B. DÉCLARATION, INITIALISATION ET UTILISATION

La première chose à faire lorsque l'on a besoin d'une variable est la créer. En fait, le terme exact n'est pas créer mais déclarer une variable. Pour cela, il suffit de taper l'instruction var nom; où nom représente le nom de la variable.

Le nom doit respecter certaines règles :- Il peut contenir les 26 lettres de l'alphabet, en majuscules et en

minuscules, les 10 chiffres et le caractère souligné _Pour rappel, JavaScript est case sensitive et donc une variable nommée compteur ne pourra être accédée avec le nom Compteur.

- Il ne peut pas commencer par un chiffre- Il ne peut pas faire partie de la liste des mots interdits (= mots qui

existent déjà en JavaScript tels que les noms des commandes, etc.)

De plus, il faut savoir que les variables ont une durée de vie très courte : elles sont détruites lorsque l'internaute quitte la page.

Il n'est pas obligatoire de déclarer les variables au début du code, mais ça permet d'éviter certains problèmes tels que la double déclaration.

La commande utilisée pour attribuer une première valeur (= initialiser) ou pour modifier une valeur existante est la même, elle est représentée par le symbole d'affectation =.

Exemple :var annee;var msgErreur;

annee = 2009;msgErreur = "Erreur : valeur interdite";



Remarques :

Il est possible d'initialiser directement une variable lors de sa déclaration en combinant les deux commandes → var annee = 2009;

Mais, attention, on n'utilisera jamais la commande var lors d'une modification du contenu d'une variable.

Vous avez peut-être remarqué que je n'ai pas mis de guillemets autour de 2009, mais j'en ai mis pour la valeur de l'autre variable. Pourquoi cette différence ? Et bien, car la première variable est une variable numérique et la seconde une variable texte. Le fait de mettre des guillemets (ou apostrophes) signale à JavaScript qu'il doit traiter cette donnée comme du simple texte et ne peut donc pas l'utiliser pour faire des calculs.

L'utilisation du contenu d'une variable est très simple. En effet, si vous voulez accéder à son contenu, il suffit de taper le nom de la variable dans la commande souhaitée.

Exemples :document.write(annee);alert(msgErreur);

Remarques :

Dans ces instructions, je n'ai pas mis des guillemets car je veux que JavaScript utilise mes variables. Si j'avais mis des guillemets, il aurait affiché les textes "annee" et "msgErreur" au lieu du contenu des variables.

C. ETUDE BASIQUE DES STRING

Une variable du type String contient une chaîne ou suite de caractères (lettres, chiffres, etc.).

Cette dernière sera délimitée par des guillemets ou des apostrophes. Le fait que l'on puisse utiliser indifféremment des guillemets ou des apostrophes est très utile. En effet, dans le cas contraire, je serais fort ennuyé lorsque je voudrais mettre des guillemets à l'intérieur de ma chaîne, qui est délimitée par des guillemets (ex.: alert('La valeur "100" est interdite');) et inversement (ex.: <img src="astro.jpg" onclick="alert('Je vole');" />).

Dans certains cas, vous voudrez peut-être avoir à la fois des guillemets et des apostrophes dans la même chaîne de caractères. Dans ce cas, si vous avez utilisé des guillemets(/apostrophes) comme délimiteurs, il faudra indiquer que les guillemets(/apostrophes) au milieu du texte ne doivent pas être compris comme délimiteurs mais comme simples caractères. Pour faire cela, vous devrez placer le caractère backslash \ avant chaque guillemet(/apostrophe) du texte. Le backslash signifie ici que le caractère suivant doit être traité comme simple caractère et non comme caractère spécial (Attention, si vous voulez avoir un simple backslash dans votre texte, vous devrez taper \\).

Le caractère backslash permet également d'insérer des codes spéciaux. Par exemple, si l'on veut insérer un retour à la ligne qu'on ne peut insérer via un simple Enter, on encodera \n



Une des opérations les plus fréquentes sur les String est la concaténation. La concaténation consiste simplement à assembler le contenu de plusieurs String. Par exemple, supposons que vous ayez les variables voiture et couleur qui contiennent respectivement la marque et la couleur de la voiture de l'internaute et que vous voudriez afficher une phrase du type "Vous avez une Ferrari rouge.". Vous devrez écrire une opération semblable à celle-ci :

Enfin, quand je dis que vous connaissez la voiture de l'internaute et sa couleur, j'ai comme un doute. Vous lui avez demandé ces renseignements ? Non ?! Et bien, faisons-le. Nous avons vu précédemment que la commande prompt() permet de poser une question à l'internaute. Alors posons-lui les questions.

Il existe encore beaucoup d'autres choses à étudier sur les String, mais cela fera l'objet d'un chapitre spécifique. Le but est ici d'avoir des connaissances de base afin de pouvoir avancer dans l'étude de JavaScript au moyen d'exemples.

D. ETUDE BASIQUE DES NOMBRES

Les variables du type nombre se distinguent des String par :- Leur syntaxe : on ne met jamais de guillemets pour les délimiter.- Leur rôle : elles servent essentiellement dans des calculs.- Les opérateurs et fonctions liés.

Avant d'aller plus loin, notons bien que le séparateur de décimales est un point et pas une virgule en JavaScript.

Les opérateurs de base bien connus sont l'addition +, la soustraction -, la multiplication * et la division / ; auxquels s'ajoute l'opérateur modulo % qui renvoie comme résultat le reste de la division (ex.: 14%3 donne 2). Tous ces opérateurs respectent les priorités mathématiques classiques → () ; * / % ; + -.

Cela n'a pas l'air trop compliqué vérifions-le en testant ce petit programme :



A ceux-là s'ajoutent les opérateurs moins classiques en mathématique mais néanmoins fort répandus en informatique :

- L'incrémentation ++ : ex.: cpt++ → si cpt valait 3, il vaut 4 à présent.- La décrémentation -- : ex.: cpt-- → si cpt valait 3, il vaut 2 à présent.

Ils sont effectivement fort utilisés car cela fait plus professionnel mais, attention, encore faut-il savoir les utiliser correctement ! Etudiez l'exemple suivant afin de comprendre les résultats obtenus.

Constatations :- Il n'est pas nécessaire d'écrire x = x++; pour que la valeur de x soit

changée. Le simple fait d'écrire ++ à côté de son nom suffit.- Lorsqu'on écrit x = ++y; le système incrémente d'abord y, puis assigne la

nouvelle valeur de y à x.Lorsqu'on écrit x = y++; le système assigne d'abord la valeur de y à x, puis incrémente la valeur de y.Il faut donc faire très attention quand on utilise ce genre d'écriture !

A titre d'information, il existe aussi des raccourcis d'écriture, mais je déconseille leur utilisation car le programme perd en lisibilité :

- x += y est équivalent à x = x + y- x -= y est équivalent à x = x - y- x *= y est équivalent à x = x * y- x /= y est équivalent à x = x / y- x %= y est équivalent à x = x % y

E. CONVERSION STRING → NOMBRE

Effectivement, ce n'est pas très compliqué tout ça... Toutefois, une dernière vérification ne peut pas faire de mal. Adaptons un peu le programme pour demander les 2 nombres à l'internaute via des fonctions prompt() par exemple. C'est le même principe que les formulaires, mais pour ce test, cela ira plus vite.



Aïe, aïe, aïe, on avait parlé trop vite. Ce n'est pas si simple finalement. Il y a un problème dès qu'il y a une addition ! Que se passe-t-il ? En fait, c'est très simple, la fonction prompt() renvoie toujours une valeur du type String. Et donc lorsqu'on utilise l'opérateur +, JavaScript comprend qu'il doit concaténer les différentes variables. Pour les autres opérateurs utilisés, JavaScript sait qu'ils ne peuvent pas être utilisés avec des String mais uniquement avec des nombres. Il convertit alors automatiquement les valeurs String en nombres et puis effectue les calculs.

Que faut-il faire alors pour les additions ? Il faut convertir les String en nombres manuellement. Il existe plusieurs manières pour cela dont notamment l'utilisation des fonctions parseInt() et parseFloat() qui recherchent le nombre présent au début de la String donnée en paramètre et renvoient respectivement le nombre entier ou le nombre réel correspondant :

- parseInt("23.9 francs"); vaudra 23- parseInt(" 26 francs"); vaudra 26 car on ne tient pas compte des espaces

au début de la chaîne- parseFloat("23.9 francs"); vaudra 23.9- parseFloat("3,27"); vaudra 3 (Rappel : La virgule n'est pas considérée

comme séparateur)

Attention, la fonction parseInt("J'ai 15 francs"); renverra la valeur NaN (Not a Number) car la chaîne ne commence pas par un nombre. Nous verrons comment traiter ce cas plus loin dans le cours.

Transformons donc l'exemple précédent en y mettant les instructions suivantes :

F. CONVERSION NOMBRE → STRING

Dans la plupart des opérations, la transformation d'un nombre en String se fait automatiquement en JavaScript. Par exemple, lorsqu'on affiche un nombre au milieu d'une String, JavaScript le convertit pour le concaténer ensuite :

Il peut toutefois arriver qu'une conversion manuelle soit nécessaire. Supposons que l'on veuille afficher plusieurs nombres les uns derrière les autres. Pour ce faire, nous devrons ajouter une String vide avant ou entre les variables numériques.

Notons que l'on aurait aussi pu, dans l'exemple ci-dessus, déclarer les variables en tant que String (ex.: nbr = "1"). Dans ce cas, les 3 commandes



auraient eu pour résultat 1374.

Exercice :


6. LES FONCTIONS

A. INTRODUCTION

Une fonction permet d'associer un nom à une série d'instructions que l'on souhaite exécuter à plusieurs reprises. Il suffira d'écrire son nom pour exécuter toutes les instructions qui y sont liées. Outre le fait que cela permet de ne les écrire qu'une seule fois, cette façon de travailler permet également de rendre le code du programme beaucoup plus lisible et facile à modifier. De plus, l'appel d'une fonction pourra également être associé à une action de l'internaute telle que le clic de la souris sur un bouton qui demande de vérifier la validité d'un formulaire par exemple.

En informatique, on parlera de la déclaration (= définition) et de l'appel (= exécution) d'une fonction. Lorsque l'on appelle certaines fonctions, il faut leur fournir des arguments ou paramètres (= données ou variables encodées au sein des parenthèses qui suivent le nom de la fonction) afin qu'elles puissent effectuer correctement leurs opérations (ex.: La fonction alert() a besoin de savoir le message à afficher). Et, enfin, certaines fonctions renvoient une valeur (ex.: La fonction prompt() renvoie la valeur encodée par l'internaute).

Attention, il faut obligatoirement taper des parenthèses après le nom de chaque fonction lors de la déclaration ou de l'appel (même s'il n'y a aucun argument).

B. DÉCLARATION

Une fonction est déclarée dans l'en-tête de page entre les balises <head> et est composée de plusieurs éléments :

1) Le mot function2) Le nom de la fonction (mêmes règles que pour les variables)3) Entre parenthèses, les éventuels paramètres séparés par des virgules.

Attention, les parenthèses doivent toujours être présentes.4) Entre accolades, les instructions de la fonction. Notons que s'il n'y a

qu'une instruction, il n'est pas obligatoire de la mettre entre accolades, mais on le fait généralement pour plus de clarté dans le code.



Petites remarques sur ce programme :Maintenant que vous êtes devenus des as dans l'utilisation des variables du type nombre, j'ai deux remarques à faire. La première est qu'il n'était pas obligatoire de mettre, dans ce programme, la multiplication entre parenthèses pour qu'elle s'effectue correctement. En effet, une multiplication ne pouvant pas s'effectuer avec une String, JavaScript convertit d'office les deux valeurs en nombres avant de calculer le produit. La deuxième remarque est la suivante : supposons qu'au lieu d'avoir un produit, j'avais une somme. Qu'aurait fait JavaScript ? Aurait-il traité les nombres en tant que nombres ou en tant que String ? ... En fait, les deux ! Il aurait d'abord fait l'opération entre parenthèses, donc la somme de deux nombres. Ensuite, il aurait fait la concaténation entre les différentes String. Dans le cas d'une somme, il est donc obligatoire de mettre des parenthèses si l'on veut que JavaScript traitent les nombres en tant que nombres. Dans le cas contraire, il aurait concaténé les String les unes après les autres en convertissant chaque nombre en String.

C. APPEL

L'appel d'une fonction est très simple, il suffit de taper son nom suivi des parenthèses. Entre parenthèses, on tapera la valeur des paramètres éventuels.

Remarquez que c'est exactement ce que vous avez déjà fait à maintes reprises lorsque vous utilisiez les fonctions alert(), prompt(), document.write(), etc.

D. RENVOI D'UNE VALEUR

Supposons que l'on souhaite qu'une fonction reçoive en paramètre un montant en euros et le renvoie converti en francs belges.

Comment faire ?

Pour renvoyer une valeur, il suffit d'utiliser la commande return suivie de la valeur à retourner à la fin de la fonction.

Facile, non ? Et dans quelques chapitres, vous pourrez même régler le problème du nombre de décimales...

Notons encore que lorsqu'une fonction retourne une valeur, son exécution se termine directement. Dans certains cas, cette fonctionnalité sera fort utile



lorsque l'on voudra par exemple arrêter l'exécution d'une fonction car certains paramètres sont incorrects, etc. Il suffira alors de taper l'instruction return;

E. VARIABLES LOCALES OU GLOBALES ?

Qu'est-ce que c'est que ça ? En fait, outre leur type, les variables sont également caractérisées par leur portée qui peut être locale ou globale.

Les variables telles que les paramètres et les variables définies au sein d'une fonction sont dites locales car on ne peut les utiliser que dans celle-ci. Dès que l'on quitte la fonction, ces valeurs sont perdues définitivement.

Il est possible de définir des variables, dites globales, qui sont accessibles à partir de n'importe quel endroit du programme. Il existe deux manières de créer des variables de ce type : soit on les déclare en dehors de toute fonction grâce à l'instruction var ; soit on les utilise sans les avoir déclarées préalablement (à déconseiller fortement car le programme y perd beaucoup en lisibilité).

Attention, bien que l'utilisation de variables globales est souvent appréciée par les programmeurs débutants, il est toutefois conseillé d'utiliser les variables locales dès que c'est possible.

7. LES ÉVÉNEMENTS Un gestionnaire d'événements est un attribut d'une balise HTML qui a pour rôle d'exécuter le script associé lorsque l'événement spécifié se produit.(ex.: <img src="astro.jpg" onclick="alert('Bonjour');"/>

Voici deux tableaux reprenant les principaux événements ainsi que leur élément déclencheur et les balises HTML les supportant.

Evénements Déclenchés paronblur L'élément perd le focusonchange Le contenu du champ a changé entre le gain et la perte du focusonclick L'internaute clique sur l'élémentondblclick L'internaute double-clique sur l'élément. Attention, lorsque

l'internaute double-clique, il effectue aussi un simple clic...onfocus L'élément reçoit le focus



onkeypress Une touche du clavier a été enfoncée et relâchée, mais le contenu de la zone n'a pas encore été modifié par cette frappe. Attention, si la touche est maintenue et donc répétée, cela équivaut à plusieurs exécutions de cet événement.

onkeyup Une touche du clavier a été relâchée et "traitée" par la zoneonload L'internaute arrive sur la pageonmousedown Un des boutons de la souris est enfoncéonmouseout La souris est déplacée ou glissée et quitte l'élémentonmouseover La souris est déplacée ou glissée et arrive sur l'élémentonmouseup Un des boutons de la souris est relâchéonreset L'internaute clique sur le bouton reset du formulaireonsubmit L'internaute clique sur le bouton submit du formulaireonunload L'internaute quitte la page

Qu'est-ce que le focus ? En informatique, on dit qu'une zone de texte a le focus ou que le focus est dans la zone de texte lorsque l'utilisateur peut y saisir des données. Le focus y est généralement signalé par un curseur clignotant. Dans le cas d'un bouton, on dira que le focus y est si l'utilisateur peut simuler le clic de la souris par la touche Enter. En général, dans ce cas, le focus est signalé par un contour spécial du bouton. Le focus peut encore être placé sur d'autres types d'éléments ; chacun ayant sa propre manière de le représenter. Retenons en quelques mots que le focus correspond à la position de l'internaute.

Evénements

Balises HTML

onblur

onchange

onclick

ondblclick

onfocus

onkeypress

onkeyup

onload

onmousedown

onmouseout

onmouseover

onmouseup

onreset

onsubmit

onunload

a X X X X X X X Xarea X X X X X X X Xblockquote X X X X X X X Xbody X X X X X X X Xcaption X X X X X X X Xdiv X X X X X X X Xem X X X X X X X Xfieldset X X X X X X X X X Xform X X X X X X X X X X X Xh1 → h6 X X X X X X X Xhr X X X X X X X Xiframe X Ximg X X X X X X X Xinput X X X X X X X X X X Xlabel X X X X X X X X X Xlegend X X X X X X X X X Xli X X X X X X X Xmap X X X X X Xol X X X X X X X Xoptgroup X X X X X X X Xoption X X X X X X X Xp X X X X X X X Xpre X X X X X X X Xselect X X X X X X X X X X Xspan X X X X X X X Xstrong X X X X X X X X



Evénements

Balises HTML

onblur

onchange

onclick

ondblclick

onfocus

onkeypress

onkeyup

onload

onmousedown

onmouseout

onmouseover

onmouseup

onreset

onsubmit

onunload

table X X X X X X X Xtd X X X X X X X Xtextarea X X X X X X X X X X Xth X X X X X X X Xtr X X X X X X X Xul X X X X X X X X

Attention, ce tableau a été fait à partir d'informations retrouvées sur internet. Je n'ai pas testé les différents cas. Je ne prétends donc pas qu'il soit correct et complet. Il est juste donné à titre d'indication.

Exemple :

Remarquez la balise input du type button qui permet d'insérer un bouton avec le texte souhaité à l'écran. C'est une des méthodes qui permet d'ajouter un bouton aux formulaires pour lancer un contrôle des données encodées par l'internaute.

Bien que nous l'étudierons de manière détaillée plus tard, remarquons aussi la commande document.getElementById("...").value = ... qui permet de modifier le contenu de la zone associée à l'écran.

Exercices :


8. LA COMMANDE INNERHTML Cette commande permet de modifier le contenu "intérieur" d'un élément HTML. On entend par là le texte affiché à l'écran qui se trouve entre des balises du type <div>, <p>, <h1>, etc. pour lesquelles l'attribut value ne fonctionne pas. Grâce à la commande innerHTML, on va pouvoir soit lire le contenu intérieur d'une balise, soit le modifier. Dans ce dernier cas, on y mettra du texte en l'écrivant sous le format HTML (en y mettant donc les éventuelles balises HTML souhaitées).



Exemple :

Lorsque l'on veut afficher un long résultat à l'écran, il est fortement conseillé d'utiliser cette technique associée à un paragraphe ou une textarea plutôt que d'utiliser la commande document.write(). Cette dernière est utilisée dans le cours pour montrer le fonctionnement d'une commande sans devoir écrire une page HTML complète ; mais elle a un gros inconvénient lorsqu'on l'utilise dans une vraie page : elle supprime la page en cours pour en créer une nouvelle. Donc, si la page actuelle contient différents boutons (ex.: les 10 boutons permettant de sélectionner la table de multiplication à afficher) et que, lorsqu'on clique sur un des boutons, celui-ci appelle une fonction contenant au moins une commande document.write(), la page actuelle sera détruite et remplacée par le résultat des différentes commandes document.write() de la fonction. Donc tous les boutons auront disparu et il ne sera plus possible de cliquer sur un autre.

Exercice :




9. LES OUTILS DE COMPARAISON Cette section est dédicacée à l'apprentissage de tout ce qui concerne les outils de test. Ceux-ci sont fort utiles en programmation. Ils permettent de vérifier la validité des valeurs encodées par l'internaute, de sélectionner le traitement à effectuer en fonction de certaines valeurs, etc.

A. LES VARIABLES BOOLÉENNES

Jusqu'à présent, vous avez utilisé les variables numériques et les String. Il en existe un troisième type : les variables booléennes. Ces dernières ne peuvent contenir que deux valeurs : true (= vrai) ou false (= faux).

Ces variables sont fort utilisées lors des comparaisons. En effet, le résultat d'une comparaison sera toujours une valeur booléenne. Lorsque l'on compare des valeurs, on effectue en fait un test sur celles-ci en stipulant la condition à vérifier (ex.: La valeur encodée par l'internaute est-elle correcte ?). Le résultat du test sera toujours true si la condition stipulée est respectée, ou false dans le cas contraire.

Le résultat du test pourra soit être utilisé directement dans une instruction, soit sauvé dans une variable booléenne afin de pouvoir utiliser ce résultat à plusieurs reprises sans devoir refaire le test.

La déclaration de ce type de variable est identique aux autres :

B. LES OPÉRATEURS DE COMPARAISON

Vouloir effectuer un test signifie vouloir comparer deux valeurs. Pour cela, on va utiliser ce que l'on appelle les opérateurs de comparaison :

a == b Si les valeurs a et b sont égales, le résultat sera true ; dans le cas contraire, il sera false.Attention, dans les tests d'égalité, on double le signe = en JavaScript afin de ne pas confondre cet opérateur avec le signe = qui, lui, est utilisé pour affecter une valeur à une variable !

a != b Si les valeurs a et b sont différentes, le résultat sera true ; dans le cas contraire, il sera false.Dans ce cas, il n'est pas nécessaire de doubler le signe = puisque le caractère ! placé devant l'opérateur = permet de le différencier de l'opérateur d'affectation.

a < b Si a est plus petit que b, le résultat sera true ; dans le cas contraire, il sera false.

a > b Si a est plus grand que b, le résultat sera true ; dans le cas contraire, il sera false.

a <= b Si a est plus petit ou égal à b, le résultat sera true ; dans le cas contraire, il sera false.

a >= b Si a est plus grand ou égal à b, le résultat sera true ; dans le cas contraire, il sera false.

Attention, vous risquez d'être surpris par les résultats lorsque vous comparez des String. En effet, "AAA" n'est pas égal à "aaa" car les majuscules et les



minuscules n'ont pas la même valeur ! De même, si vous testez "111" < "22", vous aurez true pour résultat car le premier caractère de "111" est plus petit que le premier caractère de "22" ; alors que le test 111 < 22 vous donnera false car 111 est plus grand que 22.

Rem.: Les parenthèses autour d'un test ne sont pas obligatoires, mais elles sont néanmoins souvent utilisées pour améliorer la lisibilité des programmes.

Voici un exemple d'utilisation de ces opérateurs (en fonction de l'état actuel de vos connaissances) :

C. LES OPÉRATEURS LOGIQUES

Il est parfois nécessaire d'écrire des tests plus complexes qui combinent plusieurs conditions. Dans ce cas, on utilisera également les opérateurs logiques :

&& Est le symbole du "et". Lorsque l'on groupe deux conditions avec ce symbole, il faut que les deux conditions soient à true pour que le résultat final le soit aussi ; dans tous les autres cas, le résultat final sera false.

|| Est le symbole du "ou". Lorsque l'on groupe deux conditions avec ce symbole, il suffit qu'au moins une des deux conditions soit à true pour que le résultat final le soit aussi. Le résultat final sera false uniquement si les deux conditions le sont aussi.

! Est le symbole de la négation. En fait, il inverse le résultat d'un test. True devient false, et inversement. Il s'écrit devant la condition (ex.: ).

On peut bien évidemment faire des tests complexes combinant plus de deux conditions. Dans ce cas, il est vivement conseillé d'utiliser les parenthèses pour indiquer dans quel ordre les conditions doivent être vérifiées. Dans le cas contraire, les && sont prioritaires aux ||.



Exemple :

Pour participer au concours il faut avoir moins de 21 ans et habiter Anderlecht

D. L'INSTRUCTION DE TEST IF

Si les variables booléennes sont utiles pour sauver le résultat d'un test, elles ne peuvent malheureusement pas indiquer au système les instructions à exécuter en fonction de leur valeur. Pour ce faire, il faut utiliser des commandes de test telles que if ou switch. Commençons par étudier l'instruction if.

La commande respecte la syntaxe générale suivante :

En voici un exemple :

Mais voyons cela d'un peu plus près...

Tout d'abord, la première partie if (condition) est obligatoire. Elle reprend le test à effectuer. Si le résultat est true, le système effectuera l'instruction (ou le bloc d'instructions délimité par les accolades) suivante. Dans le cas contraire, le système effectuera l'instruction (ou le bloc d'instructions délimité par des accolades) suivant le mot else. La partie "else" n'étant pas obligatoire, le système n'effectuera aucune instruction particulière dans le cas du false si cette partie n'a pas été encodée.

Notons encore que la partie condition peut être remplacée par une simple variable booléenne.

Petite précision :

Que se passe-t-il si je tape l'instruction if (age) ?

Le résultat sera false dans les cas suivants :- La variable a été déclarée, mais n'a pas encore été initialisée- La variable vaut 0 (valeur numérique 0, pas "0")- La variable vaut null (valeur retournée par certaines fonctions)

Dans tous les autres cas, le résultat sera true.



Ce test permet donc de savoir si l'internaute a encodé une valeur.

Exemple :

Si l'internaute clique sur le bouton Annuler lorsqu'on lui demande son âge, la variable age contiendra la valeur null. On peut donc se servir de ce test pour vérifier que l'utilisateur n'a pas cliqué sur le bouton Annuler.

E. L'INSTRUCTION DE TEST SWITCH

Si l'on a besoin de tester plusieurs valeurs, on peut soit utiliser plusieurs if imbriqués, soit utiliser l'instruction switch.

En voici la syntaxe, un exemple et les explications :

La première ligne du test switch(variable) indique la variable dont on va tester le contenu.

Les accolades indiquent le début et la fin de l'instruction.

Pour chaque valeur à tester, on met l'instruction case suivie de la valeur en question, des :, des instructions à effectuer pour cette valeur et de la commande break pour terminer le traitement de cette valeur. Si l'instruction break n'est pas mise, le traitement de la valeur continue.

On termine le switch par la commande default qui permet d'effectuer un traitement par défaut pour toutes les valeurs non citées précédemment.

F. LE CONTRÔLE DES DONNÉES NUMÉRIQUES ENCODÉES VIA LA FONCTION PROMPT()

La fonction isNaN ("is Not a Number" = "n'est pas un nombre") permet de contrôler si la valeur qu'on lui donne en paramètre est un nombre ou pas.



Cette fonction renverra la valeur true si ce n'est pas un nombre ; et false dans le cas contraire (nombre ou String ne contenant qu'un nombre).

Attention, si, lors du prompt(), l'internaute clique sur le bouton Annuler (valeur null renvoyée) ou laisse la zone vide, le système considérera lors des calculs que l'internaute a introduit le nombre 0.

Exercice :


10. LES BOUCLES Les boucles sont des instructions qui permettent d'indiquer à JavaScript qu'il doit exécuter plusieurs fois un certain nombre d'opérations.

Les instructions étudiées en PHP sont identiques à celles de JavaScript et ne seront donc pas redéveloppées dans cette partie du cours. En voici néanmoins les syntaxes.

Attention, à la fin de l'instruction do ... while, il ne faut pas oublier de mettre le ; indiquant la fin des commandes JavaScript.

Notons également que les commandes break et continue existent aussi en JavaScript.

Exemple 1 : Faire la somme des nombres encodés via la commande prompt() parl'internaute et afficher le total lorsqu'il cliquera sur le boutonAnnuler :



Explications :

Les instructions se trouvant dans la boucle sont exécutées tant que la condition est respectée.

Remarquez que si la condition n'est pas respectée dès le départ, la boucle ne sera jamais exécutée.

Exemple 2 : Demander un nombre compris entre 10 et 100 inclus tant quel'internaute ne l'a pas encodé correctement.

Explications :

On exécute une première fois la boucle, puis elle est répétée tant que la condition est respectée.

Exemple 3 : Calcul de la moyenne des points d'un élève (max. 10 tests) :



Exercice :


11. LES TABLEAUX Un tableau est un ensemble de variables ayant le même nom mais différenciées les unes des autres par leur numéro (ou indice).

Les tableaux sont donc, schématiquement, composés de cases (ou cellules) numérotées séquentiellement. La première cellule portant le numéro ... 0! Et oui, comme dans beaucoup de langages informatiques, on commence à compter à partir de 0. La cellule 2 porte donc le numéro 1, et ainsi de suite. On peut donc facilement accéder (et donc lire ou modifier) une cellule à partir de son numéro.

Cette façon de les nommer est très intéressante au niveau de la programmation. En effet, grâce à cela, on va pouvoir utiliser une boucle indicée pour traiter toutes les variables au lieu de devoir écrire le traitement complet pour chaque variable séparément (ex.: Encodage des points d'un élève).

Notons qu'en JavaScript, il est possible d'indicer les cellules avec des chaînes de caractères ; on parle alors d'un tableau associatif. Toutefois, cette notion dépasse le cadre du cours, elle ne sera donc pas étudiée ici.

A. CRÉATION D'UN TABLEAU

La création se fait notamment grâce à la commande new Array();. Par celle-ci, le système va créer un tableau en mémoire et mettre son adresse dans la variable associée. En effet, un tableau étant trop grand, il est impossible de le mettre dans une variable ; c'est pourquoi on met un simple pointeur dans celle-ci. Grâce à cette variable, le système pourra accéder facilement au tableau.

Attention, cela veut aussi dire que si l'on copie la variable dans une autre, on accédera au même tableau à partir de chaque variable. Et donc, une modification du tableau effectuée à partir d'une variable se verra aussi lorsque l'on accédera au tableau à partir de l'autre variable.

B. INITIALISATION D'UN TABLEAU

Il existe plusieurs manières d'initialiser un tableau. En voici 3 :

C. LECTURE D'UN TABLEAU

L'accès à une valeur d'un tableau est relativement simple. Il suffit de taper le nom de la variable liée au tableau, suivi de l'indice correspondant à la valeur souhaitée entre crochets. L'indice peut être un nombre ou une variable numérique.



Exemple : Afficher le contenu du tableau créé au point précédent

La taille (ou nombre d'éléments) d'un tableau est contenue dans une variable length qui lui est associée. Pour y accéder, il faut taper le nom de la variable liée au tableau suivi d'un point et du mot length (ex.: voitures.length).

D. MODIFICATION D'UN TABLEAU

Pour modifier la valeur d'un élément du tableau, on procède de la même manière que pour une simple variable.

Pour ajouter une nouvelle valeur à la fin du tableau, on peut procéder de la même façon :

La méthode (≈ fonction) splice() permet :- d'insérer des nouvelles valeurs à un tableau à la position souhaitée- de supprimer des valeurs du tableau et de les "retourner"

La syntaxe est : nom_array.splice(indice, nombre, élément1, ..., elementX)où : - nom_array est le nom de la variable liée au tableau ; - indice représente la position des éléments à supprimer ou la position à partir de laquelle on insère les nouveaux éléments au tableau (obligatoire) ; - nombre représente le nombre d'éléments à supprimer du tableau. Si l'on ne veut pas en supprimer, on mettra 0 (obligatoire) ; - élément... représentent les nouveaux éléments à ajouter au tableau.

On peut afficher toutes les données du tableau en ne mettant que le nom de la variable associée dans la commande d'affichage.

La méthode splice() modifie directement le contenu du tableau. Il n'est donc pas



nécessaire d'affecter le résultat (donc pas voitures = voitures.splice(...)).

E. TRI D'UN TABLEAU

Il est possible de trier facilement les éléments d'un tableau dans un ordre croissant. Il suffit pour cela d'utiliser la méthode sort(). Celle-ci modifie directement le contenu du tableau (de manière irréversible). Il n'est donc pas nécessaire d'affecter le résultat.

Exemple : Reprenons l'exemple précédent et ajoutons-y à la fin le tri du tableau

F. LES TABLEAUX À 2 DIMENSIONS

Attention, cette section est donnée à titre informatif. Elle dépasse le niveau du cours.

Jusqu'à présent, nous n'avons étudié que les tableaux à une dimension (ex.: les points d'un élève, une liste de voitures). On peut néanmoins créer des tableaux à plusieurs dimensions. Par exemple, un tableau à 2 dimensions qui reprendrait les points de tous les élèves d'une classe.

En JavaScript, cela revient à créer un simple tableau dont chaque élément est lui-même un tableau.

Remarquons la manière d'accéder au contenu d'une cellule au moyen d'un double indice.

Exercice :




12. FONCTION : LES ARGUMENTS FACULTATIFS OU ILLIMITÉS

A. LES ARGUMENTS FACULTATIFS

Il arrive parfois que l'on souhaite écrire une fonction qui contienne des arguments facultatifs. Un argument facultatif est un argument qu'il n'est pas obligatoire de donner à la fonction lorsqu'on l'appelle. Celle-ci prendra alors une valeur par défaut.

Si l'argument est absent, la variable liée ne sera pas initialisée et son contenu sera indéfini (= undefined). Il suffira donc de tester le contenu de la variable avant de l'utiliser.

Attention, les arguments facultatifs doivent toujours être placés à la fin de la liste des arguments. Dans le cas contraire, il faudra taper le mot réservé undefined à la place de l'argument lors de l'appel de la fonction.

Prenons par exemple une fonction qui calcule la puissance d'un nombre. La fonction a deux paramètres : le premier sera, bien évidemment, le nombre et le second l'exposant. Si ce dernier est absent, la fonction calculera par défaut le carré du nombre.

B. LES ARGUMENTS ILLIMITÉS

Il arrive également que dans certains cas on souhaite créer une fonction avec un nombre illimité d'arguments.

Supposons, par exemple, que l'on souhaite créer une fonction qui renvoie le plus grand des nombres d'une liste dont on ne connaît pas la taille lors de la création de la fonction.

Comment faire ? En fait, c'est très simple maintenant que vous connaissez les tableaux. En effet, il faut savoir que tous les arguments envoyés à une fonction sont repris dans un tableau ayant pour nom le nom de la fonction, suivi d'un



point et du mot arguments (ex.: maxi.arguments).

13. INTRODUCTION À LA PROGRAMMATION ORIENTÉE OBJET Attention, le but de ce chapitre n'est pas de faire de vous des champions de la programmation objet. Par les explications qui suivent, je souhaite plutôt vous initier à ce nouveau monde informatique afin que vous puissiez profiter de tous les avantages qu'il apporte notamment lors de la gestion des formulaires, des écrans dynamiques, etc.

A. QU'EST-CE QU'UN OBJET ?

Un objet est une structure qui regroupe toutes les données communes à un élément. Cette structure comprend également des méthodes (≈ fonctions) permettant de traiter les données (≈ attributs). Au niveau de la programmation, cet ensemble est également appelé une classe.

Les tableaux, étudiés précédemment, sont un exemple d'objet. Nous y retrouvons les données (la taille du tableau,...) et les méthodes (splice(), sort(),...).

B. CRÉER UNE INSTANCE

Attention, un objet en tant que tel n'est pas une variable et ne peut donc être directement utilisé dans un programme comme une variable. Lorsque l'on veut utiliser un objet dans un programme, on doit d'abord en créer une (ou plusieurs) instance grâce à la commande new (ex.: new Array();).

On peut créer autant d'instances d'un objet que l'on souhaite. Chacune étant totalement indépendante des autres.



C. LES ATTRIBUTS ET MÉTHODES

Pour accéder à un attribut d'un objet (en fait, une instance de l'objet), on utilise le nom de la variable liée, suivi d'un point et du nom de l'attribut comme on l'a déjà fait dans les chapitres précédents lorsque l'on utilisait l'attribut length du tableau (ex.: voitures.length). Ces attributs sont souvent lus, mais on peut également les modifier comme nous le verrons plus loin.

On appellera les méthodes en respectant la même syntaxe que celle des attributs en n'oubliant pas les parenthèses (ex.: voitures.sort();).

D. DESTRUCTION D'UN OBJET

Lorsque l'on n'a plus besoin d'une instance d'un objet, il peut être important de la supprimer afin de récupérer de la place mémoire RAM. Pour ce faire, on affectera la valeur null à la variable liée à l'instance. Ce faisant, le système verra que l'instance n'est pointée par aucune variable et de ce fait la détruira automatiquement (ex.: voitures = null;).

E. LES OBJETS HTML

Il faut savoir que pour JavaScript, tous les éléments HTML sont des objets. On va ainsi pouvoir facilement modifier les valeurs de leurs attributs.

A tout seigneur, tout honneur ! Commençons par le premier : l'objet document qui correspond à toute la page HTML affichée dans le navigateur. Cet objet dispose de plusieurs méthodes dont une que nous avons déjà utilisée à maintes reprises : getElementById() qui permet de désigner un objet affiché à l'écran au moyen du navigateur et d'en changer certains éléments.

Jusqu'à présent, on a surtout utilisé cette fonction pour modifier le contenu d'une textarea affichée à l'écran ; mais on aurait très bien pu, comme le montre l'exemple précédent, l'utiliser pour changer la taille d'une image en utilisant l'attribut width à la place de value.

Comment connaître les noms des attributs ? C'est très simple, ils correspondent



aux noms des attributs des balises HTML (sauf l'attribut HTML class qui est renommé className en JavaScript car class est un mot réservé en JavaScript et ne peut donc être utilisé dans ce cadre-ci).

Exemples :

document.getElementById("image1").src = "autreImage.jpg";document.getElementById("image1").width = 250;document.getElementById("image1").className = "photoAgrandie";

F. LE MOT-CLÉ THIS

Il est possible de remplacer l'identifiant id par le mot-clé this désignant cet objet à la condition que le code JavaScript utilisant cet identifiant soit présent au niveau de la balise HTML de l'objet en question.

L'utilisation de ce mot-clé peut se révéler très pratique car outre le fait que cela évite parfois de définir des identifiants, cela permet surtout d'écrire des fonctions communes à différents éléments du site car elles n'ont plus besoin de connaître les identifiants de chaque élément de la page pour pouvoir les atteindre.

Exercices :


14. JAVASCRIPT ET LES FEUILLES DE STYLE Il est relativement facile de modifier la valeur d'un style CSS pour un élément à partir d'une commande JavaScript. Pour ce faire, il suffira d'appliquer la même technique que celle utilisée pour accéder aux attributs d'une balise. L'attribut à modifier, dans ce cas-ci, est style et la propriété sera



généralement accessible sous le nom reformaté selon la méthode suivante :- Prendre le nom CSS (ex : font-size)- Mettre la lettre qui suit le - en majuscule (ex : font-Size)- Effacer le - (ex : fontSize)→ Ce qui donne style.fontSize

Pour modifier la couleur d'arrière-plan d'un élément "resultat", on écrira la commande suivante :

N'oublions pas que l'on peut également associer l'élément à une autre classe en modifiant son attribut HTML class (renommé className en JavaScript).

Une autre utilisation fréquente de JavaScript est le fait d'afficher/masquer un élément en fonction de la demande de l'internaute. Cette fonction est utilisée, par exemple, dans les écrans "FAQ" (Frequently Asked Questions). Ces écrans affichent les questions que les visiteurs du site posent régulièrement. Le système fera en sorte que, lorsque l'internaute cliquera sur une question, la réponse correspondante soit affichée à l'écran ; puis masquée lorsque l'internaute cliquera à nouveau.

Pour cela, il suffira d'utiliser les propriétés visibility et display. Ces styles n'ayant pas été étudiés précédemment, voyons-les maintenant.

Les valeurs de visibility sont notamment hidden et visible ; les valeurs de display sont notamment none et block. Lorsqu'un élément est "hidden", cela veut dire qu'il est invisible à l'écran, mais que sa place est conservée sur la page. Lorsqu'un élément a sa propriété display à "none", cela veut dire que l'élément est invisible à l'écran et que sa place n'est pas conservée. En d'autres mots, c'est comme si l'élément n'existait pas.

L'exemple suivant vous montrera la différence qu'il y a entre les deux propriétés.

Exercices :




15. POO SPÉCIFIQUE AUX FORMULAIRES Le but de ce chapitre est de vous expliquer comment on peut atteindre les champs d'un formulaire au moyen de JavaScript afin de pouvoir effectuer des contrôles, calculs, etc. sur les données introduites par l'internaute.

Rappelons qu'une vérification effectuée uniquement au moyen de JavaScript n'est pas suffisante pour la simple et bonne raison que l'internaute peut facilement désactiver ce code. Dans ce cas, aucun contrôle ne serait effectué ! C'est pourquoi, on contrôlera toujours les données sur le serveur. Toutefois, on continuera à tester les données en JavaScript car cette "pré-vérification" a des avantages tels que :

- l'internaute peut être prévenu dès qu'un champ est mal rempli ;- gain de temps car le contrôle se fait localement sans appeler le serveur.

A. LES GESTIONNAIRES D'ÉVÉNEMENTS ONSUBMIT ET ONRESET

Les gestionnaires d'événements onsubmit et onreset sont très intéressants dans le cadre du contrôle des données d'un formulaire. En effet, en associant ces gestionnaires, le formulaire et du code JavaScript, on va pouvoir faire en sorte d'effectuer des opérations telles que le contrôle des champs du formulaire, etc. lorsque l'internaute cliquera sur le bouton Submit ou le bouton Reset.

Pour rappel, l'événement onsubmit est généré lorsque l'internaute clique sur le bouton pour envoyer le formulaire. Cela nous permet donc de contrôler toutes les données du formulaire avant de procéder à son envoi ou, au contraire, de bloquer l'envoi afin que l'internaute puisse corriger les éventuelles erreurs. Comment faire ? En fait, c'est très simple ! Si l'on regarde l'exemple suivant, on remarquera que l'on renvoie au gestionnaire de l'événement une valeur booléenne. Si celle-ci vaut true, l'événement continue la procédure normale. Si elle vaut false, la procédure est directement stoppée.

Suivant la même logique, le gestionnaire d'événement onreset permet de demander une confirmation avant d'annuler l'encodage en cours du formulaire.

B. ACCÉDER AUX ÉLÉMENTS DU FORMULAIRE

L'accès aux éléments peut se faire de plusieurs manières. La première, déjà étudiée, consiste à atteindre un élément via son id.

Il existe toutefois une autre méthode. En effet, les éléments d'un formulaire sont souvent identifiés via l'attribut name à la place d'un id. Dans ce cas, on utilisera la syntaxe suivante à condition que le formulaire lui-même soit identifié grâce à un id.



Cette manière de faire consiste à :1) Récupérer tous les éléments du formulaire dans un tableau via la

commande document.getElementById("idForm")2) Sélectionner dans le tableau elements l'élément souhaité en utilisant

son name comme indice3) Accéder à l'attribut souhaité

Les éléments présents dans un formulaire pouvant être de types fort différents, les attributs, etc. disponibles le sont donc aussi. C'est pourquoi nous allons les étudier séparément (voir suite du cours). Toutefois, tous les éléments d'un formulaire possèdent les attributs :

- form : le formulaire auquel appartient l'élément (plus utilisé lorsque le formulaire est transmis à une fonction via this)

- name : le nom de l'élément- type : le type de l'objet (button, select, textarea ou la valeur de

l'attribut type pour les éléments input)

C. MÉTHODES SPÉCIFIQUES AUX FORMULAIRES

Certaines méthodes et gestionnaires d'événements liés aux formulaires sont très intéressants. En effet, ils permettent de traiter l'arrivée et le départ d'un élément, moments propices à certains contrôles, etc. Etudions les plus importants.

La méthode focus() place le focus dans ou sur l'élément indiqué.

Le gestionnaire d'événement correspondant onfocus permet d'effectuer, quant à lui, un traitement quand l'internaute accède à l'élément lié. De même, onblur sera défini si l'on souhaite effectuer un traitement lorsque l'élément perd le focus. Il se peut que l'on ne souhaite effectuer un traitement que si l'élément change de valeur ; dans ce cas, on utilisera onchange.

D. ETUDE DÉTAILLÉE DES ÉLÉMENTS D'UN FORMULAIRE

Etudions à présent différents éléments que l'on retrouve régulièrement dans les formulaires (un exemple global sera donné à la fin du chapitre).

Avant toute chose, précisons que les éléments du formulaire sont fort semblables aux objets du document et donc suivent les mêmes règles. En d'autres mots, comme avec les objets qui nous viennent du document, de nombreux attributs qui sont présents en HTML sont accessibles en JavaScript.

Cas 1 : Eléments <input> des types text et password

Les premiers attributs modifiables sont bien évidemment les attributs HTML liés déjà étudiés ; à savoir : value, size et maxLength. Mais nous pouvons également ajouter à cette liste les attributs disabled et readOnly.

L'attribut disabled, comme son nom le laisse entendre, permet de définir le degré d'activité d'une zone. Si cet attribut vaut true, la zone est inactive.



Dans ce cas, elle sera grisée et non modifiable.

Quant à l'attribut readOnly, il est semblable à disabled à l'exception du fait qu'il ne met pas la zone en grisé.

Cas 2 : Eléments <input> du type hidden

Les éléments de ce type n'ayant pas besoin de beaucoup d'attributs pour remplir leur rôle, on utilisera principalement l'attribut HTML value de la balise.

Cas 3 : Zones textarea

Les attributs modifiables de ces zones sont fort semblables à ceux des éléments text et password. Les attributs de taille (size et maxLength) sont remplacés par rows et cols. Les attributs modifiables sont donc : value, rows, cols, disabled et readOnly.

Grâce à l'attribut readOnly, ces zones sont fort utilisées pour afficher des informations à l'internaute en lieu et place de boîtes de dialogue.

Cas 4 : Les boutons

Ce cas reprend tous les éléments définis au moyen de la balise <button>, mais aussi les éléments <input> des types button, submit et reset.

Les principaux attributs modifiables sont value et disabled.

Cas 5 : Les boutons radios et les cases à cocher

Les principaux attributs modifiables sont value et disabled ; mais également checked. Ce dernier permet de connaître et de modifier le statut d'un bouton radio ou d'une case à cocher.

Voici un premier exemple qui montre une manière de procéder lorsque l'on veut tester la valeur d'une simple case à cocher (on applique le même principe pour un simple bouton radio) :



On peut procéder de manière similaire lorsque l'on a plusieurs cases à cocher (ou boutons radios), mais ce n'est pas très pratique. Ou alors, on peut utiliser une autre technique très pratique dans ce cas-ci. Cette technique consiste à référencer les éléments du formulaire, pas au moyen de leur identifiant id, mais grâce à leur nom et un indice (C'est un peu le même principe que pour accéder aux arguments illimités d'une fonction).

Dans l'exemple suivant, on peut constater que les différentes cases à cocher font partie d'un même groupe portant le nom "voiture". C'est également le nom du tableau indicé correspondant aux cases à cocher que l'on utilisera dans la fonction afin de faciliter le traitement.

Cette seconde technique permet aussi d'ajouter facilement de nouvelles cases à cocher au groupe sans devoir changer tout le programme.

Cas 6 : Les listes

Au niveau de la logique de traitement, les listes ont plusieurs points communs avec les cases à cocher.

Les principaux attributs sont value et disabled ; mais également multiple, selected et selectedIndex.

L'attribut multiple indique si l'internaute peut sélectionner un ou plusieurs éléments de la liste. Ses valeurs sont donc false et true.

L'attribut selected indique si l'élément de la liste est sélectionné ou non. A nouveau, ses valeurs sont donc false et true. Notons que JavaScript peut aussi utiliser cet attribut pour changer l'état de sélection d'un élément de la liste en fonction de certains critères décrits dans le programme.



L'attribut selectedIndex indique l'indice du premier élément de la liste sélectionné. Si aucun élément n'est sélectionné, sa valeur sera égale à -1.

Voici un premier exemple du traitement d'une liste. La fonction affichant la liste des valeurs sélectionnées sera appelée à chaque changement de sélection opéré dans la liste.

Remarquons qu'il est possible d'écrire le même traitement de manière plus efficace et plus propre en utilisant this lors de l'appel à la fonction.



Exemple global :

Ceci est un simple exemple de formulaire avec différents types de zones et de contrôles. Des commentaires sont mis dans le programme afin que vous puissiez plus facilement comprendre les différentes commandes du code. Lisez-les !





Exercices :


16. LES OBJETS JAVASCRIPT EN DÉTAIL Nous avons déjà étudié une partie importante de JavaScript, mais il nous reste encore plusieurs points à approfondir. Les concepteurs de ce langage ont défini plusieurs objets tels que les Array, etc. pour faciliter notre travail de programmation. Nous avons déjà pu en utiliser quelques uns précédemment, mais je vous propose de les voir de manière plus détaillée à présent.

A. MATH

Commençons par l'objet Math qui regroupe plusieurs méthodes bien utiles.

Ces méthodes sont dites "statiques". Cela signifie qu'elles ne sont pas liées à une instance de l'objet et qu'elles sont donc utilisables à tout moment (En d'autres mots, il n'est pas nécessaire de créer une instance de l'objet au moyen d'une commande du type new Math()). Toutefois, il est obligatoire de faire précéder leur nom de Math. afin que JavaScript sache que les méthodes appelées



appartiennent à cet objet.

- La fonction min(valeurs) renvoie la plus petite valeur des paramètres donnés.

- La fonction max(valeurs) renvoie la plus grande valeur des paramètres donnés.

- La fonction abs(valeur) renvoie la valeur absolue du paramètre donné.

- La fonction round(valeur) renvoie un nombre entier correspondant à la valeur du paramètre arrondie à l'unité (0 décimale).

Mais, comment faire si l'on souhaite arrondir un nombre à la deuxième décimale ? Il n'y a pas moyen de le faire directement avec round(), c'est pourquoi on utilisera l'objet Number (voir ci-après).

- La fonction pow(x,y) renvoie la valeur de x exposant y.

- La fonction sqrt(valeur) renvoie la racine carrée du paramètre donné.

Notons que cette fonction peut être remplacée par Math.pow(valeur,0.5). En effet, extraire la racine carrée d'un nombre revient à l'élever à la puissance ½.

- La fonction random() renvoie une valeur aléatoire comprise entre 0 et 1.

Cette fonction est souvent utilisée dans les jeux ou pour améliorer la sécurité (ex.: Dans un formulaire, l'internaute devra encoder une valeur aléatoire affichée à l'écran afin de confirmer qu'il est bien une personne et pas un programme qui a pour seul but de surcharger votre messagerie en vous envoyant des milliers de mails).

- Le dernier élément à voir pour l'objet Math n'est pas une fonction, mais une constante (= une variable dont la valeur est définie à l'initialisation et ne varie plus par après). Cette constante est PI.

Attention, cet élément n'étant pas une fonction, on ne met pas de () à la suite de son nom !

B. NUMBER

L'objet Number est à associer avec l'objet Math. En effet, il n'a pas beaucoup de méthodes, mais il permet d'arrondir un nombre et d'afficher le nombre de décimales souhaité. Pour cela, il suffit d'utiliser la méthode toFixed(dec). Le paramètre permet d'indiquer le nombre de décimales souhaité. S'il est absent, on considérera qu'il vaut 0.



C. STRING

Un autre objet bien utile est l'objet String.

Les méthodes de cette classe ne sont pas statiques et sont donc liées à une instance de la classe. Lors de leur utilisation, il faut donc faire précéder leur nom du nom de la variable String concernée et d'un point.

En voici quelques exemples :

- length permet de connaître la longueur d'une String. Attention, length est une variable. On ne mettra donc pas les () après son nom.

- toLowerCase() renvoie une String correspondant au contenu de la String initiale dont toutes les majuscules sont remplacées par des minuscules. Notons bien que la String originale n'est pas modifiée (sauf si on lui assigne la nouvelle valeur via txt = txt.toLowerCase();).

- toUpperCase() est identique à toLowerCase() excepté le fait qu'elle transforme toutes les minuscules de la String initiale en majuscules. Cette méthode est souvent utilisée dans les formulaires ou zones d'encodage pour remplacer systématiquement lors de la frappe (événement onkeyup) toutes les lettres tapées par l'internaute par des majuscules.

- concat(...) renvoie la concaténation de 2 Strings. Elle est équivalente au +.

- charAt(pos) renvoie le caractère se trouvant à la position donnée en paramètre (position 0 = le premier caractère ; le dernier caractère = position length-1).



- indexOf(str, pos) renvoie la position de la première occurrence de la string donnée en paramètre trouvée à partir de la position spécifiée au niveau du second paramètre (ce dernier n'étant pas obligatoire, la recherche s'effectuera à partir du début de la String en cas d'absence). Si la recherche n'a pas trouvé la String demandée, la fonction renverra la valeur -1. Attention, la recherche est "case sensitive", c'est-à-dire respecte la casse ou, en d'autres mots, les majuscules ne sont pas égales aux minuscules.

- lastIndexOf(str, pos) renvoie la position de la dernière occurrence de la string donnée en paramètre trouvée avant la position spécifiée au niveau du second paramètre (ce dernier n'étant pas obligatoire, la recherche s'effectuera jusqu'à la fin de la String en cas d'absence). Si la recherche n'a pas trouvé la String demandée, la fonction renverra la valeur -1. Attention, la recherche est "case sensitive".

- replace(str1,str2) renvoie une String dont le contenu est égal à la String dont la première occurrence trouvée de la String str1 donnée en paramètre est remplacée par la String str2 donnée comme second paramètre.

- Les deux méthodes suivantes renvoient, toutes les deux, une String dont le contenu est une partie de la String initiale.- substring(posDeb, posFin) renvoie une String dont le contenu correspond aux

caractères de la String initiale se trouvant entre la position de début posDeb donnée comme premier paramètre incluse et la position de fin posFin donnée comme second paramètre (exclue) ou la fin de la String initiale si le second paramètre n'est pas spécifié.

- substr(posDeb, nbrCar) a la même fonctionnalité que la méthode précédente, mais ici le second paramètre est remplacé par un nombre indiquant le nombre de caractères à copier de la String initiale. Comme pour la méthode précédente, si le second paramètre est absent, tous les caractères se trouvant à partir de la position posDeb jusqu'à la fin de la String seront copiés.

D. ARRAY

Revenons à présent sur un objet déjà étudié en partie, l'Array (ou tableau), afin de découvrir d'autres fonctions qui pourraient nous être utiles lors de la



création de nos futurs sites.

- reverse() inverse l'ordre actuel des éléments du tableau. Cette fonction modifiant directement le tableau lié, il n'est pas nécessaire d'affecter le résultat.

- join(str) renvoie une String composée de tous les éléments du tableau séparés soit par le séparateur contenu dans la String donnée en paramètre, soit par une virgule lorsque aucun paramètre n'est envoyé à la fonction.

- toString() correspond à la fonction join() sans paramètre.

- concat(tab1,...) renvoie un tableau qui est la concaténation du tableau initial et du (ou des) tableau envoyé en paramètre.

- push(element1,...) ajoute les différents éléments (= les paramètres) à la fin du tableau et renvoie la nouvelle longueur du tableau. Attention, cette fonction modifie directement le tableau lié !

- pop() supprime le dernier élément du tableau et le renvoie. Attention, cette fonction modifie directement le tableau lié !

- shift() supprime le premier élément du tableau et le renvoie. Attention, cette fonction modifie directement le tableau lié !

- slice(posDeb, posFin) renvoie une nouvelle Array composée d'éléments repris du tableau initial sans pour autant modifier celui-ci. Les éléments repris dans le nouveau tableau sont ceux du tableau initial situés aux positions allant de posDeb (inclus) à posFin (exclu).Si, lors de l'appel de la fonction, on ne précise pas le second paramètre, elle considérera que le dernier élément à reprendre est le dernier élément du tableau initial.Il est également possible de spécifier les positions au moyen de nombres négatifs. Dans ce cas, la fonction référencera les éléments du tableau initial à partir de la fin de celui-ci (ex.: -1 = le dernier élément du tableau, -2 = l'avant-dernier,...).



E. TIMING EVENTS

Les "Timing events" permettent d'exécuter certaines commandes après un certain intervalle de temps. Ils sont gérés au moyen des fonctions suivantes :

- setTimeout("commande JS", millisecondes) exécute la commande JS dans le futur en tenant compte du délai d'exécution demandé au moyen du second paramètre.

Attention, le programme continue à s'exécuter pendant ce temps. Notons encore que cette fonction renvoie une valeur (un pointeur) qui permet d'identifier ce timing event afin, éventuellement, de l'annuler par la suite.

- clearTimeout(identifiant) permet d'annuler la commande setTimeout() dont l'identifiant est passé en paramètre.



F. DATE

L'objet Date est utilisé lorsque l'on veut travailler avec des dates, des heures ou des durées.

Avant toute utilisation des méthodes, il faut avoir créé au moins une instance de l'objet. Il existe pour cela plusieurs possibilités dont les suivantes :

- new Date() pour avoir la date et l'heure en cours.

- new Date('mm/jj/aaaa') pour avoir la date spécifiée en paramètre sous le format d'une String mois/jour/année. L'heure sera égale à 0h00'00.

- new Date(année,mois,jour,heures,min,sec,millisecondes) pour avoir la date et l'heure exactes indiquées au moyen des paramètres. Si les derniers paramètres non obligatoires sont omis, la méthode considérera qu'ils valent 0.

Attention, regardez la valeur du mois dans les exemples lorsqu'elle est exprimée au moyen d'un nombre en dehors d'une date complète... Et oui, cet objet travaille avec des mois numérotés de 0 (janvier) à 11 (décembre) !

Dès que l'instance a été créée, on peut utiliser un grand nombre de méthodes :

- getFullYear() retourne l'année en 4 chiffres.

- getMonth() retourne le mois (de 0 à 11). Pour afficher le mois en lettres en français, on procédera de la manière suivante :

- getDate() retourne le jour du mois (de 1 à 31).

- getDay() retourne le jour de la semaine (de 0 pour dimanche à 6 pour samedi). Pour afficher le jour de la semaine en lettres en français :

- getHours() retourne les heures (de 0 à 23).

- getMinutes() retourne les minutes (de 0 à 59).

- getSeconds() retourne les secondes (de 0 à 59).

Mais également leurs contraires :

- setFullYear(nbr) modifie l'année de la date.

- setMonth(nbr) modifie le mois (de 0 à 11).



- setDate(nbr) modifie le jour (de 1 à 31).

- setHours(nbr) modifie les heures (de 0 à 23).

- setMinutes(nbr) modifie les minutes (de 0 à 59).

- setSeconds(nbr) modifie les secondes (de 0 à 59).

Et aussi :

- toDateString() convertit une date en un format lisible... en anglais ! (ex.: Tue Aug 10 2010).

- toLocaleTimeString() convertit une heure en un format lisible (ex.: 3:01:26).

De plus, on peut facilement manipuler les dates grâce aux fonctions disponibles.

- Pour définir la date du 10/08/2010, on peut aussi procéder ainsi :

- De même, on peut demander de calculer la date qu'il sera dans 32 jours :

- On peut également tester la chronologie de deux dates :

C'est notamment grâce à l'objet Date que l'on peut afficher une horloge digitale à l'écran. Cet exemple affiche l'heure sous le format __h__m__s :



Exercice :




17. PARTIE "DÉPASSEMENTS"

A. REDIRIGER VERS UN AUTRE SITE APRÈS QUELQUES SECONDES

Il arrive fréquemment dans les sites professionnels que le webmaster souhaite rediriger automatiquement l'internaute vers un autre site après quelques secondes.

Cela arrive notamment lorsque des sociétés ont réservé plusieurs URLs pour un même site. Cette pratique permet aux internautes d'accéder au site de la société même lorsqu'ils ne connaissent pas l'adresse exacte du site (ex.: .be, .com).

Nous avons vu que l'on peut effectuer cette redirection à partir de la balise "meta refresh" ou du fichier .htaccess. On peut également le faire en JavaScript ce qui permet éventuellement de choisir le nouveau site en fonction de certains critères. En JavaScript, cette redirection s'effectue au moyen de la commande window.location.replace("url") dans laquelle on remplacera le mot url par l'adresse du site vers lequel on veut rediriger l'internaute.

B. DIVERSES FONCTIONS

Cette partie reprend différentes fonctions pouvant être fort utiles pour la création d'un site. Toutefois, je donnerai peu d'explications pour celles-ci car elles dépassent le cadre du cours.

L'objet navigator donne des renseignements sur le browser utilisé par l'internaute.- appName donne le nom du browser.- appVersion donne des informations sur la version du browser.- cookieEnabled indique si les cookies sont autorisés.

L'objet screen permet d'avoir des informations sur l'écran de l'internaute.- height donne la hauteur de l'écran.- width donne la largeur de l'écran.- availHeight donne la hauteur disponible de l'écran (sans la barre de tâche).- availWidth donne la largeur disponible de l'écran (sans la barre de tâche).

L'objet window permet de gérer une nouvelle fenêtre.- open(url,'',spec) ouvre une nouvelle fenêtre. Le système accédera directement

à l'url si elle est précisée ; dans le cas contraire, une fenêtre vide sera affichée. La String spec peut contenir plusieurs spécificités telles que la taille de la fenêtre.

- moveTo(x,y) repositionne la fenêtre sur l'écran.



- focus() place le focus dans la fenêtre.- close() ferme la fenêtre.- closed est un booléen qui permet de savoir si la fenêtre est fermée.

C. METTRE UN PLAN EN VALEUR

Nous pourrions avoir beaucoup d'exemples qui illustrent l'utilité de JavaScript. Mais ce n'est pas le but de ce cours. Voyons néanmoins encore un exemple. Exemple que vous pourriez d'ailleurs essayer de réaliser à titre d'exercice...

Le but de la page web que l'on veut créer est d'afficher la carte d'un quartier et une liste de certains monuments/sites à visiter. Afin d'aider les touristes, il faut faire en sorte que lorsque l'internaute place le pointeur de la souris sur un des éléments de la liste, une flèche apparaisse sur la carte et indique la position correspondant à l'élément pointé par l'internaute dans la liste.

Exemple :

Pour ce faire :- On partira du principe que la carte aura toujours la même taille à l'écran.



- On utilise 2 images : le plan et l'image d'une flèche sur un fond transparent.

Solutions :Il existe plusieurs manières de réaliser cette page. En voici deux.

Cette première version est plus simple à comprendre pour les programmeurs débutants, mais est moins facilement adaptable si l'on change la carte ou la liste des monuments à visiter.

Dans la seconde solution, on a une seule flèche que l'on déplace sur la carte en modifiant ses coordonnées (top, left) à chaque fois que l'internaute pointe sur un élément de la liste des monuments. Lorsqu'il quitte la liste, il suffit de remettre la flèche en arrière-plan pour qu'elle soit invisible.



Les coordonnées des différents monuments sont sauvées dans les Array posTop et posLeft. Les positions dans les Array correspondent aux positions dans la liste à l'écran.

Cette version-ci du code peut facilement être adaptée à différentes cartes et différentes listes de monuments. En effet, il suffit de modifier la source de l'image de la carte, la liste des monuments et les positions de ceux-ci sur la carte. Il n'est donc pas nécessaire de créer une image flèche par monument, un style pour chaque flèche, etc.

D. LES COOKIES

Un cookie est un petit fichier stocké sur le pc "client" contenant différentes



informations. Chaque fois que l'internaute demande d'accéder à un site via son navigateur, ce dernier envoie également automatiquement dans sa requête le cookie lié au site.

Les informations contenues dans les cookies dépendent du site. En effet, c'est ce dernier qui décide de ce qui lui est utile de retenir. Cela peut être la langue de l'internaute, mais également son nom, un mot de passe, etc.

De même, les créateurs du site décideront de la durée de vie qu'ils souhaitent attribuer aux cookies créés. Faut-il les garder durant plusieurs années ou au contraire ne doivent-ils servir que durant la session en cours ? En effet, certains cookies ne sont créés que pour transmettre des informations de page en page au sein du site.

Composition d'un cookie :

Un cookie est un simple fichier texte contenant différentes variables. Celles-ci sont écrites en respectant la syntaxe nomVar=ValeurVar (nom de la variable, suivi de =, suivi de sa valeur). On ajoute souvent à cette chaîne d'autres paramètres tels que la durée de validité du cookie, etc. Tous les paramètres ainsi que les différentes variables sont séparés par un point-virgule.

Création d'un cookie :

Créer un cookie est quelque chose de très simple. Il suffit de formater la chaîne de caractères, de préciser les différents paramètres et d'assigner l'ensemble à l'objet cookie.



Les deux premiers paramètres (c_nom et valeur dans l'exemple) sont bien évidemment les deux paramètres les plus importants et sont donc obligatoires. Ils représentent le nom de la variable cookie et sa valeur.Notons que la valeur est transformée par la fonction escape() afin d'écrire les caractères spéciaux sous la forme de codes afin qu'ils ne soient pas interprétés comme commandes lors de la lecture du cookie.

Le paramètre suivant, expires, indique la date d'expiration de la valeur. A partir de cette date, les renseignements stockés seront supprimés. Dans le cas où aucune valeur n'est précisée, la variable sera détruite à la fermeture du navigateur. Attention, la date doit être sauvée sous un format bien précis !

Seules les pages du dossier spécifié au moyen du paramètre path ou les pages de ses dossiers "enfants" pourront accéder au cookie. Si ce paramètre est absent, sa valeur sera le nom du répertoire dans lequel se trouve la page contenant le script de création du cookie. Si l'on met la valeur "/", représentant le dossier racine du site, le cookie sera accessible par toutes les pages du site.

Lecture d'un cookie :

Pour récupérer la valeur d'une variable contenue dans un cookie, il faut rechercher dans la chaîne de caractères composant le cookie, le nom de la variable souhaitée. Sa valeur, quant à elle, se trouve simplement juste après le signe = situé après son nom et est délimitée par le point-virgule.Nous n'oublierons pas d'utiliser la fonction unescape() ayant le rôle inverse de la fonction escape().

Supprimer un cookie :

On ne sait pas supprimer un cookie directement en JavaScript. Mais on peut le faire indirectement en redéfinissant le cookie et en lui donnant une date d'expiration dépassée. Il sera ainsi supprimé par le navigateur.

Cookies acceptés par le pc ?

Il est possible que le navigateur du pc client n'accepte pas les cookies.



Pour le savoir, une des méthodes est de faire un test avec la propriété cookieEnabled de l'objet navigator qui renvoie true ou false suivant que les cookies sont autorisés ou non.

Mais cette méthode peut ne pas fonctionner sur tous les navigateurs. Dans ce cas, il suffira tout simplement de créer un cookie et essayer de le relire. Si on peut le récupérer, cela signifie que les cookies sont acceptés.

Exercice :