JavaScript Table des matières MC - Programmation Web riche AJAX ème année - S, cours - /5-5 Marcel Bosc Département informatique IUT de Villetaneuse Université Paris- ère partie Exemple : Google page non rechargée! Ajax suggestions internet google.fr «javas» «javascript» «javascript array» BDD «javascript subs...»
Exemple : commentaires page non rechargée! Exemple : commentaires page non rechargée! affichage / tri commentaires j'aime internet j'aime com. n youtube.com internet com. triés youtube.com ok. BDD <div>...</div> BDD Ajax Exemple.get() Asynchronous JavaScript and XML JavaScript Asynchrone Requête non bloquante à partir du JavaScript, au serveur, sans recharger la page. $.get("http://exemple.org/commentaire", id: 5, appelée à la réception de la réponse du serveur // afficher com.
Chronologie / serveur Exemple : suggestion affichage page https://google.fr <html>...</html> google.fr générer page web 5 «javas» tapé 9 mise à jour affichage sans recharger «javas» liste suggestions chercher «javas» BDD <div> <input id="recherche" type="text" /> <button>chercher</button> </div> <ul id="suggestions"> <li></li> </ul> div ul id="suggestions" internet input id="recherche" button li li li Suggestion : JS Suggestion : GET $_GET['mot'] http://exemple.org/suggestion.php?mot=a JS 5 9 $('#recherche').keyup(function(e) $.get('http://exemple.org/suggestion.php', mot: $('#recherche').val(), $('#suggestions').html(reponse); $('#suggestions').show(); JS serveur <li>abricot</li> <li>arbre </li> 5 <li>amis </li> 9 $('#recherche').keyup(function(e) $.get('http://exemple.org/suggestion.php', mot: $('#recherche').val(), $('#suggestions').html(reponse); $('#suggestions').show();
JS 5 9 9 Suggestion : chronologie JS attente keyup! A serveur attente réponse reçue! serveur $('#recherche').keyup(function(e) A $.get('http://exemple.org/suggestion.php', mot: $('#recherche').val(), B $('#suggestions').html(reponse); $('#suggestions').show(); Méthode GET B 5 Suggestion : PHP http://exemple.org/suggestion.php?mot=a $mot=$_get['mot']; $sql="select mot FROM mots WHERE mot LIKE '?%'"; $suggestions=database_list($sql,$mot); $resultat=''; BDD foreach($suggestions as $suggestion) $resultat.='<li>'.htmlentities($suggestion).'</li>'; echo $resultat; <li>abricot</li> <li>arbre </li> <li>amis </li> Méthode POST GET: peut-être répétée sans conséquences (ne modifie pas l'état sur le serveur) POST: répétition potentiellement gênante ( change l'état du serveur ) "Lire infos sur le serveur" http://exemple.org/recherche.php?mot=jeudi "Écrire des infos sur le serveur" http://exemple.org/payer.php Entêtes http Exemples: modifier l'affichage faire une recherche Contre-exemples: payer en ligne ajouter un commentaire sur un forum Contre-exemples: modifier l'affichage faire une recherche Exemples: payer en ligne ajouter un commentaire sur un forum
Exemple :.post() ème partie JS 5 9 $('.jaime').click(function(e) $.post('http://exemple.org/jaime.php', nbcom: $(this).parent().attr('id'),... HTML / Données texte <li>jean </li> <li>akima </li> <li>driss </li> exemple.org JavaScript Object Notation Format de fichier texte, utilisant la syntaxe JavaScript pour représenter des données (objets, tableaux...) texte nom: "Saidi", prenom: "Driss", id:, age: 5 exemple.org très utilisé! beaucoup de langages PHP
Objet simple nom: "Saidi", prenom: "Driss", id:, age: 5 Tableau simple [ ] JS "Fraise", "Chocolat", "vanille" : exemples Objet complexe nom: "Collège Grange du Bois" ville: nom: "Savigny-le-Temple", "nom-court": "Savigny", code :, adresse: " av. Victor..." Tableau d'objets [ nom: "Wang", id :, nom: "Amara", id : 5 ] JS : réponse user.php $.get('http://exemple.org/user.php', id:, console.log(reponse.nom); console.log(reponse.age); exemple.org $id=$_get['id']; $u=db('select * FROM user WHERE id=?',$id); echo json_encode($u); nom: "Saidi", prenom: "Driss", id:, age: 5 PHP PHP: json_encode() $user=[ 'nom' =>'Saidi', 'prenom'=>'driss', 'id' =>, ]; $user['age']=5; header('content-type: application/json'); echo json_encode($user); nom: "Saidi", prenom: "Driss", id:, age: 5 Pages web + JS P Application JS P Application vs page + JS A P P P A A A A A A A A A A A A A Navigateur Serveur Navigateur Serveur
Application JS ème partie Frameworks vs Navigateurs Chrome % Simplicité Comptabilité s Performance chargement Performance exécution Internet Explorer v.,... v. % Propriétés Node Mozilla Firefox % Cookies Env. particuliers safari 5% Mobile 5% Statistiques: / http://en.wikipedia.org/wiki/usage_share_of_web_browsers
caniuse.com Compatibilité Principaux objets window document Un titre un paragraphe HTMLElement MDN : developer.mozilla.org Window & Document document.getelementbyid() window window.document window.location window.alert() window.console()... document html head d = un élément var d=document.getelementbyid('photo'); j=«liste» d'un seul élément var j=$('#photo'); document document. document.getelementbyid() document.createelement() document.cookie... title h p p <> <h>ceci est un titre</h> <p id="p">un paragraphe</p> <p>e paragraphe <img id="photo" src="ex.png"... </p> </> h p id="p" p img id="photo"
document.createelement() node.appendchild() var d=document.createelement('p'); pas encore dans arbre! var d=document.createelement('p'); document..appendchild(d); var j=$('<p></p>'); pas encore dans arbre! var j=$('<p></p>'); $('').append(j); h p id="p" p img id="photo" & p h p p p id="p" img id="photo" Node / HTMLElement j=«liste» d'un seul élément var j=$('#photo'); Document d = un élément var d=document.getelementbyid('photo'); Node CharacterData Element Comment HTMLElement HTMLHeadElement HTMLBodyElement HTMLParagraphElement $(d) $('#photo')[]... Simplifié
<> <h>ceci est un titre</h> <p> Un paragraphe de texte avec un <a href="page.html">lien</a> vers une autre page. Les mots suivants <strong>sont importants</strong> </p> </> h p Ceci est un titre Un para... avec un a lien vers une... suivants element.classname strong sont importants Node & HTMLElement «Propriétés» Arbre element.classname element.parentnode element.innerhtml element.children element.textcontent element.childnodes element.nodename element.insertbefore() element.nodetype element.removechild() element.style element.addeventlistener() Chercher éléments element.getelementsbyclassname() element.getelementsbytagname() element.queryselector() element.queryselectorall() node.parentnode d.classname "intro important" d.classname="conclusion secondaire" var d=document.getelementbyid('photo').parentnode; j.attr('class') j.hasclass("intro") var j=$('#photo').parent(); j.addclass("xyz") j.removeclass("intro") <p class="intro important">un paragraphe</p> h p id="p" p img id="photo"
node.children element.addeventlistener() var liste=document..children; for(var i=;i<liste.length;i++) //... liste[i]... var d=document.getelementbyid('photo'); d.addeventlistener('click',function()... var liste=$('').children(); liste.each(function() //... this... $('#photo').click(function()... children / childnodes h p p h p id="p" p img id="photo" 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-paris.fr/~bosc