1. HTML, CSS 2. Javascriptkosmina.eu/web/SlidesM2WIC.pdf · 35 En utilisant l’encodage iso-8859-1...
Transcript of 1. HTML, CSS 2. Javascriptkosmina.eu/web/SlidesM2WIC.pdf · 35 En utilisant l’encodage iso-8859-1...
HTML5, CSS, Javascrip, Jquery
1. HTML, CSS 2. Javascript
ROU TAGE
HTML : schéma de principe
URL
Requête
Requête
HTML…
HTML…
Navigateur
HTML
CSS
Javascript
3
Plan du cours initiation HTML/CSS
HTML Présentation Les balises, les attributs Structure d'un document Typologie des éléments Les chemins Bonnes pratiques
4
Une page web c’est…
Du Contenu
De la mise en page
5
Une page web c’est…
Le contenu : texte, images, liens, tableaux… que le visiteur va voir concrètement. Le créateur de la page indique librement le contenu qu’il souhaite. La mise en page : ce qui indique au navigateur comment présenter le contenu. Pour cela on utilise des langages de présentation : HTML, XHTML, HTML5,…
6
Une page web c’est…
Une page, c’est donc un (des) fichier(s) qui décrivent la structure du document Web et le contenu à afficher. Extension .html ou htm
7
HTML
Fichiers au format texte permettant la description de documents Web
Sous l'autorité du W3C
World Wide Web Consortium http://www.w3c.org
8
HTML & XHTML
HTML : HyperText Markup Language Structuration de documents dédiés aux sites Web
XHTML : eXstensible HyperText Markup
Language ● Equivalent à HTML ● Mais reformulation de HTML en XML ● Ecriture plus rigoureuse ● HTML5 inclus XHTML
9
HTML : exemple
<html> <head> <meta charset="ISO-‐8859-‐1"> <Otle>Page d'exemple</Otle> </head> <body> <p>Hello world</p> </body>
</html>
<html>
<head> <meta charset="ISO-‐8859-‐1"/> <Otle>Page d'exemple</Otle> </head> <body> <p>Hello world</p> </body>
</html>
10
HTML : structure générale
1-‐ Des codes entre < et > : les balises !
11
HTML : structure générale
3-‐ Du contenu
<html> <head> <meta charset="UTF-‐8"> <Otle>Page d'exemple</Otle> </head> <body> <p>Hello world</p> </body>
</html>
12
HTML – Les Balises
Langage de balisage composé de balises (ou marqueurs ou tags)
Les balises sont prédéfinies par le langage Structurer les documents : définir les zones et les widgets de la page
Syntaxe : <mot_cle>texte</mot_cle>
Ou <mot_cle/>
13
Le chevauchement des balises est illégal
Valide :
<h1>Texte<i>sans chevauchement</i></h1> Invalide :
<h1>Texte<i>avec chevauchement</h1></i>
HTML – Les Balises
14
Les attributs : permettent de préciser une valeur dans les balises ouvrantes ou uniques, structure
en paires : nom="valeur"
<p id="unique">Paragraphe unique</p> <p class="special">Paragraphe spécial</p>
Apostrophes doubles (le plus courant) ou simples optionnelles mais (fortement) recommandé
HTML – Les Balises
15
Attributs standards : id="id432" ou class="typeUrgent" Attention :
● XTML : case sensitive ; HTML5 : non ● Recommandation : noms d'attributs en minuscules
HTML – Les Balises
16
Certains attributs sont obligatoires sur certaines balises:
<img src="url_de_l_image"/> <img/>
HTML – Les Balises
17
Les attributs standards peuvent avoir des valeurs contraintes :
<input type="checkbox" name="rouge" value="ok" checked="checked"/>
<input type="map" name="grenoble" value="grenoble" checked="known"/>
HTML – Les Balises
18
Un attribut standard ne peut être utilisé que sur les balises correspondantes :
<img src="url_de_l_image"/> <p src="url_de_l_image"/>
HTML – Les Balises
19
Il est possible d’ajouter des attributs non prévus dans le langage, en faisant précéder leur nom de "data-"
<p data-couleurDuCiel="bleu">texte</p> est valide.
HTML – Les Balises
20
<p data-couleurDuCiel="bleu">texte</p>
Nota : "data-" non requis en HTML4, son absence est supportée par les navigateurs, mais non conforme au langage HTML5.
Rappel : couleurDuCiel = couleurduciel
couleurDuCiel = non recommandé, mais + facile
HTML – Les Balises
21
<!-- Un commentaire -->
Non affiché par les navigateurs Mais comme tout le reste du document
lisible en affichant la source
HTML – Les commentaires
22
On ne met pas de tiret double à l’intérieur d’un commentaire
<!-- Un commentaire --> <!--============-->
sont valides.
<!-- Un autre -- commentaire --> <!-----------------------> ne sont pas valides.
HTML – Les commentaires
<!doctype html> <html lang="fr">
<head> <meta charset="UTF-‐8"> <Otle>Page d'exemple</Otle> </head> <body> <p>Hello world</p> </body>
</html>
23
2-‐ Des blocs : le document Html qui conOent un en-‐tête et un corps
HTML – Structure des documents
<!doctype html> <html lang="fr">
<head> <meta charset="UTF-‐8"> <Otle>Page d'exemple</Otle> </head> <body> <p>Hello world</p> </body>
</html>
Meta ...
title
head
p
p
body
24
L'imbrications des éléments
html
HTML – Structure des documents
25
HTML – Structure des documents
Un document HTML comprend plusieurs parties Un doctype Un élément racine html
Un en-tête Un corps
26
HTML – Structure des documents
doctype <!doctype html > html <html>
Un en-tête <head lang="fr"> </head>
Un corps <body> </body> <html>
27
Le tag doctype indique au navigateur dans quel type de HTML la page a été écrite (HTML-3.2 «classique», HTML-4
de transition ou strict, XHTML, etc...).
<!doctype html> signifie : document en HTML5.
Utile pour les navigateurs, les lecteurs de votre code ou les validateurs de code
HTML – Structure des documents Déclaration du type de document
28
La déclaration de la langue se fait dans la balise html.
<html lang="fr">
Nous déclarons ici que la langue est le français, ce qui sert au référencement (ex : Google vous propose les
pages en français ou une traduction) et aux synthétiseurs vocaux.
Langue HTML – Structure des documents
29
Délimité par les balises <head> et </head> Contient des informations non affichées par les navigateurs courants Le titre Les méta-données Les références à d'autres ressources Le type d'encodage des caractères
L’en-tête HTML – Structure des documents
30
<title>Mon document</title>
Le titre n’est pas directement affiché dans le
document, mais souvent par le navigateur, dans l’interface (nom de l’onglet, par exemple)
HTML – Structure des documents L’en-tête : le titre
31
Ce sont : mots clés et description : décrire le contenu du document et faciliter le référencement
informations / instructions aux moteurs de recherche : indiquent s’il faut suivre les liens lors de l’indexation d’un site, la fréquence de relecture souhaitée
D’autres méta données permettent de préciser le nom de l'auteur, la version…
HTML – Structure des documents L’en-tête : les méta-données
32
Exemples : • <meta name="description" content="Cours SIL-2, IUT2 de
Grenoble"/> • <meta name="author" content="Pierre Dupont"> • <meta name="keywords" content="sil2, html, css"> • <meta name="robots" content="[[no]index][no[flollow]]"/>
HTML – Structure des documents L’en-tête : les méta-données
33
Le type d'encodage des caractères de la page <meta charset="encodage"/>
ATTENTION : doit être cohérent avec l'encodage
physique de la page.
HTML – Structure des documents L’en-tête : encodage
Pour le français on dispose des encodages suivants : iso-‐8859-‐1 : encodage classique pour les langues de l’Europe occidentale (aussi appelé LaOn-‐1) iso-‐8859-‐15 : même encodage comportant quelques caractères supplémentaires comme le signe €… ud-‐8 : encodage pour les caractères de la majorité des langues mondiales
34
A noter : En utilisant l’encodage iso-8859-1 ou iso-8859-15 les caractères ASCII 7-BIT (codes 32 à 127) sont valides, avec 4 exceptions car ce sont des caractères du langage XHTML. Ces exceptions sont codées avec des entités :
" (codé ") & (codé &) < (codé <) > (codé >)
HTML – Structure des documents L’en-tête : encodage
35
En utilisant l’encodage iso-8859-1 ou iso-8859-15 : Les caractères, en dehors de la classification ASCII 7-BIT (donc les codes de 128 à 255), sont codés par des entités ou des références numériques : Par exemple : é (codé é ou é) è (codé è ou è) à (codé à ou à) ô (codé ô ou ,) etc.
HTML – Structure des documents
Remarque : le blanc
insécables’écrit
L’en-tête : encodage
36
Les références permettent de… référencer des ressources utilisées par le document : feuilles de style CSS, icône, fichiers de scripts externes Javascript...
Exemples :
<link rel="stylesheet" type="text/css" href="../main.css" /> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
HTML – Structure des documents L’en-tête : les références
37
Le corps d'un document est délimité par les balises <body> et </body>. Il peut contenir divers éléments :
HTML – Structure des documents
• du texte (Otres, paragraphes, listes, etc.)
• des images • des hyperliens • des tableaux
• des formulaires • des cadres • des objets externes (applets Java, Flash …)
• etc.
Le corps du document
38
HTML – Typologie des éléments
Chaque élément a une double identité : ● Sa structure (mot clé, attributs standards, …)
● Son rendu (ou apparence), qui est défini par défaut pour chaque navigateur (et qui peut être modifié par CSS).
Structure et rendu
39
HTML – Typologie des éléments
2 grands mode de rendu des éléments
Les rendus de type block Les rendus de type inline
Cette typologie dicte le comportement en terme de positionnement et d’affichage
Block et inline
40
Ce sont : Des blocs dans les documents – Exemples : paragraphes, listes...
Apparaissent les uns en dessous des autres Ont des dimensions et des marges externes ou internes fixées par défaut, à l’exception des blocs <div> Sont positionnables (avec les feuilles de style CSS)
HTML & XHTML – Typologie des éléments Les éléments de type Block
41
Ils peuvent : contenir d'autres blocs sauf les blocs de paragraphes (<p>) et de titres (<h1>, <h2>, … <h6>) qui ne peuvent contenir d'autres blocs Contenir des éléments inline
HTML & XHTML – Typologie des éléments Les éléments de type Block
42
Exemples
<table></table> <ul></ul> <ol></ol> <blockquote></blockquote> <dl></dl> <div></div> etc.
<h1></h1> <h2></h2> … <h6></h6> <p></p>
HTML & XHTML – Typologie des éléments Les éléments de type Block
Eléments de type block pour balisage sémantique HTML – Structure des documents
HTML – Structure des documents Eléments de type block pour balisage sémantique
45
Apparaissent au fil du texte, ils ne sont pas placés les uns au dessus des autres (ils restent à l’emplacement défini). N'ont pas de marges internes ou externes par défaut Ne sont pas dédiés à un positionnement précis (même si cela est possible avec les CSS) Servent à modifier, enrichir des portions de textes, apporter du sens
Les éléments inline HTML – Structure des documents
46
Les éléments inline : Ne peuvent contenir que des éléments inline (→ pas de block) Un élément inline doit être contenu dans un élément de type block
HTML & XHTML – Typologie des éléments Les éléments inline
Les nouveautés dans le code HTML Des nouvelles balises
time : date et/ou heure Accompagnée (ou non) de datetime au format ISO AAAA-MM-JJThh:mm:ss (complètement ou non) S'il n’y a pas d'attribut datetime, le contenu doit être au format ISO
<time datetime="18:00">18 h</time> <time datetime="2010-11-15">15 novembre</time> <time>2010-11-15</time>
48
Exemples : <a></a> <em></em> <img> <b></b> <i></i> <strong></strong> <span></span>
HTML & XHTML – Typologie des éléments Les éléments inline
Note : en HTML4, certaines balises définissaient un rendu visuel (ex : <b> = texte en gras. Ce n'est plus le cas en HTML5.
b (avant : bold) ne signifie pas « en gras », mais stylistiquement décalé sans avoir une importance supplémentaire (sinon, utiliser strong) i (avant : italic) ne signifie pas « en italique », mais « dans une voix ou une humeur alternative » sans emphase ni importance particulière (sinon, utiliser em) hr (avant : ligne horizontale) prend un sens sémantique de séparation entre paragraphes (potentiellement rendu comme une ligne horizontale) small ne signale plus un texte en petite taille, mais caractérise des éléments « en petits caractères » comme un copyright ou une référence écrites « en petits caractères »
Les éléments inline HTML – Structure des documents
50
div et span = éléments pour structurer des documents Web (en association avec les CSS)
div = élément de type bloc span = élément en ligne.
n’apportent aucune contrainte de présentation, ils sont « neutres » à cet égard. Ils servent à « ajouter » de la
structure. Attention, ces éléments n’ont pas de sens particulier, ils sont neutres
également sur le plan de la sémantique. Par conséquent, ils ne doivent pas remplacer systématiquement les autres éléments.
Les structures universelles HTML – Structure des documents
51
HTML – Les chemins
Un document est positionné dans une arborescence de répertoires et de fichiers.
Le répertoire de plus haut niveau (contenant tous les autres documents ou fichiers), est appelé la « racine ».
52
On peut exprimer la destination d’un lien de manière absolue (depuis la racine) :
/rep/sousrep/index.html
Problème : si on déplace l’ensemble des documents, par exemple pour les inclure dans un répertoire placé différemment par rapport à la racine, les chemins ne seront plus valides.
Les chemins absolus HTML – Les chemins
53
Descendre dans l’arborescence, vers un sous répertoire : nom_sous_repertoire/ ou ./nom_sous_repertoire/ ./ représentant le positionnement courant
Remonter dans l’arborescence : ../
Remonter de plusieurs niveaux : ../../../
Remonter puis de redescendre dans l’arborescence : ../../autre_repertoire/autre_sous_repertoire
Les chemins relatifs HTML – Les chemins
54
Pas destiné à remplacer le positionnement ! Balises <table> </table> Il est souhaitable d’ajouter à la balise <table> l’attribut summary = indiquer un résumé du tableau (<table summary="ce que contient le tableau">).
HTML – Les tableaux
55
Chaque ligne est encadrée par <tr> </tr> Les cellules d'en-tête sont encadrées par <th> </th> Les cellules de valeur sont encadrées par <td> </td>
HTML – Les tableaux
56
Les balises <thead></thead> <tfoot></tfoot> <tbody></tbody> permettent de structurer les tableaux
La balise <caption></caption> permet d’indiquer la légende du tableau.
HTML – Les tableaux
57
Exemple <table> <caption>Légende</caption> <thead> <tr> <th>Cellule d'en tête A</th> <th>Cellule d'en tête B</th> </tr> </thead> <tfoot> <tr> <td>Cellule de pied de tableau A</td> <td>Cellule de pied de tableau B</td> </tr> </tfoot>
...suite <tbody> <tr> <td>Valeur A ligne 1</td> <td>Valeur B ligne 1</td> </tr> <tr> <td>Valeur A ligne 2</td> <td>Valeur B ligne 2</td> </tr> </tbody> </table>
HTML – Les tableaux
58
Colonnes étendues <table> <tr> <th colspan="2">Cellule d'en tête étendue en largeur</
th> </tr> <tr> <td>Valeur A ligne 1</td> <td>Valeur B ligne 1</td> </tr> <tr> <td>Valeur A ligne 2</td> <td>Valeur B ligne 2</td> </tr> </table>
L'attribut colspan crée des cellules qui s'étendent sur plusieurs cellules d'un tableau, en ligne
HTML – Les tableaux
59
Lignes étendues <table> <tr> <th>Cellule d'en tête A</th> <th>Cellule d'en tête B</th> </tr> <tr> <td rowspan="2">Valeur A ligne 1 et 2 (étendu)</td> <td>Valeur B ligne 1</td> </tr> <tr> <td>Valeur B ligne 2</td> </tr> </table>
L'attribut rowspan crée des cellules qui s'étendent sur plusieurs lignes d'un tableau
HTML – Les tableaux
60
Balise <img>. Ses principaux attributs sont :
src : emplacement du fichier source de l'image
width : largeur
height : hauteur
alt : texte qui apparaît lorsque l'image ne s'affiche pas et comme info bulle de l'image
<img src="../../images/chose.gif" width="16" height="18" alt="exemple d'image" />
HTML – Les images
61
Lien vers une autre page - même site - même répertoire <a href="page1.html">Titre du lien</a>
Lien vers une autre page - même site - autre répertoire <a href="../../rep1/sousrep2/page1.html">Titre</a>
Lien vers une autre page - nouvelle fenêtre du navigateur <a href="exemples/page1.html" target="_blank">Lien</a>
HTML – Les liens
62
Liens vers une page du même site
<a href="page2.html">Suite</a>
HTML – Les liens
Liens vers une page d'un autre site <a href="http://www.autresite/chemin/page.html">Un site</a>
Lien vers un fichier
<a href="mydoc.pdf">Document PDF</a> <a href="http://www.autresite/mydoc.pdf">Document PDF</a>
63
Lien vers un fragment de document
Définition d'un fragment : <a id="ancre12">Sommet</a>
Accès au fragment : <a href="#ancre12">Lien</a>
<a href="http://www.autresite/page1.html#ancre12">Lien</a>
HTML – Les liens
64
Lien sous forme d'image vers une autre page
<a href="index.html"><img border="0" src="../images/i.gif" width="16" height="18” /></a>
HTML – Les liens
65
Quelques remarques en guise de conclusion
Valider ses documents ?
La validation des documents, même si elle est nécessaire, n’est pas suffisante : seule la
validité de la syntaxe est vérifiée, en aucun cas la qualité structurelle ou sémantique du
document.
validator.w3.org
66
Les CSS Cascading Style Sheets
● Rôle, usages
● Sélecteurs
● Syntaxes de regroupement
● Intégration dans les documents HTML et XHTML
● L'héritage
● Présentation de quelques propriétés
● Le positionnement
● Les types de média
● Le principe de cascade
● Bonne pratiques
67
• CSS = Cascading Style Sheets = feuilles de style en cascade
– Ensemble de règles – Qui sélectionnent les éléments HTML – Qui leur associent des caractéristiques de style.
• 3 versions : CSS 1 et CSS 2 puis CSS 3
Généralités
68
• Séparation du contenu et de la présentation
• Positionnement et style
• Construction d’une charte graphique (et d’une cohérence globale)
• Factorisation des règles de style
Les apports des feuilles de style
69
• Séparation du contenu et de la présentation : – Conserver la lisibilité des documents même avec
des navigateurs ne supportant pas les CSS – Permettre leur consultation avec d’autre
supports (assistants personnels, synthèse vocale, navigateurs braille…)
– Améliorer l’accessibilité des documents – Améliorer l’impression des documents
Les apports des feuilles de style
70
• Une règle se compose de : – Un sélecteur – Une déclaration entre accolades { }, composée de
propriétés séparées par des ; § Une propriété est constituée de
§ Un mot-clé, suivi de ":" § La (les) valeur(s) associée(s)
Exemple (pour appliquer une taille de 18 pixels aux titres de niveau 1), la règle est :
h1 { font-size:18px;}
Les règles d'écriture
71
• Les commentaires dans les feuilles de style s’écrivent entre /* et */
Par exemple :
/* commentaires */
Commenter son code est toujours conseillé, notamment lorsque les
feuilles de style deviennent longues / complexes
Les règles d'écriture
72
Sélecteur = « lien » entre le document HTML et la feuille de style (ou les feuilles de style). Permet au CSS d'identifier (sélectionner) le(s) élément(s) au(x)quel(s) appliquer une règle.
3 types simples de sélecteurs : – les balises – les classes – les identificateurs
Les sélecteurs
73
Toutes les balises HTML peuvent servir de sélecteurs à des règles CSS. Exemples
– Pour agir sur les paragraphes p { font-size: 14px;}
– Pour agir sur les liens a{font-family:tahoma, arial, verdana;}
Les sélecteurs Balises
74
Les classes HTML = familles d'éléments librement définies <p id="p1" class="maclasse">…</p>
<span id="s2" class="maclasse">…</span> Sélection en CSS : nom de la classe préfixé d'un point
Exemple
.maclasse { color: green;}
Les sélecteurs Classes
75
Les classes peuvent être restreintes à un élément – Le point est précédé de l’élément auquel la classe peut être
appliquée – La classe ne s ’applique qu’aux éléments correspondants
p.maclasse {color : green;}
– La règle s'appliquera à tout paragraphe de classe maclasse – Mais PAS aux autres éléments même s'ils sont de la classe
maclasse (div, h1, span, table ou autre)
Les sélecteurs Classes
76
Les identificateurs ne peuvent porter que sur un seul élément, unique et identifié (de fait) dans un document HTML
Le sélecteur d’un identifiant est écrit avec un dièse (#) comme préfixe
#monidentificateur { … }
Les sélecteurs Identificateurs
77
Exemple : #grandtitre { font-weight: bold;
} Côté HTML : <h1 id="grandtitre">Mon titre</h1>
Les sélecteurs Identificateurs
78
• Lorsque c’est possible, lorsqu’un élément est identifié de manière unique dans un document, on privilégie l’utilisation d’un identificateur : le code est ainsi plus facile à lire et à maintenir.
• Les classes sont adaptées pour des éléments génériques, (éventuellement) appelés à être utilisés plusieurs fois dans un même documents : « types » de paragraphes, éléments redondants (mise en valeur de portions de texte) …
Utiliser des classes ou des identificateurs ? Quelques remarques en guise de conclusion
79
4 façons d'incorporer les directives de style au XHTML.
– Données incorporées dans les balises
– Données incorporées dans l’en-tête du document
– Feuille externe attachée ou liée
– (Feuille de style importée)
Intégration des CSS dans les documents
80
Données incorporées dans les balises Avec l'attribut style dans le corps du document.
<p style="color:red; font-weight:bold;"> Rouge gras
</p>
Intégration des CSS dans les documents Directives de style dans les balises
81
Données incorporées dans l’en-tête du document Avec l'élément <style> dans l'en-tête du document. Les règles s’appliquent alors à l’ensemble du document. <head> … <style type="text/css"> h4 { color:green } </style>
</head>
Intégration des CSS dans les documents Directives de style dans l'en-tête
82
Avec l'élément <link> vers une feuille de style externe, placé dans l’en-tête du document <head> … <link rel="stylesheet" type="text/css" href="monstyle.css">
</head> …
Les règles de style se trouvent dans un fichier monstyle.css auquel le document fait appel ; Il est possible et parfois utile de lier plusieurs feuilles de styles successivement.
Intégration des CSS dans les documents Feuille externe attachée ou liée
83
Remarque : en appliquant un style « par défaut » à un élément englobant, dans le cas où ce style n’est pas redéfini, les éléments « enfants » de body, et les « enfants des enfants » hériteront de ce style
L'héritage Remarques
<div style="color:red; font-weight:bold;">
Rouge gras
<div>
Rouge gras aussi
</div>
</div>
La div englobée hérite des propriétés de style Note : définir un style sur body = l'appliquer par défaut à tous les éléments de la page
84
NB : Certaines propriétés de style ne sont pas transmises de l'élément parent à l'élément enfant, c’est le cas de margin, padding (et d’autres propriétés de bloc). Il y aussi certains bugs de navigateurs anciens
L'héritage Remarques
85
• Par défaut, le navigateur construit l'affichage au fur et à mesure que les descriptions des éléments lui parviennent : un bloc est placé en dessous du précédents, les éléments inline sont placés les uns à côté des autres.
• Ces éléments sont alors dits "dans le flux", sa position dépend alors de ses propres marges et des marges internes du conteneur et des éléments adjacents.
Le positionnement Positionnement "dans le flux"
86
Le positionnement Positionnement dans le flux
div { width: 600px ; padding-top: 20px ; border: solid 1px black;
} p {
margin-left: 20px ; margin-bottom: 20px ; width: 300px; border: solid 1px black;
}
<div> <p>paragraphe</p> <p>paragraphe</p>
</div>
87
Le positionnement Positionnement relatif
• Le positionnement relatif permet d'inscrire un contenu en flux normal, puis de le décaler horizontalement et/ou verticalement. Le contenu suivant n'est pas affecté par ce déplacement, qui peut donc entraîner des chevauchements.
• Les propriétés top, right, left, bottom, permettent de fixer la position relative.
88
<div> <p id="premier">paragraphe</p>
<p id="second">paragraphe</p>
</div>
Le positionnement Positionnement relatif
… div {
width : 600px ; padding-top : 20px ; border: solid 1px black;
} p#premier {
margin-left : 20px ; width: 300px; border: solid 1px black;
} p#second {
margin-left : 20px ; width: 300px; border: solid 1px black; position: relative; left: 4px; bottom: 22px;
}
89
.decale { position: relative; bottom: 5px; border: solid 1px black; } … <p>Un paragraphe avec <span class="decale">un élément décalé</span> du reste du texte.</p> …
Autre exemple : le décalage est relatif à la position normale de l ’élément dans le bloc parent
Le positionnement Positionnement relatif
90
• La position de l’élément est déterminée de manière absolue dans son conteneur parent positionné le plus proche, ou à défaut, dans la fenêtre du navigateur
• On utilise la propriété position, avec la valeur absolute, pour positionner un élément de manière absolue.
• Les propriétés top, right, left, bottom, permettent alors de fixer la position.
#boite1 { position: relative; width: 300px; border: solid 1px black; } #boite2 { position: absolute; top: 10px; right: 30px; border: solid 1px black; } … <div id="boite1">
<p>Boite 1</p> <div id="boite2">Boite 2</div>
</div>
Le positionnement Positionnement absolu
91
Le positionnement fixé est très comparable au positionnement absolu, sauf que l'élément fixé reste à sa place sur l'écran même lorsque l'utilisateur fait défiler le contenu. Un élément fixé est comme « ancré » à sa place. On utilise la propriété position, avec la valeur fixed. Les propriétés top, right, left, bottom, permettent alors de définir la position.
Le positionnement Positionnement fixé
92
• On utilise la propriété float, avec la valeur left ou right, pour pos i t ionner un é lément de manière flottante.
• L’élément prend place à gauche (ou à droite) dans l’élément conteneur.
• L’élément suivant occupera la place laissée libre.
• La boîte 1 se place de manière flottante à droite, la boite 2 occupe l’espace restant.
#boite1 { float: right; width: 100px; border: solid 1px black; } #boite2 { border: solid 1px black; } … <div id="boite1">Boite 1</div> <div id="boite2">Boite 2</div>
Le positionnement Positionnement flottant
XHTML ET CSS 93
Exemple avec 2 boîtes flottantes <div id="boite1">Boite 1</div>
<div id="boite2">Boite 2</div>
<div id="boite3">Boite 3</div>
… #boite1 { float: right; width: 100px; border: solid 1px black; } #boite2 { float: left; width: 100px; border: solid 1px black; } #boite3 { border: solid 1px black; } …
Le positionnement Positionnement flottant
94
Remarque : attention, si dans le flux du document, la boîte 3 était inscrite avant les autres boites, celle-ci, non positionnée, prendrait toute la largeur du document. Les autres boîtes occuperaient donc leur emplacement « flottant », mais en dessous.
<div id="boite3">Boite 3</div>
<div id="boite1">Boite 1</div>
<div id="boite2">Boite 2</div>
#boite1 { float: right; width: 100px; border: solid 1px black; } #boite2 { float: left; width: 100px; border: solid 1px black; } #boite3 { border: solid 1px black; }
Le positionnement Positionnement flottant
95
• La propriété clear permet d’interdire le « voisinage » d’un élément « flottant ».
• Elle accepte 3 valeurs – left : interdit le « voisinage » d’un élément « flottant » à gauche – right : interdit le « voisinage » d’un élément « flottant » à droite – both : interdit le « voisinage » d’un élément « flottant » des deux
cotés
Le positionnement Positionnement flottant
96
#boite2 { float: left; width: 100px; border: solid 1px black; } #boite3 { clear: both; } <div id="boite2">Boite 2 </div> <div id="boite3">Boite 3 </div>
Le positionnement Positionnement flottant
97
• Par défaut, le dernier élément (dans l’ordre d’écriture du code) se place au dessus des éléments précédents.
• La propriété z-index permet de changer ce
placement : dans un même élément conteneur, les éléments ayant un z-index supérieur sont placés au dessus des éléments ayant un z-index inférieur.
• Ceci permet de placer les éléments les uns au dessus
des autres.
Le positionnement La profondeur
98
Les CSS permettent de gérer des directives de style alternatives pour différents médias (périphériques de consultation, d'impression,
périphériques vocaux et braille…)
Types de media
99
• Lors du lien fait avec une feuille de style l’attribut media (balise <link>) permet de spécifier un ou plusieurs média(s) visé(s) par la feuille de style.
• Cet attribut est valable aussi lorsque l’on ouvre un bloc de déclaration de style dans l’en tête d’un document
<link href="default.css" rel="stylesheet” type="text/css" media="screen">
<link href="default.css" rel="stylesheet” type="text/css" media="print">
<style type="text/css" media="screen,print">
…
</style>
Types de media Attribut media
100
Par défaut, si l’attribut média n’est pas spécifié, les directives s’appliquent pour tous les médias (all)
Types de media Attribut media
101
@media – Indique un bloc de règles qui ne s'appliquent qu'aux médias spécifiés. – Cette règle est utilisable dans les feuilles de style liées ou importées,
ou dans les directives fixées dans l’en tête des documents XHTML. @media print {
body {
background-color: #ffffff;
color: #000000;
}
}
Il est possible d’indiquer une liste de médias en les séparant par des virgules
Types de media @-règles
102
• all Tous médias
• aural Parole et synthétiseurs de sons • braille Interface tactiles braille • embossed Impression braille • handheld Petits dispositifs ou dispositifs tenus en main • print Impression • projection Projection • screen Ecrans d’ordinateurs • tty Teletypes, terminaux… • tv TV
Types de media @-règles
103
• L’élément div ne remplace pas tous les éléments : Il vaut mieux privilégier les éléments HTML ayant une valeur sémantique.
• Il n’est pas indiqué de créer des divisions « à outrance » dans les documents.
• Tous les éléments n’ont pas besoin de « class ». Multiplier les classes et par conséquent les attributs d’éléments HTML (pour les rattacher à une classe) rend le code beaucoup plus lourd. Il est préférable d’utiliser la sélection hiérarchique plutôt que de vouloir « typer » tous les éléments par des classes.
Erreurs classiques Quelques remarques en guise de conclusion
104
Ne pas négliger les commentaires pour , par exemple :
Donner en introduction des informations sur l'auteur, les évolution de la feuilles de style, la todo list...
(voir http://cssdoc.net/ par exemple)
Proposer un sommaire de la feuille de style (ses sections)
Normaliser les codes couleur utilisés Diviser la feuilles de style en sections et sous-sections clairement visibles et identifiées
Règles d'écriture, code réutilisable Quelques remarques en guise de conclusion
MODULE CONCEPTION DE DOCUMENTS WEB
HTML, CSS JAVASCRIPT
106
• DOM : vision arborescente d'un document HTML
• Javascript : langage de programmation côté client
• Fonctions, objets, variables, structures de contrôle, boucles,
• Accès au DOM
• Intégration dans le source HTML
• Javascript pour HTML5
Initiation à Javascript Plan du module
107
Un document web = un fichier texte = un arbre d’éléments
Composé de : • Nœuds de type élément = élément HTML • Nœuds de type texte = contenu • Liens = composition des éléments
Initiation à Javascript DOM
108
Initiation à Javascript DOM Exemple, l’extrait de code HTML suivant :
<p>Voici <em>un peu</em> de contenu</p>
Se décompose, selon le DOM en : § Un nœud de type élément (p) contenant
• un nœud de type texte (Voici) • un nœud de type élément (em) contenant
o un nœud de type texte (un peu) • un nœud de type texte (de contenu.)
p
Voici em de contenu
un peu
109
• Chaque « nœud » = un élément ou un texte à l’intérieur d’un élément.
• La racine du document se nomme « document », il s’agit d’un nœud.
• Tous les éléments du documents sont des nœuds « descendants » du nœud « document ».
• Chaque élément comprend lui même un nœud de type text nommé #text
Initiation à Javascript DOM
110
• Il est possible d'interagir dynamiquement avec ces éléments (modifier / supprimer / créer / déplacer… un nœud) par programme
• Ce programme s'exécute sur la machine cliente • Le langage qui permet ces manipulation s'appelle Javascript
Initiation à Javascript DOM
111
Javascript comporte : • Une présentation structurée et « orientée objet » des
éléments et du contenu d'une page. • Des méthodes permettant d’accéder aux objets composants
le document et de les modifier. • Des méthodes permettant d’ajouter ou supprimer des objets. • Des accès à certaines propriétés des objets • Une gestion d'événements (click de souris, choix dans une
liste, changement de la valeur d'un champ,….)
Initiation à Javascript Javascript
112
Exemples d'utilisation : • Vérifier la validité de la saisie (plage de valeur, date,…) • Activer / désactiver des éléments (bouton OK actif
uniquement si saisie valide) • Afficher / cacher des éléments (coche verte visible
uniquement si les deux saisies du mot de passe sont égales) • Déplacer des éléments (animations) • Modifier des ressources (changer le CSS d'une page) • Créer /supprimer des éléments sur la page • …
Initiation à Javascript Javascript
113
• JavaScript = langage de programmation • Exécuté par un interpréteur à l'intérieur d'un
navigateur Web (donc sur le client !) • introduit en V2 du navigateur de Netscape.
Généralisé à tous les navigateurs depuis (sauf Lynx) • Désactivable par l'utilisateur (règles de sécurité de
l'entreprise, choix personnel,…)
Initiation à Javascript Javascript
114
En javascript, tout est "objet" ! Deux types d'objets : • les objets de type primitif, qui se résument à une
valeur unique : les nombres, les booléens et les chaînes.
• les objets de type composé (tableaux, fonctions ou... objets) qui comportent plusieurs propriétés, chacune bénéficiant d'un nom et d'une valeur, l'ensemble réuni en une seule entité (l'objet), elle aussi identifiée par un nom.
Initiation à Javascript Bases du langage
115
Autrement dit, un objet composé peut contenir : • Des propriétés qui sont des objets de type primitif • Des propriétés qui sont des tableaux • Des propriétés qui sont des fonctions Ex : l'objet "personne3" a une propriété "nom" qui vaut "Pierre", une propriété "alerter" qui est une fonction qui émet un message d'alerte avec le nom, une propriété "achats", de type tableau associant à une date un objet de type "voiture" etc.
Initiation à Javascript Bases du langage
116
Déclarer une variable JavaScript ð mot-clé « var »
var uneVariable = "Hello";
var uneAutreVariable = 100; NB : il n'est pas obligatoire d'affecter une valeur à une variable lors de sa déclaration
var uneTroisiemeVariable; variable non affectée (valeur = undefined)
Initiation à Javascript Variables
117
Initiation à Javascript Variables
Quelques exemples :
Instruc4on Effet
var entier; Portée locale, déclara-on explicite, type undefined, valeur undefined
var i = 0; Portée locale, déclara-on explicite, type numérique, valeur 0
valeur = i; Portée globale, déclara-on implicite, type numérique, valeur 0
entier = "0123"; Portée globale, déclara-on implicite, type chaîne de caractères, valeur 0123
i = entier + valeur; Portée globale, i devient la chaîne de caractères "01230". L'affecta-on a nécessité la conversion de valeur en "0" pour la concaténa-on.
118
Une variable peut contenir différents types de valeurs : un nom, une date, une heure, un prix = des données de types primitifs / des instances d’objets
JavaScript prend en charge 5 types de données primitifs : • Nombre entier : nombre positif ou négatif sans virgule • Nombre en virgule flottante : nombre positif ou négatif avec
virgule ou nombre écrit en notation scientifique • Valeur booléenne : valeur logique vrai ou faux • Chaîne de caractères : texte • Valeur Null : pas de valeur
Initiation à Javascript Types de données
119
JavaScript est un langage à typage dynamique. • Avec les langages de programmation à typage statique, lors
de la déclaration d'une variable, il est nécessaire de donner le type de la variable. Le type de la variable ne change plus.
• Avec JavaScript, on ne peut pas déclarer le type de variable. • L'interpréteur JavaScript détermine automatiquement le type
en fonction des données stockées dans une variable. • Le type de la variable est susceptible de changer chaque fois
qu'on lui assigne une nouvelle valeur. • L'opérateur typeof() permet d'obtenir le type d'une variable
Initiation à Javascript Typage dynamique
120
• Mot clé réservé : function. function uneFonction (parametre1, parametre2){ instructions ... } • NB : les paramètres sont optionnels y compris à l'appel de la
fonction
Initiation à Javascript Fonctions
121
• Pour exécuter une fonction, elle doit être "invoquée", c'est a dire appelée en créant une commande du nom de la fonction.
• Les fonctions peuvent, ou non, retourner une valeur. function calculeSomme(parametre1,parametre2){ return parametre1 + parametre2; }
Initiation à Javascript Fonctions
122
Initiation à Javascript Objets
• Les objets JavaScript se fondent sur des fonctions "constructeur".
~ définition d'un objet • Lorsqu'un nouvel objet est créé à partir d'une
fonction constructeur ð on crée une instance d'objet. L'instance d'objet a accès à
l'ensemble des données et procédures de la fonction constructeur.
123
Elles comprennent : • les propriétés • les méthodes (voir plus loin)
Exemple : function Etudiant (unNumero, unNom, unPrenom){
this.numero = unNumero;
this.nom = unNom;
this.prenom = unPrenom;
}
NB : this fait référence à l'instance courante.
Initiation à Javascript Objets : fonctions "constructeurs"
124
L'instanciation se fait avec le mot-clé new. unEtudiant = new Etudiant (45685, "Testeur", "Toto");
NB : il n'est pas nécessaire d'attribuer immédiatement une valeur aux propriétés.
unEtudiantBis = new Etudiant (); Tant que les propriétés n'ont pas de valeur, si l'on essaie d'y accéder, la valeur undefined est retournée.
Il n'est sans doute pas souhaitable de le faire !
Initiation à Javascript Objets : instanciation
125
Il y a deux façons de déclarer des propriétéss : function Etudiant (nom, prenom){
this.nom = unNom; // propriété PUBLIQUE this.prenom = unPrenom; var id = generateId(); // propriété PRIVÉE
}
Initiation à Javascript Objets : accès aux propriétés
126
On accède aux propriétés PUBLIQUES d’un objet avec le nom de l’instance de l’objet, suivi d’un point, suivi du nom de la propriété. unEtudiant.nom
unEtudiant.prenom
Il est ainsi possible de lire la valeur de la propriété ou de lui affecter une valeur (écrire).
Initiation à Javascript Objets : accès aux propriétés publiques
127
Il faut des accesseurs, autrement dit des fonctions publiques qui renvoient la valeur de la propriété :
function Etudiant (nom, prenom){
var id = generateId(); // propriété PRIVÉE
this.getId = function() {
return id ;
};
}
Appel : var sonId = unEtudiant.getId(); unEtudiant.id ==> renvoie undefined ! Pour modifier la valeur de la propriété, il faut une fonction publique qui accepte une valeur en entrée et l'affecte à la propriété.
Initiation à Javascript Objets : accès aux propriétés privées
128
Une fois une instance d'objet créée, il est possible de lui affecter de nouvelles propriétés (nécessairement publiques) : il suffit d'indiquer un nom et une valeur. unEtudiant.age=25;
NB : même si ces propriétés n’existent pas dans la fonction « constructeur »
Initiation à Javascript Objets : ajout de propriétés
129
Il n'y a pas de fonction destructeur explicite en JavaScript L'opérateur delete permet de supprimer des valeurs (sauf celles déclarées avec var) null peut être utilisé pour supprimer une référence
monobj = new qqChose();
delete monObj; // supprime monObj
mon obj=null; // "vide" monObj
Initiation à Javascript Objets : destructeurs
130
Il est possible d'associer une propriété à une classe (ou propriété statique).
• Elle n'est pas copiée pour chaque instance. • Les propriétés de classe représentent souvent des
constantes communes à toutes les instances.
Etudiant.statut = "étudiant";
Par exemple : Pi en mathématique (objet Math).
Initiation à Javascript Objets : propriétés de classe (statiques)
131
= une méthode associée à un objet.
technique 1 : déclaration dans la fonction "constructeur" function Etudiant (unNumero, unNom, unPrenom{ this.numero = unNumero; this.nom = unNom; this.prenom = unPrenom; this.indiquerNumero = function() { alert(this.prenom + " " + this. nom + " : " + this.numero); };
}
Initiation à Javascript Objets : méthodes d'objet
132
technique 2 : accès à une fonction externe (permet la factorisation) function alerteNumero() {
alert (this.prenom + " " + this.nom + " : " + this.numero); } function Etudiant (unNumero, unNom, unPrenom{
this.numero = unNumero; this.nom = unNom; this.prenom = unPrenom; this.indiquerNumero = alerteNumero;
}
Initiation à Javascript Objets : méthodes d'objet
133
Dans les 2 cas, on pourra invoquer la méthode pour une instance donnée
// Corps du programme
unEtudiant = new Etudiant(45685, "Durant", "Paul");
unEtudiant.indiquerNumero();
Initiation à Javascript Objets : méthodes d'objet
134
Ces manières de faire présentent un inconvénient : ainsi déclarées, les méthodes occuperont de l'espace
mémoire pour chaque instance créée, que les méthodes soient utilisées ou non.
Initiation à Javascript Objets : méthodes d'objet
135
Objet prototype = un objet (propriété de l'objet Object). Object : +/- superclasse dont tous les objets héritent. Function est aussi un objet JavaScript, il a donc accès à la propriété prototype. Les instances d'objets créées par une fonction constructeur héritent de l'ensemble des propriétés du prototype.
Initiation à Javascript Objet prototype
136
Objet prototype function Etudiant (unNumero, unNom, unPrenom){
this.numero = unNumero; this.nom = unNom; this.prenom = unPrenom;
} Etudiant.prototype.indiquerNumero() {
alert (this.prenom + " " + this.nom + " : " + this.numero); } Les différentes instances des objets Etudiants hériteront des propriétés du prototype. La méthode ne sera pas copiée dans chaque instance, mais héritée du prototype. Cela implique une moindre consommation de mémoire.
Initiation à Javascript Objet prototype
137
Une définition d'objet peut descendre d'une autre définition d'objet. Pour cela, on utilise la propriété prototype : function MonObjet (arg1) { this.prop1 = arg1;
} function MonObjetDerive (arg2) { this.prop2 = arg2;
} MonObjetDerive.prototype = new MonObjet();
Les instances de MonObjetDerive incluront les propriétés et les méthodes de MonObjet et de MonObjetDerive.
Initiation à Javascript Héritage
138
Initiation à Javascript Objets prédéfinis
Objet Méthodes / propriétés
Date (dates et heures) getMonth, getDay, getTime...
Document (document courant) close, open, write...
Form (formulaire) target, length, reset, submit, ...
History (historique du navigateur) length, back, forward...
Image (images) border, width, height...
LocaOon (URL courant) hostname, port, protocol...
Math (propriétés et méthodes mathémaOques)
PI, SQRT2, abs, atan, cos, random, round…
Navigator (navigateur courant) appName, appVersion, language…
Window (fenêtre courante) document, history, name, status, alert, confirm, prompt...
139
• Objets prédéfinis en JavaScript. • new pour l’objet constructeur Array()
monTableau = new Array (nbElements);
• NB : le premier élément d'un tableau a le rang 0 • Pour accéder à la valeur d'un élément du tableau (ou
pour affecter une valeur), on utilise les crochets [ ] avec l'indice de l'élément.
Initiation à Javascript Tableaux
140
unTableau = new Array (); unTableau[0] = "printemps"; unTableau[1] = "été"; unTableau[2] = "automne"; unTableau[3] = "hiver";
Initiation à Javascript Tableaux
141
Il n'y a pas de restriction quand au type des données d'un tableau (plusieurs types peuvent cohabiter dans le même tableau). unTableau = new Array (); unTableau[0] = "printemps"; unTableau[1] = 2; unTableau[2] = 5.5; unTableau[3] = true; unTableau[5] = array("chaud", "froid");
Initiation à Javascript Tableaux
142
• Il n'est pas obligatoire de déclarer au préalable la taille du tableau.
• La taille d'un tableau peut changer dynamiquement. • Si l'on crée un élément à un rang qui n'existe pas, il est créé,
ainsi que les éléments aux rangs qui le précède (ils ont une valeur null).
unTableau = new Array ();
unTableau[6] = "printemps";
==> unTableau [0..5] valent null
Initiation à Javascript Tableaux
143
• On peut créer un tableau en assignant directement des valeurs.
unTableau = new Array ("printemps", "été");
unTableau = ["printemps", "été"];
• Les tableaux associatifs acceptent des indices textuels : unTableau = new Array (2); unTableau["saison"] = "printemps"; unTableau["meteo"] = "pluvieux";
Initiation à Javascript Tableaux
144
Initiation à Javascript Structures de contrôle et de boucle
if if (expression conditionnelle) { commandes } if ... else if (expression conditionnelle) { commandes; } else { commandes; }
if ... else if if (expression conditionnelle) { commandes; } else if (expression conditionnelle) { commandes; }
145
switch switch (expression) { case etiquette1 : commandes; break; case etiquette2 : commandes; break; default : commandes; break; }
Initiation à Javascript Structures de contrôle et de boucle
146
while while (expression conditionnelle) { commandes; }
do ... while
do { commandes; } while (expression conditionnelle)
Initiation à Javascript Structures de contrôle et de boucle
147
for
for (expression d'initialisation; expression conditionnelle; mise à jour) { commandes; }
Ex : for (var i=0; i < 10; i++) { commandes; }
Initiation à Javascript Structures de contrôle et de boucle
148
for ... in Exécute la même commande ou le même groupe de commande pour toutes les propriétés d'un objet. for (element in groupe) {
commandes; }
Exemple 1 : tableau = array("printemps", "été", "hiver"); for (num in tableau) { console.log(tableau[num]; }
Initiation à Javascript Structures de contrôle et de boucle
149
Exemple 2 :
function Etudiant (unNumero, unNom, unPrenom) { this.numero = unNumero; this.nom = unNom; this.prenom = unPrenom;
} unEtudiant = new Etudiant (45685, "Testeur", "Toto"); for (propriete in unEtudiant) { document.write(propriete + "<br />");
}
Initiation à Javascript Structures de contrôle et de boucle
150
With Permet de créer un regroupement de commandes pour lesquelles l'objet est défini puis implicite (inutile de saisir son nom pour accéder aux propriétés). with (objet) { commandes; }
Exemple : with (unEtudiant) { numero = 12; nom = "Testeur"; prenom = "Toto"; }
Initiation à Javascript Structures de contrôle et de boucle
151
break Permet de quitter une boucle (sous réserve qu'une condition soit remplie par exemple). while (expression conditionnelle) { commandes; if (condition) { break; } }
Initiation à Javascript Structures de contrôle et de boucle
152
continue Permet de passer directement à l'itération suivante de la boucle. while (expression conditionnelle) { commandes; if (condition) { continue; // si la condition vaut true, les commandes ci // dessous ne seront pas exécutées pour cette boucle } commandes; }
Initiation à Javascript Structures de contrôle et de boucle
153
Initiation à Javascript Evènements
JavaScript permet d'agir dans un document HTML en réaction à des événements • déclenchés "spontanément" par le navigateur (chargement
du document, fermeture du document…) • déclenchés par les actions l'utilisateur (click, déplacements
du curseur de la souris…)
154
• blur : un élément perd le focus • change : un élément a été modifié • click : l'utilisateur clique sur un élément • dblclick : l'utilisateur double-clique sur un élément • load : le navigateur a chargé la page HTML • mouseover : l'utilisateur place le pointeur de la souris sur un élément • reset : un formulaire est réinitialisé • resize : l'utilisateur redimensionne la fenêtre du navigateur • scroll : l'utilisateur se sert des barres de défilement de la page • select : l'utilisateur sélectionne du texte • submit : un formulaire est validé • unload : le navigateur ferme le document
Initiation à Javascript Exemples d'évènements
155
• Les gestionnaires d'évènements permettent d'exécuter du code JavaScript en réponse aux événements.
• En JavaScript, le gestionnaire d'événement s'écrit avec le nom de l'événement préfixé de " on "
• Illustration : click = événement onclick = gestionnaire d'événement
• Exemple : <a href="pagesuivante.html" onclick="return window.confirm('On change de page');">
Initiation à Javascript Gestionnaire d'évènements
156
• Dans un gestionnaire d'événement, il est possible d'appeler une fonction
• Lors de l'appel de la fonction, on peut si besoin passer l'évènement en paramètre (par ex. pour obtenir la position de la souris, savoir si c'était un clic gauche ou droit etc.) Exemple : <a href="page.html" onclick="gererEvt(event)">
• On peut passer l'objet cliqué en paramètre, par ex. pour obtenir son id (en plus de l'évènement ou pas) Exemple : <a href="page.html" onclick="gererEvt(event, this)">
Initiation à Javascript Gestionnaire d'évènements
157
function gererEvt(evenement, elementClic) { if (evenement.ctrlkey) { // touche Ctrl enfoncée … elementClic.innerHTML = "" ; … } } Z
Initiation à Javascript Gestionnaire d'évènements
158
Initiation à Javascript Les commentaires
Les commentaires sont : – encadrés par des /* et des */ lorsqu'ils tiennent sur plusieurs lignes ; – précédés de // lorsqu'ils apparaissent sur une seule ligne. – Exemple /* Mes commentaires tiennent sur plusieurs lignes ... */ Code JavaScript // Un commentaire sur une ligne Code JavaScript
159
En théorie : entouré de (nombreux) tags <script type="text/javascript"> <![CDATA[ // Code JavaScript … ]]> </script> • Dans l'en-tête ou le corps du document : il est chargé en mémoire du
navigateur avant l'affichage du corps du document. D’où : déclarer ou charger dans l'en-tête les fonctions/variables invoquées ultérieurement dans le document.
• Attention, les navigateurs rendent le Javascript dans l’ordre d'apparition des instructions.
Initiation à Javascript Intégration dans le document
160
Remarque : • les codes <![CDATA[ et ]]> permettent d'assurer la validité avec la
norme XHTML, mais peuvent poser des soucis avec le fonctionnement de JavaScript, selon les navigateur
• Pour que le contenu de la balise script en XHTML soit interprété correctement, on peut trouver des "astuces" telles que :
<script type="text/javascript"> <!--/*--><![CDATA[//><!-- //... //--><!]]>
Ou (et c'est le plus simple), mettre le script dans un fichier séparé.
Initiation à Javascript Intégration dans le document
161
Code JavaScript placé dans des fichiers externes. ð extension .js
(fichiers au format texte contenant les lignes de code)
Exemple : <script type="text/javascript" src="monchemin/fichiersource.js"></script> L'intégration d'un fichier externe se fait généralement dans l'en-tête d'un document.
Initiation à Javascript Intégration dans le document
162
JavaScript propose un modèle objet constitué des éléments composant un document. • Les éléments sont placés dans une hiérarchie. • L’objet windows, le plus « haut » hiérarchiquement,
comprend différents objets, par exemple : – l’objet document, qui contient d'autres objets comme : o l’objet forms (tableau des formulaires) ; o l’objet images (tableau des images) ; o l’objet links (tableau des liens) ;
– l’objet history (historique des documents lus par le navigateur) ;
– l’objet location (URL du document lu par le navigateur, en lecture ou pour modification) ;
Approche que je déconseille Privilégier les méthodes du DOM
Initiation à Javascript Accéder au DOM
Approche que je déconseille Privilégier les méthodes du DOM
... <head> ... <script type="text/javascript"> //<!--[CDATA[ function verifierFormulaire(){ // on va récupérer la valeur saisie en utilisant le modèle objet de // JavaScript
var cp=document.forms["0"].elements["cp"].value; // on utilise un objet expReg (expression régulière) pour tester // la valeur saisie
var expReg=/^[0-9]{5}$/; if (!expReg.test(cp)) {
// la valeur ne correspond pas au format souhaité : alerte utilisateur alert('Le code postal saisi ne semble pas valide');
// on positionne le curseur dans le champ de saisie en cause document.forms["0"].elements["cp"].focus(); return false; } return true; } //]]--> </script> </head>
Initiation à Javascript Accéder au DOM
document.forms["0"] = référence relative Devient invalide si ajout d'un nouveau formulaire au début de la page
164
Accéder à un élément avec getElementById Accéder à un élément HTML qui possède l’attribut id correspondant à celui reçu en paramètre.
var elt=document.getElementById("uid");
Initiation à Javascript Accéder au DOM
165
Accéder à un tableau d'éléments avec getElementByTagName Accéder à tous les éléments dont le tag (le nom du tag, ou de la balise) correspond à celui reçu en paramètre.
var tableauDesParagraphes = document.getElementsByTagName("p");
Initiation à Javascript Accéder au DOM
166
Exemple : je souhaite retrouver tous les liens d’un document et créer un gestionnaire d’événement pour chacun d’entre eux. function installerGestionnaireDeLiens() { // je cherche toutes les balises a (<a href=…) dans le document var liens = document.getElementsByTagName("a");
for (var i=0; i < liens.length; ++i) { liens[i].onclick = function() { alert("ceci est un lien") ;
return false ; } }
}
Initiation à Javascript Accéder au DOM
167
• Cette fonction (fantaisiste) pourra être appelée au chargement du document (lorsque le document est chargé) avec
<body onload="installerGestionnaireDeLiens();"> • ou, si l’on souhaite que le code JavaScript ne soit pas "intrusif" (cette
notion indique que l’on sépare le code JavaScript du code HTML), le gestionnaire d’événement peut être placé dynamiquement :
window.onload=function(){ installerGestionnaireDeLiens(); }
Initiation à Javascript Accéder au DOM
168
Accéder à un tableau d'éléments avec getElementsByClassName Accéder à tous les éléments dont l'attribut class correspond à celui reçu en paramètre.
var eltsArray= document.getElementsByClassName("maClasse");
Initiation à Javascript Accéder au DOM
169
Gérer les attributs d'une balise avec getAttribute, setAttribute, removeAttribute getAttribute :
récupérer la valeur de l’attribut d’un élément. s’applique à un élément, le nom de l’attribut est passé en paramètre.
var attValeur = elt.getAttribute("value");
Initiation à Javascript DOM : accéder aux attributs
170
Voici la fonction du chapitre précédent revue pour que la boite de dialogue affiche la valeur de l’attribut href des liens function installerGestionnaireDeLiens() { var liens=document.getElementsByTagName("a"); for (var i=0; i<liens.length; ++i) { liens[i].onclick=function() { alert(liens[i].getAttribute("href")) ;
return false ; } }
}
Initiation à Javascript DOM : accéder aux attributs
171
Si l’on souhaite que la fonction ne s’applique qu’aux liens d’une classe (CSS) particulière, on peut utiliser la même méthode, en ajoutant par exemple : //...
if (liens[i].getAttribute("class")=="maclasse") { //...
}
//...
Initiation à Javascript DOM : accéder aux attributs
172
La méthode setAttribute permet de fixer la valeur de l’attribut d’un élément. Elle s’applique donc à un élément, le nom de l’attribut est passé en paramètre, ainsi que la valeur souhaitée pour cet attribut. elt.setAttribute("att","val");
par exemple //...
liens[i].setAttribute("title","un titre") ; //...
Initiation à Javascript DOM : accéder aux attributs
173
La méthode removeAttribute permet de supprimer un attribut d’un élément. Elle s’applique donc à un élément, le nom de l’attribut est passé en paramètre. elt.removeAttribute("att");
• NB : selon les navigateurs, tous les attributs ne peuvent pas
être tous supprimés (id ou class, par exemple, avec IE – A vérifier toutefois).
Initiation à Javascript DOM : suppression d'attribut
174
Il est possible de trouver une directive de style appliquée à un nœud dans le DOM. ATTENTION : la syntaxe des propriétés changent par rapport à celle des déclarations CSS. Les propriétés comportant un trait d'union sont réécrites en un seul « bloc » en supprimant le trait d'union et en mettant en majuscule la première lettre du mot suivant (par exemple : border-bottom devient borderBottom).
var element = document.getElementById("…");
var computedStyle = element.currentStyle || window.getComputedStyle(element, null);
console.log computedStyle.backgroundColor;
Initiation à Javascript DOM : trouver le style d'un élément
175
Il est possible d’intervenir sur une directive de style appliquée à un nœud dans le DOM. Seule la syntaxe des propriétés changent par rapport à celle des déclarations CSS : les propriétés comportant un trait d'union sont réécrites en un seul « bloc » en supprimant le trait d'union et en mettant en majuscule la première lettre du mot suivant (par exemple : border-bottom devient borderBottom).
var elt = document.getElementById("monID");
elt.style.borderBottom = "solid 1px #000000";
Initiation à Javascript DOM : modifier le style
176
Plusieurs méthodes permettent de créer des éléments de type nœud ou de type texte dans le DOM, certaines méthodes sont complémentaires. En résumé : – createElement : permet de créer un nœud de type élément – createTextNode : permet de créer un nœud de type #text
Initiation à Javascript DOM : créer des éléments
177
Après la création de l'élément, il faut le "placer" dans le DOM – appendChild : permet d’ajouter un noeud enfant à un noeud
existant – insertBefore : permet d’ajouter un nœud enfant à un nœud
existant, le nœud étant inséré avant un autre nœud enfant. Par exemple : parent.insertBefore (nouveauNoeud, noeudExistant) ;
Initiation à Javascript DOM : créer des éléments
178
– cloneNode : cloneNode permet la copie soit de la structure d'un élément, soit de la structure et du contenu d'un élément vers un autre élément. Par exemple : var noeud = autreNoeud.cloneNode(false); // false indique que seule la structure est copiée var noeud = autreNoeud.cloneNode(true); // true indique que la structure et le contenu sont copiés
Initiation à Javascript DOM : créer des éléments
179
var elt=document.getElementById("unId");
// je crée la liste (ul) var newUl = document.createElement("ul");
// je j’ajoute comme enfant du nœud principal
elt.appendChild(newUl);
// je crée un élément de liste (li)
var newLi = document.createElement("li");
// je l’ajoute comme enfant à l’élément ul
newUl.appendChild(newLi);
// Je crée un nœud de type text
li_text = document.createTextNode("Hello world");
// je l’ajoute comme enfant de l’élément de liste
newLi.appendChild(a_text);
Initiation à Javascript DOM : créer des éléments
Exemple : créer une l iste (ul) d’élément ( l i ) dans un nœud donné dont l’id est "unId"
Remarque : utilisation de la méthode createElement pour déclarer les nouvelles balises HTML5 pour les navigateurs ne les supportant pas (IE < 9 notamment) On crée l’élément sans faire d’appendChild, → De cette manière ces éléments sont alors connus dans le DOM
<!--[if lt IE 9]>
<script>
document.createElement("header"); document.createElement("footer"); ….
</script>
<![endif]-->
Initiation à Javascript
181
removeChild : on peut enlever un nœud, enfant d’un autre nœud
Par exemple : eltParent. removeChild(eltEnfant); Ou en utilisant firstChild (voir plus loin) eltParent.removeChild(eltParent.firstChild);
Initiation à Javascript DOM : supprimer des éléments
182
– ParentNode : retourne le nœud parent d’un nœud. eltParent = elt.parentNode;
– ChildNodes : tableau de tous les nœuds enfants d’un nœuds donné (ou undefined s’il n’y a pas d’enfants) var tousLesEnfants = elt.childNodes; var nbEnfants = elt.childNodes.length // nombre d’éléments enfants
– hasChildNode() : indique si un nœud a des enfants (retourne true) ou non (retourne false) elt.hasChildNode();
Initiation à Javascript DOM : méthodes et propriétés relationnelles
183
– firstChild : retourne le premier enfant d’un noeud var premierEnfant = elt.firstChild;
– lastChild : retourne le dernier enfant d’un nœud var dernierEnfant = elt.lastChild;
– nextSibling : renvoie le frère d’un élément (nœud adjacent suivant) var frereSuivant=elt.nextSibling ;
– previousSibling : renvoie le frère d’un élément (nœud adjacent précédent) var frerePrecedent=elt.nextSibling ;
Initiation à Javascript DOM : méthodes et propriétés relationnelles
184
Propriétés d’un nœud – nodeName renvoie le nom du nœud courant.
Par exemple, si elt désigne un élément img, elt.nodeName renvoie la chaîne de caractères "img".
– nodeValue contient la valeur du nœud. Cette valeur dépend du type de nœud. Pour les nœuds de type texte, il s'agit du contenu. var valeur = elt.nodeValue;
– nodeType contient le type du nœud, selon un codage numérique (1 pour un nœud de type élément, 3 pour un nœud de type texte…) var type = elt.nodeType;
Initiation à Javascript DOM : méthodes et propriétés
185
• innerHTML vs Méthodes DOM innerHTML est une propriété facile à utiliser pour lire ou écrire le code HTML d’un élément, propriété généralement reconnue par les navigateurs (attention, cela ne concerne pas les documents qui sont d’un content type application/xhtml+xml)
Exemple : <div id="test">
<p>Voici <em>un peu</em> de contenu</p>
</div>
Si je fais : var monTest=document.getElementById("test");
alert(monTest.innerHTML);
La boite de dialogue m’affichera : <p>Voici <em>un peu</em> de contenu</p>
Initiation à Javascript DOM : méthodes et propriétés
186
innerHTML – C’est une manière rapide est facile de modifier le contenu
d’un élément mais elle n’a pas la « granularité » des méthodes DOM, et le contenu inséré n’est pas manipulable dans toute sa hiérarchie d’éléments.
– C’est donc une méthode à réserver pour « aller vite », dans des cas ne nécessitant pas de manipulation des éléments insérés.
Initiation à Javascript DOM : méthodes et propriétés
Utilisation de Javascript en HTML Canvas 1/2
Définit un "espace de dessin" Associé à un "contexte" permettant de tracer des éléments Le dessin (formes, traits, courbes, texte) se fait en Javascript (API) Les attributs sont gérés en Javascript (remplissage, ombres, …) L'animation se fait en redessinant l'image (ou une partie)
Avantages : rapidité, portabilité (concurrent de Flash) Inconvénients : sort du DOM (accessibilité ? Cohérence HTML ?)
<canvas id="monCanvas" width="200" height="400"></canvas>
<canvas id="myCanvas" width="200" height="100"></canvas> … var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var linearGradient1 = context.createLinearGradient(0,0,50,50); linearGradient1.addColorStop(0 , 'rgb(255, 0, 0)'); linearGradient1.addColorStop(0.5, 'rgb(255, 255, 255)'); linearGradient1.addColorStop(1 , 'rgb(255, 0, 0)'); context.fillStyle = linearGradient1; context.fillRect(10,10,110, 110);
Utilisation de Javascript en HTML Canvas 2/2
Utilisation de Javascript en HTML Canvas : exemple (1/2)
hsp://www.williammalone.com/arOcles/html5-‐canvas-‐example/
var width = 125; // Triangle Width var height = 105; // Triangle Height var padding = 20; // Draw a path context.beginPath(); context.moveTo(padding + width/2, padding); // Top Corner context.lineTo(padding + width, height + padding); // Bottom Right context.lineTo(padding, height + padding); // Bottom Left context.closePath(); // Fill the path context.fillStyle = "#ffc821"; context.fill();
context.textAlign = "center"; context.textBaseline = "middle"; context.font = "bold 60px 'Times New Roman', Times, serif"; context.fillStyle = gradient; try{ context.fillText("!", canvasWidth/2, padding + height/1.5); }catch(ex){}
… …
hsp://www.effectgames.com/demos/canvascycle/
Utilisation de Javascript en HTML Canvas : exemple (2/2)
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
... <div id="container"></div>
... <script> var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var blueSpline = new Kinetic.Spline({ points: [{ x: 73, y: 160}, {x: 340, y: 23}, {x: 500, y: 109}, {x: 300,y: 109}], stroke: 'blue', strokeWidth: 10, lineCap: 'round', tension: 1 }); layer.add(blueSpline); stage.add(layer);
layer.draw(); </script>
Utilisation de Javascript en HTML Canvas : KineticJS
Principal avantage : les éléments du canvas deviennent manipulables comme des éléments du DOM en javascript.
Les nouveautés dans le code Javascript
Geolocation API Fonctionne avec Javascript et l'objet navigator.geolocation Récupère les coordonnées du poste de l'utilisateur en longitude, latitude et altitude
getCurrentPosition
watchPosition (suivi en continu)
L'API de géolocalisation
Les nouveautés dans le code Javascript
Exemple: fonction de callback nommée (maPosition) et passée en argument à getCurrentPosition() => fournit une série de propriétés (dans l'exemple la position, mais aussi la vitesse, la précision, etc.)
L'API de géolocalisation
hsp://www.alsacreaOons.com/tuto/lire/926-‐geolocalisaOon-‐geolocaOon-‐html5.html
interface Position { readonly attribute Coordinates coords; readonly attribute DOMTimeStamp timestamp;
};
interface Coordinates { readonly attribute double latitude; readonly attribute double longitude; readonly attribute double? altitude; readonly attribute double accuracy; readonly attribute double? altitudeAccuracy; readonly attribute double? heading; readonly attribute double? speed;
};
Les nouveautés dans le code Javascript Le Drag and Drop
Le drag (le drop) génèrent des évènement : dragStart (on commence à déplacer un élément) dragEnter (on commence le survol d'une cible potentielle) dragOver (on survole d'une cible potentielle) dragLeave (on sort d'une cible potentielle) drop (on drop dans cible potentielle) …
<li draggable="true">Element de ma liste</li> <div ondrop="manageDrop(event);"/>
Les nouveautés dans le code Javascript Le Drag and Drop
On peut dragger un élément ou autre chose (son contenu textuel par exemple)
Il faut donc mémoriser ce qui doit être déplacé event.dataTransfer.setData("idDrag", ev.target.getAttribute('id'));
On peut déplacer, copier, créer un lien vers l'élément,... Il faut définir l'effet du drag&drop event.dataTransfer.effectAllowed = 'move';
On peut définir l'image qui représente l'élément déplacé event.dataTransfer.setDragImage(ev.target, 0, 0);
Les nouveautés dans le code Javascript
Sélectionner des fichiers, accéder à leurs données... Améliorer l'upload
Recueil d'informations au lancement de l'upload Barre de progression
Accéder au contenu Déplacer, copier, supprimer, écrire...
L'API Fichier
hsps://developer.mozilla.org/en-‐US/docs/Using_files_from_web_applicaOons
Les nouveautés dans le code Javascript
Web Storage API sessionStorage
Stockage de données de session Durée de vie courte
API localStorage Stockage de données sur la machine cliente
Restent stockées même près la fermeture du navigateur = Alternatives aux sessions coté serveur et aux cookies = Scripts exécutés sur le client uniquement (sans requêtes au serveur)
Stockage local
hsp://geotribu.net/node/218
localStorage.setItem("name", "John"); alert(localStorage.getItem("name"));
Les nouveautés dans le code Javascript
Mise en cache des contenus et des actions hors ligne Synchronisation en ligne dès qu'une connexion est disponible Stockage local
tous les fichiers nécessaires au fonctionnement d'une application Web même lorsque l'on est déconnecté (stockés dans un « cache ») les données lorsque l'utilisateur travaille en mode déconnecté
Evidemment : pas de recherche offline sur un serveur J
API Offline Web
Les nouveautés dans le code Javascript
<!DOCTYPE html> <html manifest="site.manifest">
<head> <style type="text/css"> #main{ width:900px; margin:auto; }
</style> </head> <body>
<div id="main"> <h1>Cette page est accessible hors ligne</h1> <img src="earth-folder.png" /> </div> </body>
</html>
API Offline Web
Le fichier site.manifest : CACHE MANIFEST # Version 0.4 CACHE: index.html css/style.css img/earth-‐folder.png FALLBACK: /inline.html /offline.html NETWORK: *
Le fichier htaccess : AddType text/cache-‐manifest manifest
hsp://www.html5-‐css3.fr/html5/tutoriel-‐applicaOon-‐web-‐offline-‐html5-‐cache-‐manifest
Les nouveautés dans le code Javascript
Push API Événements envoyés par le serveur
A l'initiative du serveur SSE : Server-Sent Events
C'est le client qui initie la connexion et va ensuite rester à l'écoute, la connexion est alors permanente Le serveur peut alors envoyer des informations au format texte / json
API Push
Server Sent events : exemple
if (!!window.EventSource) { // Serveur Sent Events dispo source = new EventSource('ajax/getServerInformaOon.php?userId=' + userId); }
header('Content-‐Type: text/event-‐stream'); header('Cache-‐Control: no-‐cache'); funcOon sendMsg($eventName, $data) {
echo "event: $eventName\n" ; echo "data: $data\n\n" ; ob_flush(); flush();
} while (true) {
… sensMsg( "eventName1", json_encode($tableau)) ; …
}
source.addEventListener('eventName1', funcOon(e) { console.log("eventName1 occured : " + e.data) ; var data = JSON.parse(e.data); … } source.addEventListener('eventName2', funcOon(e) { console.log("eventName2 occured : " + e.data) ; … }
Les nouveautés dans le code Javascript
Web Sockets Communications par sockets avec un serveur
Connexion bidirectionnelle permanente Informations échangées en temps réel (≠ push)
Applications : Ce qui nécessite du « temps réel » : chat, jeux, travail collaboratif…
Contraintes : Nécessite un gestionnaire côté serveur : Kaazing ; Jetty Netty, ou JWebSocket (Java) ; Websocket (Python) ; …
Web Sockets
hsp://blog.zenika.com/index.php?post/2011/02/25/Html5-‐et-‐les-‐webSockets
Les nouveautés dans le code Javascript
Web Workers Javascript en multithread Javascript en tâche de fond
Non bloquant pour le navigateur Chaque Worker s'exécute dans un thread séparé Pourront être mis à profit pour les traitements lourds
Web Workers
hsp://blogs.msdn.com/b/davrous/archive/2011/07/08/introducOon-‐aux-‐web-‐workers-‐d-‐html5-‐le-‐mulOthreading-‐version-‐javascript.aspx