Post on 04-Oct-2020
Programmation Web2
Etablissement : ISET SFAX
Auditoire : 1ère Année TI S2
Enseignants : Mondher HADIJI
Sandra HAMMAMI
Le langage JavaScript
Chapitre 1: Eléments de base
1
Présentation (1)
2
� Le JavaScript est un langage de script incorporé dans undocument HTML.
� Il est utilisé pour améliorer la présentation et l'interactivitédes pages Web construites à l’aide du langage HTML (etéventuellement le langage CSS).
� L’interactivité permet à un utilisateur d'effectuer uneaction dans une application, généralement en cliquant surun bouton ou en appuyant sur une touche.
Présentation (2)
3
� JavaScript permet de :
� Changer le contenu du code HTML.
� Changer les attributs HTML.
� Masquer ou afficher des éléments HTML.
� Modifier des styles CSS.
� Valider des formulaires.
� Faire des calculs.
� Afficher des messages.
� Donc :
1. HTML permet de définir le contenu des pages Web.2. CSS permet de spécifier la mise en forme des pages Web.3. JavaScript permet de programmer le comportement des
pages Web.
Présentation (3)
4
� JavaScript est un language événementiel : associationd’actions aux événements déclenchés par l’utilisateur(passage de souris, clic, saisie clavier, etc...).
Création d'une simple
application JavaScript
Evènement Action: affichage d’un message d’alerte
Création d'une simple
application JavaScript
Messages d'alerte
� Les messages d'alerte sont couramment utilisés pour tester le fonctionnement des programmes JavaScript.
� Un message d'alerte permet de s'assurer que des informations s'affichent pour l'utilisateur.
� Un utilisateur doit cliquer sur OK pour fermer le message d'alerte.
Liens entre HTML et JavaScript(1)
8
On peut placer du code JS dans une page HTML à 3 endroits etsous des formes différentes :
1. Entre les balises <script> et </script> dans la sectiond'en-tête (<head>), ou dans le corps de la page (<body>).
� Le code inclus dans la séquence <script> est évalué au débutdu chargement de la page.
� S'il est inclus dans la section <head> , il n'est pas exécutétout de suite.
� S'il fait partie du corps du document, il est immédiatementexécuté en même temps que le code HTML.
Liens entre HTML et JavaScript (2)
9
2. Associé à une balise HTML qui gère un événement
<balise ... onEvenement="code JS" ou "fonction JS">
� balise correspond au nom de certaines balises, souventdes composants de formulaire.
� onEvenement pour associer un événement à la balise(passage de souris, clic, saisie clavier, etc...).
3. Ou dans un fichier séparé :
<script SRC= "Chemin/nomfichier.js" > </script>
Exemple1 – version même fichier
10
<html>
<head>
<title>
une page contenant du Javascript
</title>
</head>
<body>
<script>
alert("Voici un message d'alerte!");
</script>
</body>
</html>
Exemple2 – version ficher séparé
11
1. Créer un code dans un fichier séparé ayant l’extension .js (par exemple Script.js) :
alert('Bonjour les étudiants!');
2. Et dans la page html, on crée le lien avec la pagejavaScript externe :
<script src="Script.js"></script>
Exemple3 – Code JS associé à une balise
HTML
12
<html>
<head>
<script >
function f ()
{ alert('Bienvenue'); }
</script>
</head>
<body onLoad="f()">
</body>
</html>
Le commentaire
13
� Pour mettre en commentaire une ligne de code :
� Pour mettre en commentaire plusieurs lignes de code :
// Ceci est un commentaire
/* Ceci est un commentaire Ligne 1Ligne 2...Dernière ligne */
Les variables
14
� JavaScript utilise l'instruction var pour la déclaration d’unevariable.
� Pour déclarer une variable, il ne faut pas déclarer le type.Le navigateur le détecte tout seul.
� Par contre toute nouvelle variable doit être initialisée.
� Les variables sont dynamiques, on peut leurs réaffecterdes valeurs de types différents.
� Le nom d'une variable est une suite de lettres ou de chiffres,qui commence par une lettre ou le symbole de soulignement
_ , ou le symbole $ (les espaces ne sont pasautorisés).
� Les noms sont sensibles à la casse.
Les types de base
15
� les nombres� var nombre= 20.06;
� les booléens� var b= true;
� les chaînes de caractères� var message = "Bonjour, visiteur";
� les tableaux� var table = new Array();
� var noms = new Array("Mohamed", "Salah", "Fatma");
Exemple 1
16
<!DOCTYPE html> <html>
<head> <title> Exemple 1 </ title > </ head >
<body>
<script>
var bonjour = "Bonjour !";
var question = "Comment allez vous ";
var phrase = bonjour + "<br/>" + question;
document.write( phrase, "aujourd'hui ?" );
</script >
</ body >
</ html >
17
Exemple 2
<!DOCTYPE html> <html>
<head> <title> Exemple 2
</title><script>
var n = 25alert("La variable n vaut "+n)n = n * 2alert("Si on multiplie la variablen par 2 on obtient "+n)
</script></head>
<body> ....</body>
</html>
Exemple 3
18
<!DOCTYPE html> <html> <head> <title> Exemple 3</title> </head><script>
var age = prompt("Quel âge avez-vous ? (en années)"); // on demande l‘âgealert("Vous avez " + age + " ans"); // on affiche Vous avez valeur_age ans</script></head><body></body>
</html>
Les structures de contrôles
19
� if ()if ( condition ){ traitement 1 }
else{ traitement alternatif }
� Switch ()switch(expression) {
case 1 :// traitement1 …. ; break ;case 2 :// traitement2 …. ; break ;….default :// traitement par défaut; break ;
}
Exemple
20
var jour = prompt("Donner un nom d’un jour");
switch (jour) {
case 'lundi':
case 'mardi':
case 'mercredi':
case 'jeudi':
case 'vendredi':
alert('Jour ouvrable'); break;
case 'samedi':
case 'dimanche':
alert('weekend'); break;
default:
alert('Ce n\'est pas un jour.');
}
21
Les structures itératives
while()
While(condition)
{
traitement à répéter
}
do
{
traitement à répéter
}
while(condition) ;
for()
for(i = valeur_initiale; i< valeur_finale; i++)
{
traitement à répéter
}
Exemple 1
22
for (x=1; x<=10; x++)
{
a = x-7;
if (a == 0)
{
Alert('division par 0 interdite');
break; // On quitte la boucle
}
alert(1/a);
}
Exemple 2
23
var prenoms= "",i=0;
while (i<3) {
var p = prompt('Entrez un prénom : ');
prenoms += p+' ';
// Ajoute le nouveau prénom ainsi qu'un espace juste après
i++;
}
alert(prenoms);
// Affiche les prénoms à la suite
Exemple 3
24
var prenoms= "";
do {
var p = prompt('Entrez un prénom : ');
prenoms += p+' ';
}
while (p!="") ;
alert(prenoms);
Les fonctions
25
� Une fonction JavaScript est un bloc de code conçu pourexécuter une tâche particulière.
function nom_fonction (param1, param2, param3) {// code qui sera exécuté
}
� Le code à l'intérieur de la fonction s'exécutera quand lafonction est appelée :
� Lorsqu'un événement se produit.
� A partir du code JavaScript.
� Automatiquement (auto-invoqué).
function toCelsius(valFahrenheit) {return (5/9) * (valFahrenheit-32);
}
var x = toCelsius(77);
document.write("La température est " + x + " Celsius");
26
Exemple de fonction
Exemple de fonction
Quelques fonctions prédéfinies
29
� Javascript dispose d’un certain nombre de fonctions prédéfinies :
� toString () : transforme le contenu d’un objet en une chaîne de caractères.
� parseInt () : transforme en nombre entier.
� parseFloat () : transforme en nombre décimal.
� Number() : transforme en nombre.
� eval() : teste si l'argument transmis peut être interprété commeune opération de calcul, dans ce cas l'opération est effectuée etson résultat est retourné.
� isNumber(), isArray(), isBoolean(), isNull(), isEmpty(),isFunction(), isString(), isObject(), isUndefined() :
vérifier le type du paramètre.
Exemple 1
30
var x = 10;
var y = 20;
var a = "x * y" + "<br>";
var b = "2 + 2" + "<br>";
var c = "x + 17" + "<br>";
var res = a + b + c;
document.write(res);
Donne le résultat :
Exemple 2
31
var x = 10;
var y = 20;
var a = eval("x * y") + "<br>";
var b = eval("2 + 2") + "<br>";
var c = eval("x + 17") + "<br>";
var res = a + b + c;
document.write(res);
Donne le résultat :
Exemple 3
32
var x = prompt("donner une première valeur");
var y = prompt("donner une deuxième valeur");
var res1 = x+y;
document.write(x,"+",y," Sans Number() donne : ",res1, "<br/>");
var res2 =Number(x)+Number(y);
document.write(x,"+",y," Avec Number() donne : ",res2, "<br/>");
Donne le résultat :
Autres exemples
33
alert(5+"2"); // affiche 52
alert(5+parseInt("2")); // affiche 7
parseInt("10.33") // 10
parseInt("40 ans") // 40
parseInt("il a 40") // NaN
Le langage JavaScript
Chapitre 2: Les objets de base
1
L’objet tableau• Le tableau est défini à travers les mots clés new et Array :
var MonTableau1 = new Array(); //tableau vide
var MonTableau2 = new Array(1,"Salut",3.14,true); //tableau hétérogène
• Le tableau peut aussi être déclaré sans new et Array :var MonTableau3=résultat_de_type_tableau ;ex : var MonTableau3 = ['valeur1', 'valeur2', …, 'valeurX'];
• Tout indice de tableau débute en 0.
• La taille d'un tableau n'est pas figée par sa définition ou son initialisation.Elle est dynamique.
• A chaque instant, la taille d'un tableau peut être connue en invoquant lapropriété length de l'objet correspondant à ce tableau.
ex : MonTableau2.length retourne 42
Méthodes de l’objet tableau(1)• push() : ajoute des éléments à la fin d’un tableau
<script>
var MonTableau = ['Salah', 'Ali'];
MonTableau.push('Ahmed'); // Ajoute « Ahmed » à la fin du tableau
MonTableau.push('Fatma', 'Mariem'); // Ajoute «Fatma» et «Mariem» à la fin
</script>
• unshift() fonctionne comme push(), excepté que les éléments sont ajoutés au début du tableau.
• shift() et pop() retirent respectivement le premier et le dernierélément du tableau.
3
<script>var MonTableau = ['Salah', ‘Ali ', 'Ahmed', 'Fatma', 'Mariem'];MonTableau.shift(); // Retire «Salah»MonTableau.pop(); // Retire «Mariem »alert(MonTableau); // Affiche « Ali Ahmed Fatma »</script>
<script>
var cousinsString_2 = cousinsArray.join('-');
alert(cousinsString_2); </script>
<script>var cousinsString = 'Ali Mariem Fatma',cousinsArray = cousinsString.split(' '); alert(cousinsString);alert(cousinsArray);alert(cousinsArray[1]);</script>
• split() : découpe une chaîne de caractères en tableau
4
Méthodes de l’objet tableau(2)
join() : convertit un tableau en chaîne decaractères composée de tous les élémentsdu tableau séparés par la chaîne
Parcourir un tableau
• On peut parcourir un tableau avec for :
<script>
var MonTableau = ['Rafael', 'Mathilde', 'Ahmed', 'Jérôme', 'Guillaume']; // length est de 5
for (var i = 0, c = MonTableau.length; i < c; i++) {
alert(MonTableau[i]);
/* On affiche chaque élément, l'un après
l'autre, jusqu'à la longueur totale du tableau*/
}
</script>
5
ApplicationDemandez les prénoms aux utilisateurs et stockez-les dans un tableau. Pensez à la méthode push(). À la fin, il faudra afficher le contenu du tableau, avec alert(), seulement si le tableau contient des prénoms. Pour l'affichage, séparez chaque prénom par un espace.
6
<script>var prenoms = [], prenom;while (prenom = prompt('Entrez un prénom :')) {prenoms.push(prenom); // Ajoute le nouveau prénom ainsi qu'un
espace
}if (prenoms.length > 0) {alert(prenoms.join(' '));} else {alert('Il n\'y a aucun prénom en mémoire');}</script>
L’objet String• Les chaînes de caractères sont représentées par l'objet String.
• Pour créer une chaîne de caractères, on utilise généralement ces syntaxes :
var maChaine = "Chaîne de caractères";
var maChaine = new String("Chaîne");
• length retourne le nombre de caractères contenus dans unechaîne. Les espaces, les signes de ponctuation, les chiffre, etc.sont considérés comme des caractères.
<script>
var ch= 'Ceci est une chaîne de caractères'; // On crée un objet String
alert(ch.length); // On affiche le nombre de caractères
</script>
Méthodes de l’objet String (1)
• toUpperCase() convertit la chaîne en majuscule
<script>
var ch = 'Ceci est une chaîne de caractères'; // On crée un objet String
alert(ch.toUpperCase()); // On récupère la chaîne en majuscules
</script>
• toLowerCase() convertit la chaîne en minuscule
• trim() supprime les espaces d'une chaîne de caractères
• indexOf() retourne la position de la première sous-chaîne trouvée, et s'il n'y en a pas la valeur -1 est retournée.
<script>
var ch= 'Le JavaScript est plutôt facile';
var result = ch.indexOf('JavaScript');
if (result > -1) {
alert('La chaîne contient le mot "JavaScript" qui débute à la position ' + result);
}
</script> 8
Méthodes de l’objet String (2)• On extrait une chaîne avec substring(), substr() et slice()
• substring(a, b) permet d'extraire une chaîne à partir de la position a (incluse) jusqu'à la position b (exclue).
• substr(a, n) accepte deux paramètres : le premier est la position de début, et ledeuxième le nombre de caractères à extraire.
• slice() extrait la chaîne jusqu'à la fin, en décomptant le nombre de caractèresindiqué.
<script>
var sch = 'JavaScript'.slice(0, 6); //retourne JavaSc
var sch = 'JavaScript'.slice(0, -6); //retourne Java
</script>
• charAt() extrait le nième caractère.
• replace() remplace la première occurrence d’une sous-chaîne par une autre
<script>
var str = "Etudier HTML";var res = str.replace("HTML", "Javascript");
alert(res) ; // donne Etudier Javascript </script> 9
• split() permet de couper une chaîne de caractères à chaque foisqu'une sous-chaîne est rencontrée. Les « morceaux » résultant de lacoupe de la chaîne sont placés dans un tableau.
<script>
var Ch = 'Mohamed,Ali,Hédia';
var Tspl= Ch.split(','); // On coupe à chaque fois qu'une virgule est rencontrée , Tspl est un tableau.
alert(Tspl.length); // 3
</script>
Méthodes de l’objet String (3)
Exemples (1)var datenais = "15/08/1985";
var journais = datenais.substring(0,2)
/* donne le même résultat avec datenais.substr(0,2)
ou datenais.slice(0,2)*/
alert("Le jour de naissance est : "+journais )
var moisnais = datenais.substring(3,5);
/* donne le même résultat avec datenais.substr(3,2) ou
datenais.slice(3,2);
alert("Le mois de naissance est : " +moisnais )
var anneenais = datenais.slice(6,10);
alert("L’année de naissance est :" + anneenais );
/* donne le même résultat avec datenais.slice(-4),ce qui signifie extraction des 4 derniers caractères
11
Exemples (2)
var chaine="azerty";
document.write( chaine.indexOf("z") ) // donne 1
document.write (chaine.indexOf("z",2) )// donne -1
var Ch="Salut Salut" ;
document.write( Ch.indexOf("S")) ; // donne 0
document.write( Ch.lastIndexof("S")) // donne 6
document.write( Ch.charAt(4)) ; // donne t
document.write(Ch.replace("Salut","Bonjour" ))
12
L’objet Date
• Permet de manipuler la date et l’heure
• La date est stockée dans une variable sous la forme d'unechaîne
– Contient le jour, le mois, l'année, l'heure, les minutes, etles secondes
• Les méthodes de l'objet Date permettent d’accéder et demanipuler les éléments de la date
• Créer un objet date : ObjDate = new Date([paramètres])
– ObjDate = new Date() //donne la date et l’heure courante
– Objet_date = new Date() ("December 25, 2017 13:30:00")
//une chaîne de caractères sous la forme "month day, year hour:min:sec"
– Objet_date = new Date(2017, 11, 25 , 13, 30 , 00)
//des entiers sous la forme année,mois-1,jour,h,mn,s13
Méthodes de l’objet date (1)
14
Méthode Description
getDate() rechercher le jour du mois entre 1 et 31
getDay() rechercher le jour de la semaine entre 0 et 6
commençant par dimanche=0
getFullYear() rechercher l'année complète
getHours() rechercher la partie heures entre 0 et 23
getMinutes() rechercher la partie minutes entre 0 et 59
getMonth() rechercher le mois entre 0 et 11
getSeconds() rechercher la partie secondes entre 0 et 59
getTime() rechercher le nbre de millisecondes depuis
01/01/1970
getYear() rechercher le nombre d’année depuis 1900
15
Méthodes de l’objet date (2)Méthode DescriptionsetDate(X) Permet de fixer la valeur du jour du mois
setDay(X) Permet de fixer la valeur du jour de la semaine
setHours(X) Permet de fixer la valeur de l'heure
setMinutes(X) Permet de fixer la valeur des minutes
setMonth(X) Permet de fixer le numéro du mois
setTime(X) définit une date et une heure en ajoutant ou en
soustrayant un nombre spécifié de millisecondes à / à
partir de minuit le 1er janvier 1970.
setInterval(traitement,
délai)
Lance un traitement répété à intervalle régulier de délai
millisecondes. Ce traitement peut être arrêté avec
clearInterval() ou clearTimeout()
setTimeout(traitement,
délai)
Définit une action à exécuter et un délai avant son
exécution
ClearTimeout Interrompt le délai et l'exécution du code associé à ce
délai. Elle interrompt le décompte de setTimeout
Exemplevar d = new Date('Fri Feb 16 2018 16:01:03 GMT+0100 ');
alert(d.getMonth()); // Affiche : 1
alert(d.getDay()); // Affiche : 5
d.setDate(15);
alert(d) // Affiche : Thu Feb 15 2018 16:01:03 GMT+0100
Application (1)
Ecrire un script java qui permet d’extraire le nombre desecondes de la date du système chaque 3 secondes
17
<!DOCTYPE html> <html> <head><title>Test</title>
<script>function lancerTimer() {
t = setInterval("affSec()", 3000);}function affSec()
{dt=new Date();document.write(dt.getSeconds());}
</script></head><body onLoad="lancerTimer();"></script> </body> </html>
Application (2)
<button id="myButton">Annuler le compte à rebours</button>
<script>
var button = document.getElementById('myButton');
var timerID = setTimeout(function() {
// la fonction sera exécutée au bout de 3 secondes
alert("Vous n'êtes pas très réactif vous !");}, 3000);
button.onclick = function() {
clearTimeout(timerID); // Le traitement est annulé
alert("Le compte à rebours a bien été annulé.");
} </script>
18
Application (3)Exemple d'une animation simple
Exemple d'une animation simple (suite)
Exemple d'une animation simple (suite)
L'objet MathToutes les fonctions mathématiques sont regroupées dansl'objet Math
• abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ), min( ), sqrt( ),PI sont les opérations mathématiques habituelles;
• ceil( ) : retourne le plus petit entier supérieur à un nombre;
• floor( ) : retourne le plus grand entier inférieur à un nombre;
• pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;
• random( ) : retourne un nombre aléatoire entre 0 et 1;
• round( ) : arrondi un nombre à l'entier le plus proche.
Exemples
var x = Math.PI; // retourne PI
var y = Math.sqrt(16); // retourne la racine carrée de 16
var x = Math.floor((Math.random() * 10) + 1);
// retourne un nombre aléatoire entre 1 et 10.
Math.round(2.49); // retourne 2
Math.ceil(1.4); //retourne 2
24
• L'objet navigator est un objet qui permet de récupérer desinformations sur le navigateur dont le visiteur utilise.
• Navigator possède une méthode intéressante : la méthodejavaEnabled(), qui détermine si Java a été activé sur le navigateurou pas.
<script>
var x = "Java Enabled: " + navigator.javaEnabled();
document.write(x); // affiche Java Enabled: false si Java est activé
</script>
L'objet navigator
Propriétés de l’objet navigator
• language : retourne la langue définie dans le navigateur ;
• geolocation : retourne un objet « geolocation » qui peut être utilisé pourdéfinir la localisation de l’utilisateur ;
• product : retourne le nom du moteur utilisé par le navigateur ;
• cookieEnabled : détermine si les cookies sont autorisés ou non ;
• appName : retourne le nom du navigateur ;
• appCodeName : retourne le nom de code du navigateur ;
• appVersion : retourne la version du navigateur utilisée ;
• online : détermine si le navigateur est en ligne ou pas ;
• platform : détermine pour quelle plateforme le navigateur est compilé ;
• userAgent : retourne l’en-tête du fichier user-agent envoyé par lenavigateur au serveur ; La valeur retournée, contient des informationsrelatives au nom, à la version et à la plateforme du navigateur.
Exemple 1
message=" Nom : " + navigator.appName + " Code : " + navigator.appCodeName;
alert(message);
26
Exemple 2<script>
// userAgent en minuscule
var userAgent=navigator.userAgent.toLowerCase();
alert(userAgent);
if (userAgent.indexOf("microsoft internet explorer 8.0") > -1)
alert("Votre navigateur est Microsoft Internet Explorer 8.0");
if(userAgent.indexOf("mozilla") > -1)
alert("Votre navigateur est mozilla");
if(/(webkit)/.test(userAgent))
alert("Votre moteur de recherche utilisé par Safari est Webkit");
</script>
27
L’objet Window
• L’objet Window représente la fenêtre du navigateur.
• Toutes les fonctions, variables et objets globauxappartiennent automatiquement à l’objet Window.
• Cependant, l’objet Window est dit implicite. Cela signifie quenous n’aurons généralement pas besoin de le mentionnerpour utiliser les méthodes (ou fonctions globales) etpropriétés (ou variables globales) lui appartenant.
• Par exemple, la fonction alert() est une méthode de l’objetWindow. Cependant, on ne précise jamais Window lorsqu’onutilise alert().
Méthodes de l’objet window
• close() : ferme la fenêtre courante.
• alert() : affiche une fenêtre dans le browser.
• confirm() : renvoie 2 valeurs possibles soit true si le bouton "ok" est activé ou false si le bouton "annuler" est activé.
• prompt() : boîte de dialogue pour la saisie de donnée.
• print() : méthode sert à imprimer le contenu de la page.
• back() : cette méthode produit la même action que si on clique sur le bouton précédent du navigateur internet.
• forward() : cette méthode produit la même action que si on clique sur le bouton suivant du navigateur internet.
• open() : ouvre une nouvelle fenêtre Syntaxe(url, nom, caractéristiques)
30
Exemple 1
nom = prompt("Quel est votre prénom ?", "Saisisser votre prénom")
confNom=confirm("vous validez votre Nom "+nom)
if(confNom)
alert("Vous êtes bien "+nom)
31
Ex : open("", "popup", "width=500, height=500, location=yes")
Argument Rôle Valeurs possible
height, Hauteur de la fenêtre à ouvrir entier
width Largeur de la fenêtre à ouvrir entier
menubar Affichage barre de menu yes, no
toolbar Affichage barre d’outils yes, no
location Affichage barre d’adresse yes, no
resizable Permission de redimensionner la fenêtre yes, no
Les propriétés de l’objet window
32
open("", "popup", "width=200, height=150, location=yes")
Exemple 3
33
Ecrire un script qui, à travers la méthode prompt saisi unmessage qui sera affiché dans une nouvelle fenêtre ayant lescaractéristiques suivantes :largeur=300, hauteur=300, avec affichage des barresd’adresse, et de menu. En donnant la possibilité de laredimensionner.
Application
<html>
<head>
<script>
function EcrireFenetre(message) {
fen =open("","Nouvelle_fenetre","width=300, height=300, location=yes, menubar=yes, resizable=yes");
if (message !="")
fen.document.write(message,"</BR>");
else
alert ("message vide !");
}
mes=prompt("Quel est le message ?"," ");
</script> </head>
<body onLoad="EcrireFenetre(mes);"></body>
</html>
35
L'objet document
• Représente le contenu de la page HTML• Il existe plusieurs propriétés et méthodes qui permettent de
manipuler les éléments d’un documentMéthode Rôle
write() Ecrire dans la fenêtre du document
open() Ouvrir le document
close() Fermer
getElementById() Accès à l'élément HTML par l'attribut Id (l’identificateur) d’une balise
getElementsByName() Accès à l'élément HTML par l'attribut name attribué à une balise
getElementsByTagName
('tag')
Permet de récupérer les éléments par rapport à leur nom de balise. Elle renvoie tous les éléments dont la balise est tag, en tant qu'un tableau.
getSelection() Recherche du texte sélectionné par l'utilisateur dans le document.
getAttribute() Permet de récupérer la valeur de l'attribut passé en paramètre.
setAttribute() Change dynamiquement la valeur d'un attribut d'une balise.
36
<!DOCTYPE html>
<html> <head><title>Test</title>
</head><body>
<script>
function change() {
document.open();
document.write("Nous sommes dans le deuxième document");
}
document.open();
document.write("<a href=\"javascript:change()\">Passer au deuxième document</a>");
document.close(); // peut être implicite
</script>
</body></html>
Etat initial
Etat final
Exemple 1
Exemple 2<!DOCTYPE html>
<head><title>Test</title></head>
<body>
<div id="myDiv"><p>Un peu de texte <a>et un lien</a></p></div>
<script>
var div = document.getElementById('myDiv');
alert(div);
</script></body></html>
37
On parcourt le tableau avec une boucle pour récupérer les éléments.
<script>
var divs = document.getElementsByTagName('div');
for (var i = 0, c = divs.length ; i < c ; i++) {
alert('Element n° ' + (i + 1) + ' : ' + divs[i]);
}
</script>
38
Exemple 3
<!DOCTYPE html>
<html> <head><title>Test</title></head>
<body>
<a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>
<script>
var link = document.getElementById('myLink');
var href = link.getAttribute('href'); // On récupère l'attribut « href »
alert(href);
link.setAttribute('href', 'http://isetsf.rnu.tn');
// on édite modifie la valeur de href
</script></body></html>
39
Exemple 4
40
Propriétés de l'objet document
• title : renvoie le titre de la page courante.
• images[ ] : tableau de toutes les balises <img>.
• forms[ ] : tableau de toutes les balises <form>.
• links[ ] : tableau de toutes les balises <a>.
• linkColor : couleur des liens qui ne sont pas encore visités.
• alinkColor : couleur des liens activés.
• vlinkColor : couleur des liens visités.
41
Exemple 5
<!DOCTYPE html>
<html>
<head><title>Test</title>
</head><body>
<script type="text/javascript">
function change() {
document.open();
document.write("Nous sommes dans le deuxième document");
document.title='doc2';
}
document.open();
document.linkColor="red";
document.alinkColor="yellow";
document.vlinkColor="green";
document.write("<a href=\"javascript:change()\">Passer au deuxième document</a>");
document.close();
</script>
</body></html>
La propriété innerHTML
• La propriété innerHTML permet de récupérer le code HTMLenfant d'un élément sous forme de texte. Ainsi, si des balisessont présentes, innerHTML les retournera sous forme detexte.
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = document.getElementById('myDiv');
alert(div.innerHTML);
</script>
43
Exemple 6
• Définir un nouveau contenu :
document.getElementById('myDiv').innerHTML = '<blockquote>Je mets une citation à la place du paragraphe</blockquote>';
• Ajouter un contenu à celui qui est en place :
document.getElementById('myDiv').innerHTML +=
'et <strong>une portion mise en emphase</strong>.';
44
Exemple 7
45
Document Object Model• DOM est une interface de programmation normalisée par le W3C,
qui permet à des scripts d'examiner et de modifier le contenu du navigateur web.
• Une page web est un document contenant du texte ainsi que desbalises qui permettent de structurer ce document, en décrivantdes éléments comme des titres, des paragraphes, des liens, etc.
• DOM construit un arbre des nœuds dans le document accessiblede JavaScript.
• Il est possible de modifier l’arbre « à tout moment » donc demodifier le contenu de la page.
• DOM est indépendant des plates-formes, des langages deprogrammation et de script.
46
Ce que permet DOM
• Naviguer dans le document• Aller directement sur un nœud
• balise, texte…• Changer la valeur d’un nœud
• balise, attribut, texte…• Créer ou retirer un nœud
• balise, attribut…• Modifier le CSS
• style d’un élément,• entête CSS,• CSS actif.
47
Arbre avec ses nœudsL'arbre contient des nœuds, les nœudspeuvent avoir des fils, et tous lesnœuds ont un parent (sauf la racine).
Soit le code suivant :
<html>
<head>
<title>Exemple</title>
</head>
<body>
<h1>Le DOM </h1>
<p>un texte dans le <i>dom.</i></p>
</body>
</html>
48
Arbre avec ses nœuds (suite)• Ce que nous prenons pour
des espaces sans signification se retrouvent dans le DOM.
• Les nœuds texte figurant avant H1, entre H1 et P, et après P représentent les lignes vides entre ces éléments.
49
Arbre avec ses nœuds (suite)
Document
HTML
HEAD
text TITLE
text
text
text BODY
text H1
text
P
text I
text
text
L’arbre résultant est le suivant :
Le nœud• Les différents types de nœuds reflètent les différentes
catégories de balisage d'un document : éléments, attributs,commentaires, textes.
• Ainsi, toutes les interfaces sur les nœuds disposent despropriétés et méthodes de Node.
51
Propriétés de parcours du DOM
Propriété Description
parentNode le nœud père
childNodes nœuds fils du nœud courant
firstChild le premier nœud fils
lastChild le dernier nœud
previousSibling le nœud frère précèdent
nextSibling nœud frère suivant
52
Exemples– document.body.firstChild ou aussi :
document.body.childNodes[0]
– x= document.body.firstChild
x.parentNode
– document.body.lastChild
– document.body.previousSibling
Propriétés du nœud– nodeName : le nom
– nodeType : valeur numérique souvent à comparer avec lesconstantes suivantes :
• 1 = Node.ELEMENT_NODE
• 2 = Node.ATTRIBUTE_NODE
• 3 = Node.TEXT_NODE
– nodeValue : la valeur
Exemple : <p id="texte">Au revoir</p>
54
Modifier le texte d’un nœud• Pour modifier le texte "Exemple de code" par "bravo"
<script>function modifier(){document.getElementById('idun').firstChild.nodeValue =
'bravo';}</script>
<p id="idun">
Exemple de code <b> ayant <br/>
plusieurs</b> enfants
</p>
<a href="#" onclick="modifier()">modifier</a>
En cliquant su modifier
donne le résultat suivant :
Création de nœuds • Il existe deux manières de créer des nœuds :
– par création depuis l'objet document
– ou par copie d'un élément existant.
• L'élément résultant de ces opérations est un nœud orphelinqu'il faudra greffer à un nœud du document.
• Création d'un nœud élément : createElement()
var noeudDiv = document.createElement('div');
• Création d'un nœud texte : createTextNode()
var noeudTexte = document.createTextNode('le texte à créer');
• Création par copie : cloneNode()
var copie = element.cloneNode(true);
Si le paramètre booléen vaut true, les enfants sont égalementcopiés.
Création de nœuds (suite)• La méthode appendChild permet d'ajouter un nœud enfant à
un élément. Le nœud est ajouté à la suite des enfantsexistants.
• La méthode insertBefore permet d'ajouter un élément avantun des enfants.
• La méthode replaceChild permet de remplacer un nœudenfant de l'élément courant par un autre nœud.
Exemple : ajouter le nœud <i> avant <b>
<p id="un">
Exemple de code
<b> ayant <br/> plusieurs </b>
enfants
</p>
57
1. Créer un nœud <i>
elementi = document.createElement('i')
2. Repérer le nœud <b>
elementb = document.getElementsByTagName('b')[0]
3. Cloner le nœud <b> et ses enfants
noeudb = elementb.cloneNode(true)
4. Ajouter au nœud <i> le nœud <b> et ses enfants
elementi.appendChild(noeudb)
5. Remplacer le nœud <b> original par le nœud <i> modifié
document. getElementsByTagName('p')[0]. replaceChild(elementi,elementb) donne le résultat suivant
:
Exemple
58
Suppression de nœuds • La méthode removeChild permet de supprimer un fils de la
liste des enfants.
Exemple : supprimer le neud <br/>
1. Repérer le nœud à ôter <br/>
elementbr = document.getElementsByTagName('br')[0]
2. Repérer le nœud parent <b>
elementparent =elementbr.parentNode;
3. Retirer le nœud <br/>
ancienbr = elementparent.removeChild(elementbr)
ancienbr conserve une référence au nœud enfant retiré.
Le nœud retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Il peut être réutilisé plus tard dans le code, via la référence à l'objet ancienbr.
donne le résultat suivant :
Le langage JavaScript
Chapitre 3: Gestion des événements
2
Gestionnaire d’événements
• Les événements servent à interagir avec l'utilisateur
– On peut détecter les clics, les modifications de formulaires, …
• Chaque événement a un identifiant
– De la forme onQuelqueChose
– Par exemple : onLoad, onClick, onMouseOver, etc.
• Un événement peut exécuter du code javascript
– Une ou plusieurs instructions, en général un appel de fonction
• Activation :
– <balise … onQuelqueChose="code javascript;">
3
Liste des événements (1)Evénement Objets Description
onabort ImageCet événement a lieu lorsque l'utilisateur interrompt le chargement de l'image
onblur
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
Se produit lorsque l'élément perd le focus, c'est-à-dire que l'utilisateur clique hors de cet élément, celui-ci n'est alors plus sélectionné comme étant l'élément actif.
onchangeFileUpload, Select, Submit, Text, TextArea
Se produit lorsque l'utilisateur modifie le contenu d'un champ de données.
onclick
Button, document, Checkbox, Link, Radio, Reset, Select, Submit
Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
ondblclick document, LinkSe produit lorsque l'utilisateur double-clique sur l'élément associé à l'événement.
ondragdrop windowSe produit lorsque l'utilisateur effectue un glisser-déposer sur la fenêtre du navigateur.
4
Liste des événements (2)onerror Image, window
Se déclenche lorsqu'une erreur apparaît durant le chargement de la page.
onfocus
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, window
Se produit lorsque l'utilisateur donne le focus à un élément, c'est-à-dire que cet élément est sélectionné comme étant l'élément actif
onkeydowndocument, Image, Link, TextArea
Se produit lorsque l'utilisateur appuie sur une touche de son clavier.
onkeypressdocument, Image, Link, TextArea
Se produit lorsque l'utilisateur maintient une touche de son clavier enfoncée.
onkeyupdocument, Image, Link, TextArea
Se produit lorsque l'utilisateur relâche une touche de son clavier préalablement enfoncée.
onload Image, Layer, windowSe produit lorsque le navigateur de l'utilisateur charge la page en cours
onmouseover Area, Layer, LinkSe produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un élément
5
Liste des événements (3)
onmouseOut Area, Layer, LinkSe produit lorsque le curseur de la souris quitte un élément.
onmousemove windowSe déclenche losrque le curseur de la souris se déplace sur le document html
onresize windowSe produit lorsque l'utilisateur redimensionne la fenêtre du navigateur
onselect text, TextareaSe produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans un champ de type "text" ou "textarea"
onsubmit FormSe produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le bouton qui permet d'envoyer le formulaire)
onreset FormPermet de réinitialiser les champs d'un formulaire
onunload windowSe produit lorsque le navigateur de l'utilisateur quitte la page en cours
6
<!DOCTYPE html> <HTML> <HEAD><SCRIPT>function bienvenue() {alert("Bienvenue à cette page");}function au_revoir() {alert("Au revoir");}</SCRIPT></HEAD><BODY onLoad='bienvenue()' >Corps de la page </BODY></HTML>
Exemple (1)
Exemple (2)<span onclick="alert('Hello !');">Cliquez-moi !</span>
Ou :
<span onclick="alert('Voici le contenu de l\'élément que vous avez cliqué :\n\n' + this.innerHTML);">Cliquez-moi !</span>
Ou :
<input id="input" type="text" size="50" value="Cliquez ici !" onfocus="this.value='Appuyez maintenant sur votre touche de tabulation.'; "
onblur="this.value='Cliquez ici !';"/> <br /><br/>
<a href="#" onfocus="document.getElementById('input').value = 'Vous avez maintenant le focus sur le lien, bravo !';">Un lien bidon</a>
7
8
Exemple (3)<!DOCTYPE html> <html><head><script>function modifierContenu(){document.getElementById("texte").innerHTML = " C'est la suite du texte ";document.getElementById("lien").innerHTML = " ";}</script></head><body><div id="texte">Ceci est le début d'un texte</div><div id="lien"><a href="#" onclick="modifierContenu()">lire la suite </a></div></body></html>
9
<!DOCTYPE html> <HTML> <HEAD></HEAD><BODY><A HREF=""onMouseOver='document.images[0].src="gris.jpg"'onMouseOut='document.images[0].src="noir.jpg"'><IMG SRC="noir.jpg"></A></HTML>
Exemple (4)
Evénements sur les formulaires
• Les formulaires constituent un aspect important du HTML.
• Un événement d'un élément de formulaire est déclenché parle navigateur en réaction à une action ou un changementdétecté.
• Certains événements sont spécifiques aux formulaires.
• Les événements déclenchés par des actions dans unformulaire s’appliquent à tous les éléments HTML5, mais plusparticulièrement dans un formulaire.
11
Accès aux formulaires• JavaScript classe les formulaires dans un tableau au fur et à mesure, dans
l'ordre de leur apparition
• forms[ ] : tableau des formulaires déclarés à l’aide de <form>
• Accéder au formulaire par son id :
• Code javascript :
var monForm = document.getElementById("monFormulaire");
– soit par son nom comme indice :document.forms["premier_formul"]
nécessite que la balise <form> ait un attribut name spécifié
– soit par son nom uniquement :document.nom_formulaire
nécessite que la balise <form> ait un attribut name spécifié
12
Accès aux éléments d’un formulaire
JavaScript considère elements[ ] comme étant un tableau descomposants du formulaire (<input ..>, <select ..>, .. ). Donc pouraccéder à un élément du formulaire, il faut suivre sa hiérarchie :
document.nom_formul.elements["nom_champ"]
ou
document.nom_formul .elements[rang]
Il est aussi possible d’accéder à un élémént à partir du nom du formulairepuis le nom de l’élément. Cela nécessite que la balise <form> ait unattribut name spécifié. Idem pour le champ correspondant.
document.nom_formul .nom_champ
Sinon à travers l’id du champ :
document.getElementById("id_champ")
Ou bien accéder directement à un objet via son nom
document.getElementsByName("nom_champ")
13
• Il est préférable d'utiliser le nom des éléments, plutôt que les indices : les noms sont indépendants de l'organisation du formulaire.
• L’utilisation des tableaux forms et elements est nécessaire dans le cas où on veut accéder à un élément de formulaire dont le nom est contenu dans une variable JavaScript :
var nom_du_champ="champ1";document.nom_formul.elements[nom_du_champ]
Remarques
Exemple<!DOCTYPE html>
<head> <title>Formulaire</title>
<script>
function ecrire() {
n=document.getElementById("nom").value;
p=document.getElementById("prenom").value;
document.getElementById("zone").innerHTML="Vous êtes bien "+n+" "+p; }
</script> </head>
<body>
<form>
<p>Votre Nom SVP : <input type="text" id="nom"></p>
<p>Votre Prénom SVP : <input type="text" id="prenom"></p>
<p><input type="button" value="Afficher" onclick="ecrire()" /></p>
</form>
<div id="zone"></div>
</body> </html>
14
15
Les champs de Texte• Une zone de texte est définie par la balise input avec un
type text
• Propriétés :– name | value | defaultvalue | size | maxlength | disabled |
readOnly | class | style
• Méthodes :– focus, blur
• Evénements :– onFocus, onBlur, onChange
<input type="text">
Exemple<FORM>
<INPUT TYPE=text onBlur="alert('Vous avez quitté le champ')">
</FORM>
16
Application
Afficher dans le champ texte "Somme", le résultat de calcul de la sommedes valeurs saisies dans les champs "X" et "Y".
X :
Y :
Somme :
17
Solution<HTML><HEAD><SCRIPT>function somme(){ document.getElementById("C").value=Number(document.getElementById("A").value)+Number(document.getElementById("B").value) } </SCRIPT></HEAD><BODY><form>X: <input type=text id=A onblur="somme() "><BR/>
Y : <input type=text id=B onblur="somme() "><BR/>
Somme : <input type=text id=C onfocus="alert('ceci est un champ calcul') " readonly><BR/></form></BODY></HTML>
18
Les Boutons• Un bouton est défini par la balise input avec un type button
<input type="button" value="Ceci est un bouton">
• Propriétés :
name | value | defaultvalue | size | maxlength | disabled | readOnly | class | style
• Méthodes :
focus | blur | click
• Événements :
onFocus | onBlur | onClick
Exemple<FORM><INPUT TYPE="button" VALUE="Cliquez ici" onClick="alert('Vous avez bien
cliqué ici')"/>
</FORM>
19
Application
Ecrire un script qui permet, à travers la méthode focus() de donner le focus sur un champ texte, une fois le bouton est cliqué.
20
Solution
<script type='text/javascript'>
function donneFocus(id)
{
var element = document.getElementById(id);
element.focus();
}
</script>
<input onclick="input1.focus()" value="donneFocus ->" type="button" />
<input id="input1" type="text" />
21
Les Boutons Radio
• Un Radio bouton est défini par la balise input avec un type radio
<input type= "radio" />
• Propriétés :– name | value | checked | disabled | readOnly | class | style
• Méthodes :– focus | blur | click
• Evénements :– onFocus | onBlur | onClick
22
Application
Ecrire un script permettant de faire le calcul en fonction de l’opérateur sélectionné comme le présente l’exemple suivant :
Solution
<body><script language="JavaScript">function test1(){if (document.forms.ee.op[0].checked==true)
document.forms.ee.v3.value=eval(document.forms.ee.v1.value)+eval(document.forms.ee.v2.value);
if (document.forms.ee.op[1].checked==true)document.forms.ee.v3.value=eval(document.forms.ee.v1.value)-
eval(document.forms.ee.v2.value);if (document.forms.ee.op[2].checked==true)
document.forms.ee.v3.value=eval(document.forms.ee.v1.value)*eval(document.forms.ee.v2.value);
if (document.forms.ee.op[3].checked==true)
document.forms.ee.v3.value=eval(document.forms.ee.v1.value)/eval(document.forms.ee.v2.value);
}</script>
<form name="ee"> <p><input type="text" name="v1" onchange
="test1();"/></p><p><input type="text" name="v2" onchange
="test1();"/></p><p><input type="text" name="v3" readonly/></p>
< <input type="radio" name="op" value="radio" onClick="test1();">
<br />soustraction <input type="radio" name="op" value="radio"
onClick="test1();"> <br />multiplication<input type="radio" name="op" value="radio"
onClick="test1();"> <br />division <input type="radio" name="op" value="radio"
onClick="test1();"> <br />p>addition
<br /></p>
</form> </body>
25
Les Cases à Cocher
• Une case à cocher est définie par la balise input avec un type checkbox
<input type= " checkbox" />
• Propriétés :
– name | checked | disabled | readOnly | class | style
• Méthodes :
– focus | blur | click
• Événements :
– onFocus | onBlur | onClick
26
La liste de sélection (1)
Propriété Description
name indique le nom de la liste déroulante.
Length indique le nombre d'éléments de la liste. S'il est indiqué dans le tag <SELECT>, tous les éléments de la liste seront affichés. Si vous ne
l'indiquez pas un seul apparaîtra dans la boite de la liste déroulante.
selectedIndex indique le rang à partir de 0 de l'élément de la liste qui a été sélectionné par l'utilisateur.
defaultSelected indique l'élément de la liste sélectionné par défaut. C'est lui qui apparaît alors dans la petite boite.
text Indique le texte entre <option> et </option>
value Indique la valeur à l’intérieur de la balise <option> dans la propriété value.
Une liste est définie par la balise select sous la forme :<select > <option> … </option> … </select>
27
• Méthodes :
add | remove | focus | blur
• Evénements :
onFocus | onBlur | onChange
La liste de sélection (2)
28
Application
Ecrire un script permettant de faire le calcul en fonction de l’opérateur sélectionné comme le présente l’exemple suivant :
29
<script language="JavaScript">function calcul(){var g=ee.liste.value;switch (g){case "+" : ee.v3.value=eval(ee.v1.value)+eval(ee.v2.value);break;case "-" : ee.v3.value=eval(ee.v1.value)-eval(ee.v2.value);break;case "*" : ee.v3.value=eval(ee.v1.value)*eval(ee.v2.value);break;case "/" : ee.v3.value=eval(ee.v1.value)/eval(ee.v2.value);break;} } </script><form name="ee"> <p><input type="text" name="v1" /></p><p><input type="text" name="v2" /></p><p><input type="text" name="v3" readonly/></p><p> <label>operateur<select name="liste" id="liste" onClick=" calcul()">
<option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option>
</select> </label> </p> </form>
Solution
30
L'élément textarea
name Nom de la zone
rows Nombre de lignes
cols Nombre de colonnes
disabled Grisage de la zone
readOnly Lecture seule
class Classe de feuille de style
style Style de la liste
Une zone de texte est définie par la balise textarea sous la forme :<textarea > </textarea>
• Méthodes :focus | blur
• Événements :onChange | onScroll | onFocus
Exemple (1)
• Pour désactiver un champ de texte :
<input id="text" type="text" />
<script> var text = document.getElementById('text');
text.disabled = true;
</script>
31
Exemple (2) <label><input type="radio" name="check" value="1" />Case n°1</label><br />
<label><input type="radio" name="check" value="2" />Case n°2</label><br />
<label><input type="radio" name="check" value="3" />Case n°3</label><br />
<label><input type="radio" name="check" value="4" />Case n°4</label> <br />
<br />
<input type="button" value="Afficher la case cochée" onclick="check();" />
<script>
function check()
{ var inputs = document.getElementsByTagName('input'),
inputsLength = inputs.length;
for (var i = 0 ; i < inputsLength ; i++)
{ if (inputs[i].type == 'radio' && inputs[i].checked)
{ alert('La case cochée est la n°'+ inputs[i].value); }
}
} </script>
32
33
Applicationcréer un document HTML qui contient un script qui permet de vérifier une
condition sur un champ texte simple
•si ce mot saisi est de longueur inférieure à 10, on affiche une
alerte positive (cas1)
•Sinon on affiche une alerte et on réinitialise le formulaire (cas2)
cas1cas2
Manipuler les classes CSS des éléments lors d'événements
• Il est possible en JavaScript de manipuler les classes CSS deséléments lors d'évènements, par exemple un clic.
• La plus simple méthode pour sélectionner un élément dansune page est d'utiliser son identifiant, car il est unique.
• Pour cela, on se sert de la directivedocument.getElementById(Id).
• Pour changer les classes d'un élément, on modifie la propriété« className » de celui-ci.
La propriété className • Cette propriété permet d'agir sur l'attribut class d'un élément.
• Cet attribut permet d'associer des styles définis dans desfeuilles de style aux éléments.
• On peut associer plusieurs classes CSS à un élément en lesséparant par un espace.
35
36
Exemple<!DOCTYPE html>
<html>
<head>
<title>Ex</title>
<style>
.gros{font-size:24px;}
</style>
<script>
function aggrandir() {
document.getElementById('logo').className = 'gros';
}
</script>
</head>
<body>
<div id="logo" onmouseover="aggrandir()">
Un texte ...
</div>
</body>
</html>
La propriété style• La propriété style permet d'accéder finement aux styles qui
concernent un élément particulier, de façon similaire à
l'attribut style dans une balise.
• Les propriété CSS qui sont faites de mots composés, tel que
background-color ne peuvent s'écrire ainsi en JavaScript, c'est
pourquoi il faut supprimer le tiret (signe moins) et mettre en
majuscule la lettre qui le suit, par exemple: backgroundColor.
37
38
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Ex</title>
<script>
function styler() {
var e = document.getElementById('logo');
e.style.color = 'red';
e.style.backgroundColor = 'yellow';
e.style.fontSize = '12px';
}
</script>
</head>
<body>
<div id="logo" onmouseover="styler()">
Un texte ...
</div>
</body>
</html>
Application
Créer un script dans lequel la couleur du fonddu champ du formulaire change lorsque soncontenu change.
39
Etat initial : Etat final :
Solution<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
input.normal {
border:1px solid black;
background-color:red;
color:white;
}
input.modif {
border:1px solid black;
background-color:blue;
color:white;
}
</style>
<script>
function changer(){
var e =
document.getElementById('text1');
e.className = 'modif';
}
</script>
</head>
<body>
<form name="Form1">
Le nom est : <input type="text"
id="text1" size="20" class="normal"
onchange="changer()">
</form>
</body>
</html>
Gestion globale des événements
• event fait partie de la gestion globale des événements par lenavigateur. Il possède des méthodes et propriété.
• Quand on utilise la création dynamique d'évènements leparamètre est implicitement déclaré.
Méthodes Description
preventDefault()
empêche l'action du navigateur par défaut de se
produire. Comme l'envoie d'un formulaire suite auclic du bouton submit lié au formulaire.
stopPropagation()
limite l'évènement à l'Élément cible afin d'éviter lapropagation aux parents afin d'éviter pour chaqueparent possédant le même évènement ledéclenchement de la fonction associée.
Capture des événements de la souris et du clavier
propriété description
type retourne le type de l'évènement (onclick; onmoseover...etc)
currentTarget retourne l'Élément qui a déclenché l'évènement
targetretourne l'Élément survolé au déclenchement de l' évènement dont le parent est l‘élément qui possède l'évènement.
buttonretourne le bouton de la souris qui a été cliqué (0:gauche; 1:centre; 2:droite)
keyCoderécupère le code de caractère ASCII de la touche qui a généré l'événement pour onkeydown et onkeyup.
keyrécupère la valeur de la touche qui a généré l'événement pour onkeypress , onkedown et onkeyup.
relatedTarget retourne l'élément lié à l'élément qui a déclenché l'événement
Exemple<!DOCTYPE html>
<script>
function couleur(evt){
var couleur_cible=evt.currentTarget.style.backgroundColor; alert(couleur_cible);
}
</script>
</head>
<body>
<div onclick='couleur(event)' style='height:50px;width:50px;background-color:green'>cliquer ici</div>
</body>
</html>
La méthode addEventListener (1)
44
• Il est possible d'intercepter le flux d’événements avec desécouteurs d’événements.
• Pour ajouter un écouteur à un objet HTML il suffit d'utiliser laméthode addEventListener.
• La méthode addEventListener réalise l’abonnement d’une fonctionà un événement donné pour l’objet sur lequel elle est invoquée .
Syntaxe n° 1 : document.addEventListener(événement, fonction, capture)
La méthode addEventListener (2)
45
événement Paramètre obligatoire qui spécifie le nom de l’événement.
Note: Ne pas utiliser le préfixe "on". Par exemple, utiliser "click" au lieude "onclick".
fonction Paramètre obligatoire qui spécifie la fonction à executer suite à l’occurrence de l’ événement,
capture Paramètre optionnel correspond à une valeur logique spécifiant la manière de propagation de l’événement:- true le gestionnaire d’événement est lancé d’une manièredescendante
- false le gestionnaire d’événement est lancé d’une manièreascendante
<!DOCTYPE html>
<html>
<body>
<p>Cet exemple utilise la méthode addEventListener() pour ajouter 2 clics events au document.</p>
<p>Cliquer n’importe où dans le document.</p>
<script>
document.addEventListener("click", maFonction);
document.addEventListener("click", autreFonction);
function maFonction() {
alert ("Hello World!")
}
function autreFonction() {
alert ("Cette fonction est aussi executée!")
}
</script> </body></html> 46
Exemple (1)
La méthode addEventListener (3)
47
Syntaxe n° 2 : Une méthode qui attache un gestionnaired'événements à un élément specifique.
element.element.addEventListener(événement, fonction, capture)
<!DOCTYPE html>
<html>
<body>
<p> Exemple illustratif.</p>
<button id="Btn">Essayer</button>
<p id="demo"></p>
<script>
document.getElementById("Btn").addEventListener("click", maFonction);
function maFonction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html> 48
Exemple (1)
Exemple (2)
<form id="myForm">
<input type="text" value="Entrez un texte" /><br /><br />
<input type="submit" value="Submit !" />
<input type="reset" value="Reset !" />
</form>
<script>
var myForm = document.getElementById('myForm'); myForm.addEventListener('submit', function() {
alert('Vous avez envoyé le formulaire !\n\nMais celui-ci a été bloqué pour que vous ne changiez pas de page.');
});
myForm.addEventListener('reset', function() {
alert('Vous avez réinitialisé le formulaire !');
});
</script>
49
La méthode removeEventListener()
• C’est une méthode qui supprime un gestionnaired'événements qui a été attaché à une méthodeaddEventListener().
• Les méthodes addEventListener () et removeEventListener ()ne sont pas prises en charge dans Internet Explorer 8 etversions antérieures.
<p> Ce document a un gestionnaire d'événements onmousemove qui affiche un nombre aléatoire chaque fois que vous déplacez votre souris dans ce document. </p>
<p> Cliquez sur le bouton pour supprimer le gestionnaire d'événements. </p>
<button onclick="removeHandler()">Stopper</button>
<p id="demo"></p>
<script>
document.addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.removeEventListener("mousemove", myFunction);
}
</script>
51
Exemple
Le langage JavaScript
Chapitre 4: Codage JavaScript pour l'interface tactile et
des API HTML5 supplémentaires
Présentation des interfaces tactiles et des mouvements
• Les appareils mobiles d'aujourd'hui et ungrand nombre d'écrans PC intègrent latechnologie d'écran tactile.
– permet à de nombreux utilisateurs d'interagir plusfacilement avec les périphériques et leursprogrammes.
– Un simple toucher du doigt sélectionne un objetou appuie sur un bouton, un balayage du doigt faitdéfiler une liste de photos sur l'écran.
Présentation des interfaces tactiles et des mouvements (suite)
• Un balayage du doigt s'appelle un mouvement
– un seul doigt (un toucher, un appui prolongé, etc.)
– ou un doigt et le pouce
• L'action de l'application en réponse à unmouvement s'appelle un événement tactile.
• On utilise JavaScript pour créer des événementstactiles dans les applications tactiles.
Réponse à l'interface tactile• Un dispositif tactile interprète les mouvements
des doigts sur un écran tactile, et les convertiten instructions pour une application.
• Il existe deux principaux types d'écrans tactiles
– Résistif : composé de plusieurs couches ; Descapteurs détectent la pression (écrans tactilesutilisés dans les hôpitaux et les restaurants.
– Capacitif : utilise des électrodes pour détecter lesobjets qui touchent l'écran (smartphones etmoniteurs d'ordinateurs.
• De nombreux mouvements ont des équivalents souris.
Présentation des mouvements tactiles
Mouvement Équivalent de la souris
Description
Appui simple Clic gauche Taper sur l'écran avec un doigt
Double appui Double-clic gauche Appuyer rapidement deux fois sur l'écran avec un doigt
Appui avec deux doigts
N/A Appuyer avec deux doigts sur l'écran simultanément
Appuyer et toucher
Clic droit Maintenir un doigt appuyé et tapez avec un autre
Appui prolongé Clic droit Maintenir un doigt appuyé sur l'écran, puis relâcher
Présentation des mouvements tactiles (suite)
Mouvement Équivalent de la souris
Description
Sélection/faire glisser
Faire glisser la souris (sélection)
Faire glisser un doigt vers la gauche ou vers la droite
Panoramiqueinertiel
Défilement Maintenir un doigt appuyé sur l'écran, puis faire glisser le doigt
Balayer Reculer ou avancerPanoramique haut ou bas
Appuyer sur l'écran avec un doigt, le déplacer dans une direction quelconque, puis soulever le doigt pour laisser défiler
Rotation N/A Placer deux doigts sur un objet à l'écran et les déplacer dans un mouvement circulaire
Zoom CTRL + molette de la souris vers l'avantou vers l'arrière
Pincer un objet vers l'intérieur ou l'extérieur
touchstart
• Chaque fois qu'un doigt touche l'écran, un événement touchstart est déclenché.
<body>
<h1>touchstart Event</h1>
<p ontouchstart="myFunction()">Toucher ce paragraphe </p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}</script>
</body>
touchmove
• Lorsqu'un doigt se déplace sur la surface de l'écran, un événementtouchmove est déclenché pour suivre le mouvement des doigts.
<body>
<h1>touchmove Event</h1>
<p ontouchmove="myFunction(event)">Toucher ce paragraphe, et faire un déplacement. Les coordonnées correspondants seront affichés.</p>
<p id="demo"></p>
<script> function myFunction(event) {
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
document.getElementById("demo").innerHTML = x + ", " + y;
}
</script></body>
touchend
• Lorsqu’on soulève le doigt de l'écran, l'événement touchend est déclenché.
<body><h1>touchend Event</h1>
<p ontouchend="myFunction()">Toucher ce paragraphe, puis libérer.</p>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
touchcancel
• L'événement touchcancel est déclenché lorsque le périphériquelance une autre application.
<body><h1>touchcancel Event</h1>
<p ontouchcancel="myFunction()">Touchez ce paragraphe pendant quevous faites quelque chose qui va interrompre l'événement. Différentsappareils vont interrompre le contact à différentes actions.</p>
<p id="demo"></p>
<script> function myFunction() {
document.getElementById("demo").innerHTML = "Touch Cancelled";
}
</script>
</body>
Object tactile et Touchlist
• En JavaScript, l'objet tactile détecte lesentrées sur des périphériques à interactiontactile. Les objets tactiles sont référencés danstouchlist qui inclut tous les pointsde contact sur un écran tactile.
• Un appui simple contient une entrée dansl'objet touchlist, alors qu'un mouvementà trois doigts comporte un total de troisentrées.
Touchlists
• touches : liste de tous les points de contact actuellement activés sur l'écran.
• targetTouches : liste des points de contact actuellement activés à l'écran et dont l'événement .touchstart a été déclenché sur le même nœud (à l'intérieur du même élément cible comme élément cible actuel).
• changedTouches : liste des points de contact qui ont déclenché l'événement actuel ; par exemple, dans un événement touchend, le doigt a été retiré.
Exemple 1
<body ontouchstart="countTouches(event)" ontouchend="countTouches(event)">
<p>Toucher n’importe où dans ce document.</p>
<p>Le nombre de touches dans le document est <span id="demo">0</span>.</p>
<script>
function countTouches(event) {
var x = event.touches.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
Exemple 2
<body ontouchstart="countTouches(event)" ontouchend="countTouches(event)">
<p>Toucher n’importe quel élément dans cette page.</p>
<p>Le nombre de touches dans le document est <span id="demo">0</span>.</p>
<script>
function countTouches(event) {
var x = event.targetTouches.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
Exemple 3<!DOCTYPE html> <head><title>Détecter l'écran tactile</title>
<style> #canvas{background-color: dodgerblue;} </style>
<script>
function init() {
var canv = document.getElementById("canvas");
canv.addEventListener("touchstart", detect1);
canv.addEventListener("mousedown", detect2); }
function detect1() {
document.getElementById("demo").innerHTML = "Appareil à écran tactile détecté !"; }
function detect2(){
document.getElementById("demo").innerHTML = "Aucun appareil à écran tactile détecté !";
}
</script></head>
<body onload="init()">
<canvas id="canvas"></canvas> <p id="demo"></p> </body></html>
Événements de mouvement
• Les événements de mouvement sontdéclenchés pour des mouvements à plusieursdoigts. Les événements de mouvementprincipaux sont :
– Tout nouveau mouvement avec deux doigtsdéclenche l'événement gesturestart.
– Lorsque deux doigts se déplacent sur l'écran, unévénement gesturechange se produit.
– Lorsque vous soulevez les deux doigtsde l'écran, l'événement gestureend
est déclenché.
Propriétés de mise à l'échelle et de rotation
• scale : Indique le degré de zoom d'unpincement à deux doigts qui s'est produit.
• rotation : Indique le degré de rotation avec deux doigts qui s'est produit.
Codage des API HTML5 supplémentaires
• La collaboration WHATWG (Web HypertextApplication Technology Working Group) gèreune spécification HTML en cours dedéveloppement intégrant les API qui nefaisaient pas partie à l'origine de laspécification HTML5.
• Il s'agit notamment des API degéolocalisation, Web Worker, WebSockets etde fichier.
API Geolocation
• Définit une interface qui fournit la localisationd'un périphérique, généralement à l'aide descoordonnées de latitude et de longitude
• L'API soumet la latitude et la longitudeà JavaScript dans une page Web à l'aidede l'objet de géolocalisation
Méthodes de géolocalisation
• getCurrentPosition : obtient la positiongéographique actuelle du périphérique.
• watchPosition : Surveille l'évolution dela position du périphérique dans le tempset génère un événement si un changement seproduit.
• L'appel de clearWatch arrête la surveillance.
Exemple d'appel de getCurrentPosition
<body onload="loc()">
<script>
function loc(){
navigator.geolocation.getCurrentPosition(fctAff);
}
function fctAff(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("d1").innerHTML="Latitude :
"+latitude+" Longitude : "+longitude ;
}
</script>
<div id="d1"></div>
</body>
Exemple d'appel de watchPosition
<body onload="loc()">
<script>
function loc(){
navigator.geolocation.getCurrentPosition(fctAff); }
function MAJLocation(){
watchID = navigator.geolocation.watchPosition(fctAff); }
function fctAff(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
document.getElementById("d1").innerHTML="Latitude : "+latitude+"
longitude : "+longitude ; }
</script>
<div id="d1"></div>
<form>
<input type="button" onclick="MAJLocation();" value="MAJ Position"/>
</form>
</body>
Web Workers• Un thread ou fil (d'exécution) ou tâche est similaire à un
processus car tous deux représentent l'exécution d'unensemble d'instructions.
• Dans le cas d'une interface graphique, les interactions del'utilisateur avec le processus, par l'intermédiaire despériphériques d'entrée, sont gérées par un thread.
• Tandis que les calculs lourds (en termes de temps decalcul) sont gérés par un ou plusieurs autres threads.
• Cette technique est avantageuse dans ce cas, carl'utilisateur peut continuer d'interagir avec le programmemême lorsque celui-ci est en train d'exécuter une tâche.
Web Workers (suite)
• Depuis 2015, JavaScript est devenu un langage qui estbasé sur plusieurs threads.
• Un Web Worker est une façon d’appeler un scriptJavaScript qui va s’exécuter dans un thread différent decelui du script qui le crée. Il est possible pour les deuxscripts de communiquer ensemble via l’envoi et laréception de messages.
• Les traitements Web (Web Workers) sont des scripts quis'exécutent en arrière-plan, qui effectuent des calculs oud'autres actions rendant l'interface utilisateur plusréactive.
Web Workers (suite)
• Les Web Workers ne sont pas fait pour manipuler leDOM. On ne pourra pas utiliser getElementById, parexemple, dans le script.
• Un Web Worker n’aura pas accès aux fonctions alertou prompt mais on peut tout à fait utiliserconsole.log.
Ex : console.log(" c’est un message ");
Web Workers (suite)
• Pour utiliser un traitement Web, on doitd'abord créer un objet Worker dans ledocument HTML principal, comme suit :
– var worker = new Worker('script_worker.js');
• Lorsque le navigateur interprète cette ligne, ilcrée un thread de travail, puis il commencepar la méthode suivante :
– worker.postMessage();
Exemple de Web Workers• Page1.html :<script>
var worker = new Worker('PageScript.js');
var info = 'Web Workers';
// Envoyer un message
worker.postMessage(info);
// Recevoir un message du traitement
worker.addEventListener('message', fct) ;
function fct(event) {
// Effectuer une action
console.log(event.data);
};
</script>
• PageScript.js:onmessage = f;
function f(event) {
var mes= event.data;
var resultat = 'Bonjour ' + mes ;
postMessage(resultat);
/* transmission des informationsau moyen de messages, enexécutant le code d'un fichierJavaScript distinct dudocument HTML principal. */
};
Utilisation de l'API de fichier pour les téléchargements de fichiers
• L’API File permet à un navigateur ou à uneapplication de télécharger des fichiers dansl'espace de stockage local vers un serveurdistant sans l'aide d'un plug-in
Interfaces de l'API File
• File : Inclut des attributs d'informations enlecture seule au sujet d'un fichier individuel,par exemple son nom et type de support,et l'associe au fichier comme une URL
• FileList : Une séquence d'objets File detype tableau ; comprend le glisser-déposerd'un dossier de fichiers depuis l'espace destockage local
• Blob : Fournit un accès aux données binairesbrutes
• FileReader : Fournit des méthodes pour lireet afficher un fichier
Interfaces de l'API File
• Il faut utiliser l'élément input type="file"
pour obtenir la liste des objets Filesélectionnés comme un objet FileList avecl’option multiple.
Exemple 1<p> Exemple file</p>
<input type="file" id="f1" multiple />
<button id="Btn">Ajouter à l'affichage</button>
<p id="demo"> </p>
<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById("Btn").addEventListener("click", maFonction);
function maFonction() {
document.getElementById("demo").innerHTML += document.getElementById("f1").files[0].name; }
} else
{ alert('Ce navigateur ne prend pas en charge les API de fichier.'); }
</script>
Exemple 2<style> .im { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }</style>
<input type="file" id="f1" multiple />
<p id="demo"> </p>
<script>
document.getElementById("f1").addEventListener("change", maFonction);
function maFonction() {
var r = new FileReader();
var fl=document.getElementById('f1').files[0];
r.readAsDataURL(fl);
/* readAsDataURL démarre la lecture du contenu indiqué. Une fois que la lecture est terminée, l'attribut result contient une URL de données qui représente les données du fichier. */
r.onload = function(){ document.getElementById("demo").innerHTML ='<img class="im" src="'+r.result+'" />';
}
}
</script>
Chapitre 5 : JSON : JavaScript Object
Notation
Introduction
• JSON est une syntaxe qui sert à stocker et échanger desdonnées.
• Il propose un format texte indépendant du langage deprogrammation utilisé pour le manipuler.
• Initialement créé pour la sérialisation (≈ organisation) etl’échange d’objets JavaScript.
• Il est utilisé pour la transmission des données entre un serveuret des applications web.
• C’est que, JSON est du texte, et n'importe quel objetJavaScript peut être converti en JSON, puis envoyer JSON auserveur.
• C’est un langage pour échanger des données semi-structurées(exemple : image, documents composés) et structurées(données simples).
2
Caractéristiques de JSON
• JSON est facile à lire et à écrire.
• Il s'agit d'un format d'échange de texte léger.
• JSON est indépendant de tout langage de
programmation.
3
Les types de donnéesJSON supporte plusieurs types de données :
• Object : est composé de paires nom/valeur, chacune étantséparé par une virgule, entourées par des accolades.
• Numérique : nombre entier ou flottant
• Chaîne de caractères : ensemble de caractères Unicode (saufune double quote et un antislash) entouré par des doublesguillemets
• Booléen : true ou false
• Tableau : un ensemble ordonné de valeurs entouré par descrochets. Les types des valeurs d'un tableau peuvent êtredifférents.
• La valeur null
Exemple• L'exemple suivant montre comment utiliser JSON pour stocker des
informations relatives aux livres en fonction de leur sujet et de leur
édition :
5
{
"livre": [
]
}
{
"id":"01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id":"07",
"language": "C++",
"edition": "second"
"author": "E.Balagurusamy"
}
Syntaxe (1)
• La syntaxe JSON est essentiellement considérée comme un sous-
ensemble de la syntaxe JavaScript
• Elle comporte les points suivants :
– Les données sont représentées par des paires nom / valeur.
– Les accolades contiennent des objets et chaque nom est suivi de :
(deux points), les paires nom / valeur sont séparées par une ,(virgule).
– Les crochets supportent les tableaux et les valeurs sont séparées
par une , (virgule).
Exemple :
var employe1 = { nom:"Mohamed", age: 34, salaire: 18000 };
6
Illustrations (1)
On peut intégrer Le code suivant dans un fichier html
<html>
<head> <title> Exemple 1 JSON </title> </head>
<body>
<script>
var employe1 = {nom:"Mohamed",age:34,salaire:18000};
document.write ("<h3> Nom= "+employe1.nom+"</ h3>");
document.write ("<h4> Age= "+employe1.age+"</ h4>");
document.write ("<h4> Salaire= "+employe1.salaire+"</ h4>");
</script></body> </html>
Illustrations (2)
Exemple 2 :
<html> <head> <title> exemple 2 JSON </title> </head>
<body>
<script>
var employe1 = { nom : "Mohamed", age : 34, salaire : 18000 };
var employe2 ={ nom : "Salah", age : 31, salaire : 12000 };
var employe3 ={ nom : "Hèdi", age : 34, salaire : 16000 };
var objet1 = { emp1:employe1, emp2:employe2, emp3:employe3};
document.write("<h3>Nom= "+objet1.emp1.nom+"</h3>");
</script> </body> </html>
Syntaxe (2) • Nombre:
– var json-object-name = {string : number_value, .......}
– Exemple: var obj = {"marks": 97}
• Chaîne:
– var json-object-name = { string : "string value", .......}
– Exemple: var obj = {name: "Ali"}
• Booléen:
– var json-object-name = { string : true/false, .......}
– Exemple: var obj = {"name": "Amit", "marks": 97, "distinction": true}
• Tableau:
– [ value, .......]
– Exemple:
{ "books": [{ "language":"Java" , "edition":"second" },
{ "language":"C++" , "lastName":"fifth" }, { "language":"C" ,
"lastName":"third" } ] } 9
Syntaxe (3)
• Objet:
– { string : value, .......}
– Exemple:
var livre = { "id": "011A",
"langage": "JAVA",
"prix": 500 }
10
Exemple (1)
<html> <head> <title> exemple JSON </title> </head>
<body>
<script>
var objet1 = {
finance : [
{ nom : "Mohamed", age : 34, salaire : 18000 },
{ nom : "Salah", age : 31, salaire : 12000 }
]
}
document.write ("<h3> Nom=" + objet1.finance[0].nom + "</h3>");
document.write ("<h4> Age=" + objet1.finance[0].age + "</h4>");
document.write ("<h4> Salaire=" + objet1.finance[0].salaire + "</h4>");
</script> </body> </html>
Exemple (2)
<html> <head> <title> exemple JSON </title> </head>
<body>
<script>
var objet1 = {
finance : [
{ nom : "Mohamed", age : 34, salaire : 18000 },
{ nom : "Salah", age : 31, salaire : 12000 }
]
}
for(i=0;i<objet1.finance.length;i++){
document.write ("<h3> Nom=" + objet1.finance[i].nom + "</ h3>");
document.write ("<h4> Age=" + objet1.finance[i].age + "</ h4>");
document.write ("<h4> Salaire=" + objet1.finance[i].salaire + "</ h4>");}
</script> </body> </html>
Exemples (3)<body> <script>
var objet1 = {
finance : [
{ nom : "Mohamed", age : 34, salaire : 18000 },
{ nom : "Salah", age : 31, salaire : 12000 } ],
informatique : [
{ nom : "Hèdi", age : 34, salaire : 16000 },
{ nom : "Alia", age : 30, salaire : 18000 },
{ nom : "Hèla", age : 32, salaire : 12000 }
] }
document.write ("<h2>Finance</h2>");
for(i=0;i<objet1.finance.length;i++){
document.write ("<h3> Nom=" + objet1.finance[i].nom + "</ h3>");
document.write ("<h4> Age=" + objet1.finance[i].age + "</ h4>");
document.write ("<h4> Salaire=" + objet1.finance[i].salaire + "</ h4>");}
document.write ("<h2>Informatique</h2>");
for(i=0;i<objet1.informatique.length;i++){
document.write ("<h3> Nom=" + objet1.informatique[i].nom + "</ h3>");
document.write ("<h4> Age=" + objet1.informatique[i].age + "</ h4>");
document.write ("<h4> Salaire=" + objet1.informatique[i].salaire + "</ h4>");}
</script> </body>
JSON.parse()
• La méthode JSON.parse() permet de créer une chaîne de caractères
JavaScript contenant une syntaxe JSON.
Exemple
<body> <script>
var text ='{"employes":['+'{"nom" : "Mohamed", "age" : 34, "salaire" : 18000
},'+ '{ "nom" : "Salah", "age" : 31, "salaire" : 12000 }]}';
//les doubles quotes sont indispensables pour les noms.
var obj = JSON.parse(text);
document.write(obj.employes[1].nom + " **** " + obj.employes[1].salaire)
</script>
</body>
JSON.stringify()
• La méthode JSON. stringify() permet de convertir une valeurJavaScript en une chaîne JSON
Exemple
<body>
<script>
var employes= new Array();
employes[0]="Mohamed";
employes[1]="Salah";
var obj = JSON.stringify(employes);
document.write(obj) ;
</script>
</body>
Chapitre 6 : Notions générales sur
XML
Les limites de HTML
• Un balisage prédéfini et fixe.
• HTML ne permet pas de décrire le contenu(sémantique) d'un document (on ne peut pasavoir une balise <NOM> mais seulement<H3>, par exemple, ou <H3 CLASS="nom">)
Beaucoup de balises de description de formes(b, center, etc.) et peu de balises à caractèressémantiques (title, etc).
Définition de XML
• XML : eXtensible Markup Language
• Il est un sous-ensemble de SGML (Standardized General
Markup Langage) développé par IBM en 1969.
– XML n’est pas un langage de programmation.
– Un langage permettant de mettre en forme (markup)
des documents grâce à des balises.
Comparaison entre HTML et XML
• HTML et XML partagent des caractéristiques communes :– fonctionnent avec des balises.
– indépendants de la plateforme.
– Ils sont en mode texte.
• XML est un langage de balises comme le HTML mais il estextensible, évolutif et ses balises ne sont pas prédéfinies :c'est le développeur qui doit définir ses propres balisessous forme d’un arbre.
• Attention, XML ne remplace jamais HTML, XML et HTML secomplètent
Objectif de XML
• XML permet d'afficher un même document sur des applications ou des périphériques différents sans pour autant nécessiter de créer autant de versions du document que l'on nécessite de représentations
Prologue
Élément racine
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- ceci est une carte de visite -->
<carteDeVisite>
<prénom>Mohamed</prénom>
<nom>Tounsi</nom>
<adresse>
<numéro>42</numéro>
<rue type="avenue">Magida Boulila</rue>
<ville codepostal="3002">Sfax</ville>
</adresse>
<note>
Enseigne <clé>XML</clé> à l’ISET de Sfax
</note>
</carteDeVisite>
Structure d’un document XML
Commentaire
Structure d’un document XML
• La première partie : appelée prologue permet d'indiquer laversion de la norme XML utilisée pour créer le documentainsi que le jeu de caractères (cette indication est obligatoire).
<?xml version="1.0" encoding="ISO-8859-1"?>– xml version="1.0" indique au navigateur que ce qui suit est un
document XML selon sa version 1.0.
– Encoding="ISO-8859-1" : représente le jeu de caractère pour lesfrancophones et qui accepte les caractères accentués.
– Jeux de caractères possibles :• ISO 8859/1 : codage sur 8 bits (256 caractères, le 8eme bit code les accents)
• Unicode : 16 bits permet de coder l'arabe, le chinois, ...
Structure d’un document XML
• La deuxième partie : est une déclaration de type dedocument (à l'aide d'un fichier annexe appelé DTD :Document Type Definition ou le standard XSD : XMLSchema)
<!DOCTYPE element_racine [
sous.ensemble.interne
]>
• La troisième partie : l'arbre des éléments (nœuds). Unarbre a généralement une et une seule racine. C'est àpartir de cette balise que se développe l'arborescence dudocument.
< element_racine >
…….
</element_racine >
Structure d’un document XML
• Les noeuds d'un document XML peuvent être
du type :
– Document
– Element (un élément)
– Attr (un attribut)
– Text (texte)
– Comment (commentaires)
– …
Anatomie d'un document XML
• Un début de balise est soit < soit &
• Une fin de balise est soit > soit ;
• Les caractères apostrophe ' et guillemet " servent aussi dans les balises
• Tout ce qui n'est pas balisage est du contenu.
• La balise doit être fermée avec : </nom_de_la_balise>
Balisage d’un élément
• Un document n'a qu'un seul élément racine.
• Les autres éléments y sont inclus.
• Un élément est constitué :
– d’une balise ouvrante
– d’un contenu
– d’une balise fermante
Ex :<Nom> Ali </Nom>
Balise Contenu BaliseOuvrante fermante
Balisage d’un élément vide
• Elément vide :
<élément.vide/>
Ex
• <saut.de.ligne/>
• <graphisme source="fichier.gif"/>
Balisage d’un attribut
• Les balises ouvrantes d'éléments peuvent inclure des attributs
facultatifs ou obligatoires.
• Forme :
<nom.type.élément nom.attribut="valeur.attribut">
– EX:
<PRIX devise ="EUR" > 22 </PRIX>
Balise ouvranteBalise
fermanteContenu
Nom de
l’élémentAttribut
Balisage d’un attribut (suite)
Exemples :
• <fruit saveur="acide">
• <FACTURE code ="001">
• <pageAccueil>
<paragraphe numéro="premier">
C'est le premier paragraphe.
</paragraphe>
<paragraphe numéro="second" couleur="rouge">
C'est le second paragraphe.
</paragraphe>
</pageAccueil>
Attribut
• Quand utiliser les attributs?
• Valeur unique de type simple (information
monovaluée)
• Quand utiliser les éléments?
• Valeur de type complexe(énumérations, possède des
propriétés)
Exemple<messages>
<note id="501">
<to>Mohamed</to>
<from>Ali</from>
<entete>Rappel</entete>
<corps> Ne m'oublie pas ce week-end! </corps>
</note>
<note id="502">
<to>Sarra</to>
<from>Hèdia</from>
< entete>Demande</ entete> >
< corps>Ne soit pas en retard</corps >
</note>
</messages>
Commentaire
• Commentaires
– <!-- voici un commentaire -->
– <!-- commentaire relatif à <para> et <page> -->
Exemple 1
FACTURE
CLIENT
PRODUITS
LIVRAISON
Exemple 1 (suite)
FACTURE
CLIENT LIVRAISON
NOM ADRESSE
PRODUIT PRODUIT
NOM QUANTITE PRIX
………
Exemple 1 (suite)<?xml version="1.0" ?>
<FACTURE code="001">
<CLIENT>
<nom>MOHAMED ALI</nom>
<adresse>ROUTE DE TUNIS KM 4 SFAX</adresse>
<dateliv>01/05/2009</dateliv>
</CLIENT>
<LIVRAISON>
<nom>CD-RW</nom>
<quantite>100</quantite>
<prix>1 000</prix>
</LIVRAISON>
<LIVRAISON>
<nom>Cable SCSI</nom>
<quantite>1</quantite>
<prix>22 000</prix>
</LIVRAISON>
Exemple 1 (suite)<LIVRAISON>
<nom>Disque Dur de 20Go</nom>
<quantite>1</quantite>
<prix>120 000</prix>
</LIVRAISON>
</FACTURE>
22
Exemple2
22
XML: Des BD aux Services Web
Georges Gardarin
1. Introduction
Ces dernières années ont vu l'ouverture des systèmesd'information à l'Internet. Alors que depuis les années1970, ces systèmes se développaient souvent parapplications plus ou moins autonomes, le chocInternet …
Ainsi, on a vu apparaître une myriade de technologiesnouvelles attrayantes mais peu structurantes voirperturbantes. Certaines n'ont guère survécues.D'autres ont laissé des systèmes peu fiables et peusécurisés. …
L'urbanisation passe avant tout par la standardisationdes échanges : il faut s'appuyer sur des standardsouverts, solides, lisibles, sécurisés, capable d'assurerl'interopérabilité avec l'Internet et les systèmesd'information. XML, "langua franca" …
2. La société ProXML
Titre
Auteur
Section
Paragraphe
Paragraphe
Paragraphe
Section
23
Exemple2 (suite)
2424
Les règles de composition des noms : Les noms peuvent contenir des lettres, des chiffres ou d'autres
caractères.
Les noms ne peuvent pas débuter par un nombre ou un signe de
ponctuation.
Les noms ne peuvent pas commencer par les lettres xml (ou XML
ou Xml).
Les noms ne peuvent pas contenir des espaces.
La longueur des noms est libre.
On évitera certains signes : "-", ";", ".", "<", ">", etc.
Les caractères accentués comme é, à, ê, ï, ù sont a priori permis
mais pourraient être mal interprétés par certains programmes
(déconseillé).
25
Les balises sont sensibles à la casse La balise <Message> est différente de la balise <message>.
La balise d'ouverture et la balise de fermeture doivent donc être
identiques.
Par exemple
<Message> ... </message> est incorrect
<message> ... </message> est correct.
Remarque : Le XML est un langage strict.
On dit qu’un document est « bien formé » lorsqu’il ne possède
aucune erreur de syntaxe.
Seuls les documents "bien formés" seront affichés correctement.
A la moindre erreur de syntaxe, le document ne sera pas ou
ne sera que partiellement affiché.
XSLT
• XSL est un langage de feuilles de styles. Il est composé de deux parties principales :
– XSLT : un language de transformation de document XML en document HTML ou autre document XML
– XSL : un jeux d'instructions de formatage en XML destiné à la présentation.
• CSS ne permet pas de visualiser les attributs
• CSS ne permet pas de réarranger l'information
Structure d’un fichier XSLT
• Un fichier XSL doit commencer par les lignes
indiquant le numéro de version XML et l'encodage
de caractères utilisé.
<?xml version="1.0" encoding="ISO 8859 1"?>
• Pour lier un fichier xsl à un fichier xml, on doit
mettre la ligne suivante :
<?xml-stylesheet type="text/xsl" href="nomfichier.xsl"?>
Les éléments XSLT
• L'élément racine qui déclare un document XSLT est :
<xsl:stylesheet> ou <xsl:transform>
• L’élément <xsl:template> : est utilisé pour construire des templates. L’utilisation de cet élément est de la forme suivante :
<xsl:template name="nommodele" match="expression" mode="modemodele">
</xsl:template>
– Name : correspond au nom associé au modèle.
– Match : indique quel jeu de nœuds sera affecté par le modèle.
Les éléments XSLT• Dans le tableau suivant quelques exemples d’expressions :
Motif Signification
– / la racine du document
– * Tout élément
– X l'élément x
– x/y l'élément y lorsqu'il est fils de x
– x//y l'élément y lorsqu'il a x pour ancètre
– text() tout noeud texte
– node() tout noeud autre que la racine ou un attribut @att tout attribut att
– @* tout attribut
– x[@att='val'] tout élément x qui a un attribut att dont la valeur est val
Exemple
<?xml version = "1.0" encoding="UTF-8" standalone="yes" ?>
<?xml-stylesheet type="text/xsl" href="ex.xsl" ?>
<bibliothèque>
<livre>
<titre>UML</titre>
<ISBN> 51111111</ISBN>
<Auteurs>
<nom> Salah </nom>
<nom>Med</nom>
</Auteurs>
<MaisonEdition>eyrolles</MaisonEdition>
<Edition>2008</ Edition >
</livre>
<livre>
<titre>Base données</titre>
<ISBN>2222222</ISBN>
<Auteurs>
<nom>Hedi</nom>
<nom>Hedia</nom>
</Auteurs>
<MaisonEdition>eyrolles</ MaisonEdition >
<Edition>2008</ Edition >
</livre>
<livre>
<titre>Conception</titre>
<ISBN>3333333</ISBN>
<Auteurs>
<nom>Hela</nom>
<nom>Ali</nom>
</Auteurs>
<MaisonEdition>dunod</Maison Edition>
<Edition>2007</ Edition >
</livre>
</bibliothèque>
Exemple<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- DWXMLSource="Ex.xml" -->
<xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html> <body>
<h2>Liste des livres</h2>
<table border="1">
<tr bgcolor="#9acd32">
<th>Titre</th>
<th>ISBN</th>
</tr>
<tr>
<td>.</td>
<td>.</td>
</tr>
</table>
</body> </html>
</xsl:template>
</xsl:stylesheet>
L’ élément <xsl:value-of>
• Cet élément peut être utilisé pour extraire la
valeur d'un élément XML et l'ajouter au
règlement de la transformation.
Syntaxe :
<xsl:value-of select="expression" />
Avec : la valeur de select permet d'insérer le
contenu de la balise sélectionnée.
L’ élément <xsl:value-of>
• Exemple :
<tr>
<td>
<xsl:value-of select="bibliothèque/livre/titre"/>
</td>
<td>
<xsl:value-of select="bibliothèque/livre/ISBN"/>
</td>
</tr>
L’ élément <xsl:for-each>
• Crée une boucle dans laquelle sont appliquées
des transformations. Son utilisation est de la
forme :
<xsl:for-each select="jeu_nœud">
</xsl:for-each>
L’ élément <xsl:for-each>
• Exemple :
<xsl:for-each select="bibliothèque/livre">
<tr>
<td>
<xsl:value-of select="titre"/>
</td>
<td>
<xsl:value-of select="ISBN"/>
</td>
</tr>
</xsl:for-each>
L’ élément <xsl:sort>
• Cet élément permet d'effectuer un tri sur un
jeu de nœuds.
• Il doit être placé soit dans :
– un élément <xsl:for-each>
– un élément <xsl:apply-templates>
Syntaxe :
<xsl:sort select="nœud" data-type="text | number |
elt” order="ascending | descending" />
L’ élément <xsl:sort>
• Exemple :
<xsl:for-each select="bibliothèque/livre">
<xsl:sort order="ascending"/>
<tr>
<td><xsl:value-of select="titre"/></td>
<td><xsl:value-of select="ISBN"/></td>
</tr>
</xsl:for-each>
L’ élément <xsl:if>
• Cet élément permet d’ajouter un test pour les nœuds à afficher.
Syntaxe :
<xsl:if test="condition">
Action
</xsl:if>
Action : correspond à l’action à effectuer en cas de condition à vrai
L’ élément <xsl:if>
• Exemple :
<xsl:for-each select="/bibliothèque/livre">
<xsl:if test="MaisonEdition = 'eyrolles'">
<tr>
<td>
<xsl:value-of select="titre"/>
</td>
<td>
<xsl:value-of select="ISBN"/>
</td>
</tr>
</xsl:if>
</xsl:for-each>
Les attributs
• Les attributs d'un élément sont sélectionnés en faisant
précéder leur nom par le caractère @.
• Les règles relatives à la sélection des éléments
s'appliquent également aux attributs :
– section[@titre] sélectionne les éléments section qui ont un
attribut titre.
– section[@titre="Introduction"] sélectionne les éléments section
dont l'attribut titre a pour valeur Introduction.
• Si l'on veut afficher le contenu de l'attribut, on le fait
précéder du caractère /.
Les attributs
Exemple :
<xsl:value-of select="paragraphe/@titre" />
permet l'affichage du titre de l'élément
paragraphe fils de l'élément courant (si rien
n'est précisé, par défaut il s'agit du premier
élément paragraphe fils).
ApplicationSoit le document XML "bib.xml" suivant :
<?xml version = "1.0" encoding="UTF-8" standalone="yes" ?>
<?xml-stylesheet type="text/xsl" href="bib.xsl" ?>
<bibliothèque>
<livre>
<titre langue="français">Conception</titre>
<ISBN>3333333</ISBN>
<Auteur>
ahmed mehdi
</Auteur>
<MaisonEdition>dunod</MaisonEdition>
<Edition>44444444</Edition>
</livre>
<livre>
<titre langue="français">
Base données
</titre>
<ISBN>2222222</ISBN>
<Auteur>
salah ben salah
</Auteur>
<MaisonEdition>eyrolles</MaisonEdition>
<Edition>3</Edition>
</livre>
<livre>
<titre langue="anglais">Uml</titre>
<ISBN>5111111</ISBN>
<Auteur>
ali ben med
</Auteur>
<MaisonEdition>eyrolles</MaisonEdition>
<Edition>3333333</Edition>
</livre>
</bibliothèque>
Application (suite)
Définir une feuille de style biblio.xsl afin de produire l’affichage sous la forme ci-dessous.
TP01 Atelier Web2 Page 1/2
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP01
Matière : Atelier Web2 Classe : INF1
Exercice1
a) Ecrire une page HTML contenant un code JavaScript permettant d’afficher « Bienvenue
dans le monde JavaScript » ;
b) Ecrire une page HTML contenant un code JavaScript permettant de demander la saisie
de votre nom et de votre prénom, puis d’afficher « Bonjour ‘votre prénom’ ‘votre nom’ ».
c) Reprendre la question précédente en plaçant le code JavaScript dans un fichier externe.
Exercice2
Créer un document html qui contient 2 boutons.
a) Ecrire un script qui affiche le message "Bonjour à tous" après le clic sur le premier bouton.
b) Lors du clic sur le deuxième bouton, demander à l'utilisateur de saisir son nom. Ensuite demander
une confirmation du nom de l'utilisateur. Si le nom est confirmé, afficher ce dernier dans une boîte de
dialogue.
Exemple d’exécution :
boites-de-dialogue
Exercice3
Ecrire un script permettant de saisir l’âge de l’utilisateur, puis de contrôler la validité de la valeur
saisie ; Le procédé de contrôle doit être réalisé comme suit :
Lorsque la valeur saisie est non numérique, on affiche un message d’erreur (utilisé la
fonction isNaN()) ;
Lorsque la valeur saisie appartient à l’intervalle ]0-12], on affiche le message « Vous
êtes un enfant » ;
Lorsque la valeur saisie appartient à l’intervalle ]13-18], on affiche le message « Vous
êtes un adolescent » ;
Lorsque la valeur saisie est supérieure à 18, on affiche le message « Vous êtes un
adulte ».
TP01 Atelier Web2 Page 2/2
Exercice 4
a) Donner un code JavaScript qui permet d’afficher les 10 premiers multiples de 9. L’interface
correspondante au résultat d’exécution de ce script doit avoir la forme suivante :
b) Reprendre la même question en plaçant le code javascript dans un fichier externe.
Exercice 5
a) Donner un script java qui permet d’afficher la table de multiplication de 1 à 9.
b) Reprendre la même question en permettant d’afficher la table de multiplication d’un nombre
saisi à partir de l’utilisateur.
Exercice 6
Ecrire un script qui permet de saisir un numéro du jour qui doit être compris entre 1 et 7, puis afficher le
jour correspondant (exemple 1 : Dimanche).
TP01 Atelier Web2 Page 1/2
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP02
Matière : Atelier Web2 Classe : INF1
Exercice1
a. Ecrire une fonction saisie() permettant de saisir une valeur numérique.
b. Ecrire une fonction calulMontant(x,y) permettant de calculer le produit de x*y.
c. Ecrire un script permettant de saisir deux valeurs numériques puis de calculer le montant des deux valeurs saisies ; Utiliser les deux fonctions définies précédemment.
Exercice2
Soit TabNotes une variable de type tableau contenant les notes d'étudiants pour un module d’enseignement donné. Ecrire le code JavaScript contenant les fonctions suivantes :
Demander la taille du tableau (le nombre d’étudiants). Sachant que ce nombre doit être entier et positif.
Saisir le contenu du tableau, sachant que la valeur correspondante à chaque élément doit être comprise entre 0 et 20.
Afficher le contenu du tableau sous forme d’une liste numérotée.
Chercher le nombre d'étudiants qui ont des notes supérieures ou égales à 10.
Calculer la moyenne des notes obtenues par tous les étudiants.
Connaître la note maximale insérée dans le tableau.
Regrouper les éléments du tableau dans une chaine appelée ChNotes.
Exercice3
Reprendre les mêmes questions de l’exercice2 en supposant que chaque case du tableau est formée par deux éléments : le premier contient le nom de l’étudiant et le deuxième correspond à la note correspondante. Dans cet exercice, les affichages doivent être suivis par les noms des étudiants.
Exercice4
Définir un tableau JavaScript où chaque case correspond à un chemin menant à une image.
Écrire une fonction JavaScript qui prend en entrée un tel tableau et produit l'affichage des images dans un tableau HTML.
TP05 Atelier Web2 Page 1/2
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP03
Matière : Atelier Web2 Classe : INF1
Exercice 1
Nous voulons manipuler un tableau d’étudiants ayant la structure suivante : Nom, Prénom et
Filière.
Nb :
- La déclaration d’un tableau de structure est décrite comme suit :
var Nom_Tab = [ {Att1:"val1", Att2: "val2"}, … ];
- L’ajout d’un élément dans un tableau est réalisé avec la méthode push :
Nom_Tab.push({Att1:"val1", Att2:val2});
Ecrire un script permettant :
- d’ajouter des étudiants (utiliser la méthode confirm avant d’ajouter un élément dans
le tableau).
- d’afficher les éléments dans un tableau html.
Exercice 2
- Ecrire une page HTML qui permet de créer une nouvelle fenêtre intitulée « fen1 » ayant
comme hauteur 300 et comme largeur 600. Avec options d’affichage de la barre
d’outils et de la barre d’adresse.
- Ecrire dans cette fenêtre le message « Bienvenue ».
Exercice 3
Ecrire le code JavaScript qui, lorsqu’on clique sur un lien, fait apparaître la destination de ce
lien dans une alerte.
Exercice 4
Ecrire le code JavaScript qui permet de modifier le contenu d'un élément paragraphe, une fois
on clique sur un lien. Le paragraphe ayant au préalable identifié par un identifiant unique
(attribut id) appelé id1. Il doit être ciblé grâce à la méthode getElementById() contenue dans
l'objet document. Le contenu est modifié à travers la méthode inneHTML.
TP05 Atelier Web2 Page 2/2
Au départ Après avoir cliqué su le lien
Exercice 5
- Donner un script java qui utilise l’objet navigator pour afficher les données de l’interface.
- Incorporer le script définit précédemment dans une fonction d’affichage qui doit être lancée après 3 secondes du chargement de la page
Exercice 6
Donner un script java qui utilise l’objet window, lorsque l’utilisateur clique sur : - Fermer : ferme la fenêtre - Translater : translate la fenêtre 20 pixels horizontalement et 30 verticalement - Translater00 : déplace la fenêtre à la position (0,0)
Utiliser Inertnet Explorer dans le test.
Exercice 7
Donner un script java qui utilise l’objet document pour que lorsque l’utilisateur appuie sur le bouton colorer applique la première couleur à la fonte et la deuxième à l’arrière plan.
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP03 Suite
Matière : Atelier Web2 Classe : INF1
En se basant sur le code html suivant :
<!doctype html>
<html>
<head>
<title>Chronomètre</title>
<meta charset="utf-8">
<style type="text/css">
.chronometre{
margin: auto ;
width: 300px;
text-align: center;
}
.tim{
margin: auto;
width: 300px;
border: 1px solid rgba(0,0,0,0.5);
padding:5px 0;
text-align: center;
font-size: 1.5em;
font-family: digital;
margin-bottom: 10px;
}
button{
background: #3498db;
color: #fff;
width: 70px;
border-radius: 5px;
line-height: 1.5em;
border: none
}
</style>
</head>
<body>
<div class="chronometre">
<div class="tim">
<span >0 h</span> :
<span >0 min</span> :
<span >0 s</span> :
<span >0 ms</span>
</div>
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()" >Stop</button>
<button id="reset" onclick="reset()" >Reset</button>
</div>
</body>
</html>
Créer un chronomètre composé d'un afficheur et 3 boutons : un bouton "start" pour lancer
le chronomètre , un bouton "stop" pour l’arrêter et un bouton "reset" pour le remettre à zéro.
chronometre
Indications:
Créer une fonction "start" qui appelle d'une manière répétitive la fonction
update_chrono via la fonction setInterval avec une cadence de 100 ms.
Créer une fonction "update_chrono()" qui permet d’incrémenter le nombre de
millisecondes , secondes , minutes , et des heures.
Créer une fonction "stop" qui arrête le traitement de setInterval.
Créer une fonction "reset" qui remet les valeurs et l'affichage à 0 .
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP04
Matière : Atelier Web2 Classe : INF1
Exercice 1 :
Soit le code HTML suivant :
<html>
<head>
<title>Exercice 1</title>
<script>
function change_enfants()
{
}
</script>
</head>
<body>
<p id="id1" onclick="change_enfants()">Un texte avec plein d'enfants, <b>en gras</b>,
<i>en italique</i>et une image <img src="image.jpg" height="111"
width="200"></p></body>
</html>
1.Ecrire le code de la fonction change_enfants() qui sélectionne le paragraphe à l'aide de son
identifiant.
2.Compléter le code de cette fonction afin de permettre de réaliser les tâches suivantes :
a. Afficher sous forme d’une alerte le nombre d'enfants correspondants au
paragraphe.
b. Changer la valeur du premier enfant de l'élément paragraphe en "Ce texte est
modifié".
c. Diviser par deux la hauteur et la largeur de l'image (qui correspond au dernier
enfant).
d. Changer le code XHTML du deuxième enfant par le texte : "<font
color='blue'>en bleu</font>".
e. Changer la propriété display de style du quatrième enfant en "block".
Exercice 2
Soit le code HTML suivant :
<html> <head> <title> Exercice 2</title>
<style>
.statique {
color: blue;
font-family: arial;
font-weight: normal;
}
.dynamique {
color: red;
font-family: helvetica;
font-weight: bold;
}
</style>
<script>
function ajouterNoeud(el, text,ident) {
…….
}
function effet() {
……..
}
}
</script> </head>
<body>
<a href="#" onClick="effet()">Changer</a>
<p id="bonjour">Bonjour</p>
<div id="vide"></div>
</body> </html>
1. Ecrire le code de la fonction effet() qui permet :
a. D’appliquer la classe de style statique au texte Bonjour.
b. D’ajouter le texte "Etudiant de l'ISET" dans une zone <DIV> à l’intérieur de la
zone identifiée par « vide » en appelant la fonction ajouterNoeud.
c. D’ajouter le texte "de Sfax" dans une nouvelle zone <DIV> qui doit être
ajoutée à l’intérieur de la division identifiée par « vide », en appelant la
fonction ajouterNoeud.
d. D’appliquer la classe de style dynamique pour tout le contenu de la zone
identifiée par « vide ».
2. Compléter le code de la fonction ajouterNoeud(el, text, ident) afin de permettre d’ajouter
un élément « el » ayant l’identificateur « ident » et ayant le contenu « text ».
Exercice 3 :
Soit le code HTML suivant :
<html><head><title> Exercice 3</title>
<style type="text/css">
#citation {top: 50px; left: 50px}
#info{top: 100px; left: 100px; font-weight: bold}
#im {visibility:hidden}
</style>
<script>
couleur=0;
function anime_paragraphe(element)
{
}
function anime()
{
}
function ajout_image()
{
}
</script> </head>
<body>
<a href="#" onClick="ajout_image()">Ajouter image</a>
<input type="button" value="Lancer l'animation!" onclick="anime()">
<div id="citation">
<p>un essai de texte</p>
<p>avec un retour à la ligne</p>
<p>et un second !</p><p>C'est une autre ligne</p>
</div>
<div><p id="info"> C'est la dernière ligne</p></div>
<div id="im"> <img src="image.jpg" /> </div>
</body> </html>
1. Dans la fonction anime() :
a. Dans une variable appelée animable, stocker l’identifiant citation.
b. Faire une boucle sur l'ensemble de la collection des éléments enfants.
c. Pour chaque élément enfant, tester s'il s'agit d'un nœud de paragraphe. Si oui,
appeler la fonction anime_paragraphe avec comme argument l'objet élément.
3. Dans la fonction anime_paragraphe(element) faire en sorte que la couleur de l'élément
devienne bleue.
4. Dans la fonction ajout_image() faire en sorte que l’image devienne visible.
Exercice 4
Ecrire les codes HTML et Javascript permettant de créer une page web contenant un bouton.
Le clic sur le bouton doit permettre la création et l’affichage d’une image dont les valeurs de
ses différents attributs doivent être connues à l’avance (les valeurs associées à src, width, h
Exercice 5
Ecrire les codes HTML et Javascript permettant de créer une page web qui permet d’ajouter
un nouveau paragraphe ainsi que la date de son adjonction lors d’un clic sur un bouton. Les
états initial et final de la page sont illustrés respectivement à l’aide des deux figures
suivantes :
Etat initial de la page web
Etat final de la page web
1
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP05
Matière : Atelier Web2 Classe : INF1
Exercice 1
Ecrire un script java qui permet de contrôler le changement d’un mot de passe. La longueur
du mot de passe doit être supérieure à 8 et il doit être identique à sa confirmation.
Exercice2
Ecrire un script java qui permet d’actualiser le prixTTC, le totalHT et le totalTTC suite aux
modifications dans prixHT, quantité et tva.
Exercice 3
Soit le formulaire suivant :
2
1. Ecrivez le code HTML correspondant au formulaire ci-dessus tout développant les
fonctions JavaScript suivantes :
AfficheEtoile() : Une fois une catégorie est cochée, le deuxième champ texte affichera le
nombre d’étoiles correspondantes.
VerifNom() : Nom hôtel est obligatoire et ne contenant que des caractères alphabétiques
majuscules.
VerifChaine() : Si catégorie est égale à 3 et chaîne Abou Nawas afficher un message d’erreur.
Sachant que la liste Chaîne contient Al Mouradi et Abou Nawas.
VerifSite() : Site web doit commencer par « www. ».
Exercice 4
Construire un formulaire nommé calculette, contenant :
Des boutons radios permettant de choisir l’arrière plan de la page.
une boite de texte, nommée expression pour la saisie d'une expression
mathématique correcte.
une seconde nommée résultat pour afficher le résultat du calcul s'il est
possible.
un bouton pour déclencher le calcul, par association à l'événement onClick
Exercice 5
Préparer cette interface :
Enrichissez votre page en testant sur le champ nationalité qui a deux valeurs possibles
"Tunisienne /Etrangère" :
3
o Pour une personne tunisienne on doit saisir le n° de la carte d'identité. Le
champ n°passeport doit être désactivé.
o Pour une personne étrangère on doit saisir le n° passeport. Le champ n° de la
carte d'identité doit être désactivé.
Exercice 6
Calcul mental pour classe de 5ème année de base. Vous êtes chargé de concevoir pour une
école primaire un logiciel d'entrainement au calcul mental sur des nombres naturels, pour des
classes de 5ème année de base.
Les élèves ne connaissent pas les nombres négatifs et décimaux, connaissent uniquement la
division euclidienne ("avec reste"). De plus pour éviter de trop grandes difficultés, vous
supposerez que :
- pour un produit, l'un des 2 nombres –seulement- est inférieur à 10.
- pour une division, le dividende est supérieur à 10 et le diviseur est compris entre 2 et 9
inclus.
Programme :
L'enfant utilisateur choisit lui-même une opération parmi +,-,*,div.
Le programme lui impose alors 2 entiers choisis au hasard de 1 à 99 (et qui
sont adaptés à l'opération choisie).
L'élève tape sa réponse. Le programme la compare à la bonne réponse : si elle
est juste, affichage de "BRAVO !", sinon "réponse erronée".
Calcul mental
Exercice 7
On se propose de développer la page « InfoPersonnelles.html ». A cet effet, il faut écrire le
code HTML et les scripts java permettant de :
4
1- Afficher la date dès le chargement de la page « Inscription »
2- Contrôler que le nom et le prénom ne sont pas vides.
3- Afficher l’image correspondante au fichier sélectionné (doit être placée dans le même
répertoire que le script).
4- Les options de la liste filière s’affichent à partir d’une boucle écrite en JavaScript.
5- Contrôler le nombre de cases cochées qui ne doivent pas dépasser 3.
6- Tester si le bouton « nouveau » est coché, dans ce cas la zone « Matières maîtrisées » ne
s’affiche plus.
Date
Inscrit à l'institut
Nouveau Ancien
Identité
Nom
Prénom
Image
Téléphone
Spécialité
Matières maîtrisées (Cocher au maximum 3)
Algorithmique
Programmation C
Architecture
Programmation Web
D'autres matières
5
Exercice 8
Donner un script java qui, lorsque l’utilisateur sélectionne un continent affiche les pays
correspondants et lorsque l’utilisateur sélectionne un pays affiche sa superficie et son drapeau.
Un extrait du formulaire correspondant au travail demandé est le suivant :
TP05 Atelier Web2 Page 1/2
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP06
Matière : Atelier Web2 Classe : INF1
Exercice 1
1. Ecrire un script permettant d’afficher les coordonnées du pointeur de la souris lorsque le bouton de la souris est cliqué sur un paragraphe. Pour cela il faut utiliser la propriété event.clientX qui renvoie la coordonnée horizontale (en fonction de la zone cliente qui est la fenêtre actuelle) du pointeur de la souris lorsqu'un événement de souris a été déclenché. Aussi, la propriété event.clientY pour obtenir la coordonnée verticale. Le code HTML associé est le suivant :
<p onmousedown="aff_coords(event)">
Cliquez sur ce paragraphe pour afficher les coordonnées x et y du pointeur de la souris.</p>
<p id="demo"></p>
2. Modifier le script précédent pour permettre d’afficher les coordonnées du pointeur de la souris lorsque le bouton de la souris est cliqué sur n’importe où dans le document. Pour cela, utiliser addEventListener.
Exercice 2
Nous voulons créer, à travers un script java, un élément img et ce avec createElement. Puis
lui assigner une image (au moyen de l’attribut src) qui est alors affichée. Un gestionnaire
d'évènement est convoqué qui appelle la fonction imageclick quand on clique sur l'image et
qui permettra d’afficher le nom de l’image. L’exécution du code donne le résultat suivant :
Etat 1 Etat 2
Sachant que le code html contient cette ligne : <div id="imgstorage"></div>
Exercice 3
Ecrire un script java qui utilise la méthode addEventListener () pour ajouter les événements mouseover, mouseout et click sur le même bouton. Et ce en appelant différentes fonctions précisant chacune l’événement effectué sur ce bouton. L’exécution de ce code donne le résultat suivant :
TP05 Atelier Web2 Page 2/2
Etat 1 Etat 2 Etat 3 Etat 4
Exercice 4
Ecrire un script permettant de faire le calcul du prix total en fonction du parfum de la crème glacée sélectionnée et de la quantité saisie, comme le présente l’exemple ci-dessous. Un gestionnaire d'évènement détecte les changements effectués pour réaliser le calcul du prix total.
Etat 1 Etat 2
Etat 3
Le code HTML correspondant est le suivant :
<p><label>Choisissez une saveur de crème glacée : </label></p>
<p><select id="s1">
<option value="4">chocolat</option>
<option value="5">fraise</option>
<option value="3">vanille</option>
</select>
Quantité <input type="number" value="1" id="q" /></p>
TP05 Atelier Web2 Page 1/3
ISET SFAX DEPARTEMENT
AU 2017/2018 S2 TECHNOLOGIE DE L’INFORMATIQUE
TP07
Matière : Atelier Web2 Classe : INF1
Exercice 1
Ecrire un script permettant de faire déplacer « le chat » à la poursuite de « la souris », et ce chaque fois que le(s) doigt(s) bouge(nt), déclenchant un événement « touchmove ». Ce dernier appelle une fonction qui, à partir de « pageX » et « pageY », détecte les coordonnées du pointeur de la souris lorsqu’un événement a été déclenché. Puis à travers « marginLeft » et « marginTop » positionne l’image du « chat » dans cet emplacement. Le code HTML associé est le suivant :
<body>
<img src="images/chat.jpg" width="55" height="55" id="i1" ontouchmove="myFunction(event)" />
<img src="images/souris.jpg" width="45" height="45" />
<script>
function myFunction(event) {
}
</script>
</body>
Exercice 2
Soit le script suivant générant le résultat ci-dessous:
<head> <style> #box1,#box2{
border:solid black 1px; width:100px; height:100px;
position: fixed; top: 70px; display: inline;
} #box1{left:10px;} #box2{left: 200px;}
</style> </head> <body>
<img src="images/chrome.png" width="30" height="30" id="i1" ontouchmove="myFunction(event) "/> <div id="box1">Navigateur</div>
<div id="box2">n'est pas un navigateur</div>
TP05 Atelier Web2 Page 2/3
<script>
function myFunction(event) { }
</script> </body>
On veut écrire un script qui doit déplacer le logo du navigateur chrome dans le box correspondant. Ce dernier, deviendra de couleur verte. A chaque fin de déplacement le logo reviendra à son emplacement initial.
Note : getBoundingClientRect() permet de renvoyer la valeur d’un élément sous forme d’un objet « DOMRect » qui contient les propriétés « left », « top », « right » et bottom ».
Exercice 3
Ecrire un script java qui crée un Web Worker qui compte les nombres en arrière-plan. Le script faisant cette tâche est stocké dans le fichier "travail_worker.js". Celui-là calcule, à travers setTimeout et à chaque seconde, le compteur. Puis envoie le résultat sous forme d’un message. Un objet Web Worker est créé dans une page HTML. Il continue d'écouter les messages jusqu'à ce qu'il soit arrêté. Les données du Web Worker sont stockées dans event.data. Pour mettre fin à un Web Worker et libérer des ressources du navigateur / ordinateur, utiliser la méthode terminate().Cette dernière, faisant partie de l'interface Worker, le termine immédiatement. L’exécution de ce code donne le résultat suivant :
Etat 1 Etat 2 : démarrer Etat 3 : stopper
Le code HTML correspondant est le suivant :
<body>
<p>Compteur: <span id="result"></span></p>
<button onclick="startWorker()">Démarrer Worker</button>
<button onclick="stopWorker()">Stopper Worker</button>
TP05 Atelier Web2 Page 3/3
<script>
var w;
function startWorker() {
}
function stopWorker() {
}
</script>
</body>
Exercice 4
Ecrire un script permettant de sélectionner une image, à travers le champ file. Chaque image choisie sera affichée ainsi que son nom comme le montre l’exécution suivante :
Etat 1 Etat 2 Etat 3
Le code HTML correspondant est le suivant :
<style>
.im { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }
</style>
<input type="file" id="f1" multiple />
<p id="demo"> </p>