1. HTML, CSS 2. Javascriptkosmina.eu/web/SlidesM2WIC.pdf · 35 En utilisant l’encodage iso-8859-1 ou iso-8859-15 : Les caractères, en dehors de la classification ASCII 7-BIT (donc

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


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, 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>


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é


15

Attributs standards : id="id432" ou class="typeUrgent" Attention :

●  XTML : case sensitive ; HTML5 : non ●  Recommandation : noms d'attributs en minuscules


16

Certains attributs sont obligatoires sur certaines balises:

<img src="url_de_l_image"/> <img/>


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"/>


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"/>


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.


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


21



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

 

sont valides.

  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


25


Un document HTML comprend plusieurs parties   Un doctype   Un élément racine html

  Un en-tête   Un corps

26


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.


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 :


•  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


42

Exemples

  <table></table>   <ul></ul>   <ol></ol>   <blockquote></blockquote>   <dl></dl>   <div></div>   etc.

  <h1></h1>   <h2></h2>  …   <h6></h6>   <p></p>


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>


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.


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>


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


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


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>


… 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


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>


… #boite1 { float: right; width: 100px; border: solid 1px black; } #boite2 { float: left; width: 100px; border: solid 1px black; } #boite3 { border: solid 1px black; } …


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.




#boite1 { float: right; width: 100px; border: solid 1px black; } #boite2 { float: left; width: 100px; border: solid 1px black; } #boite3 { border: solid 1px black; }


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


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>


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


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


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 •  …


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,…)


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;

}


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();


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.


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";


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");


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


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";


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; }


146

while while (expression conditionnelle) { commandes; }

do ... while

do { commandes; } while (expression conditionnelle)


147

for

for (expression d'initialisation; expression conditionnelle; mise à jour) { commandes; }

Ex : for (var i=0; i < 10; i++) { commandes; }


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]; }


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 />");

}


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"; }


151

break Permet de quitter une boucle (sous réserve qu'une condition soit remplie par exemple). while (expression conditionnelle) { commandes; if (condition) { break; } }


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; }


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)">


157

function gererEvt(evenement, elementClic) { if (evenement.ctrlkey) { // touche Ctrl enfoncée … elementClic.innerHTML = "" ; … } } Z


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é.


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.


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"> // </script> </head>


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");


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");


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 ; } }

}


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(); }


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");


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 ; } }

}


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") { //...

}

//...


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") ; //...


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) ;


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


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);


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



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>


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.


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


  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);


  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


  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"));


  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


<!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


  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) ; … }


  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


  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

Documents

1. HTML, CSS 2. Javascriptkosmina.eu/web/SlidesM2WIC.pdf · 35 En utilisant l’encodage iso-8859-1 ou iso-8859-15 : Les caractères, en dehors de la classification ASCII 7-BIT (donc