Cours 11 - Interaction : AJAX

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Cours 11 - Interaction : AJAX"

Transcription

1 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 2/35 Introduction à Javascript Un langage de script 1 Différent de Java!, emprunte en fait a Scheme et a C. 2 Tourne dans une machine virtuelle embarquée dans les navigateurs. 3 Permet d altérer le document affiché. 4 C est un Langage Objet! (Avec un modele assez particulier... ) 5 AJAX.

3 3/35 Inclusion dans le code html < script language =" Javascript " > <! code ici > </ script > Permet d envoyer le script en même temps que la page. Permet aussi de cacher le code si on utilise un browser non équipé d une VM Javascript.

4 4/35 Exemple 1 <html > <head > <title >An Ajax example </ title > </head > <body > < script language = " javascript " > document. write (" Hello IHM ") </ script > </body > </html >

5 5/35 Syntaxe Proche du C. Une expression se fini par ; une variable se declare avec le mot clef var. Il est possible d affecter une variable non déclarée! Une variable non initialisée ne peut etre utilisée! opérateurs usuels pour l arithmétique (entière et flottante) Sur les strings + est un opérateur de concatenation. Si on ajoute un nombre à un string le nombre est converti en string. Operateur de comparaison usuels pour les nombres. if (5=="5") document.write("ok"") ; === est l operateur de comparaison structurel (valeur et type) operateurs logiques &&!

6 6/35 Exemple 2 <html > <head > <title >An Ajax example </ title > </head > <body > <script language = " javascript " > var d = new Date ( ) var time = d. gethours ( ) if ( time <10) { document. write ( " <b>bon. petit dej </b>" ); else if ( time >10 && time <16) { document. write ( " <b>bon. dejeuner </b>" ); else { document. write ( " <b>bon. diner </b>" ); </ script > </body > </html >

7 7/35 Boucles for(init ; cond ; incr) while for (variable in object) <html > <head > <title > An Ajax example </ title > </head > <body > < script language = " javascript " > var i = 0; for (i =0; i <=15; i ++) { document. write ( " The number is : " + i); document. write ( " <br/>" ) ; </ script > </body > </html >

8 8/35 Exceptions Un Bloc try... catch instruction throw valeur <html > <body > <script type =" text / javascript "> var x= prompt ( " Enter a number between 0 and 10: ", "" ) ; try { if (x >10) { throw " Err1 " ; else if (x <0) { throw " Err2 " ; else if ( isnan (x) ) { throw " Err3 " ; catch (er ) { if ( er ==" Err1 ") { alert (" Error! The value is too high " ) ; if ( er ==" Err2 ") { alert (" Error! The value is too low " ) ; if ( er ==" Err3 ") { alert (" Error! The value is not a number " ) ; </ script > </body > </html >

9 9/35 GUI Exemple <html > <head > <title > Exemple d un Bouton </ title > <script language = " javascript "> function attentiongetter () { alert (" Hello, j ai change le texte aussi " ) var target = document. getelementbyid (" targetdiv "); target. innerhtml = " Ceci est un texte nouveau " </ script > </head > <body > <H1 >Clic dans un bouton </ H1 > <form > <input type = " button " value = " Click me" onclick = " attentiongetter ()" > </form > <div id=" targetdiv " > <p>je suis un vieux texte </p> </div > </body > </html >

10 10/35 Le Document Object Model Séparation du fond (le DOM) de la forme (la CSS) le DOM est le modèle objet du document HTML. On peut y rajouter/enlever/modifier des noeuds. Les noeud peuvent être nommés et parcourus en fonction de leur nature. Le document complet est vu comme un arbre. Tous les éléments sont des noeuds avec des relations. Possibilité de cycler entre les noeuds. Référencement possible par Id, Tag, ou par relations. Tout text est mis dans un noeud de Type Text. Le noeud racine est le noeud <html>.

11 11/35 Le Document Object Model (exemple) DocumentBuilderFactory.newInstance() dbf:documentbuilderfactory Node.DOCUMENT_NODE d.getnodetype() d:document dbf.newdocumentbuilder() db.parse(f) db:documentbuilder d.getdocumentelement() n:node n.gettagname() f:file new File("f.xml") n0.getparentnode() "programme1" n.getchildnodes() Fichier XML nl:nodelist nl.item(0) nl.item(2) nl.item(1) n0:node n1:node n2:node

12 12/35 DOM Exemple <script language =" javascript "> function toto () { var i = 0; var stock = document. body. childnodes. length ; var para = document. createelement ("P"); para. innerhtml = "<p>j ai trouve comme fils : <p>"; document. body. appendchild ( para ); for (i =0; i< stock ; i ++) { var para1 = document. createelement ("P" + i); para1. innerhtml = "<p>" + document. body. childnodes [ i ]. nodename "<p>"; document. body. appendchild ( para1 ); </ script > <body > <p> Ceci est le premier paragraphe </p> <p>ceci est le second </p> <h1 > Un titre en gros </h1 > <script language =" Javascript "> toto (); </ script >

13 13/35 AJAX Mécanisme par lequel un client peut faire une requête au serveur. Asynchronous JAvascript and Xml. Le but c est que ses applications WEB ressemblent aux applications sur desktop.

14 14/35 Interface CGI (Common Gateway Interface) : rappel sur les pages dynamiques Côté du serveur : lance un programme sur le serveur programme écrit dans n importe quel langage pouvant récupérer des informations transmises par le client l affichage de ce programme (sortie standard) est envoyé sur le client : l affichage doit respecter le protocole HTTP

15 15/35 Formulaires Côté du client : ensemble de balises HTML pour la saisie d informations Champs de texte, boutons radio, liste de choix et une balise pour l envoi de ces informations (submit) envoi des informations par une requête HTTP : GET : les informations sont visibles dans l URL la commande CGI les récupère dans une variable d environnement (QUERY_STRING) POST : les informations sont envoyées sur plusieurs lignes, la commande CGI les lit sur l entrée standard en connaissant la longueur des données (CONTENT_LENGTH).

16 16/35 Appel à une page HTML <html > <head > <title >IHM </ title > </head > <body > <form name =" formulaire " method =" GET " action =" http :// localhost :12345/ index. html "> Nom : <input type =" text " name =" Nom "> <br > Prenom : < input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >

17 17/35 Appel à une commande Shell <html > <head > <title >de la Puce au Web </ title > </head > <body > <form name =" formulaire " method =" GET " action =" http :// localhost :12345/ cgi - bin / ex0. cgi "> Nom : <input type =" text " name =" Nom "> <br > Prenom : <input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >

18 18/35 Environnement de calcul d une commande variables d environnement pour un CGI : comme dans un shell nécessite que le programme de la commande CGI puisse avoir accès aux variables d environnements. bibliothèques fournies pour chaque langage : shell, Java, OCaml, Ada, Perl,...

19 19/35 Un exemple avec GET <html > <head > <title >IHM </ title > </head > <body > <form name =" formulaire " method =" GET " action =" http :// localhost :12345/ cgi - bin /ex1 - get. cgi "> Nom : <input type =" text " name =" Nom "> <br > Prenom : < input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >

20 20/35 Un exemple avec POST action =" http :// localhost :12345/ cgi - bin /ex1 - post. cg <html > <head > <title >IHM </ title > </head > <body > <form name =" formulaire " method =" POST " Nom : <input type =" text " name =" Nom "> <br > Prenom : <input name =" Prenom " ><br > <input type =" submit " value =" Valider " ><BR > </form > </body > </html >

21 21/35 Retour à AJAX L idée est de changer la page web en cherchant des données dans Internet sans recharger la page dans le browser. Mais surtout de manière asynchrone. Le but c est que les applications WEB avec AJAX ressemblent aux applications sur desktop. L échange des données dans une page avec AJAX est invisible pour l utilisateur. Javascript ouvre une connection à un serveur et charge les données (pas forcement en format XML)

22 22/35 Un exemple

23 22/35 Un exemple L échange des données est fait via le XMLHttpRequest object. L objet XMLHttpRequest doit être gardé dans une variable XMLHttpRequestObject. Si le browser est Netscape Navigator, Apple Safari, Firefox, etc. on peut créer l objet avec : XMLHttpRequestObject = new XMLHttpRequest (); Si le browser est Internet Explorer, on peut créer l objet avec : \ footnotesize XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP "); Alors de manière générale on a : var XMLHttpRequestObject = false ; if ( window. XMLHttpRequest ) { XMLHttpRequestObject = new XMLHttpRequest (); else if ( window. ActiveXObject ) { XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP ");

24 23/35 XMLHttpRequest configuration Pour ouvrir et configurer l objet XMLHttpRequest on utilise l instruction : open (" method ", " URL "[, asyncflag [, " username "[, " password " ]]]) avec method "GET", "POST",... URL la ressource. asyncflag un boolean indiquant si l appel est asynchrone ou non (la valeur par défaut est true). username optionnel. password optionnel. XMLHttpRequestObject. open (" GET ", datafile. txt );

25 24/35 Reception des données A la reception des donn des on utilise une fonction de rappel ou callback. XMLHttpRequestObject. onreadystatechange = callback () function callback () {... avec On peut aussi utiliser des fonctions anonymes : XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ;

26 25/35 Propriétés readystate et status Dans la fonction de rappel ion doit verifier si les données ont été bien chargées et s elles sont disponible pour leur utilisation. La propriété readystate : nous dit où on est avec le chargement. 0 : request not initialized 1 : server connection established 2 : request received 3 : processing request 4 : request finished and response is ready XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ;

27 26/35 Propriété status La propriété status informe sur la donnée chargée. 200 OK 201 Created 204 No Content 205 Reset Content 206 Partial Content 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 411 Length Required 413 Requested Entity Too Large 414 Requested URL Too Long 415 Unsupported Media Type 505 HTTP Version Not Supported XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ;

28 27/35 Envoie et réception de la requête Pour envoyer la requête, on utilise l instruction : XMLHttpRequestObject. send ( null ); Et pour récupérer les données, on utilise : XMLHttpRequestObject. responsetext ; Pour notre exemple, on a : var obj = document. getelementbyid ( divid );... obj. innerhtml = XMLHttpRequestObject. responsetext ;

29 28/35 En résumé <head > <title >Un exemple Ajax </ title > < script language = " javascript " >... </ script > </head > <body > <H1 >Un exemple Ajax </H1 > <form > < input type = " button " value = " Charge un message " onclick = " getdata ( datafile. txt, targetdiv )"> </form > <div id=" targetdiv "> <p > Le message va apparaitre ici! </ p > </div > </body >

30 29/35 En résumé <script language = " javascript "> var XMLHttpRequestObject = false ; if ( window. XMLHttpRequest ) { XMLHttpRequestObject = new XMLHttpRequest (); else if ( window. ActiveXObject ) { XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP "); function getdata ( datasource, divid ) { if( XMLHttpRequestObject ) { var obj = document. getelementbyid ( divid ); XMLHttpRequestObject. open ("GET ", datasource ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ; XMLHttpRequestObject. send ( null ); </ script >

31 30/35 Envoie de donnés au serveur avec GET function getdata ( datasource, divid ) { if( XMLHttpRequestObject ) { var obj = document. getelementbyid ( divid ); XMLHttpRequestObject. open (" GET ", datasource ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ; XMLHttpRequestObject. send ( null ); <form > <input type = " button " value = " Fetch message 1" onclick = " getdata ( dataresponder. cgi? data =1, targetdiv )" > <input type = " button " value = " Fetch message 2" onclick = " getdata ( dataresponder. cgi? data =2, targetdiv )" > </form >

32 31/35 Envoie de donnés au serveur avec POST function getdata ( datasource, divid, data ) { if( XMLHttpRequestObject ) { var obj = document. getelementbyid ( divid ); XMLHttpRequestObject. open (" POST ", datasource ); XMLHttpRequestObject. setrequestheader ( Content - Type, application /x-www -form - urlencoded ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { obj. innerhtml = XMLHttpRequestObject. responsetext ; XMLHttpRequestObject. send (" data=" + data ); // avec & s il y a plusieurs <form > <input type = " button " value = " Fetch message 1" onclick = " getdata ( dataresponder. cgi, targetdiv, 1)" > <input type = " button " value = " Fetch message 2" onclick = " getdata ( dataresponder. cgi, targetdiv, 2)" > </form >

33 32/35 Evaluation dynamique du code JS function getdata ( datasource ) { if( XMLHttpRequestObject ) { XMLHttpRequestObject. open (" GET ", datasource ); XMLHttpRequestObject. onreadystatechange = function () { if ( XMLHttpRequestObject. readystate == 4 && XMLHttpRequestObject. status == 200) { eval ( XMLHttpRequestObject. responsetext ); function show () { var targetdiv = document. getelementbyid (" targetdiv "); targetdiv. innerhtml = " Yep, it worked!";

34 33/35 loading XML var XMLHttpRequestObject = false ; if ( window. XMLHttpRequest ) { XMLHttpRequestObject = new XMLHttpRequest (); XMLHttpRequestObject. overridemimetype (" text / xml "); else if ( window. ActiveXObject ) { XMLHttpRequestObject = new ActiveXObject (" Microsoft. XMLHTTP "); var xmldocument = XMLHttpRequestObject. responsexml ; colors = xmldocument. getelementsbytagname (" color "); obj. innerhtml = " Here are the fetched colors : <ul >"; for ( loopindex =0; loopindex < colors. length ; loopindex ++) { obj. innerhtml += " <li >" + colors [ loopindex ]. firstchild. data + " </li >"; obj. innerhtml += " </ul >";

35 34/35 Array de XMLHttpRequest var XMLHttpRequestObjects = new Array (); function getdata1 ( datasource, divid ) { if ( window. XMLHttpRequest ) { XMLHttpRequestObjects. push ( new XMLHttpRequest ()); else if ( window. ActiveXObject ) { XMLHttpRequestObjects. push ( new ActiveXObject (" Microsoft. XMLHTTP " )); index = XMLHttpRequestObjects. length - 1; if( XMLHttpRequestObjects [ index ]) { XMLHttpRequestObjects [ index ]. open (" GET ", datasource ); var obj = document. getelementbyid ( divid ); XMLHttpRequestObjects [ index ]. onreadystatechange = function () { if ( XMLHttpRequestObjects [ index ]. readystate == 4 && XMLHttpRequestObjects [ index ]. status == 200) { obj. innerhtml = XMLHttpRequestObjects [ index ]. responsetext ; XMLHttpRequestObjects [ index ]. send ( null );

36 35/35 Références et sources Cours TER de Philippe Trebouchet Cours "de la puce au Web" d Emmanuel Chailloux Ajax : A Beginner s Guide Steven Holzner

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

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

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

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

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

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

INSA - ASI TechnoWeb : AJAX 1/40. Technologie Web AJAX. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : AJAX 1/40 Technologie Web AJAX Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : AJAX 2/40 Plan 1 Introduction 2 Fonctionnement

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Définition Présentation de JavaScript JavaScript est un langage de programmation de scripts C est un

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

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

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

Les CSS! Additif au HTML" Les Formulaires" L1 - STS - Mention Informatique - Internet et Programmation! Ph Moreau! 1!

Les CSS! Additif au HTML Les Formulaires L1 - STS - Mention Informatique - Internet et Programmation! Ph Moreau! 1! Les CSS! Avant d introduire quelques fonctionnalités du langage Javascript, nous allons compléter le langage Html avec la possibilité d afficher des objets pré-dessiné à savoir:! LES FORMULAIRES! Additif

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

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

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

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

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

Le langage Javascript

Le langage Javascript I 44 Le langage Javascript Objectif L objet de ce TP est d illustrer le langage Javascript. Dans un premier temps, nous nous attacherons à comprendre les bases de ce langage. L utilisation avancée (ie

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

Le Réseau Internet. Origine : Milieu des années 70 : réseau ARPAnet américain. Rseaux Internet - HTML p.1

Le Réseau Internet. Origine : Milieu des années 70 : réseau ARPAnet américain. Rseaux Internet - HTML p.1 Le Réseau Internet Origine : Milieu des années 70 : réseau ARPAnet américain. Rseaux Internet - HTML p.1 Le Réseau Internet Origine : Milieu des années 70 : réseau ARPAnet américain. 1987 premier réseau

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

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

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

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

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

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

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

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

Technologie de web. partie pratique. Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi

Technologie de web. partie pratique. Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi Technologie de web partie pratique Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi Plan HTML et CSS : Exercices basiques : 1 heure JavaScript : Interaction dynamique,

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Les formulaires Permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant

Plus en détail

Notion de formulaire (form)

Notion de formulaire (form) Notion de formulaire (form) Une des utilisation majeures du Web est d'échanger des informations structurées : en effet l'interprétation automatique d'un texte libre n'est pas pour demain, et aujourd'hui

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

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

Web Tier : la technologie Java Server Pages JSP

Web Tier : la technologie Java Server Pages JSP Web Tier : la technologie Java Server Pages JSP 1 / 34 Plan 1 Introduction 2 Exemples 3 Cycle de vie d une JSP 4 Utilisation et définition d une librairie de tags 2 / 34 La technologie Java Server Pages

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

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

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

Création de Sites. Introduction PHP. EEMI, Ecole Européenne des Métiers de l Internet Par Philippe Giraud

Création de Sites. Introduction PHP. EEMI, Ecole Européenne des Métiers de l Internet Par Philippe Giraud Création de Sites Introduction PHP EEMI, Ecole Européenne des Métiers de l Internet Par Philippe Giraud philippe.giraud@enseignant-eemi.com Introduction PHP PHP Hypertext Preprocessor Un langage de programmation

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

Résumé Java script. Dans une balise HTML associer un événement qui va déclencher le script

Résumé Java script. Dans une balise HTML associer un événement qui va déclencher le script Résumé Java script Les commentaires : Il y a deux manières d'écrire un commentaire. Les commentaires sur une seule ligne : ils se placent sur la fin de la ligne, après // Exemple : //commentaire Les commentaires

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

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

Javascript CESI TD-0 TD JAVASCRIPT 0. TD de dèpart de programmation en javascript

Javascript CESI TD-0 TD JAVASCRIPT 0. TD de dèpart de programmation en javascript TD JAVASCRIPT 0 TD de dèpart de programmation en javascript De quoi aurez-vous besoin? Les ressources nècessaires sont toutes disponibles gratuitement sur Internet. Il y a : Un navigateur supportant JavaScript

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

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

Vous avez dit script?

Vous avez dit script? Vous avez dit script? Le mot anglais script désigne (dans l'acception qui nous intéresse) le texte d'un film ou d'une pièce de théâtre. Un script est donc un texte destiné à être joué - comme un programme...

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

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

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

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

JAVASCRIPT. </SCRIPT> </HEAD> <BODY ONLOAD="action ( ) ;"> <a href="http://..."> allez sur le site WBC </a>

JAVASCRIPT. </SCRIPT> </HEAD> <BODY ONLOAD=action ( ) ;> <a href=http://...> allez sur le site WBC </a> Voir le chapitre 1 : introduction au langage HTML SOMMAIRE : I. Introduction au langage Java II. Déclaration et affectation des variables III. Les opérateurs IV. Les structures de contrôle I- Introduction

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

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

Fondements des bases de données Programmation en PL/SQL Oracle (1/2)

Fondements des bases de données Programmation en PL/SQL Oracle (1/2) Fondements des bases de données Programmation en PL/SQL Oracle (1/2) Équipe pédagogique BD romuald.thion@univ-lyon1.fr http://liris.cnrs.fr/~rthion/dokuwiki/enseignement:lif10/ Version du 12 février 2014

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

Chapitre 3 : Le langage HTML

Chapitre 3 : Le langage HTML Chapitre 3 : Le langage HTML 4 ème SI (TIC) I. Introduction : Le langage HTML (HyperText Markup Language) n'est pas un langage de programmation proprement dit. Il permet tout simplement de spécifier la

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

<?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

Les fondamentaux du langage Perl 5 Apprentissage par la pratique (Nouvelle édition)

Les fondamentaux du langage Perl 5 Apprentissage par la pratique (Nouvelle édition) Démarrer avec Perl 1. Caractéristiques du langage Perl 13 1.1 Les domaines d'utilisation de Perl 15 1.2 Perl 5 16 1.3 Perl 6 16 2. Mise en œuvre de Perl 17 2.1 Unix/Linux 17 2.1.1 Installation de Perl

Plus en détail

Charte graphique pour la réalisation de sites thématiques sur Internet

Charte graphique pour la réalisation de sites thématiques sur Internet Charte graphique pour la réalisation de sites thématiques sur Internet Sommaire Conventions... < 3 > Navigation... < 4 > Pages... < 5 > La page d accueil La page des liens La page des contacts Les pages

Plus en détail

framework MVC pour applications Web Servlets JSP Philippe GENOUD UJF Février 2010 1

framework MVC pour applications Web Servlets JSP Philippe GENOUD UJF Février 2010 1 framework MVC pour applications Web Servlets JSP Philippe GENOUD UJF Février 2010 1 Rappel Architecture MVC Serveur Internet (Serveur HTTP + Serveur Servlet/JSP) Serveur SGBD Requête HTTP Controleur Controleur

Plus en détail

Chapitre 4 : Les formulaires en JavaScript

Chapitre 4 : Les formulaires en JavaScript Chapitre 4 : Les formulaires en JavaScript I. Généralités 1. Présentation Sans les formulaires, les pages HTML ne proposent aucune interactivité avec l utilisateur. En effet, la page appelée est envoyée

Plus en détail

GUIDE D UTILISATION AUTHENTIFICATION OAUTH

GUIDE D UTILISATION AUTHENTIFICATION OAUTH Guide d Utilisation API Speed Data de RTE Version 2.0 GUIDE D UTILISATION AUTHENTIFICATION OAUTH Version 2.0 Date d entrée en vigueur : 08 juilllet 2016 1 SOMMAIRE 1 INTRODUCTION 2 1.1 Documents de référence...

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

Guide du programmeur. Version 2.01 Juin 2010

Guide du programmeur. Version 2.01 Juin 2010 Sogenactif Paiement Web PLUG-IN 6.15 Guide du programmeur Version 2.01 Juin 2010 1 Avertissements : Le fichier Version.txt précise l'environnement dans lequel l API a été compilée et testée. L'installation

Plus en détail

Programmation Web HTML5

Programmation Web HTML5 Programmation Web HTML5 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 1 Organisation Cours 5 séances pour 5 langages : HTML5, CSS3, PHP5,

Plus en détail

Le langage HTML. Université KASDI Merbah Ouargla Département des mathématiques & Informatique.

Le langage HTML. Université KASDI Merbah Ouargla Département des mathématiques & Informatique. Université KASDI Merbah Ouargla Département des mathématiques & Informatique Le langage HTML BELOUAAR Houcine Belouar_hocine@yahoo.fr Les formulaires L'élément permet de créer des

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

Formulaire HTML 1. Introduction. 2. Définition de formulaire. ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher»

Formulaire HTML 1. Introduction. 2. Définition de formulaire. ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher» Formulaire HTML 1. Introduction. 2. Définition de formulaire. 3. Entrée e d une d ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher 7. Bouton «Envoyer» 8. Bouton «Reset» 9. Bouton «Général»

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

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

Le JavaScript. Le JavaScript est un langage «client», c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est

Le JavaScript. Le JavaScript est un langage «client», c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est Le JavaScript JavaScript est un langage interprété par le navigateur. Le JavaScript est un langage «client», c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est chargée. Il a pour but de dynamiser

Plus en détail

Cours Web nº9 Introduction à JavaScript

Cours Web nº9 Introduction à JavaScript Introduction Cours Web nº9 Introduction à JavaScript Pierre Senellart (pierre@senellart.com) Pierre Yger (yger@unic.cnrs-gif.fr) 26 novembre et 7 décembre 2007 P. Senellart, P. Yger (IFIPS) Introduction

Plus en détail

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

Plus en détail

Environnement Client/Serveur. Cours 7 JavaServer Pages (1) kn@lri.fr

Environnement Client/Serveur. Cours 7 JavaServer Pages (1) kn@lri.fr Environnement Client/Serveur Cours 7 JavaServer Pages (1) kn@lri.fr Plan 1 Rappels sur les systèmes d'exploitations / Communication par mémoire partagée 2 Réseaux généralités, IP, UDP 3 TCP, Rappels sur

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

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

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

Chapitre 2 : Introduction au langage JavaScript

Chapitre 2 : Introduction au langage JavaScript Chapitre 2 : Introduction au langage JavaScript I. Principe de JavaScript Le langage JavaScript est un langage de script développé par les sociétés Netscapeet Sun Microsystems vers la fin de l'année 1995.Il

Plus en détail

Exercices JavaScript

Exercices JavaScript Exercices Javascript - page 1 Exercices JavaScript Auteur : E.Thirion - 07/12/2015 Ce document est extrait du site http://cours.thirion.free.fr/cours/javascript Les exercices suivants sont s fichiers à

Plus en détail