Programmation Web2 · 2 Le JavaScript est un langage de script incorporé dans un document HTML. Il est utilisé pour améliorer la présentation et l'interactivité des pages Web

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

{


}

while(condition) ;

for()

for(i = valeur_initiale; i< valeur_finale; i++)

{


}

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);


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/>");


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


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 :


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


<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


<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)


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)


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);


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


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>



}</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>



}

</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);


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>


<p id="demo"> </p>

<script>

document.getElementById("f1").addEventListener("change", 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>");


Exemple (2)

<html> <head> <title> exemple JSON </title> </head>

<body>

<script>

var objet1 = {

finance : [


{ 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>");}


Exemples (3)<body> <script>

var objet1 = {

finance : [


{ 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"?>



<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


• 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, ...


• 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 >


• 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

– 

– 

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>


<prix>22 000</prix>

</LIVRAISON>

Exemple 1 (suite)<LIVRAISON>

<nom>Disque Dur de 20Go</nom>


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


</livre>

<livre>

<titre>Conception</titre>


<Auteurs>

<nom>Hela</nom>

<nom>Ali</nom>

</Auteurs>

<MaisonEdition>dunod</Maison Edition>


</livre>

</bibliothèque>

Exemple<?xml version="1.0" encoding="ISO-8859-1"?>



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


<Auteur>

ahmed mehdi

</Auteur>

<MaisonEdition>dunod</MaisonEdition>

<Edition>44444444</Edition>

</livre>

<livre>

<titre langue="français">

Base données

</titre>


<Auteur>

salah ben salah

</Auteur>



</livre>

<livre>

<titre langue="anglais">Uml</titre>


<Auteur>

ali ben med

</Auteur>



</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 ».


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




TP02


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.




TP03


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.


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.



TP03 Suite


En se basant sur le code html suivant :

<!doctype html>

<html>

<head>

<title>Chronomètre</title>

<meta charset="utf-8">


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



TP04


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


<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 :


<html><head><title> Exercice 3</title>


#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



TP05


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

Email

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 :




TP06


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 :


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>




TP07


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>


<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


<body>

<p>Compteur: <span id="result"></span></p>

<button onclick="startWorker()">Démarrer Worker</button>

<button onclick="stopWorker()">Stopper Worker</button>


<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


<style>

.im { height: 75px; border: 1px solid #000; margin: 10px 5px 0 0; }

</style>


<p id="demo"> </p>

Documents

Programmation Web2 · 2 Le JavaScript est un langage de script incorporé dans un document HTML. Il est utilisé pour améliorer la présentation et l'interactivité des pages Web