doctp javascript - Sesamebox.fr
download 
Plainte Transcription
tp javascript - Sesamebox.fr
TP JAVASCRIPT
IntegWEB - 2014-2015
Série N°1
Exercice 1 :
A) Construire une page Html avec un texte de votre choix. Ajouter le code nécessaire pour ouvrir une
boîte de message au chargement de la page. Le code JavaScript sera implanté directement dans la
balise <body>. Fichier trame HTML : Trame_TP1_Exo_1.html disponible sur le blog.
B) Ajouter ensuite le code nécessaire pour ouvrir une boite d’alerte lorsque l’opérateur clique sur le
document. Le code JavaScript sera implanté directement dans la balise <body>.
Pour mémoire : onload est l’événement activé au chargement de la page.
onclick est l’événement activé lorsque l’opérateur clique sur l’objet concerné.
C) Construire une nouvelle page Html ayant les mêmes fonctionnalités, mais en implantant les
gestionnaires d’événements à l’aide d’un code JavaScript placé dans la section <head> de la page.
Pour mémoire : Mise en place d’un gestionnaire d’événement avec JavaScript
document.onclick = function() { code javascript } ;
Autre forme d’écriture possible avec une fonction déclarée auparavant
document.onclick = NomFonction ;
// attention sans les ()
Cas particulier de l’événement onload
document.onload = NomFonction();
// on doit ajouter les (), car c’est un cas particulier du onload qui ne produit
// pas d’objet event
Exercice 2 : Gestion plus générale des événements sur les objets
L’objectif de cet exercice est d’assurer la gestion d’événements à l’aide de JavaScript en séparant le code
JavaScript du code HTML. Fichier trame HTML : Trame_TP1_Exo_2.html disponible sur le blog.
A ) Implantation de gestionnaires d’événements
Construire une page HTML avec :
• Une balise <div id=’D1’> </div> contenant du texte.
• Une balise <p id= ‘message’> </p> dans laquelle seront affichés des messages.
Ajouter ensuite en fin de code html une section "<script>" dans laquelle le code JavaScript sera implanté.
1) Ecrire la fonction Message(), qui assure l’affichage d’un message dans la balise <p> ayant pour
identifiant : ‘message’. Cette fonction sera appelée ensuite pas les fonctions associées aux
événements. On utilisera la méthode innerHTML pour modifier le contenu de la balise <p>.
Chaque événement déclenchera la modification du message contenu dans la balise <p>.
Les gestionnaires d’événements seront créés à l’aide d’un code JavaScript implanté en fin de page. Il sera
donc exécuté après le chargement de tous les éléments HTML de la page.
Afin de s’affranchir des problèmes de navigateur et de respecter la norme DOM-2 et d’avoir la possibilité
d’affecter plusieurs fonctions sur un même événement on utilisera les méthodes suivantes :
addEventListener() ou attachEvent() pour implanter les gestionnaires d’événements et
removeEventListener() ou detachEvent() pour les supprimer .(voir cours en ligne)
Ci-dessous : la fonction addEvent() qui assure l’ajout d’un gestionnaire d’événement sur un objet quel que
soit le navigateur et un exemple d’utilisation.
function addEvent(element, event, func) {
if (element.addEventListener) {
// l'élément possède la méthode addEventListener()
element.addEventListener(event, func, false);
} else {
// l'élément ne possède pas la méthode addEventListener()
element.attachEvent('on' + event, func);
}
}
Implantation d’un gestionnaire d’événement sur un objet avec id=’S1’ Avec la fonction addEvent()
// Récupération d’une référence sur l’objet div
Var LaDiv = document.getElementById(‘D1’) ;
// Création d'une fonction anonyme et récupération d'une référence sur cette fonction dans la variable UneFonction
var UneFonction = function() {alert("Vous m'avez cliqué !"); };
// Ajout de la fonction dans le gestionnaire d'événements de l'objet pour le click
addEvent( LaDiv , 'click' , UneFonction);
2) Implanter cette fonction dans la section <script>.
3) Ajouter le code JavaScript pour que le click sur la <div> affiche le message indiquant que
l’opérateur à cliqué sur la <div>. Ecrire une fonction anonyme assurant l’affichage du message et
également l’affichage de la valeur de l’id de la <div>.
Dans une fonction anonyme on peut faire référence à l’objet ayant généré l’événement avec la méthode
this. On peut donc récupérer la valeur de l’identifiant avec l’instruction suivante : this.id
4) Pour les événements onmouseover, onmouseout, ajouter des fonctions anonymes assurant l’affichage
des messages ‘entrée sur l’objet’ ou ‘sortie de l’objet’. Elles afficheront comme pour la question 3)
également la valeur de l’identifiant.
B) Ajout d’autres fonctions sur les événements
On souhaite modifier la couleur de la <div> lors de son survol par la souris. Ecrire les fonctions anonymes
assurant la modification de la classe CSS de l’objet ayant provoqué l’événement. Pour mémoire on utilise
la propriété className des objets pour modifier la classe. Les fonctions anonymes seront ensuite affectées
aux événement avec la fonction addEvent() des questions précédentes. Il faut également ajouter le code
CSS dans la section <head> définissant deux classes (état normal et état survolé).
Exemple de code css possible
<style type="text/css">
.normal{
width : 300px;
height : 100px;
background : yellow;
color : green;
border : 1px solid red;
border-radius: 10px;
}
.survol{
width : 300px;
height : 100px;
background : green;
color : yellow;
border : 1px solid red;
border-radius: 10px;
}
</style>
C) Ajout d’autres éléments sur la page
Nous avons créés des fonctions anonymes dans les questions précédentes, nous pouvons donc les associer à
d’autres objets.
Ajouter dans le code html une autre <div> avec pour identifiant ‘D2’, puis ajouter dans le code JavaScript
les instructions nécessaires pour que la nouvelle <div> réagisse aux événements comme la <div>
précédente.
Exercice 3 : Convertisseur
Construisez une page HTML contenant un convertisseur Francs Euro.
Il comprend deux champs texte recevant les valeurs en francs ou en euros et deux blocs de type <span>
</span> dans lesquels les résultats de la conversion sont affichés.
Exemple de mise en page :
Fichier trame HTML : Trame_TP1_Exo_3.html disponible sur le blog.
Lors de la saisie d’une valeur dans un champ, à chaque frappe d’un chiffre, le résultat de la conversion sera
mis à jour. Les résultats des conversions seront formatés avec seulement deux chiffres après la virgule.
A vous de choisir le bon événement du clavier pour réaliser cette fonction.
A) Construisez le code html de la page.
B) Ecrivez les deux fonctions de conversion : des francs vers des euros et des euros vers des francs.
Elles assurent la conversion et l’affichage des résultats formatés dans les blocs <span> respectifs.
C) Implantez sur les deux champs de saisie les appels des fonctions de la question B.
Pour mémoire :
Syntaxe d’un champ texte : <input type= "texte" size="6" id= "TOTO" />
Syntaxe d’un bloc span : <span id="SP1" > </span>
Pour formater l’affichage d’un nombre décimal on utilise la méthode toFixed(Nombre de décimal) de l’objet
Number.
Exemple avec 2 chiffres après la virgule : Resultat = Resultat.toFixed(2) ;
Exercice 4 : Gestion de la date et de l’heure
Fichier trame HTML : Trame_TP1_Exo_4.html disponible sur le blog.
A) Construisez une page HTML avec un bloc texte dans lequel on affiche l’heure d’ouverture de la
page, en utilisant le format local d’affichage de l’heure (méthode toLocaleTimeString()). Cet
affichage sera géré à l’aide d’instructions JavaScript placées après la balise </body>.
B) Ajoutez sur la page, trois champs texte et un bouton. Un clic sur le bouton lance l’exécution d’une
fonction de mise à jour des trois champs contenant l’heure en heures, minutes, secondes (voir copie
d’écran ci-dessus).
C) Ajoutez sur la page un champ texte et un bouton. Un clic sur ce bouton lance l’exécution d’une
fonction qui affiche dans le champ, le temps écoulé en secondes depuis l’ouverture de la page.
Suggestion : utilisez la variable de lecture de l’heure utilisée dans la question A pour connaitre
l’heure d’ouverture de la page.
D) Rafraichissement automatique des affichages.
o Ajoutez deux boutons afin d’activer ou de stopper le mode de rafraichissement automatique des
affichages.
o Ecrivez la fonction assurant la mise à jour de tous les affichages.
o Ajoutez le code nécessaire pour lancer le timer sur le premier bouton
o Ajoutez le code pour supprimer le timer sur le second bouton.
Que ce passe t-il si on click plusieurs fois de suite sur le bouton [Auto] ?
Proposez une solution pour éviter ce problème.
E) Ajoutez le code html et JavaScript nécessaire pour afficher également la date au format local.
Pour mémoire :
Pour pouvoir utiliser l’objet Date il faut déclarer une variable et l’initialiser avec l’objet Date
Exemple : var H = new Date() ;
Syntaxe des différentes méthodes de l’objet Date :
Heure au format local = H.toLocaleTimeString();
Heure (0 à 23) = H.getHours();
Minute (0 à 59) = H.getMinutes();
Seconde (0 à 59) = H.getSeconds();
Temps absolu en ms = H.getTime(); ou H.getMilliseconds();
Date au format local = H.toLocaleDateString();
Jour du mois (1 à 31) = H.getDate();
Mois (0 à 11) = H.getMonth();
Année = H.getYear(); Attention sous Firefox, année à partir de 1900 sous IE Année sur 4 digits
Ou Année = H.getFullYear(); Toujours sur 4 digits
Méthode pour appeler une fonction après une temporisation :
Identifiant_Temporisateur = setTimeout("NomDeLaFonction()",50); 50 correspond à 50 ms.
Pour annuler ce temporisateur : clearTimeout(Identifiant_Temporisateur) ;
Méthode pour appeler une fonction régulièrement :
Identifiant_Temporisateur = setInterval(("NomDeLaFonction()",50);
Méthode pour arrêter un Temporisateur :
clearInterval(IdentifiantTemporisateur);
Identifiant_Temporisateur est une variable entière qui mémorise une référence sur le timer initialisé par les fonctions
setTimeout() ou setInterval() , cette variable est indispensable si on souhaite arrêter un timer.
MEMO
Intégration du code JavaScript dans l’entête :
Formatage des nombres décimaux :
<head>
var Resultat = 1.12345 ;
Resultat = Resultat.toFixed(2) ;
<script type="text/javascript">
// Commentaires
… Code JavaScript ici …
</script>
</head>
Resultat contient maintenant 1.12
Syntaxe d’une fonction :
Association événement sur un bouton :
function Nom_De_La_Fonction ( paramètres ) {
<input type="button" value="ACTION"
onclick="F_Action()"></input>
… instructions …
// si la fonction retourne une valeur
return( La_Valeur) ;
Nous avons ici un bouton avec le texte ACTION et qui
appel la fonction JavaScript F_Action() si on clic sur le
bouton.
}
Association événement au chargement de la page :
Ecriture de la date dans une variable :
<body onload="code javascript" >
On récupère l’événement onload et on l’associe à du
code JavaScript
var D = new Date() ;
Appel d’une fonction JavaScript sur un événement :
Récupération de la date et l’heure dans une chaine :
Exemple avec la fonction Ma_Fonction()
<body onload="Ma_Fonction()" >
var ChaineHeure = D.toLocaleTimeString() ;
var ChaineDate = D.toLocaleDateString() ;
Comment afficher une boite de message ?
Syntaxe des méthodes de lecture sur l’objet Date :
On utilise la fonction alert(Message)
Exemple :
alert("Bonjour…") ;
ou
var ChaineTexte = "Texte dans la chaine" ;
alert(ChaineTexte) ;
Heure au format local = D.toLocaleTimeString();
Heure (0 à 23) = D.getHours();
Minute (0 à 59) = D.getMinutes();
Seconde (0 à 59) = D.getSeconds();
Temps absolu en ms = D.getTime(); ou
D.getMilliseconds();
Comment récupérer l’événement du clic sur la page ?
Jour du mois (1 à 31) = D.getDate() ;
Mois (0 à 11) = H.getMonth() ;
Année sur 4 digits = D.getFullYear() ;
<body onclick="Code JavaScript" >
Code HTML d’un champ texte :
<input type="text" value="" size="50" id="XXX">
</input>
Avec ce code on obtient un champ texte, vide, d’une
largeur de 50 caractères avec comme identifiant ‘XXX’
Accès à la propriété value du champ texte :
Avec la méthode getElementById() de l’objet document
document.getElementById(‘XXX’).value
lecture :
A = document.getElementById(‘XXX’).value ;
Ecriture :
document.getElementById(‘XXX’).value=’ texte’ ;
Attention :
Année = D.getYear() ;
Attention sous FireFox, année à partir de 1900 mais
sous IE année sur 4 digits
Gestion des caractères ‘ ou " dans les chaines de
caractères :
On peu délimiter une chaines avec ‘ ou "
Chaine = ‘ texte avec des " dans la chaine ’ ;
Ou
Chaine = " texte avec un ‘ dans la chaine " ;
Ou concaténation de chaine pour les cas complexes :
Chaine = "texte avec un ‘ puis un " + ‘"’ + ‘dans la
chaine’ ;
