View
0
Download
0
Category
Preview:
Citation preview
Architecture(s) et
application(s) Web
CSC4101 - Interface dynamique côtéCSC4101 - Interface dynamique côté
navigateur en Javascriptnavigateur en Javascript
11/10/2021
1
1. Interfaces dynamiquesInterfaces dynamiques
2
Vues générées côté serveur
3
Vues générées côté client
« HTML dynamique »
4
</principes>
5
2. JavaScriptJavaScript
6
JavaScript pour applications Web
JS
Langage de script orienté objet non typéPilier dans la création d’applications Web
Principalement utilisé côté client : interprétépar les navigateurs WebMais peut aussi être utilisé côté serveur(exemple NodeJS)
7
Intérêt d’un script côté navigateur
Améliorer les temps de réponse (exécution côtéclient, pas de latence d’envoi vers le serveur)Contrôler les données des formulaires avant envoivers le serveur (éviter les envois erronés)Réaliser des pages animéesModi�er le contenu, le style de la page courante enfonction des actions de l’utilisateur sur la page
8
Historique
Développé en 1995 par Brendan Eich pourNetscape (nom d’origine LiveScript)Grand succès au début du Web (mais nombreusesincompatibilités entre navigateurs)Nombreuses étapes de standardisationnécessaires
ECMA (European Computer ManufacturersAssociation) a dé�ni le standard ECMAScript
L’arrivée d’AJAX avec le Web 2.0 replaceJavaScript au premier plan
9
Principes de base
Un noyau (le cœur du langage)des opérateurs, des structures, des objetsprédé�nis (Date, Array…)
Un ensemble d’objets associés au navigateurfenêtre (window), document (document),formulaire (form), image (image)…
Gestion des événementsCapter les évènements : clics, déplacement dela souris, chargement de la page …Associer des fonctions aux événements
10
Plate-forme
L’interface DOM (Document Object Model)standardise les méthodes pour accéder par objetsaux documents
Nombreuses bibliothèques (frameworks) aident àprogrammer.
Ex: Dojo, Rialto, Angular, JQuery, Yui…
« bytecode » pour programmer à un plus hautniveau, dans un langage compilé en JS : TypeScript,…
11
JSON (JavaScript Object Notation) utilise la notationdes objets JavaScript pour transmettre del’information structurée{ "nationalTeam":"Norway", "achievements":[ "12 Olympic Medals", "9 World Championships", "Winningest Winter Olympian", "Greatest Nordic Skier" ], "name":"Bjoern Daehlie", "age":41, "gender":"Male" }
12
Utilisation
13
Intégration dans pages HTML
Code JS contenu ou référencé dans balises<script> et </script>
Soit directement :
Soit dans un �chier séparé (ou URL externe) :
<head> <script> code javascript (fonctions, variables...) </script> </head>
<head> <script src="monprog.js"></script> </head>
14
Appel des fonctions JavaScript
à partir d’évènements dans les balises
à partir d’un lien
par d’autres fonctions
<input type="button" onClick="alert('clic sur bouton');">
<a href="javascript:affiche(menu);">
function hello() { alert("hello"); }
15
Gestion d’événements
Chaque événement a un traitement par défautOn peut associer une fonction à un évènement,pour l’exécuter avant traitement par défaut
Si retourne faux (false), alors traitement pardéfaut pas exécutéSi retourne vrai (true), alors traitement pardéfaut exécuté ensuite
Association fonction à évènement utilise un mot-clef de type « onEvent » (onClick, onLoad,
onChange, onMouseOver, onMouseOut,
onKeyDown…)16
Exemples de ré�exes
clic sur bouton :
déplacement souris au-dessus :
�n de chargement du document :
<input type="button" name="surface" value="Surface" onClick="Test(all);">
<a href="menu.html" onMouseOver="affiche();">
<body onLoad="init(1);">
17
Exemples évènements / balises
Evénements Balises Fonctions
onBlur * désélection
onChange idem modi�cation
onFocus idem sélection
onSelect password, text, textarea sélection devaleur
onClick a href, button, checkbox, radio, reset,submit
clic
onMouseover a href, area souris pointe
onLoad body chargementpage
onSubmit form soumission
18
Exemple de gestion d’événements<html> <head> <script language="JavaScript"> function maFonction() { alert('Vous avez cliqué sur le bouton GO'); } function autreFonction() { alert('Cliqué sur le lien "Cliquer ici"'); } </script> </head> <body> <ol> <li>Appel sur évènement : <input type="button" value="GO" onClick="maFonction();"> </li> <li>Appel sur un lien : <a href="javascript:autreFonction();">Cliquer ici</a> </li> </ol> <a href="javascript:history.go(-1);">Retour</a> </body> </html>
19
Objets JavaScript
JavaScript a des types primitifs et des objetsTypes primitifs créés par affectation directeUtilisation d’objets
Instanciation par un constructeurSyntaxe à la java :
Accès aux attributs :monObjet.attributs
Accès aux méthodes :monObjet.méthode()
Modèle objet beaucoup moins strict que Java
20
Exemple// Création d'une variablevar etienne = { nom : "etienne"; branche : "marketing"; } // Création d'un objet par constructeurfunction Employe (nom,branche) { this.nom = nom; this.branche = branche; this.fullDescription = function () { return this.nom + " " + this.branche; }; } var marc=new Employe("marc","informatique"); marc.fullDescription(); // appel de méthodes
21
Objets prédé�nis 1/2
Les objets du noyau
Object : création d’un objet
Function : création d’une fonction
Array : création d’un tableau
String : création d’une chaîne de caractères
Number : création d’un nombre
Date : création d’une date
Math : création d’un objet mathématique
etc.
22
Objets prédé�nis 2/2
Les objets du navigateur :
fenêtre,document,formulaires…
23
Hiérarchie des objets du navigateur
Un navigateur (objet navigator),Contient une fenêtre (window),
Qui contient son document HTML(document),
ses formulaires (form[]), ses images(image[]), ses liens (link[])…
Un formulaire contientdes boutons (button[]),des listes déroulantes (select[])
qui contiennent des options (option[])etc.
24
Attributs et méthodes
Les attributs d’un objet correspondent auxattributs des balises HTML (par exemple height,width, name, src … pour l’objet image)Les méthodes correspondent aux fonctionnalitésdu navigateur (par exemple back, forward, go pourl’historique (history))Certains attributs et méthodes sont communs à unensemble d’éléments
25
Mise au point
Délicate avec les langages interprétés car :
Les erreurs n’apparaissent qu’à l’éxécutionPar défaut, les erreurs ne sont pas af�chées
26
Outil : console JS
console de développement du navigateurPossibilités variables selon les navigateursIndication des erreurs de syntaxeInspection du contenu des variablesDébogueur, points d’arrêt, af�chage desvariables
Af�chage d’informations sur la console :Af�chage des erreurs de syntaxe éventuellesPar programme avec la fonctionconsoleLog(« message »+variable)
27
</JavaScript>
28
3. Manipulation du DOMManipulation du DOM
29
DOM
Document Object Model (Modèle Objet du Document)
Modèle de la structure des documents HTMLInterface de programmation standardisée par leW3C (API DOM)Implémentée par les navigateurs avec plus oumoins d’extensionsRéférences :
spéci�cations du ,le DOM Gecko ( )
W3CMozilla
30
Exemple d’arbre DOM
<html> <head> ... </head> <body> <h1>DOM</h1> <div id='main'> <p name="p1">Le DOM trop top</p> <p class="p2">DOM API</p> </div> <h2>Exemples</h2> </body> </html>
31
Manipulation
Le DOM offre un ensemble de méthodes deparcours de l’arbre pour accéder et/ou modi�erson contenu
ajouter des élémentssupprimer des élémentsajouter et/ou modi�er des attributsetc.
32
Exemple d’utilisation du DOM
Le DOM comporte de nombreuses méthodes pouraccéder à un élément, de différentes façons :
par son identi�ant : <div id="intro">par sa position dans l’arbre : (�ls, parent…)par son type : ensemble des paragraphes, desniveaux h2, …
33
Utilité
Modi�er l’apparencePar exemple, changer dynamiquement le lien(attribut class) avec des dé�nitions de feuilles de
style : interfaces réactivesExemple : masquage, démasquage des slides dans
, utilisé pour les diapos projetées en CMreveal.js
34
</manipulation_DOM>
35
4. FrameworkFramework JavaScript JavaScript JQueryJQuery
36
Avantages d’un FrameWork
Faciliter la tâche des développeurs.
Il existe un grand nombre de frameworksLequel choisir ? éviter d’en utiliser plusieurs dansune même aplicationCritères de choix : les performances, lesfonctionnalités, le poids, la commmunauté, etc.Il existe une page de comparaison sur Wikipédia :http://en.wikipedia.org/wiki/Comparison_of_JavaScr
37
jQuery
Bibliothèque des plus populaires et des plusutiliséesUtilisable avec tous les navigateurs pour unrésultat identique (avant la standardisation)
https://jquery.com/
38
Caractéristiques
Slogan : « write less, do more » : écrire moins pourfaire plusFacilité d’apprentissageSimpli�cation de la programmation JavaScriptEncapsulation des actions courantes dans desméthodes, ce qui réduit le code à écrireSimpli�cation de certaines tâches comme lamanipulation du DOM ou la programmation AJAX
39
Fonctionnalités
Accéder aux objets HTML/DOMManipuler les styles CSSGérer les évènementsRéaliser des effets et des animationsProgrammer avec AJAXetc
jQuery dispose aussi d’extensions sous forme de plugins
40
Utiliser JQuery dans les pages HTML
télécharger depuis jQuery.com et inclure en local
ou référencer sur serveur de contenu externe, p. ex. CDN (Content Delivery Network) Google
Attention : traçage des utilisateurs
<head> <script src="jquery-1.9.1.min.js"></script> </head>
<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.m </script> </head>
41
Programmation « événementielle »
1. Le navigateur (lui-même), ou les interactions del’utilisateur déclenchent des événements
2. les événement déclenchent l’exécution d’actionssur les objets du programme (dont le DOM).
42
Structure générale des programmes
1. Sélectionner des éléments du DOM HTML :générer des objets javascript qui les représentent
2. Installer des gestionaires d’événements / actionssur ces éléments : ces gestionnaires sont desfonctions
43
Syntaxe de base
Syntaxe de base jQuery :
Le caractère $ précise une « référence » à
jQueryLe sélecteur (selector) permet de
sélectionner un (ou plusieurs) élément(s)HTMLL’action (action) est exécutée sur chaque
élément sélectionné
$(selector).action(...)
44
Actions
Actions immédiates : changer l’état d’un élémentdu DOM. Exemple :
Mise en place de ré�exes (callbacks) sur desévénements (actions différées) :
$(this).hide() // cacher l'élément courant
$('#bouton1').click(function() { // actions à faire lors d'un clic sur le bouton //... });
45
Point d’entrée du code
Pour éviter que nos actions jQuery s’exécutent surdes objets non encore chargés, jQuery permet dene démarrer le tout qu’une fois reçu l’évènement« document ready » :$(document).ready(function(){ // code jQuery... });
46
il existe aussi une écriture simpli�ée équivalentemais un peu moins « lisible » :$(function(){ // code jQuery... });
47
Exemples sélecteurs JQuery
l’élément courant$(this)
le nom de la balise$("p"), pour tous éléments <p>
l’identi�ant$("#id1") : l’élément ayant l’identi�ant id1
la classe$(".test") tous éléments ayant attribut class
test
Même syntaxe que les sélecteurs CSS48
</JQuery>
49
5. AJAXAJAX
50
AJAX ?
51
AJAX
Asynchronous JavaScript And XML
Ne plus lire l’acronyme littéralement (XML)AJAX signi�e qu’on intègre différentestechnologies
centrées sur Javascriptrequêtes HTTP asynchrones vers serveurs
Traitement de données supplémentairesrécupérées sur serveur(s)Exemple : construction progressive d’unformulaire en fonction des réponses del’utilisateur.
52
Classe XMLHttpRequest (XHR) de
JavaScript
Élément clef de la technologie AJAXCréé en 1999 par Microsoft comme objet ActiveXIntégré comme objet JavaScript par Mozilla.Création : new XMLHttpRequest();
Ensuite, utilisation comme tout objet via sespropriétéset/ou ses méthodes
Alternative avec jQuery (voir plus loin)
53
Principe de fonctionnement
Un évènement (clic, saisie de texte…) provoquel’exécution d’une fonction JavaScriptCette fonction
1. instancie un objet XMLHttpRequest
2. transmet sa requête HTTP à un serveur (GET
d’un document ou POST de données, ou …)
3. récupère la réponse lorsque celle-ci estdisponible (asynchrone)
4. met à jour la partie concernée de la pagecourante (un champ de saisie, une division…)
54
Sous-requêtes HTTP
55
Utilisation d’AJAX avec jQuery
L’utilisation de jQuery permet de faciliter l’écriturede programmes AJAX avec la fonction :
$.ajax()
56
En paramètres la description de la requête (objetau format JSON) :
url : dé�nit l’URL de la requête
type : précise la méthode (GET ou POST)
data : précise les données à envoyer si POST
success : dé�nit traitement à effectuer si
requête réussit (fonction)error : dé�nit traitement à effectuer si
requête échoue (fonction)
57
Exemple//... $.ajax( { url: "test.php", error: function(resultat, statut, erreur) { // ... } success: function(resultat, statut) { // ... } } );
58
Exemple d’application
Construction de formulaires dynamiques avec Symfony
59
</AJAX>
60
Take awayTake awayJavaScript (programmation événementielle)manipulation du DOMJQuery
Sélecteurs similaires à ceux de CSSAJAX : requêtes asynchrones
61
Ensuite…Ensuite…
62
TP n°10
Formulaires dynamiques
63
Formulaire CRUD des projets
64
Formulaire « tout-en-un » :Nouveau Projet
Liste de tâchesCréation / modi�cation en une seule foisNombre de tâches quelconque
65
Principe
Gestionnaire de formulaire (ProjectType)
Modèle de formulaire prêt-à-l’emploi« embarqué » dans le HTML
Code JS pour ajout/suppression sous-formulairedes tâches (TodoType)
66
ProjectType<?php //... class ProjectType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $optio { $builder ->add('title') ->add('description') ->add('todos', CollectionType::class, array( 'entry_type' => TodoType::class, 'entry_options' => array('label' => false), 'allow_add' => true, 'by_reference' => false, 'allow_delete' => true, ))
67
Twig
templates/project/_form.html.twig
{{ form_start(form) }} {{ form_row(form.title) }} {{ form_row(form.description) }} <h3>Tasks</h3> <ul class="todos" data-prototype="{{ form_widget(form.todos.vars.prototype)|e('html {# passer en revue chaque todo existante pour afficher ses champs {% for todo in form.todos %} <li>{{ form_row(todo.title) }}<br/> {{ form_row(todo.completed) }}</li> {% endfor %} </ul> <button class="btn">{{ button_label|default('Save') }}</button> {{ form_end(form) }}
68
HTML
<ul data-prototype=" vaut
form_widget(form.todos.vars.prototype)
encodé
<form name="project" method="post"> ... <h3>Tasks</h3> <ul class="todos" data-prototype="<div id="project_to <!-- rien ici --> </ul> <button class="btn">Save</button> ...
69
<ul data-prototype=" /
form_widget(form.todos.vars.prototype)
en clair :<div id="project_todos___name__"> <div class="form-group"> <label for="project_todos___name___title">Title</label> <textarea id="project_todos___name___title" name="project[todos][__name__][title]" class="form-control"></textarea> </div> <div class="form-group"> <div class="form-check"> <input type="checkbox" id="project_todos___name___completed" name="project[todos][__name__][completed]" class="form-check-input" value="1" /> <label class="form-check-label" for="project_todos___name___completed">Completed</label> </div> </div> </div> 70
JS (JQuery)var $collectionHolder; //setup an "add a todo" linkvar $addTodoButton = $('<button type="button" class="add_todo_link"> Add a task</button>'); var $newLinkLi = $('<li></li>').append($addTodoButton); jQuery(document).ready(function() { // Get the ul that holds the collection of todos $collectionHolder = $('ul.todos'); // add the "add a todo" anchor and li to the todos ul $collectionHolder.append($newLinkLi); $addTodoButton.on('click', function(e) { // add a new todo form (see next code block) addTodoForm($collectionHolder, $newLinkLi); }); });
71
function addTodoForm($collectionHolder, $newLinkLi) { // Get the data-prototype explained earlier var prototype = $collectionHolder.data('prototype'); var newForm = prototype; // You need this only if you didn't set 'label' => false in your tags // Replace '__name__label__' in the prototype's HTML to // instead be a number based on how many items we have // newForm = newForm.replace(/__name__label__/g, index); // Replace '__name__' in the prototype's HTML to // instead be a number based on how many items we have newForm = newForm.replace(/__name__/g, index); // Display the form in the page in an li, before the "Add a task" lin var $newFormLi = $('<li></li>').append(newForm); $newLinkLi.before($newFormLi); }
72
PostfacePostface
73
Crédits illustrations et vidéos
Logo JQueryIllustration « When you say AJAX » (auteur inconnu)- source : https://9gag.com/gag/6304578/when-you-say-ajax
74
CopyrightCopyrightDocument propriété de ses auteurs et de TélécomSudParis (sauf exceptions explicitementmentionnées).Réservé à l’utilisation pour la formation initiale àTélécom SudParis.
75
Recommended