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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcription

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

2 Jeu les tables de multiplication 2

3 Code HTML 3 <b>apprendre les tables de multiplication</b><br><br> <table > <tr> <td> <input type="text" id="temps" value="0" size=2 style="text-align:center;"/> S <br> </td> <td></td> <td> <input type="text" id="compteur" value="0" size=2 style="text-align:center;"/> Points <br> </td></tr><tr> <td> <input type="text" id="a" value="0" size=2 style="text-align:center;"/> X <br> </td> <td> <input type="text" id="b" value="0" size=2 style="text-align:center;"/> = <br> </td> <td> <input type="text" id="r" value="0" size=2 style="text-align:center;"/> résultat <br> </td> </tr> <tr> <td> <button class="bouton" onclick="start();"> START </button> </td> <td></td> <td> <button class="bouton" onclick="verif();"> VALIDER </button> </td> </tr> </table> <br/> <div class="fondbarre"> <div class="barre" id="barre"> </div> </div> <br/> <div id="afficheur" class="afficheur"> </div> </div>

4 Tirage aléatoire des nombres 4 Ecrire une fonction : NombreAlea() retournant un nombre entier de 1 à 9 Pour mémoire : Math.random() [ [ function NombreAlea(){ return Math.floor(Math.random()*9) + 1;

5 Fonction démarrage du jeu 5 Ecrire une fonction de démarrage : function Start() qui assure l initialisation du jeu, soit : -Tirage aléatoire des deux premiers nombres et affichage dans les champs respectifs. - initialisation des variables globales de comptage du temps et des points. (temps=60, points=0) - initialisation des affichages - initialisation d un timer nécessaire à la gestion du chronomètre. (appel de la fonction AfficheTemps() toutes les secondes). Cette fonction est appelée par la bouton START.

6 Fonction Start() 6 function Start(){ // nombre aléatoire 1 $("A").value = NombreAlea(); // nombre aléatoire 2 $("B").value = NombreAlea(); // initialisation des variables compteur = 0; temps = 60; // initialisation des affichages $('compteur').value = compteur; $('temps').value = temps; // initialisation du timer T1 = setinterval("affichetemps()",1000);

7 Gestion du temps 7 Ecrire la fonction AfficheTemps() appelée toutes les secondes qui assure le décomptage et l affichage du temps. Cette fonction doit également détecter la fin du jeu, arrêter le timer et afficher un message dans la zone d'affichage indiquant la fin du jeu.

8 Fonction AfficheTemps() 8 function AfficheTemps(){ // évolution de la variable temps temps--; // Affichage du temps $('temps').value = temps; // test de la fin du jeu if (temps == 0){ // fin du jeu // arrêt du timer clearinterval(t1); $('afficheur').innerhtml = "Fin du jeu!!!";

9 Evaluation des résultats 9 Ecrire la fonction Verif() qui assure le contrôle du résultat proposé par le joueur lorsqu'il clic sur le bouton VALIDER. Si le résultat est correct la fonction incrémente le nombre de points et les affiches dans le champ correspondant, puis relance un nouveau tirage pour A et B. Si le résultat est faux un message d'alerte est affiché dans la zone d'affichage

10 Fonction Verif() 10 function Verif(){ // on récupère les valeurs var A = $('A').value; var B = $('B').value; // Calcul du résultat de la multiplication var Res = A * B; if ($('R').value == Res) { // Comparaison du résultat calculé avec la valeur proposée par le joueur // C'est juste else { compteur++; // mise à jour du compteur de point $('compteur').value = compteur; // nombre aléatoire 1 $("A").value = NombreAlea(); // nombre aléatoire 2 $("B").value = NombreAlea(); // C'est faux : message d'alerte $('afficheur').innerhtml = "FAUX";

11 Manipulation du code CSS 11 Quelques rappels sur le CSS CSS est l'abréviation de Cascading Style Sheets, c'est un langage qui permet d'éditer l'aspect graphique des éléments HTML et XML. Il est possible d'éditer le CSS d'un seul élément comme nous le ferions en HTML de la manière suivante : <div style="color:red;"> Le CSS de cet élément est modifié avec l'attribut STYLE. Le texte est de couleur rouge. </div> <style type="text/css"> feuille de style div { color: red; </style> Code HTML : <div > Un texte rouge </div> <div style="color:green;">le texte est vert et pas rouge </div> L'attribut style est prioritaire sur la feuille de style

12 Manipulation du code CSS 12 Comment éditer les styles CSS d'un objet? On peut à l'aide de JavaScript affecter une valeur à une propriété CSS de l'attribut style de tous les objet d'une page HTML. Exemple : Objet.style.color = 'red'; Objet.style.top = '150px'; ATTENTION : il faut impérativement indiquer l'unité de la valeur (ex px). Exemple si on utilise une variable var Objet = document.getelementbyid ("Div1" ); var PositionX = 100; var PositionY = 50; Objet.style.top = PositionY + 'px'; Objet.style.left = PositionX + 'px'; Exo : écrire une fonction Position_Taille_Div( Id, X, Y, Largeur, Hauteur ). Remarque : la div possède la propriété position:absolute

13 Manipulation du code CSS 13 fonction Position_Taille_Div( Id, X, Y, Largeur, Hauteur ) { var objet = document.getelementbyid("id"); objet.style.top = Y + "px"; objet.style.left = X + "px"; objet.style.width = Largeur + "px"; objet.style.height = Hauteur + "px";

14 Manipulation du code CSS 14 Comment accède-t-on à une propriété CSS qui possède un nom composé? Exemple : la propriété CSS background-color objet.style.background-color = "blue"; NE FONCTIONNE PAS! SOLUTION : 1 : on supprime le tiret 2 : La première lettre du mot suivant le tiret passe en majuscule objet.style.backgroundcolor = "blue";

15 Manipulation du code CSS 15 Comment lire les propriétés CSS? <style type="text/css"> #D1 { background-color: orange; </style> Démo <div id="d1">je possède un fond orange.</div> <script> var LaDiv = document.getelementbyid("d1"); alert('selon le Javascript, la couleur de fond de ce <div> est :[ ' + LaDiv.style.backgroundColor +']'); </script>

16 Manipulation du code CSS 16 Comment lire les propriétés CSS? <style type="text/css"> #D1{ background-color: blue; </style> Démo <div id="d1" style="background-color:orange" >Je possède un fond orange.</div> <script> var LaDiv = document.getelementbyid("d1"); alert('selon le Javascript, la couleur de fond de ce <div> est :[ ' + LaDiv.style.backgroundColor + ']'); </script>

17 Manipulation du code CSS 17 Récupérer le propriétés CSS Pour récupérer une propriété CSS d'un objet JavaScript propose la fonction getcomputedstyle() Exemple : <style type="text/css"> #text { color: red; </style> <span id="text"></span> <script> var letext = document.getelementbyid('text'), color = getcomputedstyle(letext, null).color; alert(color); </script>

18 Manipulation du code CSS 18 Problème de compatibilité en les navigateurs La méthode getcomputedstyle() n'est pas supporté par les version antérieur à ie9! IE propose la propriété currentstyle Exemple : <style type="text/css"> #text { color: red; </style> <span id="text"></span> <script> var text = document.getelementbyid('text'), color = text.currentstyle.color; alert(color); </script>

19 Manipulation du code CSS 19 Problème de compatibilité entre les navigateurs On souhaite gérer le problème de compatibilité des navigateurs en créant une fonction qui remplace les deux fonctions ci-dessus. Ecrire une fonction qui retourne un objet donnant accès aux propriétés de style CSS function Style_CSS(Id){ Exemple d'utilisation de la fonction : var couleur = Style_CSS("D1").backgroundColor;

20 Manipulation du code CSS 20 Problème de compatibilité en les navigateurs function Style_CSS(Id){ // Récupération d'une référence sur l'objet concerné Var Objet = document.getelementbyid(id); // détection de la fonction de lecture disponible If (Objet.currentStyle) { // cas de IE <9 return Objet.currentStyle; else { // cas chrome, Firefox... return getcomputedstyle(objet,null); Ecrire une fonction qui déplace de 10 pixels vers la droite une div

21 Manipulation du code CSS 21 Déplacement d'une div Démo function Droite(){ // lecture de la propriété left et conversion en entier var position = parseint( Style_CSS("D1").left ); // modification position _$("D1").style.left = (position + 10) + 'px';

22 Manipulation du code CSS 22 Modification de la classe d'un objet Exemple : <style>.maclasse { Color : red; </style> Démo <body> <p class="maclasse" > texte en rouge </p> </body> ATTENTION : pour modifier la class d'un objet avec JavaScript il faut modifier la propriété classname. Ecrire une fonction qui change la classe d'un objet : function ChangeClasse(Id,NomClasse);

23 Barre de progression 23 On souhaite afficher graphiquement l'écoulement du temps à l'aide d'une barre de progression. On ajoute une balise div permettant d'afficher une barre. Attention il faut associer à cette div du code CSS pour définir les dimensions, la couleur... Exemple de code CSS.barre { width : 300px; height : 20px; Background-color : red; Ecrire de code html d'implantation de la div et modifier la fonction affichetemps() Remarque :Les 300px 60 secondes

24 Code HTML de la barre 24 <b>apprendre les tables de multiplication</b><br><br> <table > <tr> <td> <input type="text" id="temps" value="0" size=2 style="text-align:center;"/> S <br> </td> <td></td> <td> <input type="text" id="compteur" value="0" size=2 style="text-align:center;"/> Points <br> </td></tr><tr> <td> <input type="text" id="a" value="0" size=2 style="text-align:center;"/> X <br> </td> <td> <input type="text" id="b" value="0" size=2 style="text-align:center;"/> = <br> </td> <td> <input type="text" id="r" value="0" size=2 style="text-align:center;"/> résultat <br> </td> </tr> <tr> <td> <button class="bouton" onclick="start();"> START </button> </td> <td></td> <td> <button class="bouton" onclick="verif();"> VALIDER </button> </td> </tr> </table> <br/> <div class="fondbarre"> <div class="barre" id="barre"> </div> </div> <br/> <div id="afficheur" class="afficheur"> </div> </div>

25 Fonction AfficheTemps() 25 function AfficheTemps(){ temps--; _$('temps').value = temps; // mise à jour de la taille de la barre _$('Barre').style.width = temps*5 + 'px'; if (temps == 0){ // fin du jeu // arrêt du timer clearinterval(t1); _$('afficheur').innerhtml = "Fin du jeu!!!";

26 Validation par la touche Entrée 26 Afin de faciliter l'utilisation du programme on souhaite valider la réponse directement lors de la frappe de la touche entrée. Proposer une solution de détection de la touche entrée. Indices : le code de la touche entrée est 13 on peut lire le code d'une touche avec l'attribut keycode de l'objet event Ecrire une fonction assurant le décodage de la touche Entrée et appelant la fonction Verif().

27 Validation par la touche Entrée 27 function ToucheEntree(e){ if (e.keycode == 13) { Verif(); Code HTML : <input type="text" id="r" value="0" size=2 style="text-align:center;" onkeypress="toucheentree(event)"/> résultat

28 Variation de la couleur de la barre 28 On souhaite faire varier la couleur de la barre du vert au rouge On modifie la couleur de la barre en fonction du temps. // changement de couleur en fonction du temps vert = 4 * parseint(temps) + 15; rouge = parseint(vert); _$('Barre').style.backgroundColor = "rgb(" + rouge + "," + vert + ",0)";

29 Galerie Photo 29 On souhaite gérer une galerie photo: Au survol des petites images on affiche Les grandes images correspondantes. Ecrire une fonction ChangeImage() qui modifie la source de la grande image. les paramètres de la fonction : - l'identifiant de l'image à modifier - Le nom du fichier image Démo

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

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

Tice -Seconde-Page Web 2015-2016

Tice -Seconde-Page Web 2015-2016 Ouvrez une page web, cliquer doit sur la souris et faite afficher le code source de la page. Quelqu un a écrit ce code pour faire afficher cette page. Nous allons nous aussi écrire du code pour faire afficher

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

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

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

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

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

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

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

<link rel =" stylesheet " type =" text / css " href =" monstyle. css " />

<link rel = stylesheet  type = text / css  href = monstyle. css  /> Programmation Web AGRAL-3 et MTX-3, 2012-13 SÃl ance TP N o 5 Mars 2013 Objectifs Langage CSS Interactions HTML/CSS Manipulation [Où mettre ses fichiers? ] Pour ce TP vous allez mettre votre fichier HTML

Plus en détail

LES TABLEAUX. Créer un tableau élémentaire

LES TABLEAUX. Créer un tableau élémentaire LES TABLEAUX Il y a deux façons de créer dans un article : directement dans SPIP pour des tableaux élémentaires avec un éditeur html pour des tableaux complexes. Créer un tableau élémentaire Les colonnes

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

Les feuilles de Style HTML : CSS

Les feuilles de Style HTML : CSS Les feuilles de Style HTML : CSS Tarek Melliti Laboratoire IBISC (Informatique Biologie Intégrative et Systèmes Complexes) tarek.melliti@ibisc.univ-evry.fr Plan du cours Séances 1 : Introduction à l informatique

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

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

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

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

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

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

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

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

TP JAVASCRIPT IntegWeb SERIE 3 Suite MMI 2014-2015

TP JAVASCRIPT IntegWeb SERIE 3 Suite MMI 2014-2015 TP JAVASCRIPT IntegWeb SERIE 3 Suite MMI 2014-2015 GESTION D UN FORMULAIRE DE CONTACT Objectif : Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL

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

Développement d applications multiplateforme avec EnyoJS

Développement d applications multiplateforme avec EnyoJS Développement d applications multiplateforme avec EnyoJS EnyoJS est un cadre de développement qui permet de créer des applications pour n importe quelle plateforme : ordinateur, tablette/smartphone Android,

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

Les feuilles de styles

Les feuilles de styles Qu'est-ce que les feuilles de style? Les feuilles de style CSS pour Cascading Style Sheets en anglais est un langage informatique qui sert à décrire la présentation des documents HTML. L'un des objectifs

Plus en détail

Rapport des modifications techniques effectuées

Rapport des modifications techniques effectuées Club Alpin Français Nantes-Atlantique Rapport des modifications techniques effectuées BERROU Quentin BRUNED Boris QUEVA Caroline 11 I CMS choisi : Nous avons choisi d utiliser Joomla! de par sa communauté

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-20859 & SCG-66408 HTML & CSS Thierry Badard & Frédéric Hubert Université Laval, Dép. des sciences géomatiques Québec, Canada {Thierry.Badard;

Plus en détail

Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web

Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web Transmission d un signal sur un réseau (streaming) TP 3 : Intégration de vidéos sur un site web IUT d Arles LP ATC/CA 2010-2011 Objectifs : Inclure dans une page web du code ou un fichier d'indirection

Plus en détail

Chapitre 3 : Le langage HTML Fascicule TIC Page 33

Chapitre 3 : Le langage HTML Fascicule TIC Page 33 33 I. Introduction Les pages Web visualisées dans un navigateur Internet sont écrites avec un langage nommé HTML (HyperText Markup Language). C est un langage de description de contenu et de structure.

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

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

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver

Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Elaboration de mise en page HTML en utilisant le CSS et les DIV avec Dreamweaver Les bonnes pratiques du concepteur web moderne requièrent l usage des CSS pour la réalisation des mises en page. Les mises

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

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

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

Bibliothèques graphiques

Bibliothèques graphiques Bibliothèques graphiques Cilia Mauro Octobre 2012 ANF DevWeb ASR Bibliothèques graphiques Plan Introduction Choix d une bibliothèque Dygraphs RGraph Highcharts Introduction Modèles colorimétriques 1 pixel

Plus en détail

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

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

Plus en détail

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv>

Réalisation d'un site web. Première partie : Création des pages HTML. <tv>thierry.vaira@orange.fr</tv> Réalisation d'un site web Première partie : Création des pages HTML 1 Objectifs Se familiariser avec le codage HTML Acquérir une pratique minimale Être capable de mener à bien la construction d'un site

Plus en détail

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

Plus en détail

Fiche 6 - Le langage HTML

Fiche 6 - Le langage HTML Fiche 6 - Le langage HTML I Introduction HTML est un langage universel utilisé pour communiquer sur le Web. C est un langage dit de «marquage» (de «structuration» ou de «balisage») qui permet d écrire

Plus en détail

Créer un diaporama sur internet pour apprendre à programmer

Créer un diaporama sur internet pour apprendre à programmer Créer un diaporama sur internet pour apprendre à programmer 1 Etape 1: Créer un document HTML, afficher une image et lui associer un événement. Exercice: Détecter si l'utilisateur a cliqué sur l'image.

Plus en détail

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3

Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 Groupe Eyrolles, 2008 ISBN : 978-2-212-12234-3 9 Les règles de styles Il est nécessaire de bien connaître les règles de styles mais, pour un usage performant de Dreamweaver, il est aussi utile de bien

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

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table>

LES TABLES. Exemple de table : <table> <tr> <td>cellule 1</td> <td>cellule 2</td> </tr> <tr> <td>cellule 3</td> <td>cellule 4</td> </tr> </table> LES TABLES Les tables servent pour l'affichage de «données tabulaires», c'est-à-dire des informations présentées logiquement en rangées et en colonnes. Son intégration peut paraitre fastidieuse mais c'est

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

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

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

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

TP Interface graphique et C++ numéro 1

TP Interface graphique et C++ numéro 1 TP Interface graphique et C++ numéro 1 Master IGC - 1 re année année 2010-2011 Ce premier TP a pour objectif de vous familiariser avec le compilateur C++, les entréessorties du langage et l utilisation

Plus en détail

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique»

Java EE - Cours 7. Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Java EE - Cours 7 Cours de 2 e année ingénieur Spécialisation «Génie Informatique» Rappels 2 Feuilles de Styles : CSS Lorsque l on réalise un site Web, il faut dissocier la partie forme de la partie fond.

Plus en détail

AP3.2 : Javascript et la balise <canvas> Informatique et internet

AP3.2 : Javascript et la balise <canvas> Informatique et internet STI2D Option SIN Terminale AP3.2 : Javascript et la balise Informatique et internet Durée prévue : 3h. Problématique : réalisation de pages web utilisant la balise Compétences visées

Plus en détail

L'objectif est d'insérer des programmes ( SCRIPTS) dans les pages HTML. Interactivité. Traitements simples.

L'objectif est d'insérer des programmes ( SCRIPTS) dans les pages HTML. Interactivité. Traitements simples. Introduction. Javascript est un langage de programmation L'objectif est d'insérer des programmes ( SCRIPTS) dans les pages HTML. Interactivité. Traitements simples. La possibilité d'inclure des programmes

Plus en détail

NORMES TECHNIQUES 2010

NORMES TECHNIQUES 2010 NORMES TECHNIQUES 2010 -> L'offre Display : Mega bannière - Skyscraper- Pavés -> Offre Display : les formats -> Offre Display : les livrables -> Publi rédactionnel -> Accueil Panoramique -> Habillage du

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

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

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

Conception de sites web. Feuille de styles CSS

Conception de sites web. Feuille de styles CSS Conception de sites web Feuille de styles CSS M i s e e n p a g e : s o l u t i o n «v i e i l l e é c o l e» Mise en page par et par Long Vite illisible Peu souple Difficile à modifier

Plus en détail

5 décembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2580/

5 décembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2580/ 5 décembre 2012 Grégory Petit http://lrcm.com.umontreal.ca/greg/com2580/ La semaine dernière Les formulaires Les champs de formulaire Et donc on fait quoi aujourd hui? Intégration Web Éléments complexes

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

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

Programmation Web TP2 CSS i

Programmation Web TP2 CSS i Programmation Web TP2 CSS i Objectifs : Construction d'une page web : comprendre et utiliser un fichier CSS ; définir la structure d'une page web ; Consignes et Pré-requis Lire attentivement cet énoncé

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

2. L'assistant Papier à lettres s'ouvre alors. Cliquez sur le bouton Suivant.

2. L'assistant Papier à lettres s'ouvre alors. Cliquez sur le bouton Suivant. Pour personnaliser vos messages, vous utilisez certainement les papiers à lettres qui viennent avec Outlook Express. Vous choisissez alors votre papier à lettres dans la liste qui apparaît après avoir

Plus en détail

Edge Animate CC 1. INTERFACE... 3 2. STAGE... 6 3. POSITIONNEMENT D ELEMENTS... 6 4. FORME (RECTANGLE, RECTANGLE ARRONDI, ELLIPSE)...

Edge Animate CC 1. INTERFACE... 3 2. STAGE... 6 3. POSITIONNEMENT D ELEMENTS... 6 4. FORME (RECTANGLE, RECTANGLE ARRONDI, ELLIPSE)... 1 Edge Animate CC J. ROMAGNY 1. INTERFACE... 3 A. ECRAN D ACCUEIL... 4 B. ESPACES DE TRAVAIL... 4 C. TESTER SA PAGE DANS LE NAVIGATEUR... 4 D. SAUVEGARDER LE PROJET... 4 E. SAUVEGARDER COMME MODELE...

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

QCM TEST ISN SUJET A

QCM TEST ISN SUJET A QCM TEST ISN SUJET A 20 novembre 2012 Nom, prénom, classe : Pour chaque question, on complétera la grille par les numéros de la ou des bonnes réponses Barème : 1 point par bonne réponse à une question,

Plus en détail

Tp1 Ema EMACS Développement Web

Tp1 Ema EMACS Développement Web Tp1 Ema EMACS Développement Web 1/ Description de l application : Notre première application Web a pour objectif de gérer une liste de todo (truc à faire) : Diagramme de classe simplifié : Application

Plus en détail

II Les éléments de base du langage JavaScript

II Les éléments de base du langage JavaScript II Les éléments de base du langage JavaScript Comme dans tous les langages de programmation, il est important de pouvoir stocker des valeurs, d effectuer des opérations, des tests, des boucles Le Javascript

Plus en détail

1. Introduction. 2. Objectifs de la réalisation. 3. Analyse de besoins

1. Introduction. 2. Objectifs de la réalisation. 3. Analyse de besoins 1. Introduction Le travail consiste à concevoir et à élaborer un dispositif de formation à distance, qui va au-delà de simples pages web statiques. On a choisi de faire appel à tout un module d apprentissage

Plus en détail

Programmation Web IMAC 2015-2016 TD 1 : HTML. 30 septembre 2015

Programmation Web IMAC 2015-2016 TD 1 : HTML. 30 septembre 2015 Programmation Web IMAC 2015-2016 TD 1 : HTML 30 septembre 2015 Objectif: Ce TD a pour but d aborder les premières notions du langage HTML. Il est important de noter que le HTML n est pas un langage de

Plus en détail

Présentation et explications

Présentation et explications Présentation et explications 1 SOMMAIRE I) Introduction... 3 II) Installation... 3 1) Localement... 3 2) Chez un hébergeur... 4 Installation automatique... 4 Installation manuelle... 4 III) Interface de

Plus en détail

Eléments concernés Nouveautés Améliorations Corrections Arbres ascendants Arbre ascendant horizontal , sans limitation du nombre de générations

Eléments concernés Nouveautés Améliorations Corrections Arbres ascendants Arbre ascendant horizontal , sans limitation du nombre de générations 18.04.2012 Nouveautés et évolutions de la version 5.1 (version 5.1.0a disponible depuis le 02.03.2012) (version 5.1.0b corrective disponible depuis le 06.03.2012) (version 5.1.0c corrective disponible

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

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

HTML : Mini tutoriel

HTML : Mini tutoriel HTML : Mini tutoriel I. Introduction HTML est un langage de formatage de texte adapté à la conception de pages web. Le HTML est un langage balisé, fondé en particulier sur la notion de lien hypertexte,

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

Conception et création de pages web. Gérald Collaud Centre NTE, Université de Fribourg

Conception et création de pages web. Gérald Collaud Centre NTE, Université de Fribourg Conception et création de pages web Gérald Collaud Centre NTE, Université de Fribourg Ecole Normale, 23 août 2000 Programme! Quelques notions importantes! Comment créer des pages web! Aller plus loin!

Plus en détail

TP Initiation au langage HTML

TP Initiation au langage HTML TP Initiation au langage HTML (1) Rappels de quelques généralités Un fichier HTML n'est pas compilé (ce n'est pas un programme) Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant

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

PHP 5. simplexml. A. Belaïd 1

PHP 5. simplexml. A. Belaïd 1 PHP 5 simplexml A. Belaïd 1 Introduction Dans les versions précédentes de PHP, il n y avait aucun outil permettant de manipuler simplement des fichiers XML Dans PHP 5, on trouve un mode, appelé, SimpleXML

Plus en détail

TD2 : PHP «avancé» V3.0.0

TD2 : PHP «avancé» V3.0.0 TD2 : «avancé» V3.0.0 Cette œuvre est mise à disposition selon les termes de la licence Creative Commons Attribution Pas d'utilisation Commerciale Partage à l'identique 3.0 non transposé. Document en ligne

Plus en détail

Insertion de vidéo et sons Flash avec swfobject version2 et JavaScript

Insertion de vidéo et sons Flash avec swfobject version2 et JavaScript Insertion de vidéo et sons Flash avec swfobject version2 et JavaScript Mode d'emploi pour Hot Potatoes Permet la lecture d'animations swf, de vidéos flv, et de fichiers son mp3 Sommaire Insertion de vidéo

Plus en détail

Personnalisation des templates pour LogiVert 6

Personnalisation des templates pour LogiVert 6 Manuel Personnalisation des templates pour LogiVert 6 Copyrights (c)2013 + LogiVert BV Site web : www.logivert.com PRESENTATION... 3 INTRODUCTION... 3 LES 4 NIVEAUX... 3 NIVEAU1 CONFIGURATION DE TEMPLATE...

Plus en détail

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012

TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE

Plus en détail

Afin de réaliser l exercice ci-dessus, suivre les étapes suivantes :

Afin de réaliser l exercice ci-dessus, suivre les étapes suivantes : - Appliquer un formatage conditionnel. Durée : une période pour les pages -3 - Ouvrir la Base de données «identification_produits» qui a été créée à la leçon précédente - Générer un rapport à partir de

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

TD2 Exportation pour le Web

TD2 Exportation pour le Web TD2 Exportation pour le Web Objectif du TD : Dans ce TD nous allons voir comment bien exporter les animations Flash sur le net, pour qu'elles s'affichent correctement sur tous les navigateurs, qu'elles

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Transformations XML vers XML, HTML, XHTML, RTF et modification du contenu des documents

Transformations XML vers XML, HTML, XHTML, RTF et modification du contenu des documents 6 Transformations XML vers XML, HTML, XHTML, RTF et modification du contenu des documents Prenons l'exemple d'une entreprise dont le site d'e-commerce a été réalisé avec la solution XML Commerce One, qui

Plus en détail

Introduction aux feuilles de styles

Introduction aux feuilles de styles Introduction aux feuilles de styles 1. Introduction Cette technologie a été introduite par Microsoft avec la version 3.0 (1996) avec pour but de modifier le contenu d'une page par une grande variété d'effets

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

> Table des matières. Gestion des pages courantes

> Table des matières. Gestion des pages courantes I N T E R F A C E A D M I N I S T R A T I O N M A N U E L D ' U T I L I S A T I O N D E T Y P O 3 V 4. 2 R É D A C T E U R V. DARDENNE DÉCEMBRE 2009 > Table des matières Gestion des pages courantes > Accès

Plus en détail

Programmation Internet Partie II

Programmation Internet Partie II Programmation Internet Partie II JavaScript Le script côté client Ivan Madjarov, IUT R&T, 2002 2013 DHTML Le HTML dynamique Le DHTML n'est pas un standard! C est une appellation qui désigne un rassemblement

Plus en détail

Conception de sites Web

Conception de sites Web Actualité du cours Conception de sites Web L1 bidisciplinaire IDEA Année 2015-2016 Jérôme Darmont http://eric.univ-lyon2.fr/~jdarmont/?page_id=440 http://eric.univ-lyon2.fr/~jdarmont/?feed=rss2 https://twitter.com/darmont_lyon2

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