TP n°2 Javascript EVENEMENTS ET OBJETS

Slides:



Advertisements
Présentations similaires
La création de pages web Lorsqu'on « navigue » sur l'Internet, les pages que nous visitons sont encore pour beaucoup en HTML. Comment fait-on pour les.
Advertisements

Lundi 15 Juin 2009 Les principales techniques JavaScript.
Lien hypertexte ou html
1 JavaScript V0 : Nauer. 2 JavaScript Quid ? Langage de programmation lié à HTML. Code JavaScript intégré aux pages HTML. Code interprété par le navigateur.
HTML Abda Anne Plan Présentation Structure Texte Listes Images Liens Tableaux Formulaires.
LE LANGAGE JAVASCRIPT LES FENETRES.
Conception de Site Webs dynamiques Cours 5
Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.
Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques.
Utilisation de l’outil Firebug
Introduction aux Web Services Partie 1. Technologies HTML-XML
Annuler les corrections automatiques Annuler les corrections automatiques « Régler » les CSS « Régler » les CSS Définir le site et utiliser une technologie.
Javascript les spécificités du langage - Partie 6 -
Les instructions PHP pour l'accès à une base de données MySql
Le langage Javascript pour le web
Le langage Javascript pour le web et application au DHTML
Manipulation de formulaires en Javascript
AJAX.
Animateur : Med HAIJOUBI
Hot Potatoes
Javascript 1° PARTIE : LES BASES
TP n°3 Javascript Contrôle de formulaire
Jquery.
Évènement Petites fonction déjà toute faites Exemple : Construction onLoad (au chargement) = "ce qui doit se passer" onLoad s’exécute toujours dans le.
Le langage XHTML 420-S4W-GG Programmation Web Client
1 JavaScript V0 : Nauer. 2 JavaScript Quid ? Langage de programmation lié à HTML. Code JavaScript intégré aux pages HTML. Code interprété par le navigateur.
Programmation JavaScript cours inspiré du cours de R. Vivian.
Javascript 2° PARTIE : EVENEMENTS ET OBJETS
I- Introduction au langage II- Le formalisme de base III- Les Objets JavaScript IV- Les Variables V- Opérateurs prédéfinis VI- Les Entrées/Sorties VII-
JavaScript Nécessaire Web.
Créer son site web Chapitre II. Les caractères spéciaux Les navigateurs ne reconnaissent pas les caractères spéciaux. Heureusement chaque caractère possède.
Introduction à JavaScript
LANGAGE HTML Le HTML (Hyper Text Markup Langage) est un langage universel utilisé sur le World Wide Web. Le HTML permet de : * Publier des documents sur.
LE HTML ISN Terminale S Un peu d’histoire …
Les guides de formation Conception de pages web. Guide Virtuose - version enseignant2 Guide - Conception de pages web Introduction Introduction, p. 3.
Les balises HTML et les objets JavaScript correspondants Objet document L'objet document est important dans la mesure ou il contient tous les objets du.
 Objet window, la fenêtre du navigateur
S'initier au HTML et aux feuilles de style CSS Cours 5.
IUT SRC Année 2004/2005Antonio Capobianco 1 HTML>Formater du texte>Les titres Définir les titres HTML distingue 6 niveaux de titre : Titre N°1 Titre N°2.
Les structures conditionnelles en PHP
Dynamic HTML Regroupement de trois éléments : le HTML
Saisie des questionnaires. Saisie des questionnaires : la saisie peut débuter en cliquant avec la souris dans une case.
Initiation au JavaScript
1 plan de troisième séance du 29 février Micro Informatique au Cellier Joseph HOHN.
Publication Flash sur Internet et Transfert avec Dreamweaver COM3562 Communication Multimédia MARS 2011.
TP n°1 Javascript LES BASES
Le JavaScript.. Histoire Langage créé en 1995 par Brendan Eich pour la Netscape Communications Corporation. Est inspiré de nombreux langages, notamment.
Conception des pages Web avec
1 PHP 5 Notions fondamentales (niveau 1 cours #3) Formation continue – Cégep de Sainte-Foy François G Couillard.
1 Systèmes d ’Information : 6b Michel de Rougemont Université Paris II L’Architecture Client/Server.
Scénario Les scénarios permettent de modifier la position, taille … des calques au cours du temps. Son fonctionnement est très proche de celui de Macromedia.
Dreamweaver Séance 1.
1 Présentation de DREAMWEAVER (1) Gaël TREMEAU GI05 Printemps 2006.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
Guillaume MICHAUD – Yvan LECOMTE
Présentation Dreamweaver – Partie 2 Mickaël PIQUE – Automne 2004.
Deuxième Exposé Si Nicolas Debeljak Sun Young Park.
** Flash séance 2 Action script. ** Action Script Ajoute de l’interactivité Permet de contrôler les clips  Langage de programmation orienté objet.
Dreamweaver le retour Avec Les Formulaires Les Calques
Dreamweaver (2) ● les calques (layers) ● les comportements
FORMULAIRES FOMULAIRE Permet à l’utilisateur d’entrer des renseignements le concernant. Utilisation –Inscription sur un site –Mise à jour d’une base.
Les formulaires Les calques Les comportements Les scénarios Les modèles Les feuilles de styles (CSS) La mise en ligne Les formulaires permettent à l’utilisateur.
SI28 - Écriture interactive et multimédia Laurent FETZER GSU04, Lucie SOLA GSU06 P PRESENTATION Dreamweaver 2.
EXPOSE FLASH 2 SI 28 24/10/2006 Delphine GODREAU Hélène PERRIER.
DREAMWEAVER MX2 - Séance 2 Les calques Les comportements Les scénarios Les formulaires Les feuilles de style Les modèles Les cadres Mise en ligne Jérôme.
Introduction au HTML Qu’est ce que le HTML ?
Dreamweaver 2 Feuilles de Style CSS Formulaires Calques Comportements
FLASH Séance 2 Xiaoliang Liang Morgane Le Nan SI28 P05.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
TP ISN-Terminale S Notion de code HTML. I) Visualisation du code source d’une page web Se mettre sur une page web quelconque : clic droit, Afficher la.
Transcription de la présentation:

TP n°2 Javascript EVENEMENTS ET OBJETS Événements souris Analyse de code javascript Balise <div> Gestion de fenêtre Informations sur le navigateur et l’écran © BTS IRIS 2002 [tv]

Exercice n°1: Événements souris Placer une image dans un lien <a>. Installer un gestionnaire d’événement qui permet de changer l’image lorsque le pointeur de la souris se trouve sur ce lien. On revient sur l’image d’origine lorsque le pointeur de la souris quitte ce lien. Le gestionnaire d’événement sera réalisé par une seule et unique fonction qui recevra en argument l’action à réaliser. Le pointeur de la souris est positionné sur l’image : elle devient bleue Le pointeur de la souris quitte l’image : elle redevient rouge

Exercice n°2: Analyse de code js Tester l’exemple suivant : <html> <head> <title>Exemple JavaScript</title> </head> <body onload='window.setInterval("scroller()",100);'> <script language="JavaScript"> var text = 'Bienvenue sur mon site web ...'; var spaces = ' '; var i = spaces.length; function scroller() { i--; if(i > 0) window.status = spaces.substr(0,i) + text; else window.status = text.substr(-i); if(i < -(text.length)) i = spaces.length; } </script> </body> </html> Que fait ce script ? Placer, à l’intérieur de ce script, des commentaires pertinents.

Exercice n°3: Balise <div> Écrire un script js qui permet de compter le nombre de caractères tapés au clavier. On utilisera des balises <div> pour afficher un texte d’aide en couleur lorsque le pointeur de la souris est placé sur les 3 éléments suivants : Exemple de balise <div>: <div id="countinfo" style="position:absolute; left:220px; top:15px; visibility: hidden"> <table border=0 cellspacing=0 cellpadding=4> <tr><td bgcolor=#00ff77> <font size=2 face="arial,helvetica" color=#333333><b> Ici est indiqué le nombre<br> de caractères saisis.<br> </b></font> </td></tr></table> </div>

Exercice n°4: Gestion de fenêtre Écrire un script js qui crée, au chargement de la page, une nouvelle fenêtre qui se fermera automatiquement au bout de 3 secondes.

Exercice n°5: Informations sur le navigateur et l’écran Écrire un script js qui affiche les informations concernant le navigateur et l’écran du client. Pour cela, vous utiliserez les propriétés des objets Navigator et Screen. Indiquer l’intérêt d’obtenir de telles informations.