Scribd
Importer
461 vues203 pages

HTML CSS JS

Transféré par

Mame Penda Lo
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
461 vues203 pages

HTML CSS JS

Transféré par

Mame Penda Lo
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 203

HTML5, CSS, Javascrip, Jquery

1.  HTML, CSS


2.  Javascript
HTML : schéma de principe

ROU  
TAGE  
URL   HTML  
HTML…  
Requête  

Requête  
CSS  

HTML…  
Javascript  
Navigateur  
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

3
Une page web c’est…

De  la  mise  en  page  

Du  Contenu  

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

5
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

6
HTML

Fichiers au format texte


permettant la description de documents Web

Sous l'autorité du W3C


World Wide Web Consortium
[Link]

7
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
8
HTML : exemple

<html>  
 <head>  
   <meta  charset="ISO-­‐8859-­‐1">  
   <Otle>Page  d'exemple</Otle>  
 </head>  
 <body>  
   <p>Hello  world</p>  
 </body>  
</html>  

9
HTML : structure générale

 
<html>  
 <head>  
   <meta  charset="ISO-­‐8859-­‐1"/>  
   <Otle>Page  d'exemple</Otle>  
 </head>  
 <body>  
   <p>Hello  world</p>   1-­‐  Des  codes  entre  
 </body>   <  et  >  :  les  balises  !  
</html>  

10
HTML : structure générale

<html>  
 <head>  
   <meta  charset="UTF-­‐8">  
   <Otle>Page  d'exemple</Otle>  
 </head>  
 <body>   3-­‐  Du  contenu  
   <p>Hello  world</p>  
 </body>  
</html>  

11
HTML – Les Balises
Langage de balisage composé de
balises (ou marqueurs ou tags)

  Syntaxe :
<mot_cle>texte</mot_cle>
Ou <mot_cle/>

  Les balises sont prédéfinies par le langage


  Structurer les documents : définir les zones et
les widgets de la page

12
HTML – Les Balises

Le chevauchement des balises est illégal

Valide :

<h1>Texte<i>sans chevauchement</i></h1>

Invalide :

<h1>Texte<i>avec chevauchement</h1></i>
13
HTML – Les Balises

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é
14
HTML – Les Balises

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

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

15
HTML – Les Balises

Certains attributs sont obligatoires sur certaines


balises:

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

16
HTML – Les Balises

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

17
HTML – Les Balises

Un attribut standard ne peut être utilisé que sur les


balises correspondantes :
<img src="url_de_l_image"/>
<p src="url_de_l_image"/>

18
HTML – Les Balises

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.

19
HTML – Les Balises

<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

20
HTML – Les commentaires

<!-- Un commentaire -->

Non affiché par les navigateurs


Mais comme tout le reste du document
lisible en affichant la source

21
HTML – Les commentaires

On ne met pas de tiret double


à l’intérieur d’un commentaire

<!-- Un commentaire -->


<!--============-->
sont valides.

<!-- Un autre -- commentaire -->


<!----------------------->
ne sont pas valides.
22
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>  
2-­‐  Des  blocs  :  le  document  
Html  qui  conOent  un  en-­‐
tête  et  un  corps  
23
HTML – Structure des documents
L'imbrications des éléments
 
<!doctype  html>  
<html  lang="fr">  
 <head>   Meta ...
   <meta  charset="UTF-­‐8">   head
   <Otle>Page  d'exemple</Otle>  
title
 </head>   html
 <body>  
   <p>Hello  world</p>  
 </body>   p
</html>   body
p

24
HTML – Structure des documents

Un document HTML comprend plusieurs parties


  Un doctype

  Un élément racine html

  Un en-tête
  Un corps

25
HTML – Structure des documents

doctype <!doctype html >


  html <html>
  Un en-tête <head lang="fr">
</head>
  Un corps <body>
</body>
<html>

26
HTML – Structure des documents
Déclaration du type de document
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

27
HTML – Structure des documents
Langue

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.

28
HTML – Structure des documents
L’en-tête

  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

29
HTML – Structure des documents
L’en-tête : le titre

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

30
HTML – Structure des documents
L’en-tête : les méta-données
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…

31
HTML – Structure des documents
L’en-tête : les méta-données
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]]"/>

32
HTML – Structure des documents
L’en-tête : encodage
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.

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  
 

33
HTML – Structure des documents
A noter : L’en-tête : encodage
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é &quot;)
& (codé &amp;)
< (codé &lt;)
> (codé &gt;)

34
HTML – Structure des documents
L’en-tête : encodage
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é &eacute; ou &#233;) Remarque :
è (codé &egrave; ou &#232;) le blanc
à (codé &agrave; ou &#224;) insécables’écrit
ô (codé &ocirc; ou &#44;) &nbsp;
etc.

35
HTML – Structure des documents
L’en-tête : les références

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="../[Link]" />
<link rel="shortcut icon" type="image/x-icon" href="[Link]" />

36
HTML – Structure des documents
Le corps du document

Le corps d'un document est délimité par les balises


<body> et </body>. Il peut contenir divers éléments :

•  du  texte  (Otres,  paragraphes,   •  des  formulaires  


listes,  etc.)   •  des  cadres  
•  des  images   •  des  objets  externes  (applets  
•  des  hyperliens   Java,  Flash  …)  
•  des  tableaux   •  etc.  

37
HTML – Typologie des éléments
Structure et rendu

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

38
HTML – Typologie des éléments
Block et inline

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

39
HTML & XHTML – Typologie des éléments
Les éléments de type Block
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)

40
HTML & XHTML – Typologie des éléments
Les éléments de type Block
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

41
HTML & XHTML – Typologie des éléments
Les éléments de type Block
Exemples

  <h1></h1>   <table></table>
  <h2></h2>   <ul></ul>

 …   <ol></ol>

  <h6></h6>   <blockquote></blockquote>

  <p></p>   <dl></dl>

  <div></div>

  etc.

42
HTML – Structure des documents
Eléments de type block pour balisage sémantique
HTML – Structure des documents
Eléments de type block pour balisage sémantique
HTML – Structure des documents
Les éléments inline
  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

45
HTML & XHTML – Typologie des éléments
Les éléments inline
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

46
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>
HTML & XHTML – Typologie des éléments
Les éléments inline
Exemples :

  <a></a>
  <em></em>

  <img>

  <b></b>

  <i></i>

  <strong></strong>

  <span></span>

48
HTML – Structure des documents
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 »
HTML – Structure des documents
Les structures universelles
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.

50
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 ».

51
HTML – Les chemins
Les chemins absolus
On peut exprimer la destination d’un lien de manière
absolue (depuis la racine) :

/rep/sousrep/[Link]

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.

52
HTML – Les chemins
Les chemins relatifs
  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

53
HTML – Les tableaux

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

54
HTML – Les tableaux

  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>

55
HTML – Les tableaux

  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.

56
HTML – Les tableaux
Exemple
<table> ...suite
<caption>L&eacute;gende</caption> <tbody>
<thead> <tr>
<tr> <td>Valeur A ligne 1</td>
<th>Cellule d'en t&ecirc;te A</th> <td>Valeur B ligne 1</td>
</tr>
<th>Cellule d'en t&ecirc;te B</th>
<tr>
</tr>
<td>Valeur A ligne 2</td>
</thead> <td>Valeur B ligne 2</td>
<tfoot> </tr>
<tr> </tbody>
<td>Cellule de pied de tableau A</td> </table>
<td>Cellule de pied de tableau B</td>
</tr>
</tfoot>

57
HTML – Les tableaux
Colonnes étendues
<table>
<tr>
<th colspan="2">Cellule d'en t&ecirc;te &eacute;tendue en largeur</
th>
</tr>
<tr> L'attribut colspan crée
<td>Valeur A ligne 1</td> des cellules qui s'étendent
<td>Valeur B ligne 1</td> sur plusieurs cellules
</tr> d'un tableau, en ligne
<tr>
<td>Valeur A ligne 2</td>
<td>Valeur B ligne 2</td>
</tr>
</table>

58
HTML – Les tableaux
Lignes étendues
<table> L'attribut rowspan crée
<tr> des cellules qui s'étendent
<th>Cellule d'en t&ecirc;te A</th>
sur plusieurs lignes
<th>Cellule d'en t&ecirc;te B</th>
d'un tableau
</tr>
<tr>
<td rowspan="2">Valeur A ligne 1 et 2 (&eacute;tendu)</td>
<td>Valeur B ligne 1</td>
</tr>
<tr>
<td>Valeur B ligne 2</td>
</tr>
</table>

59
HTML – Les images

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/[Link]" width="16"
height="18" alt="exemple d'image" />

60
HTML – Les liens

  Lien vers une autre page - même site - même répertoire


<a href="[Link]">Titre du lien</a>
  Lien vers une autre page - même site - autre répertoire
<a href="../../rep1/sousrep2/[Link]">Titre</a>
  Lien vers une autre page - nouvelle fenêtre du navigateur
<a href="exemples/[Link]" target="_blank">Lien</a>

61
HTML – Les liens

  Liens vers une page du même site


<a href="[Link]">Suite</a>

  Liens vers une page d'un autre site


<a href="[Link] site</a>

  Lien vers un fichier


<a href="[Link]">Document PDF</a>
<a href="[Link] PDF</a>

62
HTML – Les liens

  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="[Link]

63
HTML – Les liens

  Lien sous forme d'image vers une autre page


<a href="[Link]"><img border="0" src="../images/[Link]"
width="16" height="18” /></a>

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

[Link]  

65
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

66
Généralités
• 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

67
Les apports des feuilles de style

• 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

68
Les apports des feuilles de style

• 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

69
Les règles d'écriture
• 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;}

70
Les règles d'écriture

•  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

71
Les sélecteurs

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

72
Les sélecteurs
Balises
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;}

73
Les sélecteurs
Classes

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

74
Les sélecteurs
Classes
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
[Link] {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)

75
Les sélecteurs
Identificateurs

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 { … }

76
Les sélecteurs
Identificateurs
Exemple :
#grandtitre {
font-weight: bold;
}
Côté HTML :
<h1 id="grandtitre">Mon titre</h1>

77
Quelques remarques en guise de conclusion
Utiliser des classes ou des identificateurs ?
•  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) …

78
Intégration des CSS dans les documents

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)

79
Intégration des CSS dans les documents
Directives de style dans les balises

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>

80
Intégration des CSS dans les documents
Directives de style dans l'en-tête
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>
81
Intégration des CSS dans les documents
Feuille externe attachée ou liée
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="[Link]">
</head>
…
Les règles de style se trouvent dans un fichier [Link]
auquel le document fait appel ; Il est possible et parfois utile de
lier plusieurs feuilles de styles successivement.

82
L'héritage
Remarques
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
<div style="color:red; font-
weight:bold;">
Rouge gras
<div> La  div  englobée  hérite  des  propriétés  de  style  
Rouge gras aussi  
Note  :  définir  un  style  sur  body  =  l'appliquer  par  
</div>
défaut  à  tous  les  éléments  de  la  page  
</div>

83
L'héritage
Remarques

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

84
Le positionnement
Positionnement "dans le flux"
• 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.

85
Le positionnement
Positionnement dans le flux
div {
width: 600px ;
padding-top: 20px ;
border: solid 1px black;
} <div>
p { <p>paragraphe</p>
margin-left: 20px ; <p>paragraphe</p>
margin-bottom: 20px ; </div>
width: 300px;
border: solid 1px black;
}

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

87
Le positionnement
Positionnement relatif
<div> …
<p id="premier">paragraphe</p> div {
<p id="second">paragraphe</p> width : 600px ;
padding-top : 20px ;
</div> 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;
}

88
Le positionnement
Positionnement relatif
Autre exemple : le décalage est relatif .decale {
à la position normale de l ’élément position: relative;
dans le bloc parent bottom: 5px;
border: solid 1px black;
}
…
<p>Un paragraphe avec
<span class="decale">un
&eacute;l&eacute;ment
d&eacute;cal&eacute;</span>
du reste du texte.</p>
…

89
Le positionnement
• La position de l’élément est Positionnement absolu
déterminée de manière absolue #boite1 {
dans son conteneur parent position: relative;
width: 300px;
positionné le plus proche, ou à border: solid 1px black;
}
défaut, dans la fenêtre du #boite2 {
navigateur position: absolute;
top: 10px;
right: 30px;
• On utilise la propriété position, border: solid 1px black;
avec la valeur absolute, pour }
…
positionner un élément de <div id="boite1">
<p>Boite 1</p>
manière absolue. <div id="boite2">Boite 2</div>
</div>
• Les propriétés top, right, left,
bottom, permettent alors de
fixer la position.  

90
Le positionnement
Positionnement fixé
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.

91
Le positionnement
• On utilise la propriété float, avec Positionnement flottant
la valeur left ou right, pour #boite1 {
positionner un élément de float: right;
width: 100px;
manière flottante. border: solid 1px black;
}
• L’élément prend place à gauche #boite2 {
border: solid 1px black;
(ou à droite) dans l’élément }
conteneur. …
<div id="boite1">Boite 1</div>
• L’élément suivant occupera la <div id="boite2">Boite 2</div>

place laissée libre.


• La boîte 1 se place
de manière flottante à
droite, la boite 2
 
occupe l’espace restant.

92
Le positionnement
Positionnement flottant
Exemple avec 2 boîtes flottantes …
#boite1 {
<div id="boite1">Boite 1</div> float: right;
width: 100px;
<div id="boite2">Boite 2</div> border: solid 1px black;
}
<div id="boite3">Boite 3</div> #boite2 {
float: left;
width: 100px;
border: solid 1px black;
}
#boite3 {
border: solid 1px black;
}
…

XHTML ET CSS 93
Le positionnement
Positionnement flottant
Remarque : attention, si dans le flux du
#boite1 {
document, la boîte 3 était inscrite avant les float: right;
autres boites, celle-ci, non positionnée, width: 100px;
border: solid 1px black;
prendrait toute la largeur du document. Les }
#boite2 {
autres boîtes occuperaient donc leur float: left;
emplacement « flottant », mais en dessous. width: 100px;
border: solid 1px black;
}
<div id="boite3">Boite 3</div> #boite3 {
border: solid 1px black;
<div id="boite1">Boite 1</div> }
<div id="boite2">Boite 2</div>

94
Le positionnement
Positionnement flottant

• 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

95
Le positionnement
Positionnement flottant
#boite2 {
float: left;
width: 100px;
border: solid 1px black;
}
#boite3 {
clear: both;
}
<div id="boite2">Boite 2
</div>
<div id="boite3">Boite 3
</div>

96
Le positionnement
La profondeur
•  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.

97
Types de media

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

98
Types de media
Attribut media
• 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="[Link]" rel="stylesheet” type="text/css" media="screen">


<link href="[Link]" rel="stylesheet” type="text/css" media="print">
<style type="text/css" media="screen,print">
…
</style>

99
Types de media
Attribut media

Par défaut, si l’attribut média n’est pas spécifié,


les directives s’appliquent pour tous les médias
(all)

100
Types de media
@-règles
@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

101
Types de media
@-règles
• 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

102
Quelques remarques en guise de conclusion
Erreurs classiques

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

103
Quelques remarques en guise de conclusion
Règles d'écriture, code réutilisable
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 [Link] 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

104
MODULE
CONCEPTION DE DOCUMENTS WEB

HTML, CSS
JAVASCRIPT
Initiation à Javascript
Plan du module

•  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

106
Initiation à Javascript
DOM
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

107
Initiation à Javascript
Exemple, l’extrait de code HTML suivant : DOM
<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  

108
Initiation à Javascript
DOM

•  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

109
Initiation à Javascript
DOM

•  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

110
Initiation à Javascript
Javascript
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,….)

111
Initiation à Javascript
Javascript
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
•  …

112
Initiation à Javascript
Javascript

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

113
Initiation à Javascript
Bases du langage
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.

114
Initiation à Javascript
Bases du langage
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.
115
Initiation à Javascript
Variables
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)

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

117
Initiation à Javascript
Types de données
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

118
Initiation à Javascript
Typage dynamique
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

119
Initiation à Javascript
Fonctions

•  Mot clé réservé : function.


function uneFonction (parametre1, parametre2){
instructions ...
}

•  NB : les paramètres sont optionnels y compris à l'appel de la


fonction

120
Initiation à Javascript
Fonctions

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

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

122
Initiation à Javascript
Objets : fonctions "constructeurs"
Elles comprennent :
•  les propriétés
•  les méthodes (voir plus loin)
Exemple :
function Etudiant (unNumero, unNom, unPrenom){
[Link] = unNumero;
[Link] = unNom;
[Link] = unPrenom;
}
NB : this fait référence à l'instance courante.

123
Initiation à Javascript
Objets : instanciation
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 !

124
Initiation à Javascript
Objets : accès aux propriétés
Il y a deux façons de déclarer des propriétéss :

function Etudiant (nom, prenom){


[Link] = unNom; // propriété PUBLIQUE
[Link] = unPrenom;
var id = generateId(); // propriété PRIVÉE
}

125
Initiation à Javascript
Objets : accès aux propriétés publiques
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é.
[Link]
[Link]

Il est ainsi possible de lire la valeur de la propriété ou de lui


affecter une valeur (écrire).

126
Initiation à Javascript
Objets : accès aux propriétés privées
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
[Link] = function() {
return id ;
};
}

Appel : var sonId = [Link]();


[Link] ==> 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é.

127
Initiation à Javascript
Objets : ajout de propriétés

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.
[Link]=25;

NB : même si ces propriétés n’existent pas dans la


fonction « constructeur »

128
Initiation à Javascript
Objets : destructeurs
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

129
Initiation à Javascript
Objets : propriétés de classe (statiques)
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.

[Link] = "étudiant";

Par exemple : Pi en mathématique (objet Math).

130
Initiation à Javascript
Objets : méthodes d'objet
= une méthode associée à un objet.

technique 1 : déclaration dans la fonction "constructeur"


function Etudiant (unNumero, unNom, unPrenom{
[Link] = unNumero;
[Link] = unNom;
[Link] = unPrenom;
[Link] = function() {
alert([Link] + " " + this. nom + " : " +
[Link]);
};
}

131
Initiation à Javascript
Objets : méthodes d'objet
technique 2 : accès à une fonction externe (permet la
factorisation)

function alerteNumero() {
alert ([Link] + " " + [Link] + " : " + [Link]);
}
function Etudiant (unNumero, unNom, unPrenom{
[Link] = unNumero;
[Link] = unNom;
[Link] = unPrenom;
[Link] = alerteNumero;
}

132
Initiation à Javascript
Objets : méthodes d'objet

Dans les 2 cas, on pourra invoquer la méthode pour une


instance donnée

// Corps du programme
unEtudiant = new Etudiant(45685, "Durant", "Paul");
[Link]();

133
Initiation à Javascript
Objets : méthodes d'objet

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.

134
Initiation à Javascript
Objet prototype
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.

135
Initiation à Javascript
Objet prototype
Objet prototype
function Etudiant (unNumero, unNom, unPrenom){
[Link] = unNumero;
[Link] = unNom;
[Link] = unPrenom;
}
[Link]() {
alert ([Link] + " " + [Link] + " : " + [Link]);
}
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.

136
Initiation à Javascript
Héritage
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;
}
[Link] = new MonObjet();

Les instances de MonObjetDerive incluront les propriétés et les


méthodes de MonObjet et de MonObjetDerive.

137
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   PI,  SQRT2,  abs,  atan,  cos,  random,  
mathémaOques)   round…  
Navigator  (navigateur  courant)   appName,  appVersion,  language…  
Window  (fenêtre  courante)   document,  history,  name,  status,  
alert,  confirm,  prompt...  

138
Initiation à Javascript
Tableaux
•  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.

139
Initiation à Javascript
Tableaux

unTableau = new Array ();


unTableau[0] = "printemps";
unTableau[1] = "été";
unTableau[2] = "automne";
unTableau[3] = "hiver";

140
Initiation à Javascript
Tableaux

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

141
Initiation à Javascript
Tableaux

•  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

142
Initiation à Javascript
Tableaux

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

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

144
Initiation à Javascript
Structures de contrôle et de boucle
switch
switch (expression) {
case etiquette1 :
commandes;
break;
case etiquette2 :
commandes;
break;
default :
commandes;
break;
}

145
Initiation à Javascript
Structures de contrôle et de boucle

while
while (expression conditionnelle) {
commandes;
}

do ... while
do {
commandes;
} while (expression conditionnelle)

146
Initiation à Javascript
Structures de contrôle et de boucle

for
for (expression d'initialisation; expression
conditionnelle; mise à jour) {
commandes;
}
Ex :
for (var i=0; i < 10; i++) {
commandes;
}

147
Initiation à Javascript
Structures de contrôle et de boucle
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) {
[Link](tableau[num];
}

148
Initiation à Javascript
Structures de contrôle et de boucle

Exemple 2 :
function Etudiant (unNumero, unNom, unPrenom) {
[Link] = unNumero;
[Link] = unNom;
[Link] = unPrenom;
}

unEtudiant = new Etudiant (45685, "Testeur", "Toto");

for (propriete in unEtudiant) {


[Link](propriete + "<br />");
}

149
Initiation à Javascript
Structures de contrôle et de boucle
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";
}

150
Initiation à Javascript
Structures de contrôle et de boucle

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

151
Initiation à Javascript
Structures de contrôle et de boucle

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

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

153
Initiation à Javascript
Exemples d'évènements
•  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

154
Initiation à Javascript
Gestionnaire d'évènements
•  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="[Link]" onclick="return
[Link]('On change de page');">

155
Initiation à Javascript
Gestionnaire d'évènements
•  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="[Link]" 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="[Link]" onclick="gererEvt(event, this)">

156
Initiation à Javascript
Gestionnaire d'évènements

function gererEvt(evenement, elementClic) {


if ([Link]) { // touche Ctrl enfoncée
…
[Link] = "" ;
…
}
} Z

157
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

158
Initiation à Javascript
Intégration dans le document
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.

159
Initiation à Javascript
Intégration dans le document
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é.

160
Initiation à Javascript
Intégration dans le document
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/
[Link]"></script>

L'intégration d'un fichier externe se fait généralement dans l'en-tête d'un


document.

161
Initiation à Javascript
Accéder au DOM
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 162


Privilégier les méthodes du DOM
Initiation à Javascript
...
<head> Accéder au DOM
...
<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=[Link]["0"].elements["cp"].value;

// on utilise un objet expReg (expression régulière) pour tester


// la valeur saisie
var expReg=/^[0-9]{5}$/;

if (![Link](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


[Link]["0"].elements["cp"].focus();
return false;
}
return true; [Link]["0"] = référence relative
} Devient invalide si ajout d'un nouveau
//]]--> formulaire au début de la page  
</script>
</head>

Approche que je déconseille


Privilégier les méthodes du DOM
Initiation à Javascript
Accéder au DOM

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=[Link]("uid");

164
Initiation à Javascript
Accéder au DOM

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 =
[Link]("p");

165
Initiation à Javascript
Accéder au DOM
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 = [Link]("a");

for (var i=0; i < [Link]; ++i) {


liens[i].onclick = function() {
alert("ceci est un lien") ;
return false ;
}
}
}

166
Initiation à Javascript
Accéder au DOM
•  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 :

[Link]=function(){
installerGestionnaireDeLiens();
}

167
Initiation à Javascript
Accéder au DOM

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=
[Link]("maClasse");

168
Initiation à Javascript
DOM : accéder aux attributs

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 = [Link]("value");

169
Initiation à Javascript
DOM : accéder aux attributs
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=[Link]("a");
for (var i=0; i<[Link]; ++i) {
liens[i].onclick=function() {
alert(liens[i].getAttribute("href")) ;
return false ;
}
}
}

170
Initiation à Javascript
DOM : accéder aux attributs

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

171
Initiation à Javascript
DOM : accéder aux attributs
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.
[Link]("att","val");
par exemple
//...
liens[i].setAttribute("title","un titre") ;
//...

172
Initiation à Javascript
DOM : suppression d'attribut

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.
[Link]("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).

173
Initiation à Javascript
DOM : trouver le style d'un élément
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 = [Link]("…");


var computedStyle = [Link] ||
[Link](element, null);
[Link] [Link];
174
Initiation à Javascript
DOM : modifier le style
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 = [Link]("monID");


[Link] = "solid 1px #000000";

175
Initiation à Javascript
DOM : créer des éléments

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

176
Initiation à Javascript
DOM : créer des éléments

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 : [Link] (nouveauNoeud,
noeudExistant) ;

177
Initiation à Javascript
DOM : créer des éléments
–  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 = [Link](false); //
false indique que seule la structure est
copiée
var noeud = [Link](true); //
true indique que la structure et le contenu
sont copiés

178
Initiation à Javascript
DOM : créer des éléments
var elt=[Link]("unId");
// je crée la liste (ul)
var newUl = [Link]("ul");
// je j’ajoute comme enfant du nœud principal
Exemple   :   créer  
[Link](newUl);
une   liste   (ul)  
// je crée un élément de liste (li)
d’élément   (li)  
var newLi = [Link]("li");
dans   un   nœud  
// je l’ajoute comme enfant à l’élément ul
donné   dont   l’id  
[Link](newLi);
est  "unId"  
// Je crée un nœud de type text
li_text = [Link]("Hello world");
// je l’ajoute comme enfant de l’élément de liste
[Link](a_text);

179
Initiation à Javascript

Remarque : utilisation de la méthode createElement pour déclarer les nouvelles


balises HTML5 pour les navigateurs ne les supportant pas
(IE < 9 notamment)

<!--[if lt IE 9]>
<script>
[Link]("header");
[Link]("footer");
….
</script>
<![endif]-->

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
DOM : supprimer des éléments
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)

[Link]([Link]);

181
Initiation à Javascript
DOM : méthodes et propriétés relationnelles
–  ParentNode : retourne le nœud parent d’un nœud.
eltParent = [Link];

–  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 = [Link];
var nbEnfants = [Link] // nombre
d’éléments enfants

–  hasChildNode() : indique si un nœud a des enfants (retourne true) ou


non (retourne false)
[Link]();

182
Initiation à Javascript
DOM : méthodes et propriétés relationnelles
–  firstChild : retourne le premier enfant d’un noeud
var premierEnfant = [Link];

–  lastChild : retourne le dernier enfant d’un nœud


var dernierEnfant = [Link];

–  nextSibling : renvoie le frère d’un élément (nœud adjacent suivant)


var frereSuivant=[Link] ;

–  previousSibling : renvoie le frère d’un élément (nœud adjacent


précédent)
var frerePrecedent=[Link] ;

183
Initiation à Javascript
DOM : méthodes et propriétés
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, [Link] 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 = [Link];

–  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 = [Link];

184
Initiation à Javascript
DOM : méthodes et propriétés
• 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=[Link]("test");
alert([Link]);
La boite de dialogue m’affichera : <p>Voici <em>un peu</em> de contenu</p>

185
Initiation à Javascript
DOM : méthodes et propriétés

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.

186
Utilisation de Javascript en HTML
Canvas 1/2

<canvas id="monCanvas" width="200" height="400"></canvas>

  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 ?)
Utilisation de Javascript en HTML
Canvas 2/2

<canvas id="myCanvas" width="200" height="100"></canvas>


…
var canvas = [Link]("myCanvas");
var context = [Link]("2d");

var linearGradient1 = [Link](0,0,50,50);


[Link](0 , 'rgb(255, 0, 0)');
[Link](0.5, 'rgb(255, 255, 255)');
[Link](1 , 'rgb(255, 0, 0)');

[Link] = linearGradient1;
[Link](10,10,110, 110);
Utilisation de Javascript en HTML
Canvas : exemple (1/2)
hsp://[Link]/arOcles/html5-­‐canvas-­‐example/  
var width = 125; // Triangle Width
var height = 105; // Triangle Height
var padding = 20;

// Draw a path
[Link]();
[Link](padding + width/2, padding); // Top Corner
[Link](padding + width, height + padding); // Bottom Right
[Link](padding, height + padding); // Bottom Left
[Link]();

// Fill the path


[Link] = "#ffc821";
[Link]();

…   …  
[Link] = "center";
[Link] = "middle";
[Link] = "bold 60px 'Times New Roman', Times, serif";
[Link] = gradient;
try{
[Link]("!", canvasWidth/2, padding + height/1.5);
}catch(ex){}
Utilisation de Javascript en HTML
Canvas : exemple (2/2)

hsp://www.eff[Link]/demos/canvascycle/  
Utilisation de Javascript en HTML
Canvas : KineticJS
<script src="[Link]
script>
...
<div id="container"></div>
...
<script>
var stage = new [Link]({
container: 'container',
width: 578,
height: 200
});

var layer = new [Link]();

var blueSpline = new [Link]({


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
});
Principal  avantage  :  les  éléments  du  canvas  deviennent  
[Link](blueSpline);
[Link](layer);
manipulables  comme  des  éléments  du  DOM  en    
[Link](); javascript.  
</script>
Les nouveautés dans le code Javascript
L'API de géolocalisation

Geolocation API
  Fonctionne avec Javascript et l'objet [Link]
  Récupère les coordonnées du poste de l'utilisateur en longitude,
latitude et altitude
getCurrentPosition
watchPosition (suivi en continu)
Les nouveautés dans le code Javascript
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.)
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;
interface Position { };
readonly attribute Coordinates coords;
readonly attribute DOMTimeStamp timestamp;
};

hsp://[Link]/tuto/lire/926-­‐geolocalisaOon-­‐geolocaOon-­‐[Link]  
Les nouveautés dans le code Javascript
Le Drag and Drop

<li draggable="true">Element de ma liste</li>


<div ondrop="manageDrop(event);"/>

  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)
 …
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é
[Link]("idDrag", [Link]('id'));

  On peut déplacer, copier, créer un lien vers l'élément,...


  Il faut définir l'effet du drag&drop
[Link] = 'move';
  On peut définir l'image qui représente l'élément déplacé
[Link]([Link], 0, 0);
Les nouveautés dans le code Javascript
L'API Fichier

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

hsps://[Link]/en-­‐US/docs/Using_files_from_web_applicaOons  
Les nouveautés dans le code Javascript
Stockage local

  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)

[Link]("name", "John");
alert([Link]("name"));

hsp://[Link]/node/218  
Les nouveautés dans le code Javascript
API Offline Web

  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
Les nouveautés dans le code Javascript
API Offline Web
<!DOCTYPE html> Le  fichier  [Link]  :  
<html manifest="[Link]">  
<head> CACHE MANIFEST
<style type="text/css">
# Version 0.4
#main{ width:900px; margin:auto; }
CACHE:  
</style>
[Link]  
</head> css/[Link]  
<body> img/earth-­‐[Link]  
<div id="main">    
<h1>Cette page est accessible hors ligne</h1> FALLBACK:  
/[Link]  /offl[Link]  
<img src="[Link]" />
   
</div> NETWORK:  
</body> *  
</html>

Le  fichier  htaccess  :  
 
AddType  text/cache-­‐manifest  manifest  

hsp://www.html5-­‐[Link]/html5/tutoriel-­‐applicaOon-­‐web-­‐offline-­‐html5-­‐cache-­‐
manifest  
Les nouveautés dans le code Javascript
API Push

  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
Server Sent events : exemple

if  (!![Link])    {  //  Serveur  Sent  Events  dispo  


             source  =  new  EventSource('ajax/[Link]?userId='  +  userId);  
 
 
   [Link]('eventName1',  funcOon(e)  {  
   [Link]("eventName1  occured  :  "  +  [Link])  ;  
 
   var  data  =  [Link]([Link]);  
  header('Content-­‐Type:  text/event-­‐stream');  
   …  
  header('Cache-­‐Control:  no-­‐cache');    
 }  
   
   [Link]('eventName2',  funcOon(e)  {   funcOon  sendMsg($eventName,  $data)  {  
      [Link]("eventName2   o ccured   :   "   +   [Link])   ;  
   …    echo  "event:  $eventName\n"  ;  
   echo  "data:  $data\n\n"  ;  
 }  
   ob_flush();  
 
}    flush();  
}  
 
while  (true)  {  
 …  
 sensMsg(  "eventName1",      
     json_encode($tableau))  ;  
 …  
}  
Les nouveautés dans le code Javascript
Web Sockets

  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écessiteun gestionnaire côté serveur : Kaazing ; Jetty
Netty, ou JWebSocket (Java) ; Websocket (Python) ; …

hsp://[Link]/[Link]?post/2011/02/25/Html5-­‐et-­‐les-­‐webSockets  
Les nouveautés dans le code Javascript
Web Workers

  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

hsp://[Link]/b/davrous/archive/2011/07/08/introducOon-­‐aux-­‐web-­‐
workers-­‐d-­‐html5-­‐le-­‐mulOthreading-­‐version-­‐[Link]  

Vous aimerez peut-être aussi