JQuery. Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "JQuery. Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36"

Transcription

1 JQuery 1/36

2 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 2/36

3 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 3/36

4 Définition Bibliothèque javascript open-source et cross-navigateur dont la première version est sortie en janvier Le principal auteur de cette bibliothèque est John Resig ( développeur d outils JavaScript pour Mozilla Corporation). Elle permet de parcourir et manipuler très facilement l'arbre DOM des pages web. JQuery permet de : Changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc. Gérer les événements javascript Faire des requêtes AJAX simplement 4/36

5 Définition JQuery n'est pas : Un substitut pour apprendre JavaScript Une réponse à tout Utilisez jquery uniquement lorsque c est nécessaire. On commence toujours par HTML+CSS avant de chercher des plug-ins jquery magiques. 5/36

6 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 6/36

7 Mise en oeuvre Téléchargeable sur le site de Jquery : <script type="text/javascript" src="jquery.js"></script> Ou directement sur Google code <script type="text/javascript" src=" min.js"> </script> 7/36

8 Mise en oeuvre jquery repose sur une seule fonction : jquery() ou $() C est une fonction JavaScript Elle accepte des paramètres Elle retourne un objet 8/36

9 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 9/36

10 Sélecteur $() (ou jquery() ) accepte : Un sélecteur CSS en argument Des ID : $('#nomid') retourne l'élément ayant pour id "nomid"(équivalent du javascript document.getelementbyid('nomid') ) Des classes : $('.maclasse') retourne tous les éléments qui correspondent à cette classe Plusieurs sélecteurs $('.nom,.prenom,. ') 10/36

11 Sélecteur Des sélecteurs spécifiques : $(':radio'), $(':header'), $(':first-child') Des sélecteurs de filtrages : $(':checked'), $(':odd'), $(':visible') $(':contains(du texte)') Des attributs $('a[href]'), $('a[href^= $('img[src$=.png]' 11/36

12 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 12/36

13 DOM Le Document Object Model (DOM) est une convention cross-platform et indépendante du langage pour représenter et interagir avec les objets dans des documents en HTML, XHTML ou XML. 13/36

14 DOM <html> <head> <title>my title</title> </head> <body> <a href>my link</a> <h1>my header</h1> </body> </html> 14/36

15 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 15/36

16 Méthodes Evénements Click Change Keypress Select Submit... Manipulations $("selecteur").evenementagerer(function() { //traitement 16/36

17 Méthodes Evénements Manipulations css attr empty prop position val text... $("selecteur").fonctiondemanipulation(valeureventuelle); 17/36

18 Les méthodes peuvent s'appliquent à tous les éléments sélectionnés $('.classe').hide(); $('.classe').show(); De nombreuses méthodes utilitaires Parcourir le DOM:.parent(),.next(),.children(),.parents() Ajouter ou retirer des classes CSS: addclass, remove- Class Manipuler: append, wrap, prepend La plupart des méthodes de l'objet retournent l'objet lui-même Il est possible de chaîner les appels $('rien').parent().find('toujours rien').show(); 18/36

19 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 19/36

20 Cacher le texte d'une DIV <html> <script type="text/javascript" src=" </script> <script type="text/javascript"> $(function() { $("#unediv").click(function() { $("#unediv").hide(); </script> <body> <div id="unediv">le texte a cacher</div> </body> </html> 20/36

21 Modifier la valeur d'un champ en fonction d'un autre <html> <script type="text/javascript" src=" </script> <script type="text/javascript"> $(function() { $("#champ1").focusout(function() { var valeurchamp1 = $("#champ1").val(); // la valeur de champ1 va dans champ2 $("#champ2").val(valeurchamp1); </script> <body> <form> <input type="text" name="champ1" id="champ1"> <input type="text" name="champ2" id="champ2"> </form> </body> </html> 21/36

22 Récupérer la valeur et le texte sélectionné d'une liste déroulante... <script type="text/javascript"> $(function() { $("#selectville").change(function() { // valeur de l'option selectionne var valeurvilleselect = $(this).val(); // texte de l'option selectionne var textevilleselect = $("#selectville option:selected").text(); // afficher une message box avec la valeur et le texte de l'option alert(valeurvilleselect+" "+textevilleselect); </script> <body> <form> <SELECT name="ville" id="selectville"> <OPTION value="paris">paris</option> <OPTION value="lemans">le Mans</OPTION> <OPTION value="souligne">souligné sous ballon</option> </SELECT> </form>... 22/36

23 Récupérer le nom et l'état d'une checkbox sur laquelle on clique... <script type="text/javascript"> $(function() { $('input[type=checkbox]').click(function() { var casechecketat = $(this).prop("checked"); // etat de la check box var casechecknom = $(this).prop("name"); // nom de la checkbox alert(casechecknom+" est "+casechecketat); </script> <body> <form> <INPUT type="checkbox" name="pomme">pomme<br> <INPUT type="checkbox" name="poire">poire<br> <INPUT type="checkbox" name="peche">peche<br> <INPUT type="checkbox" name="raisin">raisin<br> </form>... 23/36

24 Vider une liste déroulante... <script type="text/javascript"> $(function() { $('#videliste').click(function() { $('#selectville').empty(); </script> <body> <form> <SELECT name="ville" id="selectville"> <OPTION value="paris">paris</option> <OPTION value="lemans">le Mans</OPTION> <OPTION value="souligne">souligné sous ballon</option> </SELECT> <input type="button" id="videliste" value="vider la liste"> </form>... 24/36

25 Ajouter des options à une liste déroulante... <script type="text/javascript"> $(function() { $('#ajoutliste').click(function() { // ajouter a la fin $('#selectville').append($("<option>",{value : "bal"}).text("ballon")); // ajouter au debut $('#selectville').prepend($("<option>",{value : "yvr"}).text("yvre")); </script> <body> <form> <SELECT name="ville" id="selectville"> <OPTION value="paris">paris</option> <OPTION value="lemans">le Mans</OPTION> <OPTION value="souligne">souligné sous ballon</option> </SELECT> <input type="button" id="ajoutliste" value="ajouter option a la liste"> </form>... 25/36

26 Avoir la valeur et l'état du bouton radio sur lequel on vient de cliquer... <script type="text/javascript"> $(function() { $('input[name=sexe]:radio').click(function() { var valeursexe = $(this).val(); // valeur du radio bouton var etatsexe = $(this).prop("checked"); // etat du radio bouton alert(valeursexe+" est "+etatsexe); </script> <body> <form> <INPUT type="radio" name="sexe" value="f">féminin<br> <INPUT type="radio" name="sexe" value="m">masculin<br> </form>... 26/36

27 Faire disparaître tous les éléments d'un formulaire... <script type="text/javascript"> $(function() { $("#cache").click(function() { $(":input").fadeout('slow'); $("#decache").click(function() { $(":input").fadein('slow'); </script> <body> <form> <INPUT type="checkbox" name="pomme">pomme<br> <INPUT type="checkbox" name="poire">poire<br> <INPUT type="checkbox" name="peche">peche<br> <INPUT type="checkbox" name="raisin">raisin<br> <INPUT type="button" id="cache" value="faire disparaitre le formulaire"> <DIV id="decache">cliquez ici pour avoir le formulaire</div> </form>... 27/36

28 Toutes les fonctionnalités de JQuery 28/36

29 JQuery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 29/36

30 JQueryUI Des éléments interactifs draggable : pour glisser-déplacer un élément droppable : pour «déposer» un élément resizable : pour redimensionner un élément sélectable : pour sélectionner des éléments à la souris sortable : pour trier des éléments 30/36

31 JQueryUI Des Widgets accordéon autocomplétion bouton calendrier boîte de dialogue barre de progression curseur onglets 31/36

32 JQueryUI Des utilitaires position widget Effets 32/36

33 Le Widget DatePicker <html> <script type="text/javascript" src=" </script> <script type="text/javascript" src="jquery-ui customlightness/js/jquery-ui custom.min.js"></script> <script type="text/javascript" src=" <link rel="stylesheet" type="text/css" href="jquery-ui customlightness/css/ui-lightness/jquery-ui custom.css"> <script> $(function() { $( "#datepickerlightness" ).datepicker(); </script> <body> <form> <div> <p>date lightness: <input id="datepickerlightness" type="text"></p> </div> </form> </body> </html> 33/36

34 JQueryUI On peut étendre facilement jquery en utilisant des plugins Des centaines plug-ins existent, mais sont de qualité variable. Menus Galerie photo... 34/36

35 Jquery Définition Mise en oeuvre Sélecteur DOM Méthodes Exemples JQueryUI Conclusion 35/36

36 Conclusion jquery est un framework complet et facile à utiliser Bibliothèque légère à charger Simplifie la syntaxe d accès au DOM UI et nombreux plug-ins complémentaires 36/36

Cours Web - Javascript

Cours Web - Javascript Cours Web - Javascript Thierry Vaira BTS IRIS Avignon tvaira@free.fr v0.1 Objectifs Se familiariser avec le langage Javascript et acquérir une pratique minimale. Être capable d intégrer des scripts clients

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. Exemple

Plus en détail

Eclipse et quelques notions de Jquerry

Eclipse et quelques notions de Jquerry Eclipse et quelques notions de Jquerry Tout d abord, une petite présentation s impose. Eclipse est un outil de développement qui permet d éditer du code et de visualiser le résultat grâce à des émulateurs

Plus en détail

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS

FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS FORMATION CONTINUE IGSO GLOBES VIRTUELS MÉCANISMES ET APPLICATIONS MONTAGE D UNE INTERFACE SUR LA BASE DES API S GOOGLE EARTH ET GOOGLE MAPS CODE COMPLET ET COMMENTÉ DE L INTERFACE TABLE DES MATIÈRES 1.

Plus en détail

Java script. DU CMSI : Création et Maintenance des Sites Internet. Wadi TAHRI

Java script. DU CMSI : Création et Maintenance des Sites Internet. Wadi TAHRI Java script DU CMSI : Création et Maintenance des Sites Internet Plan Évolution vers le web dynamique Définition du langage JavaScript Avantages Difficultés Codage Exercices Évolution -1- Avant pages Internet

Plus en détail

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet

Programmation orientée objet et événementielle en JavaScript. Département SRC Pôle Universitaire de Vichy Bruno Bachelet Programmation orientée objet et événementielle en JavaScript Département SRC Pôle Universitaire de Vichy Bruno Bachelet PARTIE III Les événements Programmation objet et événementielle en JavaScript - SRC

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

Programmation Web Avancée JQuery

Programmation Web Avancée JQuery 1/27 Programmation Web Avancée JQuery 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

JQUERY. LI288 web et développement web

JQUERY. LI288 web et développement web JQUERY LI288 web et développement web jquery Librairie Javascript qui permet de : Simplifier les taches de base en Javascript. Accéder à des partie d'une page HTML : Utilisation d'expressions CSS ou "Xpath"

Plus en détail

L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012.

L objectif de cette étape est de se familiariser avec la création de site web sous VS 2012. L objectif de ce tutoriel est de créer un site web statique avec Visual Studio. Le site sera composé d une page HTML, une feuille de style CSS et d un fichier Javascript. Etape 1 Lancer Visual Studio L

Plus en détail

Développement Partie Cliente

Développement Partie Cliente ISI 1022 : Jean-Noël Sorenti. Année 2002/2003 Développement Partie Cliente ISI 1022 : 1 ISI 1022 : Développement Partie Cliente Le développement partie cliente concerne tout développement étant interprété

Plus en détail

Internet. jquery jquery Mobile Partie 2

Internet. jquery jquery Mobile Partie 2 Internet jquery jquery Mobile Partie 2 Olivier Pons / 2013 Objectif Jquery / jquery Mobile Sommaire 1. Fondamentaux DOM 2. jquery 3. jquery Mobile 2 / 32 1. Fondamentaux DOM - Définition Le Document Object

Plus en détail

Dom, XML, Lecture de fichiers

Dom, XML, Lecture de fichiers Projet de développement web : Développement côté client Chapitre 4 Dom, XML, Lecture de fichiers Page 1 / 11 Table des matières Table des matières Introduction DOM : Document Object Model Structure habituelle

Plus en détail

Table des matières. TP Ajax. Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion...

Table des matières. TP Ajax. Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion... Table des matières Séquence 1 L'objet XMLHttpRequest...2 Séquence 2 L'API jquery...3 Séquence 3 XML...4 Séquence 4 L'auto complétion...7 Bibliographie : http://fr.wikipedia.org/wiki/asynchronous_javascript_and_xml

Plus en détail

M2202 Algorithmique TD 5 : Une bannière animée interactive

M2202 Algorithmique TD 5 : Une bannière animée interactive M2202 Algorithmique TD 5 : Une bannière animée interactive Nous verrons dans ce TD comment : enchainer une suite d'images en fondu dans une bannière ; afficher une image spécifique de cette bannière par

Plus en détail

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

TP JAVASCRIPT OMI4 jquery et ses Plungins

TP JAVASCRIPT OMI4 jquery et ses Plungins TP JAVASCRIPT OMI4 jquery et ses Plungins Objectifs de ce TP : découvrir quelques exemples d utilisation de la bibliothèque jquery et également quelques plugins. Exercice 1 : gestion d un bouton rollover

Plus en détail

FORMATION À JQUERY. Thomas Morin Mai 2012

FORMATION À JQUERY. Thomas Morin Mai 2012 FORMATION À JQUERY Mai 2012 Introduction La bibliothèque JavaScript libre jquery Utilise JavaScript de façon facultative et non-intrusive Dans le header, on appelle la librairie jquery, des fonctions personnalisées,

Plus en détail

https://angularjs.org/ Gilles Landais -AngularJS 1

https://angularjs.org/ Gilles Landais -AngularJS 1 https://angularjs.org/ 1 Présentation Le Framework AngularJS https://angularjs.org/ Framework javascript depuis 2009 Aujourd'hui (wikipedia) le framework est utilisé dans >8,400/1,000,000 sites web Open-source

Plus en détail

Programme jquery / Dojo Professionnel

Programme jquery / Dojo Professionnel Programme jquery / Dojo Professionnel Déclaration d'activité enregistrée sous le n 52 44 06789 44 auprès du Préfet de région des Pays de la Loire. Format du cours :Plate-forme d apprentissage numérique

Plus en détail

Présentation. Les surnoms de JS. Historique. Programmation Web

Présentation. Les surnoms de JS. Historique. Programmation Web Présentation Programmation Web JavaScript Jean-Christophe Deneuville jean-christophe.deneuville@xlim.fr Historique JavaScript est un langage reprenant quelques éléments de syntaxe de Java On l intègre

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Arbres Expressions Mathématiques Structure arborescente de l expression

Plus en détail

TD/TP11 - Réseaux. Question : Représenter le protocole téléphonique sous la forme d un diagramme temporel.

TD/TP11 - Réseaux. Question : Représenter le protocole téléphonique sous la forme d un diagramme temporel. Université de Bretagne Occidentale UFR Sciences Département d Informatique Licence STS, 2005-2006 L1, S1, Parcours A-IMP Introduction à l informatique TD/TP11 - Réseaux 1 Travaux Dirigés Exercice 1 Des

Plus en détail

Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite

Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite Prog. Web TP2 Année universitaire 2012 2013 - Formulaires - suite 1 INSCRIPTION À UN SITE On suppose que l'inscription à un site offre de nombreux avantages. Pour s'inscrire à ce site il faut saisir :

Plus en détail

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014

Le langage JavaScript TD N 3. Module IntegWEB MMI 1 2013/2014 1 Le langage JavaScript TD N 3 Module IntegWEB MMI 1 2013/2014 Jeu les tables de multiplication 2 Code HTML 3 apprendre les tables de multiplication

Plus en détail

Cross plate-forme. HTML5 and CSS3 The Standards for Writing Applications. fcamps@laas.fr P5

Cross plate-forme. HTML5 and CSS3 The Standards for Writing Applications. fcamps@laas.fr P5 HTML5 and CSS3 The Standards for Writing Applications Fragmentation due to the growing number of mobile operating systems Multiple Teams/Products Feature Fragmentation Les fonctionnalités et capacités

Plus en détail

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2

jquery Mobile La bibliothèque JavaScript pour le Web mobile Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 jquery Mobile La bibliothèque JavaScript pour le Web mobile É r i c S a r r i o n Avec la contribution de Thomas Ber tet Groupe Eyrolles, 2012, ISBN : 978-2-212-13388-2 Table des matières PREMIÈRE PARTIE

Plus en détail

Développer avec jquery Mobile Première Édition. Table des matières

Développer avec jquery Mobile Première Édition. Table des matières Table des matières 1.Introduction au Framework...5 1.1. jquery au cœur de l'internet Mobile...5 1.2. Découvrir Le Framework...6 1.2.1 Installation de jquery Mobile...6 1.2.2 Une première application...7

Plus en détail

Black Bear CMS www.bbcms.fr mars 2012 Copyright 2012 Olivier Blais. Guide de développement

Black Bear CMS www.bbcms.fr mars 2012 Copyright 2012 Olivier Blais. Guide de développement Black Bear CMS www.bbcms.fr mars 2012 Copyright 2012 Olivier Blais Guide de développement Sommaire Variables templates... 3 Script code... 5 Classes... 6 Fonctions... 7 Variables d applications... 9 Validator

Plus en détail

Les formulaires, le langage JavaScript

Les formulaires, le langage JavaScript Les formulaires, le langage JavaScript Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/ 1 / 45 Plan 1 Les formulaires en HTML 2 Le noyau du JavaScript Les

Plus en détail

Module 133 Développer des application Web

Module 133 Développer des application Web Module 133 Développer des application Web Validation des formulaires Lab #5 et #6 Version 0.1 EPAI / Frédéric Free Powerpoint Mauron Templates Page 1 Introduction Les formulaires HTML sont omnis présents

Plus en détail

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS

Programmation Tablette. Dominique Rossin Cours 1 - HTML / CSS Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Objectifs Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr

Cours HTML/PHP. Cours HTML/PHP. E.Coquery. emmanuel.coquery@liris.cnrs.fr Cours HTML/PHP E.Coquery emmanuel.coquery@liris.cnrs.fr Pages Web Pages Web statiques Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis son navigateur. Adresse tapée, clic

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

Guide d intégration des marques grises Destineo

Guide d intégration des marques grises Destineo Guide d intégration des marques grises Destineo Guide d intégration des marques grises service Présentation du Document élaboré par : 1, rue de la Loire 44 966 Nantes Cedex 9 Tél. +33 (0)2 28 20 50 00

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

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document

Examen d'informatique module INF112. 1ère session 2003-2004. sans calculatrice, sans document Examen d'informatique module INF112 1ère session 2003-2004 sans calculatrice, sans document Le barème est indicatif Sauf indiqué contraire, dans les questions à choix multiples, il peut (ou non) y avoir

Plus en détail

Master Class OL3 Documentation

Master Class OL3 Documentation Master Class OL3 Documentation Version 2.0 Éric Lemoine, Camptocamp 10 April 2014 Table des matières 1 Exercices élémentaires 3 1.1 Exercice élémentaire 1.......................................... 4 1.2

Plus en détail

96 Feuilles de style en cascade

96 Feuilles de style en cascade Microsoft Expression Web (version 2) 96 Feuilles de style en cascade Définir les styles Dans la création de pages Web valides, un principe fondamental apparaît : le contenu doit être séparé de sa présentation.

Plus en détail

I Installation de EasyPHP 1.8

I Installation de EasyPHP 1.8 Administration de réseau Le protocole SNMP I Installation de EasyPHP 1.8 Cédric Humbert Page 1/8 L endroit où l on déposera nos dossiers contenant les fichiers html sera : C:\Program Files\EasyPHP1-8\www

Plus en détail

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration

Pages Web statiques. LIF4 - Initiation aux Bases de données : PHP. Pages Web dynamiques. Illustration. Illustration statiques LIF4 - Initiation aux Bases de données : E.Coquery emmanuel.coquery@liris.cnrs.fr http ://liris.cnrs.fr/ ecoquery Principe de fonctionnement : L utilisateur demande l accès à une page Web depuis

Plus en détail

IceCube.Net. Explicatif technique. Version 1.0

IceCube.Net. Explicatif technique. Version 1.0 IceCube.Net Explicatif technique Version 1.0 Structure IceCube.Net IceCube.Net est structurée de la même manière que des serveurs de type Solaris/Unix soit l arborescence suivante : ROOT _bin _htdocs _scripts

Plus en détail

TD 3 : Intégration HTML

TD 3 : Intégration HTML Programmation Web IMAC 2015-2016 TD 3 : Intégration HTML 14 octobre 2015 Objectif: Ce TD a pour but de se servir des concepts appris dans les TDs précédents pour intégrer entièrement une maquette de site

Plus en détail

Paris Web Ateliers Les bibliothèques JS jquery

Paris Web Ateliers Les bibliothèques JS jquery Paris Web 2007 - Ateliers Les bibliothèques JS jquery Orange Labs Julien Wajsberg, Recherche & Développement 17/11/2007, présentation à Paris Web 2007

Plus en détail

Langage (X)HTML Damien Nouvel

Langage (X)HTML Damien Nouvel Langage (X)HTML Plan Quelques statistiques du web Architecture client / serveur Langage XML Mise en forme HTML Structure d'un document HTML 2 / 36 Plan Quelques statistiques du web Architecture client

Plus en détail

Pour écrire des scripts Javascript, vous devez utiliser votre éditeur HTML en mode Source ou HTML et non en mode Normal.

Pour écrire des scripts Javascript, vous devez utiliser votre éditeur HTML en mode Source ou HTML et non en mode Normal. Premier script à faire soi même Il faut bien débuter un jour, alors allons y! Avec un script simplissime : alert("c'est mon 1er script"); Ce qui a pour effet d afficher un message d alerte : Votre éditeur

Plus en détail

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs

Plus en détail

Créer un modèle pour Joomla 1.5

Créer un modèle pour Joomla 1.5 Créer un modèle pour Joomla 1.5 Dans le dossier templates de Joomla, créer un nouveau dossier au nom du modèle (lettres-chiffres-tirets, éviter caractères accentués et spéciaux) Dans ce dossier template/nom_du_modèle,

Plus en détail

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6

Éric Sarrion. JQuery 1. 7. & JQuery UI. 2 e édition. Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Éric Sarrion JQuery 1. 7 & JQuery UI 2 e édition Groupe Eyrolles, 2011, 2012, ISBN : 978-2-212-13504-6 Avant-propos Dernier né des frameworks JavaScript, jquery a immédiatement séduit les développeurs

Plus en détail

PHP. Olivier Aubert 1/24

PHP. Olivier Aubert 1/24 PHP Olivier Aubert 1/24 Introduction PHP = Hypertext PreProcessor Site officiel : http://www.php.net Créé en 1994 par Rasmus Lerdorf (Personal Home Page Tool) 1995 : ajout de la gestion des formulaires

Plus en détail

Séance d Exercices Dirigés HTML et JavaScript

Séance d Exercices Dirigés HTML et JavaScript Séance d Exercices Dirigés HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: 2) Par la suite on veut un document composé de deux frames, l'une nommée

Plus en détail

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs

Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Licence STIC IUT de Marne-la-Vallée 12/03/2015 Cours de jquery Cours 1 Premiers pas avec jquery : sélecteurs et modifieurs Philippe Gambette Organisation pratique Contact - Courriel : philippe.gambette@gmail.com

Plus en détail

Validation de l item 4.5 : 4-5 Chercher et identifier l origine de la publication en utilisant au besoin le code source, pour exploiter un document.

Validation de l item 4.5 : 4-5 Chercher et identifier l origine de la publication en utilisant au besoin le code source, pour exploiter un document. Validation de l item 45 : document Sommaire Origine d'un page HTML Origine d'un document Word 1/2 Origine d'un document Word 2/2 Origine d'un site web Ressources Validation de l item 45 : document Origine

Plus en détail

NFA016 : Les formulaires. Les formulaires. Les formulaires (exemple)

NFA016 : Les formulaires. Les formulaires. Les formulaires (exemple) O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Les balises: NFA016 : Les formulaires Les formulaires form : début de formulaire input : différents types de bouton et zone de saisie textarea

Plus en détail

Exercices d application. Lab. JavaScript

Exercices d application. Lab. JavaScript Exercices d application Lab JavaScript l'instruction write() Directives :calcul du carré d un nombre Implémenter le JavaScript présenté en cours fonction de calcul du carré d un nombre dans un fichier

Plus en détail

UNIVERSITE BLAISE PASCAL CLERMONT-FERRAND II

UNIVERSITE BLAISE PASCAL CLERMONT-FERRAND II UNIVERSITE BLAISE PASCAL CLERMONT-FERRAND II Service des concours 34 avenue Carnot 63000 Clermont-Ferrand Concours EXTERNE BAP E Corps : Assistant Ingénieur Spécialité : Développeur, intégrateur d applications

Plus en détail

JavaScript: Introduction

JavaScript: Introduction Le Langage JavaScript 1 JavaScript: Introduction Javascript permet de rendre dynamique un site internet développé en HTML. Javascript permet de développer de véritables applications fonctionnant exclusivement

Plus en détail

Le HTML. Structure de Base... 2

Le HTML. Structure de Base... 2 Le HTML Structure de Base... 2 Balise ... 2 Balise ... 2 Autres balises de mise en forme du texte... 2 Balise ... 2 Balise ... 3 Balise ... 3 ...

Plus en détail

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout!

Table des matières. JavaScript. Exemples. À quoi ça sert? À quoi ça sert? Présentation. Exemple 1. 1ère partie. Js partout! JavaScript M4103C - Programmation Web client riche Table des matières À quoi ça sert? 2ème année - S4, cours - 1/5 2014-2015 Présentation Exemple 1 Marcel Bosc Exemple 2 Département informatique 1ère partie

Plus en détail

Dreamweaver CC pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CC pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Le Creative Cloud d Adobe 9 Interface de conception

Plus en détail

STRUCTURE D UNE PAGE HTML/CSS

STRUCTURE D UNE PAGE HTML/CSS STRUCTURE D UNE PAGE HTML/CSS C01 1. STRUCTURE Le langage Html est composé de balises ou (tags) qui permettent de structurer le texte, de le mettre en forme et d insérer des images. Ces instructions sont

Plus en détail

Programmation Web IMAC 2015-2016 TD 8 : API. 25 novembre 2015

Programmation Web IMAC 2015-2016 TD 8 : API. 25 novembre 2015 Programmation Web IMAC 2015-2016 TD 8 : API 25 novembre 2015 Objectif: Ce TD a pour but d introduire les APIs, avec plusieurs exemples, et voir comment les utiliser pour récupérer des données depuis des

Plus en détail

Formulaire de contact avec Xtreme Web Designer

Formulaire de contact avec Xtreme Web Designer Formulaire de contact avec Xtreme Web Designer Pour faire un formulaire avec Xtreme Web Designer, j'utilise 5 pages, vous n'êtes pas obligé, en effet 2 pages peuvent suffir mais c'est moins jolie. Donc

Plus en détail

Table des matières. Introduction... Prérequis du livre... Code source... IX XI XI

Table des matières. Introduction... Prérequis du livre... Code source... IX XI XI Table des matières III Table des matières Introduction... Prérequis du livre... Code source... IX XI XI 1. Conception d une application Windows Store... 1 Structure d une application Windows Store... 2

Plus en détail

Créer des documents pour le projet «Ermitage» : catalogue de modèles et de maquettes 1 de documents disponibles

Créer des documents pour le projet «Ermitage» : catalogue de modèles et de maquettes 1 de documents disponibles Créer des documents pour le projet «Ermitage» : catalogue de modèles et de maquettes 1 de documents disponibles Développer le projet «Ermitage», c est créer des documents et les organiser en salles. Ce

Plus en détail

Manuel d utilisation de la personnalisation avancée des pages web

Manuel d utilisation de la personnalisation avancée des pages web Manuel d utilisation de la personnalisation avancée des pages web Version 1.B Payline PROPRIETAIRE Page 1/15 Version du modèle : DocStd_50 Page des évolutions Le tableau ci-dessous liste les dernières

Plus en détail

Publication (avancée) de données spatiales dans Internet

Publication (avancée) de données spatiales dans Internet Publication (avancée) de données spatiales dans Internet GMT-4152 & GMT-6006 Capsule 2 Frameworks Javascript, jquery & MapQuery Thierry Badard & Frédéric Hubert Université Laval, Dép. des sciences géomatiques

Plus en détail

Tutoriel sur les bases de HTML et de PHP

Tutoriel sur les bases de HTML et de PHP Tutoriel sur les bases de HTML et de PHP Cours : Inf7214 Développement de logiciel Date : Hiver 2009 Ce tutoriel vous donne un aperçu du développement d application WEB avec les langages HTML et PHP. Vous

Plus en détail

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5

Éric Sarrion. JQuery. & JQuery UI. Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 Éric Sarrion JQuery & JQuery UI Groupe Eyrolles, 2011, ISBN : 978-2-212-12892-5 11 Onglets Les pages HTML comportant des onglets (tabs) sont devenues courantes dans les sites web actuels. Elles permettent

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

Une rapide introduction à HTML / CGI

Une rapide introduction à HTML / CGI Une rapide introduction à HTML / CGI Patrick Fuchs Université Paris 7 Equipe de Bioinformatique Génomique et Moléculaire PLAN 1. Généralités 2. Les Bases d HTML 3. Outils HTML avancés 4. HTML dynamique

Plus en détail

Cours HTML pour débutant

Cours HTML pour débutant Cours HTML pour débutant Guilhem PAROUX 09-10 Mai 2007 I. FONCTIONNEMENT CLIENT-SERVEUR... 3 II. STRUCTURE D UN SITE WEB... 4 III. LE LOGICIEL NVU... 4 IV. METTRE EN LIGNE AVEC LE CLIENT FTP "FILEZILLA"...

Plus en détail

Liste des modules CMS SIGI

Liste des modules CMS SIGI Liste des modules CMS SIGI Document descriptif des modules CMS 6, rue de l Etang, L-5326 Contern Tél. : +352 35 00 99-1 contact@sigi.lu BP 63, L-5201 Sandweiler TVA : LU 13753429 www.sigi.lu Historique

Plus en détail

Séances 4a/4b Technologies du Web

Séances 4a/4b Technologies du Web Formations en Informatique de Lille 2012/2013 Séances 4a/4b Technologies du Web février 2013 Javascript Exercice 1 : Préalable : mise en place des outils Pour ce premier exercice, nous allons utiliser

Plus en détail

Introduction au framework Javascript EXT JS

Introduction au framework Javascript EXT JS Introduction au framework Javascript EXT JS Par Gilles Février (http://gfevrier.kelio.org/blog) VERSION 1.0 (Mai 2014) 1 / 14 Sommaire SOMMAIRE Introduction... 3 Présentation rapide du framework javascript

Plus en détail

LE LANGAGE JAVASCRIPT

LE LANGAGE JAVASCRIPT LE LANGAGE JAVASCRIPT TODO : - v.2.0.0 06/05/200 peignotc(at)arqendra(dot)net / peignotc(at)gmail(dot)com Toute reproduction partielle ou intégrale autorisée selon les termes de la licence Creative Commons

Plus en détail

CIM120. Http:// (Creation Web) Page 1

CIM120. Http:// (Creation Web) Page 1 CIM120 Http:// (Creation Web) Page 1 Organisation du module CIM120 Evaluation: 1 eval sur table 1 eval des TP Page 2 Le Web: un peu d'histoire D'Arpanet à Internet... http://fr.wikipedia.org/wiki/histoire_d'internet

Plus en détail

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques.

Les objectifs de ce tp sont d être capable d intégrer des scripts clients dans un site ou une page en respectant les bonnes pratiques. TP Javascript 2013 tv - v.1.0 Sommaire Séquence n 1 : les bases 2 Insertion de code javascript..................................... 2 Exercice n 1.1 : code javascript interne au document.......................

Plus en détail

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

LES FORMULAIRES. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr LES FORMULAIRES Permet de récupérer les informations saisies par l'internaute sur votre site Nécessite un traitement des données : php mail

Plus en détail

Introduction à XML. 1. Notions de base. Introduction à XML

Introduction à XML. 1. Notions de base. Introduction à XML Introduction à XML INTRODUCTION À XML 1. NOTIONS DE BASE 2. EXEMPLE SIMPLE 3. SYNTAXE XML 3.1. LES CARACTÈRES SPÉCIAUX 4. DTD 5. DOCUMENT XML AVEC FEUILLE DE STYLE CSS 6. XLS ET XSLT 6.1. EXEMPLE DE DOCUMENT

Plus en détail

ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1

ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 ALGORITHMIQUE PROGRAMMATION INTERNET - NIVEAU 1 Code NFA053, 6 ECTS Chapitre 05 HTML / LES FORMULAIRES Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une

Plus en détail

//////////////////////////////////////////////////////////////////// Développement Web

//////////////////////////////////////////////////////////////////// Développement Web ////////////////////// Développement Web / INTRODUCTION Développement Web Le développement, également appelé programmation, désigne l'action de composer des programmes sous forme d'algorithme (codage).

Plus en détail

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

Plus en détail

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS

Objectifs. Programmation Tablette. Journée type. Organisation. Dominique Rossin Cours 1 - HTML / CSS Objectifs Programmation Tablette Dominique Rossin Cours 1 - HTML / CSS Comprendre le fonctionnement d une application Web Comprendre le fonctionnement d une application Smartphone Programmer et déployer

Plus en détail

Conception de sites web : examen final

Conception de sites web : examen final Conception de sites web : examen final Jean-Baptiste.Vioix@u-bourgogne.fr 17 février 2006 Nom : Prénom : 1 Questions de cours (4 pts) Pour les questions de cours, rayez la ou les réponses fausses. 1.1

Plus en détail

Autres technologies XML. Plan. XML et la sécurité. Cryptage XML. Signatures XML. Vincent Quint

Autres technologies XML. Plan. XML et la sécurité. Cryptage XML. Signatures XML. Vincent Quint Autres technologies XML Vincent Quint INRIA Rhône Alpes École d été CEA INRIA EDF juin 2003 Plan 1. XML et la sécurité 2. Liens hypertexte : XLink 3. Inclusions XML 4. Formulaires XML : XForms 5. Événements

Plus en détail

TECHNIQUE DE CONSTRUCTION D UN MODULE

TECHNIQUE DE CONSTRUCTION D UN MODULE TECHNIQUE DE CONSTRUCTION D UN MODULE Pilotage Infographie Description générale Romuald LORTHIOIR Stéphane RIO Aurélie PASSILLY Date de création du document 20 nov. 2006 Version 1.1 Validation pour le

Plus en détail

Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement

Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement Gestion des images Ceci est une documentation préliminaire, traduite par Christine Dubois (Agilcom) et sujette à changement Ce chapitre vous montre comment ajouter et afficher des images dans un site Web

Plus en détail

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles

jquery Mobile (HTML5, CSS3, JavaScript) Développez vos applications Web mobiles Caractéristiques du Web mobile 1. Définition du Web mobile 13 2. Un marché en expansion 15 2.1 Multiples fabricants de smartphones et tablettes 15 2.2 Multiples OS 15 2.3 Multiples navigateurs 17 2.4 Évolutions

Plus en détail

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design

Bootstrap 3 pour l'intégrateur web CSS et Responsive Web Design Chapitre 1 : Introduction A. Le développement des sites Web 14 B. Les fonctionnalités de Bootstrap 14 C. La compatibilité avec les navigateurs 15 D. Télécharger les exemples 15 Chapitre 2 : Installer Bootstrap

Plus en détail

Exercices et corrections. Licence QCI - module O21

Exercices et corrections. Licence QCI - module O21 Exercices et corrections Licence QCI - module O21 Exercice 1 Ecrivez le squelette d une page avec les caractéristiques suivantes - encodage : utf-8 - titre de la page : première page XHTML - auteur : vous

Plus en détail

L environnement multi fenêtré

L environnement multi fenêtré Interffaces pour le Web L environnement multi fenêtré Une application s exécutant dans le cadre d un browser Web démarre généralement depuis un lien hypertexte ou un signet stocké dans le bookmark. La

Plus en détail

XSL Langage de transformation de XML. Approfondissements

XSL Langage de transformation de XML. Approfondissements XSL Langage de transformation de XML Approfondissements http://www.zvon.org/xxl/xsltreference/output/index.html Retour sur les modèles (template) Une feuille de style peut contenir plusieurs modèles Chaque

Plus en détail

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP

Introduction à PHP. Formulaires HTML et PHP, interactions avec le client. monnerat@u-pec.fr. 6 avril 2015. IUT de Fontainebleau. Introduction à PHP Formulaires HTML et PHP, interactions avec le client IUT de Fontainebleau 6 avril 2015 1 Formlaire et traitement 2 Texte Cases à cocher Listes Upload de fichiers Sommaire Formlaire et traitement 1 Formlaire

Plus en détail

Introduction http://www.mediaforma.com/

Introduction http://www.mediaforma.com/ Ce livre est un concentré de code HTML5 et CSS3 prêt à l emploi 1. Il se divise en seize chapitres thématiques. Vous êtes un développeur de niveau intermédiaire ou avancé? Vous y trouverez de nombreux

Plus en détail

Introduction http:// www.mediaforma.com/formation-html5-et-css3

Introduction http:// www.mediaforma.com/formation-html5-et-css3 Introduction Ce livre est un concentré de code HTML5 et CSS3 prêt à l emploi 1. Il se divise en seize chapitres thématiques. Vous êtes un dévelop peur de niveau intermédiaire ou avancé? Vous y trouverez

Plus en détail

MODIFICATIONS ET CREATIONS OSCOMMERCE POUR ICI RELAIS

MODIFICATIONS ET CREATIONS OSCOMMERCE POUR ICI RELAIS MODIFICATIONS ET CREATIONS OSCOMMERCE POUR ICI RELAIS Objectif : Le but de ce document est d expliquer les fonctions de chaque nouveau fichier propre au module de livraison ICI relais. Il reprend également

Plus en détail

Projet Covoiturage TP 1

Projet Covoiturage TP 1 Projet Covoiturage TP 1 Description du thème Ce TP est le premier d une série mettant en œuvre le développement mobile en utilisant la bibliothèque jquery Mobile. Propriétés Description Intitulé long Formation

Plus en détail

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML

PROGRAMMATION HTML. Baccalauréat S -Spécialité ISN. Objectifs. Prérequis. Du code à la page. 4.3 : Langages de programmation : langage HTML PROGRAMMATION HTML Baccalauréat S -Spécialité ISN 4.3 : Langages de programmation : langage HTML Objectifs L'élève doit être capable o de créer une page WEB en langage HTML o d'analyser une page WEB en

Plus en détail

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C

Dreamweaver CS6 pour PC/Mac Pour des sites full CSS conformes aux standards du W3C Introduction L'Internet aujourd'hui 7 Le World Wide Web Consortium et les standards 7 Les logiciels de conception de sites web 7 L'objectif du livre 8 Interface de conception L'environnement système 9

Plus en détail