Js CM 3 MP PDF

Table des matières
JavaScript
M4103C - Programmation Web – client riche
● AJAX
2ème année - S4, cours - 3/5
2014-2015 ● JSON
● DOM
Marcel Bosc
Département informatique IUT de Villetaneuse Université Paris-13
1ère partie
Exemple : Google
page non rechargée !
Ajax suggestions
suggestions
internet
client google.fr
« javas »
navigateur
serveur web
« javascript »
« javascript array»
BDD
« javascript subs...»
Exemple : commentaires Exemple : commentaires
page non rechargée ! page non rechargée !
affichage
affichage // tri
tri commentaires
commentaires
j'aime
j'aime
internet internet
client youtube.com client youtube.com
j'aime com. n°1234 com. triés
navigateur navigateur
serveur web serveur web
ok. BDD <div>...</div> BDD
Ajax Exemple jQuery .get()

Asynchronous JavaScript and XML
$.get("http://exemple.org/commentaire",
{ id: 5678 }, appelée
appelée àà la
la réception
réception
function(reponse) de
de la
la réponse
réponse dudu serveur
serveur
{
JavaScript Asynchrone // afficher com.
Requête non bloquante à partir du JavaScript, });
au serveur, sans recharger la page.
Chronologie client / serveur Exemple : suggestion
client google.fr
navigateur serveur web
1 https://google.fr
3 <html>...</html> générer page web 2
4 affichage page
<div>
6 « javas » <input id="recherche" type="text" />
5 « javas » tapé chercher « javas » 7 <button>chercher</button>
8 liste suggestions </div>
9 mise à jour <ul id="suggestions">
affichage BDD <li></li>
sans recharger </ul>
div ul
id="suggestions"
input button li li li
internet
id="recherche"
Suggestion : JS Suggestion : GET
$_GET['mot']
http://exemple.org/suggestion.php?mot=a
JS JS
0 $('#recherche').keyup(function(e) 0 $('#recherche').keyup(function(e)
1 { 1 {
2 $.get('http://exemple.org/suggestion.php', 2 $.get('http://exemple.org/suggestion.php',
serveur
3 {mot: $('#recherche').val()}, 3 {mot: $('#recherche').val()},
4 function(reponse) <li>abricot</li> 4 function(reponse)
5 { <li>arbre </li> 5 {
6 $('#suggestions').html(reponse); <li>amis </li> 6 $('#suggestions').html(reponse);
7 $('#suggestions').show(); 7 $('#suggestions').show();
8 }); 8 });
9 }); 9 });
Suggestion : chronologie JS Suggestion : PHP
http://exemple.org/suggestion.php?mot=a
A B
attente attente
0 2 réponse 6
keyup ! 3 0 $mot=$_GET['mot'];
9 reçue ! 7 1 $sql="SELECT mot FROM mots WHERE mot LIKE '?%'";
8 $suggestions=database_list($sql,$mot);
2
3 $resultat=''; BDD
serveur serveur 4 foreach($suggestions as $suggestion)
JS 5 {
6 $resultat.='<li>'.htmlentities($suggestion).'</li>';
0 $('#recherche').keyup(function(e) }
A 7
1 { echo $resultat;
$.get('http://exemple.org/suggestion.php', 8
2
3 {mot: $('#recherche').val()},
4 function(reponse)
5 { B <li>abricot</li>
6 $('#suggestions').html(reponse); <li>arbre </li>
7 $('#suggestions').show(); <li>amis </li>
8 });
9 });
Méthode GET Méthode POST
GET: peut-être répétée sans conséquences POST: répétition potentiellement gênante

(ne modifie pas l'état sur le serveur) ( change l'état du serveur )
"Lire infos sur le serveur" "Écrire des infos sur le serveur"
http://exemple.org/recherche.php?mot=jeudi http://exemple.org/payer.php
Entêtes http
Exemples: Contre-exemples: Contre-exemples: Exemples:
modifier l'affichage payer en ligne modifier l'affichage payer en ligne
faire une recherche ajouter un commentaire faire une recherche ajouter un commentaire
sur un forum sur un forum
Exemple : .post() 2ème partie
JSON
JS
0 $('.jaime').click(function(e)
1 {
2 $.post('http://exemple.org/jaime.php',
3 {nbCom: $(this).parent().attr('id')},
4 function(reponse)
5 {
6 ...
7 });
8 });
9
HTML / Données JSON

JavaScript Object Notation
client exemple.org
navigateur
serveur web JSON
texte
Format de fichier texte, utilisant la syntaxe
<li>Jean </li> JavaScript pour représenter des données
<li>Akima </li> (objets, tableaux ...)
<li>Driss </li>
client exemple.org
très utilisé !
navigateur
serveur web
texte beaucoup de langages PHP
{
nom: "Saidi",
prenom: "Driss",
id: 1234,
age: 25
}
JSON : exemples PHP: json_encode()
Objet simple Objet complexe PHP
{ { $user=[
nom: "Saidi", nom: "Collège Grange du Bois" 'nom' =>'Saidi',
prenom: "Driss", ville: 'prenom'=>'Driss',
id: 1234, { 'id' =>1234,
age: 25 nom: "Savigny-le-Temple", ];
} "nom-court": "Savigny", $user['age']=25;
code : 77176 header('Content-Type: application/json');
}, echo json_encode($user);
adresse: "2 av. Victor..."
}
Tableau simple Tableau d'objets JSON
[ {
[ nom: "Saidi",
{ nom: "Wang",
"Fraise", prenom: "Driss",
id : 4321 },
"Chocolat", id: 1234,
{ nom: "Amara",
"vanille" age: 25
id : 5612 }
] }
]
JS : réponse JSON Application vs page + JS

exemple.org Pages web + JS
user.php 2 Navigateur
P P P P
$id=$_GET['id'];
$u=db('SELECT * FROM A A
user WHERE id=?',$id);
1 echo json_encode($u);
Serveur
client JSON
JS {
nom: "Saidi", Application JS
$.get('http://exemple.org/user.php', 3 prenom: "Driss",
P Navigateur
{id: 1234}, id: 1234,
function(reponse) age: 25
{ 4 } A A A A A A A A A A A A
console.log(reponse.nom);
console.log(reponse.age); Serveur
});
});
Application JS 3ème partie
DOM
Frameworks
jQuery vs DOM Navigateurs
Chrome 48%
jQuery DOM
Simplicité Performance chargement Internet Explorer 18%
Comptabilité navigateurs Performance exécution v.6, ... v.11
Propriétés Mozilla Firefox 17%
Text Node
Cookies
safari 5%
Env. particuliers
Mobile 35%
Statistiques: 12/2014 http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

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

window document d = un élément DOM DOM
window.document var d=document.getElementById('photo');
window.location
html
window.alert()
window.console()
... j=« liste » d'un seul élément jQuery jQuery
head body
var j=$('#photo');
title h1 p p
document <body> body
document.body <h1>Ceci est un titre</h1>
document.getElementById() <p id="p1">Un paragraphe</p>
document.createElement() <p>2e paragraphe
h1 p p
document.cookie <img id="photo" src="ex.png"...
id="p1"
... </p>
</body> img
id="photo"
document.createElement() node.appendChild()
DOM
DOM
var d=document.createElement('p');
var d=document.createElement('p');
pas encore dans arbre DOM ! document.body.appendChild(d);
jQuery jQuery
var j=$('<p></p>'); var j=$('<p></p>');
$('body').append(j);
pas encore dans arbre DOM !
body body
p
h1 p p h1 p p p
id="p1" id="p1"
img img
id="photo" id="photo"
DOM & jQuery Node / HTMLElement

j=« liste » d'un seul élément jQuery
var j=$('#photo'); Document
Text
d = un élément DOM Node CharacterData HTMLHeadElement
Comment
var d=document.getElementById('photo');
HTMLBodyElement
Element HTMLElement
DOM jQuery jQuery DOM HTMLParagraphElement
DOM jQuery ...
$(d) $('#photo')[0]
jQuery DOM Simplifié

Text Node & HTMLElement
<body> « Propriétés » Arbre DOM
<h1>Ceci est un titre</h1> element.className element.parentNode
<p>
element.innerHTML element.children
Un paragraphe de texte avec un
<a href="page2.html">lien</a> vers une autre element.textContent element.childNodes
page. Les mots suivants element.nodeName element.insertBefore()
<strong>sont importants</strong>
element.nodeType element.removeChild()
</p>
</body> element.style
body element.addEventListener()
Chercher éléments
h1 p
element.getElementsByClassName()
Text Text a Text strong element.getElementsByTagName()
Ceci est un titre Un para... avec un vers une... suivants element.querySelector()
Text Text element.querySelectorAll()
lien sont importants
element.className node.parentNode
DOM
DOM
d.className "intro important"
var d=document.getElementById('photo').parentNode;
d.className="conclusion secondaire"
jQuery
j.attr('class')
jQuery
j.hasClass("intro") var j=$('#photo').parent();
j.addClass("xyz")
j.removeClass("intro") body
<p class="intro important">Un paragraphe</p> h1 p p

id="p1"
img
id="photo"
node.children element.addEventListener()
DOM DOM
var liste=document.body.children;
for(var i=0;i<liste.length;i++)
var d=document.getElementById('photo');
{
d.addEventListener('click',function(){ ... });
// ... liste[i] ...
}
jQuery jQuery
var liste=$('body').children(); $('#photo').click(function(){ ... });
liste.each(function()
{
// ... this ...
}); body
body h1 p p
children / childNodes click
id="p1"
img
Text h1 p p
id="photo"
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

Js CM 3 MP PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Js CM 3 MP PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Table des matières

Département informatique IUT de Villetaneuse Université Paris-13

ok. BDD <div>...</div> BDD

Ajax Exemple jQuery .get()

Suggestion : JS Suggestion : GET

Méthode GET Méthode POST

GET: peut-être répétée sans conséquences POST: répétition potentiellement gênante

"Lire infos sur le serveur" "Écrire des infos sur le serveur"

HTML / Données JSON

JS : réponse JSON Application vs page + JS

jQuery vs DOM Navigateurs

Statistiques: 12/2014 http://en.wikipedia.org/wiki/Usage_share_of_web_browsers

Window & Document document.getElementById()

DOM & jQuery Node / HTMLElement

DOM jQuery ...

jQuery DOM Simplifié

<p class="intro important">Un paragraphe</p> h1 p p

Ce document est distribué librement.

Das könnte Ihnen auch gefallen