M41B2 Technologies Javascript

95 Pages·2016·5.4 MB·French

M41B2 Technologies Javascript
AngularJS / NodeJS
TD 1
Jérôme Landré – [email protected]
bureau C203 (GMP) – bureau H013 (MMI)
DUT Métiers du Multimédia et de l'Internet
I.U.T. de Troyes
Université de Reims Champagne-Ardenne
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
VI- Présentation d'AngularJS
VII- Premier programme avec AngularJS
VIII- Les directives d'AngularJS
2
I- Présentation et organisation
3
Page personnelle
Jérôme Landré
●
Enseignant-chercheur en traitement d'images
●
http://jerome.landre.pagesperso-orange.fr/
●
4
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 »
5
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 :
●
alert('Bonjour !');
Apprendre par coeur
Code <script>
english text alert('Bonjour !');
JS
</script>
6
II- Javascript ?
7
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
8
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).
9
Comment ça marche ?
----------
-----
– --- --
------------
-----
<script>
------------
--------
Navigateur ----
----------
(Interpréteur) ---
-------
------------
</script>
- ---- -
------------
-------------
-----------
-------------
Code source Code généré
Javascript (Code interprété)
10