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
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
3
I- Présentation et organisation
4
Page personnelle● Jérôme Landré● Enseignant-chercheur en traitement d'images● http://jerome.landre.pagesperso-orange.fr/
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 »
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
7
II- Javascript ?
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
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).
10
Comment ça marche ?
Navigateur(Interpréteur)
---------------
------------<script>--------
-----------------
</script>-----------------------
-------------
– --- -------
-------------------
------------- ---- -
-------------
Code source Javascript
Code généré (Code interprété)
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
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
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)
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
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>
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>
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
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>
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()
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>
21
Variables et affectations● Ce qui donne :
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>
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>
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>
25
Programmation événementielle
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>
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;}
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>
29
III- Objets Javascript
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>");
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
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); }
};
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>
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>
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>
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>
37
II- JavaScript Object Notation (JSON)
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é
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 « [...] »
40
Exemples JSON
{
"livre":
{"id" : "2014-123",
"titre" : "Node.js, MongoDB, and AngularJS Web Development",
"auteur" : "Brad DAYLEY"
}
}
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>
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>
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"
}
]
}
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>
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>
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>");
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>
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>
49
III- Le modèle MVC
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.
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
52
Avez-vous des questions ?