Développement d applications Web

Transcription

1 Développement d applications Web Licence professionnelle ASRALL Auteur : Philippe Dos Date : 2013/2014 UNIVERSITÉ DE LORRAINE INSTITUT UNIVERSITAIRE DE TECHNOLOGIE 2 ter boulevard Charlemagne CS NANCY cedex Tél : Fax :

2 2

3 Sommaire I Développement Web, côté client 8 1 Le langage HTML 9 1 Introduction à HTML 9 1 Contexte 9 2 Le point de départ : SGML 10 3 Généralités sur HTML 11 4 Structure d un document HTML 11 2 Syntaxe de HTML 12 3 Les balises de HTML 13 1 Les balises courantes 14 2 Les liens 14 3 Les images 14 4 Les tableaux 15 5 Gestion des listes 17 6 Les formulaires 18 4 Les metas informations 20 5 HTML Validation de documents HTML 21 7 Liens 22 2 Les feuilles de styles CSS 23 1 Introduction 23 2 Définition des styles 24 1 Introduction 24 2 Définition dans une balise 24 3 Définition pour un document 24 4 Définition dans un fichier extérieur 25 3 elques balises HTML supplémentaires 26 4 Propriétés de styles générales 27 5 Classes de styles 28 1 Les classes régulières 29 2 Les classes génériques 29 3 Les classes ID 30 4 Les pseudo-classes 30 6 Priorités des styles 30 7 Et encore 31 8 Conclusion 32 3 Conception de pages Web 33 3

4 1 Introduction 33 2 Principes de conception 33 1 Notion de hiérarchie visuelle 33 2 Dimensions de la page 34 3 Grilles de conception 35 3 Conception technique de pages Web 36 1 Généralités 36 2 Utilisation des feuilles de styles 36 4 Responsive Web design 39 1 Contexte 39 2 Les Media queries 39 5 Références 40 4 Le langage JavaScript 41 1 Introduction 41 2 Types de données 42 3 Variables 44 4 Conversion de types 45 5 Opérateurs 46 6 Les structures de contrôle 47 1 Les conditionnelles 47 2 Les boucles 48 7 Les fonctions 49 8 Les tableaux 50 9 Les objets Liens 51 5 Interfaçage de JavaScript 52 1 elques manipulations de base 52 2 Introduction à l objet document 53 3 Communication avec les navigateurs 54 4 L objet window 55 5 Gestion des formulaires 57 6 Gestion des images 59 1 Propriétés d images 59 2 Les rollovers 59 7 Les dates 61 1 Création 61 2 Méthodes associées 61 8 HTML «dynamique» (DHTML) 62 1 Introduction 62 2 Propriétés liées au DHTML 62 3 AJAX 64 9 Compatibilité des sites Web 65 1 Introduction 65 2 elques méthodes possibles 65 3 elques exemples 66 4 Derniers conseils sur quelques idées reçues 67 6 Le langage XML 68 1 Rappels sur SGML 68 2 Description du langage XML 68 1 Introduction 68 4 Sommaire

5 2 Syntaxe 69 3 Représentation graphique 71 3 Introduction aux DTD 72 1 Déclaration d éléments 72 2 Déclaration d a ributs 73 4 XML et DTD 74 II Développement Web, côté serveur : le langage PHP 75 7 Introduction 76 1 Pages Web statiques 76 2 Pages Web dynamiques 77 3 Les moteurs 77 4 Le moteur PHP 78 1 Introduction 78 2 Historique de PHP 78 3 elle configuration? 78 8 Le langage PHP 80 1 Premiers pas 80 1 Exemples introductifs 80 2 Principes de fonctionnement 81 2 Les variables 82 1 Généralités 82 2 Variables globales et superglobales 83 3 Les types de données 84 1 Les types scalaires 84 2 Introduction aux tableaux 85 3 Les tableaux associatifs 86 4 Les objets 87 5 Les conversions (transtypage) 87 6 Les constantes 88 4 Manipulations de base 89 1 Les opérateurs 89 2 Exemples de fonctions relatives aux chaînes 91 3 Manipulation de tableaux 91 5 Les structures de contrôle 93 1 Les conditionnelles 93 2 Les boucles 93 3 Les branchements 94 6 Les fonctions 95 1 Introduction 95 2 Définition 95 3 Variables locales 97 7 Liens 98 9 Les formulaires 99 1 Interfaçage avec les formulaires 99 2 Considérations liées aux formulaires Organisation Étude de différents éléments Raccorder plusieurs actions à un formulaire 102 Sommaire 5

6 10 Les objets Contexte Bases de la conception objet Classes et objets en PHP Définition d une classe Méthodes et a ributs Création / utilisation d objets Les constructeurs L héritage Les nouveautés de PHP Cookies et sessions Les cookies Introduction Les cookies en PHP La fonction header() Les sessions Gestion de session Variables de session Exemples typiques d utilisation des sessions Connexion aux SGBD Introduction Connexion à MySQL grâce à PDO Encore plus loin : les active record Conclusion Étude de quelques fonctionnalités PHP Inclusion de fichiers Syntaxe Commentaires Chargement automatique de classes Les entrées-sorties sur fichiers Les expressions régulières Introduction Syntaxe des expressions régulières Expressions régulières et PHP Le mail Interfaçage à XML Introduction SimpleXML Documents PDF et PHP Langages de balisage légers Introduction phphaml AJAX Quelques éléments de sécurité Contrôle des erreurs en PHP Étude de sites de piratage (JavaScript) Les failles d injection A aques XSS et CSRF A aques XSS Sommaire

7 2 A aques CSRF Et encore 150 Document réalisé sous Linux avec (X)Emacs et compilé grâce à XƎL A TEX Style de présentation librement inspiré de la classe joinreport ( Jonathan Aceituno) Sommaire 7

8 Première partie Développement Web, côté client 8

9 CHAPITRE 1 Le langage HTML 1 Introduction à HTML 1 Contexte Historique Création de HTML en 1989 par Tim Berners-Lee au CERN HTML : Hyper Text Markup Language (langage de balisages et de liens hypertexte) est un langage perme ant de structurer logiquement les documents Décollage après la mise au point d un navigateur par des étudiants du NCSA (National Center for Supercomputing Applications) : Mosaic support du HTML support d autres services : FTP, Gopher Netscape et Explorer ont ensuite emboîté le pas Standard et normalisation HTML a initialement été utilisé à partir de spécifications assez informelles Après son essor, une standardisation est devenue nécessaire pour faciliter la création et le partage de documents Création du W3C (World Wide Web Consortium) rôle : spécifier toutes les technologies liées à W3 en particulier : HTML, HTTP, CSS, XML, XHTML Normalisation : 4 versions majeures en 8 ans La version actuelle reste la 401, même si la norme 5 est proche d être publiée et que de nombreux navigateurs commencent à la supporter, au moins partiellement Depuis la version 401, les éditeurs de navigateurs se conforment prioritairement à la norme, même s ils gardent une petite marge de manœuvre HTML est plus stable depuis la version 401 et évolue maintenant avec la version 5 pour intégrer de nouvelles fonctionnalités Parallèlement à HTML/SGML, le W3C a mis au point XML HTML n est pas compatible avec XML, d où une redéfinition compatible : XHTML 9

10 Cependant, XHTML a du mal à percer étant donné les usages plus applications que documents qui sont faits aujourd hui du Web Le HTML 5 est passé en «Candidate Recommandation» en décembre 2012 Cela implique le gel des fonctionnalités associées et ainsi des spécifications stables pour les développeurs et les éditeurs de navigateur Les changements techniques entre la version 4 et la version 5 sont détaillés sur le site du W3C à l adresse 1 elques éléments de présentation de la future norme 5 sont disponibles page 21 Extensions de HTML Des navigateurs proposent des extensions à HTML, parfois a rayantes, mais engendrant des problèmes d incompatibilités entre navigateurs Attention : les documents disponibles sur le Web sont a priori destinés à une diffusion la large possible Recommandation : éviter, autant que possible, l utilisation d extensions ou de bogues La référence n est donc ni Firefox, ni Explorer, mais la norme Objectifs d HTML/XHTML HTML et XHTML sont des langages de présentation de documents hypertextes Important : ces langages ont pour objectif de définir la structure d un document, et non pas, à l instar des traitements de texte, de le formater raisons techniques : différences de plates-formes, de navigateurs, de résolution, de couleurs, d environnements raisons logiques : ils sont axés sur la description, pas sur le rendu 2 Le point de départ : SGML Introduction SGML : Standard Generalized Markup Language (langage généralisé de balisage) SGML est une évolution de GML, créé en 1969 chez IBM, et a été normalisé en 1986 C est un standard international utilisé pour la définition de méthodes de représentation de texte sous une forme électronique indépendamment du matériel ou des systèmes utilisés SGML est un langage de balisage (ou encore de description) perme ant de décrire la structure logique d un document Utiliser SGML sur un document consiste à y insérer des balises délimitant ses éléments logiques Par exemple, en considérant les éléments logiques suivants : chapitre, paragraphe, note de bas de page, on peut décrire un document comme ci-après 1 <chapitre> 2 Introduction à SGML 3 <paragraphe> 4 L objectif de ce document est de 5 montrer à quoi sert SGML 6 <note> 7 SGML est devenu norme ISO en De nombreux sites analysent ces différences au niveau des usages, comme par exemple 10 Chapitre 1 Le langage HTML

11 8 </note> 9 </paragraphe> 10 <paragraphe> </paragraphe> 11 </chapitre> Pour assurer une cohérence au balisage, SGML est toujours accompagné d un «schéma» décrivant les éléments logiques pouvant apparaître (énumération) la manière dont ils se combinent entre eux (par exemple un chapitre peut-il contenir des paragraphes et inversement?) Les DTD Ce schéma est appelé DTD (Document Type Definition) HTML est une DTD SGML XML, annoncé comme le futur méta-langage de description de données, est une évolution de SGML Une nouvelle mouture de HTML existe, correspondant à une DTD XML : c est XHTML 3 Généralités sur HTML Les balises HTML sont de la forme <balise> (balise de début) et </balise> (balise de fin) Chaque balise ouverte doit être fermée (sauf rares exceptions) Pas de distinction majuscule / minuscule au niveau du langage en lui-même XHTML, successeur présumé de HTML, n acceptera cependant plus que les minuscules Il est donc recommandé de n utiliser que les minuscules pour les balises HTML Il est possible d imbriquer plusieurs balises : les balises doivent alors être refermées dans l ordre inverse de leur ouverture Un document HTML est un simple fichier texte : il est donc manipulable avec n importe quel éditeur de texte L indentation n est pas obligatoire, mais elle facilite la lisibilité des documents ; elle est donc vivement recommandée HTML n est pas un langage de programmation, mais de description! Les documents HTML ne sont donc pas des programmes 4 Structure d un document HTML 1 <html> 2 <head> 3 <title> 4 Titre de ma page Html 5 </title> 6 </head> 7 <body> 8 Voilà ma première page!! 9 </body> 10 </html> Squelette de document HTML Section 1 Introduction à HTML 11

12 <html> : précise le type du document <head> : en-tête contenant des informations descriptives, non affichées dans le navigateur, comme le titre du document ou des champs interprétables par les moteurs de recherche <title> : titre du document (doit se trouver dans l en-tête) qui apparaît dans la barre de titre du navigateur <body> : corps de la page, contenant toutes les informations qui seront affichées 2 Syntaxe de HTML Syntaxe des balises Les balises, ou les marqueurs, sont les portions de texte comprises entre < et > Chaque balise contient un nom, désignant l élément qu elle représente une éventuelle liste d a ributs, placés obligatoirement entre les crochets délimiteurs Chaque balise (d ouverture) <xxx > est généralement associée à une balise de fermeture </xxx> perme ant de délimiter l entité logique en présence Selon la norme HTML, la casse des noms de balises n est pas importante En XHTML, cependant, les noms doivent être obligatoirement en minuscules Il est donc recommandé de me re les noms en minuscules But : prévenir les futures évolutions des navigateurs, pour minimiser les corrections à appliquer sur les documents HTML Syntaxe des attributs de balise Les a ributs, lorsqu il y en a : sont placés derrière le nom de l élément dans un ordre d apparition indifférent sont séparés par des espaces Les valeurs d a ributs, lorsqu elles existent, sont placées derrière un signe = Il est recommandé de ne pas me re d espace de chaque côté du signe =, même si la norme l autorise A ention : en HTML et XHTML, les valeurs affectées à un a ribut peuvent être sensibles à la casse pas d a ribut dans les balises de fermeture Selon HTML, les valeurs d a ributs qui sont des mots uniques ou des nombres peuvent être placées directement Dans les autres cas, les guillemets ( ou ) sont nécessaires Selon XHTML, toutes les valeurs doivent être entre guillemets doubles ( ) Il est ainsi recommandé de me re toutes les valeurs d a ributs entre guillemets doubles Exemples <a href= > <ul compact> <ul compact= compact > <input type= text size= 24 maxlength= 80 > <input maxlength= 80 type= text size= 24 > <link title= Table des matières > 12 Chapitre 1 Le langage HTML

13 Imbrication des balises Les balises peuvent être imbriquées, pour cumuler des styles, ou pour définir des entités à l intérieur d autres entités Les balises doivent alors être refermées dans l ordre inverse de leur ouverture A ention : même si certains navigateurs sont tolérants vis-à-vis de ce e règle, une future version peut supprimer ce e tolérance Balises «ouvertes» Selon la norme HTML, quelques balises ne possèdent pas de balises de fermeture area base basefont br col frame hr img input isindex link meta param En XHTML, toutes les balises doivent être fermées, mais une forme condensée est possible, déjà acceptée par les navigateurs actuels (ex : <br /> pour <br></br>) Gestion des caractères Les caractères utilisés pour composer les documents HTML français ou anglais sont historiquement ceux appartenant au jeu de caractères ISO Latin et maintenant plutôt UTF-8 Certains de ces caractères ont une signification particulière dans un document HTML : ce sont les caractères de contrôle (ex : <) Pour les insérer dans du texte «normal», il faut utiliser les entités caractères (ex : &lt ou &#60 pour <) Des tables d entités caractères sont disponibles sur le Web (ex : html6php) Un document HTML est tenu selon la norme de déclarer quel est le jeu de caractères qu il utilise Déclaration faite au moyen de la balise <meta> <meta charset= utf-8 > Type de documents HTML Pour déclarer la norme à laquelle un document HTML se conforme, il faut commencer ce document HTML par une balise SGML <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 401 Transitional//EN > (pour la norme 401) <!DOCTYPE html> (pour la norme 5, à préférer maintenant) Il est vivement recommandé de faire ce type de déclarations systématiquement! 3 Les balises de HTML Introduction Il existe un grand nombre de balises en HTML, acceptant parfois un grand nombre d a ributs Dans le cadre de ce cours, nous ne ferons pas d étude exhaustive de toutes les variantes possibles de balises Section 3 Les balises de HTML 13

14 Nous passerons cependant en revue les balises et les a ributs les plus fréquents Ce cours devra donc être complété par un document de référence (papier ou électronique) Les commentaires Les commentaires sont destinés à l auteur du document HTML Ils perme ent d améliorer la lisibilité du source HTML Ils n apparaissent donc pas sous un navigateur Syntaxe : <!-- --> Attention toutefois : un visiteur peut voir vos commentaires s il regarde le source de votre document 1 Les balises courantes <br> (break) : saut de ligne manuel <p></p> : définit un paragraphe A ention, il n est possible de définir qu un paragraphe à la fois (pas d imbrication) La marque de fin de paragraphe est souvent omise (ce ne sera plus le cas en XHTML) <h1></h1> : définit un titre de niveau 1 Il existe également 5 autres paires de balises allant de h2 à h6 perme ant de définir des titres de niveau inférieur Les titres sont automatiquement définis dans des nouveaux paragraphes 2 Les liens Les balises <a></a> perme ent de créer des liens hypertextes Dans ces balises, l a ribut href permet de spécifier la source du document Exemple : association d un document «suitehtml» à un lien «Suite» <a href= suitehtml >Suite</a> Toutes les pages présentes sur un site doivent pouvoir être accessibles via un lien Lien interne (page différente) <a href= index2html > Lien externe <a href= > Lien <a href= mailto:webmaster@yahoofr > Lien vers serveur p <a href= ftp://ftpcirilfr > Remarque : le séparateur de répertoire utilisé est le / et non pas le \ 3 Les images HTML permet également d afficher des images Les formats supportés sont : le GIF, le JPEG et le PNG La balise utilisée est <img src= > Ce e balise ne nécessite pas de balise de fin (en HTML) Exemples <img src= /accueilgif > <img src= > Utiliser une image comme lien <a href= ouihtml ><img src= ouijpg></a> 14 Chapitre 1 Le langage HTML

15 Texte alternatif : <img src= url alt= *** > Info-bulle : <img src= url title= *** > Selon la norme, toutes les images d un document HTML doivent être dotées de l attribut alt Alignement (pour info, à traiter plutôt avec les CSS) : <img src= url align= top bottom middle left right > (à éviter) Dimensions absolues (pour info, à traiter plutôt avec les CSS) : <img src= url width=? height=? > Dimensions relatives (pour info, à traiter plutôt avec les CSS) : <img src= url width=?% height=?% > Bordures (pour info, à traiter plutôt avec les CSS) : <img src= url border=? > 4 Les tableaux Les tableaux ont souvent été utilisés pour résoudre les problèmes de mise en page Il est d ailleurs possible d utiliser des tableaux invisibles (de bordure nulle) Définition du tableau <table border=? ></table> (border vaut 0 si l a ribut est omis, et 1 si c est la valeur qui est omise) Définition des en-têtes de colonnes <th></th> Définition d une ligne <tr></tr> Définition d une cellule <td></td> Attention : pour éviter les problèmes, il faut associer le même nombre de cellules à chaque ligne Il est possible de définir des tableaux à l intérieur d autres tableaux 1 <table border= 1 > 2 <tr> 3 <th>colonne 1</th> 4 <th>colonne 2</th> 5 </tr> 6 <tr> 7 <td>cellule 1, ligne 1</td> 8 <td>cellule 2, ligne 1</td> 9 </tr> 10 <tr> 11 <td>cellule 1, ligne 2</td> 12 <td>cellule 2, ligne 2</td> 13 </tr> 14 </table> Exemple de définition de tableau Section 3 Les balises de HTML 15

16 Les tableaux : balises et attributs <caption></caption> : légende du tableau avec les a ributs top : titre placé au-dessus du tableau (par défaut) bottom : titre placé en dessous du tableau A ributs d alignement align= left (par défaut) Les données sont alignées à gauche de la cellule (pour td) ou de toutes les cellules (pour th ou tr) A ributs d alignement align= right Les données sont alignées à droite de la cellule (pour td) ou de toutes les cellules (pour th ou tr) align= center Les données sont centrées à l intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr) A ributs d alignement valign= middle (par défaut) Les données sont centrées verticalement à l intérieur de la cellule (pour td) ou de toutes les cellules (pour th ou tr) valign= top Les données sont en haut de la cellule (pour td) ou de toutes les cellules (pour th ou tr) A ributs d alignement valign= bottom Les données sont en bas de la cellule (pour td) ou de toutes les cellules (pour th ou tr) valign= baseline Toutes les données des cellules sont alignées sur une ligne commune (uniquement pour th ou tr) Fusion de lignes et de colonnes colspan Pour fusionner 2 cellules adjacentes sur une ligne (pour th ou td) rowspan Pour fusionner 2 cellules adjacentes sur une colonne (pour th ou td) 1 <table border= 1 > 2 <tr> 3 <td>cellule 1</td> Fusion de cellules dans les tableaux HTML 4 <td colspan= 2 >fusion sur la même ligne</td> 5 </tr> 6 <tr> 7 <td>cellule 2</td> 8 <td>cellule 3</td> 9 <td rowspan= 2 >fusion sur la même colonne</td> 10 </tr> 11 <tr> 12 <td>cellule 4</td> 13 <td>cellule 5</td> 14 </tr> 15 </table> 16 Chapitre 1 Le langage HTML

17 A ributs d arrière plan, mise en page et d espacement (balise table) width Spécifie la largeur du tableau ou d une cellule, en pixels ou en pourcentage de la fenêtre du navigateur height Spécifie la hauteur du tableau ou d une cellule, en pixels ou en pourcentage de la fenêtre du navigateur A ributs d arrière plan, mise en page et d espacement (balise table) border Spécifie la taille en pixels de la bordure du tableau cellpadding Spécifie l espace en pixels entre la bordure et le contenu de la cellule du tableau cellspacing Spécifie l espace en pixels entre les cellules du tableau A ributs d arrière plan, mise en page et d espacement (balise table) bgcolor Spécifie la couleur d une cellule bordercolor Spécifie la couleur de la bordure du tableau bordercolorlight Spécifie la couleur aux points culminants de la bordure du tableau (effet 3D) 5 Gestion des listes Introduction Les listes perme ent d organiser facilement du texte Il en existe plusieurs variantes, suivant le type d information à décrire liste non ordonnées : ensemble d éléments sans ordre particulier (listes à puces) listes ordonnées : ensemble d éléments où l ordre de présentation a de l importance listes de définitions : représentation des glossaires par exemple Listes non ordonnées Exemple premier item non ordonné deuxième item non ordonné Obtenu grâce à 1 <ul> 2 <li>premier item non ordonné</li> 3 <li>deuxième item non ordonné</li> 4 </ul> Listes ordonnées Exemple 1 premier item ordonné 2 deuxième item ordonné Obtenu grâce à Section 3 Les balises de HTML 17

18 1 <ol> 2 <li>premier item ordonné</li> 3 <li>deuxième item ordonné</li> 4 </ol> Listes de définitions Exemple Définition 1 Ceci est ma première définition Définition 2 Ceci est ma deuxième définition Obtenu grâce à 1 <dl> 2 <dt>définition 1</dt> 3 <dd>ceci est ma première définition</dd> 4 <dt>définition 2</dt> 5 <dd>ceci est ma deuxième définition</dd> 6 </dl> Quelques attributs de listes Listes non ordonnées type= {disc circle square} : pour changer le type de puce (dans <ul> ou <li>) Listes ordonnées type= {A a I i 1} : pour changer le type de numérotation (dans <ol> ou <li>) start= x, où x définit la valeur du compteur (dans <ol> ou <li>) Les différents types de listes peuvent être imbriqués 6 Les formulaires Introduction Perme ent de recueillir des informations auprès des visiteurs Marche à suivre 1 construction du formulaire : balise <form> 2 association d une action au formulaire Fonctionnement envoi des données collectées par mail (côté client) traitement des données par un programme dédié (côté serveur) 1 <form method= [méthode d envoi] 2 action= [action] 3 enctype= [méthode d encodage] > 4 Éléments de formulaire et texte 5 </form> En-tête d un formulaire 18 Chapitre 1 Le langage HTML

19 method : méthode d envoi des informations récoltées get : données juxtaposées à l URL (formulaires simples) post : données envoyées comme un bloc action : désigne l outil utilisé pour traiter le formulaire <form action= traitementphp method= post > <form action= /cgi-shl/mailtoexe method= post > enctype : type d encodage quand la méthode post est choisie (optionnel : ne rien me re généralement) application/x-www-form-urlencoded : encode selon une syntaxe URL (peu lisible) multipart/form-data : encapsule les champs du formulaire comme les sections d un document MIME (obligatoire si upload d un fichier) text/plain : encode en texte lisible (utilisé parfois conjointement avec mailto:) De nombreux types possibles case à cocher case radio boîte liste boîte liste déroulante boîte texte boîte mot de passe boîte texte multilignes bouton bouton soume re bouton recommencer entrée cachée image de formulaire Éléments de formulaire Tous les éléments de formulaires sont insérés grâce à la balise <input> Ce e balise accepte de nombreux a ributs type (obligatoire) : type de «contrôle» de formulaire (bouton, zone de texte ) name (obligatoire) : nom du contrôle size : largeur du contrôle (suivant le type) maxlength : nombre maximum de caractères value : valeur initiale du contrôle / texte pour un bouton Pour les soumissions, il existe un type de bouton particulier dont le type est submit ; c est ce bouton qui permet de déclencher l action associée au formulaire Pour reme re à blanc le formulaire, il existe un autre type de bouton : reset Bouton graphiques (comportant une image) : accessible grâce au type image et à l a ribut src <input type= image src= images/butgif name= toto /> Un exemple 1 <body> 2 <form action= traitementphp 3 method= post 4 enctype= text/plain > 5 <b>entrez vos coordonnées:</b><p> 6 Nom : <input type= text name= nom size= 30 > 7 Cie : <input type= text name= comp size= 40 > 8 <input type= text name= size= 30 > 9 10 <input type= submit value= Soumettre > 11 <input type= reset value= Recommencer > 12 </form> Section 3 Les balises de HTML 19

20 13 </body> Remarques Les formulaires doivent donc être associés à des programmes de traitements des données saisies côté serveur Les tableaux sont souvent utilisés pour perme re un alignement plus fin des formulaires mais ne sont pas la solution ultime (voir cours suivant) 4 Les metas informations La balise <meta> permet de définir des informations supplémentaires sur un document HTML, exploitables par les navigateurs, les outils d indexation La balise <meta> n a pas de contenu Elle se définit toujours dans l entête du document (section <head>) Ses a ributs perme ent de définir des paires nom/valeur La norme (HTML, XHTML) ne spécifie pas de nom d a ribut, mais certains sont souvent utilisés Balise meta : attributs courants Généralement, les a ributs name ou http-equiv sont utilisés conjointement avec l a ribut content Définition de mots-clés <meta name= keywords content= cours, HTML > Définition de l auteur d un document <meta name= author content= Phil > L a ribut http-equiv : directives pour le serveur, qui les passe au navigateur avant d envoyer le document <meta charset= utf-8 > <meta http-equiv= expires content= 26 Mar 2002 > Rafraîchir la page toutes les n secondes <meta http-equiv= refresh content= n > Rafraîchir la page en changeant de document <meta http-equiv= refresh content= 5; URL= > Autres utilisations de meta Description du site <meta name= description content= Cours d Internet > URL du site <meta name= indentifier-url content= > Date de création <meta name= date content= Mon, 17 Feb :00:00 > 20 Chapitre 1 Le langage HTML

21 5 HTML 5 Le brouillon officiel de HTML 5 a été publié le 23 avril 2009 Le support de ce e norme par les navigateurs actuels est encore partiel, mais tous les ténors commencent à l intégrer Les évolutions sont nombreuses et conséquentes, ce qui entraîne des changements parfois radicaux dans la manière de concevoir une page HTML Au final, les éléments (balises) disponibles dans ce e mouture sont plus spécifiques et devraient perme re une meilleure structuration, donc une meilleure accessibilité Détail de certaines nouveautés Comme dans les précédentes normes relatives à HTML, il n est pas obligatoire de fermer tous les éléments (ce sera par contre obligatoire en XHTML 5) La déclaration du DOCTYPE est simplifiée : <!DOCTYPE html> Apparition de nouveaux éléments, parmi lesquels <section> : découpage logique du document (là où les <div> sont plutôt utilisées pour des découpages liés aux styles) <article> : découpage logique (article de journal, de blog) <header> : en-tête d une page (remplace typiquement <div class= header >) <footer> : pied d une page <audio> et <video> : intégration de contenus multimédias, gérés nativement par le client (la norme ne fixe pas de codecs particuliers à supporter par contre) <canvas> : intégration d éléments graphiques 2D Nouveaux types d éléments de formulaire (balise <input>), pour des informations telles que les dates, les heures, les nombres (!), les intervalles, les adresses mail, les URL, les couleurs Disparition de certains éléments, liés aux frames, aux styles (<font>, <tt>, <u> ) 6 Validation de documents HTML La validation de page Web offerte par le W3C permet de vérifier qu un document est conforme aux normes et donc «relativement» portable Pour une validation automatique, 2 spécifications doivent être indiquées la DTD correspondant au document (en SGML) pour la norme 401 : <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 401 Transitional//EN > pour la norme 5 : <!doctype html> le type d encodage utilisé (en HTML) <meta charset= utf-8 > 2 2 Ce e spécification s écrivait <meta http-equiv= Content-Type content= text/html; charset=utf-8 > auparavant Section 5 HTML 5 21

22 7 Liens Référence HTML 5 Cours HTML h p ://nephiunicefr/courshtml/ h p ://wwwallhtmlcom Comment ça marche? : regroupe une dizaine de tutoriels sur les outils autour du Web (HTML, PHP, servlets, ASP, CGI ) h p ://wwwcommentcamarchenet SELFHTML h p ://frsel tmlorg/ W3C HTML Validation Service : permet de tester la conformité d un site W3 par rapport aux normes HTML h p ://validatorw3org Norme ISO/IEC :2000 HTML : norme ISO concernant le HTML h p ://wwwcstcdie/15445/ughtml Creating Killer Web Sites : site sur les considérations à prendre en compte lors de la construction d un site h p ://wwwkillersitescom e Bare Bones Guide to HTML : un site qui référence toutes les balises reconnues par les navigateurs, en précisant si elles sont au standard HTML 3, HTML 4 ou spécifiques à un navigateur h p ://werbachcom/barebones/bareboneshtml HTML & XHTML, la référence Musciano & Kennedy O Reilly 22 Chapitre 1 Le langage HTML

23 CHAPITRE 2 Les feuilles de styles CSS 1 Introduction Motivation HTML est un langage de description, où le concepteur se préoccupe essentiellement du «fond» L ajout de mises en forme est aisée pour les documents «simples», mais assez fastidieux pour ceux plus sophistiqués chaque mise en forme requiert l utilisation de nombreux a ributs ou balises comment assurer une présentation homogène? comment répercuter des changements de présentation sur un site complet? Solution HTML et XHTML supportent les feuilles de style (Cascading Style Sheet) offrant la possibilité de définir des styles au moyen de règles la possibilité d appliquer ces styles localement (sur une balise ou un document) ou sur plusieurs (un site ou une partie) Les documents HTML et XHTML peuvent faire référence à plusieurs feuilles CSS, perme ant de combiner les effets de styles ou de proposer des présentations différentes d un même document Le code HTML des documents est ainsi réduit en taille et en complexité puisqu il est déchargé de la quasi-totalité des informations de présentation Historique La première norme mise au point fin 1996 par le W3C La deuxième norme (CSS2) est mise au point en 1998, mais sort prématurément, reme ant en cause certaines de ses spécifications (elle comporte certaines incohérences, des fonctionnalités marginales ) L élaboration d une norme CSS21 débute en 2001 pour accorder la norme CSS2 originale avec ce qui est réellement supporté par les navigateurs à ce moment-là Ce e norme est finalisée en 2007 La troisième norme (CSS3) commence en 1999, parallèlement à la norme CSS21 Ce e troisième mouture, ne ement plus conséquente que les deux premières, n est toujours pas actuellement finalisée L état d avancement des différentes composantes de ce e norme peut être consulté sur 23

24 La définition de la quatrième norme a commencé en 2010 Toutefois, compte-tenu du fait que la norme CSS3 n est toujours pas finalisée, et semble même bloquée pour la définition de certains de ses composants, il est actuellement inutile de gue er son arrivée, tant au niveau de la norme que son futur support par les navigateurs 2 Définition des styles 1 Introduction Syntaxe des styles Les règles de style se composent de 3 parties un sélecteur, nom de l élément affecté par la règle un conteneur, correspondant aux accolades { } un contenu, constitué d une liste de propriétés (séparées par des ;) de la forme propriété:valeur Les propriétés doivent avoir au moins une valeur, mais elle peuvent en avoir plusieurs (séparées par des espaces) Exemples em{font:italic 24pt} p{color:red; text-align:center} Remarques sur la définition des styles Il existe plusieurs endroits où des styles peuvent être définis : au niveau d une balise dans l en-tête d un document dans un fichier extérieur Il est possible de définir des styles à ces 3 endroits à la fois Certaines règles de priorités interviennent alors 2 Définition dans une balise Il faut utiliser l a ribut style, disponible sur la majeure partie des balises On lui associe alors une liste de propriétés avec des valeurs La portée de ce type de définition est celle du contenu entre les balises de début et de fin Exemple : «titre de niveau 1 en bleu, en 12 points» <h1 style= color:blue; font-size:12pt >Hello</h1> 3 Définition pour un document Il faut utiliser la balise style associée à l a ribut type de valeur text/css Ce e balise style doit être insérée dans l en-tête du document (entre les balises head) La définition de la feuille de style locale doit être encapsulée dans un commentaire (style sert à insérer un contenu extérieur, ie pas du HTML) La portée des définitions faites dans ce e balise est alors celle du document 24 Chapitre 2 Les feuilles de styles CSS

25 Exemple de définition dans l en-tête d un document 1 2 <head> 3 <title> </title> 4 <style type= text/css > 5 <!-- 6 p {color:green; font-size:20pt} 7 --> 8 </style> 9 </head> 10 <body> 11 <p> Texte en vert 20 pt </p> 12 </body> 13 4 Définition dans un fichier extérieur Il est également possible de définir une feuille de style dans un fichier extérieur (généralement d extension css ) Ce fichier peut alors être importé par plusieurs documents HTML par liaison (balise link) par importation dans un élément style), mal supporté Permet d homogénéiser la mise en forme d un site entier Exemple de définition de CSS dans un fichier externe (fichier stylescss ) 1 h1 {background-color:#00ffff} 2 #toto {background-color:white; 3 font-size:16pt} 4 italic {font-style:italic; 5 color:red} Dans le fichier CSS, les définitions de style sont décrites directement, sans les englober dans une quelconque structure (en-tête, balise ou autre) Exemple d utilisation du fichier CSS externe par liaison (préconisé) 1 2 <head> 3 <link rel= stylesheet type= text/css href= stylecss > 4 </head> 5 <body> 6 <h1> Mon titre </h1> 7 <p id= toto > 8 Paragraphe avec le style toto 9 </p> 10 <p> 11 Texte avec un mot <span class= italic >gras</span> 12 </p> 13 </body> 14 Section 2 Définition des styles 25

26 Autres éléments de syntaxe Un document HTML peut faire référence à plusieurs feuilles de styles externes : les définitions de ces feuilles se cumulent alors Un document HTML peut également faire référence à des feuilles de styles alternatives : le choix de ces feuilles dépend alors du contexte et/ou de l utilisateur Syntaxe <link rel= alternate stylesheet type= text/css href= media= title= /> L attribut media peut prendre les valeurs suivantes : all : tous les médias aural : destiné aux systèmes de restitution vocale braille : périphériques de sortie de type «ligne Braille» embossed : imprimantes en Braille handheld : ordinateurs de poche très petits print : impression sur papier projection : rétroprojecteur screen : écran d ordinateur tty : médias de sortie non graphiques tv : médias semblables à la télévision (résolution grossière) Exemples <link rel= stylesheet type= text/css href= media= screen title= Style par défaut /> <link rel= alternate stylesheet type= text/css href= media= screen title= Un style alternatif /> <link rel= stylesheet type= text/css href= media= print /> 3 Quelques balises HTML supplémentaires La balise <div> Elle permet de diviser un document en sections distinctes Elle n a pas d autre signification logique et aucune mise en forme ne lui est associé par défaut Les sections définies peuvent contenir des paragraphes, des images, des tableaux Une définition de division implique un retour à la ligne <div> est une balise idéale pour appliquer des feuilles de styles sur des parties de documents La balise <span> Elle permet de définir une zone de contenu, et sa signification par défaut est de ne rien faire! Il n y a donc aucune signification logique ou de mise en forme associé à ce e balise (même pas un retour à la ligne) Comme la balise <div>, la balise <span> est idéale pour appliquer des feuilles de styles par l intermédiaire des a ributs id et class <span> est une balise idéale pour appliquer des feuilles de styles sur des parties de paragraphes (granularité plus fine que <div>) 26 Chapitre 2 Les feuilles de styles CSS

27 4 Propriétés de styles générales Différents types de propriétés de styles Les différentes propriétés disponibles sont regroupées en 5 catégories polices couleurs de texte et de fond texte boîtes et présentation (non présenté) listes et classification d éléments Une valeur peut être associée à chacune de ces propriétés Valeurs de propriétés Il existe 5 types différents de valeurs les mots-clés les longueurs les valeurs en pourcentage font-size:150% (taille égale à 150 % de la taille actuelle) les URL, selon la syntaxe : url() les couleurs : voir le transparent sur les couleurs Les valeurs de longueur Ce sont des nombres, précédés éventuellement de + ou de -, et suivis d une unité parmi les unités absolues : in (pouces), cm, mm, pt (point = 1 72 de pouce), pc (pica = 12 points) les unités relatives : em (largeur du «M» dans la police courante), ex (hauteur du «x» dans la police courante) le pixel : px Exemples : -12em, +5cm, 8pc, 15px Propriétés des polices font-family : accepte une liste de noms (la première disponible est utilisée) font-size : taille de police font-style : normal, italic font-weight : normal, bold Ou plus simplement font, suivi de valeurs de propriétés Exemples p {font:bold 14pt Times, Arial} em {font-family:times, Arial; font-size:12pt} h1 {font-weight:bold} Propriétés du fond background-color : couleur de fond d un élément background-image (+URL) : image en arrière-plan d un élément Section 4 Propriétés de styles générales 27

28 background-repeat (+ repeat repeat-x repeat-y no-repeat) : répétition d une image de fond Ou alors background, suivi de valeurs de propriétés Exemple table {background:url( yogif ) repeat-x} Propriétés de couleur color : couleur de l élément Valeurs des couleurs triplet RGB en décimal ou en pourcentage color:rgb(205, 5, 7) color:rgb(95%, 80%, 79%) triplet RGB en hexadécimal color:#778a50 nom prédéfini color:yellow Exemple : hr {color:mauve} Propriétés du texte text-align (+ left right center justify) text-decoration (+ none underline overline line-through) text-indent (+ longueur ou %) vertical-align : positionnement vertical baseline : aligne la ligne de base middle : alignement au milieu top, bottom (resp text-top, text-bottom) : aligne le sommet ou la base des éléments (resp par rapport au texte de l élément conteneur) Propriétés de liste list-style-image (+ URL) : définit les puces list-style-type : rendu des différents types de listes non ordonnées : disc circle square none ordonnées : decimal lower-roman upper-roman lower-alpha upper-alpha none Ou plus simplement list-style, suivi de valeurs de propriétés 5 Classes de styles Jusqu à présent, il n a été possible que d associer un seul style à un élément donné, dans un contexte donné Les classes de styles perme ent de définir plusieurs styles pour les mêmes éléments, en les différenciant par un nom de classe Il suffit alors d utiliser l a ribut class ou id dans une balise pour choisir une des classes de styles possibles 28 Chapitre 2 Les feuilles de styles CSS

29 1 Les classes régulières Ce sont les classes qui sont associées à un élément particulier Elles s utilisent depuis une balise au moyen de l a ribut class Exemple : gestion de plusieurs styles de paragraphes 1 pnormal {font:12pt; color:black} Définition de classes régulières 2 presume {font:italic 11pt; color:red} 3 plegende {text-align:center; font:10pt} 1 <p class= resume > Utilisation de classes régulières 2 Ce chapitre introduit les notions 3 </p> 4 <p class= normal > 5 Les classes de styles CSS sont très pratiques 6 pour uniformiser la présentation des documents 7 HTML 8 </p> 2 Les classes génériques Ce sont les classes qui ne sont associées à aucun élément en particulier, et qui peuvent donc utilisées dans plusieurs contextes Elles s utilisent depuis une balise au moyen de l a ribut class Exemple : définition d un style «italique» Définition d une classe générique 1 italic {font-style:italic; color:red} 1 <p class= italic > Utilisation d une classe générique 2 Ce chapitre introduit les notions 3 </p> 4 <p class= normal > 5 Les classes de styles CSS sont très 6 pratiques pour 7 <span class= italic >uniformiser</span> 8 la présentation des documents HTML 9 </p> Section 5 Classes de styles 29

30 3 Les classes ID Ces classes, comme les classes génériques, ne sont associées à aucun élément mais ne peuvent être appliquées qu à un seul élément d un document HTML Elles sont préfixées par un # et s utilisent depuis une balise au moyen de l a ribut id Exemple : définition du style d un titre général 1 #titreprinc {color:#fd050a} Définition d une classe ID 1 <h1 class= italic id= titreprinc > 2 Mon titre principal 3 </h1> Utilisation d une classe ID Il est possible d utiliser conjointement les a ributs id et class, donc de personnaliser un élément avec 2 styles 4 Les pseudo-classes Il existe également des pseudo-classes perme ant d associer un style à l état d un marqueur Elles ont des noms prédéfinis et sont suffixées à l aide de : au lieu de a:link : lien non visité a:active : lien en cours d activation a:hover : liens survolés par la souris a:visited : lien visité a:focus : lien devenant actif (via la touche TAB par exemple) Pour une bonne analyse de la part des navigateurs, il est conseillé de définir les pseudo-classes suivantes dans cet ordre : :link, :visited, :hover, :active 6 Priorités des styles Si plusieurs types de styles sont définis, comment se gère leur priorité? Règle hiérarchique : priorité à la proximité Un style de balise est prioritaire sur un style de document, lui-même prioritaire sur un style extérieur Règle de spécificité : les styles définis sur des entités spécifiques sont prioritaires sur les styles globaux (<p> plus spécifique que <body> p ex) Règle d ordonnancement : priorité à la dernière définition 30 Chapitre 2 Les feuilles de styles CSS

31 7 Et encore Syntaxe de définition des styles Les styles peuvent s appliquer à des sélecteurs multiples, en les séparant par des virgules h1, h2 {text-align:center} Il est aussi possible de définir des sélecteurs contextuels, résultant d imbrications de balises ol li {list-style:decimal} ol ol li{list-style:lower-alpha} provoquera : 1 premier item a) premier sous-item 2 second item Possibilité de désigner tous les sélecteurs grâce au sélecteur universel * * {font:arial} Possibilité aussi de désigner des sélecteurs adjacents (ie qui suivent immédiatement un autre sélecteur) grâce au symbole + : h1 + em {color:red} signifiant que l on passe en rouge lorsqu une emphase suit immédiatement un titre de niveau 1 Pour une maîtrise plus fine des styles imbriqués La syntaxe div > p {color:blue;} s appliquera aux balises <p> uniquement si elles sont présentes au premier niveau d imbrication dans les balises <div> <div><p></p></div> : la balise <p> est affectée par ce e règle <div><table><p></p></table></div> : la balise <p> n est pas affectée par ce e règle La syntaxe div * p {color:blue;} s appliquera aux balises <p> uniquement si elles sont présentes au moins au second niveau d imbrication dans les balises <div> <div><p></p></div> : la balise <p> n est pas affectée par ce e règle <div><table><p></p></table></div> : la balise <p> est affectée par ce e règle A ention toutefois, ces possibilités de définition des styles sont plus ou moins bien supportées par les navigateurs actuels Faites des tests sur plusieurs plates-formes si vous les utilisez Feuilles de styles et héritage Il y a plusieurs «notions d héritage» à considérer pour les feuilles de styles : au niveau des emplacements où les feuilles de styles sont définies, avec le modèle en cascade, où les styles plus locaux prévalent sur les styles plus globaux sur les imbrications d éléments, car les éléments imbriqués héritent souvent des styles définis dans les éléments conteneurs Ces mécanismes apportent des avantages et des inconvénients qu il faut apprendre à maîtriser Section 7 Et encore 31

32 8 Conclusion Avantages plus de flexibilité présentation consistante facilité de maintenance Validation possible sur les styles définis dans des fichiers extérieurs (considérer uniquement les erreurs) Un lien à visiter : Et côté référence, toujours : 32 Chapitre 2 Les feuilles de styles CSS

33 CHAPITRE 3 Conception de pages Web 1 Introduction L organisation spatiale du texte et des graphiques sur une page Web est essentielle une certaine harmonie visuelle en découle ce e harmonie, quand elle est réussie, a ire l a ention des visiteurs : elle est incitative Pour cela, plusieurs points sont à respecter il faut organiser l information, en la présentant de façon hiérarchique et claire les interactions proposées dans une page doivent être efficaces et bien pensées La conception d une page doit être un compromis entre l information présentée et la sensation visuelle qui en découle si une page est trop dense en texte, sans contraste/relief, la page devient difficile à lire si une page contient trop de graphiques et pas assez d information, elle n est plus assez pertinente : son intérêt est limité Sans utilisation de formes, couleurs, contraste au sein d une page, les pages conçues semblent ternes, ne sont pas incitatives et ne retiennent pas l a ention des visiteurs Chaque page doit proposer une information pertinente pour qu elle soit intéressante 2 Principes de conception 1 Notion de hiérarchie visuelle La première tâche à accomplir lors de la construction d une page, ou d un ensemble de pages, est de définir une hiérarchie visuelle Ce e hiérarchie consiste à définir l importance absolue et relative des différents éléments présents afin d en déduire une organisation logique et prévisible Ce e hiérarchie s établit en structurant la page, par le choix de la typographie, des couleurs Un visiteur perçoit dans un premier temps une page comme des amas de formes et de couleurs Il commence ensuite à repérer des éléments spécifiques, en se basant sur l information graphique dans un premier temps, et l information textuelle dans un second temps 33

34 Une page ennuyeuse, sans structure graphique, ne retiendra pas l a ention À l inverse, une page avec du gras partout ou des polices trop «tape à l oeil» détournera l a ention des visiteurs du véritable contenu de la page Lors de la conception de la structure d une page, les points suivants doivent être considérés l objectif général de la page la nature du contenu et le plus important : les attentes des visiteurs de cette page Ne pas négliger non plus les aspects techniques : une utilisation trop importante d éléments graphiques peut ralentir les temps d accès à une page 2 Dimensions de la page Les pages sont principalement conçues pour être visualisées sous un navigateur Les caractéristiques des navigateurs sont particulières, de façon intrinsèque ou de part leur utilisation L exemple d une société : Journal du Net Sur ce site, les visites effectuées en 800x600 et 1024x768 représentent 80% du traffic Ainsi, une page non prévue pour être visualisée en 800x600 occasionnera une gêne pour une bonne proportion de visiteurs En tenant compte de la place prise par le navigateur lui-même, la zone utilisable est réduite à 760x410 pixels and ces contraintes sont trop importantes, il est possible de définir une zone plus large, qui sera accessible en faisant défiler les ascenseurs (scrolling) Le scrolling vertical est souvent utilisé, le scrolling horizontal est fortement déconseillé 34 Chapitre 3 Conception de pages Web

35 Avantages du scrolling Il permet de s affranchir de la limite de 410 pixels en hauteur Il permet de proposer des pages plus grandes, où plus d information sera disponible sans avoir à changer de page Les pages longues sont plus faciles à créer et à maintenir pour les développeurs L intérieur des pages longues peut (doit) être indexé par un mécanisme de liens internes (a ributs id et liens commençant par #) Inconvénients du scrolling Les pages longues requièrent une a ention plus soutenue des visiteurs : ceux-ci peuvent perdre la vision du contexte si les boutons de navigations ou les liens les plus importants ne sont plus visibles Des petits déplacements de l ascenseur peuvent provoquer des déplacements très importants dans la page, perturbant les visiteurs (qui peuvent en particulier ne pas voir certaines parties importantes d une page) Les grandes pages sont plus longues à charger 3 Grilles de conception La définition d une grille de conception doit mener à une présentation consistante et prévisible des informations La structure qui en ressort doit être claire Il n existe pas de grille générique, utilisable pour tous les sites (heureusement!) Il faut d abord considérer la disposition des éléments les plus importants et placer ensuite le reste : titres, liens, boutons, graphiques La conception d une grille est souvent incrémentale : on part d une ébauche qui est affinée au fur et à mesure Une grille doit être assez flexible pour répondre aux besoins de disposition de plusieurs pages Si les pages sont longues, il faut être particulière a entif à la définition du début de ses pages : ce sont les seules parties que certains visiteurs parcourront Ce sont donc généralement les zones les plus denses des pages : on y retrouve les éléments de navigation, les liens généraux, etc Actuellement, il semble que les découpages verticaux soient les premiers considérés (plus que les découpages horizontaux en tout cas) Section 2 Principes de conception 35

36 En-têtes et pieds de page L en-tête d une page traduit souvent l identité d un site On y retrouve alors la signature du site (logo, charte graphique) la navigation principale (disponible sur toutes les pages, on ne sait jamais à partir de quelle page un visiteur commence une visite) Le pied d une page contient des informations moins critiques (il n est pas toujours visible) : l origine et l âge de la page, des contacts secondaires (webmaster par exemple) 3 Conception technique de pages Web 1 Généralités C est une partie délicate, qui va donner à un site sa vraie identité Pour garder un maximum de flexibilité, il est conseillé d effectuer ce e conception en utilisant les feuilles de styles Pour des besoins de compatibilité avec le parc (hétérogène) de navigateurs, il peut cependant être plus adéquat d utiliser des tableaux HTML Ne pas utiliser de frames qui comportent de nombreux inconvénients Conception par tableaux HTML Ce type d organisation a déjà été évoqué précédemment elques précisions lors de la définition des largeurs de colonnes, il est possible d indiquer une dimension absolue (en pixels) ou relative (en %) partir sur un espace horizontal de 760 pixels et ne pas définir plus de la moitié de cet espace sur des colonnes de largeur absolue (généralement c est moins) centrer la structure globale de la page afin que le résultat soit harmonieux quelle que soit la résolution effective des visiteurs Conception par frames Les frames perme ent de présenter plusieurs documents HTML en même temps sous un navigateur Ils apportent une certaine souplesse de développement, mais comportent de gros inconvénients les visiteurs définissant des signets (bookmarks) sur ce type de site n indexe pas toujours la page qu ils veulent les moteurs de recherche peuvent renvoyer des documents initialement prévus dans le contexte de frames : la navigation disparaît généralement et le visiteur ne peut pas naviguer normalement leurs bordures sont inesthétiques Il est recommandé de ne plus les utiliser 2 Utilisation des feuilles de styles Depuis la deuxième version des feuilles de styles (CSS2), de nombreuses propriétés existent pour positionner les éléments d un document HTML 36 Chapitre 3 Conception de pages Web

37 Certaines de ces propriétés restent mal ou pas supportées par les navigateurs (même récents) Mais les propriétés communément supportées actuellement suffisent pour la plupart des besoins en disposition Combinées à JavaScript page 52, ces propriétés perme ent de faire du HTML dynamique (DHTML) Marges et espaces Les marges perme ent de définir un espace libre entre l élément courant et son élément parent Définitions margin-top : marge de l espace supérieur margin-bottom : marge de l espace inférieur margin-left : marge de l espace à gauche margin-right : marge de l espace à droite margin suivi d une valeur affecte ce e valeur aux 4 côtés en même temps margin suivi de 4 valeurs séparées par des espaces définit en même temps, dans l ordre : haut, droite, bas, gauche Espaces intérieurs C est-à-dire la définition de l espace entre le contenu d un élément et le bord de celui-ci Définitions padding-top : marge de l espace supérieur padding-bottom : marge de l espace inférieur padding-left : marge de l espace à gauche padding-right : marge de l espace à droite padding suivi d une valeur affecte ce e valeur aux 4 côtés en même temps padding suivi de 4 valeurs séparées par des espaces définit en même temps, dans l ordre : haut, droite, bas, gauche Bordures Ces bordures peuvent être définies pour les éléments qui créent des blocs : h[1-6], p, div, table, tr, th, td Épaisseur border-xxx-width Exemple : border-left-width: 5px; Il est également possible d utiliser border-width (même syntaxe que pour padding) Couleur : border-xxx-color et border-color Type : border-xxx-style et border-style, avec les valeurs suivantes none ou hidden : pas de bordure (transparente) dotted : en pointillés dashed : en tirets solid : pleine double : double et pleine groove : en relief ridge : effet 3D border, suivi de 1 à 3 valeurs : définition de l épaisseur, de la couleur et du type Dimensions d éléments width : largeur souhaitée pour un élément (valeur absolue ou relative) Section 3 Conception technique de pages Web 37

38 min-width : largeur minimale d un élément, même si son contenu prend moins de place max-width : largeur qu un élément ne doit pas dépasser overflow : politique à adopter si un élément dépasse une dimension maximum (visible, hidden, scroll, auto) height, min-height, max-height : même principe que les propriétés width, mais sur la hauteur Cours du texte Grâce à la propriété float, il est possible de changer le cours du texte Cela permet, dans une certaine mesure, de définir des colonnes dans un document Plusieurs valeurs sont possibles left : l élément se trouvera à gauche et sera entouré par la droite des éléments qui le suivent right : même principe none : l élément ne sera pas entouré (réglage normal) Voir webclienttestcsshtml et webclienttestcsscss Remarque : lorsqu une propriété float est définie, elle doit être associée à une propriété width A ention : la propriété float change la présentation d un élément, mais ne modifie pas les caractéristiques intrinsèques des éléments qui suivent (leur dimension en particulier) Faire des tests La propriété clear permet de rétablir un cours normal si une propriété float a été définie (voir documentation) Les positions La propriété position spécifie le type de position d un élément absolute : positionnement absolu, mesuré à partir du bord de l élément parent, pouvant défiler fixed : positionnement absolu, mesuré à partir du bord de l élément parent, restant fixe lors du défilement relative : positionnement relatif mesuré à partir de la position de départ de l élément proprement dit static : pas de positionnement spécial, flux normal de l élément (réglage par défaut) Lorsque la propriété position est définie, elle est accompagnée d une ou plusieurs des propriétés suivantes top : position à partir du haut bottom : position à partir du bas left : position à partir de la gauche right : position à partir de la droite Lors de l utilisation d éléments ayant des positions différentes, il arrive qu il y ait une superposition entre certains de ces éléments La propriété z-index permet alors de définir l ordre d empilement (plus la valeur associée est grande, plus l élément est à l avant-plan) Les affichages La propriété display spécifie la façon dont un élément doit être affiché Plusieurs valeurs sont possibles (non exhausti ) block : l élément crée un nouvelle ligne (plus besoin de balise <br>!) inline : l élément est affiché dans le cours du texte list-item : comme block, mais précédé d une puce comme dans une liste énumérative none : l élément n est pas affiché et aucune place ne lui sera réservée 38 Chapitre 3 Conception de pages Web

39 La visibilité La propriété visibility spécifie si un élément doit être affiché ou non Deux valeurs sont possibles hidden : le contenu de l élément est caché visible : le contenu de l élément est affiché (option par défaut) Les positions, les affichages et la visibilité seront utilisés depuis JavaScript pour le HTML dynamique page 62 4 Responsive Web design 1 Contexte Avec la multiplication des périphériques disponibles (ordinateurs, table es, smartphones ), certains besoins d adaptabilité, qui existaient déjà, ont été renforcés Le Responsive Web design est une des réponses apportée à ce problème : L idée est de faciliter la mise en œuvre de la flexibilité et de l adaptabilité nécessaires pour gérer ce e hétérogénéité de périphériques 2 Les Media queries Ce sont des recommandations du W3C concernant la norme HTML5/CSS3 ayant été publiées en 2012 Le principe réside dans la possibilité de définir des styles par rapport à un contexte d affichage Le conditionnement peut se faire à plusieurs niveaux : Lors de la déclaration de la feuille de styles : <link rel= stylesheet media= screen and («condition») href= xxxcss > 1 <link rel= stylesheet type= text/css 2 media= screen and (max-device-width: 480px) and (resolution: 163dpi) 3 href= stylebascss /> Directement dans les styles CSS screen and (min-device-width: 480px) { 2 columns { 3 float: right; 4 } 5 } elques règles de composition de ces conditions : Le «et» logique est traduit par le mot-clé and Le «ou» logique est traduit par la virgule («,») A ention, il n est pas possible de combiner ces opérateurs booléens en spécifiant des parenthèses Les médias concernés sont surtout screen et print Les conditions portent surtout sur les propriétés CSS correspondant à la largeur, la hauteur et la résolution, préfixés de min et max 1 Il est naturellement important de privilégier toutes les unités relatives dans les définitions CSS associées, ceci pour perme re encore une meilleure adaptabilité 1 Ceci étant dû au fait qu il n est pas possible d utiliser les symboles < et > sans générer des conflits avec la définition des balises HTML Section 4 Responsive Web design 39

40 A ention aussi : la définition de CSS sur mesure pour les périphériques mobiles n est pas toujours suffisante Si le document HTML initial est complexe, si des scripts JavaScript sont systématiquement chargés, le résultat obtenu peut ne pas être celui escompté Les périphériques mobiles gardent des capacités de traitement moindre que les ordinateurs traditionnels, il faut donc en tenir compte A ention enfin, les navigateurs de périphériques mobiles ont souvent des dimensions supérieurs à celles visibles Ils utilisent en effet des viewport perme ant de gérer plus d espace que disponible pour l affichage Si ce e technique est très utile pour l affichage des sites non prévu pour les mobiles, elle entrave le bon fonctionnement des techniques décrites ci-dessus Une solution pour gérer le problème : définir une balise comme ci-suit <meta name= viewport content= width=device-with />, ce qui permet de rétablir le comportement a endu 5 Références Conception de sites Web (en anglais) Pour les balises et a ributs 40 Chapitre 3 Conception de pages Web

41 CHAPITRE 4 Le langage JavaScript 1 Introduction L utilisation de JavaScript est une des solutions perme ant incorporer un contenu exécutable à l intérieur d une page HTML Les programmes en JavaScript perme ent de générer dynamiquement des portions de code HTML de gérer des interactions avec les utilisateurs de créer de nouvelles fenêtres de gérer la validation des données saisies à l intérieur d un formulaire JavaScript est un langage de script comportant des fonctionnalités orientées objet Les instructions de ce langage sont incorporées directement dans les documents HTML JavaScript peut communiquer avec les navigateurs pour exploiter certaines de leurs fonctionnalités Sécurité : JavaScript ne peut pas lire ou écrire sur le disque dur local et ne peut effectuer que des opérations limitées sur le réseau (chargement d URL, envoi de formulaire) JavaScript est sensible à la casse : cela signifie donc que les variables exemple, Exemple, exemple sont toutes différentes pour JavaScript Les instructions JavaScript doivent être terminées par un ; Commentaires : comme en Java et en C++ 1 // Commentaire d une ligne 2 /* 3 Commentaire sur plusieurs lignes 4 */ Inclusion de scripts JavaScript HTML permet l inclusion de programmes JavaScript dans un document HTML au moyen de la balise script 1 <script language= JavaScript > 2 <!-- 3 // Instructions JavaScript 41

42 4 --> 5 </script> Comme pour les feuilles de style, les commentaires perme ent de protéger les instructions JavaScript pour les navigateurs qui ne les supportent pas Les programmes JavaScript peuvent être définis dans la section head ou body d un document HTML Il peut y avoir plusieurs sections script dans un document Toutes les fonctions et variables globales définies dans chacune des sections script d un document sont accessibles depuis toutes ces sections Généralement, les fonctions JavaScript sont définies dans la section head ; la section body ne contient principalement que des appels à ces fonctions 2 Types de données Nombres JavaScript ne fait pas de distinction entre entiers et réels Tous les nombres sont représentés comme des réels, compris entre ± (IEEE 754 std) Plus petite valeur représentable (en dehors de 0) : ± Constantes : entières (0, 36, -988), réelles (314, 542e7, -7E-8), octales (0477, 0154), hexadécimales (0x5AF4, 0x14F) elques valeurs spéciales Infinity : représentation de l infini NaN : not-a-number (pas un nombre), renvoyé après un résultat indéfini ou une erreur NumberMAX_VALUE : plus grande valeur représentable Opérateurs supportés : addition (+), soustraction (-), multiplication (*), division (/) Bibliothèque mathématique : sinus (Mathsin()), racine carrée (Mathsqrt()) Chaînes de caractères Table de caractères : Unicode (16 bits) En JavaScript, les chaînes sont définies entre paire de ou de (utiliser de préférence les ) elques caractères spéciaux \n : retour à la ligne \t : tabulation \ : le caractère \ : le caractère \\ : le caractère «\» Opérateurs + : concaténation de chaînes msg = Bonjour + à tous ; charat(i) : i ième caractère d une chaîne msg2 = msgcharat(4); substring(i,j) : sous-chaîne du i ième au j ième caractère msg3 = msgsubstring(0, 5); indexof( l ) : index du premier l length : longueur de la chaîne Exemples Yo les gens 42 Chapitre 4 Le langage JavaScript

43 Hola hombres! C\ est un bon exercice Le nombre parfait est\n égal à 1618 msg = ; msg2 = Yo + msgsubstring(2, 5); i = msglength + msg2indexof( o ); Booléens Ce sont les valeurs logiques qui ne peuvent prendre que deux valeurs : true (vrai) ou false (faux) Elles peuvent être utilisées directement, ou pour stocker le résultat d un test Exemples a = true; b = (i == 5); Opérateurs : non logique (!), et logique (&&), ou logique ( ) Tableaux En JavaScript, les tableaux sont des collections d éléments pouvant être hétérogènes Chaque élément d un tableau est accessible via un index allant de 0 à n 1 (tableau de taille n) Les tableaux sont étudiés plus en détail page 50 Objets JavaScript permet de manipuler des objets Ces objets contiennent une liste d a ributs pour stocker les propriétés de l objet une liste de fonctions (appelées aussi méthodes) ra achées à l objet Pour accéder à un a ribut ou à une méthode d un objet, on utilise la notation pointée () Les chaînes de caractères sont des objets Un exemple d objet ( Exemples d utilisation Porsche911Poids Porsche911Démarrer() Porsche911Rouler() Les objets sont étudiés plus en détail page 50 Section 2 Types de données 43

44 3 Variables Une variable permet de définir un endroit, associé à un nom, ou des valeurs peuvent être stockées toto ( entier ) Case mémoire contenant la variable Valeur de la variable Type de la variable Nom de la variable Le nom associé à une variable est un identificateur, composé de le res, _, $ et de chiffres (sauf en première position pour ces derniers) En principe, les variables doivent être déclarées avant d être utilisées Déclaration de variables Les variables se déclarent grâce au mot-clé var, suivi d une liste de variables éventuellement initialisées var i, somme; var j = 0, k = 5; var msg = Bonjour ; En JavaScript, les variables ne sont pas typées, il est donc possible d écrire à la suite i = 30; i = Trente ; Portée des variables Les variables déclarées en dehors de toute fonction sont globales : elles peuvent être utilisées dans n importe quel morceau de code JavaScript d un document Les variables déclarées dans une fonction, ou dans un bloc ({ }) inférieur, sont locales : elles ne sont accessibles que dans ce e fonction et à tout endroit de ce e fonction, quel que soit l endroit où elles sont déclarées Les paramètres de fonctions sont considérés comme des variables locales Si une variable non déclarée est utilisée, JavaScript déclare automatiquement la variable comme une variable globale : il est donc indispensable d utiliser var pour déclarer une variable locale dans une fonction Il est possible de déclarer plusieurs fois la même variable, mais cela n est d aucune utilité (sauf si la variable est à nouveau initialisée) Recommandation : déclarer toutes les variables en début de bloc, avec le mot-clé var Initialisation des variables Si une variable n est pas initialisée lors de sa déclaration, elle contient automatiquement une valeur spéciale, la valeur undefined Il existe une autre valeur spéciale, la valeur null, qu il est possible d affecter à n importe quelle variable, ce qui indique que ce e variable n est pas (plus) valide 44 Chapitre 4 Le langage JavaScript

45 Types de base et références Les différents types de données de JavaScript se classent en deux familles distinctes les types de base : les nombres, les booléens, les valeurs spéciales null et undefined les références : les objets, les tableaux, les fonctions Il y a une différence fondamentale dans la façon dont JavaScript manipule ces deux familles de variables Gestion des types de base Les valeurs des variables correspondant aux types de base sont représentées directement dans la case mémoire associée 1 var a = 314; 2 var b = a; 3 a = 4; 4 alert(b); undefined a 314 a 314 a 4 a undefined b undefined b 314 b 314 b Gestion des références Les variables correspondant aux références ne sont pas manipulées directement, mais par l intermédiaire de références 1 var a = [1, 2, 3]; 2 var b = a; 3 a[0] = 99; 4 alert(b[0]); a undefined a 1 a 1 a b undefined b undefined 3 b 3 b 3 4 Conversion de types Conversions de nombres en chaînes Il existe plusieurs manières de convertir un nombre nb en une chaîne ch ch = String(nb); : création d un objet chaîne à partir d un nombre ch = nb + ; : concaténation de chaînes entraînant la conversion du nombre ch = nbtostring(); : appel de la méthodes tostring() sur le nombre Section 4 Conversion de types 45

46 Ces méthodes convertissent les nombres tout en changeant leur format (on considère nb = par la suite) tofixed() : précision décimale nbtofixed(2) (nb == ) toexponential() : nombre de chiffres derrière la virgule dans une écriture exponentielle nbtoexponential(1) (nb == 12e+5) toprecision() : nombre de chiffres à afficher dans le nombre (écriture exponentielle éventuelle) nbtoprecision(5) (nb == 12346e+5) Conversions de chaînes en nombres Il existe plusieurs manières de convertir une chaîne ch en nombre nb nb = Number(ch); : création d un objet nombre à partir d une chaîne nb = parseint(ch); : convertit la chaîne en nombre entier nb = parsefloat(ch); : convertit la chaîne en nombre réel Si la chaîne initiale contient des chiffres suivis de le res, les le res sont ignorées parseint( 3 petits cochons ); : renvoie 3 parsefloat( 314, ie pi ); : renvoie 314 Pour une conversion vers entier, il est possible de préciser la base de départ parseint( ff, 16); : renvoie 255 Si la conversion est impossible, la valeur NaN est retournée 5 Opérateurs Opérateurs arithmétiques : +, -, * (multiplication), / (division), % (modulo) Opérateurs de comparaison : <, <=, >, >=, == (égal), === (identité),!= (différent),!== (non identité) Opérateurs logiques non logique :! (ex :!(b >= c)) et logique : && ou logique : Opérateurs d égalité et d identité JavaScript fait la différence entre ==, l opérateur d égalité, et ===, l opérateur d identité L opérateur d identité (===) renverra true si les deux valeurs testées ont même type (nombre, booléen, chaîne, tableau, objet ) et même valeur (ou même référence) L opérateur d égalité (==) renverra true si les deux valeurs testées ont même valeur après une éventuelle conversion (chaîne nombre, booléen nombre, objet chaîne) Affectations Affectation : = Attention : l affectation renvoie une valeur : celle qui a été affectée 1 a = b = c = 0; Opérateurs d affectation : x oa y effectue une opération et une affectation 46 Chapitre 4 Le langage JavaScript

47 exemple : a += 3; équivalent à a = a + 3; opérateurs : +=, -=, *=, /=, %= Opérateurs d incrémentation a++;, eq à a += 1;, donc à a = a + 1; ++a;, eq à a += 1;, donc à a = a + 1; a--;, eq à a -= 1;, donc à a = a - 1; --a;, eq à a -= 1;, donc à a = a - 1; Exemples b = a++;!((++a == b) && (c <= d--)) Différence entre a++ et ++a? a++ est effectué après l instruction ++a est effectué avant l instruction Exemple de différences de comportement entre opérateurs d incrémentation 1 var x = 3; 2 var y = 5; 3 4 x = y++; // x == 5, y == 6 5 x = ++y; // x == 7, y == 7 6 Les structures de contrôle 1 Les conditionnelles Deux syntaxes possibles if (<cond bool>) instruc si vrai Les instructions peuvent être une seule instruction ( ; final!) un bloc d instructions (délimité par { }) Parenthèsage de la condition obligatoire! Exemples if (<cond bool>) else instruc si vrai instruc si faux 1 if ((i % 2) == 0) 2 alert( i est pair ); 3 else 4 alert( i est impair ); 5 /**************************************/ 6 if (i > 5) { 7 i++; 8 a--; 9 j *= 3; 10 } Section 6 Les structures de contrôle 47

48 2 Les boucles Traduction de «tant que faire» Syntaxe Exemples while (<cond bool>) instructions while (i > 0) somme += i--; while (!stop) { somme += i--; stop = (i == 0); } Traduction de «faire tant que» Syntaxe Exemples do instructions while (<cond bool>); do somme += i--; while (i > 0); do { somme += i--; stop = (i == 0); } while (!stop); Traduction de «pour tant que faire» Syntaxe for (exp1; exp2; exp3) instructions Explication des champs expi exp1 : initialisations de la boucle exp2 : condition de continuation exp3 : instructions exécutées après chaque itération exp1 et exp3 peuvent contenir plusieurs instructions, séparées par des virgules Exemple 1 for (i = m, somme = 0, nb = 0; i <= n; i++) { 2 somme += i; 3 nb++; 4 } 5 alert( Moyenne : + (somme / nb)); 48 Chapitre 4 Le langage JavaScript

49 7 Les fonctions Les fonctions en JavaScript se définissent par le mot-clé function suivi du nom de la fonction d une paire de parenthèses contenant une liste optionnelle de paramètres, séparés par des virgules d une paire d accolades ({ }) contenant les instructions JavaScript Exemples de définition de fonctions 1 function carre(x) { 2 return x * x; 3 } 4 function distance (x1, y1, x2, y2) { 5 var dx = x2 - x1; 6 var dy = y2 - y1; 7 return Mathsqrt(dx * dx + dy * dy); 8 } 9 function yop() { 10 alert( Yop! ); 11 } Les instructions peuvent comprendre une instruction return, perme ant à la fonction de renvoyer une valeur Une fonction se terminant par une instruction autre que return renvoie la valeur undefined Les fonctions peuvent être récursives Il est possible de définir dynamiquement des fonctions Utilisation Les appels de fonctions sont réalisés en stipulant le nom de la fonction désirée une paire de parenthèses (opérateur d appel de fonctions) une éventuelle liste de paramètres entre les parenthèses Exemples d appels de fonction 1 var d = distance(5, 4, 7,12); 2 var c = carre(7); 3 var e = distance(carre(7), 5, 4, 9); Paramètres de fonctions Attention : JavaScript ne vérifie rien au niveau des paramètres au niveau du type : JavaScript n est pas typé au niveau du nombre : les paramètres excédentaires sont ignorés, ceux manquants sont remplacés par undefined Il est possible de tester le type des arguments grâce à l opérateur typeof JavaScript supporte les fonctions avec un nombre variable de paramètres Section 7 Les fonctions 49

50 8 Les tableaux Ils peuvent contenir des valeurs de types hétérogènes Il existe plusieurs manières de créer un nouveau tableau tableau vide : var t = new Array(); tableau avec longueur prédéfinie var t = new Array(50); tableau initialisé var t = new Array(5, Bonjour, 4, 3); tableau avec valeurs li érales var t = [4, Bonjour, 7, 8]; Les éléments d un tableau sont adressés grâce à l opérateur [ ] a[5] = 47; Les tableaux peuvent contenir des valeurs rangées à des plages d indices discontinus, sans perte de place mémoire Il est possible de connaître la longueur d un tableau grâce à la propriété length var taille = alength; Ce e longueur correspond au dernier indice utilisé + 1 Exemples de fonctions liées aux tableaux join() : convertit tous les éléments d un tableau en chaînes et les concatène (résultat = chaîne) reverse() : renverse la place des éléments d un tableau (premier = dernier, second = avant-dernier, ) sort() : tri les éléments d un tableau (ordre alphabétique) slice(i, j) : retourne un sous-tableau push() et pop() : permet d utiliser le tableau comme une pile 9 Les objets Les propriétés Création Un objet, comme une structure de données algorithmique, permet de regrouper un ensemble d attributs Ces a ributs sont appelés propriétés en JavaScript Création : opérateur new à partir d un type d objet existant d = new Date(); à partir d un objet vide, correspondant à une instance de la classe Object o = new Object(); Initialisation Les objets peuvent aussi être initialisés lors de leur création 50 Chapitre 4 Le langage JavaScript

51 Les propriétés, accompagnées de leur valeur, sont alors énumérées au fur et à mesure et entourées d accolades Exemple de définition d objets 1 var cercle = {x:1, y:5, rayon:45}; 2 var client = {prenom: Phil, 3 nom: Dosch, 4 numero: 13027}; Accès aux propriétés Il n est pas toujours évident de savoir quelles sont les propriétés contenues dans un objet Pour le savoir, il est possible d utiliser une nouvelle structure de contrôle for ( in ) Exemple d accès aux propriétés d un objet 1 var prop; 2 for (prop in document) 3 documentwrite( Propriété : + prop); for (a in b) permet d affecter successivement tous les a ributs de b à a Pour accéder à la valeur de ces a ributs, il est possible d utiliser l opérateur [ ] Exemple d accès aux propriétés et valeurs associées 1 for (prop in document) 2 documentwrite( Propriété : + prop + 3 Valeur : + document[prop]); Remarque : documentprop aurait recherché une propriété appelée «prop» 10 Liens Cours sur JavaScript : Cours et référence JavaScript : Site de ressources autour de JavaScript : Section 10 Liens 51

52 CHAPITRE 5 Interfaçage de JavaScript 1 Quelques manipulations de base Les gestionnaires d événements JavaScript offre aussi la possibilité de réagir à certains événements liés à des éléments HTML Les instructions JavaScript ne sont alors pas placées dans une section script, mais directement dans la définition des éléments concernés Exemple 1 <a href= suitehtml 2 onmouseover= status= Cliquez ici!! ; return true > 3 La suite 4 </a> Gestionnaires liés à la souris onclick, ondblclick : clics de souris (simple, double) onmousedown, onmouseup : bouton appuyé, relâché onmouseover : la souris entre dans la zone d affichage d un élément onmousemove : la souris se déplace dans la zone onmouseout : la souris qui e la zone Sur quelques éléments, onfocus et onblur remplacent onmouseover et onmouseout Gestionnaires liés aux formulaires et au document onreset, onsubmit : associés aux boutons correspondants onselect, onchange : associés à certains éléments de formulaire onload : associé à la fin du chargement d un document onunload : associé à la fermeture d un document Les URL JavaScript En HTML, il est possible de remplacer une référence à une URL par une ou plusieurs instructions JavaScript Dans ce cas, les instructions sont exécutées, au lieu de charger un nouveau document Exemple <a href= javascript:alert( Yo ) >Yo</a> 52

53 Il est possible de faire appel aux fonctions prédéfinies sous JavaScript, ou aux fonctions définies dans le document HTML Exemples de fonctions standards alert() : affiche une boîte de dialogue avec un avertissement close() : ferme la fenêtre moveby(), moveto() : déplace la fenêtre (en relatif ou absolu) open() : ouvre une nouvelle fenêtre resizeby(), resizeto() : redimensionne la fenêtre (en relatif ou absolu) Exemples de variables prédéfinies status : correspond à la barre d état qui se trouve en bas de toute fenêtre du navigateur l affectation d une valeur à ce e variable entraîne un affichage de la valeur dans la barre d état l affichage persiste jusqu à ce qu un autre événement affiche une autre valeur defaultstatus : correspond à la valeur par défaut de la barre d état (par défaut, ce e variable est égale à la chaîne vide) 2 Introduction à l objet document À l intérieur d un document HTML, il y a toujours un objet document accessible depuis les scripts JavaScript Cet objet décrit le document HTML et permet d obtenir certains services depuis JavaScript génération de HTML accès aux ancres, aux zones de formulaire, aux images, aux liens, au titre à la date, au domaine, à l URL courante aux cookies Écriture dans le document L objet document est doté de deux méthodes, write et writeln, perme ant de générer du HTML lors du chargement de la page Pour activer ce service, il suffit de placer des instructions JavaScript en dehors de toute fonction : ces instructions seront automatiquement exécutées lors du chargement La variante writeln permet simplement de passer à la ligne après écriture dans le document Exemples 1 <script language= JavaScript > 2 var i, fact; Calcul de factoriels 3 for (i = 1, fact = 1; i < 10; i++, fact *= i) { 4 documentwrite(i +! = + fact); 5 documentwrite( <br> ); 6 } 7 </script> Section 2 Introduction à l objet document 53

54 1 <script language= JavaScript > 2 var aujourdhui = new Date(); Calculs de dates 3 documentwrite( <p>date actuelle : + 4 aujourdhuitostring()); 5 documentwrite( <p>dernière modif : + 6 documentlastmodified); 7 </script> 3 Communication avec les navigateurs À partir de JavaScript, il est possible d avoir accès à un certain nombre d objets prédéfinis (comme l objet document) Un des objets les plus importants est l objet window, objet global perme ant d interfacer la fenêtre courante à d autres fenêtres Les autres objets perme ant d accéder aux éléments définis dans les documents HTML : frames, images, formulaire Une hiérarchie d objets screen Fenêtre courante navigator window,top, parent,self document frames[] location history forms[] images[] anchors[] applets[] links[] embeds[] Détail des objets accessibles self, window : la fenêtre courante elle-même parent : objet window de la fenêtre parente top : objet window de la fenêtre la plus englobante (principale) navigator : objet correspondant au navigateur frames[ ] : tableau des frames définis dans la fenêtre location : objet relatif à l URL du document actuel history : historique de la navigation de l utilisateur 54 Chapitre 5 Interfaçage de JavaScript

55 document : objet correspondant au document HTML screen : objet rassemblant les propriétés de l écran Les objets window perme ent également d accéder aux variables globales définies en JavaScript : chaque nouvelle variable globale correspond à une nouvelle propriété de la fenêtre courante D autres propriétés sont étudiées plus loin Propriétés accessibles depuis document L objet document contient lui-même d autres objets : forms[ ] : tableau des formulaires du document anchors[ ] : tableau des ancres du document links[ ] : tableau des liens du document images[ ] : tableau des images du document applets[ ] : tableau des applets du document embeds[ ] : tableau des objets insérés dans le document Exemples d utilisation des objets Accès direct à un objet de la fenêtre courante document, location, selflocation Accès au document du second frame frame[1]document Accès au troisième lien de la fenêtre englobante topdocumentlinks[2] Accès au premier formulaire du second frame de la fenêtre parent parentframe[1]documentforms[0] 4 L objet window Propriétés accessibles depuis window closed : booléen perme ant de savoir si la fenêtre a été fermée status, defaultstatus : pour manipuler la barre d état (voir dernier cours) name : nom de la fenêtre, s il a été défini (utilisable avec target) opener : référence à la fenêtre objet qui a permis d ouvrir la fenêtre courante (null si la fenêtre a été ouverte par l utilisateur) Méthode open Syntaxe : open(url, nom, caractéristiques, remplace); url (chaîne) : URL à charger dans la nouvelle fenêtre (aucune si chaîne vide) nom (chaîne) : nom de la nouvelle fenêtre (si une fenêtre de même nom existe déjà, une référence est retournée plutôt que de créer la nouvelle fenêtre) Le nom défini peut ensuite être utilisé dans les a ributs target (balises a ou form) caractéristiques (chaîne) : liste des caractéristiques (séparées par des virgules) de la nouvelle fenêtre, dont la syntaxe est car Section 4 L objet window 55

56 ou car=valeur remplace (booléen) : l URL de la nouvelle fenêtre doit-elle remplacer celle de la fenêtre courante dans l historique des liens visités? Les différentes caractéristiques disponibles sont height : hauteur de la fenêtre location : zone de saisie d URL visible menubar : menus visibles resizable : fenêtre redimensionable status : barre d état visible toolbar : barre d outils visible width : largeur de la fenêtre Exemples open( yohtml ); open( yohtml, id1 ); open( yophp, fen1, height=100, width=50 ); open( yophp4, id2, menubar, status, resizable=no ); open(, fen1, menubar=yes, width=150, location, status ); Méthode prompt Syntaxe : prompt(message, défaut); message (chaîne) : le message (texte) qui apparaît dans la boîte de dialogue (question posée à l utilisateur) défaut (chaîne) : valeur par défaut de la réponse (passer la chaîne vide pour afficher une zone de réponse vierge) Autres méthodes Avertissement alert(message); message : message d avertissement Confirmation confirm(question); question : question posée renvoie : true si OK est cliqué, false sinon Un exemple d utilisation 1 <head> 2 <title>test génération</title> 3 <script language= JavaScript > 4 function affiche(x) { 5 var win = open(, f1, width=100,height=100 ); 6 windocumentwrite(x + <br><br> ); 7 windocumentwrite( <a href= javascript:close() > ); 8 windowumentwrite( Fermer</a> ); 9 windocumentclose(); 10 } 11 </script> 12 </head> 56 Chapitre 5 Interfaçage de JavaScript

57 13 <body> 14 <h1>test génération</h1> <a href= Javascript:affiche( Hello ) >Hello</a> 17 <br> 18 <a href= Javascript:affiche( Salut ) >Salut</a> 19 </body> A ention : ne pas confondre windowclose() (fermeture fenêtre) et documentclose() (fin de document) 5 Gestion des formulaires En HTML les formulaires perme ent à l utilisateur de saisir des données les formulaires ne sont utiles que s ils comportent un bouton de soumission En JavaScript possibilité de raccorder des scripts à chacun des événements associés aux éléments de formulaire il n est pas nécessaire que les formulaires soient dotés de bouton de soumission pour être utilisés Interfaçage Les différents formulaires définis en HTML sont accessibles depuis JavaScript grâce au tableau forms[ ], ra aché à l objet document, dans l ordre où ils sont définis Exemples documentforms[0] : premier formulaire documentforms[documentformslength - 1] : dernier formulaire Chaque formulaire contient une propriété elements[ ], correspondant aux différents éléments du formulaire, toujours selon leur ordre de définition documentforms[0]elements[1] : deuxième élément du premier formulaire documentforms[1]elements[documentforms[1]elementslength-1] : dernier élément du second formulaire Il est aussi possible de manipuler les formulaires et leurs éléments à partir de leur nom, s il a été défini Exemple sur les formulaires définition : <form name= yo > utilisation : documentyo à la place de documentforms[] Exemple sur les éléments définition : <input name= argh > utilisation : documentyoargh à la place de documentforms[]elements[] L utilisation des noms est conseillé car les formulaires correspondant sont beaucoup plus facilement maintenables Propriétés des éléments En JavaScript, chaque élément d un formulaire est doté des propriétés suivantes type : chaîne de caractères décrivant le type de l élément Section 5 Gestion des formulaires 57

58 form : référence vers le formulaire dans lequel l élément est contenu (donc documentforms[0] == documentforms[0]element[0]form) name : nom de l élément value : chaîne de caractères décrivant la valeur de l élément Gestionnaires d événements des formulaires Fonctions (méthodes) à appliquer sur un formulaire submit() : pour soume re un formulaire reset() : pour effacer un formulaire Gestionnaires d événements (balise form) onsubmit : lorsque l utilisateur clique sur le bouton de soumission onreset : lorsque l utilisateur clique sur le bouton d effacement Les gestionnaires d événements onsubmit et onreset lance l action correspondante si la valeur true est renvoyée ; ils ne font rien sinon <form onreset= return confirm( Sûr? ); > Ces événements ne sont appelés que s il y a un clic sur le bouton correspondant (pas si les fonctions submit() ou reset() sont appelées) Vérification de formulaires Pour effectuer des vérifications de formulaires, on écrit généralement un script du genre <form onsubmit= return verifie(); > Dans cet exemple, la fonction verifie() doit retourner true : si le formulaire est validé, et qu il doit donc être envoyé false : dans le cas contraire, le formulaire n est alors pas envoyé Gestionnaires d événements des éléments onclick : invoqué lors d un clic sur l élément correspondant (utile pour les boutons) onchange : invoqué lors d un changement de focus, lorsque le dernier élément visité a été modifié onfocus : invoqué lorsqu un élément reçoit le focus onblur : invoqué lorsqu un élément perd le focus 1 <script language= JavaScript > 2 function calcule() { Interfaçage de JavaScript avec les formulaires 3 var opa = parsefloat(documentmonformuloperavalue); 4 var opb = parsefloat(documentmonformuloperbvalue); 5 6 var res = opa + opb; 7 documentmonformulresvalue = res; 8 } 9 </script> 10 <form name= monformul > 11 Nom : <input type= text name= nom size= onchange= affiche( nom ); > <br> 13 Prénom : <input type= text name= prenom size= Chapitre 5 Interfaçage de JavaScript

59 14 onchange= affiche( prenom ); > <br><br> <input type = text name= opera size= 15 > + 17 <input type = text name= operb size= 15 > <br> 18 = <input type = text name= res size= 15 > <br><br> 19 <input type= button value= Calculer! name= go 20 onclick= calcule(); > 21 </form> 6 Gestion des images Au niveau HTML, les images sont déclarées grâce à la balise <img> Au niveau JavaScript, les images d un document sont accessibles via le tableau images[ ] de l objet document Ce tableau contient des objets Image Ces objets, comme les autres objets accessibles sous JavaScript, sont dotés de nombreuses propriétés 1 Propriétés d images border : largeur de la bordure en pixels complete : booléen indiquant si le navigateur a fini de traiter l image (fin de chargement ou erreur) height : hauteur de l image en pixels hspace : valeur, en pixels, de l espace ajouté à gauche et à droite de l image lowsrc : URL d une image équivalente à plus faible résolution name : nom de l image (celui qui peut être utilisé à la place d un accès grâce au tableau images[ ]) src : chaîne accessible en lecture / écriture correspondant à l URL de l image vspace : valeur, en pixels, de l espace ajouté en haut et en bas de l image width : largeur de l image en pixels La propriété src En lecture, l a ribut src permet d obtenir l URL d une image Exemple : URL de la seconde image documentimages[1]src En écriture, il permet de changer dynamiquement l URL correspondant à une image Seule contrainte : l image de remplacement doit avoir les mêmes dimensions que l image originale (selon la norme) 2 Les rollovers En pratique, ce e fonctionnalité est souvent utilisée pour créer des rollovers une première image est chargée à un endroit donné d un document lorsque la souris passe au-dessus de l image, une autre image est affichée à la place En associant des liens à ce type d images, les rollovers perme ent d inciter l utilisateur à cliquer On utilise les rollovers dans les menus, les boutons, certaines images Section 6 Gestion des images 59

60 Exemple de rollover avec code JavaScript dans la balise HTML 1 <a href= screamhtml 2 onmouseover= documentyopsrc= roll2gif ; 3 onmouseout= documentyopsrc= roll1gif ; > 4 <img name= yop src= roll1gif > 5 </a> Un nom (yop) a été a ribué à l image pour la manipuler plus facilement que par images[ ] L a ribut border permet de supprimer le cadre bleu (lien interacti ) qui est affiché sinon Images bufferisées Problème : dans l exemple précédent, la deuxième image n est chargée (demandée au serveur) qu au moment où l événement onmouseover est déclenché Si la taille de l image est importante, où si la liaison au réseau est mauvaise, la mise à jour peut demander du temps Du coup, l effet d animation n est pas soigné On perd ainsi tout l intérêt de ce genre de technique Solution : pour avoir un bel effet d animation, il faut que la deuxième image soit préchargée (présente dans le buffer du navigateur) Pour cela il est possible de créer un nouvel objet Image, sans l afficher à l écran l image correspondante est chargée sous le navigateur, même si elle n apparaît pas quand le rollover est activé, l image est récupérée dans le cache, accélérant l effet d animation Les caches : explication Au niveau du Web, comme à d autres niveaux, de nombreux caches sont utilisés and une information transite sur le réseau, elle est recopiée à chacune de ses étapes dans un cache local Lorsqu une information est demandée, chaque «maillon» en jeu teste si l information demandée est dans son cache si elle y est, il la transmet directement sinon, il transmet la demande au maillon suivant FAI Serveur Web Cache (buffer) Cache (buffer) Les caches perme ent d améliorer très sensiblement les délais d accès à une information Rollovers : version bufferisée 60 Chapitre 5 Interfaçage de JavaScript