Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Marcel Bosc JavaScript Université Paris-13 Département informatique IUT de Vill

Marcel Bosc JavaScript Université Paris-13 Département informatique IUT de Villetaneuse 2014-2015 2ème année - S4, cours - 3/5 M4103C - Programmation Web – client riche Table des matières ● AJAX ● JSON ● DOM Ajax 1ère partie Exemple : Google suggestions suggestions client google.fr BDD serveur web internet navigateur « javas » « javascript » « javascript array» « javascript subs...» page non rechargée ! Exemple : commentaires j'aime j'aime client youtube.com BDD serveur web internet navigateur j'aime com. n°1234 ok. page non rechargée ! Exemple : commentaires client youtube.com BDD serveur web internet navigateur com. triés <div>...</div> page non rechargée ! affichage / tri commentaires affichage / tri commentaires Ajax JavaScript Asynchrone Requête non bloquante à partir du JavaScript, au serveur, sans recharger la page. Asynchronous JavaScript and XML Exemple jQuery .get() $.get("http://exemple.org/commentaire", { id: 5678 }, function(reponse) { // afficher com. }); appelée à la réception de la réponse du serveur appelée à la réception de la réponse du serveur Chronologie client / serveur client google.fr navigateur serveur web internet https://google.fr <html>...</html> 1 3 affichage page 4 « javas » tapé 5 « javas » 6 générer page web chercher « javas » 2 7 BDD liste suggestions 8 mise à jour affichage 9 sans recharger Exemple : suggestion <div> <input id="recherche" type="text" /> <button>chercher</button> </div> <ul id="suggestions"> <li></li> </ul> input div button ul li li id="recherche" li id="suggestions" Suggestion : JS $('#recherche').keyup(function(e) { $.get('http://exemple.org/suggestion.php', {mot: $('#recherche').val()}, function(reponse) { $('#suggestions').html(reponse); $('#suggestions').show(); }); }); 0 1 2 3 4 5 6 7 8 9 JS <li>abricot</li> <li>arbre </li> <li>amis </li> serveur Suggestion : GET $('#recherche').keyup(function(e) { $.get('http://exemple.org/suggestion.php', {mot: $('#recherche').val()}, function(reponse) { $('#suggestions').html(reponse); $('#suggestions').show(); }); }); 0 1 2 3 4 5 6 7 8 9 JS http://exemple.org/suggestion.php?mot=a $_GET['mot'] Suggestion : chronologie JS B A $('#recherche').keyup(function(e) { $.get('http://exemple.org/suggestion.php', {mot: $('#recherche').val()}, function(reponse) { $('#suggestions').html(reponse); $('#suggestions').show(); }); }); 0 1 2 3 4 5 6 7 8 9 0 9 2 3 8 6 7 keyup ! réponse reçue ! JS attente attente serveur serveur A B Suggestion : PHP $mot=$_GET['mot']; $sql="SELECT mot FROM mots WHERE mot LIKE '?%'"; $suggestions=database_list($sql,$mot); $resultat=''; foreach($suggestions as $suggestion) { $resultat.='<li>'.htmlentities($suggestion).'</li>'; } echo $resultat; 0 1 2 3 4 5 6 7 8 BDD http://exemple.org/suggestion.php?mot=a <li>abricot</li> <li>arbre </li> <li>amis </li> Méthode GET GET: peut-être répétée sans conséquences (ne modifie pas l'état sur le serveur) http://exemple.org/recherche.php?mot=jeudi Exemples: modifier l'affichage faire une recherche Contre-exemples: payer en ligne ajouter un commentaire sur un forum "Lire infos sur le serveur" Méthode POST POST: répétition potentiellement gênante ( change l'état du serveur ) Contre-exemples: modifier l'affichage faire une recherche Exemples: payer en ligne ajouter un commentaire sur un forum "Écrire des infos sur le serveur" http://exemple.org/payer.php Entêtes http Exemple : .post() $('.jaime').click(function(e) { $.post('http://exemple.org/jaime.php', {nbCom: $(this).parent().attr('id')}, function(reponse) { ... }); }); 0 1 2 3 4 5 6 7 8 9 JS JSON 2ème partie HTML / Données client exemple.org serveur web navigateur <li>Jean </li> <li>Akima </li> <li>Driss </li> client exemple.org serveur web navigateur { nom: "Saidi", prenom: "Driss", id: 1234, age: 25 } texte texte JSON JSON Format de fichier texte, utilisant la syntaxe JavaScript pour représenter des données (objets, tableaux ...) JavaScript Object Notation très utilisé ! beaucoup de langages PHP JSON : exemples { nom: "Saidi", prenom: "Driss", id: 1234, age: 25 } Objet simple [ "Fraise", "Chocolat", "vanille" ] Tableau simple [ { nom: "Wang", id : 4321 }, { nom: "Amara", id : 5612 } ] Tableau d'objets { nom: "Collège Grange du Bois" ville: { nom: "Savigny-le-Temple", "nom-court": "Savigny", code : 77176 }, adresse: "2 av. Victor..." } Objet complexe PHP: json_encode() { nom: "Saidi", prenom: "Driss", id: 1234, age: 25 } $user=[ 'nom' =>'Saidi', 'prenom'=>'Driss', 'id' =>1234, ]; $user['age']=25; header('Content-Type: application/json'); echo json_encode($user); PHP JSON exemple.org client JS : réponse JSON { nom: "Saidi", prenom: "Driss", id: 1234, age: 25 } $id=$_GET['id']; $u=db('SELECT * FROM user WHERE id=?',$id); echo json_encode($u); user.php $.get('http://exemple.org/user.php', {id: 1234}, function(reponse) { console.log(reponse.nom); console.log(reponse.age); }); }); JS 1 2 3 4 JSON Navigateur Serveur Application vs page + JS Pages web + JS Application JS Navigateur Serveur P A A P P P P A A A A A A A A A A A A Application JS Frameworks DOM 3ème partie jQuery vs DOM Simplicité Comptabilité navigateurs Performance chargement Performance exécution Propriétés Text Node Cookies Env. particuliers jQuery DOM Navigateurs Internet Explorer v.6, ... v.11 Mozilla Firefox safari Chrome 18% 17% 5% 48% Statistiques: 12/2014 http://en.wikipedia.org/wiki/Usage_share_of_web_browsers Mobile 35% Compatibilité caniuse.com MDN : developer.mozilla.org Principaux objets DOM Un titre un paragraphe document HTMLElement window Window & Document body h1 p p head title window.document window.location window.alert() window.console() ... window html document document.body document.getElementById() document.createElement() document.cookie ... document document.getElementById() var j=$('#photo'); j=« liste » d'un seul élément jQuery var d=document.getElementById('photo'); d = un élément DOM jQuery DOM body h1 p p img id="photo" <body> <h1>Ceci est un titre</h1> <p id="p1">Un paragraphe</p> <p>2e paragraphe <img id="photo" src="ex.png"... </p> </body> id="p1" document.createElement() var j=$('<p></p>'); var d=document.createElement('p'); jQuery DOM pas encore dans arbre DOM ! pas encore dans arbre DOM ! body h1 p p img id="photo" id="p1" p node.appendChild() var j=$('<p></p>'); $('body').append(j); var d=document.createElement('p'); document.body.appendChild(d); jQuery DOM body h1 p p img id="photo" id="p1" p DOM & jQuery var j=$('#photo'); j=« liste » d'un seul élément jQuery var d=document.getElementById('photo'); d = un élément DOM $(d) jQuery DOM DOM jQuery $('#photo')[0] DOM DOM jQuery jQuery Node / HTMLElement HTMLElement Node CharacterData Document Element Comment HTMLHeadElement HTMLBodyElement HTMLParagraphElement Text ... Simplifié Text <body> <h1>Ceci est un titre</h1> <p> Un paragraphe de texte avec un <a href="page2.html">lien</a> vers une autre page. Les mots suivants <strong>sont importants</strong> </p> </body> body h1 p strong a Text Ceci est un titre Text Un para... avec un Text lien Text vers une... suivants Text sont importants Node & HTMLElement element.className element.innerHTML element.textContent element.nodeName element.nodeType element.style element.parentNode element.children element.childNodes element.insertBefore() element.removeChild() element.getElementsByClassName() element.getElementsByTagName() element.querySelector() element.querySelectorAll() element.addEventListener() Chercher éléments Arbre DOM « Propriétés » element.className j.attr('class') d.className jQuery DOM <p class="intro important">Un paragraphe</p> "intro important" j.hasClass("intro") j.addClass("xyz") j.removeClass("intro") d.className="conclusion secondaire" node.parentNode var j=$('#photo').parent(); var d=document.getElementById('photo').parentNode; jQuery DOM body h1 p p img id="photo" id="p1" node.children var liste=$('body').children(); liste.each(function() { // ... this ... }); var liste=document.body.children; for(var i=0;i<liste.length;i++) { // ... liste[i] ... } jQuery DOM body h1 p p children / childNodes Text element.addEventListener() $('#photo').click(function(){ ... }); var d=document.getElementById('photo'); d.addEventListener('click',function(){ ... }); jQuery DOM body h1 p p img id="photo" id="p1" click Ce document est distribué librement. Sous licence GNU FDL : http://www.gnu.org/copyleft/fdl.html Les originaux sont disponibles au format LibreOffice http://www-info.iutv.univ-paris13.fr/~bosc uploads/Management/ js-cm-3-mp-pdf.pdf