Outils pour le web
Clara Bertolissi
L3 – Université de Provence
Javascript
Javascript
Est un langage de script incorporé dans le HTML Historiquement, premier langage de script pour le Web
Apporte des améliorations au HTML en rendant les pages plus
interactives
Le code JS est interprété par le navigateur client. Aucune
interaction avec le serveur.
Javascript
Le language JavaScript est parfaitement adapté pour des
traitements sur le poste du navigateur. Quelques exemples :
Vérification de saisie dans des formulaires (Adresse, email) Calculs simples suite à des saisies de formulaire (Tarifs,
calculatrice)
Gestion des dates et des heures (Date du jour, Date de mise à
jour, Calendriers)
Gestion des cookies (Sauvegarde d'information : nombre de
visites, caddie virtuel)
Gestion de la navigation (Menus dynamique, popup)
Animations graphiques (Dynamic HTML, MouseOver, bannières
rotatives, jeux)
Javascript
Mais c'est un langage limité :
C'est un langage de script dépendant de HTML.
Ce n'est pas véritablement un langage orienté objet (pas
d'héritage de classe, ni de polymorphisme ..)
JavaScript ne peut pas s'interfacer avec une base de
données. Impossible de concevoir un forum de discussion, un script de sondage ou de vote, dont les données sont stockées, soit dans un fichier, soit en base sur le serveur.
JavaScript n'échange pas avec d'autres machines
connectées. Impossible donc de créer une page de chat (discussion en direct).
Javascript - Java
JavaScript rassemble à Java:
– JavaScript a la notion d'Objet et de types de donnée
prédéfinis
– JavaScript a des événements et peut gérer les exceptions
MaisJavaScript ne rassemble pas à Java:
– Les variables ne sont pas type lors de la définition : le type
dépend de la valeur qui est associé à la variable.
– Les Objets et les tableaux sont différents – JavaScript a des structures différentes de Java.
Emplacement du code JS
Il y a plusieurs endroits dans une page web où il est
possible d'intégrer du code JavaScript :
dans le corps de la page,
en entête de page,
dans un événement d'un objet de la page.
Ecriture et exécution du code JS
Entre les balises
<SCRIPT type=''text/javascript'' >....</SCRIPT>
dans la section d'en-tête, ou dans le corps de la page.
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>, e.g. déclarations de
fonctions, il n'est pas exécuté tout de suite
S'il fait partie du corps du document, il est immédiatement
Ecriture et exécution du code JS
Associé à une balise HTML qui gère un
événement
<balise ... onEvenement="code JS ou fonction JS" >
balise est le nom de certaines balises html, souvent
des composants de formulaire.
onEvenement est un nouvel attribut de la balise (e.g.
onSubmit, onClick, onChange, …)
Bien entendu il faut connaître les associations entre
évènements et balises "sensibles" à ces
évènements.
Ecriture et exécution du code JS
Associé à un lien
<A HREF="javascript:ma_fonction()">Cliquez ici</A>
L'opérateur void :
Pour empêcher que le code ou la fonction appelée ne
remplace le document courant, on applique
l'opérateur void, qui neutralise toute valeur ou tout
effet de retour
<A HREF=
"javascript:void(ma_fonction(..))">...</A>
Ecriture du code JS
La structure classique d'une page HTML contenant du JavaScript :
<HTML> <HEAD>
<SCRIPT language="JavaScript">
<!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JS // déclaration de functions JS
//--> // Fin de la partie cachée
</SCRIPT> </HEAD> <BODY>
<SCRIPT type="text/JavaScript">
<!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JS // code Javascript
//--> // Fin de la partie cachée </SCRIPT>
</BODY> </HTML>
Comment écrire, afficher
l'information
<html> <head> <title>Programme 1</title> </head> <body> <script language="JavaScript"><!--document.write('Vous avez le bonjour de JavaScript <br>'); //-->
</script> </body> </html>
Comment écrire, afficher
l'information
Méthode promt()
ouvre une boîte de dialogue avec une zone saisie et
2 boutons OK et Annuler, et rend l’ information lue
Méthode alert ()
permet d’ écrire un message dans une fenêtre
Exemple
<html> <head><title>Programme In1</title></head> <body> <script language="JavaScript"><!--annee=prompt('En quelle année sommes-nous ? ', 2000); alert('Vous avez répondu : ' + annee);
//--> </script> </body> </html>
Déclaration de fonctions en JS
Il est recommandé de les inclure entre les balises
<head> et </head>
<HEAD>
<SCRIPT LANGUAGE=JavaScript >
Function nomProcédure(param1, param2, ...) { séquence d'instructions;
}
Function nomFonction(param1, param2, ...) { séquence d'instructions; return nom_variable; } </SCRIPT> </HEAD>
Fonctions en JS
Visibilité des paramètres :
De façon générale, les paramètres formels d'une fonction ne
sont connus qu'à l'intérieur de la fonction
De même, les variables locales, variables qui sont
explicitement déclarées à l'intérieur de la fonction
Conséquences :
Si la valeur d'un paramètre ou d'une variable locale est
modifiée dans la fonction, cette modification ne sera pas connue à l'extérieur de la fonction. On dit que cette variable n'est pas visible au niveau du programme général
Fonctions en JS
L'objet Function :
A chaque fonction rencontrée, JavaScript construit un
tableau de ses arguments
Si la fonction s'appelle calculer, ce tableau a : pour éléments calculer.arguments[i] pour taille calculer.arguments.length Exemple :
function calculerPrix(PrixUnitaire, NbArticles) { if (calculerPrix.arguments.length !=2) alert("impossible de calculer le prix !") else
return PrixUnitaire* calculerPrix.arguments[1]; }
Exemple
<head> <script language="JavaScript"> var volume; function VolCylindre(r,h) { pi=3.14159; volume = pi*r*r*h; } </script> </head> <body> VolCylindre(1,2); document.write(volume); </body>Les données constantes
Constantes :
les constantes numériques : entiers, "réels" écrits
en notation décimale ou flottante
les 2 constantes booléennes : true ou false
les chaînes de caractères, entourées
indifféremment d'apostrophes ' ' (à privilégier) ou
de guillemets " "
la constante spéciale null signifie "absence de
valeur". Elle est attribuée à toute variable utilisée
sans être définie (par exemple prompt() retourne
null si on sélectionne le bouton Annuler)
Notation
Caractères spéciaux :
\b (retour arrière), \f (saut de page) , \n (nouvelle ligne) , \r (Entrée),
& (tabulation), \' pour une apostrophe
On peut insérer du code HTML sous forme de chaînes, qui sera bien interprété comme de véritables balise
Déclaration et affectation de
variables
Types de variables :
Les nombres : number
les chaines : string
les booléens : boolean
les objets : object
les fonctions : function
La fonction typeof() appliquée à une variable
retourne son type
Déclaration et affectation de
variables
Notation : var nom = valeur
Le mot var est facultatif, mais recommandé.
Les variables doivent commencer par une lettre ou
par _
JS distingue minuscules et majuscules.
Le symbole = est réservé à l'affectation
JS attribue automatiquement à la variable le type
de la valeur affectée
Sinon JS lui attribue une valeur et un type
indéterminés "undefined"
Opérateurs d’ affectation
Visibilité des variables
–
Bien que de même nom, les variables "x" sont indépendantes <script language="JavaScript">var x = new String('abc'); function commencer() { var x = new Number(123); x++; alert(x);
};
function suivre() {
var x = new Boolean(true); alert(x); };
x='ABC';
commencer(); suivre(); </script>
Visibilité des variables
Les variables définies directement entre <script...></script> ont une portée globale sur toutes les parties de script
<HEAD> <script ...>
var toto = “ Bonjour” ; </script> </HEAD> </BODY> <script ...> document.write(toto); </script> </BODY>
Operateurs arithmétiques
Comment afficher le contenu
des variables
<html> <head><title>Programme 2</title></head> <body> <script language="JavaScript"> <!--var jour = 21; var mois = 'juin';document.write(jour + ' ' + mois + ' : solstice'); //--> </script> </body> </html>
Tableaux en JS
Exemple:
color = ["red", "yellow", "green", "blue"];
L' indice commence à zero: color[0] vaut "red"
On peut introduire des éléménts vides :
color = ["red", , , "green", "blue"]; color a 5 éléments
Mais la virgule à la fin est ignorée
color = ["red", , , "green", "blue” ,]; a toujours 5 éléments
Créer un tableaux
•
Déclaration
var colors = ["red", "green", "blue"];
•
On peut utiliser
new Array()
pour créer un tableau vide
– var colors = new Array();colors[0] = "red"; colors[2] = "blue"; colors[1]="green";
•
On peut utiliser
new Array(n)
où
"n"est la taille du
tableau
– var colors = new Array(3);
•
On peut utiliser
new Array(e1, ...,eN)
avec en
arguments les éléments du tableau
– var colors = new Array("red","green", "blue");
Tableaux en JS
•
La longueur d'un tableau myArray est donné par
myArray.length
•
La longueur peut être changé en ajoutant des
éléments:
– var myArray = new Array(5);
– myArray[10] = 3;
•
Comme en C et Java, on peut avoir de tableaux de
tableaux:
Fonctions pour les tableaux
myArray.sort() trie suivant l'ordre alphabetique croissant
myArray.sort(function(a, b) { return a - b; }) trie selon l'ordre donné par la fonction
myArray.reverse() reverse les éléments
myArray.push(… ) ajoute des éléments à la fin du tableau et met à jour sa longueur
myArray.pop() enleve et renvoie les dernier élément du tableau et met à jour sa longueur
myArray.toString() renvoie une chaîne de characteres contenant les éléments du tableau separés par des virgules
Généralités sur les objets en JS
JS n'est pas un vrai langage orienté-objet. Des concepts tels
que l'héritage ne sont pas implémentés.
Pour définir une classe d'objets, il faut préciser :
les propriétés (ou attributs) qui décrivent ses
caractéristiques
les méthodes (procédures ou fonctions) qui décrivent ses
comportements et ses actions
Propriétés et méthodes constitutives d'une classe ne sont alors applicables qu'à un objet de cette classe
objet.propriété objet.méthode()
Les objets
•
On utilise la syntaxe
•
{ name1 : value1 , ... , nameN : valueN }
•
Exemple
• car = {myCar: "Saturn", 7: "Mazda", getCar: CarTypes("Honda")} - Les champs sont myCar, getCar, et 7 .
- "Saturn" and "Mazda" sont chaînes de charactèrs - CarTypesest un appel de fonction
•
Exemple d'utilisation :
• document.write("J'ai une " + car.myCar);
Création d 'un objet
On peut utiliser la syntaxe précédente :
– var cours = { number: "CIT597", teacher="Dr. Dave" }
On peut utiliser
new
pour créer un objet vide et le remplir
ensuite :
• var cours = new Object(); cours.number = "CIT597"; cours.teacher = "Dr. Dave";On peut écrire et utiliser un constructeur :
function Cours(n, t) { // placé dans le <head> du document this.number = n; this.teacher = t; } var cours = new Cours("CIT597", "Dr. Dave");Tableaux et objets
Les tableaux sont des objets
car = { myCar: "Saturn", 7: "Mazda" }
–
car[7] est la même chose que car.7
–
car.myCar c'est le même que car["myCar"]
•
Si on connaît le nom de la proprieté, on peut utiliser la
notation car.myCar
•
Mais si le nom est stocké dans une variable ou doit
être calculé, on doit utiliser la notation des tableaux :
car["my" + "Car"]
Conditionnelle
L'instruction conditionnelle if ... [then] .. else :
if (condition) { séquence 1 } else { séquence 2 }
Remarques :
La condition doit être toujours entourée de ( ) Le mot alors (then) est toujours sous-entendue
La séquence else (optionnelle) est exécutée si la condition
est fausse
les { } obligatoires qu'en cas d'instructions multiples
Exemple if..then..else
<HTML> <HEAD>
<TITLE>Orthographe d'un nombre</TITLE> <SCRIPT LANGUAGE="JavaScript"> function controler(mot)
{ if (mot=="trois cent vingt et un")
{alert("Bravo\nVous avez bien orthographié")} else
{alert("Vous avez écrit "+mot+"\n Il fallait écrire trois cent vingt")} } </SCRIPT> </HEAD> <BODY> ... </BODY> </HTML>
Switch
Switch :
switch (Expression){ case Premier_label: Premières_instructions; break; ... case Nième_label: //Nièmes_instructions; break; default: //Instruction_par_défaut break; }Exemple Switch
<script type="text/javascript">
switch (jour) {
case "vendredi": document.write("Enfin vendredi");
break;
case "samedi": document.write("Super Samedi");
break;
case "dimanche": document.write("Dimanche répos");
break;
default: document.write(« Vivement le weekend!");
}
</script>
Boucle Pour
L'itération contrôlée FOR
for (valeur initiale; condition; poursuite) { séquence d'instructions
}
La condition qui suit FOR est composée de 3 éléments :
une valeur ou expression initiale portant sur une variable entière
appelée compteur
une condition : tant qu'elle est vraie, la répétition est poursuivie
une expression de poursuite qui consiste en la mise à jour du
compteur
Variante :
for (variable in objet ) { séquence instructions }
Exemple boucle For
<html>
…
<body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++) {
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
Exemple tableaux à 2 dimensions
<html>
…
<body>
<script type="text/javascript"> tab=new Array(3);
tab[0]= new Array(1,2,3); tab[1]= new Array(4,5,6); tab[2]= new Array(7,8,9); for (i=0;i<3;i++) { for (j=0;j<3;j++) document.write(tab[i][j]," " ); document.write("<br> " ); } </script> </body> </html>
Exemple boucle for...in
On peut parcourir les propriétés d'un objet :
– for (var prop in Cours) {
document.write(prop + ": " + Cours[prop]); }
– Résultat possible: teacher: Dr. Dave number: CIT597
– Les propriétés ne sont pas forcement affichées dans l'ordre de définition.
Les tableaux sont aussi des objets. On peut appliquer la structure “ for...in“ à un tableau : on parcourira alors les éléments 0, 1, 2, …
– A noter que Cours["teacher"] est équivalent à Cours.teacher (la première est necéssaire si le nom de la propriété est dans une variable)
Boucle While
L'Itération WHILE (TANT QUE) :
WHILE (condition) {
séquence d'instructions
}
La boucle while exécute le même bloc de code
tant que la condition spécifiée est vraie.
Exemple boucle While
<html>
…
<body>
<script type="text/javascript">
var i=0;
while (i<=10) {
document.write("The number is " + i);
document.write("<br />");
i=i+1;
}
</script>
</body>
</html>
Programmation événementielle en
JS
Evénements JS
– Les événement sont l’ intérêt du JS en matière de
programmation Web
– Ils donnent une interactivité à la page que vous
consultez, ce qui n’ existe pas avec le HTML, si on
excepte bien entendu le lien hypertexte
– Le JS permet de réagir à certaines actions de
l’ utilisateur
– On nomme évènement le mot
Event
, et gestionnaire
d’ événement le mot-clé
onEvent
Événements JS
Définition générale : <Balise onEvent = "code JS " >
onEvent est le nom du gestionnaire d'événements associé àl'événement Event, comme onClick
Balise est un nom de balise qui sait gérer un tel événement "code JS" est généralement une fonction déclarée auparavant
dans une section
<HEAD> <SCRIPT>...</SCRIPT> </HEAD>
Mais ce peut être aussi une suite d'instructions JS, séparées
par des virgules.
Remarques
On peut utiliser plusieurs gestionnaires d'événements sur un
même composant.
<A HREF="URL" onMouseOver="fct1()“ onMouseOut="fct2()"> voir </A>
Evenement : load
– Gestionnaire: onLoad
– Exemple :
<body onLoad="alert(‘ la page est en train d’ être chargée ’ ) ;"> – Balises supportées :
• <body> • <frameset>
– Effets : Au chargement, réaliser tel événement
Evénements liés à la souris
– Gestionnaire :
onMouseOut
– Exemples :
<a href="http://www.google.fr" onMouseOut=”alert(‘Vous ne voulez pas y aller ?’) ;"> http://www.google.fr </a>– Balises supportées :
• Presque toutes
– Effets :
• Prévient quand on s’éloigne de la cible
Evénements liés à la souris
– Gestionnaire d’ événement : onClick
– Exemple :
<input type=” button” onClick=” alert(‘ vous avez cliqué sur le bouton’ ) ;"> – Balises supportées : • <input type="button"> • <input type="checkbox"> • <input type="radio"> • <input type="reset"> • <input type="submit"> • <a href..>
Evénements liés à la souris
Gestionnaire d’ événement :
onMouseOver
– Exemple :
<
A HREF=URL onMouseOver=” alert(‘ Cliquer ici pour
ouvrir le lien’ ) ;"> Lien </A>
– Balises supportées :
•
<A HREF..>•
<AREA HREF..>Evénement Focus
– Gestionnaire : onFocus – Exemples :<input type="text" value="votre nom" name=” nom” onFocus="alert(‘ Ecrivez votre nom ici’ ) ;"> – Balises supportées : • <input type="text"> • <select> • <textarea> • <input type="password"> – Effets :
• Écrit le message quand on clique sur la zone d’ entrée du texte
Evénement blur
– Gestionnaire : onBlur
– Exemples :
<input type="text" value="votre nom" name="nom" onBlur="alert(‘ Vous n\’ avez rien oublié ?’ ) ;"> – Balises supportées : • <input type="text"> • <select> • <textarea> • <input type="password"> – Effets :
Evénement Select
– Gestionnaire d’ événement :
onSelect
– Exemples :
<input type="text" value="votre nom" name=” nom”
onSelect=” alert(‘ Vous avez sélectionné un champ’ )
;">
– Balises supportées :
• <input type="text">
• <textarea>
– Effets :
• Avertit de la sélection d’ un champ dans un formulaire
Evénement change
– Gestionnaire : onChange
– Exemples :
<input type="text" value="votre nom" name="nom" onChange="alert(‘ Vous avez changé votre nom ’ ) ;"> – Balises supportées : • <input type="text"> • <select> • <textarea> • <input type="password"> – Effets :
• Avertit du changement par rapport à ce qu’ il y avait d’ écrit dans la zone d’ écriture
Evénement Submit
– Gestionnaire d’ événement : onSubmit
– Exemple :
<input type="submit" value="Envoyer"
name="envoi" onSubmit="alert(‘ C’ est parti !’ ) ;"> – Balises supportées :
• <input type="submit"> – Effets :
• Avertit de la soumission du formulaire
Evénement Reset
– Gestionnaire : onReset
– Exemple :
<input type="reset" value="Effacer" name=” effacer” onSubmit=” alert(‘ On efface tout !’ ) ;">
– Balises supportées : • <input type="reset"> – Effets :
Les objets du navigateur
Notion d’ objet en JS
Le Javascript traite les éléments qui s'affichent dans
votre navigateur comme des objets, c'est-à-dire des
éléments :
• classés selon une hiérarchie pour pouvoir les
désigner précisément
• auxquels des propriétés et des actions (méthodes)
sont associées
Comment JavaScript définit
les objets
Javascript divise la page du navigateur en éléments
(objets), afin de permettre d'accéder à n'importe
lequel d'entre-eux.
On commence généralement par l'objet le plus grand
(celui contenant tous les autres) puis on descend
dans la hiérarchie jusqu'à arriver à l'objet voulu
L'objet le plus grand est l'objet fenêtre : window
Dans la fenêtre s'affiche une page, c'est l'objet
document
Cette page peut contenir plusieurs objets, comme
des formulaires, des images, etc
.
Les classes de base du
navigateur
Objets fondamentaux
navigator : c'est le logiciel client dont le nom est noté
dans navigator.appName
window : l'objet de plus haut niveau créé par le
navigateur, c'est sa fenêtre
location : c'est l'objet URL de la fenêtre courante history : ce sont les URL précédemment visitées document : il s'agit du document courant, dont les
propriétés sont le titre, les couleurs (fond, texte, lien ...), les formulaires, les images etc..
Hiérarchie des objets
Les classes de base du
navigateur
Les objets de ces classes sont automatiquement
instanciés
Les applications JS peuvent alors dialoguer avec ces
objets visuels et les manipuler
Le programmeur peut ainsi agir sur l'état du
navigateur, de ses fenêtres et des documents et des
composants qui y sont inclus.
un objet document est une propriété de window, qui
est elle-même un objet doté de propriétés et de
méthodes
...Accéder aux propriétés d'un objet
Une propriété est une donnée qui décrit un objet
Pour désigner complètement et correctement un
objet, il faut faire précéder son nom de la suite des
noms des objets qui le contiennent (en respectant la
hiérarchie des objets)
cette liste doit être séparée par l'opérateur . (point)
Comme la couleur de fond est la propriété bgColor de
l'objet document, pour mettre le fond en bleu on
écrira :
document.bgColor = 'blue' ;
Accéder aux propriétés d'un objet
Pour une page HTML, nous avons par
exemple les propriétés suivantes :
Propriétés de l'objet WINDOW
Protocole utilisé : window.location.protocol URL : window.location.href
Message de la barre d'état : window.defaultStatus =
Propriétés de l'objet DOCUMENT
Titre du document : document.title = Cours JavaScript Couleur du texte : document.fgColor = #000000 Couleur du fond : document.bgColor = #f1f1f1
Objet document
L'objet document est un élément majeur, il va vous
de récupérer des informations d'un formulaire, écrire
du texte...
Propriétés :
•
document.fgColor,
permet de récupérer et de
changer la couleur du texte de votre page HTML
document.fgColor = "#993333";
•
document.bgColor
, permet de récupérer et de
changer la couleur de fond de votre page HTML
•
document.lastModified
, permet de savoir quand la
page html a été modifiée (Internet explorer renvoie :
11/07/2007 19:41:00)
Objet document
•
document.linkColor
, permet de changer la couleur des
liens de votre page HTML
•
document.location
, permet de récupérer et changer
l'url de votre page HTML, ce qui revient à charger
une autre page HTML
document.location = "URL/monDoc.HTML";
•
document.write
(), permet d'écrire dans votre page
HTML
•
document.images[ ]
, permet de récupérer et changer
les images de votre page HTML
•
document.forms[ ]
, permet de récupérer et changer les
informations de votre formulaire
Objet document: propriétés
Couleur liens visités
vlinkColor
URL document
URL
Contenu <TITLE>
title
URL appelante
referrer
Couleur liens
linkColor
Date dernière modification
lastModified
Couleur premier plan
fgColor
Nom de domaine du serveur
domain
Cookie
cookie
Couleur de fond
bgColor
Couleur lien actif
alinkColor
Description
Propriété
Exemples
Donne la date de la dernière modification du
document
<html>
<head><title>Test</title></head> <body>
<script type="text/javascript">
document.write("dernière mise à jour: " + document.lastModified); </script>
</body> </html>
Exemples
Permet de récupérer le contenu de la balise <title> et l’ adresse de la
page <head> <title>Test</title> </head> <body> <h1> <script type="text/javascript"> <!--document.write(document.title);
document.write("Ce fichier: " + document.URL); //-->
</script> </h1>
</body> </html>
Objet window
est l'objet par excellence dans Javascript, car il est
parent de chaque objet qui compose la page web
il contient donc :
• l'objet document : la page en elle-même
• l'objet location : le lieu de stockage de la page
• l'objet history : les pages visitées précédemment
• l'objet frames : les cadres (division de la fenêtre en
sousfenêtres)
Objet window : propriétés
contenu barre d'état status fenêtre courante self/top si cadre parent nom fenêtre ouvrante opener nom name nb de cadres length message par défaut(barre état defaultStatus fenêtre fermée? closed Description Propriété
Objet window : méthodes
Fenêtre courante
focus()
URL page accueil
home()
Déplacement relatif
moveBy(hor,ver)
Déplacement absolu
moveTo(x,y)
Ouvre fenêtre
open(args)
URL suivant historique
forward()
Fenêtre plus courante
blur()
Ferme fenêtre
close()
Affiche boîte confirmation
confirm(chaine)
URL précédent historique
back()
Affiche boite alerte
alert(chaine)
Description
Méthode
Objet window : méthodes
Supprime délais
clearInterval(IDinterv)
Défilement visualisation
scrollTo(x,y)
Défilement visualisation
scrollBy(hor,ver)
Redimensionne
resizeTo(Wid,Hei)
Redimensionne
resizeBy(hor,ver)
Imprime
print()
Évalue expr après msec
setTimeOut(expr,msec)
Affiche boîte entrée
prompt(chaine,[val/defaut])
Évalue expr après msec
setInterval(expr,msec)
Description
Méthode
Efface fonction chrono
clearTimeOut(Idchrono)
La classe Window
Fen1 = open("URL","nom_fenetre", "options");
"URL" est l'adresse du document à charger dans la
nouvelle fenêtre
"nom_fenetre" est le nom de la fenêtre, à donner à
l'attribut TARGET des balises <FORM> ou <A>
"options" est une liste d'éléments optionnels qui
précisent l'aspect de la fenêtre
On utilise ensuite Fen1 pour faire référence à un objet ou
une propriété de la nouvelle fenêtre.
Par exemple, Fen1.document.write("...");
La classe Window
Paramètres de la partie OPTIONS :
barre d'outils : toolbar[=yes|no] | [=1|0]
url visible : location[=yes|no] | [=1|0]
répertoire ? directories[=yes|no] | [=1|0]
barre d'état : status[=yes|no] | [=1|0]
barre de menu : menubar[=yes|no] | [=1|0]
barre de défilement : scrollbars[=yes|no] | [=1|0]
Redimensionnement : resizable[=yes|no] | [=1|0]
visibilité permanente ? alwaysRaised[=yes|no] | [=1|0]
fermée avec la fen. parente : dependant[=yes|no] | [=1|0]
height= dimension en pixels
width= dimension en pixels
positionnement X : screenX = nb pixels
positionnement Y : screenY = nb pixels
Exemple open()
<html> <head> <title>Test</title> <script type="text/javascript"> function nouvellefenetre() { mafenetre = window.open("window0.html", "secondefenetre", "width=300,height=200,scrollbars"); } </script> </head> <body><a href="javascript:nouvellefenetre()"> nouvelle fenêtre </a> </body></html>
Minuteries
setInterval() : exécution de code JS à intervalles
réguliers
clearInterval() : arrêt de la minuterie
setTimeout() : exécution de code JS au bout d'un
délai
clearTimeout() : annule setTimeout
Exemple
Fermeture automatique d’ une fenêtre, après
20sec.
<html> <head>
<title>Test</title>
<script type="text/javascript">
var InfoWin = window.open("exercice1.html","secondefenetre"); InfoWin.setTimeout("top.close()",20000); </script> </head> <body> </body> </html>
Confirm()
– Cette méthode ouvre une boîte de dialogue avec 2 boutons : OK et Annuler. Elle permet :
• d'envoyer une information • de recevoir un booléen <script language="JavaScript">
if (confirm('Je vais dire sur quel bouton vous avez appuyé : '))
{alert(' Sur OK \n Continuez avec :') }
else {alert(' Sur Annuler \n Sortez avec Ok !') }; </script>
Objet navigateur
Cette classe ne contient qu'un seul objet, appelé
navigator, qui est créé au démarrage du logiciel
navigator.userAgent = Mozilla/4.7 [fr] (Win95; I)
navigator.appCodeName = Mozilla
navigator.appVersion = 4.7 [fr] (Win95; I)
navigator.appName = Netscape
navigator.language = fr
navigator.platform = Win32
navigator.securityPolicy = France policy
navigator.plugins = [object PluginArray]
History et Location
history : liste des documents chargés dans la fenêtre (simule
l'action des boutons suivant et précédent)
history.back() : document précédent
history.forward() : le suivant
history.go(n) : recharge le document situé à n étapes du
présent document
location
location.href : chaîne contenant l'url
location.hash : partie de l'url après # (lien interne)
location.host : nom serveur et port
location.protocol : http, ftp, javascript, ..
location.reload() : recharge le document courant =
history.go(0)
location.replace(url) : remplace le document courant
Objet location: propriétés, méthodes
Description
Méthode
Info pour cgibin GET
search
Val location.href
assign(chaine)
Nom ancrage
hash
Chemin du document
path
Port
port
Nom hôte
hostname
Nom hôte + N° port
host
Protocole
protocol
URL entière
href
Description
Propriété
Exemples
Liens dans une page HTML :
<a href="javascript:history.go(-5)">5 pages en
arrière</a>
<a href="javascript:history.back()">page
précédente</a>
<a href="javascript:history.forward()">page
suivante</a>
<a href="javascript:history.go(5)">5 pages en
avant</a>
La hiérarchie de la classe
document
Un document HTML peut contenir diverses balises d'insertion d'images,
de formulaires, d'hyperliens, etc .. qui sont autant d'objet du point de vue du navigateur
JS les classe dans des tableaux d'objets au fur et a mesure, dans
l'ordre de leur apparition. Chaque objet peut posséder des propriétés et des méthodes
Par exemple, soit le 1er formulaire déclaré par
<FORM NAME="formu">
On peut le nommer aussi bien par document.formu que par
document.forms[0]
images[2] est la 3ème image insérée, avec une balise
<IMG SRC="....gif">
La hiérarchie de la classe
document
Les différents tableaux accessibles :
anchors[] tableau des liens internes <A NAME= ...>
forms[] tableau des formulaires <FORM>
elements[] tableau des composants du formulaire
<INPUT ..>, <SELECT ..>, ..
images[] tableau des images <IMG SRC=...>
links[] tableau des liens hypertextes <A HREF= ...>
...
Objet formulaire
Avec l'objet forms, qui se trouve sous l'objet
document dans la hiérarchie JavaScript, vous avez
accès aux formulaires définis dans un fichier HTML
On peut acceder à un formulaire par son nom, ou
par son idex dans le tableau forms[] de l’ objet
document.
Exemples
• document.nom-form.propriété
• document.forms[0].méthode
Propriétés
Action : Définit l'URL où le formulaire sera envoyé
Elements : Tableau représentant les éléments du formulaire Length : Nombre d'éléments à l'intérieur du formulaire Method : Définit le type d'envoi du formulaire (get ou post) Name : Définit le nom du formulaire
Pour les pages en cadres :
Target : Définit la page (fenêtre ou frame) de réponse Parent : Indique une fenêtre d'un cadre (frame)
Exemple : action
<html>
<head><title>Test</title> <script type="text/javascript">
function confirmation() {
window.confirm("Ce formulaire est envoyé à" + document.formulaire_test.action); }
</script></head> <body>
<form name="formulaire_test" action="mailto:toimeme@cheztoi.com"
onSubmit="confirmation()">
<input type="text" size="40" name="saisie"> <input type="submit" value="Envoyer"> </form>
</body></html>
Exemples
Appel à une fonction de lecture en cliquant un bouton du formulaire
<html>
<head> <title>Programme 2</title></head> <script language="JavaScript">
function lireAnnee() {
annee=prompt('En quelle année sommes-nous ? ', 2000); alert('Vous avez répondu : ' + annee) }
</script> <body> <form>
<input type="button" value="En quelle annee ? " onClick="lireAnnee()"> </form>
</body></html>
Elements de formulaire
– Propriétés : • checked (coché)
• defaultChecked (coché par défaut) • defaultValue (valeur entrée par défaut) • form (nom du formulaire)
• name (nom de l'élément) • type (type de l'élément)
• value (valeur/contenu de l'élément)
Elements du formulaire
– Méthodes :
• blur() (quitter l'élément) • click() (cliquer sur l'élément) • focus() (positionner sur l'élément) • handleEvent() (traiter l'événement) • select() (sélectionner du texte)
Exemple
Il s’ agit d’ accéder à la case à cocher pour modifier contenu de
la zone du texte en inscrivant : case cochée ou case non cochée
La modification se fera par la fonction ModifChamp();
<form name="form1">
<input type="checkbox" name="checkbox"
onClick="ModifChamp();"> <br>
<input type='TEXT' name=‘ test' value='Essai du javascript' size='24'> </form>
Exemple (suite)
<head> <script language="Javascript"> function ModifChamp() { if (document.forms["form1"].checkbox.checked) { document.forms["form1"].test.value='Bouton coché' } else {document.forms["form1"].test.value='bouton non coché' } } </script>
</head>
Exemple
Lire un nombre et écrire son double
<html>
<head><title>Programme 3</title></head> <body>
<form name="lire"> Entrez un nombre :
<input type="text" name="nbre" size="3"> <input type="button" name="double" value="go"
onClick="JavaScript:document.lire.aff.value=2*Number(document.lire.nbre.valu e);">
voici son double : <input type="text" name="aff "size="8"> </form>
</body></html>
Exemple : boutons radio
<HTML> <HEAD>
<SCRIPT language="javascript">
function choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " + form3.choix[0].value) }; if (form3.choix[1].checked) { alert("Vous avez choisi la proposition " + form3.choix[1].value) }; if (form3.choix[2].checked) { alert("Vous avez choisi la proposition " + form3.choix[2].value) }; } </SCRIPT> </HEAD>
Les boutons radio
<BODY> Entrez votre choix : <FORM NAME="form3"> <INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR> <INPUT TYPE="radio" NAME="choix" VALUE="2" CHECKED >Choix numéro 2<BR> <INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR> <INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?" onClick="choixprop(form3)"> </FORM> </BODY> </HTML>Exemple : Radio
Écrire un formulaire qui permet de réaliser un choix et de l’ afficher : <html>
<head>
<script language="JavaScript"> var vote='';
function enregistrer(x){vote=x}
function depouiller() {document.election.resultat.value=vote} </script> </head>
Exemple (suite)
<body><form name="election"> Vous êtes pour l'informatique ?
<input type="radio" name="vote" onClick="enregistrer('oui')">oui <input type="radio" name="vote" onClick="enregistrer('non')">non <input type="radio" name="vote" onClick="enregistrer('abstention')">
abstention
<input type="button" name="reponse" value="Résultat" onClick="depouiller()">
<input type="text" name="resultat" value=""> </form>
</body>
Exemple
Contrôle des informations : à l’ enregistrement du formulaire de saisie on redemande l’ entrée d’ une information si elle est vide <body>
<form name="fiche">
Nom : <input type="text" name="nom" value="" size="24"> Prénom : <input type="text" name="prenom" value="" size="24"> Age : <input type="text" name="age" value="" size="24"> <input type="button" value="Enregister" onClick="verifier()"> <input type="reset" value="Annuler">
</form> </body>
Exemple (suite)
<head><title> Si... Alors... Sinon... </title></head> <script language="JavaScript"> function verifier() { if (document.fiche.nom.value=="") { alert('Saisissez le nom ! ');} else { if (document.fiche.prenom.value=="") { alert('Saisissez le prénom ! '); } else { if (document.fiche.age.value=="") { alert('Saisissez l\'âge ! '); };}; }} </script> </head>
Exemple : select
Choisir parmi une liste et afficher le choix <body>
<form name="musique"> <select name="choix"
onChange="Preferer(document.musique.choix.selectedIndex)">
<option value = "classique">classique </option> <option value = "jazz">jazz </option>
<option value = "rock">rock </option> <option value = "pop ">pop </option> </select>
</form>
Exemple (suite)
<html> <head>
<title> choix </title>
<script language="JavaScript">
function Preferer(x){
switch(x) {
case 1 : alert('Votre choix : '+'classique');break; case 2 : alert('Votre choix : '+'jazz'); break; case 3 : alert('Votre choix : '+'rock'); break; case 4 : alert('Votre choix : '+'pop'); break; }; }; </script>
</head>
Exemple
Rédirection sur des pages différentes suite à la réponse au formulaire <html> <head> <script language="JavaScript"> function Envoyer(x) { switch(x) { case 1 : document.location.href='page1.htm';break; case 2 : document.location.href='page2.htm';break; case 3 : document.location.href='page3.htm';break; case 4 : document.location.href='page4.htm';break; }; </script> </head>
Exemple (suite)
<body>
<form name="lecteur"> <select name="choix"
onChange="Envoyer(document.lecteur.choix.selectedIndex)"> <option>page1</option> <option>page2</option> <option>page3</option> <option>page4</option> </select> </form> </body></html>
Les classes predéfinies de
Javascript
Classe Date
var aujourdhui= new Date();
var maDate = new Date ("November 24, 1981"); var jour = maDate.getDate () // jour vaut 24. document.write("Nous étions le ", jour, "/",
maDate.getMonth()+1, "/", maDate.getYear()+1900 ,<br>); document.write("Nous sommes le ", aujourdhui.getDate(), "/", aujourdhui.getMonth()+1, "/", aujourdhui.getYear()+1900 );
Date: méthodes (1)
Minutes; 0 59 getMinutes() Année getFullyear() Nb années depuis 1900 getYear() Nb de secondes depuis le 1er Janvier 1970 getTime() Mois; 0 11 (0=janvier) getMonth() Secondes; 0 59 getSeconds() Heures; 0 23 getHours() Jour de la semaine; 0 6 (0=Dimanche) getDay() Valeur jour du mois; 1 31 getDate() Description MéthodeDate: méthodes (2)
Date sous forme de chaine toLocalString() Année=arg setYear(arg) Nb de secondes depuis le 1er Janvier 1970=arg setTime(arg) Mois=arg setMonth(arg) Secondes=arg setSeconds(arg) Minutes=arg setMinutes(arg) Heures=arg setHours(arg) Jour du mois=arg setDate(arg) Description MéthodeExemple Date + Switch
<script type="text/javascript">
//on affiche une phrase différente selon le jour de la semaine //on a Dimanche=0, Lundi=1, Mardi=2, etc.
var d=new Date(); // création de l’ objet date
theDay=d.getDay(); // on récupère le jour de la semaine switch (theDay) {
case 5: document.write(" Enfin vendredi"); break;
case 6: document.write("Super Samedi"); break;
case 0: document.write("Dimanche répos"); break;
default: document.write(« Vivement le weekend!"); }
</script>
Exemple Date + conditionnelle
var theTime = new Date(); theTime = theTime.getHours(); if( theTime < 6 || theTime >= 21 ) { document.write( 'night' ); } else {
if( theTime >= 6 && theTime < 12 ) { document.write( 'morning' ); } else {
if( theTime >= 12 && theTime < 18 ) { document.write( 'afternoon' ); } else { document.write( 'evening' ); } } }
Classe Math
Math: propriétés
Racine carrée de 1/2
SQRT_2
Racine carrée de 2
SQRT2
Constante pi
PI
Log de e à la base 10
LOG10E
Log de e à la base 2
LOG
Log naturel de 10
LN10
Log naturel de 2
LN2
Constante e
E
Description
Propriété
Math: méthodes
Entier immédiatement inférieur floor(n) Entier immédiatement supérieur ceil(n) Racine carrée sqrt(n) Entier le plus proche round(n) Nb aléatoire entre 0 et 1 random() n1 à la puissance n2 pow(n1,n2) Minimum des 2 valeurs min(n1,n2) Maximum des 2 valeurs max(n1,n2) Log de x log(x) E puissance x exp(x) Valeur absolue abs(n) Description MéthodeClasse Math
Math Conversion chaine <--> nombre (entier ou flottant)
Fonctions parseInt(), parseFloat() et eval()
isNaN(arg) détermine s'il s'agit d'un nombre
A l'issue de ce script, entier contient 3 et reel contient 3.14
var chaine="3.14"; var entier=parseInt(chaine); var reel=parseFloat(chaine);
Classe Math
A l'issue du script, entier et reel contiennent NaN, car "azerty" ne peut pas se convertir en nombre. La valeur de rate est à vrai car la conversion a échoué. var chaine="azerty"; var entier=parseInt(chaine); var reel=parseFloat(chaine); var rate=isNaN(entier); Exemple d'utilisation pour controler la saisie d'un entier : <SCRIPT LANGUAGE="JavaScript"> function testnum(chnum) { num=parseInt(chnum); if ( isNaN(num) ) alert(chnum+ 'n\'est pas pas un entier !'); } </SCRIPT>Exemple Math
<script language="JavaScript"> temp=new Array(30);
function relever() {
for (i=1;i<=30;i++) // i commence à 1
{ temp[i-1]=17+Math.floor(5*Math.random()); }; // i-1=0, donne le premier indice
}; function moyenner() { som=0; for (i=1;i<=30;i++) { som+=temp[i-1]; }; return Math.round(10*som/30)/10; }; </script>
STRING: Méthodes
Conversion en majuscules
toUpperCase()
Conversion en minuscules
toLowerCase()
Souschaine
substring(ind1,ind2)
Lg cars depuis dep
substr(dep[,lg])
Tableau de chaines
split(sépar)
Id en arrière
lastIndexOf(ch,ind)
Indice ch à partir de ind
indexOf(ch,ind)
Concaténation avec ch
concat(ch)
Caractère à l'ind donné
charAt(ind)
Description
Méthode
Classe String
split(séparateur) : sépare une chaîne en sous chaînes suivant
un caractère délimiteur
Exemple
var ch='/usr/local/temp'; var tab=ch.split('/') ;
document.write(''le premier élément '' + tab[0]);
Classe String
Concaténation de chaînes.
var chaine1="Vive le "; var chaine2="JavaScript"; var chaine=chaine1+chaine2;
var chaine="azerty";
chaine.length retourne le nombre de caractères, ici 6 caractères.
Evaluation d'une expression.
var x=10;
eval(x+20); eval ("2+2");
Extraire une sous-chaîne.
var date = "15/08/2000"; var jour = date.substring(0,2); var mois = date.substring(3,5); var annee = date.substring(6,10);
La classe Image
Elle fait partie des classes d'objets prédéfinies du langage (à
partir de la version 1.2). Contrairement à l'usage de la balise IMG, on peut précharger l'image et la stocker en cache (mémoire+disque) dans un objet de type Image, avant de l'afficher.
Contructeur Image() :
Il s'agit d'une fonction spéciale sans paramètre qui sert à créer
un objet
var monImage = new Image() Propriétés :
Elles correspondent aux attributs de la balise <IMG>
name, src, lowsrc, height, width, border, hspace, vspace ..
Traitements des images en JS
Rappels HTML
la balise <IMG NAME= .. SRC="URL" WIDTH=..
HEIGHT=.. ALIGN= ..>
URL est l'adresse internet (en général relative) du
fichier image à charger (.gif ou .jpg)
l'alignement de l'image par rapport au texte voisin est
réglé par l'attribut align
une image peut servir d'ancre pour un hyperlien
le navigateur classe les images insérées dans le
document dans un tableau images[]
La classe Images
La proprieté src permet de charger le fichier image à
partir d'une URL et de le stocker dans l'objet
var monImage = new Image();
monImage.src = "moi.jpg";
Mais l'image n'est pas affichée. Elle pourra l'être dans
une balise <IMG>
<IMG SRC=...>
Malheureusement, les propriétés height et width ne
sont pas modifiables
Les frames
On peut diviser la fenetre en plusieurs cadres
indépendantes (balise HTML <frameset..>)
En Javascript, on peut faire interagir ces
cadres, c’ est à dire échanger des
informations dans un cadre à l’ autre.
Exemple au tableau
Gérer les cookies en JS
Pourquoi les cookies ?
On peut définir les cookies comme la "mémoire du WEB"
Seule façon de s'affranchir de l'impossibilité d'écrire sur le disque du
navigateur client (JS ne possède pas d'instructions d'entrées-sorties fichiers)
Le mécanisme de pose de "cookies" a été imaginé pour permettre au
moins à un serveur de retrouver certains résultats de sa consultation précédente du client
Pour cela, le serveur écrit sur le disque client quelques informations
qu'il pourra chercher et réexaminer lors d'une prochaine visite du même "client"
Ces renseignements sont stockés sous forme de chaîne de caractères,
dans un seul fichier au format texte, appelé cookies.txt
Ils restent stockés, à l'insu de l'utilisateur client le plus souvent pendant
toute leur durée de vie, le "risque" dans ce dispositif étant l'effacement du fichier cookies.txt
Gérer les cookies en JS
Enregistrement d'un cookie :
Durant la session Web, chaque cookie est conservé en
mémoire, il y a écriture sur le disque à la fermeture du navigateur. L'écriture s'effectue sur instruction du serveur utilisant la directive HTTP suivante (incluse dans l'en-tête)
nom=valeur; [expires =date; path= chemin-client; domain=
nom-domaine; secure]
Seul le 1er champ, le nom identifiant le cookie et sa valeur (chaîne de
caractères stockée) sont obligatoires
date : la date d'expiration, au delà de laquelle le cookie sera supprimé
du fichier
chemin : nom du répertoire serveur
nom-domaine : nom du domaine Internet dans lequel le cookie peut
être traité, les autres serveurs devant l'ignorer
secure : le cookie ne peut être consulté qu'au cours d'un échange
sécurisé (type https)
Gérer les cookies en JS
Suppression d'un cookie :
La méthode la plus simple consiste à le réenregistrer
en lui attribuant une date d'expiration dépassée
Exemple :
<SCRIPT LANGUAGE="JavaScript"> // la date est dépassée !
var date = new Date(1999,0,1); function EffacerCookie() { //nom est le nom du cookie
document.cookie = "CompterPassageCoursCookie=" +
";expires=" + date.toGMTString();
}
Exemple Cookie
On va créer un cookie qui sauvegarde le nom d'un visiteur de
notre site web.
A la première visite, on demande à l'internaute de nous fournir
son nom.
Par la suite, le même visiteur recevra un message de bienvenue.
Fonction pour la création du cookie.
function setCookie(c_name,value,expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }
Fonction qui recupère le cookie. function getCookie(c_name){ if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }
Fonction qui vérifie l'existence du cookie
function checkCookie() {
username=getCookie('username'); if (username!=null && username!="") { alert('Welcome again '+username+'!'); } else
{username=prompt('Please enter your name:',""); if (username!=null && username!="")
{setCookie('username',username,365);} }