m4201 technologies javascript -...
TRANSCRIPT
![Page 1: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/1.jpg)
M4201 Technologies Javascript
TD 1
Jérôme Landré – [email protected] Meuzeret – [email protected]
DUT Métiers du Multimédia et de l'InternetI.U.T. de Troyes
Université de Reims Champagne-Ardenne
![Page 2: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/2.jpg)
2
Plan
I- Présentation & organisation
II- Javascript ?– Rappels sur le langage
– Syntaxe du langage
III- Objets Javascript
IV- JavaScript Object Notation (JSON)
V- Le modèle MVC
![Page 3: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/3.jpg)
3
I- Présentation et organisation
![Page 4: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/4.jpg)
4
Page personnelle● Jérôme Landré● Enseignant-chercheur en traitement d'images● http://jerome.landre.pagesperso-orange.fr/
![Page 5: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/5.jpg)
5
Organisation● 6 travaux dirigés (TD) et 6 travaux pratiques
(TP) d'une durée de 1h30● 2 notes : 1 TP coeff. 1/3 (1h) et 1 évaluation
écrite coeff. 2/3 (1h30)● Objectifs du cours :
– Connaître les bases des technologies Javascript AngularJS et node.js
– Analyser et créer des programmes AngularJS et Node.js « simples »
![Page 6: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/6.jpg)
6
Quelques règles● Travail attendu :
– Lire les TDs, avant d'arriver en TD/TP
– Apprendre par cœur les parties signalées par
● En TD et TP :– Pas de téléphone, pas de musique (donc pas
d'écouteurs)
– On ne parle pas, on chuchote
– On fait le travail demandé
● Conventions :
Apprendre par coeur
english text<script> alert('Bonjour !');</script>
alert('Bonjour !');
CodeJS
![Page 7: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/7.jpg)
7
II- Javascript ?
![Page 8: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/8.jpg)
8
C'est quoi Javascript ?● Langage de programmation
– Procédural
– Evénementiel
– Orienté objet
– Pour le web
– Côté client
– Créé en 1995 par Brendan Eich
● Normalisation ECMA-262 : http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
![Page 9: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/9.jpg)
9
Pour quoi faire ?● Javascript permet :
– de générer des pages web dynamiques sur le client,
– d'intéragir avec le document HTML (à travers le Document Object Model : DOM).
![Page 10: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/10.jpg)
10
Comment ça marche ?
Navigateur(Interpréteur)
---------------
------------<script>--------
-----------------
</script>-----------------------
-------------
– --- -------
-------------------
------------- ---- -
-------------
Code source Javascript
Code généré (Code interprété)
![Page 11: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/11.jpg)
11
Utiliser Javascript● Il existe deux manières d'utiliser Javascript :
– En local sur son ordinateur (langage côté client)
– A distance sur un serveur (langage côté client)
Internet
![Page 12: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/12.jpg)
12
Logiciels nécessaires pour JS● Pour programmer avec JS, il faut :
– Un éditeur de textes pour écrire le code
– Un navigateur pour exécuter (tester) le code
![Page 13: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/13.jpg)
13
Logiciels nécessaires pour JS● Une remarque en passant : Quel que soit
l'éditeur de texte choisi, il faudra encoder vos programmes JS en UTF-8 (sans BOM)
![Page 14: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/14.jpg)
14
Ecrire du JS● La balise d'ouverture de JS est <script> (et
</script> pour la fermeture)
http://www.w3.org/TR/html5/scripting-1.htmlThe type attribute gives the language of the script or format of the data. […] The default, which is used if the attribute is absent, is "text/javascript".
● Il peut y avoir plusieurs balises <script> dans un fichier HTML
![Page 15: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/15.jpg)
15
Exemple JS
<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JS</title><meta charset="utf-8" />
</head><body>
<h1>Texte en Javascript</h1><script>
document.write("<p>Bonjour à tous.</p>");</script>
</body></html>
![Page 16: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/16.jpg)
16
Indentation du code● Quand on écrit du HTML ou du JS, il faut
indenter les lignes pour faciliter la lecture
<!DOCTYPE html><html lang="fr"><head><title>Mon site avec JS</title><meta charset="utf-8" /></head><body><h1>Texte en Javascript</h1><script>document.write("<p>Bonjour à tous.</p>");</script></body></html>
<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JS</title><meta charset="utf-8" />
</head><body>
<h1>Texte en Javascript</h1><script>
document.write("<p>Bonjour à tous.</p>");</script>
</body></html>
![Page 17: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/17.jpg)
17
Les commentaires● Les commentaires permettent de donner des
informations lors de la lecture du code source JS, ils ne sont pas interprétés par le moteur JS
● Il existe des commentaires sur une seule ligne et des commentaires sur plusieurs lignes
![Page 18: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/18.jpg)
18
Les commentaires● Commentaires sur une ligne avec // :
● Commentaires multi-lignes avec /* et */
<script> document.write("<p>Bonjour !</p>"); // mot d'accueil</script>
<script> /* Ceci est le message de bienvenue classique */ document.write("<p>Bienvenue sur mon site !</p>");</script>
![Page 19: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/19.jpg)
19
Variables et affectations● Une variable est un emplacement mémoire
possédant un nom qui sert à stocker des informations● Une variable possède un type :
– Simple : entier, réel, booléen, chaîne de caractères, date
– Complexe : tableau, arbre, pile, file, …
● En JS, les variables sont déclarées par var suivi du nom de la variable
● Pour stocker une valeur dans une variable, on utilise l'opérateur d'affectation =
● On peut effectuer des opérations sur les variables ou les écrire avec la fonction document.write()
![Page 20: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/20.jpg)
20
Variables et affectations● Exemple :
<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JS</title><meta charset="utf-8" />
</head><body>
<h1>Variables en Javascript</h1><script>
var gagnant=213;var maChaine="Numéro gagnant : ";document.write("<p>"+maChaine+gagnant+"</p>");
</script></body>
</html>
![Page 21: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/21.jpg)
21
Variables et affectations● Ce qui donne :
![Page 22: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/22.jpg)
22
Opérations sur les variables● Exemples :<script> var a = 17; var b = 5; var c = a + b; // addition var d = a - b; // soustraction var e = a * b; // multiplication var f = a / b; // division var g = a % b; // modulo ou reste de la division</script>
<script> var truc = 5; truc++; // $truc = $truc + 1 truc--; // $truc = $truc - 1 truc += 1; // $truc = $truc + 1 truc -= 2; // $truc = $truc - 2 truc *= 3; // $truc = $truc * 3 truc /= 4; // $truc = $truc / 4 document.write("<p>Valeur finale : "+truc+"</p>"); </script>
![Page 23: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/23.jpg)
23
Syntaxe Javascript<script>
var note1=12;var note2=15;var somme=note1+note2;var moyenne=somme/2;window.alert('La moyenne vaut : '+moyenne);document.write('<p>');for (i=10; i>=0; i--) {
document.write(i+'<br />');}document.write('</p>');if (moyenne>=10) {
document.write('<p>Félicitations !</p>');} else {
document.write('<p>Il faut faire mieux !</p>');}
</script>
![Page 24: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/24.jpg)
24
Programmation événementielle● Javascript est un langage événementiel, c'est-
à-dire qu'on peut associer des événements aux balises de la page HTML
<!DOCTYPE html><html lang="fr">
<head><meta charset="utf-8" />
</head><body>
<h1>Javascript : un langage événementiel !</h1><button onclick='go();'>Go !</button><script>
function go() {window.alert('On y va !!!');
}</script>
</body></html>
![Page 25: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/25.jpg)
25
Programmation événementielle
![Page 26: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/26.jpg)
26
Comprendre la structure d'arbre HTML● On considère le fichier HTML suivant :
● Dessiner l'arbre représentant ce document
<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JS</title> <meta charset="utf-8" /><link rel="stylesheet" href="monstyle.css" />
</head><body>
<h1>Arbre HTML</h1><div>
<p>Bienvenue en <span class="rouge">MMI</span> !</p>
<p>Vous êtes maintenant en <span id="bleu">S4</span> !</p>
</div></body>
</html>
![Page 27: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/27.jpg)
27
Comprendre les styles CSS● On considère le fichier CSS « monstyle.css » suivant :
● Associer les propriétés CSS au nœuds de l'arbre HTML précédent
● En déduire les styles appliqués aux objets du document
body {font-family: sans-serif;color: black;
}h1 {
color: green;}.rouge {
color: red;}#bleu {
color: blue;}
![Page 28: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/28.jpg)
28
Comprendre le DOM● On veut utiliser javascript pour modifier le style de certains
éléments. Ajouter du code javascript pour :
– La couleur de l 'élément d'id « bleu » à « #0000cc »
– La couleur de fond de l'élément de classe « rouge » à #cc0000
– La couleur de tous les éléments « p » à « green »
<script>document.getElementById('bleu').style.color='#0000cc';document.getElementByClassName("rouge").style.backgroundColor='#cc000';
</script>
![Page 29: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/29.jpg)
29
III- Objets Javascript
![Page 30: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/30.jpg)
30
Les objets Javascript● Il y a équivalence entre :
– Déclaration d'un nouvel objet :var personne = { };
– Création d'un nouvel objet :var personne = new Object();
● Remplissage des valeurs :var personne = {"nom":"LANDRE", "anneeNaiss":1972};
● Accès aux valeurs :document.write("<p>Nom : "+personne.nom+"</p>");
ou
document.write("<p>Nom : "+personne["nom"]+"</p>");
![Page 31: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/31.jpg)
31
Les objets Javascript● Un objet possède des propriétés et des
méthodes● Une propriété est une valeur associée à l'objet● Une méthode est une fonction qui agit sur les
propriétés de l'objet
var personne = {"nom":"LANDRE", "prenom":"Jérôme", "ville":"Troyes"
};● Ajouter à l'objet une méthode affNom qui affiche
le nom de la personne
![Page 32: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/32.jpg)
32
Les objets Javascript● Un objet possède des propriétés et des
méthodes● Une propriété est une valeur associée à l'objet● Une méthode est une fonction qui agit sur les
propriétés de l'objet
var personne = {"nom":"LANDRE", "prenom":"Jérôme", "ville":"Troyes", affNom: function() { document.write(this.nom); }
};
![Page 33: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/33.jpg)
33
Les objets Javascript<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1><script>
var personne = {"nom":"LANDRE", "prenom":"Jérôme", "ville":"Troyes", affNom: function() { document.write(this.nom); } };
personne.affNom();</script>
</body></html>
![Page 34: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/34.jpg)
34
Javascript et JSON<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1><script>
var personne = {"nom":"LANDRE", "prenom":"Jérôme", "ville":"Troyes",
};document.write('<p>Bonjour ');personne.affPrenom();document.write(' ');personne.affNom();document.write('.<br />Vous êtes de ');personne.affVille();document.write('.</p>');
</script></body>
</html>
![Page 35: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/35.jpg)
35
Javascript et JSON
● Ecrire un programme JS
qui affiche :
<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1><p>Ceci est une page web.</p>
<script> var personne = { "nom":"LANDRE", "prenom":"Jérôme", "annee_naiss":1972 };
</script></body>
</html>
![Page 36: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/36.jpg)
36
Javascript et JSON
● Ecrire un programme JS
qui affiche :
<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1><p>Ceci est une page web.</p>
<script> var personne = { "nom":"LANDRE", "prenom":"Jérôme", "annee_naiss":1972 };
</script></body>
</html>
![Page 37: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/37.jpg)
37
II- JavaScript Object Notation (JSON)
![Page 38: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/38.jpg)
38
JSON● JSON : JavaScript Object Notation● JSON est un format léger d'échange de
données● JSON est plus lisible que XML● JSON est indépendant du langage utilisé
![Page 39: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/39.jpg)
39
Syntaxe JSON● Les accolades désignent les objets « {...} »● Une propriété et sa valeur sont séparées par le
caractère « : »● Les tableaux sont indiqués par des crochets
droits « [...] »
![Page 40: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/40.jpg)
40
Exemples JSON
{
"livre":
{"id" : "2014-123",
"titre" : "Node.js, MongoDB, and AngularJS Web Development",
"auteur" : "Brad DAYLEY"
}
}
![Page 41: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/41.jpg)
41
Javascript et JSON<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1>
<script>var biblio = {"livre" :
{"id" : "2014-123","titre" : "Node.js, MongoDB, and AngularJS Web Development","auteur" : "Brad DAYLEY"
}};document.write("<p>Titre : "+biblio.livre.titre+"</p>");
</script></body>
</html>
![Page 42: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/42.jpg)
42
Javascript et JSON<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1>
<script>var biblio = {"livre" :
{"id" : "2014-123","titre" : "Node.js, MongoDB, and AngularJS Web Development","auteur" : "Brad DAYLEY"
}};document.write("<p>Titre : "+biblio.livre.titre+"</p>");
</script></body>
</html>
![Page 43: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/43.jpg)
43
Exemples JSON{
"livres": [
{
"id" : "2014-123",
"titre" : "Node.js, MongoDB, and AngularJS Web Development",
"auteur" : "Brad DAYLEY"
},
{
"id" : "2014-345",
"titre" : "Learning AngularJS the Easy Way",
"auteur" : "Brendon CO"
}
]
}
![Page 44: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/44.jpg)
44
Javascript et JSON<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1>
<script>var biblio = {
"livres": [{ "id" : "2014-123",
"titre" : "Node.js, MongoDB, and AngularJS Web Development","auteur" : "Brad DAYLEY" },
{ "id" : "2014-345", "titre" : "Learning AngularJS the Easy Way", "auteur" : "Brendon CO" }
]};
document.write("<p>Titre 0 : "+biblio.livres[0].titre+"</p>");document.write("<p>Auteur 1 : "+biblio.livres[1].auteur+"</p>");
</script></body>
</html>
![Page 45: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/45.jpg)
45
Javascript et JSON<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1>
<script>var biblio = {
"livres": [{ "id" : "2014-123",
"titre" : "Node.js, MongoDB, and AngularJS Web Development","auteur" : "Brad DAYLEY" },
{ "id" : "2014-345", "titre" : "Learning AngularJS the Easy Way", "auteur" : "Brendon CO" }
]};
document.write("<p>Titre 0 : "+biblio.livres[0].titre+"</p>");document.write("<p>Auteur 1 : "+biblio.livres[1].auteur+"</p>");
</script></body>
</html>
![Page 46: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/46.jpg)
46
Exemples JSON{
"livres": [
{"id" : "2014-123",
"titre" : "Node.js, MongoDB, and AngularJS Web Development",
"auteur" : "Brad DAYLEY" },
{ "id" : "2014-345",
"titre" : "Learning AngularJS the Easy Way",
"auteur" : "Brendon CO" },
{ "id" : "2014-444",
"titre" : "AngularJS in 60 Minutes",
"auteur" : "Dan WAHLIN" }
]
}document.write("<p>Titre 0 : "+biblio.livres[0].titre+"</p>");
document.write("<p>Auteur 1 : "+biblio.livres[1].auteur+"</p>");
![Page 47: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/47.jpg)
47
Javascript et JSON<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1><p>Ceci est une page web.</p>
<script>var varJSON = '{ "footballeurs": [ {"nom":"ZIDANE", "prenom":"Zinédine",
"selections":108,"buts":31}, {"nom":"HENRY", "prenom" : "Thierry", "selections":123, "buts":51}, {"nom":"PLATINI", "prenom":"Michel", "selections":72, "buts":41} ]}';
var personnes = JSON.parse(varJSON);
</script></body>
</html>
![Page 48: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/48.jpg)
48
Javascript et JSON<!DOCTYPE html><html lang="fr">
<head><title>Mon site avec JSON</title><meta charset="utf-8" />
</head><body>
<h1>Bienvenue !</h1><p>Ceci est une page web.</p><script>
var varJSON = '{ "footballeurs": [ {"nom":"ZIDANE", "prenom":"Zinédine", "selections":108,"buts":31}, {"nom":"HENRY", "prenom" : "Thierry", "selections":123, "buts":51}, {"nom":"PLATINI", "prenom":"Michel", "selections":72, "buts":41} ]}';
var personnes = JSON.parse(varJSON);document.write("<p>taille : "+personnes.footballeurs.length+".</p>");
}</script>
</body></html>
![Page 49: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/49.jpg)
49
III- Le modèle MVC
![Page 50: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/50.jpg)
50
Le modèle MVC● L'idée est de bien séparer les données, la
présentation et les traitements.● Le modèle MVC permet de décomposer un
problème en trois concepts :– Le modèle (model) représente la structure et le
traitement sur les données,
– La vue (view) correspond à la présentation affichée à l'utilisateur,
– Le contrôleur (controller) réalise l'interface entre le modèle et la vue.
![Page 51: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/51.jpg)
51
Le modèle MVC● Il permet d'assurer un développement
d'application simple à maintenir et réutilisable
Modèle Contrôleur
Vue
dialoguer signaler
interroger
Informer
mettre à jour
![Page 52: M4201 Technologies Javascript - JLjerome.landre.pagesperso-orange.fr/docs/mmi3/m4201-td1-2017.pdf · 12 Logiciels nécessaires pour JS Pour programmer avec JS, il faut : – Un éditeur](https://reader031.vdocuments.mx/reader031/viewer/2022021911/5c37966a09d3f257588bcf6a/html5/thumbnails/52.jpg)
52
Avez-vous des questions ?