INSA - ASI TechnoWeb : AJAX 1/40. Technologie Web AJAX. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimension: px
Commencer à balayer dès la page:

Download "INSA - ASI TechnoWeb : AJAX 1/40. Technologie Web AJAX. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,"

Transcription

1 INSA - ASI TechnoWeb : AJAX 1/40 Technologie Web AJAX Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18,

2 INSA - ASI TechnoWeb : AJAX 2/40 Plan 1 Introduction 2 Fonctionnement 3 Conclusion

3 INSA - ASI TechnoWeb : AJAX 3/40 Introduction (1/5) Description AJAX : Asynchronous Javascript And XML Nom donné à un ensemble de techniques pré-existantes. Défaut principal des applications web classiques : À chaque requête, toute la page est rechargée à chaque fois lenteur excès de consommation de bande-passante blocage lors de l attente des réponses manque de réactivité

4 INSA - ASI TechnoWeb : AJAX 4/40 Introduction (2/5) Principes d AJAX Utiliser le DOM 1 pour sélectionner la partie de la page que l on souhaite modifier Utiliser le Javascript pour faire les requêtes, accéder et modifier le bon noeud du DOM Le serveur traite la requête de l utilisateur (CGI, PHP, Servlet, contenu statique, etc.) pendant que l utilisateur continue d interagir avec la page On utilise un objet spécial, XMLHttpRequest, pour gérer l aspect asynchrone (utilisation de callbacks) applications web équivalentes aux applications de bureau : Gmail, Writely, Google SpreadSheet, Netvibes, etc. 1. Document Object Model

5 INSA - ASI TechnoWeb : AJAX 5/40 Introduction (3/5) Inconvénients d AJAX Le client doit avoir activé Javascript : nécessité de proposer deux interfaces Problèmes de compatibilité entre navigateurs Problèmes de maintenance des applications Perte de repères par rapport aux fonctionnalités classiques d un navigateur : boutons Back et Recharger, affichage de la source, sauvegarde d une page, etc.

6 INSA - ASI TechnoWeb : AJAX 6/40 Introduction (4/5) Premier exemple get.html (script) < script type ="text / javascript " src =" Scripts /wait.js"></ script > < script type ="text / javascript " > // <!-- function submitform () { var req = null ; document. forms. formulaire. saisie. value=" Démarrage... "; req = new XMLHttpRequest (); req. onreadystatechange = function () { if(req. readystate == 4){ if(req. status == 200) { wait (1000) ; document. forms. formulaire. saisie. value ="Reçu : " + req. responsetext ; else { document. forms. formulaire. saisie. value =" Erreur : code retourné " + req. status + " " + req. statustext ; ; req. open (" GET ", " Data / data. txt ", true ); req. send ( null ); // --> </ script >

7 INSA - ASI TechnoWeb : AJAX 7/40 Introduction (5/5) Premier exemple get.html (formulaire) <form id=" formulaire " method ="" action =""> <p><input type=" button " value=" Requête " onclick=" javascript : submitform ()"/></p> <p><input type ="text " id=" saisie " size ="32" value =""/></p> </ form > wait.js function wait ( delay ) { var date = new Date (); var curdate = null ; do { curdate = new Date (); while ( curdate - date<delay ); ; data.txt Texte du fichier TXT.

8 INSA - ASI TechnoWeb : AJAX 8/40 Fonctionnement (1/14) La classe XMLHttpRequest Les attributs de la classe XMLHttpRequest readystate : code d état ; 0 4 "prêt" status : code HTTP (200 : ok, 404 : page non trouvée, etc.) responsetext : données chargées dans une chaîne de caractères. responsexml : données chargées sous forme XML, les méthodes du DOM servent à les extraire. onreadystatechange : propriété activée par un événement de changement d état. On lui assigne une fonction. Les méthodes de la classe XMLHttpRequest open(mode, url, boolean) : effectuer une requête avec mode : type de requête, "GET" ou "POST" url : fichier avec son chemin sur le disque boolean : true (asynchrone) / false (synchrone) en option on peut ajouter un login et un mot de passe. send("chaine") : données à envoyer ; null pour un GET

9 INSA - ASI TechnoWeb : AJAX 9/40 Fonctionnement (2/14) Diagramme de séquence Source :

10 INSA - ASI TechnoWeb : AJAX 10/40 Fonctionnement (3/14) Construction d une requête Les 3 étapes de la construction d une requête 1 Création d une instance xhr = new XMLHttpRequest (); 2 Définition de la fonction de callback en attente de la réponse xhr. onreadystatechange = function (){ // instructions de traitement de la réponse if ( xhr. readystate == 4) { // Reçu, OK else { // Attendre... ; 3 Envoi de la requête xhr. open (" GET "/" POST ", " requête ", true ); xhr. send ( null / data );

11 INSA - ASI TechnoWeb : AJAX 11/40 Fonctionnement (4/14) Problèmes de compatibilité // Objet de la fenêtre courant if ( window. XMLHttpRequest ){ xhr = new XMLHttpRequest (); // Firefox, Safari,... else // Version ActiveX if ( window. ActiveXObject ) { xhr = new ActiveXObject ( Msxml2. XMLHTTP ); // Internet Explorer // xhr = new ActiveXObject (" Microsoft. XMLHTTP "); // anciennes versions

12 INSA - ASI TechnoWeb : AJAX 12/40 Fonctionnement (5/14) Lire dans un fichier XML Lecture dans un fichier texte Utilisation directe de xhr.responsetext Lecture dans un fichier XML Assigner le fichier XML à une variable : var doc = xhr.responsexml; Lire un élément grâce au DOM : doc.getelementsbytagname( root ).item(i); Lire le fils d un élément : element.firstchild.data; Rappel Informations sur le DOM sur le W3C :

13 INSA - ASI TechnoWeb : AJAX 13/40 Fonctionnement (6/14) Exemple getxml.html (script) < script type ="text / javascript " src =" Scripts /wait.js"></ script > < script type ="text / javascript "> // <!-- function submitform () { var req = new XMLHttpRequest (); document. forms. formulaire. saisie. value=" Démarrage... "; req. onreadystatechange = function () { if(req. readystate == 4){ if(req. status == 200) { var doc = req. responsexml ; var element = doc. getelementsbytagname ( racine ).item (0) ; wait (1000) ; document. forms. formulaire. saisie. value = element. firstchild.data ; else { document. forms. formulaire. saisie. value =" Erreur : code retourné " + req. status + " " + req. statustext ; ; req. open (" GET ", " Data / data. xml ", true ); req. send ( null ); // --> </ script >

14 INSA - ASI TechnoWeb : AJAX 14/40 Fonctionnement (7/14) Exemple getxml.html (formulaire) <form id=" formulaire " method ="" action =""> <p><input type=" button " value=" Requête " onclick=" submitform ()"/></p> <p><input type ="text " id=" saisie " size ="32" value =""/></p> </ form > data.xml <? xml version=" 1.0 " encoding="utf -8"?> < racine > Texte XML. </ racine >

15 INSA - ASI TechnoWeb : AJAX 15/40 Fonctionnement (8/14) Écrire dans une page Modification du document : Il est possible de référencer une zone de la page en cours... <div id=" zone "> texte à remplacer... </ div >... pour y afficher des informations document. getelementbyid (" zone "). innerhtml texte "; = " nouveau Remarque innerhtml est propriétaire innerhtml n est pas supporté par tous les navigateurs (Firefox<1.5 createtextnode/appendchild)

16 INSA - ASI TechnoWeb : AJAX 16/40 Fonctionnement (9/14) Exemple getdiv.html <body > <form name =" formulaire " method ="" action =""> <p><input type =" button " value =" Requête " onclick =" submitform ()"/></p> </ form > <div id="zone ">texte à remplacer... </div> </ body > <foot > < script type ="text / javascript " src =" Scripts /wait.js"></ script > < script type ="text / javascript ">// <!-- function submitform () { var req = new XMLHttpRequest (); req. onreadystatechange = function () { if(req. readystate == 4){ if(req. status == 200) { wait (1000) ; document. getelementbyid ("zone "). innerhtml = req. responsetext ; else { document. getelementbyid ("zone "). innerhtml = " Erreur : code retourné " + req. status + " " + req. statustext ; ; req. open (" GET ", " Data / data. txt ", true ); req. send ( null ); // --></ script > </ foot >

17 INSA - ASI TechnoWeb : AJAX 17/40 Fonctionnement (10/14) Envoi de données Envoi en GET : les arguments sont inclus dans la requête xhr = new XMLHttpRequest (); xhr. open (" GET ", "ajax - get. php? param1 = value1 & param2 = value2 ", true ); xhr. send ( null ); Envoi en POST : l argument de send est au format des paramètres de la méthode POST ; les données sont séparées par des & xhr = new XMLHttpRequest (); xhr. open (" POST ", "ajax -post - text. php ", true ); xhr. setrequestheader (" Content - Type ", " application /xwww -form - urlencoded "); var data = " argname1 =" + val1 + "& argname2 =" + val2...; xhr. send ( data );

18 INSA - ASI TechnoWeb : AJAX 18/40 Fonctionnement (11/14) Exemple saisie.html <body > <form id=" formulaire " method ="" action =""> <label > Prénom </ label ><input type ="text " id=" prenom " size ="10"/> <label >Nom </ label ><input type ="text " id="nom " size ="20"/><br/> <input type =" button " value =" Requête " onclick =" submitform ()"/> </ form > </ body > <foot > < script type ="text / javascript "> // <-- function submitform () { var xhr = new XMLHttpRequest (); xhr.open ("POST ", " Scripts / write.php ", true ); xhr. setrequestheader ("Content -Type ", " application /x-www -form - urlencoded "); var prenom = document. forms. formulaire. prenom. value ; var nom = document. forms. formulaire.nom. value ; var data = " prenom ="+ prenom +"&nom ="+ nom +"\n"; xhr. send ( data ); ; // --> </ script > </ foot >

19 INSA - ASI TechnoWeb : AJAX 19/40 Fonctionnement (12/14) Exemple write.php <? php $posted = & $_POST ; $prenom = $posted [" prenom "]; $nom = $posted [" nom "]; $file = fopen ("../ Data / noms. txt ", "a"); if( $file!= false ) { fwrite ( $file, $prenom." ". $nom ); fclose ( $file );?>

20 INSA - ASI TechnoWeb : AJAX 20/40 Fonctionnement (13/14) Appel à un script CGI hello.html <body > <form id=" formulaire " method ="" action =""> <label >Nom </ label ><input type ="text " id="nom " size ="20"/><br/> <input type =" button " value =" Requête " onclick =" submitform ()"/> </ form > <p id=" zone "></p> </ body > <foot > < script type ="text / javascript ">// <!-- function submitform () { var req = new XMLHttpRequest (); req. onreadystatechange = function () { if(req. readystate == 4){ if(req. status == 200) { document. getelementbyid ("zone "). innerhtml = req. responsetext ; else { document. getelementbyid ("zone "). innerhtml = " Erreur : code retourné " + req. status + " " + req. statustext ; ; req. open (" POST ", "/~paucheta /cgi - bin / read. cgi ", true ); req. setrequestheader ("Content -Type ", " application /x-www -form - urlencoded "); req.send ("nom ="+ document. forms. formulaire.nom. value +"\n"); // --></ script > </ foot >

21 INSA - ASI TechnoWeb : AJAX 21/40 Fonctionnement (14/14) Appel à un script CGI read.cgi #!/ usr / bin / perl $requete = <STDIN >; ( $argument, $nom ) = split (/=/, $requete ); chop ( $nom ); print " length ( $nom )"; open (fnoms,"../ Data /noms.txt ") die "Pb d ouverture du >; print "Content -type : text / plain \n\n"; foreach $element ) { if ( index ($element,$nom ) >-1) { $sentence = " Bonjour $element!"; if ( length ( $sentence ) >0 length ($nom )==0) { print " $sentence -$nom -"; else { print "Je ne vous connais pas, mais bonjour $nom!";

22 INSA - ASI TechnoWeb : AJAX 22/40 AJAX avec JQuery AVANTAGES DE JQUERY Compatibilité tout navigateur Simplification de la syntaxe

23 INSA - ASI TechnoWeb : AJAX 23/40 $(ID).LOAD(URL, DATA,CALLBACK()) Charge le contenu d une URL dans un élément du DOM url : adresse de la page à charger data : paramètres à joindre à l url («x=1&y=2») callback : fonction appelée à chaque changement d état

24 INSA - ASI TechnoWeb : AJAX 24/40 QU EST-CE QU UN CALLBACK Les fonctions de callback permettent de récupérer le résultat Car AJAX est asynchrone : l exécution du code continu sans attendre la fin de l exécution de l appel AJAX.

25 INSA - ASI TechnoWeb : AJAX 25/40 $(ID).LOAD EN GET OU POST Suivant le formatage de data, la requête sera en GET ou POST GET = mis en cache par les navigateurs et les proxys POST = non mis en cache Syntaxe GET var data = «x=1&y=2»; // chaîne de caractères Syntaxe POST var data = { i:1, y: 2; // tableau

26 INSA - ASI TechnoWeb : AJAX 26/40 AJAX en jquery Load en GET load3-get.html <! DOCTYPE html > <html > <head > <meta http - equiv="content -type " content="text /html ; charset=utf -8" /> <title >Exemple AJAX / jquery </ title > </head > <body > <div id=" contenu ">Ce contenu va être remplacé par l appel Ajax </div > </body > <foot > <script src="// ajax. googleapis.com /ajax /libs / jquery /1.8.2/ jquery.min.js "></ script > <script > var data = " nom = Jack "; $( # contenu ).load ( Scripts /get.php, data ); </ script > </foot > get.php <? php $nom = $_GET [" nom "]; echo " Salut $nom!";?>

27 INSA - ASI TechnoWeb : AJAX 27/40 AJAX en jquery Load en POST load3-post.html <! DOCTYPE html > <html > <head > <meta http - equiv="content -type " content="text /html ; charset=utf -8" /> <title >Exemple AJAX / jquery </ title > </head > <body > <div id=" contenu ">Ce contenu va être remplacé par l appel Ajax </div > </body > <foot > <script src="// ajax. googleapis.com /ajax /libs / jquery /1.8.2/ jquery.min.js "></ script > <script > var data = { nom : John ; $( # contenu ).load ( Scripts /post.php, data ); </ script > </foot > post.php <? php $nom = $_POST [" nom "]; echo " Salut $nom!";?>

28 INSA - ASI TechnoWeb : AJAX 28/40 $.GET(URL, DATA,CALLBACK()) ET $.POST() Récupère des données du serveur en GET ou en POST url : adresse de la page à charger data : paramètre à joindre à l url ( «x=1&y=2» ou {i:1, j:2 ) callback : fonction appelée à chaque changement d état <html>! <head>! <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>! <script>! $.get( nouveaucontenu.php,function(data, status, xhr) {! if (status == "error") {! alert( erreur + xhr.status + " " + xhr.statustext);! else {! alert( Contenu récupéré : + data);!! );! </script>!

29 INSA - ASI TechnoWeb : AJAX 29/40 AJAX en jquery Méthode $.get(url, DATA, CALLBACK()) jquery-get.html <! DOCTYPE html > <html > <head > <meta http - equiv="content -type " content="text /html ; charset=utf -8" /> <title >Exemple AJAX / jquery </ title > </head > <body > <div id=" contenu ">Ce contenu va être remplacé par l appel Ajax </div > </body > <foot > <script src="// ajax. googleapis.com /ajax /libs / jquery /1.8.2/ jquery.min.js "></ script > <script > var data = " nom = Jack "; $. get ( Scripts / get. php, data, function ( received, status, xhr ) { if( status == " error ") { alert ( erreur + xhr. status + " " + xhr. statustext ); else { $( # contenu ). html ( " Reçu : " + received ); ); </ script > </foot >

30 INSA - ASI TechnoWeb : AJAX 30/40 AJAX en jquery Méthode $.post(url, DATA, CALLBACK()) jquery-post.html <! DOCTYPE html > <html > <head > <meta http - equiv="content -type " content="text /html ; charset=utf -8" /> <title >Exemple AJAX / jquery </ title > </head > <body > <div id=" contenu ">Ce contenu va être remplacé par l appel Ajax </div > </body > <foot > <script src="// ajax. googleapis.com /ajax /libs / jquery /1.8.2/ jquery.min.js "></ script > <script > var data = { nom : " Jack "; $. post ( Scripts / post. php, data, function ( received, status, xhr ) { if( status == " error ") { alert ( erreur + xhr. status + " " + xhr. statustext ); else { $( # contenu ). html ( " Reçu : " + received ); ); </ script > </foot >

31 INSA - ASI TechnoWeb : AJAX 31/40 SAME ORIGIN POLICY Les ajax doivent être sur le même domaine, sinon interdit. URL Page URL Ajax OK/NOK OK OK NOK NOK NOK NOK Aussi bien valable en javascript qu en Jquery

32 INSA - ASI TechnoWeb : AJAX 32/40 $.ajax(url [, SETTINGS]) La méthode à tout faire <html>! <head>! <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>! <script>! $.ajax({! type: 'GET',! url: 'mapage.php',! timeout: 3000,! success: function(data) {! alert(data);,! error: function() {! alert('la requête n a pas abouti');! );! </script>!

33 INSA - ASI TechnoWeb : AJAX 33/40 AJAX en jquery Méthode $.ajax(url[,settings]) jquery-ajax-post.html <! DOCTYPE html > <html > <head > <meta http - equiv="content -type " content="text /html ; charset=utf -8" /> <title >Exemple AJAX / jquery </ title > </head > <body > <div id=" contenu ">Ce contenu va être remplacé par l appel Ajax </div > </body > <foot > <script src="// ajax. googleapis.com /ajax /libs / jquery /1.8.2/ jquery.min.js "></ script > <script > var data = " nom = Jack "; $. ajax ({ type : POST, url : Scripts / post. php, data : data, success : function ( received ) { $( # contenu ). html ( " Reçu : " + received );, error : function () { alert ( Problème AJAX ); ); </ script > </foot >

34 INSA - ASI TechnoWeb : AJAX 34/40 $.getscript(url,callback()) Ajoute un javascript sur la page N est pas restreint pas la «Same origin policy» <html>! <head>! <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>! <script>! $.getscript( nouveaujavascript.js );! </script>!

35 INSA - ASI TechnoWeb : AJAX 35/40 $.getjson(url,data,callback()) Charge des données formatées en JSON! N est pas restreint pas la «Same origin policy» <html>! <head>! <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>! <script>! $.getjson( donnee.json, function(data) {! alert( Nom : +data.nom+ Prenom : +data.prenom);! );! </script>!

36 INSA - ASI TechnoWeb : AJAX 36/40 $.getjson(url,data,callback()) index.php

37 INSA - ASI TechnoWeb : AJAX 37/40 $.getjson(url,data,callback()) ajax.php

38 INSA - ASI TechnoWeb : AJAX 38/40 Conclusion (1/3) Conclusion Technologie encore jeune (dans son utilisation), donc les outils sont toujours en cours de conception (API, utilisation du DOM, Design patterns, etc.) Permet de faire des interfaces évoluées sur des clients web "légers" (pas de plugin à télécharger) Problèmes de compatibilité (XMLHttpRequest n est pas standard!) À connaître, mais risque encore de fortement évoluer dans les prochaines années...

39 INSA - ASI TechnoWeb : AJAX 39/40 Conclusion (2/3) Perspectives pour AJAX Autres outils en développement Autres bibliothèques Javascripts (ex : Dojo) OpenLazlo : description en XML (aspects statiques) et JavaScript (aspects dynamiques) d une application exécutée en Flash au niveau du client intégration des avantages de Flash et du développement à l aide d XML/JavaScript : plus de problèmes de compatibilité XUL : description d applications en XML. Spécialisé pour le moteur Gecko (Firefox/Mozilla) XAML : un peu le même genre, pour Windows Vista

40 INSA - ASI TechnoWeb : AJAX 40/40 Conclusion (3/3) Sources

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA

Technologies Web. Technologies Web AJAX TCM-TWEB Julien BEAUCOURT 2006 pour ETNA AJAX Sommaire Introduction Applications Web Applications AJAX Avantages / Inconvénients Exemple Introduction AJAX, ou Asynchronous JavaScript And XML («XML et Javascript asynchrones»), est un acronyme

Plus en détail

Programmation Web AJAX

Programmation Web AJAX /25 Programmation Web AJAX Thierry Hamon Bureau H202 Institut Galilée - Université Paris 13 & LIMSI-CNRS hamon@limsi.fr http://perso.limsi.fr/hamon/teaching/progweb-20132014/ 2/25 Asynchronous Javascript

Plus en détail

ITII Programmation Web FMC Page 1

ITII Programmation Web FMC Page 1 Programmation Web FMC Page 1 Définition d'ajax AJAX signifie Asynchronous JavaScript and XML : c'est un ensemble de technologies (CSS, JavaScript, XML...) utilisées ensemble afin de permettre des communications

Plus en détail

AJAX Licence 3 ère Année

AJAX Licence 3 ère Année BDWeb : AJAX Licence 3 ère Année Fabrice Lefèvre 2010 Asynchronous Javascript + XML nom donné à un ensemble de techniques préexistantes dépend essentiellement de XMLHttpRquest, un objet coté client utilisable

Plus en détail

Exemples d applications Ajax

Exemples d applications Ajax Web 2.0 et Ajax AJAX Exemples d applications Ajax Complétion automatique Validation en temps réel des données d un formulaire Navigation dynamique Lecture d un flux RSS Sauvegarde automatique des documents

Plus en détail

Cours 11 - Interaction : AJAX

Cours 11 - Interaction : AJAX 1/35 UPMC Paris Universitas Programmation des interactions et interfaces homme machine Cours 11 - Interaction : AJAX Carlos Agon - Choun Tong LIEU 8 avril 2016 2/35 Introduction à Javascript Un langage

Plus en détail

Les API de HTML5. Michel Gagnon École Polytechnique de Montréal

Les API de HTML5. Michel Gagnon École Polytechnique de Montréal Les API de HTML5 Michel Gagnon École Polytechnique de Montréal Cache d application L idée ici consiste à garder en cache les ressources nécessaires pour continuer à utiliser une application web même si

Plus en détail

Tutoriel Ajax en exemples. nom Ajax ne se soit répandu, dès la parution d'un article de J. J. Garrett. Sommaire

Tutoriel Ajax en exemples. nom Ajax ne se soit répandu, dès la parution d'un article de J. J. Garrett. Sommaire Page 1 sur 9 Rechercher Ajax XUL JavaScript CSS HTML 5 FAQ-Forum Ajax Tutoriel Ajax XMLHttpRequest Frameworks Démos et scripts Tutoriel Ajax Web 2.0 Techniques Application web Tutoriel RSS XUL & XML Tutoriel

Plus en détail

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : jquery 1/24. Technologies Web. jquery. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : jquery 1/24 Technologies Web jquery Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : jquery 2/24 Plan 1 Introduction 2 Fonctionnalités

Plus en détail

JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX

JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX JavaScript NÉCESSAIRE WEB XAVIER BLANC UNIVERSITÉ DE BORDEAUX Script JavaScript est un langage de script Un script est une séquence d instructions qui seront interprétées les unes après les autres Les

Plus en détail

Cours 4 AJAX avec jquery

Cours 4 AJAX avec jquery Licence CRRW IUT de Marne-la-Vallée 02/11/2016 Cours de jquery Cours 4 AJAX avec jquery Philippe Gambette Sources Cours de Jean-Loup Guillaume http://jlguillaume.free.fr/www/documents/teaching/ntw1213/li385_c5_jquery.pdf

Plus en détail

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition)

AJAX - Développez pour le Web 2.0 Entrez dans le code : JavaScript, XML, DOM, XMLHttpRequest2... (2ième édition) Présentation générale d'ajax 1. Principe et définition 11 2. Exemples sur le Web 16 2.1 Google Maps 16 2.2 Google Suggest 18 2.3 Google Agenda 19 2.4 Google Docs, Google Sheets et Google Slides 20 3. Avantages

Plus en détail

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011

AJAX. Magali Contensin. JoSy AJAX et bibliothèques JS pour les ASR. 3 novembre 2011 AJAX Magali Contensin 3 novembre 2011 JoSy AJAX et bibliothèques JS pour les ASR Plan Comment actualiser une partie d'une page web? Principe Quelques applications Etapes Sécurité Support par les navigateurs

Plus en détail

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc

Introduction à Ajax. CNAM le 2013 O. Pons S. Rosmorduc 2013 Introduction à Ajax CNAM le 2013 O. Pons S. Rosmorduc 1 / 18 Principe général de fonctionnement Faire des requettes http sans avoir recharger une page entiere. Communication de javascript avec les

Plus en détail

Programmation Web Avancée. Cours 7 Web Storage Ajax.

Programmation Web Avancée. Cours 7 Web Storage Ajax. Programmation Web Avancée Cours 7 Web Storage Ajax kn@lri.fr Plan 1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage 2 Objets/Portée des variables/tableaux/rappels MVC 3 Visiteur/Expressions

Plus en détail

Programmation client / serveur

Programmation client / serveur Benjamin Canou - Christian Queinnec Cours 5 du 17/12/2012 Programmation côté client Rappels rapides sur JavaScript Manipulation du document et du style via DOM L'inévitable JavaScript La mode est aux applications

Plus en détail

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2

Introduction à AJAX. Isabelle Mougenot mougenot@lirmm.fr. May 13, 2009. LIRMM Université Montpellier 2 LIRMM Université Montpellier 2 May 13, 2009 Quelques clés de compréhension Asynchronous JavaScript And XML (adossé à JavaScript comme à XML) 2005, J.Garret, popularité accrue au travers de quelques applications

Plus en détail

Algorithmique et développement web S2 6. Gestion des formulaires

Algorithmique et développement web S2 6. Gestion des formulaires Algorithmique et développement web S2 6. Gestion des formulaires Christophe BLANC IUT MMI IUT d Allier Université Clermont Auvergne www.christophe-blanc.fr 2016-2017 1 / 15 Rappel Un formulaire est un

Plus en détail

Ajax et PHP5. Bonjour tout le monde ( Hello World ) en Ajax et PHP

Ajax et PHP5. Bonjour tout le monde ( Hello World ) en Ajax et PHP Ajax et PHP5 Ajax n est pas vraiment une technologie mais plutôt un ensemble de plusieurs technologies, parmi lesquelles se trouvent JavaScript Asynchrone, XML, XHTML et CSS. Le mot asynchrone est de la

Plus en détail

AJAX. Asynchronous JavaScript - XML

AJAX. Asynchronous JavaScript - XML AJAX Asynchronous JavaScript - XML Rédacteur : Morel Alexandre Version : 1.2 Date : 08 novembre 2005 Tables des matières Introduction 3 L'objet XMLHttpRequest 3 Qu'est-ce qu'ajax? 3 Utilisation 4 Étape

Plus en détail

Développement Web. Communication Client-Serveur LI328 UPMC. Sylvain Lamprier

Développement Web. Communication Client-Serveur LI328 UPMC. Sylvain Lamprier 1 / 57 Développement Web Communication Client-Serveur LI328 Sylvain Lamprier UPMC Communication Client-Serveur 2 / 57 Navigateur Serveur Base de données HTML AJAX (Tomcat) MySQL CSS Javascript JSON Base

Plus en détail

Programmation Web Avancée AJAX

Programmation Web Avancée AJAX 1/28 Programmation Web Avancée AJAX Thierry Hamon Bureau H202 - Institut Galilée Tél. : 33 1.48.38.35.53 Bureau 150 LIM&BIO EA 3969 Université Paris 13 - UFR Léonard de Vinci 74, rue Marcel Cachin, F-93017

Plus en détail

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax

Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Formation jquery Objectif(s): Comprendre les concepts fondamentaux de jquery Mettre en place des applications web 2.0 dynamiques avec HTML, CSS, jquery et Ajax Durée : 2 jour(s) Pré-requis : Avoir suivi

Plus en détail

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012

AJAX. Magali Contensin. ANF Dev Web ASR Carry-le-Rouet. 25 octobre 2012 AJAX Magali Contensin 25 octobre 2012 ANF Dev Web ASR Carry-le-Rouet Plan Présentation d AJAX Principe Etapes Prendre en compte la latence Support par les navigateurs Inconvénients Avantages Présentation

Plus en détail

Table des matières. Introduction 1

Table des matières. Introduction 1 Table des matières Introduction 1 1 Les bases de JavaScript 5 Compréhension de JavaScript (et de son histoire) 5 Établissement d un système de test 8 Configuration de navigateurs Web 9 Inclusion du code

Plus en détail

TDM07 de Technologies Web: PHP2

TDM07 de Technologies Web: PHP2 TDM07 de Technologies Web: PHP2 ASI4 - INSA Rouen correction 1 Compteur PHP (2) Reprenez le compteur PHP développé la semaine dernière et modifiez-le afin de lui ajouter un second compteur de visites qui

Plus en détail

Sommaire. 1. Introduction Mise en place Fonctions disponibles de l API live Chat Exemple pratique... 14

Sommaire. 1. Introduction Mise en place Fonctions disponibles de l API live Chat Exemple pratique... 14 Sommaire 1. Introduction... 3 2. Mise en place... 4 3. Fonctions disponibles de l API live Chat... 5 4. Exemple pratique... 14 Hermes.Net Live Chat API Page 3 14 1. Introduction Le composant Live Chat

Plus en détail

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript

AJAX AJAX. Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript AJAX Ajax 1 AJAX Asynchronous JavaScript And XML. Technologie pour créer des pages web interactives Basées sur XML, HTML et JavaScript Utilise: HTML pour le marquage XML pour représenter les résultats

Plus en détail

PHP. Arnaud Sallaberry montp3.fr. Programma;on pour le Web 1

PHP. Arnaud Sallaberry montp3.fr. Programma;on pour le Web 1 PHP Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 06/02/2015 Programma;on pour le Web 1 Plan Les principaux langages du Web Côté client Côté serveur Autres Récapitula;f PHP Introduc;on Types de données

Plus en détail

Séance 1. Bases et HTML

Séance 1. Bases et HTML Séance 1 Bases et HTML Nils Schaefer (nils.schaefer@sn-i.fr) Serveur Web Hébergement des sites Web Utilisation du port 80 Réception des requêtes HTTP des navigateurs Traitement des requêtes HTTP Exemples

Plus en détail

Formulaire HTML et PHP

Formulaire HTML et PHP Formulaire HTML et PHP Partie 1 Les langages du Web Vincent Bouvier vincent.bouvier@kware.fr HTML - Les formulaires Un formulaire permet à l'utilisateur d'envoyer des données au serveur Un formulaire commence

Plus en détail

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery

Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Objectif(s): Formation Webmaster Avancé : HTML5/CSS3, JavaScript/DOM + Responsive Design et XML, JSON, AJAX/jQuery Maîtriser HTML5/CSS3 Mettre en œuvre les techniques de conception de sites web adaptatifs

Plus en détail

Balises de formulaire

Balises de formulaire Les formulaires XHTML permettent de recueillir les informations saisies par un utilisateur, puis de les transmettre à un programme serveur. Nous verrons : - la structure d un formulaire - les éléments

Plus en détail

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web 1. 2. Pour naviguer sur le Web, il faut : Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des machines Protocoles de communication Plusieurs niveau (couche) : Internet, protocole

Plus en détail

Web dynamique. approche client/serveur

Web dynamique. approche client/serveur Web dynamique approche client/serveur Client/serveur Serveur requête (url) réponse (fichiers) Client url = adresse IP + /chemin/vers/fichier réponse = fichier (lu sur le DD du serveur) Le client gère la

Plus en détail

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015

Programmation Web IMAC TD 7 : AJAX et JSON. 18 novembre 2015 Programmation Web IMAC 2015-2016 TD 7 : AJAX et JSON 18 novembre 2015 Objectif: Ce TD a pour but de decouvrire les syntaxes AJAX et JSON, ainsi que leur liens avec jquery. 1 AJAX AJAX (acronyme de Asynchronous

Plus en détail

Programme Formation Webmaster Opérationnel niveau 2

Programme Formation Webmaster Opérationnel niveau 2 Programme Formation Webmaster Opérationnel niveau 2 Objectif : Savoir personnaliser et dynamiser le contenu de sites web par la connaissance de l'html5/css3, du PHP MySQL, du JavaScript et d'ajax. Compétences

Plus en détail

PHP/MYSQL. Web Dynamique

PHP/MYSQL. Web Dynamique PHP/MYSQL Web Dynamique ENSG Juin 2008 Ces 6 jours de formation Jour 1 : présentations, attentes, principes, HTML Jour 2 : CSS, et HTML Jour 3 : PHP, formulaires, Base de données Jour 4 : Rappel PHP, Extraction

Plus en détail

XML DOM. Taha Zerrouki

XML DOM. Taha Zerrouki XML DOM Taha Zerrouki Définition Le Document de référence Objet Modèle (DOM) est une norme de W3C. Il définit une norme pour l'accès aux documents comme HTML et XML. 2 Définition par W3C Le modèle objet

Plus en détail

Technologies de l internet Date: 26 juillet 2011, 14h30 17h20

Technologies de l internet Date: 26 juillet 2011, 14h30 17h20 IFT3225-E2011 Examen Final Consignes Technologies de l internet Date: 26 juillet 2011, 14h30 17h20 Philippe Langlais Les calculatrices, téléphones, ordinateurs, etc. ne sont pas autorisés (vous pouvez

Plus en détail

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery

Plusieurs façons de communiquer AJAX? Communication, manière facile. AJAX en jquery Programmation web AJAX Jean-Christophe Dubacq IUT de Villetaneuse S3 2013 AJAX A Jean-Christophe Dubacq (IUTV) Programmation web S3 2013 1 / 33 Le modèle classique Jean-Christophe Dubacq (IUTV) Programmation

Plus en détail

Le client/serveur dans le cas du Web

Le client/serveur dans le cas du Web Le client/serveur dans le cas du Web Olivier Flauzac & Cyril Rabat olivier.flauzac@univ-reims.fr cyril.rabat@univ-reims.fr Licence 3 Info - Info0503 - Introduction à la programmation client/serveur 2015-2016

Plus en détail

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54

Documents web dynamiques. 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques 20 novembre 2007 Architecture Multi-Niveaux 54 Documents web dynamiques Contenu Statique Le client envoie une requête avec un nom de fichier Le serveur répond en lui retournant

Plus en détail

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau.

Introduction Implantation Format des données Restriction. Programmation WEB. Ajax. Programmation licence. IUT de Fontainebleau. Ajax IUT de Fontainebleau 1 er mars 2015 Sommaire Introduction 1 Introduction 2 3 4 Sommaire Introduction 1 Introduction 2 3 4 Introduction AJAX se base sur l objet JavaScript XMLHttpRequest qui permet

Plus en détail

Le langage PHP. Le langage PHP p.1/??

Le langage PHP. Le langage PHP p.1/?? Le langage PHP Le langage PHP p.1/?? Le langage PHP p.2/?? Sommaire Les principaux aspects du langage PHP généralités littéraux, variables et constantes tableaux associatifs et indicés boucles et tests

Plus en détail

Créer une barre de progression grâce à PHP 5.4

Créer une barre de progression grâce à PHP 5.4 Créer une barre de progression grâce à PP 5.4 La version de PP 5.4 vient avec son lot de nouveautés et propose désormais de suivre la progression d un fichier en cours de téléchargement grâce aux nouvelles

Plus en détail

Projet DELIRE. Introduction à PHP

Projet DELIRE. Introduction à PHP Projet DELIRE Introduction à PHP Pages dynamiques page statique Nous sommes le 28/03/2007 Probleme : Afficher une page différente en fonction

Plus en détail

Séance 3. Javascript/DHTML

Séance 3. Javascript/DHTML Séance 3 Javascript/DHTML Nils Schaefer (nils.schaefer@sn-i.fr) Langage Javascript Vrai langage de programmation Exécution côté client Apporter du dynamisme aux pages HTML Syntaxe générale similaire au

Plus en détail

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP

Introduction. Javascript. L événement onsubmit. Javascript et les formulaires. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Au delà du HTML création dynamique de Javascript, d images et de fichiers PDF Introduction PHP ne permet pas seulement de générer du code HTML. On peut, entre

Plus en détail

LIFAP5 Programmation fonctionnelle pour le WEB

LIFAP5 Programmation fonctionnelle pour le WEB LIFAP5 Programmation fonctionnelle pour le WEB CM1 introduction à javascript Licence informatique UCBL Printemps 2016 2017 https://liris.cnrs.fr/~rthion/dokuwiki/doku.php?id=enseignement:lifap5:start FST-INFO

Plus en détail

Module Javascript - Présentation du langage - Exercices d application

Module Javascript - Présentation du langage - Exercices d application Module Javascript - Présentation du langage - Exercices d application February 15, 2011 Module Javascript - Présentation du langage - Exercices d application ii Contents 1 Exercice 1 1.1 Les premiers programmes

Plus en détail

Inf340 Systèmes d information. Premier site ce qu il ne faut pas faire

Inf340 Systèmes d information. Premier site ce qu il ne faut pas faire Inf340 Systèmes d information Premier site ce qu il ne faut pas faire Objectifs Objectif : Réaliser un premier site en utilisant une mauvaise approche de conception. Le site permet de gérer un carnet d

Plus en détail

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax

Dojo partie 1. Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax Dojo partie 1 Widgets dojo.form Validation des formulaires Côté client Côté serveur Requêtes Ajax 1 Modules Dojo 3 espaces de noms principaux: dojo: bibliothèque de base dijit: bibliothèque de widgets

Plus en détail

Programmation Web Serveur

Programmation Web Serveur Programmation Web Serveur Bilan intermédiaire 2 - Formulaires D'après les cours de Philippe Renevier Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr FONCTIONS

Plus en détail

Cours 4 AJAX avec jquery

Cours 4 AJAX avec jquery Licence STIC IUT de Marne-la-Vallée 04/06/2015 Cours de jquery Cours 4 AJAX avec jquery Philippe Gambette Sources Cours de Jean-Loup Guillaume http://jlguillaume.free.fr/www/documents/teaching/ntw1213/li385_c5_jquery.pdf

Plus en détail

Balises de formulaire

Balises de formulaire Les formulaires XHTML permettent de recueillir les informations saisies par un utilisateur, puis de les transmettre à un programme serveur. Nous verrons : - la structure d un formulaire - les éléments

Plus en détail

TP SIN Connexion base de données (PDO)

TP SIN Connexion base de données (PDO) TP SIN Connexion base de données (PDO) Support : carte arduino yun Pré requis (l élève doit savoir): - Savoir utiliser un ordinateur - Connaître le html, Css, PHP Programme Objectif terminale : L élève

Plus en détail

Pour la création de la requête SQL pour insérer des données, nous devons concaténer des variables avec des chaines de caractères contenant du texte.

Pour la création de la requête SQL pour insérer des données, nous devons concaténer des variables avec des chaines de caractères contenant du texte. TP 4 Master CTN A. sprintf Pour la création de la requête SQL pour insérer des données, nous devons concaténer des variables avec des chaines de caractères contenant du texte. Voici la requête SQL que

Plus en détail

App hybrides. Merci de vous installer par binôme de niveau différent

App hybrides. Merci de vous installer par binôme de niveau différent App hybrides Merci de vous installer par binôme de niveau différent Programme (1/2) Introduction: panorama du dev mobile Le web et le HTML Évaluation 1 (QCM) La mise en page avec CSS Les bases de Javascript

Plus en détail

NEWTEST MAG NEWTRIA/DOM CONTACT :

NEWTEST MAG NEWTRIA/DOM CONTACT : NEWTEST MAG NEWTRIA/DOM Reproduction ou communication même partielle interdite sans autorisation écrite d ip-label. CONTACT : ip-label Tél : 01 77 49 53 00 Fax : 01 49 64 03 80 90 boulevard National, 92250

Plus en détail

Installer PHP Gérer les s... 29

Installer PHP Gérer les  s... 29 Installer PHP... 13 1.1 Installer PHP avec EasyPHP....................... 15 1.2 Installer PHP avec Wamp5....................... 20 1.3 Installer PHP sous Linux......................... 24 1.4 Configurer

Plus en détail

TP JAVASCRIPT Série N 4

TP JAVASCRIPT Série N 4 TP JAVASCRIPT Série N 4 GESTION D UN FORMULAIRE DE CONTACT Objectif : Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE Ci-dessous un exemple

Plus en détail

Programmation réseau. Informatique de l Internet: Javascript et PHP. Javascript (2) Javascript (1) PHP (2) PHP (1)

Programmation réseau. Informatique de l Internet: Javascript et PHP. Javascript (2) Javascript (1) PHP (2) PHP (1) Informatique de l Internet: Javascript et Joël Quinqueton Dépt MIAp, UFR IV UPV! Université Montpellier III Programmation réseau Exécution client Le navigateur prend en charge l exécution du code Le code

Plus en détail

PHP, TEMPLATE ET HTTP

PHP, TEMPLATE ET HTTP PHP, TEMPLATE ET HTTP Développer des application Web Notion de template 1 Un template est modèle de document, c est-à-dire un document dont la forme est définie, mais dont une partie du contenu est variable.

Plus en détail

Ajax. Asynchronous Javascript and XML. <tv>lt La Salle Avignon BTS IRIS</tv>

Ajax. Asynchronous Javascript and XML. <tv>lt La Salle Avignon BTS IRIS</tv> Ajax Asynchronous Javascript and XML Le terme Ajax a été introduit par Jesse James Garrett (informaticien américain), le 18 février 2005, dans un article sur le site Web Adaptive Path (http://www.scriptol.fr/ajax/ajax-garrett.php)

Plus en détail

Traitement des Formulaires

Traitement des Formulaires Traitement des Formulaires 1 Requetês et réponses Exemple de requête: demande d une page GET / HTTP/1.1 Host: exemple.org Exemple de réponse HTTP/1.1 200 OK Content Type: text/html Content Length: 419

Plus en détail

Web2 Web Dynamique et Multimédia Vers les RIA

Web2 Web Dynamique et Multimédia Vers les RIA Web2 Web Dynamique et Multimédia Vers les RIA Thomas Bourdeaud'huy, Diego Cattaruzza, Arnaud Charlier, Laurent Wrowblewski thomas.bourdeaud_huy@ec-lille.fr Ecole Centrale de Lille / IG2I Plan Organisation

Plus en détail

M Algorithmique et PHP

M Algorithmique et PHP M2202 - Algorithmique et PHP David Annebicque 2016 1 TD : Accès aux base de données 1.1 Introduction Une base de données permet de stocker des données de manière durable, contrairement à une session ou

Plus en détail

Introduction Les bases du langage Transmission de variables La persistance. Formation PHP. Maxime Arthaud. net7. Mardi 22 octobre 2013.

Introduction Les bases du langage Transmission de variables La persistance. Formation PHP. Maxime Arthaud. net7. Mardi 22 octobre 2013. Maxime Arthaud net7 Mardi 22 octobre 2013 PHP, Qu est-ce que c est? Client / Serveur Développer en local Syllabus 1 Introduction PHP, Qu est-ce que c est? Client / Serveur Développer en local 2 3 4 PHP,

Plus en détail

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s):

Formation JavaScript : Perfectionnement. Programme. L approche AJAX. L objet XMLHttpRequest. Objectif(s): Formation JavaScript : Perfectionnement Objectif(s): Comprendre l'approche AJAX Comprendre l'objet XMLHttpRequest Durée : 2 jour(s) Pré-requis : Bonnes connaissances en (X)HTML, CSS et JavaScript Public

Plus en détail

Cours 4 Programmation web, orientée serveur

Cours 4 Programmation web, orientée serveur DUT MMI IUT de Marne-la-Vallée 01/03/2016 M2202 - Algorithmique Cours 4 Programmation web, orientée serveur Philippe Gambette Sources phpdebutant.net www.php.net (documentation du langage PHP) Préambule

Plus en détail

Java et jquery Java et jquery - Intégrer un framework JavaScript dans l'écosystème JEE - Version numérique

Java et jquery Java et jquery - Intégrer un framework JavaScript dans l'écosystème JEE - Version numérique Avant-propos 1. Introduction 13 2. Niveau de compétences requis 14 3. Structure du livre 14 Premiers pas 1. Introduction 17 2. Les applications JEE 18 2.1 Les API JEE 19 2.2 Les ressources statiques 22

Plus en détail

1 Pages web dynamiques. 2 Un exemple. 2.1 Objectif

1 Pages web dynamiques. 2 Un exemple. 2.1 Objectif 1 Pages web dynamiques En schématisant on peut considérer que l accès à une pager web depuis une machine s effectue selon une architecture client/serveur. La machine client émet une requête de page web

Plus en détail

TD n 3. Exercice 2: Écrire un script qui permet d obtenir l affichage suivant en utilisant qu une seule instruction document.

TD n 3. Exercice 2: Écrire un script qui permet d obtenir l affichage suivant en utilisant qu une seule instruction document. IUT de Bobigny 2008-2009 CIWM [SLATCM5231] TD n 3 Conception de Pages Web orientée Client 1 Introduction à javascript L objectif des exercices de cette partie est tester vos connaissances de base sur le

Plus en détail

UE Ingénierie Multimédia et Web (IMW)

UE Ingénierie Multimédia et Web (IMW) Ingénierie Web Ingénierie Multimédia et Web Nicolas Thome Ruven Pillay Page 1 Ingénierie Web Partie Développnt Web Page Ingénierie Web Planning des Cours 1er Partie: Indexation d'images: Nicolas Thome

Plus en détail

javascript : éléments du langage

javascript : éléments du langage javascript : éléments du langage Université Lille 1 Technologies du Web javascript : les bases 1 au programme... 1 introduction 2 types 3 fonctions 4 structures 5 conversions 6 objets Université Lille

Plus en détail

Éric Sarrion. JQuery & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN :

Éric Sarrion. JQuery & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 1 Philosophie et principes de base Ce chapitre, fondamental pour comprendre la suite de cet ouvrage,

Plus en détail

Technologie JSP version 2.1

Technologie JSP version 2.1 Technologie JSP version 2.1 Algorithme d exécution d une servlet Composants d une page JSP Deux styles d écriture de page jsp Style standard Style XML Types de blocs dans une page JSP Directives Scripts

Plus en détail

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : CSS 1/23 Technologie Web CSS Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : CSS 2/23 Plan 1 Les CSS 2 XML et CSS INSA - ASI

Plus en détail

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition

Ajax, jquery et PHP. 42 ateliers pour concevoir des applications Web 2.0. Jean-Marie Defrance. 3 e édition Ajax, jquery et PHP 42 ateliers pour concevoir des applications Web 2.0 3 e édition Jean-Marie Defrance Groupe Eyrolles, 2008, 2010, 2011, ISBN : 978-2-212-13271-7 3 Comment fonctionne Ajax? Ajax, un amalgame

Plus en détail

UNIX ET PROGRAMMATION WEB

UNIX ET PROGRAMMATION WEB UNIX ET PROGRAMMATION WEB Cours 6 kn@lri.fr http://www.lri.fr/~kn Plan 1 Systèmes d'exploitation (1/2) 2 Systèmes d'exploitation (2/2) 3 Réseaux, TCP/IP 4 Web et HTML 5 CSS 6 PHP : Introduction 6.1 Introduction

Plus en détail

Programmation Web Javascript et JQuery

Programmation Web Javascript et JQuery Programmation Web Javascript et JQuery Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 26 Présentation Générale Langage Javascript : Langage

Plus en détail

Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation!

Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation! Formation foundation 5 Objectif(s): Apprenez à concevoir des interfaces Web qui s'adaptent aux différents supports de consultation! Durée : 1 jour(s) Pré-requis : Bonnes connaissances en (X)HTML et CSS

Plus en détail

Javascript - Manipulation du DOM

Javascript - Manipulation du DOM Javascript - Manipulation du DOM 1 Référence Vous trouverez sur le site http://html5index.org/ les détails de l API HTML5. Introduction Les fonctions ayant longtemps coexisté pour la sélection de nœuds

Plus en détail

Javascript 2 PARTIE : EVENEMENTS ET OBJETS

Javascript 2 PARTIE : EVENEMENTS ET OBJETS Javascript 2 PARTIE : EVENEMENTS ET OBJETS 1. Programmation événementielle 2. Principe 3. Les événements 4. Gestionnaire d événement 5. Classe et Objet 6. Objets d une page Web 7. Objets divers 8. Exemples

Plus en détail

Systèmes d'informations

Systèmes d'informations Systèmes d'informations C'est un ensemble d'outils pour stocker / gérer / diffuser des informations / des données Le stockage : Bases de données + SGDBR La gestion : Saisie, Mise à jour, Contrôle La diffusion

Plus en détail

T U T O R I E L J A V A S C R I P T ( E S 6 )

T U T O R I E L J A V A S C R I P T ( E S 6 ) T U T O R I E L J A V A S C R I P T ( E S 6 ) Javascript est un langage de script (interprété au fur et à mesure). Il est supporté par les navigateurs web récents. Il peut donc être utilisé lors de la

Plus en détail

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5

Premières applications. Web 2.0. avec Ajax et PHP. J e a n - M a r i e D e f r a n c e. Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 Premières applications Web 2.0 avec Ajax et PHP J e a n - M a r i e D e f r a n c e Groupe Eyrolles, 2008, ISBN : 978-2-212-12090-5 8 Applications Ajax-PHP synchrones Pour commencer simplement, je vous

Plus en détail

Développement d Applications Web

Développement d Applications Web Développement d Applications Web (Cours 5) 2 ème année Licence Informatique Université Abou-Bekr Belkaïd - Tlemcen Année 2016/2017 Mahfoud Houari mahfoud.houari@gmail.com hmahfoud.wordpress.com Plan du

Plus en détail

<?php. /* Interaction client serveur */ $_GET[] /* */

<?php. /* Interaction client serveur */ $_GET[] /* */ générer pour l interactivité $q = $_GET["query"]; switch($q) { case "subject": //Get a given subject $id = $_GET["id"];

Plus en détail

DOM - Document Object Model

DOM - Document Object Model DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et

Plus en détail

Bases de données et Sites Web. Li345 Le langage PHP 2 ème partie. généralités tableaux structures de contrôle

Bases de données et Sites Web. Li345 Le langage PHP 2 ème partie. généralités tableaux structures de contrôle Bases de données et Sites Web. Li345 Le langage PHP 2 ème partie généralités tableaux structures de contrôle 1 Rappel : CGI et bases de données Architecture 3 tiers MySQL : stockage, protection des données,

Plus en détail

TP n 1. Objectifs. Outils utilisés. Construire une application web

TP n 1. Objectifs. Outils utilisés. Construire une application web TP n 1 Objectifs Introduction à l'ide netbeans Création d'un formulaire HTML Création d'une servlet Déploiement d'une application web Outils utilisés o La plate-forme netbeans intègre un serveur web o

Plus en détail

JavaScript, langage et utilisation

JavaScript, langage et utilisation INTRODUCTION JavaScript, langage et utilisation Langage côté CLIENT Javascript n'est pas java! intégré aux navigateurs: pas de problème de déploiement comme avec les applets java ou flash permet de rendre

Plus en détail

Guide d utilisation pour utilisateur «userpsa»

Guide d utilisation pour utilisateur «userpsa» Guide d utilisation pour utilisateur «userpsa» Site Internet du comité d entreprise http://cepcacharleville.fr Page 1 sur 13 SOMMAIRE 1 VERSION DU DOCUMENT... 3 2 COMMENT BIEN UTILISER CE GUIDE... 4 3

Plus en détail

Évènements, fonctions callback, closure

Évènements, fonctions callback, closure Évènements, fonctions callback, closure Programmation événementielle est un langage de programmation évènementielle. Au lieu d exécuter des instructions de façon séquentielle, les diverses fonctions sont

Plus en détail

Javascript. Javascript : les bases du langage. Intégration de javascript dans la page html. Un style de programmation impératif

Javascript. Javascript : les bases du langage. Intégration de javascript dans la page html. Un style de programmation impératif : les bases du langage Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 présentation partielle, et parfois partiale un langage fonctionnel à objet à base de prototypes un

Plus en détail

En HTML un formulaire recueille des informations de l'utilisateur, puis les transfère au serveur, qui à son tour doit les traiter

En HTML un formulaire recueille des informations de l'utilisateur, puis les transfère au serveur, qui à son tour doit les traiter Rappel Formulaires HTML http://www.w3.org/tr/html4/interact/forms.html http://www.la-grange.net/w3c/html4.01/interact/forms.html http://www.w3schools.com/html/html_forms.asp En HTML un formulaire recueille

Plus en détail

MODALITÉS D ÉVALUATION : DOCUMENT DÉLIVRÉ :

MODALITÉS D ÉVALUATION : DOCUMENT DÉLIVRÉ : DURÉE : 28 jours soit 196 heures de formation VERSION 2017 RÉSUMÉ PROGRAMME : - HTML / CSS 8 jours [56 heures] - JAVASCRIPT 7 jours [49 heures] - PHP / SQL 10 jours [70 heures] - RÉFÉRENCEMENT 3 jours

Plus en détail

PHP MySQL N 0 IUT SRC TOULON

PHP MySQL N 0 IUT SRC TOULON PHP MySQL N 0 IUT SRC TOULON 2016-2017 I Intro Relation Client / Serveur Client = Visiteur d un site web, personne qui demande à voir une page web. Serveur = Machine qui s occupe de distribuer le site

Plus en détail