internet jquery olivier pons / 2013 - 2014. objectif 1. présentation jquery rappel web / json /...
TRANSCRIPT
![Page 1: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/1.jpg)
Internet
jQuery
Olivier Pons / 2013 - 2014
![Page 2: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/2.jpg)
ObjectifObjectif
1. Présentation jQuery
Rappel Web / Json / AjaxObjectifObjectif
SommaireSommaire
2 / 33
2. jQuery3. jQuery / Json – Ajax
Internet : jQuery
![Page 3: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/3.jpg)
Internet : jQuery
1. jQuery –1. jQuery – Présentation Présentation<!DOCTYPE html><html lang="fr"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" media="screen" href="style.css"> <script src="jquery-1.x.x.min.js"></script> <script src="script.js"></script> </head> ...
3 / 33
²
![Page 4: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/4.jpg)
1. jQuery –1. jQuery – Présentation Présentation
1) AJAX2) DOM - Effets - Manipulation - Parcours3) Gestion des événements
4 / 33
Internet : jQuery
![Page 5: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/5.jpg)
1. jQuery –1. jQuery – Présentation Présentation
Showcases jQuery
http://usejquery.com/siteshttp://www.exitzeroproject.org/http://like-there-is-no-tomorrow.com/
5 / 33
Internet : jQuery
![Page 6: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/6.jpg)
1. jQuery –1. jQuery – Présentation Présentation
Pour les développeurs :responsive design
http://twitter.github.com/bootstrap/
6 / 33
Internet : jQuery
![Page 7: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/7.jpg)
2. jQuery –2. jQuery – DOM – Sélecteurs DOM – Sélecteurs
7 / 33
Sélectionner......tous les éléments :$('*')
$('*').css('border','3px solid red')
...les éléments d'une classe :
.$('.maclasse')$('.maclasse').css('border','3px solid red')
...l'élément par son id :
.$('#elementid')$('#idimg').css('border','3px solid red')
Internet : jQuery
![Page 8: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/8.jpg)
2. jQuery –2. jQuery – DOM – Sélecteurs DOM – Sélecteurs
8 / 33
Sélectionner......en filtrant sur un attribut qui commence par valeur :$('a[href|="valeur"]')
$('a[href|="valeur"]').css(...);
...en filtrant sur un attribut qui contient une valeur :
.$('a[name*="en"]')$('a[name*=en]').css(...)
...et ainsi de suite avec commence par, ne contient pas, etc.
http://api.jquery.com/category/selectors/
Internet : jQuery
![Page 9: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/9.jpg)
2. jQuery –2. jQuery – DOM – Effets DOM – Effets
9 / 33
Que du visuelRedimensionnement :
.animate()Opacité :
.fadeIn() / .fadeOut()Déplacement :
.slideUp() / .slideDown()
Internet : jQuery
![Page 10: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/10.jpg)
2. jQuery –2. jQuery – DOM – Effets DOM – Effets
10 / 33
HTML :<div id="clickme"> Click here</div><img id="livre" src="livre.png" alt="Mon Livre" width="100" height="123" />
JavaScript / jQuery :$('#clickme').click(function() { $('#livre').slideDown('slow', function() { // Animation terminée. });});
Internet : jQuery
![Page 11: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/11.jpg)
2. jQuery –2. jQuery – DOM – Effets DOM – Effets
11 / 33
HTML :<div id="patientez"> Patientez quelques instants...</div><div id="message"> Téléchargement terminé !</div>
JavaScript / jQuery :$('#patientez').fadeOut('slow', function() { $('#message').fadeIn('slow');});
Internet : jQuery
![Page 12: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/12.jpg)
2. jQuery –2. jQuery – DOM – Manipulation DOM – Manipulation
12 / 33
Ce sont toutes les méthodes qui changent un des attributs d'un élément, ou les propriétés de style.Les plus courants :
.css() .html() .empty() .attr()
Internet : jQuery
![Page 13: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/13.jpg)
2. jQuery –2. jQuery – DOM – Manipulation DOM – Manipulation
13 / 33
Exemples :
$("p").css("color","red");
$("div").html("<b>Super !</b>");
$('.hello').empty();
$('#monimage').attr( 'alt', 'Saut en parachute');
Internet : jQuery
![Page 14: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/14.jpg)
2. jQuery –2. jQuery – DOM – Evénements DOM – Evénements
14 / 33
Ces fonctions sont utilisées pour agir en fonction d'événements déclenchés lorsque l'utilisateur interagit avec le navigateur.
Internet : jQuery
![Page 15: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/15.jpg)
2. jQuery –2. jQuery – DOM – Evénements DOM – Evénements
15 / 33
En général, deux possibilités :
Déclencher à la main l'événement :.evt()
$('#target').blur();
Définir une fonction à appeler lorsque l'événement est déclenché :.evt(function() { code JavaScript});
Internet : jQuery
![Page 16: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/16.jpg)
2. jQuery –2. jQuery – DOM – Evénements DOM – Evénements
16 / 33
Les plus courants : .bind() .blur() .change() .click() .hover() .keydown() .keypress() .keyup() .off() .on() .one()
Internet : jQuery
![Page 17: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/17.jpg)
2. jQuery –2. jQuery – DOM – Evénements DOM – Evénements
17 / 33
Exemple .one() :
$("#foo").one("click", function() { alert("Affiché une seule fois");});
$("body").one("click", "#foo", function() { alert("Affiché que si #foo est le premier élément cliqué dans body.");});
Internet : jQuery
![Page 18: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/18.jpg)
2. jQuery –2. jQuery – DOM – Evénements DOM – Evénements
18 / 33
Exemple .off() / .on() :$("#bind").click(function () { $("body").on("click", "#monid", aClick) .find("#theone").text("Actif");});$("#unbind").click(function () { $("body").off("click", "#monid", aClick) .find("#theone").text("Inactif...");});function aClick() { $("div").show().fadeOut("slow");}
Internet : jQuery
![Page 19: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/19.jpg)
2. jQuery –2. jQuery – DOM – Evénements DOM – Evénements
19 / 33
Exemple empty() append() ... .click() :
$('#panier') .empty() .append( $('<div>').html('Cliquez ici...') ) .unbind('click') .click(function(event) { event.preventDefault(); montrePanier(); });
Internet : jQuery
![Page 20: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/20.jpg)
3. Json / Ajax –3. Json / Ajax – Json Json
JSON (JavaScript Object Notation) est un format de données textuel, générique, dérivé de la notation des objets du langage ECMAScript. Il permet de représenter de l’information structurée. Créé par Douglas Crockford, il est décrit par la RFC 4627 de l’IETF.
http://fr.wikipedia.org/wiki/JavaScript_Object_Notation
20 / 33
Internet : jQuery
![Page 21: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/21.jpg)
3. Json / Ajax –3. Json / Ajax – Json Json{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ { "value": "New", "onclick": "CreateNewDoc()" }, { "value": "Open", "onclick": "OpenDoc()" }, { "value": "Close", "onclick": "CloseDoc()" } ] } }}
21 / 33
Internet : jQuery
![Page 22: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/22.jpg)
3. Json / Ajax –3. Json / Ajax – Json – Encode - Php Json – Encode - Php
string json_encode ( mixed $value [, int $options = 0 ])
Retourne une chaîne contenant la représentation JSON de la valeur value.
22 / 33
Internet : jQuery
![Page 23: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/23.jpg)
3. Json / Ajax –3. Json / Ajax – Json – Encode - Php Json – Encode - Php
json_encode(array("Pêche", "Pomme", "Poire"));
=> ["Pêche","Pomme","Poire"]
json_encode(array(4 => "Mauvais", 18 => "Bon"));
=> {"4":"Mauvais","18":"Bon"}
json_encode(array("IUT" => true, "Fb" => null));
=> {"IUT":true,"Fb":null}
23 / 33
Internet : jQuery
![Page 24: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/24.jpg)
3. Json / Ajax –3. Json / Ajax – Json – Decode - Php Json – Decode - Php
$string = '{"vive": "Linux", "autre": "chaine"}';
$result = json_decode($string);var_dump($result);
object(stdClass)#1 (2) { ["vive"]=> string(5) "Linux" ["autre"]=> string(6) "chaine"}
echo $result->vive; // "Linux"echo $result->autre; // "chaine" 24 /
33
Internet : jQuery
![Page 25: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/25.jpg)
3. Json / Ajax –3. Json / Ajax – Json – JavaScript Json – JavaScript
JSON = JavaScript Object Notation=> C'est un sous ensemble de JavaScript=> En JavaScript, on peut écrire directement en JSONvar myJSONObject = {"a": [ {"b": "c", "d": "e", "r": "^http://.*"}, {"g": "h", "i": "j", "r": "^dee.*"}, {"k": "l", "m": "n", "r": "^rx.*"} ]};myJSONObject.a[1].r=> "^dee.*"
25 / 33
Internet : jQuery
![Page 26: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/26.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax
26 / 33
Internet : jQuery
![Page 27: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/27.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax
Ajax (acronyme d'Asynchronous JavaScript and XML) permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies ajoutées aux navigateurs web entre 1995 et 2005. Il combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches (abr. RIA)1,2...
http://fr.wikipedia.org/wiki/Ajax_(informatique) 27 / 33
Internet : jQuery
![Page 28: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/28.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax
Les échanges de données entre client et serveur peuvent utiliser divers formats, tels que JSON.
Les applications Ajax fonctionnent sur tous les navigateurs Web courants : Mozilla Firefox, Konqueror, Google Chrome, Safari, Opera, Chromium, Internet Explorer, etc.
http://fr.wikipedia.org/wiki/Ajax_(informatique)28 / 33
Internet : jQuery
![Page 29: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/29.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax
<!DOCTYPE html><html lang="fr"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" media="screen" href="style.css"> <script src="jquery-1.x.x.min.js"></script> <script src="script.js"></script> </head> ...ᄇ
http://fr.wikipedia.org/wiki/Ajax_(informatique)29 / 33
Internet : jQuery
![Page 30: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/30.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax… <body> <form method="post" action="add.php"> <fieldset> <legend>Choisissez deux nombres entiers</legend> <p><label>a = <input name="a" type="number" required></label></p> <p><label>b = <input name="b" type="number" required></label></p> </fieldset> <fieldset> <legend>Résultat</legend> <p id="result"></p> </fieldset> <p><button>Soumettre</button></p> </form> </body></html>
30 / 33
Internet : jQuery
![Page 31: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/31.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax
$(document).ready(OnReady);function OnReady(){ $("form").submit(OnSubmit);}function OnSubmit(data){ $.ajax({ type: $(this).attr("method"), url: $(this).attr("action"), data: $(this).serialize(), success: OnSuccess }); return false;}function OnSuccess(result){ $("#result").html(result);} 31 /
33
Internet : jQuery
![Page 32: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/32.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax
ServeurWeb
208.73.210.29Client
Requête
Réponse
http://monsiteweb.fr/post.php
32 / 33
Internet : jQuery
![Page 33: Internet jQuery Olivier Pons / 2013 - 2014. Objectif 1. Présentation jQuery Rappel Web / Json / Ajax Objectif Sommaire 2 / 33 2. jQuery 3. jQuery / Json](https://reader036.vdocuments.mx/reader036/viewer/2022062404/551d9d7d497959293b8b5757/html5/thumbnails/33.jpg)
3. Json / Ajax –3. Json / Ajax – Ajax Ajax
<?php
/* Envoi au client le résultat du calcul de a + b */ print(intval($_POST["a"]) + intval($_POST["b"]));
?>
33 / 33
Internet : jQuery