Le support de cours
publicité
Déroulement du cours
Avant-propos
11 février 2016
Objectifs
⚫ Notions
de base en
Programmation objet
⚫ Algorithmique
⚫ Développement Web
⚫
⚫ Point
de vue sur les enjeux de la réalisation
d'un projet
⚫ → pour
Pouvoir approfondir en autonomie si cela vous
intéresse
⚫ Avoir plus de recul sur la tâche de conception
⚫
Programmation Web — Rappels
2/61
Projet
⚫ Entre-coupé
de points de cours
⚫ Développement d'un memory
Groupes de 2
⚫ Autorisation d'utiliser des librairies (ex : jquery)
⚫
⚪
⚫
Autorisation de reprendre des portions de code
⚪
⚫
MAIS APRÈS VALIDATION
MAIS TOUT LE CODE (hors librairies) DOIT ÊTRE
COMPRIS PAR TOUT LE GROUPE
Doit suivre l'architecture globale du code définie
en cours
⚪
https://semestriel.framapad.org/p/M2DILIPEM
⚫ Évaluation,
selon l'avancement du projet
Oral après livraison du code
⚫ Devoir sur table
⚫
Programmation Web — Rappels
3/61
Programmation Web —
Rappels
Master DILIPEM
Où vous faîtes le cours…
11 février 2016
Principes généraux
Réseaux et technologies du
Web
Internet (en gros…)
⚫ Réseau
Informatique
⚫ Réseau de réseau
⚫ FAI
⚫ Adresse IP
⚫ Url
Protocole
⚫ Nom de domaine
⚫
Programmation Web — Rappels
6/61
Architecture client-serveur
⚫ Que
s'est-il passé entre le moment où j'ai
appuyé sur entrée dans la barre d'adresse
de mon navigateur et le moment où la page
s'est affichée
Sur le serveur ?
⚫ Sur mon ordinateur ?
⚫
Programmation Web — Rappels
7/61
Les principales technologies
du Web (questions subsidiaires)
⚫ Protocoles
Http/Https
⚫ Ftp
⚫ Ssh
⚫…
⚫
⚫ Apache/nginx
⚫ HTML+CSS
⚫ PHP
⚫ MySQL
⚫ Javascript
⚫…
Programmation Web — Rappels
8/61
Structure d'un
document
HTML
HTML
⚫ Quels
logiciels ?
Pour l'afficher ;
⚫ Pour l'éditer.
⚫
⚫ HyperText Mark-up
Mark-up Language
⚫ Balises
Conteneurs
⚫ Marqueurs
⚫ Attributs
⚫
⚫À
quoi ça sert ?
Programmation Web — Rappels
10/61
Structure d'un document
HTML (5)
⚫ Déclaration
⚫
de document
<!doctype html>
⚫ html
⚫«
tête »
⚫ « corps »
Programmation Web — Rappels
11/61
Les principales balises
⚫…
⚫…
⚫…
⚫…
⚫
https://developer.mozilla.org/fr/docs/Web/Guide/
HTML/HTML5/Liste_des_éléments_HTML5
⚫ Liens
⚫
⚫
⚫
⚫
(au sens large)
<a href="chemin">lien</a>
<img src="chemin" />
<link href="chemin" />
<source src="chemin" />
⚫ http://validator.w3.org
Programmation Web — Rappels
12/61
Chemins relatifs / chemins
absolus (url)
⚫ Chemin
⚫
url / chemin sur le serveur
⚫ Chemin
⚫
relatif
..
⚫ Lien
⚫
absolu
entre l'url et le chemin sur le serveur
Le rôle du serveur web
Programmation Web — Rappels
13/61
Style et rendu
CSS
CSS
⚫À
quoi ça sert
⚫ Syntaxe
Forme d'une règle
⚫ Les sélecteur
⚫
⚪
⚪
⚪
⚪
⚪
⚫
⚫
Nom d'élément
Classe
Identifiant
Pseudo-classes
Combinaisons de selecteurs
Propriétés
https://developer.mozilla.org/fr/docs/Web/CSS/Reference
Programmation Web — Rappels
15/61
Le modèle de la boite
• <p>Exemple</p>
right
top
margin-top
padding-top
marginmargin
left
padding
paddingleft
width
Exemple height
paddingright
padding-bottom
border
border(-left)-width
marginright
margin-bottom
bottom
left
Programmation Web — Rappels
16/61
La cascade
Ordre de priorité des informations stylistiques
(pour un sélecteur donné)
h1{
background-color:#E8856B;
font family:
padding-top:15px;
Verdana, sans-serif;
} padding-bottom:30px;
padding-bottom:15px;
}
h1{h1{
padding:1em;
padding-left:
padding-left:1em;
padding-left:1em;
1em;
margin:0px;
padding-right:
padding-right:1em;
padding-right:1em;
1em;
color:
padding-top:
padding-top:15px;
padding-top:15px;
black; 15px;
font-family:
padding-bottom:
padding-bottom:30px;
padding-bottom:30px;
Times,
15px;
sans-serif;
text-align:
margin:
margin:0px;
margin:0px;
0px;
left;
font-size:
color:
color:white
black;
x-large;
;
} font
font-family:
fontfamily:
family:Verdana,
Times,
Verdana,
sans-serif;
sans-serif;
sans-serif;
text-align:
text-align:left;
center;
font-size:
font-size:x-large;
x-large;
} background-color:#E8856B;
background-color:#E8856B;
}
<h1 style="text-align: center; color:white">
Conclusion : pour un même sélecteur, la dernière information
stylistique lue sera considérée prioritairement.
D'autres mécanismes qui dépendent des sélecteurs se
Programmation Web — Rappels
superposent à celui-ci.
17/61
Code, Encodage
Question subsidiaires…
L'encodage des fichiers
textes
⚫ 文字化け
Moji : Caractère
⚫ Baké : Changé
⚫
⚫ <meta
charset="utf-8" />
Programmation Web — Rappels
19/61
L'indentation du code
⚫ Structuration
de document, style, code…
⚫ Exemple :
Programmation Web — Rappels
20/61
L'indentation du code
⚫ Structuration
de document, style, code…
⚫ Exemple :
Programmation Web — Rappels
21/61
L'encodage de la couleur
⚫ Synthèse
soustractive
⚫ Codage RVB
Codage décimal
⚫ Codage hexadécimal de la couleur
⚫
Programmation Web — Rappels
22/61
Quelques éléments
HTML5
Master DILIPEM
11 février 2016
Attribut lang
⚫ la
langue utilisée dans l'élément
Pour la synthèse vocale
⚫ Pour les moteurs de recherche
⚫ Valeurs possibles
⚫
⚪
ISO 639-1 :
https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1
⚪
⚫
Et d'autres…
Pour plus d'informations :
http://www.ietf.org/rfc/bcp/bcp47.txt
⚫ Éléments
concernés
html (langue du document)
⚫p
⚫
⚫ CSS
→ pseudo sélecteur
Programmation Web — Rappels
24/61
Nouveaux éléments de
structuration de la page
⚫ main :
contenu principal
⚫ header : en-tête de page (ou d'élément)
⚫
Exemple de contenu : bandeau titre, logo, etc.
⚫ footer :
⚫
pied de page (ou d'élément)
Exemple de contenu : coordonnées,
informations légales, etc.
⚫ aside :
informations connexes au contenu
principal (sans en faire partie)
⚫
Exemple de contenu : résumé d'articles externes
liés, actualités liées au domaine, etc.
⚫ nav :
navigation dans/hors du site
⚫ menu : actions dans une application Web
Programmation Web — Rappels
25/61
Nouveaux éléments de
structuration de la page
⚫ main :
contenuSchémas
principal
tirés de
http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
⚫ header : en-tête de page (ou d'élément)
⚫
Exemple de contenu : bandeau titre, logo, etc.
⚫ footer :
⚫
pied de page (ou d'élément)
Exemple de contenu : coordonnées,
informations légales, etc.
⚫ aside :
informations connexes au contenu
principal (sans en faire partie)
⚫
Exemple de contenu : résumé d'articles externes
liés, actualités liées au domaine, etc.
⚫ nav :
navigation dans/hors du site
⚫ menu : actions dans une application Web
Programmation Web — Rappels
26/61
Nouveaux éléments de
structuration de la page
⚫ main :
contenuSchémas
principal
tirés de
http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
⚫ header : en-tête de page (ou d'élément)
⚫
Exemple de contenu : bandeau titre, logo, etc.
⚫ footer :
⚫
pied de page (ou d'élément)
Exemple de contenu : coordonnées,
informations légales, etc.
⚫ aside :
informations connexes au contenu
principal (sans en faire partie)
⚫
Exemple de contenu : résumé d'articles externes
liés, actualités liées au domaine, etc.
⚫ nav :
navigation dans/hors du site
⚫ menu : actions dans une application Web
Programmation Web — Rappels
27/61
Articles et sections
⚫ article
⚫
Section de contenu indépendante, pouvant être extraite
individuellement du document, sans pénaliser sa
compréhension
⚫ section
⚫
Section générique regroupant un même sujet, une même
fonctionnalité, de préférence avec un en-tête, ou bien
section d'application web
⚫ Un
article peut regrouper des sections…
⚫ …et vice-versa
⚫ La numérotation peut recommencer dans ces
éléments
Le h1 d'un article n'est pas au même niveau que le h1 de
la page qui le contient
⚫ http://gsnedders.html5.org/outliner/
⚫
Programmation Web — Rappels
28/61
Images
⚫ Les
images peuvent être incluses dans des
figures avec légende
<figure>
<img src=“charmantsom.jpg” alt=“une
montagne proche de Grenoble” />
<figcaption>Le Charmant Som au mois de
juin</figcaption>
</figure>
Programmation Web — Rappels
29/61
Point sur le memory
⚫ Ébauche
de structuration et de mise en
forme du rendu…
Créer un document html qui contienne quelques cartes,
dont l'identifiant, sera "carte%" avec "%" un numéro
unique. Celle-ci contiendra deux éléments, l'un avec la
classe "recto" l'autre avec la classe "verso".
En utilisant la feuille de style (display:block vs
display:none), faire que quand on survole une carte, le
.recto s'affiche (le .verso sinon).
Programmation Web — Rappels
30/61
Introduction à la
programmation Web
avec JavaScript
Master DILIPEM
11/02/16
Questions Introductives et
préambule
⚫ Quelle
différence entre HTML, CSS et
JavaScript ?
⚫ Comment imaginez-vous le
fonctionnement/déroulement d'un
programme informatique ?
⚫ Pour développer, il vous faut :
Navigateur (chrome, firefox, IE, opera, safari…)
https://www.mozilla.org/fr/firefox/developer/
⚫ Un éditeur de texte (Atom, Brackets, Geany,
SciTE, SublimeText…)
⚫
⚫ Pour
⚫
tester de mini-portions de code
codepen / JSfiddle
Introduction à la programmation Web en JavaScript
32/61
Algorithme et programme
⚫ Algorithme
(D. Knuth) : Ensemble fini de règles qui
donne une suite d'opérations pour résoudre un certain
type de problèmes
Fini: un algorithme doit toujours se terminer en un nombre
fini d'étapes
⚫ Défini: chaque pas doit être défini de manière non ambiguë
⚫ Entrée: un algorithme à 0 ou plusieurs entrées issues
d'ensembles spécifiés d'objets
⚫ Sortie: un algorithme à 0 ou plusieurs sorties (quantités en
relation de façon spécifiée avec les entrées)
⚫ Effectivité: chaque opération doit
Ici, être
noussuffisamment
allons apprendre
basique pour être exécuté par un
homme utilisant
à implémenter
des un
papier et un crayon
algorithmes en javascript.
⚫
programme est une manière (dépendant d'un
langage) de réaliser un algorithme.
⚫ Un
Introduction à la programmation Web en JavaScript
33/61
Convention d'écriture
⚫ Javascript
est un langage qui possède,
notamment grâce à la gestion du DOM,
beaucoup de fonction existantes…
⚫ Pour différencier les noms de variables et de
fonctions créés par l'utilisateur des instructions
du langage, nous soulignerons tous les termes
qui sont définis par le programmeur.
⚫
Ex : var
texte = window.prompt("Que
voudrais-tu dire au monde ?","rien");
⚪
NB : seuls les éléments qui peuvent être confondus avec
une fonction d'une API javascript seront soulignés (par
exemple, ci-dessus, les deux chaines de caractères sont
évidemment définies par le programmeur, car il s'agit de
valeurs).
Introduction à la programmation Web en JavaScript
34/61
Hello world
⚫ Le
code JavaScript est appelé depuis la page
HTML en utilisant <script> :
<script type="text/javascript">
window.alert("bonjour le monde !");
console.log("salut le monde !");
</script>
⚫ Ou
après avoir mis la 2e ligne ci-dessus
dans un fichier helloworld.js :
<script type="text/javascript"
src="helloworld.js"></script>
⚫ Chaque
ligne ne contient qu'une seule
instruction (pour la lisibilité, n'est pas exigé
par JS)
⚫ Chaque instruction se termine par un « ; »
Introduction à la programmation Web en JavaScript
35/61
Variable, type
⚫ Variable :
pour conserver et réutiliser une valeur
⚫ Le mot clé correspondant est var
⚫ Exemple :
var texte = window.prompt("Que voudrais-tu
dire au monde ?","rien");
window.alert(texte+", le monde.");
⚫ Chaque
variable a un type
⚫ Définit « ce que l'on peut faire avec »
⚫ Permet de détecter des erreurs
⚫ Allocation de l'espace mémoire
⚫ Parfois explicite et inaltérable, en JS il est
implicite et modifiable pendant l'exécution
Introduction à la programmation Web en JavaScript
36/61
Les différents types en
javascript
⚫ Pour
obtenir le type d'une variable : typeof
⚫ typeof nomDeLaVariable
⚫
→ renvoie une string, qui peut valoir :
⚪
⚪
⚪
⚪
⚪
⚪
⚪
"undefined" → pas de valeur
"number" → nombre
"string" → chaîne de caractères
"boolean" → booléen (vrai ou faux)
"symbol" → mot clé du langage/appel de
fonction
"function" → une fonction (cf. plus loin)
"object" → n'importe quel autre objet
⚫ Selon
le type les opérateurs n'ont pas la
même sémantique
Introduction à la programmation Web en JavaScript
37/61
Type et opérateurs
⚫ Pour
réaliser des opérations sur des
variables et/ou des constantes
⚫ En javascript, l'opération effectuée par un
opérateur dépend du type des opérandes
Nombres : +,-,/, *,% (reste de la division entière)
⚫ Chaines de caractère : + → concaténation
⚫ Booléens :
⚫
⚪
⚪
⚪
⚫
&& → et logique
|| → ou logique
! → non
Entre une variable et une expression constante :
⚪
= → affectation
Introduction à la programmation Web en JavaScript
38/61
Type et opérateurs
⚫ Pour
réaliser des opérations sur des
variables et/ou des constantes
⚫ En javascript, l'opération effectuée par un
opérateur dépend du type des opérandes
Nombres : +,-,/, *,% (reste de la division entière)
⚫ Chaines de caractère : + → concaténation
<script type="text/javascript">
⚫ Booléens : var uneChaine, unNombre;
uneChaine = "bonjour le";
⚫
⚪
⚪
⚪
⚫
console.log("uneChaine:",
&& → et logique
" monde !");
|| → ou logique
unNombre = 1;
! → non unNombre = unNombre + 1;
uneChaine +
console.log("unNombre:", "1" +
unNombre);
</script>
Entre une variable et une expression constante :
⚪
= → affectation
Que va afficher la console du navigateur ?
Pourquoi ?
Introduction à la programmation Web en JavaScript
39/61
Structures de contrôle :
condition
⚫ Syntaxe
if (/*condition*/){//alors
//instructions effectuées si la condition est réalisée
}
else{//sinon (optionnel)
}
//instructions effectuées si la condition n'est pas réalisée
⚫ Opérateurs
de condition
égalité : ==
⚫ différent de : !=
⚫ inférieur ou égal à : <=
⚫ supérieur ou égal à : >=
⚫ inférieur à : <
⚫ supérieur à : >
⚫ ET logique : &&
⚫ OU logique : ||
⚫ identique à : ===
⚫ non identique à : !==
⚫
⚫
Exemple
if (maVariable >= 10){
console.log("maVariable
a deux chiffres");
}
else{
console.log("maVariable
n'a pas deux chiffres
(ou alors elle est
négative)");
}
Introduction à la programmation Web en JavaScript
40/61
Structures de contrôle :
condition
⚫ Syntaxe
if (/*condition*/){//alors
//instructions effectuées si la condition est réalisée
}
else{//sinon (optionnel)
}
//instructions effectuées si la condition n'est pas réalisée
⚫ Opérateurs
de condition
⚫
Exemple
if (maVariable >= 10){
égalité : ==
console.log("maVariable
⚫ différent de : !=
a deux chiffres");
⚫ inférieur ou égal à : <=
}
⚫ supérieur ou égal à : >=
else{
console.log("maVariable
⚫ inférieur à : <
n'a pas deux chiffres
⚫ supérieur à : >
(ou alors elle est
⚫ ET logique : &&
négative)");
}
⚫ OU logique : ||
⚫ identique à : ===
⚫ non identique à : !==
Modifier
l'exemple pour qu'il indique, même avec les
⚫
nombres négatifs,
nombre
de chiffres…
Introductionle
à la
programmation
Web en JavaScript
41/61
Fonctions
⚫≈
séquence d'instructions pouvant avoir
recours à des paramètres, et renvoyant une
valeur calculée en fonction de ces paramètres.
⚫ En JavaScript :
⚫
Définition
function addition(par1, par2, etc){
//Séquence d'instructions
/*Par exemple:*/
var resultat = par1 + par2 + etc;
return resultat;
}
⚫
Appel
console.log(addition(3,2,1));
//affiche 6
Introduction à la programmation Web en JavaScript
42/61
Fonctions
⚫ ≈montrer
séquence
d'instructions
pouvant avoir
Créer une fonction
qui prend
en
entrée, une classeCSS
(chaîne
de caractère)
recours
à des
paramètres, et renvoyant une
et vérifie si cette classe
est "verso"
si oui
valeur
calculéeeten
fonction de ces paramètres.
renvoie "recto".
⚫ En JavaScript :
⚫
Définition
function addition(par1, par2, etc){
//Séquence d'instructions
/*Par exemple:*/
var resultat = par1 + par2 + etc;
return resultat;
}
⚫
Appel
console.log(addition(3,2,1));
//affiche 6
Introduction à la programmation Web en JavaScript
43/61
Objets et DOM
⚫ JS
est un langage « objet »
⚫ Définition
« un objet est un conteneur symbolique, qui possède sa
propre existence et incorpore des informations et des
mécanismes, éventuellement en rapport avec une chose
tangible du monde réel, et manipulés dans un programme »
⚫ Informations → Attributs
⚫ Mécanismes → Méthodes
⚫
⚫ Dans
un navigateur, le document est représenté sous
forme d'objet : Document Object Model (DOM)
⚫
Exemples d'appels :
⚪
Méthode :
var elt = document.getElementById("idElement");
⚪
Attribut :
console.log(elt.className);
⚪ elt.className="nomDeLaClasse à appliquer";
⚪
Introduction à la programmation Web en JavaScript
44/61
Objets et DOM
⚫ JS
est un langage « objet »
⚫ Définition
« un objet est un conteneur symbolique, qui possède sa
propre existence et incorpore des informations et des
mécanismes, éventuellement en rapport avec une chose
tangible du monde réel, et manipulés dans un programme »
⚫ Informations → Attributs
⚫ Mécanismes → Méthodes
⚫
⚫ Dans
unune
navigateur,
le document
est carte
représenté sous
Ajouter
classe "faceVisible"
à une
forme
d'objet :
Object Model (DOM)
et montrer
son Document
"recto" en utilisant la classe
⚫
cssExemples d'appels
correspondante :(.faceVisible) à la
⚪ Méthode :
manière
dont on l'affichait avec le pseudovar elt = document.getElementById("idElement");
sélecteur
:hover.
⚪ Attribut :
console.log(elt.className);
⚪ elt.className="nomDeLaClasse à appliquer"
⚪
Introduction à la programmation Web en JavaScript
45/61
Objets et DOM
⚫ JS
est un langage « objet »
Modifier la fonction montrer pour qu'elle prenne en
⚫ Définition
entrée un élément elt et modifie sa classe css en
⚫ « un objet est un conteneur symbolique, qui possède sa
"faceVisible"
uniquement si l'élément n'a pas encore
propre existence et incorpore des informations et des
cette
classe.
mécanismes, éventuellement en rapport avec une chose
NB : Le document HTML est traité séquentiellement par
tangible du monde réel, et manipulés dans un programme »
le navigateur. Si votre programme JavaScript fait appel à
⚫ Informations → Attributs
des éléments qui ne sont pas encore affichés, une erreur
⚫ Mécanismes → Méthodes
se produira. Pour cet exercice, il est recommandé de
⚫ Dans un navigateur, le document est représenté sous
mettre la balise </script> en fin de document (au moins
forme
d'objet :
Document
Object
pour appeler
la fonction
montrer
). Model (DOM)
⚫
Exemples d'appels :
⚪
Méthode :
var elt = document.getElementById("idElement");
⚪
Attribut :
console.log(elt.className);
⚪ elt.className="nomDeLaClasse à appliquer";
⚪
Introduction à la programmation Web en JavaScript
46/61
DOM et événements (1)
⚫ Selon
les actions du navigateur, des
événements peuvent se déclencher
⚫ C'est toujours un objet du DOM qui
déclenche l'événement
⚫ Exemples d'événements :
Chargement (d'un élément, de la fenêtre…) ;
⚫ Clic de souris (sur un élément) ;
⚫…
⚫
⚫ Capturer
un événement, c'est demander
au navigateur d'exécuter une instruction,
quand l'événement est déclenché
Introduction à la programmation Web en JavaScript
47/61
DOM et événements (1)
⚫ Selon
les actions du navigateur, des
événements peuvent se déclencher
⚫ C'est toujours un objet du DOM qui
déclenche l'événement
⚫ Exemples d'événements :
Chargement (d'un élément, de la fenêtre…) ;
⚫ Clic de souris (sur un élément) ;
⚫…
Utiliser document.getElementById, pour
⚫
un élémentc'est
elt avec
⚫ Capturersélectionner
un événement,
demander
javascript.
au navigateur
d'exécuter une instruction,
Associer au listener onclick, de elt, la
quand l'événement
est déclenché
fonction montrer
.
Introduction à la programmation Web en JavaScript
48/61
DOM et événements (2)
⚫ Pour
exécuter un traitement au chargement
de la page, on utilisera onload.
⚫ Depuis le code HTML :
<body onLoad="instructions javascript à
éxecuter quand le body est chargé">
Contenu du body
</script>
⚫ En
⚫
manipulant le DOM (solution à privilégier) :
window.onload = fonction;
Attention en onload est une méthode (fonction associée à
une classe d'objets), l'interpréteur attend donc à gauche de
l'opérateur d'affectation une fonction et non une instruction.
Introduction à la programmation Web en JavaScript
49/61
DOM et événements (2)
⚫ Pour
exécuter un traitement au chargement
de la page, on utilisera onload.
⚫ Depuis le code HTML :
Créer<body
une fonction
init associée au
onLoad="instructions
javascript à
listener
window.onload
éxecuter
quand, qui
le prépare
body est chargé">
l'élémentContenu
choisi à capturer
le
du body
onclick
.
</script>
⚫ En
⚫
manipulant le DOM (solution à privilégier) :
window.onload = fonction;
Attention en onload est une méthode (fonction associée à
une classe d'objets), l'interpréteur attend donc à gauche de
l'opérateur d'affectation une fonction et non une instruction.
Introduction à la programmation Web en JavaScript
50/61
Ajouter des nœuds au DOM
⚫ Le
DOM contient toute la page (et donc tous
ses éléments)
Possible d'agir sur les propriétés des nœuds
depuis javascript ;
⚫ Possible également d'ajouter des nœuds.
⚫
elt est un élément
du DOM obtenu par
exemple avec
getElementById.
⚫ Méthode document.createElement
var newElt = document.createElement("div");
⚫ Attribut elt.innerHTML
newElt.innerHTML = "<p>et de 1 par</p>
<p id='p2'>et de 2</p>";
document.body.appendChild(newElt);
⚫ Méthodes elt.insertBefore
et elt.appendChild
var newpElt = document.createElement("p");
newElt.insertBefore(newpElt,
document.getElementById("p2"));
newpElt.appendChild(document.createTextNode("et de
1,5p"));
Introduction à la programmation Web en JavaScript
51/61
Ajouter des nœuds au DOM
⚫ Le
Observertoute
l'exécution
du programme
DOM contient
la page
(et doncentous
utilisant l'onglet debugger. Vous pouvez
ses éléments)
placer des points d'arrêts (breakpoints) en
⚫ Possible d'agir sur les propriétés des nœuds
cliquant le numéro de la ligne.
depuis javascript ;
Une fois le point d'arrêt atteint vous pouvez
⚫ Possible également
des
nœuds.(F10 ?).
exécuter le d'ajouter
programme
pas-à-pas
⚫ Méthode document.createElement
var newElt = document.createElement("div");
⚫ Attribut elt.innerHTML
newElt.innerHTML = "<p>et de 1 par</p>
<p id='p2'>et de 2</p>";
document.body.appendChild(newElt);
⚫ Méthodes elt.insertBefore
et elt.appendChild
var newpElt = document.createElement("p");
newElt.insertBefore(newpElt,
document.getElementById("p2"));
newpElt.appendChild(document.createTextNode("et de
1,5p"));
Introduction à la programmation Web en JavaScript
52/61
Ajouter des nœuds au DOM
⚫ Le
Observertoute
l'exécution
du programme
DOM contient
la page
(et doncentous
utilisant l'onglet debugger. Vous pouvez
ses éléments)
placer des points d'arrêts (breakpoints) en
⚫ Possible d'agir sur les propriétés des nœuds
cliquant le numéro de la ligne.
depuis javascript ;
Une fois le point d'arrêt atteint vous pouvez
⚫ Possible également
des
nœuds.(F10 ?).
exécuter le d'ajouter
programme
pas-à-pas
Que se passera-t-il si, après avoir placé un
⚫ Méthode document.createElement
nœud
dans l'arbre du DOM, on le place à
var newElt =
document.createElement("div");
à un autre endroit DOM ?
⚫ Attribut eltnouveau
.innerHTML
(Prouver
son hypothèse…)
newElt.innerHTML
= "<p>et
de 1 par</p>
<p id='p2'>et de 2</p>";
document.body.appendChild(newElt);
⚫ Méthodes elt.insertBefore
et elt.appendChild
var newpElt = document.createElement("p");
newElt.insertBefore(newpElt,
document.getElementById("p2"));
newpElt.appendChild(document.createTextNode("et de
1,5p"));
Introduction à la programmation Web en JavaScript
53/61
Créer une fonction versDOM qui, à la donnée
du contenu du recto et du verso et de l'id
d'un élément,
⚫ Le DOM contient toute la page (et donc tous
crée un élément HTML « carte », associe
ses éléments)
montrer à l'événement
onclick et insère
l'élément dans l'arbre
du DOM dans
⚫ Possible
d'agir sur les propriétés des nœuds
l'élément ayant l'id fourni
en entrée.
depuis
javascript ;
Ajouter des nœuds au DOM
⚫
Possible également d'ajouter des nœuds.
⚫ Méthode document.createElement
var newElt = document.createElement("div");
⚫ Attribut elt.innerHTML
newElt.innerHTML = "<p>et de 1 par</p>
<p id='p2'>et de 2</p>";
document.body.appendChild(newElt);
⚫ Méthodes elt.insertBefore
et elt.appendChild
var newpElt = document.createElement("p");
newElt.insertBefore(newpElt,
document.getElementById("p2"));
newpElt.appendChild(document.createTextNode("et de
1,5p"));
Introduction à la programmation Web en JavaScript
54/61
Programmation
Orientée Objet
⚫ En
manipulant le DOM, nous avons
manipulé des objets
⚫ Rappels
⚫
« un objet est un conteneur symbolique, qui
possède sa propre existence et incorpore des
informations et des mécanismes,
éventuellement en rapport avec une chose
tangible du monde réel, et manipulés dans un
programme »
⚪
⚪
Informations → Attributs
Mécanismes → Méthodes
⚫ Manière
de penser son système et
d'organiser son code
Introduction à la programmation Web en JavaScript
55/61
Un outil de modélisation
⚫ …qui
marche également avec des éléments
de la vie quotidienne
⚫
Une cuisinière ?
De quels objets auriez-vous besoin
pour modéliser votre jeu de memory ?
Indiquez
•
Leurs méthodes
•
Leurs attributs
•
Les événements qu'ils devront gérer
Introduction à la programmation Web en JavaScript
56/61
Créer ses propres classes
⚫ Exemple
de déclaration de classe
class Carte{
constructor(image, id){
this.img = image;
this.id = id;
}
creerHTML(){
return "<article
id='carte"+this.id+"'><section class='recto'><img
src='"+this.img+"' /></section><section
class='verso'></section></article>";
}
}
⚫ Exemples
d'instanciation de la classe
var i = 0 , carte1 = new Carte("raton.png", i);
i++ ;
var carte2 = new Carte("chien.png", i);
var newElt = document.createElement("div");
newElt.className = "ligne";
newElt.innerHTML = carte1.creerHTML() +
carte2.creerHTML();
Introduction à la programmation Web en JavaScript
57/61
Créer ses propres classes
⚫ Exemple
de déclaration de classe
class Carte{
Dans ce contexte, le motconstructor(image, id){
clé this permet de
this.img = image;
this.id = id;
faire référence à
}
l'instance (l'objet) de la
creerHTML(){
return "<article
classe en cours de
id='carte"+this.id+"'><section class='recto'><img
définition.
src='"+this.img+"' /></section><section
class='verso'></section></article>";
}
}
⚫ Exemples
d'instanciation de la classe
var i = 0 , carte1 = new Carte("raton.png", i);
i++ ;
var carte2 = new Carte("chien.png", i);
var newElt = document.createElement("div");
newElt.className = "ligne";
newElt.innerHTML = carte1.creerHTML() +
carte2.creerHTML();
Introduction à la programmation Web en JavaScript
58/61
Créer ses propres classes
⚫ Exemple
Appelé à la
création de
chaque nouvel
objet Carte
(avec new)
de déclaration de classe
class Carte{
constructor(image, id){
this.img = image;
this.id = id;
}
creerHTML(){
return "<article
id='carte"+this.id+"'><section class='recto'><img
src='"+this.img+"' /></section><section
class='verso'></section></article>";
}
}
⚫ Exemples
d'instanciation de la classe
var i = 0 , carte1 = new Carte("raton.png", i);
i++ ;
var carte2 = new Carte("chien.png", i);
var newElt = document.createElement("div");
newElt.className = "ligne";
newElt.innerHTML = carte1.creerHTML() +
carte2.creerHTML();
Introduction à la programmation Web en JavaScript
59/61
Créer ses propres classes
⚫ Exemple
de déclaration de classe
class Carte{
constructor(image, id){
this.img = image;
this.id = id;
}
creerHTML(){
return "<article
id='carte"+this.id+"'><section class='recto'><img
src='"+this.img+"' /></section><section
class='verso'></section></article>";
}
}
Les attributs
initialisés dans
le constructeur
sont utilisés
dans la
méthode
creerHTML. ⚫ Exemples
d'instanciation de la classe
var i = 0 , carte1 = new Carte("raton.png", i);
i++ ;
var carte2 = new Carte("chien.png", i);
var newElt = document.createElement("div");
newElt.className = "ligne";
newElt.innerHTML = carte1.creerHTML() +
carte2.creerHTML();
Introduction à la programmation Web en JavaScript
60/61
Créer ses propres classes
⚫ Exemple
de déclaration de classe
class Carte{
constructor(image, id){
this.img = image;
this.id = id;
}
creerHTML(){
return "<article
id='carte"+this.id+"'><section class='recto'><img
src='"+this.img+"' /></section><section
class='verso'></section></article>";
À vous de jouer !!!
}
(à un moment il faudra quand
}
⚫ Exemples
même qu'on parle des boucles et
des tableaux et de JSON)
d'instanciation de la classe
var i = 0 , carte1 = new Carte("raton.png", i);
i++ ;
var carte2 = new Carte("chien.png", i);
var newElt = document.createElement("div");
newElt.className = "ligne";
newElt.innerHTML = carte1.creerHTML() +
carte2.creerHTML();
Introduction à la programmation Web en JavaScript
61/61
