Scribd
Importer
62 vues190 pages

HTML5 CSS3 V2.1

Le document présente une introduction à HTML5 et CSS3, en expliquant les balises, la structure des documents, et les styles. Il aborde également les liens, les tableaux, et les balises sémantiques, tout en fournissant des exemples de code. Enfin, il traite des positions des éléments et de leur mise en forme via CSS.

Transféré par

richezatr
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd
62 vues190 pages

HTML5 CSS3 V2.1

Le document présente une introduction à HTML5 et CSS3, en expliquant les balises, la structure des documents, et les styles. Il aborde également les liens, les tableaux, et les balises sémantiques, tout en fournissant des exemples de code. Enfin, il traite des positions des éléments et de leur mise en forme via CSS.

Transféré par

richezatr
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 PPTX, PDF, TXT ou lisez en ligne sur Scribd

HTML5 ET CSS3

Wilfart Emmanuel
Cours de réseau 3ième informatique
 HTTP: Hyper Text Transfert Protocol
 HTML: Hyper Text Markup Language
HTML
 Balise seule: <balise> ou <balise />

 Conteneurs: <balise> contenu du conteneur </balise>

 Attributs: <balise attribut= "valeur">

 Quelques règles:
 Les noms des balises de préférence en minuscule
 Toujours fermer les conteneurs par une balise de
fermeture
Structure HTML 4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-
equiv="Content-Type">

<title>Titre de la page</title>
</head>
<body>

</body>
</html>
Structure HTML 5
<!DOCTYPE html>
<html lang="fr-be">
<head>
<meta content="text/html; charset=utf-8" http-
equiv="Content-Type">

<title>Titre de la page</title>
</head>
<body>

</body>
</html>
 Page HTML: contenu
 Feuille de style: mise en page
Feuille de style
 Les propriétés: propriété: valeur;
text-align: center;
 Les sélecteurs:
 Sélecteur de base:
div { text-align: center; } valide pour tous les blocs div
 Sélecteur de classe:
.class1 { text-align: center; } valide pour toutes les balises
associées à cette classe
<div class="class1"></div>
 Sélecteur d'identifiant:
#bloc1 { text-align: center; } valide la balise ayant cet
identifiant unique
<div id="bloc1"></div>
HTML et CSS
 Style en ligne
<div style="text-align: center;"> </div>
 Style en interne
<head>
<style type="text/css">
div { text-align: center; }
.classe1 { text-align:center; }
<style>
</head>
 Style externe
<link rel="stylesheet" type="text/css" href="fichier.css">
HTML dynamique
HTML et Javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function Modifie()
{

document.getElementById("SpanID1").innerHTML="Modifie ";
}
</script>
<meta content="text/html; charset=utf-8" http-equiv="Content-
Type">
<title>Untitled 1</title>
</head>
<body>
<span id="SpanID1">Non défini</span> <input type="button"
value="Remplir" onclick="Modifie();" />
</body>
</html>
HTML et Javascript
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js" />
<meta content="text/html; charset=utf-8" http-equiv="Content-
Type">
<title>Untitled 1</title>
</head>
<body>
<form action="">
<span id="SpanID1">Non défini</span> <input type="button"
value="Remplir" onclick="Remplir();">
</form>
</body>
</html>
Les Balises HTML
 Les balises occupent l'emplacement suivant le flux naturel
dans lequel elles sont dans le fichier HTML
 L'aspect visuel d'une balise est de la responsabilité du
navigateur. Vous pouvez influer par les feuilles de style
 Deux grandes catégories de balises:
 Les balises de type Block
Occupent la largeur du conteneur parent
Comprennent un saut de ligne avant et après
 Les balises de type Inline
La taille s'adapte au contenu
 Les retours à la ligne, les caractères blancs multiples sont
remplacés par un simple caractère blanc
Les Balises Classification
 Les balises de mise en forme du texte
• <b>mise en gras</b> qui donne mise en gras
• <i>mise en italique</i> qui donne mise en italique
• <del>texte barré</del> qui donne texte barré
• mettre en <sup>exposant</sup> mettre en exposant
• mettre en <sub>indice</sub> mettre en indice

Ces balises sont de type Inline


Les Balises Classification
 Mise en forme du texte et CSS
.gras { <body>
font-weight:bold;} Ceci est un texte en <span
.italic { class="gras">gras</span><br/>
font-style:italic;} Cesi est un texte en <span
class="italic">italic</span><br/>
<span class="gras italic">gras et
italic</span><br/>
<span class="gras"><span class="italic">gras
et italic</span></span>
</body>
Les Balises Classification
 Les caractères spéciaux
• &lt; pour le caractère <
• &gt; pour le caractère >
• &quot; pour le caractère "
• &amp; pour le caractère &
• &nbsp; pour la caractère blanc
• &euro; pour le symbole €

Ces balises sont de type Inline. On ajoute <span> </span>


Les Balises Classification
 Les balises de structure de document
• Les balises de titre <hx> Titre de niveau x </hx> x étant
un nombre compris de 1 à 6
• La balise de paragraphe <p>paragraphe</p>
• La balise de citation <blockquote> </blockquote>
• La balise <hr> qui introduit une ligne horizontale
• Les balises <ol></ol> pour des listes ordonnées
• Les balises <ul></ul> pour des listes à puces
• Les balises <dl></dl> pour des définitions
• La balise <li> pour ajouter un item dans une liste

Ces balises sont de type Block


Les Balises Classification
 La balise pour créer une table
<table></table>

 La balise pour créer un formulaire


<form></form>

 La balise pour créer une division


<div></div>

 Les balises pour les images


<img>

Ces balises sont de type Block


Les liens (ancrages)
 Un ancrage de type texte
<a> Cliquer ici </a>
 Attribut href <a href="page.html">
 Attributs target <a target="_blank"> ou <a target="_self>
 Attribut ping (html5) Envoyer une notification vers une url
 Attribut hreflang pour définir la langue de la page cible
 Attribut title pour afficher une info bulle

 Un ancrage de type graphique. (Image réactive)


<a href="page.html"> <img src="lien.jpg"> </a>
Les liens (ancrages)
 Un ancrage de type graphique. (Image réactive)

<IMG SRC="images/image.gif" USEMAP="#Map">


<MAP NAME="Map">
<AREA SHAPE="rect"
HREF="debut.html"
COORDS="0,0,48,28">
<AREA SHAPE="circle"
HREF="precedent.html"
COORDS="50,30,10">
<AREA SHAPE="poly"
HREF="suivant.html"

COORDS="60,50,80,30,100,40,50,100">
</MAP>
Les liens
 Les liens vers un autre site
<a href=http://www.helha.be>Site HELHA</a>

 Les liens dans une même page


<a name="chpt1"></div>
<a href="#chpt1">Chapitre 1</a>

 Les liens vers une adresse mail


<a href="mailto:[email protected]?subject=information

 Les liens vers des fichiers à télécharger


<a href="doc.pdf">charger le pdf</a>
Les liens (ancrages)
 En HTML5

Tout ancrage peut se faire sur un élément de type bloc


comme par exemple les divisions ou les listes.

<a href="page.html"><div>contenu</div></a>
Les liens et les CSS
 Par défaut
Les liens sont soulignés et
• Pour un lien non visité: couleur bleue
• Pour un lien visité: couleur pourpre
• Pour un lien actif: couleur rouge

 Peuvent être modifiés dans les CSS de façon globale


a{
text-decoration:none;
color:black; }
Les liens et les CSS
 Modifications individuelles

• Pour un lien non visité a:link { }


• Pour un lien visité a:visited { }
• Pour un lien actif a:active { }

Exemple:
a:visited {
text-decoration:overline;
color:black; }
Les tableaux
 Un tableau s'identifie par les balises
<table> </table>

 Il comprend une ou plusieurs lignes


<tr></tr>
<table><tr></tr><tr></tr></table>

 1 ligne comprend une ou plusieurs cellules


<td></td>
<table><tr><td></td></tr></table>

La mise en forme d'un tableau s'effectue par les CSS


(dimensions, cadres, couleurs de fond, marges, décorations…)
Les tableaux - Les CSS
 Les cadres
• Définir le bord extérieur du tableau
table {
border:thin black solid ; }
• Définir le bord extérieur de chaque cellule
td {
border:thin black solid ; }
 Les marges
Elles permettent de décaler le contenu du bord de la cellule
td {
padding:5px; }
Les tableaux - Les CSS
 Les fusions des colonnes
Dans la balise <td>, nous retrouvons l'attribut colspan
Exemple:

#MaTable { <body>
border:thin black solid; <table id="MaTable">
border-collapse:collapse; <tr>
width:250px; } <td colspan="3">Pondération</td>
</tr>
td {
<tr>
border:thin black solid; <td>100</td>
padding:5px; <td>200</td>
width:33%; <td>300</td>
text-align:center; } </tr>
</table>
</body>
Les tableaux - Les CSS
 Les fusions des lignes
Dans la balise <td>, nous retrouvons l' attribut rowspan
Exemple:

#MaTable { <body>
border:thin black solid ; <table id="MaTable" >
border-collapse:collapse; <tr>
width:250px; } <td rowspan="2">1</td>
<td>2</td>
td {
<td>3</td>
border:thin black solid ; </tr>
padding:5px; <tr>
width:33%; <td>200</td>
text-align:center; } <td>300</td>
</tr>
</table>
</body>
Les tableaux - Les CSS
 Les fusions des lignes

Si nous ajoutons la propriété suivante vertical-align:top;


pour l'élément td, nous obtiendrons
Les tableaux - Les CSS
 Regroupement des colonnes
Si nous souhaitons appliquer des règles communes à plusieurs colonnes,
nous pouvons utiliser les classes ou alors utiliser la balise <colgroup> dont
l'attribut span précise le nombre de colonnes à considérer.

#MesCols { <table id="MaTable" >


background- <colgroup span="2" id="MesCols">
color:aqua; } </colgroup>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>100</td><td>200</td><td>300</td>
</tr>
</table>
Les tableaux
 En vrac
• Résumé l'un tableau: attribut summury de la balise <table>
• La légende d'un tableau: balises
<caption>Légende</caption>
• Les balises pour comprendre les lignes associées à une
entête: <thead></thead>
• Les balises pour comprendre les lignes associées au corps:
<tbody></tbody>
• Les balises pour comprendre les lignes associées au pied du
tableau: <tfoot></tfoot>
Balises d'organisation
Balises sémantiques
Bien que faisant partie de la norme HTML5, certaines balises ne sont pas
reconnues par tous les navigateurs. (13/07/2011)

• Balises <hgroup></hgroup> qui permettent de regrouper des


balises de type <hx>
• Balises <time></time> qui définissent une date ou une heure
• Balises <mark></mark> qui mettent en évidence avec un fond
jaune un texte
• Balises <figure></figure> qui permettent de regrouper des
images, vidéos qui viennent en illustration du contenu principal
• Balises <figcaption></figcaption> permettant de fournir une
légende pour les balises <figure></figure>
Balises sémantiques
Les balises suivantes sont trop peu reconnues bien que prometteuses dans
l'avenir: <meter></meter> <progress></progress>
<details><details><summary></summary> <menu></menu>

Exemple d'utilisation de <meter> sous Google Chrome

<p>Votre score
<meter value="61" min="0" max="100" low="65" high="96"
optimum="100"></meter>61%</p>
<p>Votre deuxième score
<meter value="75" min="0" max="100" low="65" high="96"
optimum="100"></meter>75%</p>
Taille et position
Les balises s'affichent dans le flux naturel où elle se présente dans le
document html. Leur largeur dépendra qu'elles soient considérées par le
navigateur comme de type in-line ou bloc.
 Position relative:
Nous modifions la position de façon relative à la position occupée par le
flux naturel. Un peu plus en haut, en bas, à gauche ou à droite.

.haut { <body> <br/>


position:relative; Texte plus<span class="haut"> haut
bottom:5px; </span>que la suite<br/><br/>
font-weight:bold; Texte plus<span class="bas"> bas
color:blue; } </span>que la suite<br/><br/> </body>
.bas {
position:relative;
top:5px;
font-weight:bold;
color:blue; }
Taille et position
 Position absolue:
Nous définissons la position de l'élément dans son conteneur.
Exemple de centrage vertical pour restreindre la page à un format 800x600.

.Bloc800x600{ <body>
width:800px; <div class="Bloc800x600"></div>
height:600px; </body>
position:absolute;
margin:auto;
top:0px;
z-index:2;
left:50%;
margin-left:-400px;
border:thin black solid; }
Taille et position
 Position absolue/zindex:
Pouvoir placer un élément où l'on veut, c'est aussi devoir gérer les
superpositions avec la propriété z-index.

#clavier{ <span id="clavier"><img width="200px"


position:absolute; height="150px" src="clavier.jpg"
top:10px; alt="clavier"/></span>
left:10px; <span id="clef"><img width="200px"
z-index:2; height="150px" src="usb.jpg"
border:4px aliceblue solid; } alt="ClefUSB"/></span>
#clef{
position:absolute;
top:70px;
left:70px;
z-index:1;
border:4px aliceblue solid; }
Taille et position
 Position fixe:
Identique à la position absolue excepté que l'élément se positionne par
rapport à la fenêtre du navigateur et pas par rapport au conteneur.

.Bloc800x600{ <body>
width:800px; <div class="Bloc800x600"></div>
height:600px; </body>
position:absolute;
margin:auto;
top:0px;
z-index:2;
left:50%;
margin-left:-400px;
border:thin black solid; }
Taille et position
 Rognage, débordement, barres de défilement
Normalement un type in-line s'adapte à son contenu.
Qu'en est-il si une largeur est déterminée?
Toutes les fois que survient un débordement, la propriété "overflow" vient
spécifier, s'il y a lieu, la façon dont la boîte sera rognée. C'est la propriété
"clip" qui spécifie alors la taille et la forme de la zone rognée.

#limite {
width:150px;
height:200px;
border:thin black solid;
margin:10px 0 0 10px;
background-color:gainsboro; }

Par défaut, la propriété overflow est


égale à visible
Taille et position
 Rognage
La propriété overflow à la valeur hidden
Taille et position
 Barres de défilement
La propriété overflow à la valeur scroll
Taille et position
 Taille et CSS

Par défaut, la propriété width correspond au contenu. La norme CSS3 permet de


changer un attribut ayant une incidence sur la façon dont la largeur est calculée.
Elle sera abordée dans les dias traitant du CSS3
Taille et position
 Taille et position type block
Comme nous en avons déjà parlé, la position dépend du fait d'avoir un bloc de
type inline (se place dans le flot) ou en block (nouvelle ligne avant et après).
Il est possible malgré tout de pouvoir changer ce positionnement par défaut au
moyen des CSS.
Un type inline ne peut voir sa largeur modifiée du fait que son objectif est de
prendre le moins de place possible sur base de son contenu.
<div id="content">
<div class="child">un</div>
<div class="child">deux</div>
<div class="child">trois</div>
<div class="child">quatre</div></div>
Taille et position
 Taille et posistion type inline
Un objet de type block occupe toute la largeur du parent. Nous allons modifier par
le CSS les caractéristiques des blocs DIV en choisissant un type inline
<style>
.child
{
border:1px solid black;
display:inline;
}
</style>
Taille et position
 Largeur d'un type block
Un objet de type block peut voir sa largeur modifiée grâce à la propriété width des
styles CSS

<style>
.child
{
border:1px solid black;
width:200px;
}
</style>
Taille et position
 Largeur d'un type inline-block
Ce mode d'affichage permet de respecter le type inline tandis que la largeur peut
alors être modifiée. La hauteur du parent s'adapte au contenu.

.child
{
border:1px solid black;
display:inline-block;
width:80px;
}
Taille et position
 Largeur d'un type inline-block
Si le conteneur parent diminue en largeur, le contenu s'adaptera et se verra
affecter de retour chariot.
Taille et position
 Positionnement de type float
L'attribut float peut prendre comme valeur left, right. Cet attribut consiste à
enlever les enfants du flux et les placer sur la droite ou sur la gauche du conteneur
parent
 Avec un display:inline-block

 Avec un float:left

Le bloc div ne s'adapte pas en hauteur au contenu et les blocs enfant sont collés
sans l'espace que l'on retrouve par défaut dans l'exemple précédent. Une
solution consiste à définir le bloc parent de type inline-block
Taille et position
 Positionnement de type float

#conteneur {
display:inline-block;
border:1px solid red;
width:100%; }
.child {
border:1px solid black;
float:left;
width:80px;}
Taille et position
 Positionnement de type table, table-row, table-cell
Lors du redimensionnement d'un conteneur parent, le layout peut changer en
s'adaptant à la nouvelle largeur. Une solution est de fixer la taille du parent

.child {
border:1px solid black;
display:inline-block;

width:80px; }
#content {
border:1px double red;
width:350px; }
Avec l'attribut display:table-cell, les blocs enfant restent les uns à côté des autres
comme pour un tableau mais avec l'attribut width, la largeur diminuera pour
prendre moins de place
Taille et position
 Positionnement de type table, table-row, table-cell
Pour éviter le redimensionnement des conteneurs enfant, nous pouvons travailler
avec la propriété min-width.

.child {
border:1px solid black;

min-width:80px;
display:table-cell; }

Un inconvénient est que le bloc div parent a une taille qui diminue en deçà de la
largeur occupée par les blocs enfant
Taille et position
 Positionnement - centrage
Nous allons centrer un bloc div sur notre page. Ce centrage peut s'effectuer de
plusieurs façons.

<div id="content">
<label>UserID:</label><input type="text" /><br />
<label>Passwd:</label><input type="text" /><br />
<input type="submit" value="Valider" />
</div>

#content {
border:1px solid black;
width:300px;
margin:auto;
padding:20px;
}
Taille et position
 Positionnement - centrage
Nous allons prévoir une dimension fixe pour les label mais il sera nécessaire de
les faire passer en mode inline-block

#content { label
border:1px solid black; {
width:300px; width:100px;
margin:auto; display:inline-block;
padding:20px; margin:5px;
} }
Taille et position
 Positionnement - centrage
Si nous voulons aligner le bouton sur la droite avec le maintient de la hauteur en
fonction du contenu, il faut faire passer le conteneur parent à l'affichage inline-
block mais alors le margin:auto ne fonctionne plus. Il sera alors remplacer
favorablement par le table
Taille et position
 Positionnement - centrage

#bouton {
float:right;
margin-top:20px;
}
#content {
border:1px solid black;
display:table;
width:300px;
margin:auto;
padding:20px;
}
Taille et position
 Positionnement
Nous pouvons positionner tout élément en choisisant comme attribut de
position: relative, absolute ou fixed. Le positionnement peut alors se réaliser en
utilisant les attributs left, right, top et bottom.
Attention: en mode absolu, le conteneur est enlevé du flux!
Nous reprenons deux blocs divs imbriqués.

#content {
border:1px solid black;
width:400px; }
#div1 {
border:1px solid red;
width:200px;
background-color:yellow; }
Taille et position
 Positionnement
Nous choisissons de positionner le bloc div1 de façon relative par rapport à la
position qu'il devrait occuper naturellement dans le flux
#content {
border:1px solid black;
width:400px;
overflow:hidden; }
#div1 {
position:relative;
left:20px;
top:20px;
border:1px solid red;
width:200px;
background-color:yellow;}

Le bloc div parent conserve sa hauteur tandis que la propriété overflow permet
de cacher ce qui déborde.
Taille et position
 Positionnement
Si nous choisissons de positionner le bloc de façon absolue, le bloc parent auquel
se référenceront les positions dépendra du fait que le parent contienne ou pas
une position.
#content {
border:1px solid black;
width:400px;}
#div1 {
position:absolute;
right:0px;
top:20px;
border:1px solid red;
width:200px;
background-color:yellow;}

La hauteur du parent ne dépend plus de son contenu. Le positionnement


s'effectuera en rapport au document.
Taille et position
 Positionnement
Nous changeons la position du parent pour le définir suivant une position
relative.
#content {
border:1px solid black;
width:400px;
position:relative; }
#div1 {
position:absolute;
right:0px;
top:20px;
border:1px solid red;
width:200px;
background-color:yellow;}

La hauteur du parent ne dépend plus de son contenu. Le positionnement


s'effectuera en rapport au parent.
Les formulaires
 Présentation
 Déclaration d'un formulaire
• Utilisation du conteneur <form> </form>
<body>
<form action=" ">Contenu du formulaire</form>
</body>
• Les attributs de la balise <form>
- name: précise le nom donné au formulaire
- action: précise à qui doit être transmis le formulaire
 action="http://www.helha.be/gestion.aspx"
 action="mailto:[email protected]"
Les formulaires
• Les attributs de la balise <form>
- enctype: type mime utilisé pour transmettre les
données du formulaire
 application/x-www-form-urlencoded par défaut
 multipart/form-data pour le transfert de fichiers
 text/plain pour le mailto
- method: méthode de transfert soit:
 get (<100 caractères ascii)
 post (tout type de caractères et non limité)
Les champs de formulaires
 Une zone d'édition <input type="text">
• name: définit un nom unique pour cette ressource
• size: nombre de caractères de la zone visible
• maxlength: nombre maximum de caractères
• value: texte par défaut qui apparaît
• readonly: champ en lecture seule
• placeholder: suggestion de saisie qui disparaît lorsque le
champ a le focus (html5)
• autofocus: (html5)
• required: (html5)
• pattern: expression régulière Javascript pour valider
l'entrée (html5)
• width et height: (peut être remplacé par CSS)
Les champs de formulaires
 Une zone d'édition <input type="text">

<body>
<form action=""> Nom: <input type="text"></form>
</body>
Les champs de formulaires
 Les zones d'éditions particulières
 Les mots de passe <input type="password">
<body>
<form action=""> Nom: <input type="password"></form>
</body>

 Les fichiers à transférer <input type="file">


<body>
<form action="" enctype="multipart/form-data">
Nom: <input type="file"></form>
</body>
Les champs de formulaires
 Les zones d'éditions particulières (peu ou pas
implémentées)
 Une adresse mail <input type="email">
Permet de vérifier la validité syntaxique de l'adresse
 Les fichiers à transférer <input type="url">
Permet de vérifier la validité syntaxique de l'adresse
 Sélection d'une couleur <input type="color">
 Zone de recherche <input type="search">
 Sélection d'une date <input type="datetime">
type peut aussi valoir date, month, week
 Sélection d'une heure <input type="time">
L'attribut min fixe l'heure de début, max l'heure de fin
et step l'avancement
Les champs de formulaires
 Une zone de texte <textarea></textarea>
 name: définit un nom unique pour cette ressource
 maxlength: nombre maximum de caractères
 value: texte par défaut qui apparaît
 readonly: champ en lecture seule
 placeholder: suggestion de saisie qui disparaît lorsque le
champ a le focus (html5)
 autofocus: (html5)
 required: (html5)
 cols et rows: (peut être remplacé par CSS)
 wrap: permet de gérer les retours automatiques
Valeur hard (retour transmis avec le texte) ou soft
Les champs de formulaires
 Une zone de texte <textarea></textarea>
<form action="">
Remarques:<br/><br/> <textarea rows="4" cols="20"></textarea>
</form>
Les champs de formulaires
 Une zone de sélection <select></select>
 name: définit un nom unique pour cette ressource
 size: nombre d'éléments visibles. 1 par défaut
 multiple: utilisation de la touche Ctrl
 autofocus
 Les différents items se définissent par le conteneur
<option></option>
 selected: Item par défaut sélectionné
 value: valeur transmise en place du texte de l'item si
cette option est sélectionnée
Les champs de formulaires
 Une zone de sélection <select></select>
<form action="">
Choix de pizza:
<select name="choixpizza">
<option value="pizza1">quatre fromages</option>
<option value="pizza2" selected>Calzone</option>
<option value="pizza3">Napolitaine</option>
</select>
</form>
Les champs de formulaires
 Les boutons radio <input type="radio">
 name: définit un nom unique pour cette ressource
 checked: sélection par défaut de l'élément
 value: texte envoyé si le bouton radio est sélectionné
 autofocus
<form action="">
Sexe:<br/>
<input type="radio"> Masculin <br/>
<input type="radio"> Feminin
</form>
Les champs de formulaires
 Les cases à cocher <input type="checkbox">
 name: définit un nom unique pour cette ressource
 checked: sélection par défaut des éléments
 value: texte envoyé si cette case est cochée
<form action=""> Garniture de votre pizza<br/>
<input type="checkbox" checked> Mozzarela <br/>
<input type="checkbox"> Champigon <br/>
<input type="checkbox"> Olives <br/>
<input type="checkbox"> Poivrons</form>
Les champs de formulaires
 Ligne de texte avec suggestions (firefox)
<datalist></datalist>
Cette liste comprend des options définies par le conteneur
<option></option>
<form action="" method="post">
Choix:<input type="text" list="garniture">
<datalist id="garniture">
<option value="Mozarella"></option>
<option value="Champignon"></option>
<option value="Olives"></option>
</datalist>
</form>
Les champs de formulaires
 Champ numérique <input type="number">
(uniquement google chrome)
 min: valeur minimale du compteur
 max: valeur maximale du compteur
 step: pas d'incrémentation
 value: valeur d'origine
<form action="" method="post">
<input type="number" min="10" max="20" step="2" value="12">
</form>
Les champs de formulaires
 Les curseurs <input type="range">
(uniquement google chrome)
 min: valeur minimale du curseur
 max: valeur maximale du curseur
 step: pas d'incrémentation
 value: valeur d'origine

<form action="" method="post">


<input type="range" min="10" max="20" step="2" value="12">
</form>
Traitement des formulaires
 Le bouton d'envoi <input type="submit">
<form action="">
<p>Formulaire</p>
Nom:<input name="Nom" type="text"><br/>
Email:<input name="email"
type="text"><br/><br/>
<input type="submit">
</form>

 Le bouton de reset <input type="reset">


Traitement des formulaires
 Image réactive pour l'envoi <input type="image">
<form action="">
<p>Formulaire</p>
Nom:<input name="Nom" type="text"><br/>
Email:<input name="email" type="text"><br/><br/>
<input type="image" src="monbouton.jpg" width="100">
</form>
Traitement des formulaires
 Image réactive pour l'envoi <input type="image">
<form action="">
<p>Formulaire</p>
Nom:<input name="Nom" type="text"><br/>
Email:<input name="email" type="text"><br/><br/>
<button class="submit" onclick="submit()"><img
src="monbouton.jpg" width="100px" alt=""></button>
</form>

<style type="text/css" >


.submit {
background:inherit;
border:none; }
</style>
Langage Javascript
 Langage inspiré du langage C et orienté objet
 Utilité du langage
 Rendu dynamique des pages
 Interactivité
 Validation du contenu des formulaires
 Problèmes rencontrés
 Le modèle DOM n'est pas interprété de la même
façon par tous les navigateurs
 Le langage lui-même qui malgré son évolution doit
se limiter à la version 1.2
 Il faut parfois adapté le code pour chaque
navigateur utilisé, voir version utilisée
Langage Javascript
 Intégration dans les pages HTML <script></script>
 Dans n'importe quelle partie de la page
<body>
<script type="text/javascript">
document.write("<p>paragraphe</p>");
</script>
</body>
 Dans l'entête du document
<head><script type="text/javascript">
function Afficher() {
document.write("<p>paragraphe</p>");
}
</script> </head>
<body>
<script type="text/javascript">Afficher(); </script> </body>
Langage Javascript
 Accès aux objets DOM
L'accès aux objets du modèle DOM peut être possible en javascript pour autant
que ceux-ci existent déjà avant leur manipulation.

<script type="text/javascript">
document.getElementById("nom").innerHTML = "Dupond";
</script>
<label>Nom:</label><span id="nom"></span>

Le chargement de la page est séquentiel et l'accès à l'objet identifié par


"nom" ne sera donc pas possible. Un débugage avec Visual Studio et IE
provoquera une erreur.
Un chargement de la page en dehors de cet environnement ne provoquera
pas d'erreur mais l'affichage ne donnera pas le résultat escompté
Langage Javascript
 Accès aux objets DOM
L'accès aux objets du modèle DOM peut être possible en javascript pour autant
que ceux-ci existent déjà avant leur manipulation.

<label>Nom:</label><span id="nom"></span
<script type="text/javascript">
document.getElementById("nom").innerHTML = "Dupond";
</script>

L'objet est accessible et provoque alors l'affichage du bon résultat.


Un aspect négatif du code proposé est le mélange du code HTML et du code
Javascript qu'il vaut mieux dissocier. Il faudrait pour le bien que ce code puisse
s'exécuter uniquement lorsque la page est chargée
Langage Javascript
 Accès aux objets DOM
Nous allons utiliser un événement déclenché lorsque la page a terminé son
chargement. Cet événement sera associé à la balise <body>

<head>
<script type="text/javascript">
function Modifier() {
document.getElementById("nom").innerHTML = "Dupond";
}
</script>
</head>

<body onload="Modifier();">
<label>Nom:</label><span id="nom"></span>
</body>
L'événement provoquera l'exécution de la fonction Modifier(); définie dans le
conteneur d'en-tête.
Langage Javascript
 Accès aux objets DOM
On peut aller plus loin et trouver cette façon de faire intrusive puisque l'appel à
la fonction est malgré tout encore inséré dans la balise <body> elle même.

<head>
<script type="text/javascript">
window.addEventListener("load", function () {
document.getElementById("nom").innerHTML = "Dupond";
},false);
</script>
</head>

<body>
<label>Nom:</label><span id="nom"></span>
</body>
Langage Javascript
 Accès aux objets DOM
L'événement load attend que toute la page soit chargée, y compris toutes les
ressources dont les images. Une page lourde retarde alors les traitements
javascript. On peut agir sur le DOM dès que celui ci est chargé

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("nom").innerHTML = "Dupond";
});
</script>

DOMContentLoaded sera déclenché lorsque le document sera chargé ET parsé

Attention: cet événement n'est géré qu'avec des navigateurs récents


Langage Javascript
 Accès aux objets DOM
 En respectant l'imbrication des conteneurs
<script type="text/javascript">
function modifier() {
window.document.forms[0].elements[0].value="au revoir";
}</script>

 En utilisant des méthodes spécifiques:


getElementByID, getElementsByName,
getElementsByTagName
<script type="text/javascript">
function trouver(){
document.getElementById("test").value="au revoir";
}</script>
Langage Javascript
 Les objets du navigateur
Langage Javascript
 L'objet window - Les propriétés
 closed: indique que la fenêtre a été fermée
 defaultStatus: indique le message par défaut dans la
barre de status
 document: retourne l'objet document de la fenêtre
 frames: retourne la collection de cadres dans la fenêtre
 history: retourne l'historique de la session de navigation
 location: retourne l'adresse actuellement visitée
 name: indique le nom de la fenêtre
Langage Javascript
 L'objet window - Les propriétés
 navigator: retourne le navigateur utilisé
 opener: retourne l'objet window qui a créé la fenêtre en
cours
 parent: retourne l'objet window immédiatement
supérieur dans la hiérarchie
 self: retourne l'objet window correspondant à la fenêtre
en cours
 status: indique le message affiché dans la barre de status
 top: retourne l'objet window le plus haut dans la
hiérarchie
Langage Javascript
 L'objet window - Les méthodes
 blur( ): enlève le focus de la fenêtre
 close( ): ferme la fenêtre
 focus( ): place le focus sur la fenêtre
 moveBy( ): déplace d'une distance
 moveTo( ): déplace la fenêtre vers un point spécifié
 open( ): ouvre une nouvelle fenêtre
 print( ): imprime le contenu de la fenêtre
 resizeBy( ): redimensionne d'un certain rapport
 resizeTo( ): redimensionne la fenêtre
 setTimeout( ): évalue une chaîne de caractère après un
certain laps de temps
Langage Javascript
 L'objet document - Les propriétés
 applets: retourne la collection d'applets java présente
dans le document
 cookie: permet de stocker un cookie
 domain: indique le nom de domaine du serveur ayant
apporté le document
 forms: retourne la collection de formulaires présents
dans le document
 images: retourne la collection d'images présentes dans
le document
 links: retourne la collection de liens présents dans le
document
Langage Javascript
 L'objet document - Les propriétés
 referrer: indique l'adresse de la page précédente
 title: indique le titre du document
 L'objet document - Les méthodes
 close( ): ferme le document en écriture
 open( ): ouvre le document en écriture
 write( ): écrit dans le document
 writeln( ): écrit dans le document et effectue un retour à
la ligne
Langage Javascript
 L'objet navigator - Les propriétés
 appName: application
 appVersion: numéro de version.
 platform: système d’exploitation (Win32)
 plugins
 language
 mimeTypes
Langage Javascript
 Les événements
Arrêt du chargement de l'image. Objets : image
onabort Balises: img

onblur perte du Focus. Objets : form, window, frame


Balises : input, textarea, select,
body, frame, frameset

onchange changement du contenu. Objets: form


Balises: input, textarea,select

onclick clique. Objets: link,document, form


Balises: a, body,area

ondlclick double clique. Objets: link, document,area


Balises: a, body, area

ondragdrop Déplacement d'un objet dans une


fenêtre.
Objets: window, frame
Balises: body, frame
Langage Javascript
 Les événements
onerror lorsqu'il se produit une erreur de
script.
Objet: image, window
Balises: img, body

onfocus quand un élément prend le focus. Objet: window, form


Balises: body, input

onkeydown touche du clavier est enfoncée. Objet: link, image, document,


form
Balises: a, img, body, textarea

onkeypress touche appuyée. Objet: link, image, document,


form
Balises: a, img, body, textarea

onkeyup quand on lâche une touche du


clavier.
Objet: link, image, document,
form
Balises: a, img, body, textarea

onload lors du chargement. Objet: image, window


img, body
Langage Javascript
 Les événements
onmousedown quand le bouton de la sourie est
appuyé.
Objet: link, document, form
Balises: a, body, form

onmousemove quand le curseur bouge. Objet: link, document, form


Balises: a, body, form

onmouseout quand le curseur sort de l'objet. Objet: link, area


Balises: a, area

onmouseover quand le curseur passe au-dessus de Objet: link, area


l'objet Balises: a, area

onmouseup quand le bouton de la sourie est


relâché.
Objet: link, document, form
Balises: a, body, input

onmove quand on déplace la fenêtre. Objet: window


Balises: body

onreset quand on réinitialise. Objet: form


Balises: form
Langage Javascript
 Les événements
onresize quand on redimensionne. Objet: window
Balises: body

onselect quand on sélectionne. Objet: form


Balises: input, textarea

onsubmit quand on envoie un formulaire. Objet: form


Balises: form

onunload quand on ferme la fenêtre. Objet: window


Balises HTML : body
Langage Javascript
 Les événements
Exemple de gestion d'aide à l'introduction
<script type="text/javascript">
function Effacer(MonElement)
{
MonElement.value="";
MonElement.style.color="black";
}
</script>

<body>
<form>
Nom:<input type="text" id="Nom" value="Introduire le
nom" style="color:lightgray" onfocus="Effacer(this)">
</form>
</body>
Langage Javascript
 Les événements
Affichage avant le focus

Après le focus et l'encodage

La zone de texte s'efface et le contenu peut être encodé en


couleur noire
Langage Javascript
 Les variables
 Le mot-clé var permet de déclarer une ou plusieurs
variables.
 Après la déclaration de la variable, il est possible de
lui affecter une valeur par l'intermédiaire du signe
d'égalité (=).
 Si une valeur est affectée à une variable sans que
cette dernière ne soit déclarée, alors Javascript la
déclare automatiquement.
 Une variable déclarée dans une fonction est locale à
la fonction. Si elle est déclarée en dehors de toute
fonction, elle est globale.
Langage Javascript
 Les variables (suite)
Javascript supporte cinq types différents de variables:
 Number: variable numérique telle que 13, 22.5, ou
3.14159
 String: variable contenant n'importe quel groupe de
caractères tel que “Hello” or “Happy Holidays!”
 Boolean: variables qui acceptent la valeur true ou false
 Null: variable qui a la valeur null
 Undifined: variable dont le contenu n'a pas été défini
Langage Javascript
 Les variables - Fonctions prédéfinies
 isFinite: détermine si le paramètre est un nombre fini.
Renvoie false si ce n'est pas un nombre ou l'infini positif
ou infini négatif.
 isNaN: détermine si le paramètre n’est pas un nombre
(NaN : Not a Number).
 parseFloat: convertit une chaîne de caractères en un
nombre décimal. Si l'argument évalué n'est pas un
nombre, renvoie NaN (Not a Number).
 parseInt: convertit une chaîne de caractères en un
nombre entier de la base spécifiée. La base peut prendre
les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2
(binaire).
Langage Javascript
 Les variables - Fonctions prédéfinies
 Number: convertit l'objet spécifié en valeur numérique
 String: convertit l'objet spécifié en chaîne de caractères
 Escape: retourne la valeur hexadécimale à partir d'une
chaîne de caractère codée en ISO-Latin-1
Langage Javascript
 L'objet String - Les propriétés
 length: retourne la longueur de la chaîne de caractères

 L'objet String - Les propriétés


 charAt( ): renvoie le caractère se trouvant à une
certaine position
 indexOf(): renvoie la position d'une chaîne partielle
 concat( ): permet de concaténer 2 chaînes de caractères
 indexOf( ): permet de trouver l'indice d'occurrence d'un
caractère dans une chaîne
 lastIndexOf( ): permet de trouver le dernier indice
d'occurrence d'un caractère
Langage Javascript
 L'objet String (suite) - Les méthodes
 subString(x,y): retourne une portion de la chaîne
 toLowerCase(): permet de passer toute la chaîne en
minuscule
 toUpperCase(): permet de passer toute la chaîne en
majuscules
Langage Javascript
 L'objet String (suite) - Les méthodes
 subString(x,y): retourne une portion de la chaîne
 toLowerCase(): permet de passer toute la chaîne en
minuscule
 toUpperCase(): permet de passer toute la chaîne en
majuscules
Langage Javascript
 L'objet Array – Les propriétés
 length: retourne le nombre d'éléments dans le tableau

 L'objet Array – Les méthodes


 concat(): permet de concaténer 2 tableaux
 join(): converti un tableau en chaîne de caractères
 reverse(): inverse le classement des éléments du tableau
 slice(): retourne une section du tableau
 sort(): permet le classement des éléments du tableau
Langage Javascript
 L'objet Array – Les méthodes
 pop(): supprime le dernier élément du tableau et
retourne sa valeur
 shift(): supprime le premier élément du tableau et
retourne sa valeur

 La syntaxe pour déclarer un tableau:


var variable = new Array(size);
variable est le nom du tabeau
size est la taille du tableau (optionnelle)

 L'accès au tableau
variable[i]=value; //i est l'index basé 0
Langage Javascript
 Accès aux objets DOM
<body>
<form>
<input type="text" id="test" value="bonjour">
<input type="button" onclick="Modifier()" value="Modifier">
</form>
</body>
Langage Javascript
 Les expressions régulières RegExp
function validmail(){
var emailaddr=document.getElementById("mail").value;
var mailexp="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-
9]{2,4})+$";
var expr=new RegExp(mailexp,"i");
if (!expr.test(emailaddr))
{
alert("email invalide");
}
}
Langage Javascript
 Les expressions régulières (autre forme)
function validmail() {
var emailaddr=document.getElementById("mail").value;
var mailexp=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-
9]{2,4})+$;
if (!mailexp.test(emailaddr))
{
alert("email invalide");
}
}
Javascript - Exemple
 Vérifier si un champ est rempli
function valide(){
var champ=document.getElementById("mail").value;
if (champ.length==0)
{
alert("email absent");
}
}
Javascript - Exemple
 Vérifier si un champ est numérique
function valide()
{
var champ=document.getElementById("quantite").value;
if (isNaN(champ))
{
alert("valeur numérique requise");
}
}
Javascript - Canvas (html5)
 Implémentation
<body>
<canvas id="zone2d" width="200px" height="100px"
style="border:1px solid black">Non supporté</canvas>
<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.fillStyle="red";
contexte.fillRect(10,10,80,80);
</script>
Javascript - Canvas (html5)
 Implémentation - partie HTML
<body>
<canvas id="zone2d" width="200px" height="100px"
style="border:1px solid black">Non supporté</canvas>

 Appel à l'API de dessin 2D


<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.fillStyle="red";
contexte.fillRect(10,10,80,80);
</script>
Javascript - Canvas (html5)
 Implémentation - partie HTML
<body>
<canvas id="zone2d" width="200px" height="100px"
style="border:1px solid black">Non supporté</canvas>

 Appel à l'API de dessin 2D


<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.fillStyle="red";
contexte.fillRect(10,10,80,80);
</script>
Javascript - Canvas (html5)
 Dessiner une ligne
context.lineWidth [= value]: définir ou obtenir la largeur d'une ligne
context.lineCap [= value]: définir ou obtenir le type d'extrémité de ligne
Les styles possibles sont butt, round, and square
context.lineJoin [= value]: définir ou obtenir le type de jointure entre deux
lignes. Les styles possibles sont bevel, round, and miter
context.miterLimit [= value]
context.beginPath(): reset du path courant
context.moveTo(x, y): déplace le stylo virtuel vers la coordonnée (nouveau
subpath)
context.closePath()
context.lineTo(x, y): déplace le stylo de la position courante vers la nouvelle
coordonnée en dessinant une droite

Un path est un ensemble de subpath eux mêmes consistués de points,


droites, courbes.
Javascript - Canvas (html5)
 Dessiner une ligne
<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.beginPath();
Contexte.fillStyle="red";
contexte.moveTo(25,25);
contexte.lineTo(105,25);
contexte.lineTo(25,105);
contexte.fill(); //remplir la forme
contexte.beginPath();
contexte.moveTo(125,125);
contexte.lineTo(125,45);
contexte.lineTo(45,125);
contexte.closePath();
contexte.stroke(); //dessiner le contenu
</script>
Javascript - Canvas (html5)
 Dessiner une ligne
<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.beginPath();
contexte.lineWidth=10;
contexte.moveTo(20,20);
contexte.lineCap="butt";
contexte.lineTo(20,125);
contexte.moveTo(50,20);
contexte.lineCap="round";
contexte.lineTo(50,125);
contexte.moveTo(80,20);
contexte.lineCap="round";
contexte.lineTo(80,125);
contexte.closePath();
contexte.stroke();
</script>
Javascript - Canvas (html5)
 Dessiner une rectangle
context.clearRect(x, y, w, h): rend les pixels transparents dans la zone définie
context.fillRect(x, y, w, h): remplit un rectangle avec la couleur courante
définie
context.strokeRect(x, y, w, h): dessine le bord du rectangle avec la couleur
courante définie
Javascript - Canvas (html5)
 Dessiner une rectangle
<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.fillStyle="#FFA500";
contexte.fillRect(10,10,100,40);
contexte.strokeRect(20,20,110,50);
contexte.fillStyle="#00FFA5";
contexte.fillRect(30,30,120,60);
</script>
Javascript - Canvas (html5)
 Ajouter une image
context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Javascript - Canvas (html5)
 Ajouter une image
<html> <head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script type="text/javascript">
function dessin() {
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
var MyImg = new Image();
MyImg.src = "image.jpg";
MyImg.onload = function(){
contexte.drawImage(MyImg, 10, 10); };
} </script> </head>
<body onload="dessin()">
<canvas id="zone2d" width="300" height="300"style="border:1px solid
black">Non supporté</canvas>
</body></html>
Javascript - Canvas (html5)
 Ajouter une image
//préchargement de l'image en Javascript
var MyImg = new Image();
MyImg.src = "image.jpg";
//gestion de l'événement du chargement terminé
MyImg.onload = function(){
contexte.drawImage(MyImg, 10, 10); };
} </script> </head>
//dessin() doit être appelée au chargement de la page
<body onload="dessin()">
<canvas id="zone2d" width="300" height="300"style="border:1px solid
black">Non supporté</canvas>
</body></html>
Javascript - Canvas (html5)
 Ajouter une image
Javascript - Canvas (html5)
 Ajouter une autre forme
context.quadraticCurveTo(cpx, cpy, x, y)
context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.arcTo(x1, y1, x2, y2, radius)
context.arc(x, y, radius, startAngle, endAngle [,anticlockwise ])
 Bezier Curve
Javascript - Canvas (html5)
 Quadratic Curve
Javascript - Canvas (html5)
 Ajouter du texte
context.font[= value]: syntaxe identique aux css
context.textAlign[= value]: start (par défaut), end, left, right, et center.
context.textBaseline[= value]: top, middle, alphabetic et bottom
context.fillText(text, x, y [, maxWidth ])
context.strokeText(text, x, y [, maxWidth ])
metrics = context.measureText(text)
metrics.width
Javascript - Canvas (html5)
 Ajouter de l'ombre
context.shadowColor[= value]
context.shadowOffsetX[= value]
context.shadowOffsetY[= value]
context.shadowBlur[= value]

<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.shadowOffsetX=5;
contexte.shadowOffsetY=5;
contexte.shadowBlur=5;
contexte.shadowColor="black";
contexte.font='30px "new roman" bold';
contexte.strokeText("HELHA",30,30);
</script>
Javascript - Canvas (html5)
 Les transformations
context.scale(x, y)
context.rotate(angle)
context.translate(x, y)
context.transform(a, b, c, d, e, f)
context.setTransform(a, b, c, d, e, f)
 Ajouter de l'ombre
<script type="text/javascript">
var canvas=document.getElementById("zone2d");
var contexte=canvas.getContext("2d");
contexte.shadowOffsetX=5;
contexte.shadowOffsetY=5;
contexte.shadowBlur=5;
contexte.shadowColor="black";
contexte.font='30px "new roman" bold';
Contexte.rotate(3.14/4);
contexte.strokeText("HELHA",50,10);
</script>
Javascript - Jquery
Jquery est une librairie Javascript. Elle va nous aider à manipuler ,entre autres,
le modèle DOM sans devoir se préocuper des compatibilités ( ou
incompatibilités) entre navigateurs et versions de navigateur.
Grâce à l'encapsulation de certains objets, Jquery simplifie la syntaxe. Ce sera
notamment le cas dans la mise en oeuvre de la technologie AJAX.

Prenons comme exemple la méthode getElementsByClassName. Cette méthode


permet d'obtenir tous les objets identifiés par leur attribut class identique. Cette
méthode de l'objet document n'est disponible pour le navigateur IE qu'à partir
de la version 9

Nous prendrons comme exemple, le changement de la couleur de fond de


l'ensemble des objets ayant une classe donnée comme attribut
Javascript - Jquery
 Insertion de Jquery
Jquery étant une bibliothèque javascript, il faudra insérer les liens dans notre page
pour pouvoir manipuler les différents objets Jquery.
Visual studio offre la gestion des packages Nuget qui facilitera le travail
Javascript - Jquery
 Insertion de Jquery
Une fois le package Jquery installé, nous pouvons insérer un lien dans notre page
HTML

<script src="Scripts/jquery-2.1.1.min.js"></script>

Nous retrouverons une version jquery-xxxx.js et jquery-xxxx.min.js Ces deux


versions ont une fonctionnalité identique, la version min étant plus légère du fait
que l'ensemble des commentaires et espaces blancs ont été supprimés. La
version complète est mieux lisible.
Javascript - Jquery
 Utilisation d'un code javascript
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var elements = document.getElementsByClassName("identite");
for (var i = 0; i < elements.length; i++) {
var elmt = elements[i];
elmt.style.color = "red";
}
});
</script>

<body>
<label class="identite">Nom:</label><br />
<label class="identite">Prenom:</label>
</body>
Javascript - Jquery
 Utilisation d'un code javascript - problèmes
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var elements = document.getElementsByClassName("identite");
for (var i = 0; i < elements.length; i++) {
var elmt = elements[i];
elmt.style.color = "red";
}
});
</script>

• Compatibilite avec les navigateurs et leurs versions (exemples):


• document.addEventListener
• DOMContentLoaded
• getElementsByClassName
• Lourdeur de la syntaxe à mettre en place
Javascript - Jquery
 Utilisation du Jquery
<script type="text/javascript">
$(document).ready(function () {
$(".identite").css("color", "red");
});
</script>

Jquery se charge de tester si le navigateur cible supporte la méthode native qui


sera utilisée de préférence car en général plus performante. Dans le cas
contraire, un code externe est utilisé. De plus, en fonction de la version du
navigateur, Jquery tient compte également d'éventuels bugs connus de celui-ci
pour pouvoir les contourner.
Javascript - Jquery
 Les événements
Nous allons reprendre un exemple précédent où nous prenons en charge la
gestion d'un clic sur un bouton. Nous aborderons de nouveau l'ensemble des
solutions, qu'elles soient en Javascript pur ou en utilisant la bibliothèque Jquery

<body>
<form>
<input type="text" id="test" value="bonjour">
<input type="button" onclick="Modifier()" value="Modifier">
</form>
</body>

<script type="text/javascript">
function Modifier() {
document.getElementById("test").value = "Au revoir";
}
</script>
Javascript - Jquery
 Les événements
Une première démarche déjà aborder dans le cadre du DOM est d'envisager une
méthode non invasive du javascript grâce au code suivant

<form>
<input type="text" id="test" value="bonjour">
<input type="button" id="Modifier" value="Modifier">
</form>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
var BtModif = document.getElementById("Modifier");
BtModif.addEventListener("click", function () {
document.getElementById("test").value = "Au revoir";
});
});
</script>
Javascript - Jquery
 Les événements
Une première démarche déjà abordée dans le cadre du DOM est d'envisager une
méthode non invasive du javascript grâce au code suivant

<form>
<input type="text" id="test" value="bonjour">
<input type="button" id="Modifier" value="Modifier">
</form>

<script type="text/javascript">
$(document).ready (function () {
$("#Modifier").on("click", function () {
$("#test").val("Au revoir");
});
});
</script>
Javascript - Jquery
 Les événements
La méthode on permet de s'abonner à un événement, la méthode off permettant
de se désabonner tandis que la méthode one sera associé à un événement géré
une seule fois
Javascript - Jquery
 Les tailles
Jquery
 Les sélecteurs Jquery
A l'image des syntaxes utilisées dans les css, nous retrouverons pour Jquery les
sélecteurs suivants:

• Sélecteur d'éléments d'un type donné. La syntaxe suivante permet d'accéder


à l'ensemble des objets de type div: $("div")
• Sélecteur d'un élément avec l'id. La syntaxe suivante permet de sélectionner
l'objet dont l'id est test: $("#test")
• Sélecteur d'élément d'une classe donnée. La syntaxe suivante permet de
sélectionner les objets dont la classe associée est test: $(".test")

La liste des sélecteurs est longue, vous pouvez en trouver un descriptif complet
sur le site http://www.w3schools.com/jquery/jquery_ref_selectors.asp
Jquery
 Accès au contenu et aux attributs
• text() - Permet de définir ou de récupérer le contenu texte de l'élément
sélectionné. (Equivalent à innerText en JavaScript)
• html() - Permet de définir ou de récupérer le contenu HTMl d'un élément.
(Equivalent à innerHTML en JavaScript)
• val() - Permet de définir ou de retourner l'attribur value d'un élément dans un
formulaire.

Exemple d'accès en écriture à l'attribut value:

$("#Content").val("identification non trouvée");

Exemple d'accès en lecture à l'attribut value d'un élément sélectionné:

var data=$("#Content").val();
Jquery
 Manipulation des classes et css
• addClass() - Ajouter une ou plusieurs classes aux éléments sélectionnés.
• removeClass() - Enlever une ou plusieurs classes aux éléments sélectionnés.
• toggleClass() -Basculer entre une classe enlevée et une classe ajoutée
• css() - Permet de définir ou de récupérer la valeur associée à un style.

Exemple d'accès à css() en écriture:

$("#Content").css("color","red");
Jquery
 Les animations - La visibilité
• $(selector).hide(speed,callback);
• $(selector).show(speed,callback);
• $(selector).toggle(speed,callback);

Nous retrouvons cette même possibilité en Javascript en jouant avec la


propriété CSS visibilité ou display.
Jquery
 Les animations - La visibilité
<div class="panel">
<div> Première zone d'information</div>
<div> Lorem ipsum dolor sit amet.... </div>
</div>
<div class="panel">
<div> Deuxième zone d'information</div>
<div> Lorem ipsum dolor sit amet.... </div>
</div>

En utilisant les CSS, nous ferons en sorte que le dernier bloc div enfant soit
caché en utilisant l'attribut hidden:none
Jquery
 Les animations - La visibilité
<style>
.panel div {
width:600px;
border:1px gray solid;
background-color:#BBBBBB;
}
.panel div:last-child {
display:none;
background-color:#EEEEEE;
}
</style>

Lors d'un clic de souris sur un des panel, le dernier bloc div enfant doit s'afficher.
Nous utiliserons la fonction Toggle de Jquery
Jquery
 Les animations - La visibilité
<script>
$(document).ready(function () {
$(".panel").on("click", function () {
$(this).children().last().toggle();
});
});
</script>
Jquery
 Les animations - Fondue enchaînée
• $(selector).fadeIn(speed,callback);
• $(selector).fadeOut(speed,callback);
• $(selector).fadeToggle(speed,callback);
• $(selector).fadeTo(speed,opacity,callback);

Nous reprenons l'exemple précédent et nous remplaçons la méthode Toggle()


par la méthode fadeToggle(). Cette méthode permet de rendre l'affichage du
texte progressif

<script>
$(document).ready(function () {
$(".panel").on("click", function () {
$(this).children().last().fadeToggle("slow");
});
});
</script>
Jquery
 Les animations - Effet déroulant
• $(selector).slideDown(speed,callback);
• $(selector).slideUp(speed,callback);
• $(selector).slideToggle(speed,callback);

Nous reprenons l'exemple précédent et nous remplaçons la méthode


fadeToggle() par la méthode slideToggle(). Cette méthode permet un affichage
avec un effet déroulant

<script>
$(document).ready(function () {
$(".panel").on("click", function () {
$(this).children().last().slideToggle("slow");
});
});
</script>
Jquery
 Les animations
• $(selector).animate({params},speed,callback);
• $(selector).stop(stopAll,goToEnd);

$("button").on("click", function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
Jquery
 Ajout, suppression d'éléments
• $(selector).append();
• $(selector).prepend();
• $(selector).after();
• $(selector).before();

Nous allons prendre l'exemple d'un diaporama utilisant une animation ainsi que
l'ajout d'un élément en fin de conteneur
Jquery
 Ajout, suppression d'éléments

Le clic sur le bouton provoquera le passage à l'image suivante avec un effet de


rotation vers la gauche.
Jquery
 Ajout, suppression d'éléments
<div id="content">
<table>
<tr>
<td><img src="Images/image1.JPG" /></td>
<td><img src="Images/image2.JPG" /></td>
<td><img src="Images/image3.JPG" /></td>
<td><img src="Images/image4.JPG" /></td>
</tr>
</table>
</div><br /><br/>
<input type="button" onclick="change();" value="Move" />
Jquery
 Ajout, suppression d'éléments
<style>
img {
width:300px;
height:300px;
margin:0;
padding:0; }
#content {
height:300px;
width:300px;
overflow:hidden; }
#content table {
border-spacing: 0;
border-collapse: collapse; }
#content td {
padding:0;
margin:0; }
</style>
Jquery
 Ajout, suppression d'éléments
<script>
function change() {
$("#content table").animate({marginLeft:'-=300px'},800,
function () {
$("#content table").css("margin-left", "0px");
$("#content table tr").append($("#content table tr").children().first());

});

}
</script>
Javascript - Jquery
 Gestion des cookies
Un cookie est un petit fichier texte qui est stocké par le navigateur sur la machine
de l'utilisateur. Les cookies sont de texte brut; ils ne contiennent pas de code
exécutable.

Un cookie peut être envoyé par le serveur et stocké chez le client ou alors créé
par code javascript. Les cookies sont envoyés dans l'en-tête du protocole HTTP
lors de chaque requête effectuée par le navigateur vers le serveur.

Voici la syntaxe utisée dans l'entête lors de l'envoi par le serveur:

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

S'il existe plusieurs cookies pour la requête donnée, alors ils sont séparés par un
point-virgule et de l'espace, tels que:

Cookie: value1; value2; name1=value1


Javascript - Jquery
 Gestion des cookies
Sous Javascript, nous pouvons écrire deux fonctions permettant d'enregistrer ou
de lire un cookie. Effecer un cookie consiste à lui donner une date antérieure à la
date actuelle.

function getCookie(NameOfCookie) {
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1) {
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end)); }
}
return null; }
Javascript - Jquery
 Gestion des cookies
function setCookie(NameOfCookie, value, expiredays){
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) +
((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}

function delCookie (NameOfCookie) {


if (getCookie(NameOfCookie)) {
document.cookie = NameOfCookie + "=" +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}}
Javascript - Jquery
 Exemple

Nous allons mettre en place une page dans laquelle, si un cookie particulier est
trouvé, sa valeur est affichée tandis que si aucun cookie n'est trouvé, le message
arrapaîtra tel que repris dans la copie d'écran

Une autre textbox permettra de définir le cookie et de la sauver


Javascript - Jquery
 Exemple
<body onload="Read();">
<label>Cookie lu</label><input type="text" id="CookieContent" /><br />
<label>Nouveau Cookie</label><input type="text" id="NewCookie" /> <input
type="button" onclick="Save();" value="Sauver le cookie" />
</body>

function Save() {
var value = document.getElementById("NewCookie").value;
setCookie("test", value, 0); }

function Read() {
var value = getCookie("test");
var element = document.getElementById("CookieContent");
if (value == null) {
element.value = "Cookie non trouvé";
element.style.color = "red"; } else {
element.value = value; }
}
Javascript - Jquery
 Exemple - Jquery
L'utilisation des cookie sous Jquery nécessite l'utilisation d'un plugin
supplémentaire

<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/jquery.cookie.js"></script>

function Save() {
$.cookie("test", $("#NewCookie").val(), { expires: 1 } );}

function Read() {
var value = $.cookie("test");
if (value == null) {
$("#CookieContent").val("Cookie non trouvé");
$("#CookieContent").css("color","red"); } else {
$("#CookieContent").val(value);
}
}
Javascript - Jquery
 Localstorage - sessionstorage
Les cookies présentent certains désavantages:

Une taille limitée: 4ko


A chaque requête vers le serveur, le contenu des cookies est envoyé, ce qui peut
être gênant en terme de bande passante pour les appareils mobiles disposant de
peu de bande passante. Nous pouvons également aborder l'aspect sécuritaire des
données personnelles à chaque fois transmises

Une API de stockage a donc été prévue dans l'HTML5.

La taille disponible est de 5 à 10 Mo


Les données sont stockées localement et ne sont pas transmises à chaque
requête de façon automatique. Elles peuvent l'être ensuite avec AJAX
Javascript - Jquery
 Localstorage
localstorage.setItem("key1","value1");
var value=localstorage.getItem("key1");

localStorage["key1"]="value1";
var value=localStorage["key1"];

localStorage.clear();

Il est possible de vérifier la compatibilité du navigateur avec cet API en utilisant le


code suivant:

if (window["localStorage"]) { // code }
Javascript - Jquery
 sessionstorage
localstorage permet de sauverder de façon continue les données tandis qu' avec
sessionstotage, les données stockées seront supprimées à la fin de la session et
ce, de façon automatique
Javascript - Jquery
 indexeddb
IndexedDB est une API pour le stockage côté client de données structurées, ce qui
permet également des recherches de haute performance de ces données en
utilisant des index. Attention car cette API n'est supportée que dans les toutes
dernières versions des navigateurs

IndexdDB repose sur deux API permettant d'envisager pour l'une les accès
synchrone et pour l'autre les accès asynchrone. Les caractéristiques non
bloquantes des API asynchrones font que c'est sans doute le choix le meilleur
Javascript - Jquery
 indexeddb - accès
window.indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||
window.msIDBKeyRange;
if(!window.indexedDB) { console.log("indexdDB non supporté"); }

Une fois la vérification effectuée sur le support possible du navigateur, nous


pouvons ouvrir la base de données. Utilisant la méthode asynchrone, indexDB
offre les événements du DOM pour avertir l'utilisateur si la base de données a pu
être ouverte ou pas
Javascript - Jquery
 indexeddb - ouverture
var Mydb;
function openDb() {
var req = indexedDB.open("testdb", 1);
req.onsuccess = function (evt) {
Mydb = this.result; };

req.onerror = function (evt) {


alert("openDb:", evt.target.errorCode); };

req.onupgradeneeded = function (evt) { //....};


}

onupgradeneeded sera appelé lorsque la page Web est accédée pour la première
fois sur le navigateur Web ou si il ya une mise à jour de la version. Par
conséquent, nous ne devrons créer les magasins d'objets (ObjectStores) que dans
la fonction associée à cet événement
Javascript - Jquery
 indexeddb - création des magasins (objectstores)
IndexedDB peut contenir un ou plusieurs magasin, un magasion pouvant être
comparé à une table dans une db. Nous utiliserons la fonction createObjectStore
du IndexedDB pour créer ces magasins. La fonction reçoit un nom pour cet objet,
et des options comme une clef d'index correspondant à une des clefs de vos
données (avec valeurs uniques) ou un champ additionnel avec l'utilisation d'un
générateur de clés.

req.onupgradeneeded = function (evt) { //....};


Feuilles de style CSS3
 Introduction
 Les bords arrondis
 Les bordures imagées
 Les ombres
 Les polices personnalisées
 Les arrières plan multiples
 Les dégradés de couleur
 L'opacité et la transparence
 Les colonnes multiples
 Les transformations
 Les transitions
Feuilles de style CSS3
 Les bords arrondis
#Arrondi
{
border-radius:1em;
text-align:center;
border:1px black solid;
background-color:aqua;
width:100px;
}

<body>
<div id="Arrondi">HELHA</div>
</body>
Feuilles de style CSS3
 Les bords arrondis
#Arrondi
{
border-radius:50px;
text-align:center;
border:1px black solid;
background-color:aqua;
width:100px;
height:100px;
line-height:100px;
}
<body>
<div id="Arrondi">HELHA</div>
</body>
Feuilles de style CSS3
 Les bordures imagées

• Image de 81x81 pixels


• Image découpée en 9 parties
#Arrondi {
width:12em;
height:5em;
border-width:1em;
border-image:url('border.png') 27 round round;
-webkit-border-image: url('border.png') 27 round round;
-moz-border-image: url('border.png') 27 round round; }
Feuilles de style CSS3
 Les ombres – texte
.ombrage
{
text-shadow: 2px 2px 4px grey; }
<body>
<div class="ombrage"><h1>HELHA</h1></div>
</body>

 Les ombres - boîtes


.ombrage {
box-shadow: 2px 2px 5px #FFA0A0;
-moz-box-shadow: 2px 2px 5px #FFA0A0;
-webkit-box-shadow: 2px 2px 5px #FFA0A0;
border: 3px red solid;
width:200px; height:50px;
text-align:center; }
Feuilles de style CSS3
 Les polices personnalisées

@font-face {
font-family:"MaPolice";
src:url('rage.ttf');
}

.MaPolice
{
font-family: MaPolice;
}

<body>
<div
class="MaPolice"><h1>HELHA</h1></div>
</body>
Feuilles de style CSS3
 Les arrières plan multiples - background
Propriétés Description
background-color Couleur de fond à utiliser
background-position Position de l'image de fond left|right|center + top|
center|bottom
background-size Taille de l'image de fond
background-repeat Spécifie si l'image doit être répétée: repeat-x|repeat-
y|no-repeat
background-origin padding-box|border-box|content-box
background-clip padding-box|border-box|content-box
background-attachment Spécifie si l'image est fixe ou se déplace avec la page
background-image Spécifie une ou plusieurs images de fond
Feuilles de style CSS3
 Les arrières plan multiples - background

html,body {
height:100%;
padding-left:30px;
}

body{
background:url('flore1.png') top left no-
repeat,
url('flore3.png') bottom right no-repeat; }
Feuilles de style CSS3
 L'opacité et la transparence
.comment{
position:absolute;
border:thin bisque solid;
top:180px;
left:40px;
opacity:0.5;
background-color:#FFFFFF;
font-size:large;
}
.image{

position:absolute;
top:0px;
left:0px;
}
Feuilles de style CSS3
 Les colonnes multiples
Feuilles de style CSS3
 Les transformations – transform
• Les différentes valeurs sont:
translate(x,y), translateX(n), translateY(n), scale(x,y), scaleX(n),
scaleY(n), rotate(angle), skew(x-angle,y-angle), skewX(angle),
skewY(angle), matrix(n,n,n,n,n,n)
.rotate {
position:relative;
top:50px;left:30px;
line-height:80px;
border:thin black solid;
text-align:center;
width:200px;height:80px;background-color:azure;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */ }
Feuilles de style CSS3
 Les transformations – transform
Feuilles de style CSS3
 Les tailles

Par défaut, comme vu précédemment, la largeur correspond au contenu. EN


CSS3, nous pouvons utiliser l'attribut box-sizing dont les différentes valeurs sont
les suivantes:
• content-box: valeur par défaut comme repris dans le dessin ci dessus
•border-box: indiquant que la largeur inclut le padding et le bord mais pas le
margin
• padding-box (experimental): le contenu et le padding mais pas le bord, ni le
margin
Feuilles de style CSS3
 Les tailles - Compatibilité
Ajax et Javascript
 Ajax est l'acronyme de Asynchronous JavaScript
and XML
La mise à jour d'une page nécessitait avant le rechargement complet
de la page de façon synchrone.

L'Ajax permet l'envoi asynchrone d'une demande vers un script pour


obtenir des données au format texte ou XML. Ces données
permettront des mises à jour ciblées d'object sur la page Web grâce au
Javascript et les objets DOM manipulables

 Création d'un objet XMLHttpRequest


• Les navigateurs modernes implémentent TOUS un objet
xmlhttp=new XMLHttpRequest();

• Les navigateurs IE antérieurs à la version 7 utilisaient un actixex


xmlhttp=new ActiveXObject(" MSXML2.XMLHTTP.6.0 ");
ou xmlhttp=new ActiveXObject(" MSXML2.XMLHTTP");
Ajax et Javascript
 Création d'un objet XMLHttpRequest
Pour assurer une compatibilté pour les différentsnavigateurs

function AjaxRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); }
else {
try{
xmlhttp = new ActiveXObject("MSXML2.XMLHTTP.6.0");}
catch(e){}
try{
if(! xmlhttp)
xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); }
catch(e){}
}
return xmlhttp; }
Ajax et Javascript
 Fonction de CallBack
Cette fonction sera appelée lorsque les données seront récupérées.

function ajaxget(){
var myreq=new ajaxRequest();
myreq.onreadystatechange=function(){
if (myreq.readyState==4 && myreq.status==200 ){
document.getElementById("result").innerHTML =
myreq.responseText; }
else {
alert("An error has occured making the request"); }
}
// suite du code .... }
Ajax et Javascript
 Récupération des données via une URL
 Utilisation de la méthode GET
var userId =
encodeURIComponent(document.getElementById("userId").value);
var passwd =
encodeURIComponent(document.getElementById("passwd").value);
myreq.open("GET", "http://localhost/login.aspx?
userId="+userId+"&passwd="+passwd, true); myreq.send(null);
Ajax et Javascript
 Récupération des données via une URL
 Utilisation de la méthode POST
var userId =
encodeURIComponent(document.getElementById("userId").value);
var passwd =
encodeURIComponent(document.getElementById("passwd").value);
var data="UserId"+userId+"&passwd="+passwd;
myreq.open("POST", "http://localhost/login.aspx, true);
myreq.send(data);
Ajax et JQuery
 Utilisation de la méthode POST
$.ajax({
type: "POST",
url: "login.aspx",
data: "userID="+$("#userID").val()+"&passwd="+$("#passwd").val(),
success: function(msg){$("#result").html(msg);
});

Par défaut, le contentType est "application/x-www-form-urlencoded" tandis


que le dataType correspondra au type mime de la ressource envoyée
Ajax JQuery et ASP.NET
 Récupération des données ( page aspx )
$.ajax({
type: "POST",
url: "login.aspx",
data: "userID="+$("#userID").val()+"&passwd="+$("#passwd").val(),
success: function(msg){$("#result").html(msg);
});

protected void Page_Load(object sender, EventArgs e) {


string UserID = Request.Form["userID"];
string Passwd = Request.Form["passwd"];
Response.Clear();
Response.ContentType = "text/plain";
bool result=UserID=="admin" && Passwd=="admin";
Response.Write(result.ToString());
Response.End();}
Ajax JQuery et ASP.NET
 Récupération des données ( WebMethod )
$.ajax({
type: "POST",
url: "login.aspx/Validate",
dataType: "json",
contentType: "application/json;",
data: "{userID:'" + $("#userID").val() + "', passwd:'" + $("#passwd").val() +
"'}",
success: function (msg) {
if (msg.d) $("#result").html("authentification reussie");
else $("#result").html("authentification echouee");
}
});

La méthode Web Validate doit être définie dans le code behind login.aspx.cs
Ajax JQuery et ASP.NET
 Récupération des données ( WebMethod )
[WebMethod]
public static String Validate(string userID, string passwd)
{
bool result = (userID == "admin" && passwd == "admin");
return result.ToString();
}

Vous aimerez peut-être aussi