JavaScript Table des matières Ajax Exemple : Google

Transcription

Table des matières
JavaScript
M4103C - Programmation Web – client riche
●
AJAX
●
JSON
●
DOM
2ème année - S4, cours - 3/5
2014-2015
Marcel Bosc
Département informatique
IUT de Villetaneuse
Université Paris-13
Exemple : Google
1ère partie
page non rechargée !
Ajax
suggestions
suggestions
internet
client
navigateur
google.fr
« javas »
serveur web
« javascript »
« javascript array»
« javascript subs...»
BDD
Exemple : commentaires
Exemple : commentaires
affichage
affichage // tri
tri commentaires
commentaires
j'aime
j'aime
internet
client
navigateur
j'aime com. n°1234
youtube.com
serveur web
ok.
BDD
Ajax
internet
client
navigateur
com. triés
youtube.com
serveur web
<div>...</div>
BDD
Exemple jQuery .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: 5678 },
appelée
appelée àà la
la réception
réception
function(reponse)
de
de la
la réponse
réponse du
du serveur
serveur
{
// afficher com.
});
Chronologie client / serveur
google.fr
client
navigateur
4 affichage page
5 « javas » tapé
9 mise à jour
affichage
sans recharger
Exemple : suggestion
serveur web
1 https://google.fr
3 <html>...</html>
6 « javas »
générer page web 2
chercher « javas » 7
8 liste suggestions
BDD
<div>
<input id="recherche" type="text" />
<button>chercher</button>
</div>
<ul id="suggestions">
<li></li>
</ul>
div
ul
id="suggestions"
input
internet
button
li
li
li
id="recherche"
Suggestion : JS
Suggestion : GET
$_GET['mot']
http://exemple.org/suggestion.php?mot=a
JS
JS
0 $('#recherche').keyup(function(e)
1 {
1 {
$.get('http://exemple.org/suggestion.php',
2
2
serveur
{mot: $('#recherche').val()},
3
3
<li>abricot</li> 4
function(reponse)
function(reponse)
4
<li>arbre </li> 5
{
{
5
<li>amis
</li>
$('#suggestions').html(reponse);
6
6
$('#suggestions').show();
7
7
});
});
8
8
9 });
9 });
Suggestion : chronologie JS
0
9
A
attente
keyup !
2
3
8
B
attente
serveur
JS
Suggestion : PHP
réponse
reçue !
6
7
serveur
A
1 {
2
3
function(reponse)
4
{ B
5
6
7
});
8
9 });
http://exemple.org/suggestion.php?mot=a
0
1
2
3
4
5
6
7
8
$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 GET
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"
http://exemple.org/recherche.php?mot=jeudi
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()
2ème partie
JSON
JS
0 $('.jaime').click(function(e)
1 {
$.post('http://exemple.org/jaime.php',
2
{nbCom: $(this).parent().attr('id')},
3
function(reponse)
4
{
5
...
6
});
7
8 });
9
HTML / Données
JSON
JavaScript Object Notation
exemple.org
client
navigateur
texte
serveur web
Format de fichier texte, utilisant la syntaxe
JavaScript pour représenter des données
(objets, tableaux ...)
<li>Jean </li>
<li>Akima </li>
<li>Driss </li>
exemple.org
client
navigateur
texte
serveur web
{
nom: "Saidi",
prenom: "Driss",
id: 1234,
age: 25
}
JSON
très utilisé !
beaucoup de langages
PHP
JSON : exemples
Objet simple
PHP: json_encode()
Objet complexe
{
nom: "Saidi",
prenom: "Driss",
id: 1234,
age: 25
PHP
{
$user=[
nom: "Collège Grange du Bois"
ville:
{
nom: "Savigny-le-Temple",
"nom-court": "Savigny",
code : 77176
},
adresse: "2 av. Victor..."
}
'nom'
=>'Saidi',
'prenom'=>'Driss',
'id'
=>1234,
];
$user['age']=25;
header('Content-Type: application/json');
echo json_encode($user);
}
Tableau simple
JSON
Tableau d'objets
{
[
[
"Fraise",
"Chocolat",
"vanille"
]
nom: "Saidi",
prenom: "Driss",
id: 1234,
age: 25
{ nom: "Wang",
id : 4321
},
{ nom: "Amara",
id : 5612
}
}
]
JS : réponse JSON
Application vs page + JS
exemple.org
user.php 2
$id=$_GET['id'];
$u=db('SELECT * FROM
user WHERE id=?',$id);
echo json_encode($u);
1
P
P
P
P
A
Navigateur
A
Serveur
JSON
client
{
JS
$.get('http://exemple.org/user.php',
{id: 1234},
function(reponse)
{ 4
console.log(reponse.nom);
console.log(reponse.age);
});
});
Pages web + JS
3
}
Application JS
nom: "Saidi",
prenom: "Driss",
P
id: 1234,
age: 25
A A
Navigateur
A A A
A
A A
A
A A
A
Serveur
Application JS
3ème partie
DOM
Frameworks
jQuery vs DOM
jQuery
DOM
Simplicité
Performance chargement
Comptabilité navigateurs
Performance exécution
Propriétés
Text Node
Cookies
Env. particuliers
Navigateurs
Chrome
48%
Internet Explorer
18%
v.6, ... v.11
Mozilla Firefox
17%
safari
5%
Mobile
Statistiques: 12/2014
35%
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
window
window.document
window.location
window.alert()
window.console()
...
document.getElementById()
DOM
d = un élément DOM
document
var d=document.getElementById('photo');
html
head
jQuery
j=« liste » d'un seul élément jQuery
body
var j=$('#photo');
document
document.body
document.getElementById()
document.createElement()
document.cookie
...
title
h1
p
p
<body>
<h1>Ceci est un titre</h1>
<p id="p1">Un paragraphe</p>
<p>2e paragraphe
<img id="photo" src="ex.png"...
</p>
</body>
body
h1
p
p
id="p1"
img
id="photo"
document.createElement()
node.appendChild()
DOM
var d=document.createElement('p');
pas encore dans arbre DOM !
jQuery
var j=$('<p></p>');
pas encore dans arbre DOM !
DOM
var d=document.createElement('p');
document.body.appendChild(d);
jQuery
var j=$('<p></p>');
$('body').append(j);
body
body
p
h1
p
p
h1
id="p1"
p
p
p
id="p1"
img
img
id="photo"
id="photo"
DOM & jQuery
Node / HTMLElement
j=« liste » d'un seul élément jQuery
Document
var j=$('#photo');
d = un élément DOM
Node
CharacterData
jQuery
DOM
jQuery
Comment
HTMLHeadElement
HTMLBodyElement
Element
DOM
Text
DOM
jQuery
$(d)
$('#photo')[0]
jQuery
DOM
HTMLElement
HTMLParagraphElement
...
Simplifié
Node & HTMLElement
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>
« Propriétés »
Arbre DOM
element.className
element.parentNode
element.innerHTML
element.children
element.textContent
element.childNodes
element.nodeName
element.insertBefore()
element.nodeType
element.removeChild()
element.style
body
element.addEventListener()
h1
Chercher éléments
element.getElementsByClassName()
p
Text
Text
Ceci est un titre
Un para... avec un
a
Text
vers une... suivants
Text
lien
strong
element.querySelector()
Text
sont importants
element.className
d.className
element.getElementsByTagName()
"intro important"
node.parentNode
j.hasClass("intro")
DOM
DOM
var d=document.getElementById('photo').parentNode;
d.className="conclusion secondaire"
j.attr('class')
element.querySelectorAll()
jQuery
jQuery
var j=$('#photo').parent();
j.addClass("xyz")
j.removeClass("intro")
<p class="intro important">Un paragraphe</p>
body
h1
p
p
id="p1"
img
id="photo"
node.children
element.addEventListener()
DOM
var liste=document.body.children;
for(var i=0;i<liste.length;i++)
{
// ... liste[i] ...
}
d.addEventListener('click',function(){ ... });
jQuery
var liste=$('body').children();
liste.each(function()
{
// ... this ...
});
body
h1
p
p
id="p1"
h1
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
jQuery
$('#photo').click(function(){ ... });
body
children / childNodes
Text
DOM
p
p
img
id="photo"
click

JavaScript Table des matières Ajax Exemple : Google

Transcription

Documents pareils

Fiche de présentation AGIR à dom. Assistance

Kiss FM Live - Vallauris Golfe-Juan

Tutoriel Javascript - DOM - Simplon Boulogne sur Mer

Demande de stage

Recherche de candidat en alternance Développeur

Savoir gérer son site web et l`enrichir

Javascript

la berline evenement

Offre de stage en marketing pour une entreprise de service à domicile

offre d`emploi planet form