M4201 Technologies Javascript -...

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

mailto:[email protected]

mailto:[email protected]

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

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

http://www.w3.org/TR/html5/scripting-1.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>



</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 :



</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


<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


<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><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 :



</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 :



</head><body>


<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



</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



</head><body>


<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",


"auteur" : "Brad DAYLEY"

},

{

"id" : "2014-345",

"titre" : "Learning AngularJS the Easy Way",

"auteur" : "Brendon CO"

}

]

}

44



</head><body>


<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



</head><body>


<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",


"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



</head><body>


<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



</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 ?

M4201 Technologies Javascript -...

Documents

Transcript of M4201 Technologies Javascript -...