Cours de Développement Web: HTML, CSS, JS
Transféré par
brightCours de Développement Web: HTML, CSS, JS
Transféré par
brightWEBG2 - WEB I
Cours de développement WEB
A. Paquot, M. Codutti
Haute École Bruxelles-Brabant
École Supérieure d’Informatique
Année académique 2019 / 2020
Plan du cours
1 Introduction
2 HTML
3 CSS
4 JavaScript
5 jQuery
6 Manipulation des pages (DOM)
7 Traitement des formulaires
8 JavaScript avancé
9 Bootstrap
1 Introduction
Contrat pédagogique
Navigateur WEB
Serveur
Anatomie d’une page
Compétences
1.1 – Contrat pédagogique
crédit image
Introduction Contrat pédagogique
Objectif des cours de web
Apprendre à développer
des applications web
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 5 / 423
Introduction Contrat pédagogique
Parcours
WEBG2 Coté client (pas de serveur)
HTML, CSS, JavaScript, jQuery, Bootstrap
WEBG4 Coté serveur
PHP, Laravel, Rest, Ajax
WEBG5 Serveurs d’applications
Java Spring, Vue/Angular/React
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 6 / 423
Introduction Contrat pédagogique
Cette année
Rythme
Bimestre 3 Bimestre 4
Cours 4h -
Labo 2h 4h
Ressources
Slides et liens utiles sur poÉSI
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 7 / 423
Introduction Contrat pédagogique
Cette année (suite)
Évaluation
Pas d’examen
Évaluation continue aux labos
(avec des questions théoriques)
Charge de travail
5 ECTS =⇒ 125 heures de travail
Présentiel = 60h
Travail personnel = 65h
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 8 / 423
1.2 – Le navigateur WEB
crédit image
Introduction Le navigateur WEB
Comment fonctionne un navigateur WEB ?
Que se passe-t’il entre le moment où on entre une adresse
et le moment où la page s’affiche ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 10 / 423
Introduction Le navigateur WEB
Les étapes de la navigation
1 L’URL désigne un serveur
(une machine quelque part ; cf. cours de réseau)
2 Le navigateur contacte ce serveur et lui parle
(protocole HTTP)
3 Le serveur comprend ce qui est demandé
(ici : page par défaut)
4 Le serveur renvoie (le contenu de) la page
demandée (en HTML)
5 Le navigateur s’occupe du rendu de cette page à
l’écran
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 11 / 423
Introduction Le navigateur WEB
Expérience : simuler un navigateur
On peut faire (en partie) le travail du navigateur
On initie la connexion
> telnet www.esi−bru.be 80
Que signifie le 80 ?
Le serveur répond
Trying 176.31.161.61...
Connected to www.esi−bru.be.
Escape character is ’^]’.
Que signifie le 176.31.161.61 ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 12 / 423
Introduction Le navigateur WEB
Expérience : simuler un navigateur
On pose une question
GET / HTTP/1.1
host: www.esi−bru.be
Voici la réponse
<!DOCTYPE html>
<html>
...
</html>
Le navigateur interprète le document reçu pour produire
le visuel correspondant
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 13 / 423
Introduction Le navigateur WEB
Déchiffrer la presse
« C’est à la mi-2017
que le navigateur Firefox devrait changer
de moteur, abandonnant Gecko pour adopter
définitivement le moteur de rendu Quantum
qui promet des performances accrues. »
https://www.generation-nt.com/firefox-changement-moteur-2017-actualite-1937843.html
« En décembre 2018, Microsoft a officialisé une refonte
majeure d’Edge [...]. Son ancien moteur de rendu [...]
EdgeHTML, sera remplacé par celui qu’utilise Google
avec Chrome. »
https://www.numerama.com/tech/566807-microsoft-edge-base-sur-chrome-sortira-en-janvier-2020.html
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 14 / 423
1.3 – Le serveur web
crédit image
Introduction Le serveur web
Qu’est-ce qu’un serveur web ?
Application tournant sur le serveur
À l’écoute des requêtes des navigateurs
La page demandée peut
exister sur le disque (page statique)
être construite à la demande par un programme :
PHP, Java, C#, NodeJS. . . (page dynamique)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 16 / 423
Introduction Le serveur web
Ne pas confondre
World Wide Web
Internet
VS
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 17 / 423
1.4 – Anatomie d’une page WEB
crédit image
Introduction Anatomie d’une page WEB
De quoi est composée une page WEB ?
HTML décrit le contenu de la page
(quel texte, quelles images. . .)
CSS définit la mise en page
(taille, couleur, disposition. . .)
JavaScript définit le comportement
(que se passe-t’il si on clique sur un
bouton ?. . .)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 19 / 423
Introduction Anatomie d’une page WEB
Exemple : un simple additionneur
sample/anatomy/add.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>h1 {color: maroon}</style>
5 </head>
6 <body>
7 <h1>Addition de deux nombres</h1>
8 <form>
9 <input id="nb1" type="number"> +
10 <input id="nb2" type="number">
11 <button id="add" type="button" onclick="compute()">=</button>
12 <output id="sum">
13 </form>
14 <script>
15 function compute() {
16 let nb1 = Number(document.getElementById("nb1").value);
17 let nb2 = Number(document.getElementById("nb2").value);
18 document.getElementById("sum").value = nb1+nb2;
19 }
20 </script>
21 </body>
22 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 20 / 423
1.5 – Compétences à atteindre
crédit image
Introduction Compétences à atteindre
Compétences en fin d’UE
Pouvoir développer une petite application
locale uniquement (pas de serveur)
utilisant les technologies : HTML, CSS et
JavaScript
ainsi que des bibliothèques/framework
courants : jQuery, Bootstrap
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 22 / 423
Introduction Compétences à atteindre
Exemples
1 Un calculateur d’obésité
2 Un jeu de mémoire
3 Une liste de tâches
4 Un QCM
5 ...
Showcase des projets des années précédentes
disponible sur poÉSI
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 23 / 423
2 HTML
Hello World !
Histoire du WEB
Syntaxe de base
Liens
Images
Listes
Tableaux
Formulaires
Balises sémantiques
Emboîtement
Placement
2.1 – Hello World !
crédit image
HTML Hello World !
HTML ?
HyperText Markup Language
Langage de description d’un document
Mélangeant textes, images. . .
Destiné à être affiché sur un écran
Offrant des hyperliens
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 26 / 423
HTML Hello World !
Exemple : Hello, world !
sample/html/hello.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 Hello, world !
6 </body>
7 </html>
Écrire ce texte dans un fichier
Utiliser votre éditeur préféré
Extension du fichier : .html
Le visualiser dans votre navigateur préféré
En général, il suffit de double-cliquer sur le fichier
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 27 / 423
2.2 – Historique du WEB
crédit image
HTML Historique du WEB
Une brève histoire d’Internet
1969 - Arpanet
Réseau d’ordinateur à usage militaire/ de recherche
1971 - Mail
Application la plus importante du réseau
1983 - Internet
Introduction du protocole TCP/IP
sources : wikipedia Histoire Internet
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 29 / 423
HTML Historique du WEB
Naissance du web
1991 - Web
Protocole HTTP + langage HTML
Inventé au CERN par Tim Berners-Lee
Toute première page WEB :
https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
crédit image
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 30 / 423
HTML Historique du WEB
Une brève histoire d’HTML
1991 : Première version
1997 : HTML 4.0
2000 : XHTML 1.0
Syntaxe plus stricte (XML vs SGML)
2014 : HTML 5
Éléments visuels modernes : vidéos, menus. . .
Plus adapté au développement d’applications
Maintenu par le W2C et le WHATWG
sources : wikipedia HTML
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 31 / 423
2.3 – Les bases de la syntaxe
crédit image
HTML Les bases de la syntaxe
Structure générale d’une page HTML
Indiquer
que c’est un document au format HTML 5
<!DOCTYPE html>
La
structure est arborescente ; d’abord la racine
<html>
Description / configuration du document
<head>
...
</head>
Contenu du document
<body>
...
</body>
</html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 33 / 423
HTML Les bases de la syntaxe
Un langage à balises
HTML est un langage à balises (markup)
<balise> . . . </balise>
Casse libre mais minuscules recommandées
<html> mieux que <HTML>
Certaines balises n’ont pas de contenu
(balise orpheline) : <br>, <hr>. . .
=⇒ pas de balise fermante
Les navigateurs sont permissifs sur la syntaxe
(mais comportement indéfini)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 34 / 423
HTML Les bases de la syntaxe
Que trouve-t-on dans l’entête ?
Le titre à afficher dans le navigateur : <title>
Informations liées au style : <style>
Liens vers ressources externes : <link>, <script>
Des informations sur le document : <meta>
author : Auteur
description : Description
keywords : Mots-clés (pour les robots de recherche)
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 35 / 423
HTML Les bases de la syntaxe
Que trouve-t’on dans l’entête ?
Exemple
sample/html/head.html
1 <head>
2 <title>Site de MCD</title>
3 <meta charset="UTF−8">
4 <meta name="description" content="Page d’accueil de mon site">
5 <meta name="keywords" content="ESI, MCD">
6 <meta name="author" content="MCD">
7 <link rel="stylesheet" href="monstyle.css">
8 </head>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 36 / 423
HTML Les bases de la syntaxe
Les attributs
Un attribut configure une balise
Syntaxe :
nom="valeur" ou nom=’valeur’
nom (quelques rares attributs sans valeur)
Si plusieurs attributs, séparés par un espace
Parfois valables pour toutes les balises : id, class. . .
Parfois spécifiques à une balise : name, content. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 37 / 423
HTML Les bases de la syntaxe
Éléments structurant du corps
Des titres à différents niveaux : <h1>, <h2>. . .
Des paragraphes : <p>
Exemple
sample/html/body.html
1 <body>
2 <h1>Structure du document</h1>
3 <p>Composé de : entête + corps</p>
4 <h2>Entête</h2>
5 <p>Contient de la méta−information sur le document</p>
6 <h2>Le corps</h2>
7 <p>Décrit le contenu du document</p>
8 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 38 / 423
HTML Les bases de la syntaxe
Traitement des espaces
"Espace" = Espace, tabulation et retour à la ligne
Plusieurs "espaces" qui se suivent sont considérés
comme un seul
Un passage à la ligne s’obtient via <br>
Exemple
sample/html/spaces.html
1 Ce
2 texte se
3 retrouvera sur
4
5 deux<br>lignes.
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 39 / 423
2.4 – Les liens
crédit image
HTML Les liens
Le lien internet
Que serait l’hypertexte sans lien ?
<a href="adresse cible">texte à afficher</a>
Exemple : <a href="http://www.he2b.be/">HE2B</a>
Le lien est
absolu (ex : href="http://www.he2b.be/")
ou relatif (ex : href="autrePage.html")
Autre chose que du texte permis (image. . .)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 41 / 423
HTML Les liens
Le lien internet - exemple
Cette page
sample/html/lien1.html
1 Comment un informaticien
2 tente−t−il de réparer sa voiture en cas de problème ?
3 <br>
4 <a href="lien2.html">réponse</a>
fait référence à celle-ci (au même endroit)
sample/html/lien2.html
1 Il sort de la voiture, ferme toutes les fenêtres,
2 rentre à nouveau dans la voiture et essaye de redémarrer.
3 <br>
4 <a href="http://www.info−3000.com/RIGOLECITY/infodevinette.htm">
5 Plus de devinettes...
6 </a>
qui fait référence à un site externe.
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 42 / 423
HTML Les liens
Lien dans la même page
Un lien peut envoyer vers un autre endroit de la
même page
sample/html/lien3.html
1 <h1 id="top">Page de MCD</h1>
2 <a href="#accueil">Accueil</a> |
3 <a href="#webg2">WEBG2</a> |
4 <a href="#webg4">WEBG4</a>
5
6 <h2 id="accueil">Accueil</h2>
7 blablabla [<a href="#top">Retour</a>]
8
9 <h2 id="webg2">WEBG2</h2>
10 blablabla [<a href="#top">Retour</a>]
11
12 <h2 id="webg4">WEBG4</h2>
13 blablabla [<a href="#top">Retour</a>]
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 43 / 423
2.5 – Les images
crédit image
HTML Les images
Insérer des images
Exemple
sample/html/img.html
1 <img src="he2b.svg" alt="HE2B" height="128">
2 <a href="http://www.esi−bru.be">
3 <img src="esi.png" alt="ESI" height="128">
4 </a>
alt important pour les lecteurs d’écrans
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 45 / 423
2.6 – Les listes
crédit image
HTML Les listes
Listes à puces et numérotées
sample/html/ul.html sample/html/ol.html
1 Technologies 1 Technologies
2 à apprendre 2 à apprendre
3 <ul> 3 <ol>
4 <li>HTML</li> 4 <li>HTML</li>
5 <li>CSS</li> 5 <li>CSS</li>
6 <li>Javascript</li> 6 <li>Javascript</li>
7 </ul> 7 </ol>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 47 / 423
HTML Les listes
Listes imbriquées
sample/html/ul-ol.html
1 Technologies
2 à apprendre
3 <ol>
4 <li>HTML</li>
5 <li>CSS
6 <ul>
7 <li>avec Bootstrap</li>
8 </ul>
9 </li>
10 <li>Javascript
11 <ul>
12 <li>avec jQuery</li>
13 </ul>
14 </li>
15 </ol>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 48 / 423
HTML Les listes
Listes descriptives
sample/html/dl.html
1 Technologies WEB
2 <dl>
3 <dt>HTML</dt>
4 <dd>Permet de définir le contenu</dd>
5 <dt>CSS</dt>
6 <dd>Permet de définir la mise en page</dd>
7 <dt>Javascript</dt>
8 <dd>Pour la dynamique</dd>
9 </dl>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 49 / 423
2.7 – Les tableaux
crédit image
HTML Les tableaux
Une table simple
sample/html/table.html
1 <table border="1">
2 <tr><td>A</td><td>B</td><td>C</td></tr>
3 <tr><td>D</td><td>E</td><td>F</td></tr>
4 <tr><td>G</td><td>H</td><td>I</td></tr>
5 </table>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 51 / 423
HTML Les tableaux
Cases d’entête
td = case de donnée, th = case d’entête
sample/html/table2.html
1 <table border="1">
2 <tr><th>WEBG2</th><th>Bim3</th><th>Bim4</th></tr>
3 <tr><th>Cours</th><td>4h</td><td>−</td></tr>
4 <tr><th>Labo</th><td>2h</td><td>4h</td></tr>
5 </table>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 52 / 423
HTML Les tableaux
Extension de case
Une entrée peut s’étendre sur plusieurs colonnes
(colspan) ou plusieurs lignes (rowspan)
sample/html/table3.html
1 <table border="1">
2 <tr><th>WEBG2</th><th>Bim3</th><th>Bim4</th></tr>
3 <tr><th>Cours</th><td>4h</td><td>−</td></tr>
4 <tr><th>Labo</th><td colspan="2">3h</td></tr>
5 </table>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 53 / 423
HTML Les tableaux
Entete et pied de page
On peut différencier l’entête et le bas du tableau
sample/html/table4.html
1 <table border="1">
2 <thead>
3 <tr><th>WEBG2</th><th>Bim3</th><th>Bim4</th></tr>
4 </thead>
5 <tbody>
6 <tr><th>Cours</th><td>4h</td><td>−</td></tr>
7 <tr><th>Labo</th><td>2h</td><td>4h</td></tr>
8 </tbody>
9 <tfoot>
10 <tr><th>Total</th><td>6h</td><td>4h</td></tr>
11 </tfoot>
12 </table>
Peut être utilisé lors de l’impression, du scrolling. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 54 / 423
2.8 – Les formulaires
crédit image
HTML Les formulaires
Introduction
Formulaire : zone où l’utilisateur peut entrer
de l’information, faire des choix
Sera envoyé à un serveur pour traitement
Ou traité en local (via du JavaScript)
Voyons comment les construire
On verra plus tard comment les traiter
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 56 / 423
HTML Les formulaires
Un formulaire simple
sample/html/form.html
1 <form>
2 login: <input type="text"><br>
3 password: <input type="password"><br>
4 âge: <input type="number"><br>
5 <button>Inscription</button>
6 </form>
Il ne se passe rien quand on clique sur le bouton :
ce sera le rôle de JavaScript
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 57 / 423
HTML Les formulaires
La balise <input>
Nombreuses valeurs possibles pour l’attribut type
date pour entrer une date
color pour choisir une couleur
checkbox pour une case à cocher
email pour une adresse mail
...
sample/html/form2.html
1 <form>
2 Date de naissance : <input type="date"><br>
3 Couleur préférée : <input type="color"><br>
4 Email : <input type="email"><br>
5 <input type="checkbox">J’accepte les conditions<br>
6 <button>Envoi</button>
7 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 58 / 423
HTML Les formulaires
Le label
Sans effet visuel
Associé à une saisie
Sélectionne la saisie si cliqué
Utilisé par les lecteurs d’écran
Important pour les cases à cocher
sample/html/label.html
1 <form>
2 <label for="nom">Nom:</label>
3 <input id="nom">
4 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 59 / 423
HTML Les formulaires
Grouper des éléments
sample/html/fieldset.html
1 <form>
2 <fieldset>
3 <legend>Passager 1</legend>
4 <label for="nom1">Nom:</label>
5 <input id="nom1">
6 <label for="age1">Age:</label>
7 <input type="number" id="age1">
8 </fieldset>
9 <fieldset>
10 <legend>Passager 2</legend>
11 <label for="nom2">Nom:</label>
12 <input id="nom2">
13 <label for="age2">Age:</label>
14 <input type="number" id="age2">
15 </fieldset>
16 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 60 / 423
HTML Les formulaires
La zone de texte
Pour permettre d’entrer un code plus long
sample/html/textarea.html
1 <form>
2 <label for="comment">Commentaire:</label><br>
3 <textarea id="comment"></textarea>
4 </form>
Un texte indicatif
Alternative aux labels (input et textarea)
sample/html/placeholder.html
1 <input type="mail" placeholder="Votre email...">
2 <br>
3 <textarea placeholder="Votre commentaire..."></textarea>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 61 / 423
HTML Les formulaires
Les boutons radio
On voudrait proposer une
question avec plusieurs
propositions et une seule
réponse possible.
sample/html/radio.html
1 <form>
2 <p>Qui a développé jQuery ?</p>
3 <input type="radio" id="ans1" name="answer" value="1" checked>
4 <label for="ans1">Linus Torvald</label><br>
5 <input type="radio" id="ans2" name="answer" value="2">
6 <label for="ans2">John Resig</label><br>
7 <input type="radio" id="ans3" name="answer" value="3">
8 <label for="ans3">Bert Bos</label><br>
9 <button>Valider</button>
10 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 62 / 423
HTML Les formulaires
Attributs
checked
Indique le choix par défaut
name
Sera utilisé lors de l’envoi du formulaire au serveur
Ici, en plus, indique que les boutons sont liés
Faites l’expérience de mettre 3 name différents
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 63 / 423
HTML Les formulaires
Les cases à cocher
On voudrait proposer une
question à choix multiple
sample/html/qcm.html
1 <form>
2 <p>Quel langage connaissez−vous ?</p>
3 <input type="checkbox" name="answer" value="Java">
4 <label for="ans1">Java</label><br>
5 <input type="checkbox" name="answer" value="C++">
6 <label for="ans2">C++</label><br>
7 <input type="checkbox" name="answer" value="JavaScript">
8 <label for="ans3">JavaScript</label><br>
9 <button type="button">Valider</button>
10 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 64 / 423
HTML Les formulaires
Les listes
Les choix simples et multiples
peuvent être présentés sous
forme d’une liste
sample/html/list.html
1 <form>
2 <p>Quelle est la marque de votre téléphone ?</p>
3 <select> <!−− <select multiple> si plusieurs réponses −−>
4 <option value="apple">Apple</option>
5 <option value="samsung">Samsung</option>
6 <option value="huawei">Huawei</option>
7 <option value="other">Autre</option>
8 </select>
9 <button>Valider</button>
10 </form>
Pour un choix multiple, il suffit d’ajouter l’option multiple
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 65 / 423
HTML Les formulaires
Validation
On peut indiquer des contraintes sur les champs des
formulaires
required : la donnée est requise
min , max : minimum et maximum pour une donnée
numérique
minlength , maxlength : contraindre le nombre de
caractères dans un champ
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 66 / 423
HTML Les formulaires
Un exemple complet (1/3)
sample/html/form-subscribe.html
1 <form>
2 <fieldset>
3 <legend>Données personnelles</legend>
4 <input id="nom" placeholder="Votre nom..." required>
5 <input id="prenom" placeholder="Votre prénom..." required>
6 <br>
7 <label for="naiss">Date de naissance:</label>
8 <input type="date" id="naiss" required>
9 <br>
10 <label for="genre">Genre:</label>
11 <input type="radio" id="genreH" name="genre" value="H" checked>
12 <label for="genreH">Homme</label>
13 <input type="radio" id="genreF" name="genre" value="F">
14 <label for="genreF">Femme</label>
15 <br>
16 <label for="adresse">Adresse:</label>
17 <input id="adresse" size="40" required>
18 <br>
19 <label for="cp">Code postal:</label>
20 <input type="number" id="cp" min="1000" max="9999" required>
21 <label for="localite">Localité:</label>
22 <input id="localite" required>
23 </fieldset>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 67 / 423
HTML Les formulaires
Un exemple complet (2/3)
sample/html/form-subscribe.html
1 <fieldset>
2 <legend>Cours</legend>
3 <label for="option">Option:</label>
4 <select id="option">
5 <option value="G">Gestion</option>
6 <option value="I">Industrielle</option>
7 <option value="R">Réseau</option>
8 </select>
9 <br>
10 <input type="checkbox" id="INT1" name="ue" value="INT1">
11 <label for="INT1">INT1</label>
12 <input type="checkbox" id="DEV1" name="ue" value="DEV1">
13 <label for="DEV1">DEV1</label>
14 <input type="checkbox" id="CAI1" name="ue" value="CAI1">
15 <label for="CAI1">CAI1</label>
16 <br>
17 <input type="checkbox" id="SYS2" name="ue" value="SYS2">
18 <label for="SYS2">SYS2</label>
19 <input type="checkbox" id="DEV2" name="ue" value="DEV2">
20 <label for="DEV2">DEV2</label>
21 <input type="checkbox" id="CAI2" name="ue" value="CAI2">
22 <label for="CAI2">CAI2</label>
23 </fieldset>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 68 / 423
HTML Les formulaires
Un exemple complet (3/3)
sample/html/form-subscribe.html
1 <fieldset>
2 <legend>Remarque</legend>
3 <textarea cols="40" placeholder="Avez−vous une remarque ?" ></textarea>
4 </fieldset>
5 <button>S’inscrire</button>
6 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 69 / 423
2.9 – Les balises sémantiques
crédit image
HTML Les balises sémantiques
Sémantique vs style
Historiquement, HTML propose des balises
sémantiques
<h1> : indique un titre de niveau 1
<a> : indique un lien
de style
<b> : pour mettre en gras
<em> : pour mettre en italique
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 71 / 423
HTML Les balises sémantiques
Sémantique vs style
C’est pareil au niveau des attributs
href : apporte une sémantique
border : donne une indication de style
Il faut réduire au maximum
les balises/attributs de style :
c’est le rôle de CSS
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 72 / 423
HTML Les balises sémantiques
Balises structurantes
HTML 5 introduit des balises sémantiques de structure
Différencie les parties de la
page
Pas de mise en page
spécifique : le rôle de CSS
Reconnaissance automatique :
bots, technologies
d’assistance. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 73 / 423
HTML Les balises sémantiques
Balises structurantes
Certaines sont faciles à comprendre
header entête commun à chaque page
footer pied de page commun à chaque page
nav menu principal de navigation
main partie principale différente des autres pages
(exclut donc les 3 parties ci-dessus)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 74 / 423
HTML Les balises sémantiques
Exemple
sample/html/struct1.html
1 <!DOCTYPE html>
2 <html>
3 <head><title>Page de MCD</title></head>
4 <body>
5 <header>
6 <h1>Page personnelle de MCD</h1>
7 </header>
8 <nav>
9 <ul>
10 <li>Accueil</li>
11 <li>Mon CV</li>
12 <li>Mes cours</li>
13 <li>Mes hobbys</li>
14 </ul>
15 </nav>
16 <main>
17 Contenu ici !
18 </main>
19 <footer>
20 <p>Dernière mise à jour, juin 2018</p>
21 </footer>
22 </body>
23 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 75 / 423
HTML Les balises sémantiques
Balises structurantes
Un menu de navigation se définit ainsi
sample/css/menu.html
1 <nav>
2 <ul>
3 <li><a href="#home">Home</a></li>
4 <li><a href="#news">News</a></li>
5 <li><a href="#contact">Contact</a></li>
6 <li><a href="#about">About</a></li>
7 </ul>
8 </nav>
Laid ? Oui ! Sera mis en page via le CSS
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 76 / 423
HTML Les balises sémantiques
Balises structurantes
D’autres balises sont plus sujettes à discussion
article Contenu qui peut se comprendre sans le
reste : un article wikipedia, un commentaire. . .
section Regroupe des éléments liés
Contient typiquement un entête
Un article peut contenir des sections. . .
et inversement
aside Contenu annexe
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 77 / 423
HTML Les balises sémantiques
Exemple
sample/html/struct2.html
1 <main>
2 <section>
3 <header><h1>Mes cours</h1></header>
4 <article>
5 <h1>WEBG2</h1>
6 <h2>Contenu</h2>
7 blabla
8 <h2>Évaluation</h2>
9 blabla
10 </article>
11 <article>
12 <h1>WEBG4</h1>
13 blabla
14 blabla
15 </article>
16 </section>
17 </main>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 78 / 423
HTML Les balises sémantiques
Balises structurantes
Dans vos recherches, vous trouverez souvent du
code comme celui-ci
<div id="header">
Très HTML4, à éviter.
Pour aller plus loin :
www.alsacreations.com/article/lire/1376-html5-section-
article-nav-header-footer-aside.html
openclassrooms.com/courses/apprenez-a-creer-votre-site-
web-avec-html5-et-css3/structurer-sa-page
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 79 / 423
HTML Les balises sémantiques
Donner du sens au texte
De nombreuses balises pour donner du sens au texte
kbd : texte à entrer tel quel
samp : output de programme
code : code informatique
address : pour l’adresse de quelqu’un
abbr : pour une abréviation
sample/html/code.html
1 Le code Java
2 <code>System.out.println("somme="+1+2);</code>
3 affichera <samp>somme=12</samp>. <br>
4 Rappel: Appuyez sur <kbd>F1</kbd> pour de l’aide dans l’
5 <abbr title="Integrated Development Environment">IDE</abbr>.
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 80 / 423
HTML Les balises sémantiques
Et encore d’autres
mark : pour du texte surligné
pre : pour garder la mise en forme du texte
...
sample/html/spaces2.html
1 En <mark>Java</mark>,
2 le "Hello, world !" est :
3 <pre>
4 public class Test {
5 public static void main(String[] args) {
6 System.out.println("Hello, world !");
7 }
8 }
9 </pre>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 81 / 423
2.10 – Emboîtement et placement
crédit image
HTML Emboîtement et placement
Emboîtement
Certaines balises peuvent se trouver dans une autre :
<head>...<title>...</title>...</head>
<p>...<a>...</a>...</p>
D’autres pas :
<body>...<title>...</title>...</body> : NON
<h1>...<p>...</p>...</h1> : NON
Comment le savoir ?
https://www.w3.org/TR/2014/REC-html5-20141028/semantics.html
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 83 / 423
HTML Emboîtement et placement
Placement du contenu
2 catégories d’éléments :
bloc
Ex : h1, p. . .
Occupe toute la largeur de la page
Saut de page avant et après
en ligne
Ex : a, img. . .
Occupe juste la largeur nécessaire
Se place à droite de l’élément précédent (si en ligne)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 84 / 423
HTML Emboîtement et placement
Placement du contenu
crédit image
Peut se configurer ? Oui ! Via le CSS
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 85 / 423
HTML Pour conclure
Un détail pour finir. . .
Certains caractères posent problèmes
Mal interprétés (ex : code <html>)
Difficiles à entrer au clavier
On s’en sort grâce aux entités
Certaines portent un nom : < pour <
Sinon entrer le code : Δ ou Δ pour ∆
Cf. https://www.w3schools.com/html/html_entities.asp
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 86 / 423
HTML Pour conclure
Explorer
Il existe beaucoup plus de balises.
À vous d’explorer la richesse d’HTML
www.w3schools.com/html/
https://developer.mozilla.org/fr/docs/Web/HTML/Reference
www.pierre-giraud.com/html-css-apprendre-coder-cours/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 87 / 423
3 CSS, les feuilles de style
Introduction
Texte / Couleur
Lien / Liste
Boite / Taille
Identifiant / Classe
Sélecteur
Disposition
Positionnement
Grid
Flex
Image
Animation
Programmation
3.1 – Introduction
crédit image
CSS Introduction
CSS vs HTML
HTML permet de définir le contenu
CSS permet de gérer le style : police, taille,
couleurs, mise en page. . .
HTML possède aussi des balises/attributs de mise
en page
Ex : <b>, <center>, border="1"
Non recommandé
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 90 / 423
CSS Introduction
Exemple de base
Pour indiquer que les titres de niveau 1 sont en brun
sample/css/hello.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>h1 {color: maroon}</style>
5 </head>
6 <body>
7 <h1>Hello, world !</h1>
8 </body>
9 </html>
Permet de complètement modifier l’aspect du document
Ex : CSS Zen Garden (http://www.csszengarden.com/)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 91 / 423
CSS Introduction
Histoire de CSS
CSS = Cascading Style Sheets
Créé en 1994 par Håkon Wium Lie et Bert Bos
En est à la version 3
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 92 / 423
3.2 – Syntaxe
crédit image
CSS Syntaxe
Syntaxe de CSS
Le sélecteur peut être
balise : toutes les balises de ce nom
Plein d’autres choses encore que nous verrons. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 94 / 423
CSS Syntaxe
Propriétés de CSS
Que peut-on définir ?
La police, la taille, les couleurs (texte et fond)
Les bordures et les marges
Mise en page des liens, des listes, des tables. . .
Positionnement des éléments dans la page
Adaptation à la taille de la page
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 95 / 423
CSS Syntaxe
Où placer le CSS ?
Plusieurs possibilités
1 Dans le fichier HTML entre les balises <style>
sample/css/style.html
1 <head>
2 <style>
3 p{
4 color: red
5 }
6 </style>
7 </head>
8 <body>
9 <p>Bonjour</p>
10 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 96 / 423
CSS Syntaxe
Où placer le CSS ?
2 Dans un fichier à part (recommandé)
D’extension .css
Sans les balises <style>
sample/css/mystyle.css
1 p{
2 color: red;
3 }
Appelé dans le HTML via la balise <link>
sample/css/mystyle.html
1 <head>
2 <link rel="stylesheet" href="mystyle.css">
3 </head>
4 <body>
5 <p>Bonjour</p>
6 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 97 / 423
CSS Syntaxe
Où placer le CSS ?
3 Directement dans la balise
Sans la partie sélecteur
OK pour de petites modifications / un test
<h1 style="color: maroon; margin−left:30px;">
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 98 / 423
3.3 – Le texte
crédit image
CSS Le texte
La police
sample/css/basic-texte.html
1 p{
2 font−family: cursive;
3 font−size: 4em;
4 font−weight: bold;
5 font−style: italic;
6 font−variant: small−caps;
7 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 100 / 423
CSS Le texte
Ajouter des polices
On peut faire appel à de nouvelles polices
sample/css/font.html
1 <head>
2 <link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
3 </head>
4 <body>
5 <h1 style="font−family: ’Courgette’, cursive;">
6 Webg2, c’est super !
7 </h1>
8 </body>
Pour choisir : https://fonts.google.com/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 101 / 423
CSS Le texte
Mise en forme du texte
sample/css/basic-texte2.html
1 p{
2 text−indent: 1em;
3 text−align: right;
4 text−decoration: overline;
5 text−transform: uppercase;
6 letter−spacing: .2em;
7 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 102 / 423
3.4 – Les tailles (I)
crédit image
CSS Les tailles (I)
Les unités en CSS
Nombreuses unités pour spécifier une taille.
em : la taille courante du texte
px : en pixel (variable)
...
px ou em ?
sample/css/emvspx.html
1 <h1 style="font−size: 32px;">Titre en 32px</h1>
2 <h1 style="font−size: 2em;">Titre en 2em</h1>
Est-ce en tout point équivalent ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 104 / 423
3.5 – La couleur
crédit image
CSS La couleur
La couleur
sample/css/color.html
1 p{
2 background−color: steelblue;
3 color: aliceblue;
4 }
Via un nom
Via le système RGB
Via le système HSL
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 106 / 423
CSS La couleur
La couleur
Via un nom
Il en existe 140 : black, chocolate, navy
(cf. https://www.w3schools.com/colors/colors_names.asp)
Le système RGB
Quantité de rouge (R), vert (G) et bleu (B)
Chaque valeur de 0 à 255
En hexadécimal : #808000 (un jaune)
En décimal : rgb(128, 128, 0) (idem)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 107 / 423
CSS La couleur
La couleur (suite)
Le système HSL
Teinte (hue) de 0 à 360
Saturation de 0% (gris) à 100% (coloré)
Luminosité de 0% (noir) à 100% (blanc)
hsl(0, 100%, 80%) (rouge intense et clair)
hsl(80, 50%, 30%) (gris-vert foncé)
Pour s’exercer :
https://www.w3schools.com/colors/colors_hsl.asp
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 108 / 423
CSS La couleur
Association de couleurs
Pour choisir des couleurs qui vont bien ensemble :
https://www.w3schools.com/colors/colors_schemes.asp
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 109 / 423
3.6 – Les liens
crédit image
CSS Les liens
Mise en page des liens
On peut adapter le style à l’état du lien
(pseudo-classe)
a indépendant de l’état
a:link pas encore visité
a:visited déjà suivi
a:hover souris dessus
a:active on clique dessus
Respecter l’ordre : LOVE & HATE !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 111 / 423
CSS Les liens
Mise en page des liens
sample/css/link.html
1 a{
2 text−decoration: none;
3 }
4 a:link, a:visited {
5 background−color: aliceblue;
6 color: black;
7 }
8 a:hover {
9 background−color: lightsteelblue;
10 color: white;
11 }
12 a:active {
13 background−color: steelblue;
14 color: white;
15 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 112 / 423
3.7 – Les boites
crédit image
CSS Les boites
Une boite
Chaque balise html occupe une boite dans la page
Examinons chaque composant. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 114 / 423
CSS Les boites
Définir une bordure
sample/css/bordure.html
1 <p style="border−style: solid">
2 Un cadre
3 </p>
4 <p style="border−style: dashed; border−width: thin; border−color: blue">
5 On définit le style, l’épaisseur et la couleur
6 </p>
7 <p style="border−style: double; border−width: 10px; border−color: green">
8 Épaisseur explicite
9 </p>
10 <p style="border: solid 2px red">
11 Écriture compacte
12 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 115 / 423
CSS Les boites
Définir une bordure
Chaque partie séparément
sample/css/bordure2.html
1 <p style="border−top: dotted thin; border−bottom: solid thick">
2 On définit uniquement les bords haut et bas
3 </p>
4 <p style="border−left−style: double; border−right−style: solid;">
5 Autre exemple
6 </p>
7 <p style="border−top: dotted thin; border−bottom: solid thick; border−color: green">
8 On mélange les écritures
9 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 116 / 423
CSS Les boites
Définir une bordure
Écriture compacte pour les attributs
sample/css/bordure3.html
1 <p style="border−style: solid; border−color: red green blue black">
2 Ordre: haut droite bas gauche
3 </p>
4 <p style="border−style: solid; border−color: blue orange">
5 Si 2 couleurs : haut/bas droite/gauche
6 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 117 / 423
CSS Les boites
Définir une bordure
Possibilité de définir des arrondis
sample/css/bordure4.html
1 <p style="border: solid steelblue; border−radius: 10px; ">
2 Arrondis
3 </p>
4 <p style="border: solid steelblue; border−radius: 10px 30px; ">
5 Arrondis
6 </p>
7 <p style="border−radius: 50% 20% / 10% 40%; background−color: steelblue">
8 Arrondis
9 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 118 / 423
CSS Les boites
Une boite
Bien différencier :
margin (marge)
espace entre la bordure et les autres éléments
padding (remplissage)
espace entre le contenu et la bordure
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 119 / 423
CSS Les boites
Marge vs padding - Exemple
sample/css/padding.html
1 <p style="margin: 2px; padding:20px;
2 border: 6px solid; background−color: lightgrey;">
3 Hello, World !
4 </p>
5 <p style="margin: 20px; padding:2px;
6 border: 6px solid; background−color: lightgrey; ">
7 Hello, World !
8 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 120 / 423
CSS Les boites
Marge vs padding - Exemple
On peut spécifier séparément chaque coté
sample/css/padding2.html
1 <p style="padding: 2px 40px; margin−bottom: 1em;
2 border: solid">
3 Hello, World !
4 </p>
5 <p style="margin−left: 40px; padding−top: 20px;
6 border: solid">
7 Hello, World !
8 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 121 / 423
CSS Les boites
La taille
On peut définir la taille d’une boite
sample/css/box-size.html
1 <p style="border: solid; width: 200px;">
2 Hello, World !
3 </p>
4 <p style="border: solid; width: 20%; height: 10em">
5 Hello, World !
6 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 122 / 423
CSS Les boites
La taille de quoi ?
Dépend de la valeur de box-sizing
content-box : du contenu uniquement (défaut)
border-box : contenu + padding + bordure
sample/css/box-size2.html
1 <p style="border: solid; width: 200px;">
2 Hello, World !
3 </p>
4 <p style="border: solid; width: 200px; box−sizing: border−box;">
5 Hello, World !
6 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 123 / 423
CSS Les boites
Marge automatique
Une valeur possible pour margin : auto
Valeur calculée par le navigateur
Prend tout l’espace disponible, équitablement
sample/css/margin-auto.html
1 <p style="border: solid; width: 50%; margin: auto">
2 Cadre centré.
3 </p>
4 <p style="border: solid; width: 50%; margin−left: auto">
5 Cadré aligné à droite.
6 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 124 / 423
3.8 – Les tailles (II)
crédit image
CSS Les tailles (II)
Les unités en CSS
Nombreuses unités pour spécifier une taille.
em : la taille courante du texte
rem : la taille du texte de la racine
% : pourcentage de la taille du parent
(l’élément englobant)
vw : 1% de la largeur de la fenêtre
vh : 1% de la hauteur de la fenêtre
px : en pixel (variable)
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 126 / 423
CSS Les tailles (II)
Comprendre les différences
em ou rem ?
sample/css/emvsrem.html
1 <h1 style="font−size: 2em; border: solid; padding−top: 1em">
2 Padding 1em
3 </h1>
4 <h1 style="font−size: 2em; border: solid; padding−top: 1rem">
5 Padding 1rem
6 </h1>
vw ou % ?
sample/css/vwvspourcent.html
1 <body style="width: 50%">
2 <h1 style="width: 50%; background−color: gray">Titre en 50%</h1>
3 <h1 style="width: 50; background−color: gray">Titre en 50vw</h1>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 127 / 423
3.9 – Identifier les éléments
crédit image
CSS Identifier les éléments
Rappel bonne pratique
Placer les styles dans un fichier dédié
p {...} attribue un style à tous les <p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 129 / 423
CSS Identifier les éléments
Identifiant
Que faire si on veut appliquer un style à un élément en
particulier ?
Donner
un identifiant à un élément
<p id="conclusion">Bonjour</p>
Lier
le style à cet identifiant
#conclusion {border: solid}
Un identifiant doit être unique dans une page
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 130 / 423
CSS Identifier les éléments
Classe
Si on veut appliquer un style à plusieurs éléments ?
Attribuer
une classe aux éléments
<p class="important">Bonjour</p>
Lier
le style à la classe
.important {color: red}
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 131 / 423
CSS Identifier les éléments
Exemple
Le CSS
sample/css/idclass.html
1 .deleted {text−decoration: line−through}
2 #second {background−color: black; color:white}
3 p {color: darkolivegreen}
Le HTML
sample/css/idclass.html
1 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
2 <p id="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
3 <p class="deleted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
4 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
5 <p class="deleted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 132 / 423
CSS Identifier les éléments
Le Cascading de CSS
Si plusieurs règles peuvent s’appliquer :
Elle se superposent
Priorité en cas de conflit : #id > .class > balise
Priorité identique : la dernière gagne
Plus complexe :
https://openweb.eu.org/articles/cascade_css
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 133 / 423
CSS Identifier les éléments
div et span
Et si on doit appliquer un style à une partie sans balise ?
1 span
Balise neutre (pas de sens particulier)
Entoure un bout de texte
sample/css/span.html
1 .stabilo {background−color: yellow;}
2 <p>Le <span class="stabilo">CSS</span> c’est super !</p>
Exercice : on aurait pu remplacer span par p ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 134 / 423
CSS Identifier les éléments
div et span
2 div : balise neutre, destinée à entourer des blocs
sample/css/div.html
1 <p>Phrase 1</p>
2 <div style="border: solid thick green">
3 <p>Phrase 2</p>
4 <p>Phrase 3</p>
5 </div>
6 <p>Phrase 4</p>
Exercice : on aurait pu mettre le style sur les 2 p ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 135 / 423
3.10 – Disposition des boites
crédit image
CSS Disposition des boites
Expérience 1
sample/css/box-exp1.html
1 <p style="border: solid; width: 40%;">
2 Hello, World !
3 </p>
4 <p style="border: solid; width: 40%;">
5 Hello, World !
6 </p>
Pourquoi pas un à coté de l’autre ?
Il y a de la place !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 137 / 423
CSS Disposition des boites
Expérience 2
sample/css/box-exp2.html
1 <p style="border: solid">
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
3 Donec at leo mattis, scelerisque mauris
4 <span style="background−color: yellow; margin: 1em">
5 condimentum , tincidunt ante.
6 </span>
7 Duis lorem libero, tristique vitae urna eu, lobortis luctus diam.
8 Pellentesque lacinia quam.
9 </p>
Pourquoi il ne tient pas compte des marges hautes et
basses ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 138 / 423
CSS Disposition des boites
Rappel HTML
Les éléments HTML appartiennent à une catégorie
block : h1, p et. . . div
Se place en dessous de l’élément
précédent
Passage à la ligne après
inline : a, texte et. . . span
Se place à droite du précédent
(si pas bloc)
Passage à la ligne possible
Et les boites peuvent s’emboiter. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 139 / 423
CSS Disposition des boites
Disposition - Exemple
sample/css/flux.html
1 <div style="border: solid red; margin:5px">
2 <span style="border: solid green; margin:5px">texte 1</span>
3 <div style="border: solid yellow; margin:5px">
4 <span style="border: solid green; margin:5px">texte 2</span>
5 <span style="border: solid green; margin:5px">texte 3</span>
6 </div>
7 </div>
8 <div style="border: solid grey; margin:5px">
Peut se changer ? Oui ! Grâce à la propriété display
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 140 / 423
CSS Disposition des boites
Disposition - display
1 display : block
Défaut pour de nombreuses balises : p, div. . .
Passage à la ligne avant et après (placement vertical)
On peut définir sa largeur (100% par défaut)
On peut définir sa hauteur
(juste ce qui est nécessaire par défaut)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 141 / 423
CSS Disposition des boites
Disposition - display
2 display : inline
Défaut pour de quelques balises : a, span. . .
Également pour chaque mot d’un texte
Se place à droite si possible (placement horizontal)
Un espace entre chaque élément
On ne peut pas définir sa largeur (juste ce qu’il faut)
On ne peut pas définir sa hauteur (juste ce qu’il faut)
On ne peut pas définir de marge haute/basse
Le padding haut/bas déborde sur le reste
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 142 / 423
CSS Disposition des boites
Disposition - display
3 display : inline-block
Se place comme inline
On peut définir les tailles comme block
Alignement vertical définit par vertical-align
4 Et encore d’autres. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 143 / 423
CSS Disposition des boites
Disposition - Exemple
sample/css/inline.html
1 <style>
2 p{
3 width: 40%;
4 height: 4em;
5 border: solid;
6 display: block; /∗ inline, inline−block∗/
7 }
8 </style>
9 <p>
10 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
11 </p>
12 <p>
13 Duis lorem libero, tristique vitae urna eu, lobortis luctus diam.
14 </p>
Testons avec différents display
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 144 / 423
CSS Disposition des boites
Disposition - Exemple
block inline
inline-block
Tester avec différents vertical-align et tailles
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 145 / 423
3.11 – Les listes
crédit image
CSS Les listes
Mise en page d’une liste
On dispose de quelques propriétés
list-style-type : le type de marque
list-style-image : une image sert de marque
list-style-position : position des marques
outside : en dehors de la bordure (défaut)
inside : avec le texte
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 147 / 423
CSS Les listes
Exemples
list−style−type: upper−alpha
list−style−type: square; list−style−position: inside
list−style−image: url(’icon.png’)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 148 / 423
CSS Les listes
Application - un menu
Essayons de mettre en forme un menu.
1 La partie HTML est souvent présentée comme un
liste de liens
sample/css/menu.html
1 <nav>
2 <ul>
3 <li><a href="#home">Home</a></li>
4 <li><a href="#news">News</a></li>
5 <li><a href="#contact">Contact</a></li>
6 <li><a href="#about">About</a></li>
7 </ul>
8 </nav>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 149 / 423
CSS Les listes
Application - un menu
2 Voici une mise en page possible
sample/css/menu-simple.html
1 ul {
2 list−style−type: none;
3 width: 80px;
4 }
5 a{
6 text−decoration: none;
7 display: block;
8 background−color: aliceblue;
9 color: black;
10 border: solid aliceblue;
11 padding−left: .5em;
12 }
13 a:hover {
14 border: solid steelblue;
15 }
16 a:active {
17 background−color: steelblue;
18 color: white;
19 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 150 / 423
CSS Les listes
Application - un menu
3 On obtient
4 Exercice : un menu horizontal
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 151 / 423
3.12 – Positionnement
crédit image
CSS Positionnement
La position
L’attribut position modifie la position d’un élément
Ne pas confondre
display 6= position
1 static (défaut) : respecte le flux normal
Tel que défini par display
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 153 / 423
CSS Positionnement
La position
2 relative : décalage par rapport au flux normal
sample/css/relative.html
1 Hello,
2 <span style="position: relative; bottom: 10px">W</span>orld !
sample/css/relative2.html
1 <p>Bien malin celui qui
2 <span style="position: relative; right: 6em">parvient à me</span>
3 lire</p>
La suite se place comme s’il n’était pas décalé
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 154 / 423
CSS Positionnement
La position
3 fixed : un endroit précis de l’écran
sample/css/fixed.html
1 <h1>Titre 1</h1>
2 <h1>Titre 2</h1>
3 <h1>Titre 3</h1>
4 <h1>Titre 4</h1>
5 <p style="position:fixed; top:0px; right:0px">Hello</p>
Sorti du flux normal
La suite se place comme s’il n’existait pas
Insensible au défilement
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 155 / 423
CSS Positionnement
La position
4 absolute : un endroit précis de la page
sample/css/absolute.html
1 <h1>Hello</h1>
2 <p style="position:absolute; top:0px; right:0px">world !</p>
Sorti du flux normal
La suite se place comme s’il n’existait pas
Défilement avec le reste
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 156 / 423
CSS Positionnement
La position
4 absolute : cas particulier
Si dans une boite avec une position non static
Se place par rapport à cette boite
sample/css/absolute2.html
1 <h1>Mon jeu</h1>
2 <div style="border:solid; width:400px; height:100px; position:relative">
3 <span style="position:absolute; top:0px; right:0px">Score 00000</span>
4 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 157 / 423
CSS Positionnement
La position
5 sticky : place de la colle à un endroit
Commence dans le flow normal
Reste collé lorsqu’il atteint l’endroit indiqué
Tant que le parent est visible
sample/css/sticky.html
1 <h1>L’entête du site</h1>
2 <nav style="background−color: lightblue; position: sticky; top: 0px">
3 Le menu doit toujours être visible
4 </nav>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 158 / 423
3.13 – Sélecteurs complexes
crédit image
CSS Sélecteurs complexes
On sait sélectionner
Un type de balise (p)
Une classe (.classe), un id (#id)
On peut les combiner
h1,h2 : s’applique à <h1> et <h2>
table p : s’applique aux <p> dans un table
p.info : s’applique aux <p> ayant la classe info
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 160 / 423
CSS Sélecteurs complexes
Plus d’infos
https://www.xul.fr/css/selecteur.php
Exercices
Que va désigner : div.menu a ?
Quelle différence entre div.menu et div .menu ?
Comment désigner le premier élément d’une liste ?
Un petit jeu ? http://flukeout.github.io/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 161 / 423
3.14 – Structure d’une page et grille
crédit image
CSS Structure d’une page et grille
La partie HTML
Voici une page générale
sample/css/page.html
1 <body>
2 <header>
3 L’entête
4 </header>
5 <nav>
6 Le menu
7 </nav>
8 <main>
9 Le contenu de la page
10 qui est à priori plus grand que la partie menu
11 </main>
12 <footer>
13 Le pied de page
14 </footer>
15 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 163 / 423
CSS Structure d’une page et grille
Ce qu’on veut
Essayons d’obtenir cette mise en page
On a
un entête
un pied de page
un menu à gauche
le contenu de la page
CSS 3 introduit un standard : les grilles (grid)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 164 / 423
CSS Structure d’une page et grille
Grid
Ajout d’une nouvelle valeur pour display : grid
Grande souplesse pour désigner
Les différentes parties de la grille
Leur taille
Leur position
Pour les détails : https://css-tricks.com/
snippets/css/complete-guide-grid/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 165 / 423
CSS Structure d’une page et grille
Grid - La solution
Voici une solution possible avec les grilles
sample/css/grid.html
1 body {
2 display: grid;
3 grid-template-columns: auto 1fr;
4 grid-template-rows: auto 1fr auto;
5 grid-template-areas: "header header"
6 "menu main"
7 "footer footer";
8 grid-gap: 4px;
9 }
10 header {grid-area: header;}
11 nav {grid-area: menu; align-self: start}
12 main {grid-area: main;}
13 footer {grid-area: footer;}
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 166 / 423
CSS Structure d’une page et grille
Grid - Exercice
Comment modifier la solution précédente pour obtenir
ceci ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 167 / 423
CSS Structure d’une page et grille
Grid - Mauvaises pratiques
Vous trouverez dans vos recherches d’autres solutions
Avec des tableaux
Avec des float
Avec des inline−block
Mauvaises pratiques
Depuis l’existence de grid, ce sont de mauvaises
pratiques à éviter
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 168 / 423
3.15 – Menu et boîte flexible
crédit image
CSS Menu et boîte flexible
Ce qu’on veut
La plupart des pages présentent un menu
Comment l’obtenir ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 170 / 423
CSS Menu et boîte flexible
La partie HTML
La partie HTML est souvent présentée comme un
liste de liens
sample/css/menu.html
1 <nav>
2 <ul>
3 <li><a href="#home">Home</a></li>
4 <li><a href="#news">News</a></li>
5 <li><a href="#contact">Contact</a></li>
6 <li><a href="#about">About</a></li>
7 </ul>
8 </nav>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 171 / 423
CSS Menu et boîte flexible
Flex - Une approche moderne
CSS 3 a introduit les boîtes flexibles (flexbox)
Mise en page d’éléments sur 1 dimension (grid=2D)
Ajout d’une nouvelle valeur pour display : flex
Grande souplesse pour désigner
L’alignement, la gestion des espaces, les tailles, les
débordements. . .
Pour les détails : https://css-tricks.com/
snippets/css/a-guide-to-flexbox/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 172 / 423
CSS Menu et boîte flexible
Un menu horizontal avec flex
sample/css/flex.html
1 nav ul {
2 display: flex;
3 list−style−type: none;
4 background−color: teal;
5 }
6 nav li a {
7 display: block;
8 text−decoration: none;
9 color: white;
10 padding: 8px 16px;
11 }
12 nav li a:hover {
13 background−color: brown;
14 color: white;
15 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 173 / 423
CSS Menu et boîte flexible
Un menu vertical avec flex
Un seul changement
sample/css/flexv.html
1 nav ul {
2 display: flex;
3 flex-direction: column;
4 list-style-type: none;
5 background-color: #f1f1f1;
6 }
7 nav li a {
8 display: block;
9 text-decoration: none;
10 color: #000;
11 padding: 8px 16px;
12 }
13 nav li a:hover {
14 background-color: #555;
15 color: white;
16 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 174 / 423
CSS Menu et boîte flexible
Exemple - Un texte centré
Comment obtenir ceci ?
sample/css/center.html
1 <div style="display: flex;
2 justify-content: center;">
3 <h1 style="border: thick solid steelblue;
4 border-radius: 1em;
5 background-color: rgba(173, 216, 230, .3);
6 color: steelblue;
7 padding: .25em 1em">
8 Titre centré avec cadre ajusté
9 </h1>
10 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 175 / 423
CSS Menu et boîte flexible
Exemple - Des feux
Comment obtenir ceci ?
Le code HTML
sample/jquery/feux0.html
1 <div class="feux">
2 <div class="feu rouge"></div>
3 <div class="feu orange"></div>
4 <div class="feu vert"></div>
5 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 176 / 423
CSS Menu et boîte flexible
Exemple - Des feux
Le code CSS
sample/jquery/feux0.html
1 <style>
2 .feux {
3 display: flex;
4 flex-direction: column;
5 justify-content: center;
6 align-items: center;
7 background-color: black;
8 width: 4em;
9 height: 10em;
10 }
11 .feu {
12 width:3em;
13 height:3em;
14 border-radius: 50%;
15 margin: .2em 0;
16 }
17 .rouge {background-color: red;}
18 .orange {background-color: orange;}
19 .vert {background-color: green;}
20 </style>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 177 / 423
3.16 – Image et animation
crédit image
CSS Image et animation
Arrière plan
Une image peut servir d’arrière plan
sample/css/background.html
1 <style>
2 #scene {
3 border: solid;
4 width: 250px; height: 100px;
5 position: relative;
6 background−image: url("ciel−nocturne.png");
7 background−size: cover;
8 }
9 </style>
10 <div id="scene"></div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 179 / 423
CSS Image et animation
Transition
On peut appliquer une transition entre 2 valeurs d’une
propriété
sample/css/transition.html
1 <style>
2 #cube {
3 width: 100px;
4 height: 100px;
5 background−color:red;
6 transition: width 1s, height 1s;
7 }
8 #cube:hover {
9 width: 200px;
10 height: 200px;
11 }
12 </style>
13 <div id="cube"></div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 180 / 423
CSS Image et animation
Animation
On peut aussi définir des animations plus complexes
sample/css/animation.html
1 <style>
2 #cube {
3 width: 100px; height: 100px;
4 background−color:red;
5 animation−name: rainbow;
6 animation−duration: 2s;
7 animation−iteration−count: infinite;
8 animation−direction: alternate−reverse;
9 animation−timing−function: linear;
10 }
11
12 @keyframes rainbow {
13 from {
14 width: 200px; height: 100px;
15 }
16 to {
17 width: 100px; height: 200px;
18 }
19 }
20 </style>
21 <div id="cube"></div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 181 / 423
CSS Image et animation
Application - Vaisseau spatial
On voudrait produire ceci
Avec un bord qui défile et un vaisseau qui bouge
1 Le code HTML est très simple
sample/css/vaisseau.html
1 <div id="scene">
2 <img id="vaisseau" src="vaisseau.png">
3 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 182 / 423
CSS Image et animation
Application - Vaisseau spatial
2 Voici le CSS sans animation
sample/css/vaisseau.html
1 #scene {
2 border: solid; width: 640px; height: 200px;
3 position: relative;
4 background−image: url("ciel−nocturne.png");
5 background−size: cover;
6 }
7 #vaisseau {
8 position: absolute;
9 left: 5%; top: 0%
10 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 183 / 423
CSS Image et animation
Application - Vaisseau spatial
3 Et voici l’animation
sample/css/vaisseau.html
1 #scene {
2 background−repeat: repeat−x;
3 animation: starsSlide 5s linear infinite;
4 }
5 @keyframes starsSlide {
6 from {background−position: 640px 0px;}
7 to {background−position: 0px 0px;}
8 }
9 #vaisseau {
10 animation: shipYoyo 2s linear infinite alternate;
11 }
12 @keyframes shipYoyo {
13 from {top: 0%;}
14 to {top: 80%;}
15 }
4 Il faudra introduire du javascript pour qu’on
puisse contrôler le vaisseau
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 184 / 423
CSS Image et animation
Transparence
On peut vouloir jouer avec la transparence
De 0 (transparent) à 1 (opaque)
opacity : opacité de tout l’élément
Couleur (texte ou fond) avec transparence
rgba(128, 128, 0, 0.2) (rouge presque transparent)
hsla(80, 50%, 30%, 0.8)
(gris-vert foncé, légèrement transparent)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 185 / 423
CSS Image et animation
La transparence
Exemple
background-color: gray background-color: background-color: gray
rgba(0,0,0,.3) opacity: 0.5
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 186 / 423
CSS Image et animation
Éléments flottants
float et clear ont été pensés pour permettre à du texte
d’entourer d’autres éléments (ex : une image)
sample/css/float.html
1 <img src="http://he2b.be/images/HE2B−Logo−DEF−300.jpg"
2 style="float:left; height:50px">
3 <img src="http://he2b.be/images/campus_ESI.gif" style="float:left; height:50px">
4 <img src="http://www.heb.be/esi/images/poesi.png" style="float:right; height:50px">
5 <p>
6 Ce texte va entourer toutes les images pour autant qu’il soit assez long.
7 Comme dans cet exemple si l’écran est réduit au minimum.
8 Bon, il faut quand même qu’il soit assez assez assez assez assez assez long.
9 </p>
10 <p style="clear:both">Mais pas celui−ci</p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 187 / 423
CSS Image et animation
Icônes
sample/css/icon.html
1 <head>
2 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
,→ rel="stylesheet">
3 </head>
4 <body>
5 <i class="material−icons">done</i>
6 <i class="material−icons">person</i>
7 <i class="material−icons">eco</i>
8 <i class="material−icons">star</i>
9 <i class="material−icons">star</i>
10 <i class="material−icons">star_half</i>
11 <i class="material−icons">info</i>
12 </body>
Liste : https://material.io/resources/icons/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 188 / 423
3.17 – Fonction, variable et calcul
crédit image
CSS Fonction, variable et calcul
CSS comme un langage
CSS possède des éléments de programmation
Variable
Calcul
Fonctions
Ex : rgb(), rgba(), hsl(), hsla()
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 190 / 423
CSS Fonction, variable et calcul
Variable
On peut définir une variable et la réutiliser
Don’t Reapeat Y ourself
sample/css/variable.html
1 :root {
2 −−main−color: steelblue;
3 −−main−light−color: aliceblue;
4 }
5 header {
6 background−color: var(−−main−color);
7 color: var(−−main−light−color)
8 }
9 nav {
10 background−color: var(−−main−light−color);
11 color: var(−−main−color);
12 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 191 / 423
CSS Fonction, variable et calcul
Calcul
La fonction calc() permet de faire des calculs
Ex : Reprenons le vaisseau
Sa taille est de 39px
Comment faire pour qu’il aille exactement de haut
en bas ?
@keyframes shipYoyo {
from {top: 0%;}
to {top: calc(100% − 39px);}
}
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 192 / 423
CSS Explorer
Explorer
Il existe beaucoup plus de possibilités
(https://www.w3schools.com/css/)
On y reviendra !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 193 / 423
4 JavaScript
Motivation
Historique
Hello, World !
Calculs
Structures de contrôle
Tableaux
Fonctions
Objets / Librairies
Études de cas
4.1 – Motivation
crédit image
JavaScript Motivation
À quoi sert JavaScript ?
Prenons un simple formulaire où on peut entrer deux
nombres
sample/js/add1.html
1 <form>
2 <input type="number"> +
3 <input type="number">
4 <button type="button">=</button>
5 <output>?</output>
6 </form>
Il ne se passera rien si on clique sur le bouton !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 196 / 423
JavaScript Motivation
Que manque-t’il ?
Il faut introduire du code (en JavaScript)
Qui implémente l’algorithme suivant :
1 Prendre le contenu du premier champ de saisie
2 Prendre le contenu du second champ de saisie
3 Les additionner
4 Mettre le résultat à la place de « ? »
JavaScript est capable de lire et modifier
la page dans laquelle il tourne !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 197 / 423
JavaScript Motivation
Identifier les parties de la page
Le code doit pouvoir désigner des éléments de la page
=⇒ Ajout d’identifiants (pas de changement visuel)
sample/js/add2.html
1 <form>
2 <input id="nb1" type="number"> +
3 <input id="nb2" type="number">
4 <button type="button">=</button>
5 <output id="sum" >?</output>
6 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 198 / 423
JavaScript Motivation
Le code proprement dit
1 Définir une fonction JavaScript
sample/js/add.html
1 function compute() {
2 let nb1 = Number(document.getElementById("nb1").value);
3 let nb2 = Number(document.getElementById("nb2").value);
4 document.getElementById("sum").value = nb1 + nb2;
5 }
2 Indiquer quand elle doit être exécutée
sample/js/add.html
1 <button type="button" onclick="compute()">=</button>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 199 / 423
JavaScript Motivation
En mettant tout ensemble. . .
sample/js/add.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <h1>Addition de deux nombres</h1>
6 <form>
7 <input id="nb1" type="number"> +
8 <input id="nb2" type="number">
9 <button type="button" onclick="compute()">=</button>
10 <output id="sum">
11 </form>
12 <script>
13 function compute() {
14 let nb1 = Number(document.getElementById("nb1").value);
15 let nb2 = Number(document.getElementById("nb2").value);
16 document.getElementById("sum").value = nb1 + nb2;
17 }
18 </script>
19 </body>
20 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 200 / 423
JavaScript Motivation
Nous voici donc avec
un tout nouveau langage à apprendre !
On va l’apprendre en se basant sur vos
connaissances de Java
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 201 / 423
4.2 – Ce que c’est et d’où ça vient
crédit image
JavaScript Ce que c’est et d’où ça vient
Historique
1995 - Naissance
Créé par Brendan Eich (Netscape)
Scripts tournant dans un client web
JavaScript 6= Java !
Au départ, beaucoup utilisé comme « gadget »
crédit image
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 203 / 423
JavaScript Ce que c’est et d’où ça vient
Historique
1996 - 2014 : Évolution confuse
Chaque navigateur a sa variante
Parfois même un nom différent
(JScript de MicroSoft)
=⇒ problèmes de compatibilité
Apparition de concurrents : Flash
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 204 / 423
JavaScript Ce que c’est et d’où ça vient
Historique
2015 à nos jours : L’âge d’or
Standardisation par ECMA (ECMAScript)
2015 : ECMAScript 6 est une avancée majeure
Son utilisation explose
Présent même sur le serveur : NodeJS
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 205 / 423
4.3 – Hello World !
crédit image
JavaScript Hello World !
Exemple : « Hello, world ! » en popup
sample/js/hello.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <script>
6 alert("Hello, world!");
7 </script>
8 </body>
9 </html>
JavaScript intégré à la page
Rien d’autre à faire,
Tous les navigateurs comprennent le JavaScript
Même si pas forcément la dernière version
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 207 / 423
JavaScript Hello World !
Exemple : « Hello, world ! » en console
sample/js/hello2.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <script>
6 console.log("Hello, world !");
7 </script>
8 </body>
9 </html>
Texte affiché sur la console
Comment afficher la console ?
Dépend du navigateur
Utile pour débugger (HTML et CSS aussi !)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 208 / 423
JavaScript Hello World !
Exemple : « Hello, world ! » dans la page
sample/js/hellowrite.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <script>
6 document.write("<h1>Hello, world!</h1>");
7 </script>
8 </body>
9 </html>
Texte ajouté à la page
À l’endroit où se trouve le script
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 209 / 423
JavaScript Hello World !
Fichier externe
Bonne pratique : code dans un fichier à part
D’extension .js
Sans les balises <script>
Appelé
dans le HTML via la variante
<script src="myScript.js"></script>
Dans le head pour les déclarations de fonctions
En fin de body pour l’exécution du code
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 210 / 423
JavaScript Hello World !
Fichier externe
sample/js/hello3.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 </head>
5 <body>
6 <script src="hello.js"></script>
7 </body>
8 </html>
sample/js/hello.js
1 console.log("Hello, world !");
Le nom de fichier peut être relatif ou absolu
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 211 / 423
JavaScript Hello World !
Fichier externe
Le fichier externe est préféré dans un développement réel
Plus lisible
Plus maintenable
Plus facile de collaborer
Plus facile de réutiliser
Plus rapide (système de cache)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 212 / 423
4.4 – Variables, types et calculs
crédit image
JavaScript Variables, types et calculs
Les variables
Déclarer une variable : let nb = 42;
Pas de type déclaré
Peut changer de type (typage dynamique)
let nb = 42;
nb = "hello";
Vous verrez aussi souvent : var nb = 42;
Sens légèrement différent
let est plus proche de ce qu’on trouve en Java
Préférer let à var
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 214 / 423
JavaScript Variables, types et calculs
Demander la valeur
La valeur peut-être demandée à l’utilisateur
Utile surtout pour les tests
sample/js/helloyou.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <script>
6 let name = prompt("Quel est votre nom ?");
7 console.log("Hello, " + name);
8 </script>
9 </body>
10 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 215 / 423
JavaScript Variables, types et calculs
Les nombres
Numeric
Comprend les entiers et les flottants
Opérateurs : +, −, ∗, /, ∗∗, ++, −−
Objet
Math
x = Math.trunc(13/2);
x = Math.sin(Math.PI);
max = Math.max(a,b,c);
console.log(Math.random());
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 216 / 423
JavaScript Variables, types et calculs
Les chaînes
String
Peut s’écrire "Hello" ou ’Hello’
Backquotes pour inclure des expressions :
‘1+1=${1+1}‘ donne "1+1=2"
Pas de type caractère séparé
Opérateur : +
Objet
possédant des attributs et méthodes
"hello".length;
"hello".charAt(1); // "e"
"Hello, world !".substr(7,5); // "world"
"hello".toUpperCase(); // "HELLO"
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 217 / 423
JavaScript Variables, types et calculs
Conversions
De
nombreuses conversions automatiques
"a" + 1; // "a1"
1 + "a"; // "1a"
Attention
!
"3" ∗ "4"; // 12
"3" + "4"; // "34"
Conversions
explicites possibles
Number("3") + Number("4"); // 7
let nb = 42;
nb.toString() + nb; // "4242"
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 218 / 423
JavaScript Variables, types et calculs
Les booléens
Boolean
Est considéré comme faux : false, 0, "". . .
Est
considéré comme vrai : true et tout le reste
Boolean(42); // vrai
if(42) {console.log("hello");} // affiche le message
a=41; if(a=42) {console.log("hello");} // aussi (piège !)
Opérateurs de comparaison : <, >, <=, >=
Opérateurs booléens : !, &&, ||
Opérateurs d’égalité : == (!=) VS === (!==)
5=="5" // vrai : même valeur
5==="5" // faux : même valeur mais pas même type
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 219 / 423
4.5 – Les structures de contrôle
crédit image
JavaScript Les structures de contrôle
Les alternatives
Vous ne vous sentirez pas dépaysé !
sample/js/switch.html
1
2 switch (new Date().getDay()) {
3 case 4:
4 case 5:
sample/js/if.html
1 5 text = "Le weekend arrive...";
2 let time = new Date().getHours(); 6 break;
3 if (time < 10) { 7 case 0:
4 greeting = "Good morning"; 8 case 6:
5 } else if (time < 20) { 9 text = "Weekend !";
6 greeting = "Good day"; 10 break;
7 } else { 11 default:
8 greeting = "Good evening"; 12 text = "Weekend fini :(";
9 } 13 }
Les case acceptent toute expression et la comparaison se
fait avec ===
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 221 / 423
JavaScript Les structures de contrôle
Les boucles
Idem pour les boucles !
sample/js/for.html
1
2 for (let i = 0; i < 5; i++) {
3 console.log(i);
4 }
sample/js/while.html sample/js/dowhile.html
1 let i=0; 1 let i=0;
2 while (i < 10) { 2 do {
3 console.log(i); 3 console.log(i);
4 i++; 4 i++;
5 } 5 } while (i < 10);
Le foreach existe aussi ; nous le verrons plus tard !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 222 / 423
4.6 – Les tableaux
JavaScript Les tableaux
Principe
Proche d’une liste Java dans le fonctionnement
Emprunts aux tableaux Java pour la syntaxe
Création
En donnant les valeurs : tab = [1, 42, −3];
Ou en le créant vide : tab = [];
Jamais en donnant la taille
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 224 / 423
JavaScript Les tableaux
Accès et taille
idem Java
sample/js/tablength.html
1 let tab = [1, 42, −3];
2 console.log("Tableau: "+tab); // "Tableau: 1, 42, −3"
3 for(let i=0; i<tab.length; i++) {
4 console.log(tab[i]);
5 }
Mémoire
Un tableau est une référence
sample/js/tabref.html
1 let tab1 = [1,2,3];
2 let tab2 = tab1;
3 tab2[1]=9;
4 console.log("Tableau:"+tab1); // "Tableau: 1, 9, 3"
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 225 / 423
JavaScript Les tableaux
Le faire grandir
En assignant une valeur à l’élément « suivant »
sample/js/tabadd.html
1 let tab = [];
2 for(let i=0; i<10; i++) {
3 tab[i] = i;
4 }
Techniquement, on peut créer des « vides » mais pas
recommandé
sample/js/tabtrou.html
1 let tab = [];
2 for(let i=10; i<20; i=i+2) {
3 tab[i] = i;
4 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 226 / 423
JavaScript Les tableaux
Ajout
Ajout à la fin : tab.push(52);
Ajout au début : tab.unshift(52);
sample/js/tabpush.html
1 let tab1 = [];
2 let tab2 = [];
3 for(let i=0; i<5; i++) {
4 tab1.push(i);
5 tab2.unshift(i);
6 }
7 // tab1 == [0,1,2,3,4];
8 // tab2 == [4,3,2,1,0];
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 227 / 423
JavaScript Les tableaux
Suppression
Suppression du dernier élément : last = tab.pop();
Suppression du 1er élément : first = tab.shift();
sample/js/tabpop.html
1 let tab = [1, 42, −3];
2 while(tab.length>0) {
3 console.log(tab.pop());
4 }
5 console.log("tab:"+tab);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 228 / 423
JavaScript Les tableaux
Modifier
splice
permet d’ajouter, enlever, remplacer au milieu
tab.splice(où, combien à enlever, éléments à ajouter...);
Enlever les éléments 3 et 4 : tab.splice(3,2);
Insérer en position 3 : tab.splice(3,0,10,11,12);
Remplacer en pos 3 et 4 : tab.splice(3,2,14,15);
sample/js/tabsplice.html
1 let tab = [1, 42, −3, 11, −15, −16, 17];
2 let i = tab.length−1;
3 while(i>=0) {
4 if(tab[i]<0) {
5 tab.splice(i,1);
6 }
7 i−−;
8 }
9 console.log("tab:"+tab);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 229 / 423
JavaScript Les tableaux
Pas de type unique
JavaScript est permissif sur les types ; on peut
mélanger
let tab = [1, true, "hello"];
typeof permet de connaître le type d’une valeur
sample/js/tabtypeof.html
1 let tab = [1, true, "hello"];
2 for(let i=0; i<tab.length; i++) {
3 console.log(typeof tab[i]);
4 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 230 / 423
JavaScript Les tableaux
Boucler sur un tableau
L’équivalent du for each de Java est le for of
sample/js/tabforof.html
1 let tab = [1, true, "hello"];
2 for(let val of tab) {
3 console.log(val + " de type " + typeof val);
4 }
Mêmes restrictions qu’en Java
En lecture seule / Pas accès à l’indice
sample/js/tabforof2.html
1 let tab = [1, true, "hello"];
2 for(let val of tab) {
3 val = 0;
4 } // Le tableau n’a pas changé
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 231 / 423
JavaScript Les tableaux
Plusieurs dimensions
Pas de règle spéciale pour un tableau 2D
C’est un tableau de tableaux
sample/js/pascal.html
1 let pascal = [[1],[1,1],[1,2,1],[1,3,3,1]];
2
3 for(let i=0; i<pascal.length; i++) {
4 for(let j=0; j<pascal[i].length; j++) {
5 console.log(pascal[i][j]);
6 }
7 }
8
9 for(let ligne of pascal) {
10 for(let val of ligne) {
11 console.log(val);
12 }
13 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 232 / 423
4.7 – Les fonctions
JavaScript Les fonctions
Les fonctions
Aussi appelée : routine, méthode. . . dans d’autres
contextes
sample/js/fct.html
1 function add (nb1, nb2) {
2 return nb1+nb2;
3 }
4
5 console.log( add(12,30) );
On ne déclare pas le type des paramètres
On n’indique pas le type de retour
Si pas de return, retourne undefined
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 234 / 423
JavaScript Les fonctions
Pas de vérification de type
Appel avec des paramètres de n’importe quel type
add(12,30); // 42
add("12",30); // "1230"
add(12,"30"); // "1230"
add("12","30"); // "1230"
add(12,true); // 13
add("hello",true); // "hellotrue"
Réflexion :
Que va retourner une méthode multiplierPar2(nb) si on
l’appelle ainsi : multiplierPar2("21") ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 235 / 423
JavaScript Les fonctions
Pas de vérification du nombre
S’il manque un paramètre, il vaut undefined
On peut spécifier une autre valeur par défaut
S’il y a trop de paramètres, il ne sont pas utilisés
sample/js/fct2.html
1 function log(a,b="help",c) {
2 console.log(a); console.log(b); console.log(c);
3 }
4 log(1,2,3); // 1 2 3
5 log(1); // 1 help undefined
6 log(1,2,3,4); // 1 2 3
Pas de surcharge en JavaScript : interdit d’avoir 2
méthodes avec le même nom. Logique ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 236 / 423
JavaScript Les fonctions
Accès aux paramètres residuels
Il est possible d’accéder aux paramètres surnuméraires
sample/js/fct3.html
1 function log(message, ...expr) {
C’est vu comme un tableau
sample/js/fct3.html
1 function log(message, ...expr) {
2 console.log(message+": " + expr);
3 }
4 log("les 3 nombres sont", 12, 24, 42);
Peut-être utilisé avec un tableau si on le décompose
sample/js/fct3.html
1 let nbs = [12, 24, 42];
2 log("les 3 nombres sont", nbs);
3 log("les 3 nombres sont", ...nbs); // Différence ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 237 / 423
JavaScript Les fonctions
Accès générique aux paramètres
Le tableau arguments contient tous les arguments
sample/js/fctmax.html
1 function max() {
2 if (arguments.length==0) {
3 return undefined;
4 }
5 let max = arguments[0];
6 for(let val of arguments) {
7 if(val>max) {
8 max = val;
9 }
10 }
11 return max;
12 }
13
14 console.log(max(−3,4,2,8,1));
15 console.log(max(42));
16 console.log(max());
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 238 / 423
JavaScript Les fonctions
Pas de main
Pas de méthode principale
Que fait ceci ?
sample/js/main.html
1 <body>
2 <script>
3 function main() {
4 console.log("Hello, world !");
5 }
6 </script>
7 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 239 / 423
JavaScript Les fonctions
Pas de main
Et ceci ?
sample/js/main2.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <script>
6 function main() {
7 console.log("Hello, world !");
8 }
9 main();
10 </script>
11 </body>
12 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 240 / 423
JavaScript Les fonctions
Pas de main
Et enfin ceci ?
sample/js/main2b.html
1 <!DOCTYPE html>
2 <html>
3 <head></head>
4 <body>
5 <script>
6 function main() {
7 console.log("Hello, world !");
8 }
9 main;
10 </script>
11 </body>
12 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 241 / 423
JavaScript Les fonctions
Pas de main - Bonne pratique
sample/js/main3.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="main.js"></script>
5 </head>
6 <body>
7 <h1>Bonne pratique</h1>
8 <script>
9 main();
10 </script>
11 </body>
12 </html>
sample/js/main.js
1 function main() {
2 console.log("Hello, world !");
3 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 242 / 423
JavaScript Les fonctions
Gestion des erreurs
Proche de Java
sample/js/trycatch.html
1 function sqrt(nb) {
2 if(nb<0) {
3 throw new Error("Nb négatif: "+nb);
4 }
5 // ...
6 }
7
8 try{
9 console.log(sqrt(−2));
10 } catch(e) {
11 console.log(e.message);
12 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 243 / 423
JavaScript Les fonctions
Objet de première classe
En informatique, un objet de première classe est un
élément de langage qui peut être utilisé n’importe où.
En JavaScript, c’est le cas des fonctions
On peut l’assigner à une variable
sample/js/fctanonyme.html
1 // fonction anonyme
2 let fct = function(a,b) {
3 return a+b;
4 };
5 let fct2 = fct;
6 console.log( fct );
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 244 / 423
JavaScript Les fonctions
Objet de première classe
Mais
une variable ne peut pas porter le même nom
let fct = fct(12,30); // Erreur! Variable déjà déclarée
On peut la passer en paramètre
sample/js/fctpar.html
1 function testValue(value, test) {
2 if (!test(value)) {
3 console.log("Oups !");
4 }
5 }
6 function estPair(nb) {
7 return nb%2==0;
8 }
9 testValue( 41, estPair);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 245 / 423
JavaScript Les fonctions
Objet de première classe
Peut être la valeur de retour
sample/js/fctreturn.html
1 function add(a) {
2 return function(b) {
3 return a + b;
4 }
5 }
6 let add5 = add(5);
7 add5(5); // 10
8 add5(8); // 13
Bien comprendre ce slide et le précédent avant de
passer à la suite !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 246 / 423
JavaScript Les fonctions
Fonction flèchée (arrow function)
Depuis EMACScript 6, écriture compacte pour
fonctions anonymes
sample/js/fctarrow.html
1 function testValue(value, test) {
2 if (!test(value)) {
3 console.log("Oups !");
4 }
5 }
6 testValue( 41, nb=>nb%2==0);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 247 / 423
4.8 – L’orienté objet
crédit image
JavaScript L’orienté objet
Javascript et l’orienté objet
JavaScript est un langage orienté objet
Créer des objets
Fort différent de Java
Utiliser un objet
Notation pointée comme en Java
Exemple : document.getElementById("sum").value
Nous reviendrons sur l’orienté objet plus tard !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 249 / 423
4.9 – Librairies
crédit image
JavaScript Librairies
Les libraires
JavaScript offre des classes comme on peut en
retrouver en Java pour les besoins les plus
courants
Math : constantes et fonctions mathématiques
Date : date et heure
Exemple :
let now = new Date(); console.log(now.getHours());
...
Consultez la documentation pour les détails. . .
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 251 / 423
4.10 – Étude de cas
crédit image
JavaScript Étude de cas
Étude de cas 1 – Le PGCD
Écrivons une application
qui calcule le PGCD de 2 nombres
1 Voici la fonction qui fait le calcul
sample/js/pgcd/pgcd.js
1 function pgcd(a,b) {
2 while(b>0) {
3 let r = a%b;
4 a = b;
5 b = r;
6 }
7 return a;
8 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 253 / 423
JavaScript Étude de cas
2 On peut la tester ainsi
sample/js/pgcd/pgcd-test.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="pgcd.js"></script>
5 <script>
6 alert("Calcul du PGCD de 2 nombres");
7 let a = prompt("Entrer un premier nombre");
8 let b = prompt("Entrer un second nombre");
9 let pgcdAB = pgcd(a,b);
10 alert(‘Leur PGCD est ${pgcdAB}‘);
11 </script>
12 </head>
13 <body></body>
14 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 254 / 423
JavaScript Étude de cas
3 On peut aussi prévoir un formulaire
sample/js/pgcd/pgcd.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="pgcd.js"></script>
5 </head>
6 <body>
7 <h1>PGCD de 2 nombres</h1>
8 <form>
9 PGCD de <input id="nb1" type="number">
10 et de <input id="nb2" type="number">
11 <button type="button" onclick="compute()">=</button>
12 <output id="pgcd">
13 </form>
14 <script>
15 function compute() {
16 let nb1 = Number(document.getElementById("nb1").value);
17 let nb2 = Number(document.getElementById("nb2").value);
18 document.getElementById("pgcd").value = pgcd(nb1,nb2);
19 }
20 </script>
21 </body>
22 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 255 / 423
JavaScript Étude de cas
Étude de cas 2 – Le triangle de Pascal
Écrivons une application
qui construit le triangle de Pascal
1 Voici la fonction qui fait le calcul
sample/js/pascal/pascal.js
1 function pascal(n) {
2 let pascal = [];
3 for(let lg=0; lg<n; lg++) {
4 pascal[lg] = [1];
5 for(let col=1; col<lg; col++) {
6 pascal[lg][col] = pascal[lg−1][col−1]
7 + pascal[lg−1][col];
8 }
9 pascal[lg][lg]=1;
10 }
11 return pascal;
12 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 256 / 423
JavaScript Étude de cas
2 On peut la tester ainsi
sample/js/pascal/test.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="pascal.js"></script>
5 <script>
6 alert("Triangle de pascal");
7 let nb = prompt("Entrer le nb de lignes du triangle");
8 console.log(pascal(nb));
9 </script>
10 </head>
11 <body></body>
12 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 257 / 423
JavaScript Étude de cas
Pour aller plus loin. . .
https://www.w3schools.com/js/
http://javascript.info/
http://es6-features.org/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 258 / 423
5 jQuery
Introduction
Syntaxe de base
Événement
5.1 – Introduction
crédit image
jQuery Introduction
jQuery
Bibliothèque JavaScript
Facilite la manipulation des pages
Gère la compatibilité entre navigateurs
De loin la plus utilisée de nos jours
Créée en 2006 par John Resig
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 261 / 423
jQuery Introduction
Utilisation
Il suffit d’ajouter ceci à la page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Se charge comme n’importe quel code JS
min représente une version
minifiée (sans espace, commentaire)
compressée
Chargement depuis un CDN
Content Delivery Network
Plus rapide car probablement déjà téléchargé (cache)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 262 / 423
jQuery Introduction
Syntaxe
jQuery introduit une seule fonction : $
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 263 / 423
jQuery Introduction
Sélecteur
Désigne ce sur quoi on agit (notation CSS)
$("h1") tous les titres de niveau 1
$("#menu") l’élément d’id menu
$(".menu") tous les éléments de classe menu
$("p.note") tous les paragraphes de classe note
$("[type=password]") tous les éléments qui ont un
attribut type valant password
$(document) tout le document
$(this) l’élément en cours
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 264 / 423
jQuery Introduction
Premier exemple
Cliquer sur le bouton cache tous les paragraphes
sample/jquery/ex1.html
1 <script src=
2 "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
3 </script>
4 <p>Paragraphe 1</p>
5 <p>Paragraphe 2</p>
6 <p>Paragraphe 3</p>
7 <button>Cliquer</button>
8 <script>
9 $("button").click(
10 function(){
11 $("p").hide();
12 }
13 );
14 </script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 265 / 423
jQuery Introduction
Une précaution
Souvent, on rencontrera plutôt ce code
sample/jquery/ex2.html
1 $(document).ready(
2 function(){
3 $("button").click(
4 function(){
5 $("p").hide();
6 }
7 );
8 }
9 );
qui s’assure que la page soit prête avant d’exécuter le
code
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 266 / 423
jQuery Introduction
Une précaution
Avec un peu d’habitude, vous utiliserez la mise en page
condensée
sample/jquery/ex3.html
1 $(document).ready( function(){
2 $("button").click( function(){
3 $("p").hide();
4 });
5 });
qui est celle qu’on rencontre le plus souvent
Pourquoi le 1er function
est-il nécessaire ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 267 / 423
jQuery Introduction
Ne pas confondre $() et ${}
Attention à ce piège !
Bien distinguer les 2 $
sample/jquery/expr.html
1 let size=3;
2 $("h2").css("font−size",‘${size}em‘);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 268 / 423
jQuery Introduction
Actions possibles
jQuery très fort pour manipuler la page
Afficher/cacher les éléments
Modifier le contenu des éléments
Ajouter/supprimer des éléments
Déplacer des éléments
...
Accès via le DOM
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 269 / 423
5.2 – Événementiel
crédit image
jQuery Événementiel
Définition
Programmation événementielle
Un bout de code est associé à un événement ;
Il est exécuté quand l’événement survient
Action de l’utilisateur
Temps écoulé
Opération terminée
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 271 / 423
jQuery Événementiel
vs programmation séquentielle
Différent de la programmation séquentielle
Beaucoup utilisé pour les interfaces graphiques
L’utilisateur contrôle ce qui est fait et quand
En pratique : mélange des 2 sortes de
programmation
Quand a-t-on déjà vu du code événementiel ?
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 272 / 423
jQuery Événementiel
Les événements
load La page est chargée
click L’utilisateur clique sur un bouton
mouseover L’utilisateur passe sur un élément
avec la souris
keydown L’utilisateur appuie sur une touche
du clavier
...
Pour une liste complète : https://www.w3schools.
com/tags/ref_eventattributes.asp
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 273 / 423
jQuery Événementiel
Associer du code
Via les attributs onXXX
sample/js/event.html
1 <body onload="console.log(’load’)"
2 onkeydown="console.log(’key’)">
3 <p onclick="console.log(’click’)">
4 Cliquez
5 </p>
6 <p onmouseover="console.log(’mouseover’)">
7 Passez
8 </p>
9 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 274 / 423
jQuery Événementiel
En pratique
On appelle une fonction (handler) qui fait le boulot
sample/js/event2.html
1 <button onclick="go()">GO</button>
2 <script>
3 function go() {
4 console.log("C’est parti !");
5 }
6 </script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 275 / 423
jQuery Événementiel
En JavaScript pur
L’association événement-code peut se faire en
JavaScript pur
sample/js/event3.html
1 <button id="goButton">GO</button>
2 <script>
3 function go() {
4 console.log("C’est parti !");
5 }
6 document.getElementById("goButton").onclick = go;
7 </script>
Ou avec jQuery
sample/js/event4.html
1 $("#goButton").click(go);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 276 / 423
jQuery Événementiel
Gros piège quand on débute
Attention !
Parmi ces appels, 2 seulement sont corrects
Lesquels et pourquoi ?
<button onclick="go()" id="goButton">GO</button>
<button onclick="go" id="goButton">GO</button>
$("#goButton").click(go());
$("#goButton").click(go);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 277 / 423
jQuery Événementiel
Quelques évenements disponibles
Souris Clavier Formulaire Document
click keypress submit ready
dblclick keydown change
mouseover keyup focus
Revoyez ce code
sample/jquery/ex3.html
1 $(document).ready( function(){
2 $("button").click( function(){
3 $("p").hide();
4 });
5 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 278 / 423
jQuery Événementiel
Réagir au clavier
Comment savoir quelle touche a été appuyée ?
Chaque handler peut recevoir un objet en paramètre
Généralement appelé : event
Décrit l’événement
Pour le clavier : event.key donne la touche
function brol(event) {
console.log("touche pressée : " + event.key);
}
$(document).keydown( brol );
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 279 / 423
jQuery Événementiel
Exemple - Vaisseau
Reprenons l’exemple du vaisseau spatial
Rappel du code html
sample/css/vaisseau-jq.html
1 <div id="scene">
2 <img id="vaisseau" src="vaisseau.png">
3 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 280 / 423
jQuery Événementiel
Exemple - Vaisseau
Rappel du css (sans l’animation du vaisseau)
sample/css/vaisseau-jq.css
1 #scene {
2 border: solid; width: 640px; height: 200px;
3 position: relative;
4 background−image: url("ciel−nocturne.png");
5 background−size: cover;
6 }
7 #vaisseau {
8 position: absolute;
9 left: 5%; top: 90px;
10 }
11 #scene {
12 background−repeat: repeat−x;
13 animation: starsSlide 5s linear infinite;
14 }
15 @keyframes starsSlide {
16 from {background−position: 640px 0px;}
17 to {background−position: 0px 0px;}
18 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 281 / 423
jQuery Événementiel
Exemple - Vaisseau
Le javascript peut s’écrire
sample/css/vaisseau-jq.js
1 let posShip = 90;
2
3 function moveShip(event) {
4 switch (event.key) {
5 case "ArrowUp":
6 posShip−=4;
7 break;
8 case "ArrowDown":
9 posShip+=4;
10 break;
11 }
12 $("#vaisseau").css("top",posShip); // Va modifier le css !
13 }
14
15 $(document).ready( function() {
16 $(document).keydown(moveShip);
17 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 282 / 423
6 DOM
Introduction
Sélectionner
Modifier
Supprimer
Parcourir
Ajouter
6.1 – Introduction
crédit image
DOM Introduction
Objectif - une liste de tâches
On voudrait une application qui permette de gérer une
liste de tâches
Le bouton Fait ! enlève l’élément de la liste
Le bouton Ajouter ajoute un élément dans la liste
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 285 / 423
DOM Introduction
Manipuler une page
JavaScript est capable de manipuler
la page dans laquelle il se trouve !
Interroger/modifier le contenu des éléments
Afficher/cacher les éléments
Ajouter/supprimer des éléments
Déplacer des éléments
Associer du code à des événements
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 286 / 423
DOM Introduction
Le DOM
Le DOM (Document Object Model)
Permet la manipulation d’une page HTML
Il offre
1 Une vue objet de chaque élément de la page
2 Une vue de la page sous forme d’un arbre d’objets
Tous ces objets possèdent des méthodes et des
attributs pour manipuler la page
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 287 / 423
DOM Introduction
La page est un arbre
Le DOM permet de voir la page comme un arbre
Par exemple, la page est vue ainsi
sample/jquery/dom.html
1 <html>
2 <head>
3 <title>My title</title>
4 </head>
5 <body>
6 <h1>A heading</h1>
7 <a href="#">Link text</a>
8 </body>
9 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 288 / 423
DOM Introduction
Identifier un élément
On peut accéder au DOM
en Javascript pur ou via jQuery.
Exemples
Javascript pur :
document.getElementById("goButton")
jQuery : $("#goButton")
Nous verrons uniquement le jQuery
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 289 / 423
DOM Introduction
Sélecteur
Rappel des sélecteurs
$("h1") tous les titres de niveau 1
$("#menu") l’élément d’id menu
$(".menu") tous les éléments de classe menu
$("p.note") tous les paragraphes de classe note
$("[type=password]") tous les éléments qui ont un
attribut type valant password
$(document) tout le document
$(this) l’élément en cours
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 290 / 423
6.2 – Modifier les éléments
crédit image
DOM Modifier les éléments
Chaque élément est un objet
Une notation comme $("#important")
Donne l’élément d’id important comme un objet
Fournit de nombreuses méthodes pour le questionner,
le modifier
Pas les mêmes que JavaScript pur !
On peut sélectionner plusieurs éléments
(ex : $("p"))
Une question interroge le premier
Une modification agit sur tous
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 292 / 423
DOM Modifier les éléments
Questionner
.text() : donne son contenu (sans les balises)
.html() : donne son contenu (avec les balises)
.val() : donne la valeur (champ de formulaire)
.attr("href") : donne la valeur de l’attribut href
.css("color") : donne la valeur de la propriété color
du style
.width() : donne la largeur actuelle
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 293 / 423
DOM Modifier les éléments
Modifier
.text("val") : modifie le contenu (sans balise)
.html("val") : modifie le contenu (avec balises)
.val("val") : modifie la valeur (champ de formulaire)
.attr("attr", "val") : modifie l’attribut attr à la
valeur val
.css("prop", "val") : modifie le propriété de style prop
à la valeur val
.addClass/removeClass/toggleClass("nom") :
ajoute/enlève/bascule la classe nom à l’élément
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 294 / 423
DOM Modifier les éléments
Exemple 1 - Modifier le contenu
sample/dom/textContent.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script
5 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
6 </script>
7 <script>
8 function change() {
9 let p = $("#para");
10 p.text("Nouveau texte.");
11 }
12 </script>
13 </head>
14 <body>
15 <p id="para">Ancien texte.</p>
16 <button onclick="change()">Changer</button>
17 </body>
18 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 295 / 423
DOM Modifier les éléments
Exemple 2 - Modifier un attribut
sample/dom/attribut.html
1 <script>
2 function size(nbPx) {
3 $("#logo").attr("height",nbPx);
4 }
5 </script>
sample/dom/attribut.html
1 <body>
2 <img id="logo" src="../html/esi.png" height="100">
3 <button onclick="size(400)">Grand</button>
4 <button onclick="size(100)">Petit</button>
5 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 296 / 423
DOM Modifier les éléments
Exemple 3 - Modifier le style
sample/dom/style.html
1 <script>
2 function color(col) {
3 $("#para").css("color",col);
4 }
5 </script>
sample/dom/style.html
1 <body>
2 <p id="para">Un texte</p>
3 <button onclick="color(’red’)">Rouge</button>
4 <button onclick="color(’green’)">Vert</button>
5 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 297 / 423
DOM Modifier les éléments
Exemple 4 - this
$(this) représente l’élément associé à l’événement
sample/dom/this.html
1 <script>
2 function strike(item) {
3 item.css("textDecoration","line−through");
4 }
5 </script>
sample/dom/this.html
1 <body>
2 <ul>
3 <li onclick="strike($(this))">Acheter du lait</li>
4 <li onclick="strike($(this))">Apprendre jQuery</li>
5 </ul>
6 </body>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 298 / 423
DOM Modifier les éléments
Modifier
Les fonctions de modification retournent l’objet modifié
On peut donc les chainer
Exemple :
$("p.important")
.text("effacé")
.removeClass("important")
.css("background−color", "lightblue");
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 299 / 423
6.3 – Supprimer
crédit image
DOM Supprimer
Supprimer un élément
element.remove() enlève l’élément de la page
sample/dom/remove.html
1 <script>
2 function remove(item) {
3 item.remove();
4 }
5 </script>
sample/dom/remove.html
1 <body>
2 <ul>
3 <li onclick="remove($(this))">Acheter du lait</li>
4 <li onclick="remove($(this))">Apprendre jQuery</li>
5 </ul>
6 </body>
element.empty() supprime tous les fils
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 301 / 423
DOM Supprimer
Apparition / Disparition
L’élement est toujours présent dans le DOM
.hide/show/toggle() : cache/affiche/bascule l’élément
.fadeIn/fadeOut/slideDown/slideUp() :
apparition/disparition avec effets
.animate(...) : déplacement/agrandissement/. . .
Bonne pratique
Les visuels complexes sont de plus en plus faits avec
CSS3.
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 302 / 423
DOM Supprimer
Exemple - Un feu rouge
sample/jquery/feux.html
1 <div class="feux">
2 <div class="feu rouge"></div>
3 <div class="feu orange eteint"></div>
4 <div class="feu vert eteint"></div>
5 </div>
sample/jquery/feux.html
1 .rouge {background−color: red;}
2 .orange {background−color: orange;}
3 .vert {background−color: green;}
4 .eteint {background−color: gray;}
Ordre
eteint gagne sur vert car
Après dans le CSS
Peu importe l’ordre dans l’attribut
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 303 / 423
DOM Supprimer
Version 1 - On clique sur un feu pour l’allumer
sample/jquery/feux.html
1 function allumer(feuChoisi) {
2 $(".feu").addClass("eteint");
3 feuChoisi.removeClass("eteint");
4 }
5 $(document).ready( function() {
6 $(".feu").click( function() {
7 allumer($(this));
8 })
9 })
Plus tard, on introduira des versions avec un timer pour
que les feux alternent automatiquement
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 304 / 423
6.4 – Parcourir
crédit image
DOM Parcourir
Parcourir un résultat
Si un résultat est composé de plusieurs éléments,
Ce n’est pas un tableau (pas de for of)
Méthodes spécifiques pour parcourir
elts.first() le premier
elts.last() le dernier
elts.eq(i) le ie (à partir de 0)
elts.length le nombre d’éléments
elts.each(i,fct) exécute la fonction sur chaque élément
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 306 / 423
DOM Parcourir
Exemples
Parcours classique
sample/dom/parcours1.html
1 let para = $("p");
2 // Parcours avec un for
3 for(let i=0; i<para.length; i++) {
4 console.log("> " + para.eq(i).text());
5 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 307 / 423
DOM Parcourir
Exemples
Parcours plus moderne
sample/dom/parcours1.html
1 let para = $("p");
2 // Parcours avec un each et du fonctionnel
3 para.each( function() {
4 console.log("> " + $(this).text());
5 });
6 // Idem avec l’indice
7 para.each( function(i) {
8 console.log( i + "> " + $(this).text());
9 });
10 // Variante avec second argument
11 para.each( function(i,elt) {
12 console.log( i + "> " + $(elt).text());
13 });
14 // Idem avec notation =>
15 para.each( (i,elt) => console.log(i + "> " + $(elt).text()) );
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 308 / 423
DOM Parcourir
Se déplacer
elt.parent() le parent direct
elt.children() les enfants
elt.next() le suivant
elt.siblings() tous les frères
elt.find("CSS") cherche un fils correspondant au critère
elt.index() position d’un élément parmi ses frères
Exemple : Met en rouge le premier élément de la page
sample/dom/parcours.html
1 $("body").children().first().css("color","red");
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 309 / 423
DOM Parcourir
Exemple - todo
Supposons une page comme celle-ci
sample/jquery/todo.html
1 <ul>
2 <li>Acheter du lait <button>Fait !</button></li>
3 <li>Apprendre jQuery <button>Fait !</button></li>
4 </ul>
On peut écrire un code général pour les boutons
sample/jquery/todo.html
1 $(document).ready( function(){
2 $("button").click( function(){
3 $(this).parent().fadeOut();
4 });
5 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 310 / 423
DOM Parcourir
Exemple - Déployer des éléments de liste
Soit une liste avec des sous-listes
sample/jquery/plier.html
1 function deployUndeploy() {
2 $(this).children().toggle();
3 }
4
5 $(document).ready( function(){
6 // Que faire qd on clique sur un item
7 $("ol>li").click(deployUndeploy);
8 // Sous−listes cachées au début
9 $("ol>li").each(deployUndeploy);
10 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 311 / 423
6.5 – Ajouter
crédit image
DOM Ajouter
Ajouter
Pour créer un nouvel élément
${"<tag>"} crée un élément de tag donné
Pour l’insérer dans la page
append(elt) ajoute l’élément comme dernier fils
prepend(elt) ajoute l’élément comme premier fils
after(elt) ajoute l’élément comme frère suivant
before(elt) ajoute l’élément comme frère précédent
Exemple : ajoute un item en début de liste
let item = $("<li>").text("Urgent !");
$("ol").prepend( item );
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 313 / 423
DOM Ajouter
Récapitulatif - une liste de tâches
On voudrait une application qui permette de gérer une
liste de tâches
1 Le code HTML peut ressembler à ceci
sample/form/todo.html
1 <h1>Ma liste de tâches</h1>
2 <ul></ul>
3 <form>
4 <input id="newTodo" type="text">
5 <button id="addTodo" type="button">Ajouter</button>
6 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 314 / 423
DOM Ajouter
Récapitulatif - une liste de tâches
2 Et le code associé est
sample/form/todo.html
1 // Fonction pour ajouter un item
2 function todoAdd() {
3 let todoMsg = $("#newTodo").val();
4 $("#newTodo").val("");
5 let fait = $("<button>")
6 .text("Fait !")
7 .addClass("doneTodo")
8 .click(todoDone);
9 $("ul").append(
10 $("<li>")
11 .text(todoMsg + " ")
12 .append(fait)
13 );
14 }
(. . .)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 315 / 423
DOM Ajouter
Récapitulatif - une liste de tâches
(. . .)
sample/form/todo.html
1 // Fonction associée à un bouton "Fait !"
2 function todoDone() {
3 $(this).parent().fadeOut();
4 }
5
6 // Associer la fonction au bouton d’ajout
7 $(document).ready(function() {
8 $("#addTodo").click(todoAdd);
9 });
Plus loin, nous verrons comment sauver la liste
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 316 / 423
7 Formulaires
Envoi du formulaire
Récupération des données
7.1 – Envoi du formulaire
crédit image
Formulaires Envoi du formulaire
Ce qu’on sait déjà
Vous savez déjà écrire un formulaire en HTML
Voyons comment l’envoyer
1 Sur un serveur
2 En local
3 Solution hybride
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 319 / 423
Formulaires Envoi du formulaire
Option 1 : Traitement par un serveur
Schéma général
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 320 / 423
Formulaires Envoi du formulaire
Option 1 : Traitement par un serveur
Les étapes du processus
1 Les données sont éventuellement validées en local
(champ requis rempli ?)
2 Le serveur reçoit les données.
3 Il les traite (calcul, utilisation BD. . .)
4 Il retourne une nouvelle page HTML.
5 Le navigateur affiche la page recue
Exemple : Page de connexion sur poÉSI
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 321 / 423
Formulaires Envoi du formulaire
La balise form
sample/form/form.html
1 <form action="/monserveur/action.php">
2 First name: <input type="text" name="fname"><br>
3 Last name: <input type="text" name="lname"><br>
4 <button>Submit</button>
5 </form>
form
Englobe les éléments du formulaire
Dit comment le soumettre au serveur
Envoie tout ce qui possède un name
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 322 / 423
Formulaires Envoi du formulaire
La balise form
method=
get : envoyé dans l’URL (défaut)
(/monserveur/action.php?fname=xxx&lname=yyy)
post : envoyé dans le corps du message HTTP
sample/form/form1post.html
1 <form action="/monserveur/action.php"
2 method="post">
3 First name: <input type="text" name="fname"><br>
4 Last name: <input type="text" name="lname"><br>
5 <button>Submit</button>
6 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 323 / 423
Formulaires Envoi du formulaire
Les boutons
3 types de boutons : <button type="...">
submit : soumet le formulaire (défaut)
button : action définie par JavaScript
reset : réinitialise les champs
Autre version : <input type="..." value="...">
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 324 / 423
Formulaires Envoi du formulaire
Les boutons : Exemple
sample/form/button.html
1 <form>
2 login: <input type="text" name="login"><br>
3 <button type="submit">Submit</button>
4 <button type="reset">Clear</button>
5 <button type="button" onclick="f()">Local</button>
6 </form>
7 <script>
8 function f() {
9 console.log("traitement local");
10 }
11 </script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 325 / 423
Formulaires Envoi du formulaire
Option 2 : Traitement en local
Les étapes du processus
1 Du code JavaScript est exécuté en local
2 Valide et traite les données
3 Peut faire appel à un serveur pour des compléments
d’info (AJaX)
4 Modifie la page en conséquence
Exemple : envoi d’un mail via Gmail
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 326 / 423
Formulaires Envoi du formulaire
Option 2 : Traitement en local
Comment le faire en pratique ? On l’a déjà vu !
sample/dom/todo3.html
1 <ul id="todolist">
2 </ul>
3 <input id="newtodo" type="text">
4 <button onclick="add()">Ajouter</button>
5 <script>
6 function add() {
7 let newTodoText = $("#newtodo").val();
8 let newTodo = $("<li>")
9 .text(newTodoText);
10 $("#todolist").append(newTodo);
11 }
12 </script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 327 / 423
Formulaires Envoi du formulaire
Option 3 : Envoyer un formulaire en local
Dans ce cours
1 L’action peut envoyer à une autre page locale
<form action="autrePage.html">
2 Cette autre page peut lire les valeurs
new URL(window.location.href).searchParams.get("fname");
Rarement utilisé en pratique
mais utile tant qu’on n’a pas de serveur
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 328 / 423
Formulaires Envoi du formulaire
Option 3 : Exemple
1 La première page présente un formulaire
sample/form/form1.html
1 <form action="form2.html">
2 Votre nom: <input type="text" name="nom">
3 <button>Envoyer</button>
4 </form>
2 La seconde page récupère le nom
sample/form/form2.html
1 <script>
2 let nom = new
,→ URL(location.href).searchParams.get("nom");
3 document.write(‘<h1>Bonjour, ${nom}</h1>‘);
4 </script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 329 / 423
7.2 – Récupération des données
crédit image
Formulaires Récupération des données
Sur un serveur
Données sont envoyées au serveur
Dans l’URL (GET)
Ex. : .../action.php?fname=John&lname=Doe
Lors du dialogue HTTP (POST)
Toujours une chaine
Comment les traiter dépend du langage utilisé sur le
serveur
Laissons cette matière pour WEBG4
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 331 / 423
Formulaires Récupération des données
En local
En local, on peut associer du code au bouton de
soumission
sample/form/form-suscribe.html
1 <button type="button" onclick="traiter()">
2 S’inscrire
3 </button>
La méthode de traitement peut récupérer chaque valeur
en fonction de son attribut name ou de son id
Voyons les détails en fonction du type d’élément
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 332 / 423
Formulaires Récupération des données
Les champs de saisie
L’info se récupère facilement via l’attribut value
sample/form/form-suscribe.html
1 let adresse = $("[name=adresse]").val();
2 let localité = $("[name=localite]").val();
3 let remarque = $("[name=remarque]").val();
Si c’est un entier, on peut le convertir
sample/form/form-suscribe.html
1 let cp = Number($("[name=cp]").val());
Pour une date
sample/form/form-suscribe.html
1 let dateNaissance = Date($("[name=datenaiss]").val());
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 333 / 423
Formulaires Récupération des données
Les boutons radio
On voudrait proposer une
question avec plusieurs
propositions et une seule
réponse possible.
1 Le code HTML peut ressembler à ceci
sample/form/radio.html
1 <form>
2 <p>Qui a développé jQuery ?</p>
3 <input type="radio" id="ans1" name="answer" value="1">
4 <label for="ans1">Linus Torvald</label><br>
5 <input type="radio" id="ans2" name="answer" value="2">
6 <label for="ans2">John Resig</label><br>
7 <input type="radio" id="ans3" name="answer" value="3">
8 <label for="ans3">Bert Bos</label><br>
9 <button id="validate">Valider</button>
10 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 334 / 423
Formulaires Récupération des données
2 Et le code associé est
sample/form/radio.html
1 $(document).ready( function(){
2 $("#validate").click( function(){
3 let yourAnswer = $("input[name=answer]:checked");
4 if(yourAnswer.val()==2) {
5 alert("Bravo !");
6 } else {
7 let goodAnswerLabel = $("label[for=ans2]").text();
8 alert(‘Désolé ! La bonne réponse était: ${goodAnswerLabel}‘);
9 }
10 });
11 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 335 / 423
Formulaires Récupération des données
Les cases à cocher
On voudrait proposer une
question à choix multiple
1 Le code HTML peut ressembler à ceci
sample/form/qcm.html
1 <form>
2 <p>Quel langage connaissez−vous ?</p>
3 <input type="checkbox" id="ans1" name="answer" value="Java">
4 <label for="ans1">Java</label><br>
5 <input type="checkbox" id="ans2" name="answer" value="C++">
6 <label for="ans2">C++</label><br>
7 <input type="checkbox" id="ans3" name="answer" value="JavaScript">
8 <label for="ans3">JavaScript</label><br>
9 <button id="validate" type="button">Valider</button>
10 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 336 / 423
Formulaires Récupération des données
2 Et le code associé est
sample/form/qcm.html
1 $(document).ready( function(){
2 $("#validate").click( function(){
3 let checked = $(":checkbox:checked");
4 let langages = [];
5 for(let i=0; i<checked.length; i++) {
6 langages.push( checked.eq(i).val() );
7 }
8 alert(‘Vous connaissez: ${langages}‘)
9 });
10 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 337 / 423
Formulaires Récupération des données
3 Voici une variante du code
sample/form/qcm2.html
1 $(document).ready( function(){
2 $("#validate").click( function(){
3 let checked = $(":checkbox:checked");
4 let langages = [];
5 checked.each( function() {
6 langages.push($(this).val())
7 });
8 alert(‘Vous connaissez: ${langages}‘)
9 });
10 });
4 Et encore une autre
sample/form/qcm3.html
1 $(document).ready( function(){
2 $("#validate").click( function(){
3 let checked = $(":checkbox:checked");
4 let langages = checked.map(
5 function() {return $(this).val()}
6 ).get();
7 alert(‘Vous connaissez: ${langages}‘)
8 });
9 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 338 / 423
Formulaires Récupération des données
Les listes
Posons à nouveau une question
avec une seule réponse mais en
présentant les propositions
sous forme d’une liste
1 Le code html5 peut ressembler à ceci
sample/form/list.html
1 <form>
2 <p>Quelle est la marque de votre téléphone ?</p>
3 <select id="brand" multiple>
4 <option value="apple">Apple</option>
5 <option value="samsung">Samsung</option>
6 <option value="huawei">Huawei</option>
7 <option value="other">Autre</option>
8 </select>
9 <button id="validate" type="button">Valider</button>
10 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 339 / 423
Formulaires Récupération des données
2 Et le code associé est
sample/form/list.html
1 $(document).ready( function(){
2 $("#validate").click( function(){
3 let selectedValue = $("#brand").val();
4 selectedName = $("#brand option:selected").text();
5 console.log(selectedValue);
6 console.log(selectedName);
7 });
8 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 340 / 423
Formulaires Récupération des données
Validation de formulaire
sample/form/valid.html
1 <form>
2 <fieldset>
3 <legend>Enregistrement</legend>
4 <input type="text" name="login" required
5 pattern="[a−zA−Z0−9]+"
6 title="Ne contient que des lettres et des chiffres"
7 placeholder="login..."><br>
8 <input type="text" name="password" required
9 pattern=".{8,}"
10 title="Doit comporter 8 caractères minimum"
11 placeholder="mot de passe..."><br>
12 <button type="submit">Envoyer</button>
13 </fieldset>
14 </form>
Ne dispensera pas d’une validation du coté serveur !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 341 / 423
Formulaires Récupération des données
Exemple complet (1/4)
sample/form/form-suscribe.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script
5 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
6 </script>
7 </head>
8 <body>
9 <h1>Inscription à l’ÉSI</h1>
10 <form>
11 <fieldset>
12 <legend>Données personnelles</legend>
13 <input name="nom" placeholder="Votre nom...">
14 <input name="prenom" placeholder="Votre prénom...">
15 <br>
16 <label for="naiss">Date de naissance:</label>
17 <input type="date" id="naiss" name="datenaiss">
18 <br>
19 Genre:
20 <input type="radio" id="genreH" name="genre" value="H">
21 <label for="genreH">Homme</label>
22 <input type="radio" id="genreF" name="genre" value="F">
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 342 / 423
Formulaires Récupération des données
Exemple complet (2/4)
sample/form/form-suscribe.html
1 <label for="genreF">Femme</label>
2 <br>
3 <label for="adresse">Adresse:</label>
4 <input id="adresse" name="adresse" size="40">
5 <br>
6 <label for="cp">Code postal:</label>
7 <input type="number" id="cp" name="cp" min="1000" max="9999">
8 <label for="localite">Localité:</label>
9 <input id="localite" name="localite">
10 </fieldset>
11 <fieldset>
12 <legend>Cours</legend>
13 <label for="section">Section:</label>
14 <select id="section" name="section">
15 <option value="G">Gestion</option>
16 <option value="I">Industrielle</option>
17 <option value="R">Réseau</option>
18 </select>
19 <br />
20 <input type="checkbox" id="INT1" name="ue" value="INT1" />
21 <label for="INT1">INT1</label>
22 <input type="checkbox" id="DEV1" name="ue" value="DEV1" />
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 343 / 423
Formulaires Récupération des données
Exemple complet (3/4)
sample/form/form-suscribe.html
1 <label for="DEV1">DEV1</label>
2 <input type="checkbox" id="CAI1" name="ue" value="CAI1" />
3 <label for="CAI1">CAI1</label>
4 <br />
5 <input type="checkbox" id="SYS2" name="ue" value="SYS2" />
6 <label for="SYS2">SYS2</label>
7 <input type="checkbox" id="DEV2" name="ue" value="DEV2" />
8 <label for="DEV2">DEV2</label>
9 <input type="checkbox" id="CAI2" name="ue" value="CAI2" />
10 <label for="CAI2">CAI2</label>
11 </fieldset>
12 <fieldset>
13 <legend>Remarque</legend>
14 <textarea cols="40" name="remarque"
15 placeholder="Avez−vous une remarque ?"></textarea>
16 </fieldset>
17 <button type="button" onclick="traiter()">
18 S’inscrire
19 </button>
20 </form>
21 <script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 344 / 423
Formulaires Récupération des données
Exemple complet (4/4)
sample/form/form-suscribe.html
1 function traiter() {
2 let nom = $("[name=nom]").val();
3 let prénom = $("[name=prenom]").val();
4 let adresse = $("[name=adresse]").val();
5 let localité = $("[name=localite]").val();
6 let remarque = $("[name=remarque]").val();
7 let cp = Number($("[name=cp]").val());
8 let dateNaissance = Date($("[name=datenaiss]").val());
9 let genre = $("[name=genre]:checked").val();
10 let section = $("[name=section] option:checked").text();
11 let ues = []
12 $("[name=ue]:checked")
13 .each( (i,elt) => ues.push($(elt).val()) );
14 report(nom,prénom,adresse,localité,remarque,cp,dateNaissance,genre,section,ues);
15 }
16 function report() {
17 for(arg of arguments) {
18 console.log(arg);
19 }
20 }
21 </script>
22 </body>
23 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 345 / 423
8 JavaScript avancé
Objets
Timer
Stockage local
8.1 – L’orienté objet
crédit image
JavaScript avancé L’orienté objet
Javascript et l’orienté objet
JavaScript est un langage orienté objet
Des ressemblances avec Java
Mais aussi beaucoup de différences
La syntaxe a évolué au fil des versions
On va voir la nouvelle (ES6)
On touchera un mot de l’ancienne
Procédons par étapes
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 348 / 423
JavaScript avancé L’orienté objet
Définition de la classe
sample/js2/rect1.html
1 class Rectangle {
2 }
3
4 let rect1 = new Rectangle();
5 let rect2 = new Rectangle();
6 let rect3 = rect1;
Pas besoin de la définir dans un fichier spécial
Constructeur par défaut (ne fait rien)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 349 / 423
JavaScript avancé L’orienté objet
Occupation mémoire
C’est une référence : rect1!=rect2 et rect1==rect3
Présence d’un garbage collector
Pour libérer l’objet : rect2=null
(mais rect1=null ne suffit pas !)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 350 / 423
JavaScript avancé L’orienté objet
Définition du constructeur
sample/js2/rect2.html
1 class Rectangle {
2 constructor(longueur, largeur) {
3 // Il manque l’assignation des attributs
4 }
5 }
6 let rect1 = new Rectangle(5,2);
Utilisation d’un mot spécial pour le constructeur
Le constructeur par défaut n’est plus disponible
Un seul constructeur possible (pas de surcharge)
Pas de notion de privacité ; tout est public
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 351 / 423
JavaScript avancé L’orienté objet
Définition d’attributs
sample/js2/rect3.html
1 class Rectangle {
2 constructor(longueur, largeur) {
3 this._longueur = longueur;
4 this._largeur = largeur;
5 }
6 }
7 let rect1 = new Rectangle(5,2);
this obligatoire pour les attributs
Convention : _ pour les attributs
Ne pas y toucher directement mais rien ne l’interdit !
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 352 / 423
JavaScript avancé L’orienté objet
Ajout de méthodes
sample/js2/rect4.html
1 class Rectangle {
2 constructor(longueur, largeur) {
3 this._longueur = longueur;
4 this._largeur = largeur;
5 }
6 surface() {
7 return this._longueur ∗ this._largeur;
8 }
9 }
10 let rect1 = new Rectangle(5,2);
11 let surf = rect1.surface();
On définit simplement la fonction dans la classe
Sans le mot-clé function
Publique et non statique
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 353 / 423
JavaScript avancé L’orienté objet
Les accesseurs et mutateurs
Fort différent de Java
sample/js2/rect5.html
1 class Rectangle {
2 get largeur() {
3 return this._largeur;
4 }
5
6 set largeur(value) {
7 if (value < 0) {
8 throw new Error("Largeur négative: " + value);
9 }
10 this._largeur = value;
11 }
12 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 354 / 423
JavaScript avancé L’orienté objet
Utilisation comme un attribut public
Appels implicites aux méthodes
let rect1 = new Rectangle(5,2);
let l = rect1.largeur; // Appel implicite au get de largeur
rect1.largeur = −3; // Appel implicite au set de largeur
On peut fournir juste le get pour une propriété en
lecture seule
class Rectangle {
//...
get surface() {
return largeur ∗ longueur;
}
}
let surface = rect1.surface;
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 355 / 423
JavaScript avancé L’orienté objet
Méthodes statiques
sample/js2/util.html
1 class Util {
2 static hasard(min, max) {
3 let range = max−min+1;
4 return Math.trunc( Math.random()∗range ) + min;
5 }
6 }
7 console.log( Util.hasard(1,6) );
Utile pour offrir un constructeur alternatif
sample/js2/rect7.html
1 class Rectangle {
2 static createCarre(cote) {
3 return new this(cote,cote);
4 }
5 }
6 let rect1 = Rectangle.createCarre(3);
7 console.log(rect1.largeur);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 356 / 423
JavaScript avancé L’orienté objet
Attributs statiques
Ajout récent
sample/js2/rect8.html
1 class Rectangle {
2 static NB_COTES = 4;
3 }
4 console.log(Rectangle.NB_COTES); // 4
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 357 / 423
JavaScript avancé L’orienté objet
Exemple récapitulatif
sample/js2/Rectangle.js
1 class Rectangle {
2
3 // Constructeurs
4 constructor(longueur, largeur) {
5 this.longueur = longueur; // Appel au setteur
6 this.largeur = largeur;
7 }
8
9 static createCarre(cote) {
10 return new this(cote,cote);
11 }
12
13 // Accesseurs / mutateurs
14 get largeur() {
15 return this._largeur;
16 }
17
18 set largeur(value) {
19 if (value < 0) {
20 throw new Error("Largeur négative: " + value);
21 }
22 this._largeur = value;
23 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 358 / 423
JavaScript avancé L’orienté objet
sample/js2/Rectangle.js
1 get longueur() {
2 return this._longueur;
3 }
4
5 set longueur(value) {
6 if (value < 0) {
7 throw new Error("Longueur négative: " + value);
8 }
9 this._longueur = value;
10 }
11
12 // Méthodes
13
14 surface() {
15 return this.longueur ∗ this.largeur;
16 }
17
18 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 359 / 423
JavaScript avancé L’orienté objet
sample/js2/Rectangle-test.html
1 let rect1 = new Rectangle(3,2);
2 let rect2 = Rectangle.createCarre(4);
3 console.log(rect1.surface());
4 console.log(rect2.surface());
5 console.log(rect1.longueur);
6 console.log(rect2.largeur);
7 rect1.longueur=10;
8 console.log(rect1.surface());
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 360 / 423
JavaScript avancé L’orienté objet
Héritage
Reprenons l’exemple du cours de Java
1 La classe Point
sample/js2/Point.js
1 class Point {
2
3 constructor(x,y) {
4 this._x = x;
5 this._y = y;
6 }
7
8 get x() { return this._x; }
9 get y() { return this._y; }
10
11 toString() {
12 return "(" + this.x + "," + this.y + ")";
13 }
14 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 361 / 423
JavaScript avancé L’orienté objet
Héritage
2 La classe PointColore hérite de Point
sample/js2/PointColore.js
1 class PointColore extends Point {
2
3 constructor(x,y,color) {
4 super(x,y);
5 this._color = color;
6 }
7
8 get color() { return this._color; }
9
10 toString() {
11 return super.toString() + ":" + this.color;
12 }
13 }
On voit que la syntaxe est celle de Java
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 362 / 423
JavaScript avancé L’orienté objet
Héritage
3 Utilisation
sample/js2/PointColore-test.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="Point.js"></script>
5 <script src="PointColore.js"></script>
6 </head>
7 <body>
8 <script>
9 let pc = new PointColore(3,2,"rouge");
10 console.log(pc.toString());
11 </script>
12 </body>
13 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 363 / 423
8.2 – L’orienté objet old-school
crédit image
JavaScript avancé L’orienté objet old-school
Historique
Le mot-clé class a été introduit en ES6
Avant, autre syntaxe fort différente
On la rencontre encore souvent
À utiliser avec parcimonie
Importance d’en connaitre les bases
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 365 / 423
JavaScript avancé L’orienté objet old-school
Création explicite d’un objet
Un objet peut se créer explicitement, sans classe
let rect1 = {
nom: "mon rectangle",
longueur: 4,
largeur: 2
};
Ensemble de propriétés
Une propriété associe une clé (nom, identifiant) et
une valeur
Manipulable classiquement : rect1.largeur
Ressemblance avec une structure
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 366 / 423
JavaScript avancé L’orienté objet old-school
Manipulation d’un objet
On
peut ajouter une propriété par la suite
rect1.couleur = "blanc";
Et
même en supprimer !
delete rect1.nom;
On
peut même utiliser la notation des tableaux
console.log( rect1["largeur"]); // Remarquez les ""
Et
utiliser une expression !
let key = "longueur";
rect1[key] = 10;
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 367 / 423
JavaScript avancé L’orienté objet old-school
Examiner un objet
On
peut tester si une propriété existe
if("couleur" in rect1) {...}
On peut boucler sur les propriétés
(une sorte de for each)
for(let key in rect1) {
console.log(key + " = " + rect1[key]); // rect1.key ok ?
}
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 368 / 423
JavaScript avancé L’orienté objet old-school
Ajouter des méthodes
On
peut ajouter des méthodes lors de la création
let rect1 = {
longueur: 4,
largeur: 2,
surface() {
return this.longueur ∗ this.largeur;
}
};
Ou
les ajouter par la suite
rect1.périmètre = function() {
return 2∗(this.largeur+this.longueur);
}
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 369 / 423
JavaScript avancé L’orienté objet old-school
Création en série
Pour simplifier la création de plusieurs objets similaires :
On
peut passer par une fonction
function newRectangle(longueur, largeur) {
return {
longueur: longueur,
largeur: largeur,
surface() {return largeur∗longueur;}
}
}
let rect1 = newRectangle(10,2);
let rect2 = newRectangle(4,3);
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 370 / 423
JavaScript avancé L’orienté objet old-school
Ou passer par un « constructeur »
sample/js2/old-Rectangle.html
1 function Rectangle(longueur, largeur) {
2 this.longueur = longueur;
3 this.largeur = largeur;
4 this.surface = function() {
5 return largeur∗longueur;
6 }
7 }
Commence par une majuscule par convention
Appelé via un new
I Crée un objet en début de fonction
I Retourne cet objet à la fin
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 371 / 423
8.3 – Timer
crédit image
JavaScript avancé Timer
Timer
JavaScript fournit des méthodes pour gérer des délais
setTimeout(fct,delay) :
exécute une fonction après un certain délai
setInterval(fct,delta) :
exécute une fonction à intervalle régulier
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 373 / 423
JavaScript avancé Timer
Les feux
Revenons à nos feux
sample/jquery/feux.html
1 <div class="feux">
2 <div class="feu rouge"></div>
3 <div class="feu orange eteint"></div>
4 <div class="feu vert eteint"></div>
5 </div>
sample/jquery/feux.html
1 .rouge {background−color: red;}
2 .orange {background−color: orange;}
3 .vert {background−color: green;}
4 .eteint {background−color: gray;}
Ajoutons de l’automatisme
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 374 / 423
JavaScript avancé Timer
Les feux
Version 2 - Automatique à intervalle régulier
sample/jquery/feux2.html
1 let crtFeu = 2;
2
3 function next() {
4 $(".feu").eq(crtFeu).addClass("eteint");
5 crtFeu−−;
6 if (crtFeu < 0) {
7 crtFeu = 2;
8 }
9 $(".feu").eq(crtFeu).removeClass("eteint");
10 }
11
12 $(document).ready(function() {
13 setInterval(next,1000);
14 })
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 375 / 423
JavaScript avancé Timer
Les feux
Version 3 - Temps différent pour chaque couleur
sample/jquery/feux4.html
1 let feu; // Le feu courant : "vert", "orange" ou "rouge"
2
3 function updateUI() {
4 $(".feu").addClass("eteint");
5 $(‘.${feu}‘).removeClass("eteint");
6 }
7
8 function green() {feu="vert"; updateUI(); setTimeout(orange, 3000)}
9 function orange() {feu="orange"; updateUI(); setTimeout(red, 500)}
10 function red() {feu="rouge"; updateUI(); setTimeout(green, 2000)}
11
12 $(document).ready(function() {
13 green();
14 })
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 376 / 423
8.4 – Stockage local
crédit image
JavaScript avancé Stockage local
Quel est le besoin ?
Reprenons une application comme notre gestion de todos
Si on recharge la page, tout est réinitialisé
Comment garder nos todos ?
En les sauvant
Où ?
Il n’y a pas de serveur
=⇒ Seule possibilité : localement
HTML 5 introduit le local storage
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 378 / 423
JavaScript avancé Stockage local
Présentation
Introduit en HTML5
Manipulé via JavaScript
Local :
à la machine
à l’utilisateur
au navigateur
au profil
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 379 / 423
JavaScript avancé Stockage local
Fonctionnement
Les données sont stockées sous la forme
clé = valeur
La clé est une chaîne
La valeur aussi
Pour lire une valeur :
localStorage.getItem("key");
Pour ajouter/modifier une entrée :
localStorage.setItem("key", "value");
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 380 / 423
JavaScript avancé Stockage local
Exemple 1 - Retenir le nom de la personne
On voudrait que la page connaisse le nom de l’utilisateur
et que celui-ci puisse le changer
Le code HTML peut ressembler à ceci
sample/js2/name.html
1 <h1>Bonjour <span id="name"></span></h1>
2 <button id="changeName" type="button">Changer le nom !</button>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 381 / 423
JavaScript avancé Stockage local
Et le code associé est
1 let name=null; sample/js2/name.html
2
3 function loadName() {
4 name = localStorage.getItem("name");
5 if (! name) {
6 name = "inconnu";
7 }
8 }
9
10 function saveName() {
11 localStorage.setItem("name", name)
12 }
13
14 function changeName() {
15 name = prompt("Nouveau nom");
16 saveName();
17 updateUI();
18 }
19
20 function updateUI() {
21 $("#name").text(name);
22 }
23
24 $(document).ready( function(){
25 loadName();
26 updateUI();
27 $("#changeName").click(changeName);
28 });
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 382 / 423
JavaScript avancé Stockage local
Sauver autre chose que du texte
On vient de voir comment sauver une chaine
Et si ce n’est pas une chaine ?
Pour un nombre, la conversion est facile
Pour une valeur plus complexe (tableau, objet)
On utilise le format JSON
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 383 / 423
JavaScript avancé Stockage local
JSON
JSON = JavaScript Object Notation
Représentation de valeurs d’objets (tableau inclus)
sous forme textuelle
De plus en plus utilisé pour échanger de
l’information entre applications
Aussi pour persister de l’information pas trop
complexe
Syntaxe semblable à la syntaxe JavaScript
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 384 / 423
JavaScript avancé Stockage local
JSON - Exemple
sample/js2/example.json
1 {
2 "firstName": "John",
3 "lastName": "Smith",
4 "age": 25,
5 "address":
6 {
7 "streetAddress": "21 2nd Street",
8 "city": "New York",
9 "state": "NY",
10 "postalCode": "10021"
11 },
12 "phoneNumber":
13 [
14 {
15 "type": "home",
16 "number": "212 555−1234"
17 },
18 {
19 "type": "fax",
20 "number": "646 555−4567"
21 }
22 ]
23 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 385 / 423
JavaScript avancé Stockage local
JSON - Conversions
Pour convertir une chaine JSON en objet :
monObjet = JSON.parse(chaineJSON)
Pour convertir un objet en chaine JSON :
chaineJSON = JSON.stringify(monObjet)
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 386 / 423
JavaScript avancé Stockage local
Exemple 2 - La liste de tâches
Reprenons notre liste de tâches et persistons-les
Le code HTML change peu
sample/js2/todo.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script
,→ src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5 <script src="todo.js"></script>
6 <script src="todoUI.js"></script>
7 <script src="todoCtrl.js"></script>
8 </head>
9 <body>
10 <h1>Ma liste de tâches</h1>
11 <ul id="todolist"></ul>
12 <input id="newTodo">
13 <button type="button" onclick="addClick()" >Ajouter</button>
14 </body>
15 <script>
16 $(document).ready(initCtrl);
17 </script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 387 / 423
JavaScript avancé Stockage local
Exemple 2 - La liste de tâches
Pour le code associé, il faudra
Introduire un tableau de chaines retenant les tâches
La charger au début et la sauver à chaque
modification
Adapter la vue en conséquence
Décomposons en 3 parties : modèle, vue, contrôleur
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 388 / 423
JavaScript avancé Stockage local
sample/js2/todo.js
1 let todos; // Array des todos
2
3 // Charge les todos à partir du storage
4 function loadTodos() {
5 let json = localStorage.getItem("todos");
6 if (json) {
7 todos = JSON.parse(json);
8 } else {
9 todos = [];
10 }
11 }
12
13 // Sauve les todos dans le storage
14 function saveTodos() {
15 localStorage.setItem("todos", JSON.stringify(todos))
16 }
17
18 // Ajoute une todo et sauve
19 function addTodo(todoMsg) {
20 todos.push(todoMsg);
21 saveTodos();
22 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 389 / 423
JavaScript avancé Stockage local
sample/js2/todo.js
1 // Enleve la tâche numéro i et sauve
2 function removeTodo(i) {
3 todos.splice(i,1);
4 saveTodos();
5 }
6
7 // Initialise les données
8 function init() {
9 loadTodos();
10 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 390 / 423
JavaScript avancé Stockage local
sample/js2/todoUI.js
1 // Initialise l’UI avec les todos de départ
2 function initUI() {
3 $("#todolist").empty();
4 for(let todo of todos) {
5 addTodoUI(todo);
6 }
7 }
8
9 // Ajoute une todo
10 function addTodoUI(todoMsg) {
11 $("#newTodo").val("");
12 $("#todolist").append(
13 $("<li>")
14 .text(todoMsg + " ")
15 .append(
16 $("<button>")
17 .text("Fait !")
18 .addClass("doneTodo")
19 .click(doneClick)
20 )
21 );
22 }
23
24 // Enlève une todo
25 function removeTodoUI(i) {
26 $(‘#todolist li‘).eq(i).remove();
27 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 391 / 423
JavaScript avancé Stockage local
sample/js2/todoCtrl.js
1 // On clique sur le bouton d’ajout
2 function addClick() {
3 let todoMsg=$("#newTodo").val();
4 $("#newTodo").val("")
5 addTodo(todoMsg);
6 addTodoUI(todoMsg);
7 }
8
9 // On clique sur un bouton pour enlever une tâche
10 function doneClick() {
11 let li = $(this).parent(); // Le <li> associé au bouton
12 let index = li.index(); // Sa position dans ul
13 removeTodo(index);
14 removeTodoUI(index);
15 }
16
17 function initCtrl() {
18 init();
19 initUI();
20 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 392 / 423
JavaScript avancé Stockage local
Concepts avancés
Il reste beaucoup d’éléments du langage que nous
n’avons pas abordés
Plus compliqués
Moins souvent rencontrés
Ancienne syntaxe
Utilisation non recommandées
Manque de temps
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 393 / 423
9 Bootstrap
Introduction
Éléments plus jolis
Responsive Design
9.1 – Introduction
crédit image
Bootstrap Introduction
Ce que c’est
Essentiellement une feuille de style CSS
Éléments de page plus jolis
tableau, formulaires, menus, images. . .
Mobile First
Pensé pour les téléphones
Responsive Design
Mise en page s’adapte à la taille de l’écran
Démo : le site de l’école
Également un peu de JavaScript
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 396 / 423
Bootstrap Introduction
Contexte
Créé en 2011
Par Mark Otto et Jacob Thornton de Twitter
Open source
Bootstrap 3 largement utilisé
Bootstrap 4 sorti en janvier 2018
https://getbootstrap.com/
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 397 / 423
Bootstrap Introduction
Utilisation
Inclure un lien vers le CDN
<link rel="stylesheet" href=
,→ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
Inclure le JavaScript (facultatif)
<script src="https://code.jquery.com/jquery−3.2.1.slim.min.js"</script>
<script
,→ src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
</script>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 398 / 423
Bootstrap Introduction
Hello, World !
sample/bootstrap/hello.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf−8">
5 <meta name="viewport"
6 content="width=device−width, initial−scale=1, shrink−to−fit=no">
7 <link rel="stylesheet" href =
,→ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
8 <title>Hello, world!</title>
9 </head>
10 <body>
11 <h1>Hello, world!</h1>
12 <script src="https://code.jquery.com/jquery−3.2.1.slim.min.js"></script>
13 <script src =
,→ "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
14 </script>
15 <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
16 </script>
17 </body>
18 </html>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 399 / 423
9.2 – Des éléments plus jolis
crédit image
Bootstrap Des éléments plus jolis
Typographie
Améliore le look de certaines balises de base
<mark> : fond jaune
<abbr> : souligné en pointillé
<code> : rouge sur fond gris
<kbd> : blanc sur fond noir
...
sample/bootstrap/typo.html
1 Appuyez sur <kbd>F5</kbd> pour <mark>exécuter</mark> le code
2 <abbr title="Langage de programmation du Web">Javascript</abbr>
3 suivant : <code>alert(’Hello, world !’);</code>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 401 / 423
Bootstrap Des éléments plus jolis
Couleurs sémantiques
Introduit des couleurs sémantiques via des classes
Pour le texte
.text−sucess : pour indiquer une réussite
.text−primary : pour mettre en évidence
.text−danger : pour un truc dangereux
...
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 402 / 423
Bootstrap Des éléments plus jolis
Couleurs sémantiques
Introduit des couleurs sémantiques via des classes
Et la couleur de fond
.bg−warning : moins fort que danger
...
sample/bootstrap/color.html
1 <p class="bg−danger text−white">
2 Cette suppression sera définitive !
3 </p>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 403 / 423
Bootstrap Des éléments plus jolis
Les tableaux
sample/bootstrap/table.html
1 <table class="table table−striped table−hover">
2 <thead class="thead−dark">
3 <tr>
4 <th>Sigle</th> <th>Intitulé</th>
5 </tr>
6 </thead>
7 <tbody>
8 <tr>
9 <td>INT1</td> <td>Cours d’introduction</td>
10 </tr>
11 <tr>
12 <td>DEV1</td> <td>Développement I</td>
13 </tr>
14 <tr>
15 <td>MAT1</td> <td>Mathématiques</td>
16 </tr>
17 </tbody>
18 </table>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 404 / 423
Bootstrap Des éléments plus jolis
Les images
sample/bootstrap/img.html
1 <img src="otto.jpg" class="rounded−circle" alt="Mark
,→ Otto">
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 405 / 423
Bootstrap Des éléments plus jolis
Les formulaires
sample/bootstrap/form.html
1 <form action="#">
2 <div class="form−group">
3 <label for="name">Nom</label>
4 <input type="text" class="form−control" id="name">
5 </div>
6 <div class="form−group">
7 <label for="sel1">Section</label>
8 <select class="form−control" id="section">
9 <option>Gestion</option>
10 <option>Industrielle</option>
11 <option>Réseau</option>
12 </select>
13 </div>
14 <div class="form−group">
15 <label class="radio−inline"><input type="radio" name="genre">Homme</label>
16 <label class="radio−inline"><input type="radio" name="genre">Femme</label>
17 </div>
18 <div class="form−group">
19 <label for="comment">Remarque</label>
20 <textarea class="form−control" rows="5" id="comment"></textarea>
21 </div>
22 <button type="submit" class="btn btn−primary">Envoyer</button>
23 </form>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 406 / 423
Bootstrap Des éléments plus jolis
Les boutons
sample/bootstrap/buttons.html
1 <button type="button" class="btn btn−success">Success</button>
2 <button type="button" class="btn btn−outline−info">Info</button>
3 <button type="button" class="btn btn−primary
,→ btn−lg">Large</button>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 407 / 423
Bootstrap Des éléments plus jolis
Les badges
sample/bootstrap/buttons.html
1 <h1>
2 Bootstrap 4
3 <span class="badge badge−pill
,→ badge−info">Nouveau</span>
4 </h1>
5 <button type="button" class="btn btn−primary">
6 Messages <span class="badge badge−light">4</span>
7 </button>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 408 / 423
Bootstrap Des éléments plus jolis
Les menus
sample/bootstrap/navbar.html
1 <nav class="navbar navbar−expand−lg navbar−dark bg−secondary"
2 style="margin:24px 0;">
3
4 <a class="navbar−brand" href="#">WEBG2</a>
5 <button class="navbar−toggler navbar−toggler−right"
6 type="button" data−toggle="collapse" data−target="#navb">
7 <span class="navbar−toggler−icon"></span>
8 </button>
9
10 <div class="collapse navbar−collapse" id="navb">
11 <ul class="navbar−nav mr−auto">
12 <li class="nav−item">
13 <a class="nav−link" href="#">HTML</a>
14 </li>
15 <li class="nav−item">
16 <a class="nav−link" href="#">CSS</a>
17 </li>
18 </ul>
19 <form class="form−inline">
20 <input class="form−control" type="text" placeholder="Search">
21 <button class="btn btn−success" type="button">Search</button>
22 </form>
23 </div>
24 </nav>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 409 / 423
Bootstrap Des éléments plus jolis
Les cartes
sample/bootstrap/card.html
1 <div class="card" style="width:400px">
2 <img class="card−img−top" style="width:100%" alt="Kili"
3 src="http://www.esprit−daventure.com/DATA/VOYAGE/59_med.jpg">
4 <div class="card−body">
5 <h4 class="card−title">Le Kilimanjaro</h4>
6 <p class="card−text">
7 Le Kilimanjaro est une montagne
8 située dans le Nord−Est de la Tanzanie
9 et culminant à 5 895 mètres.</p>
10 <a href="https://fr.wikipedia.org/wiki/Kilimandjaro" class="btn btn−primary">
11 En savoir plus...
12 </a>
13 </div>
14 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 410 / 423
Bootstrap Des éléments plus jolis
Un slideshow
sample/bootstrap/caroussel.html
1 <div id="demo" class="carousel slide" data−ride="carousel">
2
3 <!−− The slideshow −−>
4 <div class="carousel−inner">
5 <div class="carousel−item active">
6 <img src="http://esi−bru.be/images/code−1076536_1280.jpg">
7 </div>
8 <div class="carousel−item ">
9 <img src="http://esi−bru.be/images/processor_cpu_heat_sink.jpg">
10 </div>
11 <div class="carousel−item">
12 <img src="http://esi−bru.be/images/rj45−1139366_1280.jpg">
13 </div>
14 </div>
15
16 <!−− Left and right controls −−>
17 <a class="carousel−control−prev" href="#demo" data−slide="prev">
18 <span class="carousel−control−prev−icon"></span>
19 </a>
20 <a class="carousel−control−next" href="#demo" data−slide="next">
21 <span class="carousel−control−next−icon"></span>
22 </a>
23
24 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 411 / 423
Bootstrap Des éléments plus jolis
Des onglets
sample/bootstrap/tab.html
1 <!−− Nav tabs −−>
2 <ul class="nav nav−tabs">
3 <li class="nav−item">
4 <a class="nav−link active" data−toggle="tab" href="#home">WEBG2</a>
5 </li>
6 <li class="nav−item">
7 <a class="nav−link" data−toggle="tab" href="#part1">HTML</a>
8 </li>
9 <li class="nav−item">
10 <a class="nav−link" data−toggle="tab" href="#part2">CSS</a>
11 </li>
12 </ul>
13 <!−− Tab panes −−>
14 <div class="tab−content">
15 <div class="tab−pane active container" id="home">
16 Bienvenue dans le cours de Développement WEB I
17 </div>
18 <div class="tab−pane container" id="part1">
19 HTML c’est...
20 </div>
21 <div class="tab−pane container" id="part2">
22 Java c’est...
23 </div>
24 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 412 / 423
9.3 – Responsive Design
crédit image
Bootstrap Responsive Design
Principe de base
La présentation doit s’adapter
à la taille de l’écran
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 414 / 423
Bootstrap Responsive Design
Conteneur fluide ou pas
sample/bootstrap/container.html
1 <div class="jumbotron container bg−info">
2 Un conteneur pas fluide
3 </div>
4 <div class="jumbotron container−fluid
,→ bg−secondary">
5 Un conteneur fluide
6 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 415 / 423
Bootstrap Responsive Design
La division en colonnes
Une page Bootstrap est divisée en 12 colonnes
sample/bootstrap/grid.html
1 <div class="row">
2 <div class="col−1">col−1</div>
3 <div class="col−2">col−2</div>
4 <div class="col−4">col−4</div>
5 <div class="col−5">col−5</div>
6 </div>
7 <div class="row">
8 <div class="col−3">col−3</div>
9 <div class="col">col</div>
10 <div class="col−3">col−3</div>
11 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 416 / 423
Bootstrap Responsive Design
Plusieurs tailles d’écran
Bootstrap définit 5 tailles d’écrans
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 417 / 423
Bootstrap Responsive Design
Chaque taille à sa configuration
Exemple : col−md−4 signifie
Sur un écran moyen (ou plus) : prendre 4 colonnes
Sur un écran plus petit : empiler
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 418 / 423
Bootstrap Responsive Design
Exemple
Comprenez-vous ce qui va se passer ?
sample/bootstrap/grid-md.html
1 <div class="row">
2 <div class="col−md−1">col−1</div>
3 <div class="col−md−2">col−2</div>
4 <div class="col−md−4">col−4</div>
5 <div class="col−md−5">col−5</div>
6 </div>
7 <div class="row">
8 <div class="col−lg−3">col−3</div>
9 <div class="col−lg">col</div>
10 <div class="col−lg−3">col−3</div>
11 </div>
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 419 / 423
Bootstrap Responsive Design
La magie expliquée
Bootstrap se base sur les @media de CSS
sample/bootstrap/media.html
1 body {background−color: white;}
2 @media (min−width: 800px) {
3 body {background−color: gray;}
4 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 420 / 423
Bootstrap Responsive Design
La magie expliquée
Bootstrap se base sur les @media de CSS
sample/bootstrap/media.html
1 body {background−color: white;}
2 @media (min−width: 800px) {
3 body {background−color: gray;}
4 }
MCD (HE2B - ÉSI) WEBG2 - WEB I 2018 - 2019 421 / 423
Vous en voulez encore ? Explorez. . .
Map et Set en JavaScript
Jade
Less, SCSS
React, Vue, Angular
npm
crédit image
crédit image
Vous aimerez peut-être aussi
- Cours Développement Web : HTML, CSS, JSPas encore d'évaluationCours Développement Web : HTML, CSS, JS353 pages
- Partie 1 - Matriser Les Bases HTMLPas encore d'évaluationPartie 1 - Matriser Les Bases HTML105 pages
- Guide Complet: Développement Web HTML/CSSPas encore d'évaluationGuide Complet: Développement Web HTML/CSS48 pages
- Introduction HTML et Création de Pages WebPas encore d'évaluationIntroduction HTML et Création de Pages Web59 pages
- Développement Web Front-End: Guide CompletPas encore d'évaluationDéveloppement Web Front-End: Guide Complet88 pages
- Resume-Theorique-M104 - Finaaaal Pour Dev 105 2023-2024$Pas encore d'évaluationResume-Theorique-M104 - Finaaaal Pour Dev 105 2023-2024$323 pages
- Introduction au langage HTML et balisesPas encore d'évaluationIntroduction au langage HTML et balises24 pages
- 2 HTML Support Etudiant Version 3 SMI 2015 NFAOUIPas encore d'évaluation2 HTML Support Etudiant Version 3 SMI 2015 NFAOUI73 pages
- Histoire et Évolution du HTML et CSSPas encore d'évaluationHistoire et Évolution du HTML et CSS21 pages
- Introduction à HTML et Programmation WebPas encore d'évaluationIntroduction à HTML et Programmation Web118 pages
- Programmation Web : HTML, CSS, JavaScriptPas encore d'évaluationProgrammation Web : HTML, CSS, JavaScript51 pages
- Introduction au Design et Développement WebPas encore d'évaluationIntroduction au Design et Développement Web71 pages
- Introduction À La Programmation WebPas encore d'évaluationIntroduction À La Programmation Web7 pages
- Introduction au HTML/CSS et Modèle Client-ServeurPas encore d'évaluationIntroduction au HTML/CSS et Modèle Client-Serveur89 pages
- Introduction au développement HTML5Pas encore d'évaluationIntroduction au développement HTML5101 pages
- Principes de base du logiciel en 2000Pas encore d'évaluationPrincipes de base du logiciel en 20001 page
- Guide de base pour Microsoft Word 2000Pas encore d'évaluationGuide de base pour Microsoft Word 200010 pages
- Circuits Combinatoires en ÉlectroniquePas encore d'évaluationCircuits Combinatoires en Électronique10 pages
- Best Corporation 2024 Preparation ClassesPas encore d'évaluationBest Corporation 2024 Preparation Classes4 pages
- "Chaux Hydraulique: Histoire et Utilisation"Pas encore d'évaluation"Chaux Hydraulique: Histoire et Utilisation"18 pages
- Fonctions et Variations pour 1ère SPas encore d'évaluationFonctions et Variations pour 1ère S10 pages
- Seminaire SolarWorld - COGEPRA 25-04-2015Pas encore d'évaluationSeminaire SolarWorld - COGEPRA 25-04-201535 pages
- Poursuite de Gesca Contre Sophie Durocher Pour Atteinte À La RéputationPas encore d'évaluationPoursuite de Gesca Contre Sophie Durocher Pour Atteinte À La Réputation40 pages
- 1 Un Coproprietaire Peut Il Demander La Resiliation Du Bail D Un Locataire 34482Pas encore d'évaluation1 Un Coproprietaire Peut Il Demander La Resiliation Du Bail D Un Locataire 344823 pages
- Etapes Enregistrement Des Fournisseurs Dans Quantum Pour Les SoumissionsPas encore d'évaluationEtapes Enregistrement Des Fournisseurs Dans Quantum Pour Les Soumissions43 pages
- L'enigme Du Don Sur Maurice GodelierPas encore d'évaluationL'enigme Du Don Sur Maurice Godelier6 pages
