Table des matières. JavaScript. Exemple : Google. Ajax. client navigateur AJAX JSON DOM. 1ère partie. page non rechargée!

Dimension: px

Commencer à balayer dès la page:

Download "Table des matières. JavaScript. Exemple : Google. Ajax. client navigateur AJAX JSON DOM. 1ère partie. page non rechargée!"

Danièle Tassé
il y a 8 ans
Total affichages :

Université Paris- ère partie Exemple : Google page non rechargée!

1 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...»

2 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(" id: 5, appelée à la réception de la réponse du serveur // afficher com.

3 Chronologie / serveur Exemple : suggestion affichage page <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'] JS 5 9 $('#recherche').keyup(function(e) $.get(' 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(' 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').

4 JS Suggestion : chronologie JS attente keyup! A serveur attente réponse reçue! serveur $('#recherche').keyup(function(e) A $.get(' mot: $('#recherche').val(), B $('#suggestions').html(reponse); $('#suggestions').show(); Méthode GET B 5 Suggestion : PHP $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" "Écrire des infos sur le serveur" 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

5 Exemple :.post() ème partie JS 5 9 $('.jaime').click(function(e) $.post(' 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

6 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(' 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

v.,... v. % Propriétés Node Mozilla Firefox % Cookies Env.

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

caniuse.com Compatibilité Principaux objets window document Un titre un paragraphe HTMLElement MDN : developer.mozilla.org Window & Document document.getelementbyid() window window.document window.

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

9 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é

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

11 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 : Les originaux sont disponibles au format LibreOffice

Documents pareils

Programmation Web. Madalina Croitoru IUT Montpellier

Programmation Web. Madalina Croitoru IUT Montpellier Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance