Vous êtes sur la page 1sur 35

Outils pour le web

Clara Bertolissi
Javascript
L3 – Université de Provence

Javascript
Javascript
 Le language JavaScript est parfaitement adapté pour des
 Est un langage de script incorporé dans le HTML traitements sur le poste du navigateur. Quelques exemples :
 Historiquement, premier langage de script pour le Web  Vérification de saisie dans des formulaires (Adresse, email)
 Apporte des améliorations au HTML en rendant les pages plus  Calculs simples suite à des saisies de formulaire (Tarifs,
interactives calculatrice)
 Gestion des dates et des heures (Date du jour, Date de mise à
 Le code JS est interprété par le navigateur client. Aucune jour, Calendriers)
interaction avec le serveur.  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 - Java
Javascript
 Mais c'est un langage limité : JavaScript rassemble à Java:

C'est un langage de script dépendant de HTML.
– JavaScript a la notion d'Objet et de types de donnée
prédéfinis

Ce n'est pas véritablement un langage orienté objet (pas – JavaScript a des événements et peut gérer les exceptions
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, MaisJavaScript ne rassemble pas à Java:
un script de sondage ou de vote, dont les données sont – Les variables ne sont pas type lors de la définition : le type
stockées, soit dans un fichier, soit en base sur le serveur. dépend de la valeur qui est associé à la variable.

JavaScript n'échange pas avec d'autres machines – Les Objets et les tableaux sont différents
connectées. Impossible donc de créer une page de chat – JavaScript a des structures différentes de Java.
(discussion en direct).

Emplacement du code JS Ecriture et exécution du code JS


Il y a plusieurs endroits dans une page web où il est Entre les balises
possible d'intégrer du code JavaScript : <SCRIPT type=''text/javascript'' >....</SCRIPT>
dans la section d'en-tête, ou dans le corps de la page.
 dans le corps de la page,
 en entête de page,

Le code inclus dans la séquence <SCRIPT> est évalué au début
du chargement de la page
 dans un événement d'un objet 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
exécuté en même temps que le code HTML est interprété
Ecriture et exécution du code JS Ecriture et exécution du code JS

Associé à une balise HTML qui gère un 
Associé à un lien
événement <A HREF="javascript:ma_fonction()">Cliquez ici</A>
<balise ... onEvenement="code JS ou fonction JS" >

L'opérateur void :

balise est le nom de certaines balises html, souvent Pour empêcher que le code ou la fonction appelée ne
des composants de formulaire.
remplace le document courant, on applique

onEvenement est un nouvel attribut de la balise (e.g. l'opérateur void, qui neutralise toute valeur ou tout
onSubmit, onClick, onChange, …)
effet de retour

Bien entendu il faut connaître les associations entre
évènements et balises "sensibles" à ces <A HREF="javascript:void(ma_fonction(..))">...</A>
évènements.

Comment écrire, afficher


Ecriture du code JS l'information
 La structure classique d'une page HTML contenant du JavaScript :
<HTML> <html>
<HEAD> <head>
<SCRIPT language="JavaScript"> <title>Programme 1</title>
<!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JS
// déclaration de functions JS </head>
//--> // Fin de la partie cachée <body>
</SCRIPT> <script language="JavaScript">
</HEAD> <!--
<BODY>
<SCRIPT type="text/JavaScript"> document.write('Vous avez le bonjour de JavaScript <br>');
<!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JS //-->
// code Javascript </script>
//--> // Fin de la partie cachée </body>
</SCRIPT>
</BODY> </html>
</HTML>
Comment écrire, afficher
l'information Exemple
Méthode promt() <html>
 ouvre une boîte de dialogue avec une zone saisie et <head><title>Programme In1</title></head>
2 boutons OK et Annuler, et rend l’ information lue <body>
<script language="JavaScript">
<!--
annee=prompt('En quelle année sommes-nous ? ', 2000);
alert('Vous avez répondu : ' + annee);
Méthode alert () //-->
 permet d’ écrire un message dans une fenêtre </script>
</body>
</html>

Déclaration de fonctions en JS Fonctions en JS


 Il est recommandé de les inclure entre les balises  Visibilité des paramètres :
<head> et </head> 
De façon générale, les paramètres formels d'une fonction ne
sont connus qu'à l'intérieur de la fonction
<HEAD> 
De même, les variables locales, variables qui sont
<SCRIPT LANGUAGE=JavaScript > explicitement déclarées à l'intérieur de la fonction
Function nomProcédure(param1, param2, ...) {
séquence d'instructions;
 Conséquences :
}

Si la valeur d'un paramètre ou d'une variable locale est
Function nomFonction(param1, param2, ...) { modifiée dans la fonction, cette modification ne sera pas
connue à l'extérieur de la fonction. On dit que cette variable
séquence d'instructions;
n'est pas visible au niveau du programme général
return nom_variable;
}
 Possibilité d'écrire des fonctions récursives
</SCRIPT>
</HEAD>
Fonctions en JS Exemple
 L'objet Function : <head>

A chaque fonction rencontrée, JavaScript construit un <script language="JavaScript">
tableau de ses arguments

Si la fonction s'appelle calculer, ce tableau a : var volume;

pour éléments calculer.arguments[i] function VolCylindre(r,h) {

pour taille calculer.arguments.length pi=3.14159;
volume = pi*r*r*h;

Exemple : }
function calculerPrix(PrixUnitaire, NbArticles) { </script>
if (calculerPrix.arguments.length !=2) </head>
alert("impossible de calculer le prix !") <body>
else VolCylindre(1,2);
return PrixUnitaire* calculerPrix.arguments[1]; document.write(volume);
}
</body>

Les données constantes Notation


 Constantes :  Caractères spéciaux :

les constantes numériques : entiers, "réels" écrits \b (retour arrière), \f (saut de page) ,
en notation décimale ou flottante \n (nouvelle ligne) , \r (Entrée),

les 2 constantes booléennes : true ou false & (tabulation), \' pour une apostrophe

les chaînes de caractères, entourées
indifféremment d'apostrophes ' ' (à privilégier) ou On peut insérer du code HTML sous forme de chaînes, qui
de guillemets " " sera bien interprété comme de véritables balise

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)
Déclaration et affectation de Déclaration et affectation de
variables variables
 Types de variables :  Notation : var nom = valeur

Les nombres : number

Le mot var est facultatif, mais recommandé.

les chaines : string

Les variables doivent commencer par une lettre ou
par _

les booléens : boolean 
JS distingue minuscules et majuscules.

les objets : object 
Le symbole = est réservé à l'affectation

les fonctions : function 
JS attribue automatiquement à la variable le type
de la valeur affectée
 La fonction typeof() appliquée à une variable

Sinon JS lui attribue une valeur et un type
indéterminés "undefined"
retourne son type

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 Operateurs arithmétiques
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>

Opérateurs de comparaison Opérateurs logiques


Comment afficher le contenu
Tableaux en JS
des variables
<html> Exemple:
<head><title>Programme 2</title></head> color = ["red", "yellow", "green", "blue"];
<body> L' indice commence à zero: color[0] vaut "red"
<script language="JavaScript">
<!--
On peut introduire des éléménts vides :
var jour = 21;
color = ["red", , , "green", "blue"];
var mois = 'juin';
color a 5 éléments
document.write(jour + ' ' + mois + ' : solstice');
//--> Mais la virgule à la fin est ignorée
</script> color = ["red", , , "green", "blue” ,];
</body> a toujours 5 éléments
</html>

Créer un tableaux Tableaux en JS


• Déclaration • La longueur d'un tableau myArray est donné par
var colors = ["red", "green", "blue"]; myArray.length
• On peut utiliser new Array() pour créer un tableau vide • La longueur peut être changé en ajoutant des
– var colors = new Array(); éléments:
colors[0] = "red"; colors[2] = "blue"; colors[1]="green";
– var myArray = new Array(5);
• On peut utiliser new Array(n) où "n" est la taille du
– myArray[10] = 3;
tableau

• Comme en C et Java, on peut avoir de tableaux de
var colors = new Array(3);
tableaux:
• On peut utiliser new Array(e1, ...,eN) avec en • myArray[5][3]
arguments les éléments du tableau
– var colors = new Array("red","green", "blue");
Fonctions pour les tableaux
Généralités sur les objets en JS
 JS n'est pas un vrai langage orienté-objet. Des concepts tels
myArray.sort() trie suivant l'ordre alphabetique que l'héritage ne sont pas implémentés.
croissant
myArray.sort(function(a, b) { return a - b; }) trie selon  Pour définir une classe d'objets, il faut préciser :
l'ordre donné par la fonction 
les propriétés (ou attributs) qui décrivent ses
myArray.reverse() reverse les éléments caractéristiques
myArray.push(… ) ajoute des éléments à la fin du tableau

les méthodes (procédures ou fonctions) qui décrivent ses
et met à jour sa longueur comportements et ses actions

myArray.pop() enleve et renvoie les dernier élément du


tableau et met à jour sa longueur Propriétés et méthodes constitutives d'une classe ne sont alors
applicables qu'à un objet de cette classe
myArray.toString() renvoie une chaîne de characteres 
objet.propriété
contenant les éléments du tableau separés par des 
objet.méthode()
virgules

Les objets Création d 'un objet


• On utilise la syntaxe On peut utiliser la syntaxe précédente : 
• { name1 : value1 , ... , nameN : valueN } – var cours = { number: "CIT597", teacher="Dr. Dave" }
• Exemple On peut utiliser new pour créer un objet vide et le remplir 
• car = {myCar: "Saturn", 7: "Mazda", getCar: CarTypes("Honda")} ensuite : 
• var cours = new Object();
- Les champs sont myCar, getCar, et 7 . cours.number = "CIT597";
cours.teacher = "Dr. Dave";
- "Saturn" and "Mazda" sont chaînes de charactèrs
- CarTypes est un appel de fonction
On peut écrire et utiliser un constructeur :
function Cours(n, t) {   // placé dans le <head> du document
     this.number = n;
• Exemple d'utilisation :      this.teacher = t;
• document.write("J'ai une " + car.myCar); }
var cours = new Cours("CIT597", "Dr. Dave");
Tableaux et objets
Conditionnelle
Les tableaux sont des objets  L'instruction conditionnelle if ... [then] .. else :

if (condition) {
car = { myCar: "Saturn", 7: "Mazda" } 
séquence 1
– car[7] est la même chose que car.7

}

else {
– car.myCar c'est le même que car["myCar"] 
séquence 2
}
• Si on connaît le nom de la proprieté, on peut utiliser la

 Remarques :
notation car.myCar 
La condition doit être toujours entourée de ( )
• Mais si le nom est stocké dans une variable ou doit 
Le mot alors (then) est toujours sous-entendue
être calculé, on doit utiliser la notation des tableaux :

La séquence else (optionnelle) est exécutée si la condition
est fausse
car["my" + "Car"] 
les { } obligatoires qu'en cas d'instructions multiples

Exemple if..then..else Switch


<HTML>
<HEAD>
 Switch :
<TITLE>Orthographe d'un nombre</TITLE>

switch (Expression){
<SCRIPT LANGUAGE="JavaScript"> 
case Premier_label:
function controler(mot)

Premières_instructions;
{ if (mot=="trois cent vingt et un") 
break;
{alert("Bravo\nVous avez bien orthographié")} 
...
else 
case Nième_label:
{alert("Vous avez écrit "+mot+"\n Il fallait écrire trois cent vingt")} 
//Nièmes_instructions;
} 
break;
</SCRIPT> 
default:
</HEAD> 
//Instruction_par_défaut
<BODY> 
break;
... 
}
</BODY>
</HTML>
Exemple Switch Boucle Pour
<script type="text/javascript">  L'itération contrôlée FOR

for (valeur initiale; condition; poursuite) {
switch (jour) { 
séquence d'instructions
}
case "vendredi": document.write("Enfin vendredi");

 La condition qui suit FOR est composée de 3 éléments :


break; 
une valeur ou expression initiale portant sur une variable entière
appelée compteur
case "samedi": document.write("Super Samedi"); 
une condition : tant qu'elle est vraie, la répétition est poursuivie
break; 
une expression de poursuite qui consiste en la mise à jour du
compteur
case "dimanche": document.write("Dimanche répos");  Variante :
break; 
for (variable in objet ) {
séquence instructions
default: document.write(« Vivement le weekend!");


}
}
</script>

Exemple boucle For Exemple tableaux à 2 dimensions


<html> <html>
… …
<body>
<body>
<script type="text/javascript">
<script type="text/javascript"> tab=new Array(3);
var i=0; tab[0]= new Array(1,2,3);
for (i=0;i<=10;i++) { tab[1]= new Array(4,5,6);
document.write("The number is " + i); tab[2]= new Array(7,8,9);
document.write("<br />"); for (i=0;i<3;i++) {
for (j=0;j<3;j++)
} document.write(tab[i][j]," " );
</script> document.write("<br> " );
</body> }
</html> </script>
</body> </html>
Exemple boucle for...in
Boucle While
On peut parcourir les propriétés d'un objet :
– for (var prop in Cours) {
 L'Itération WHILE (TANT QUE) :
document.write(prop + ": " + Cours[prop]); } WHILE (condition) {
– Résultat possible: teacher: Dr. Dave
number: CIT597 séquence d'instructions
– 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


 La boucle while exécute le même bloc de code
structure “ for...in“ à un tableau : on parcourira alors les tant que la condition spécifiée est vraie.
é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)

Exemple boucle While


<html>

<body>
<script type="text/javascript">
var i=0; Programmation événementielle en
while (i<=10) {
document.write("The number is " + i); JS
document.write("<br />");
i=i+1;
}
</script>
</body>
</html>
Evénements JS Événements JS
Définition générale : <Balise onEvent = "code JS " >
– Les événement sont l’ intérêt du JS en matière de 
onEvent est le nom du gestionnaire d'événements associé à
programmation Web l'événement Event, comme onClick
– Ils donnent une interactivité à la page que vous 
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
consultez, ce qui n’ existe pas avec le HTML, si on

dans une section


excepte bien entendu le lien hypertexte <HEAD> <SCRIPT>...</SCRIPT> </HEAD>
– Le JS permet de réagir à certaines actions de 
Mais ce peut être aussi une suite d'instructions JS, séparées
par des virgules.
l’ utilisateur
Remarques
– On nomme évènement le mot Event, et gestionnaire 
On peut utiliser plusieurs gestionnaires d'événements sur un
d’ événement le mot-clé onEvent même composant.
<A HREF="URL" onMouseOver="fct1()“ onMouseOut="fct2()"> voir
</A>

Evenement : load Evénements liés à la souris


– Gestionnaire: onLoad – Gestionnaire : onMouseOut
– Exemple : – Exemples :
<body onLoad="alert(‘ la page est en train d’ être chargée ’ ) ;">
<a href="http://www.google.fr" onMouseOut=”alert(‘Vous
– Balises supportées :
ne voulez pas y aller ?’) ;">  http://www.google.fr   </a>
• <body>
– Balises supportées :
• <frameset>
– Effets : Au chargement, réaliser tel événement • Presque toutes
– Effets :
• Prévient quand on s’éloigne de la cible
Evénements liés à la souris Evénements liés à la souris
– Gestionnaire d’ événement : onClick Gestionnaire d’ événement : onMouseOver
– Exemple : – Exemple :
<input type=” button” onClick=” alert(‘ vous avez cliqué sur
<A HREF=URL onMouseOver=” alert(‘ Cliquer ici pour
le bouton’ ) ;"> ouvrir le lien’ ) ;"> Lien </A>
– Balises supportées :
– Balises supportées :
• <input type="button">
• <A HREF..>
• <input type="checkbox">
• <input type="radio"> • <AREA HREF..>
• <input type="reset">
• <input type="submit">
• <a href..>

Evénement Focus Evénement blur


– Gestionnaire : onFocus – Gestionnaire : onBlur
– Exemples : – Exemples :
<input type="text" value="votre nom" name=” nom” <input type="text" value="votre nom" name="nom"
onFocus="alert(‘ Ecrivez votre nom ici’ ) ;"> onBlur="alert(‘ Vous n\’ avez rien oublié ?’ ) ;">
– Balises supportées : – Balises supportées :
• <input type="text"> • <input type="text">
• <select> • <select>
• <textarea> • <textarea>
• <input type="password"> • <input type="password">
– Effets : – Effets :
• Écrit le message quand on clique sur la zone d’ entrée du texte • Avertit à la fin du remplissage dans la zone d’ écriture
Evénement Select Evénement change
– Gestionnaire : onChange
– Gestionnaire d’ événement : onSelect
– Exemples :
– Exemples :
<input type="text" value="votre nom" name="nom"
<input type="text" value="votre nom" name=” nom” onChange="alert(‘ Vous avez changé votre nom ’ ) ;">
onSelect=” alert(‘ Vous avez sélectionné un champ’ ) – Balises supportées :
;"> • <input type="text">
– Balises supportées : • <select>
• <input type="text"> • <textarea>
• <textarea> • <input type="password">
– Effets :
– Effets :
• Avertit du changement par rapport à ce qu’ il y avait d’ écrit dans
• Avertit de la sélection d’ un champ dans un formulaire
la zone d’ écriture

Evénement Submit Evénement Reset


– Gestionnaire d’ événement : onSubmit – Gestionnaire : onReset
– Exemple : – Exemple :
<input type="submit" value="Envoyer" <input type="reset" value="Effacer" name=” effacer”
name="envoi" onSubmit="alert(‘ C’ est parti !’ ) ;"> onSubmit=” alert(‘ On efface tout !’ ) ;">
– Balises supportées : – Balises supportées :
• <input type="submit"> • <input type="reset">
– Effets : – Effets :
• Avertit de la soumission du formulaire • Il prévient à l’ effacement des données rentrés dans le formulaire
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 :
Les objets du navigateur
• 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 classes de base du


les objets navigateur
 Javascript divise la page du navigateur en éléments
(objets), afin de permettre d'accéder à n'importe  Objets fondamentaux
lequel d'entre-eux. 
navigator : c'est le logiciel client dont le nom est noté
 On commence généralement par l'objet le plus grand dans navigator.appName
(celui contenant tous les autres) puis on descend 
window : l'objet de plus haut niveau créé par le
dans la hiérarchie jusqu'à arriver à l'objet voulu navigateur, c'est sa fenêtre

location : c'est l'objet URL de la fenêtre courante
 L'objet le plus grand est l'objet fenêtre : window 
history : ce sont les URL précédemment visitées
 Dans la fenêtre s'affiche une page, c'est l'objet 
document : il s'agit du document courant, dont les
document propriétés sont le titre, les couleurs (fond, texte, lien ...),
 Cette page peut contenir plusieurs objets, comme les formulaires, les images etc..
des formulaires, des images, etc.
Les classes de base du
Hiérarchie des objets 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 Accéder aux propriétés d'un objet
 Une propriété est une donnée qui décrit un objet  Pour une page HTML, nous avons par
 Pour désigner complètement et correctement un exemple les propriétés suivantes :
objet, il faut faire précéder son nom de la suite des 
Propriétés de l'objet WINDOW
noms des objets qui le contiennent (en respectant la 
Protocole utilisé : window.location.protocol
hiérarchie des objets) 
URL : window.location.href
 cette liste doit être séparée par l'opérateur . (point) 
Message de la barre d'état : window.defaultStatus =
 Comme la couleur de fond est la propriété bgColor de
l'objet document, pour mettre le fond en bleu on 
Propriétés de l'objet DOCUMENT
écrira : 
Titre du document : document.title = Cours JavaScript
document.bgColor = 'blue' ; 
Couleur du texte : document.fgColor = #000000

Couleur du fond : document.bgColor = #f1f1f1
Objet document Objet document
 L'objet document est un élément majeur, il va vous • document.linkColor, permet de changer la couleur des
de récupérer des informations d'un formulaire, écrire liens de votre page HTML
du texte... • document.location, permet de récupérer et changer
 Propriétés : l'url de votre page HTML, ce qui revient à charger
• document.fgColor, permet de récupérer et de une autre page HTML
changer la couleur du texte de votre page HTML document.location = "URL/monDoc.HTML";
document.fgColor = "#993333"; • document.write(), permet d'écrire dans votre page
• document.bgColor, permet de récupérer et de HTML
changer la couleur de fond de votre page HTML • document.images[ ], permet de récupérer et changer
• document.lastModified, permet de savoir quand la les images de votre page HTML
page html a été modifiée (Internet explorer renvoie : • document.forms[ ], permet de récupérer et changer les
11/07/2007 19:41:00) informations de votre formulaire

Objet document: propriétés Exemples


Propriété Description  Donne la date de la dernière modification du
alinkColor Couleur lien actif document
bgColor Couleur de fond
cookie Cookie  <html>
domain Nom de domaine du serveur <head><title>Test</title></head>
fgColor Couleur premier plan <body>
lastModified Date dernière modification <script type="text/javascript">
linkColor Couleur liens document.write("dernière mise à jour: " + document.lastModified);
referrer URL appelante </script>
title Contenu <TITLE> </body>
URL URL document </html>
vlinkColor Couleur liens visités
Exemples Objet window
 Permet de récupérer le contenu de la balise <title> et l’ adresse de la
page
<head>
 est l'objet par excellence dans Javascript, car il est
<title>Test</title> parent de chaque objet qui compose la page web
</head> <body>  il contient donc :
<h1>
• l'objet document : la page en elle-même
<script type="text/javascript">
<!-- • l'objet location : le lieu de stockage de la page
document.write(document.title); • l'objet history : les pages visitées précédemment
document.write("Ce fichier: " + document.URL); • l'objet frames : les cadres (division de la fenêtre en
//-->
sousfenêtres)
</script>
</h1>
</body> </html>

Objet window : propriétés Objet window : méthodes


Propriété Description Méthode Description
alert(chaine) Affiche boite alerte
closed fenêtre fermée? back() URL précédent historique
defaultStatus message par défaut(barre état blur() Fenêtre plus courante
length nb de cadres
close() Ferme fenêtre
confirm(chaine) Affiche boîte confirmation
name nom
focus() Fenêtre courante
opener nom fenêtre ouvrante forward() URL suivant historique
parent si cadre home() URL page accueil
self/top fenêtre courante moveBy(hor,ver) Déplacement relatif
status contenu barre d'état moveTo(x,y) Déplacement absolu
open(args) Ouvre fenêtre
Objet window : méthodes La classe Window
Fen1 = open("URL","nom_fenetre", "options");
Méthode Description 
"URL" est l'adresse du document à charger dans la
print() Imprime nouvelle fenêtre
prompt(chaine,[val/defaut]) Affiche boîte entrée "nom_fenetre" est le nom de la fenêtre, à donner à

l'attribut TARGET des balises <FORM> ou <A>


resizeBy(hor,ver) Redimensionne
"options" est une liste d'éléments optionnels qui
resizeTo(Wid,Hei) Redimensionne

précisent l'aspect de la fenêtre


scrollBy(hor,ver) Défilement visualisation 
On utilise ensuite Fen1 pour faire référence à un objet ou
scrollTo(x,y) Défilement visualisation une propriété de la nouvelle fenêtre.
setInterval(expr,msec) Évalue expr après msec 
Par exemple, Fen1.document.write("...");
clearInterval(IDinterv) Supprime délais
setTimeOut(expr,msec) Évalue expr après msec
clearTimeOut(Idchrono) Efface fonction chrono

La classe Window Exemple open()


 Paramètres de la partie OPTIONS : <html>
<head>

barre d'outils : toolbar[=yes|no] | [=1|0] <title>Test</title>

url visible : location[=yes|no] | [=1|0]

répertoire ? directories[=yes|no] | [=1|0] <script type="text/javascript">

barre d'état : status[=yes|no] | [=1|0] function nouvellefenetre() {

barre de menu : menubar[=yes|no] | [=1|0]
mafenetre = window.open("window0.html",

barre de défilement : scrollbars[=yes|no] | [=1|0]

Redimensionnement : resizable[=yes|no] | [=1|0] "secondefenetre", "width=300,height=200,scrollbars"); }

visibilité permanente ? alwaysRaised[=yes|no] | [=1|0] </script> </head>

fermée avec la fen. parente : dependant[=yes|no] | [=1|0]

height= dimension en pixels <body>

width= dimension en pixels <a href="javascript:nouvellefenetre()"> nouvelle fenêtre </a>

positionnement X : screenX = nb pixels </body></html>

positionnement Y : screenY = nb pixels
Minuteries Exemple
Fermeture automatique d’ une fenêtre, après
 setInterval() : exécution de code JS à intervalles 20sec.
réguliers <html>
 clearInterval() : arrêt de la minuterie <head>
<title>Test</title>
 setTimeout() : exécution de code JS au bout d'un
<script type="text/javascript">
délai
var InfoWin = window.open("exercice1.html","secondefenetre");
 clearTimeout() : annule setTimeout InfoWin.setTimeout("top.close()",20000);
</script>
</head>
<body>
</body>
</html>

Confirm() Objet navigateur


– Cette méthode ouvre une boîte de dialogue avec 2 boutons : OK  Cette classe ne contient qu'un seul objet, appelé
et Annuler. Elle permet : navigator, qui est créé au démarrage du logiciel
• d'envoyer une information
• de recevoir un booléen  navigator.userAgent = Mozilla/4.7 [fr] (Win95; I)
 navigator.appCodeName = Mozilla
<script language="JavaScript">  navigator.appVersion = 4.7 [fr] (Win95; I)
if (confirm('Je vais dire sur quel bouton vous avez  navigator.appName = Netscape
appuyé : '))  navigator.language = fr
{alert(' Sur OK \n Continuez avec :') }
 navigator.platform = Win32
else {alert(' Sur Annuler \n Sortez avec Ok !') };
 navigator.securityPolicy = France policy
</script>
 navigator.plugins = [object PluginArray]
 navigator.mimeTypes = [object MimeTypeArray]
History et Location Objet location: propriétés, méthodes
history : liste des documents chargés dans la fenêtre (simule
Propriété Description

l'action des boutons suivant et précédent)



history.back() : document précédent href URL entière

history.forward() : le suivant protocol Protocole
history.go(n) : recharge le document situé à n étapes du
host Nom hôte + N° port

présent document
 location hostname Nom hôte

location.href : chaîne contenant l'url port Port
location.hash : partie de l'url après # (lien interne)
path Chemin du document

location.host : nom serveur et port


hash Nom ancrage


location.protocol : http, ftp, javascript, ..

location.reload() : recharge le document courant =
history.go(0)
search Info pour cgi­bin GET

location.replace(url) : remplace le document courant Méthode Description
assign(chaine) Val  location.href

Exemples exemple
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 La hiérarchie de la classe
document document
Un document HTML peut contenir diverses balises d'insertion d'images,
Les différents tableaux accessibles :

de formulaires, d'hyperliens, etc .. qui sont autant d'objet du point de


vue du navigateur
 anchors[] tableau des liens internes <A NAME= ...>
JS les classe dans des tableaux d'objets au fur et a mesure, dans
forms[] tableau des formulaires <FORM> 


l'ordre de leur apparition. Chaque objet peut posséder des propriétés et
des méthodes  elements[] tableau des composants du formulaire 
Par exemple, soit le 1er formulaire déclaré par
<INPUT ..>, <SELECT ..>, .. 

<FORM NAME="formu">

On peut le nommer aussi bien par document.formu que par
 images[] tableau des images <IMG SRC=...>
document.forms[0]  links[] tableau des liens hypertextes <A HREF= ...>
images[2] est la 3ème image insérée, avec une balise
... 


<IMG SRC="....gif">

Objet formulaire Propriétés


 Avec l'objet forms, qui se trouve sous l'objet  Action : Définit l'URL où le formulaire sera envoyé
document dans la hiérarchie JavaScript, vous avez  Elements : Tableau représentant les éléments du formulaire
accès aux formulaires définis dans un fichier HTML  Length : Nombre d'éléments à l'intérieur du formulaire
 Method : Définit le type d'envoi du formulaire (get ou post)
 On peut acceder à un formulaire par son nom, ou
 Name : Définit le nom du formulaire
par son idex dans le tableau forms[] de l’ objet
document. Pour les pages en cadres :
Exemples  Target : Définit la page (fenêtre ou frame) de réponse
Parent : Indique une fenêtre d'un cadre (frame)
• document.nom-form.propriété

• document.forms[0].méthode
Exemple : action Exemples
<html> Appel à une fonction de lecture en cliquant un bouton du formulaire
<head><title>Test</title> <html>
<script type="text/javascript"> <head> <title>Programme 2</title></head>
function confirmation() { <script language="JavaScript">
window.confirm("Ce formulaire est envoyé à" + function lireAnnee() {
document.formulaire_test.action); } annee=prompt('En quelle année sommes-nous ? ', 2000);
</script></head> alert('Vous avez répondu : ' + annee) }
<body> </script>
<form name="formulaire_test" action="mailto:toimeme@cheztoi.com" <body>
onSubmit="confirmation()">
<form>
<input type="text" size="40" name="saisie">
<input type="button" value="En quelle annee ? " onClick="lireAnnee()">
<input type="submit" value="Envoyer">
</form>
</form>
</body></html>
</body></html>

Elements de formulaire Elements du formulaire


– Propriétés : – Méthodes :

• checked (coché) • blur() (quitter l'élément)


• defaultChecked (coché par défaut) • click() (cliquer sur l'élément)
• defaultValue (valeur entrée par défaut) • focus() (positionner sur l'élément)
• form (nom du formulaire) • handleEvent() (traiter l'événement)
• name (nom de l'élément) • select() (sélectionner du texte)
• type (type de l'élément)
• value (valeur/contenu de l'élément)
Exemple Exemple (suite)
 Il s’ agit d’ accéder à la case à cocher pour modifier contenu de <head>
la zone du texte en inscrivant : case cochée ou case non <script language="Javascript">
cochée
function ModifChamp() {
 La modification se fera par la fonction ModifChamp();
if (document.forms["form1"].checkbox.checked) {
document.forms["form1"].test.value='Bouton coché' }
<form name="form1">
else {
<input type="checkbox" name="checkbox" 
onClick="ModifChamp();"> <br> document.forms["form1"].test.value='bouton non coché' } }
<input type='TEXT' name=‘ test' value='Essai du javascript' </script>
size='24'> </head>
</form>

Exemple Exemple : boutons radio


Lire un nombre et écrire son double <HTML>
<html> <HEAD>
<head><title>Programme 3</title></head>
<SCRIPT language="javascript">
<body>
function choixprop(form3) {
<form name="lire">
if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " + 
Entrez un nombre :
form3.choix[0].value) };
<input type="text" name="nbre" size="3">
if (form3.choix[1].checked) { alert("Vous avez choisi la proposition " + 
<input type="button" name="double" value="go"
form3.choix[1].value) };
onClick="JavaScript:document.lire.aff.value=2*Number(document.lire.nbre.valu
e);"> if (form3.choix[2].checked) { alert("Vous avez choisi la proposition " + 
voici son double : <input type="text" name="aff " size="8"> form3.choix[2].value) }; }
</form> </SCRIPT>
</body></html> </HEAD>
Les boutons radio Exemple : Radio
<BODY> Écrire un formulaire qui permet de réaliser un choix et de l’ afficher :
Entrez votre choix : <html>
<FORM NAME="form3"> <head>
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR> <script language="JavaScript">
<INPUT TYPE="radio" NAME="choix" VALUE="2" CHECKED >Choix 
var vote='';
numéro 2<BR>
function enregistrer(x){vote=x}
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?"  function depouiller()
onClick="choixprop(form3)"> {document.election.resultat.value=vote}
</FORM> </script>
</BODY> </head>
</HTML> 

Exemple (suite) Exemple


<body>
<form name="election"> Contrôle des informations : à l’ enregistrement du formulaire de
Vous êtes pour l'informatique ? saisie on redemande l’ entrée d’ une information si elle est vide
<input type="radio" name="vote" onClick="enregistrer('oui')">oui
<body>
<input type="radio" name="vote" onClick="enregistrer('non')">non
<form name="fiche">
<input type="radio" name="vote" onClick="enregistrer('abstention')">
abstention Nom : <input type="text" name="nom" value="" size="24">
<input type="button" name="reponse" value="Résultat" Prénom : <input type="text" name="prenom" value="" size="24">
Age : <input type="text" name="age" value="" size="24">
onClick="depouiller()">
<input type="button" value="Enregister"  onClick="verifier()">
<input type="text" name="resultat" value="">
<input type="reset" value="Annuler">
</form>
</form>
</body>
</body>
Exemple (suite) Exemple : select
<head><title> Si... Alors... Sinon... </title></head> Choisir parmi une liste et afficher le choix
<script language="JavaScript">
function verifier() <body>
{ if (document.fiche.nom.value=="") <form name="musique">
{ alert('Saisissez le nom ! ');} <select name="choix"
else { if (document.fiche.prenom.value=="") onChange="Preferer(document.musique.choix.selectedIndex)">
{ alert('Saisissez le prénom ! '); } <option value = "classique">classique </option>
else { if (document.fiche.age.value=="") <option value = "jazz">jazz </option>
{ alert('Saisissez l\'âge ! '); };}; <option value = "rock">rock </option>
}} <option value = "pop ">pop </option>
</script> </select>
</head> </form>

Exemple (suite) Exemple


<html> Rédirection sur des pages différentes suite à la réponse au
<head> formulaire
<title> choix </title> <html>
<script language="JavaScript"> <head>
function Preferer(x){ <script language="JavaScript">
switch(x) { function Envoyer(x)
case 1 : alert('Votre choix : '+'classique');break; { switch(x) {
case 2 : alert('Votre choix : '+'jazz'); break; case 1 : document.location.href='page1.htm';break;
case 3 : alert('Votre choix : '+'rock'); break; case 2 : document.location.href='page2.htm';break;
case 4 : alert('Votre choix : '+'pop'); break; }; }; case 3 : document.location.href='page3.htm';break;
</script> case 4 : document.location.href='page4.htm';break; };
</head> </script>
</head>
Exemple (suite)
<body>
<form name="lecteur">
<select name="choix"
onChange="Envoyer(document.lecteur.choix.selectedIndex)">
<option>page1</option> Les classes predéfinies de
<option>page2</option>
<option>page3</option>
Javascript
<option>page4</option>
</select>
</form>
</body></html>

Classe Date Date: méthodes (1)


Méthode Description
getDate() Valeur jour du mois; 1 31
getDay() Jour de la semaine; 0  6 (0=Dimanche)
getHours() Heures; 0  23
getMinutes() Minutes; 0  59
var aujourdhui= new Date();
var maDate = new Date ("November 24, 1981"); getSeconds() Secondes; 0  59
var jour = maDate.getDate () // jour vaut 24. getMonth() Mois; 0  11 (0=janvier)
document.write("Nous étions le ", jour, "/", getTime() Nb de secondes depuis le 1er Janvier 1970
maDate.getMonth()+1, "/", maDate.getYear()+1900 ,<br>);
getYear() Nb années depuis 1900
document.write("Nous sommes le ", aujourdhui.getDate(), "/",
aujourdhui.getMonth()+1, "/", aujourdhui.getYear()+1900 ); getFullyear() Année
Date: méthodes (2) Exemple Date + Switch
<script type="text/javascript">
//on affiche une phrase différente selon le jour de la semaine
Méthode Description
//on a Dimanche=0, Lundi=1, Mardi=2, etc.
setDate(arg) Jour du mois=arg var d=new Date(); // création de l’ objet date
theDay=d.getDay(); // on récupère le jour de la semaine
setHours(arg) Heures=arg
setMinutes(arg) Minutes=arg switch (theDay) {
case 5: document.write(" Enfin vendredi");
setSeconds(arg) Secondes=arg break;
case 6: document.write("Super Samedi");
setMonth(arg) Mois=arg
break;
setTime(arg) Nb de secondes depuis le 1er Janvier 1970=arg case 0: document.write("Dimanche répos");
break;
setYear(arg) Année=arg default: document.write(« Vivement le weekend!");
 Date sous forme de chaine }
toLocalString()
</script>

Exemple Date + conditionnelle


Classe Math
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' );
}
}
}
Math: propriétés Math: méthodes
Méthode Description

Propriété Description abs(n) Valeur absolue

E Constante e ceil(n) Entier immédiatement supérieur


exp(x) E puissance x
LN2 Log naturel de 2 floor(n) Entier immédiatement inférieur
LN10 Log naturel de 10 log(x) Log de x
LOG Log de e à la base 2 max(n1,n2) Maximum des 2 valeurs
LOG10E Log de e à la base 10 min(n1,n2) Minimum des 2 valeurs

PI Constante pi pow(n1,n2) n1 à la puissance n2


random() Nb aléatoire entre 0 et 1
SQRT_2 Racine carrée de 1/2 round(n) Entier le plus proche
SQRT2 Racine carrée de 2 sqrt(n) Racine carrée

Classe Math
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é.
 Math
var chaine="azerty";
 Conversion chaine <--> nombre (entier ou flottant)

Fonctions parseInt(), parseFloat() et eval()    var entier=parseInt(chaine);

isNaN(arg) détermine s'il s'agit d'un nombre    var reel=parseFloat(chaine);
   var rate=isNaN(entier);
 A l'issue de ce script, entier contient 3 et reel contient 3.14
var chaine="3.14";
 Exemple d'utilisation pour controler la saisie d'un entier :
      <SCRIPT LANGUAGE="JavaScript">
var entier=parseInt(chaine);
      function testnum(chnum) {
var reel=parseFloat(chaine);          num=parseInt(chnum);
         if ( isNaN(num) )
             alert(chnum+ 'n\'est pas pas un entier !');
        }
      </SCRIPT>
Exemple Math STRING: Méthodes
<script language="JavaScript">
temp=new Array(30);
function relever() { Méthode Description
for (i=1;i<=30;i++) // i commence à 1 charAt(ind) Caractère à l'ind donné
{ temp[i-1]=17+Math.floor(5*Math.random());
}; // i-1=0, donne le premier indice
concat(ch) Concaténation avec ch
}; indexOf(ch,ind) Indice ch à partir de ind
function moyenner() { lastIndexOf(ch,ind) Id en arrière
som=0;
for (i=1;i<=30;i++) { split(sépar) Tableau de chaines
som+=temp[i-1]; }; substr(dep[,lg]) Lg cars depuis dep
return Math.round(10*som/30)/10; substring(ind1,ind2) Sous­chaine 
};
toLowerCase() Conversion en minuscules
</script>
toUpperCase() Conversion en majuscules

Classe String
Classe String  Concaténation de chaînes.
var chaine1="Vive le "; var chaine2="JavaScript";
var chaine=chaine1+chaine2;

split(séparateur) : sépare une chaîne en sous chaînes suivant  var chaine="azerty";
un caractère délimiteur
chaine.length retourne le nombre de caractères, ici 6 caractères.

Exemple  Evaluation d'une expression.
var ch='/usr/local/temp'; var x=10;
var tab=ch.split('/') ; eval(x+20); eval ("2+2");
document.write(''le premier élément '' + tab[0]);
 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 Traitements des images en JS
 Rappels HTML
 Elle fait partie des classes d'objets prédéfinies du langage (à
partir de la version 1.2). Contrairement à l'usage de la balise
 la balise <IMG NAME= .. SRC="URL" WIDTH=..
IMG, on peut précharger l'image et la stocker en cache HEIGHT=.. ALIGN= ..>
(mémoire+disque) dans un objet de type Image, avant de
l'afficher.
 URL est l'adresse internet (en général relative) du
 Contructeur Image() : fichier image à charger (.gif ou .jpg)
 Il s'agit d'une fonction spéciale sans paramètre qui sert à créer  l'alignement de l'image par rapport au texte voisin est
un objet
réglé par l'attribut align
 var monImage = new Image()
 une image peut servir d'ancre pour un hyperlien
 Propriétés :  le navigateur classe les images insérées dans le
 Elles correspondent aux attributs de la balise <IMG> document dans un tableau images[]
 name, src, lowsrc, height, width, border, hspace, vspace ..

La classe Images exemple


 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 Gérer les cookies en JS
Pourquoi les cookies ?
On peut diviser la fenetre en plusieurs cadres


 On peut définir les cookies comme la "mémoire du WEB"
indépendantes (balise HTML <frameset..>)  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)
 En Javascript, on peut faire interagir ces  Le mécanisme de pose de "cookies" a été imaginé pour permettre au
cadres, c’ est à dire échanger des moins à un serveur de retrouver certains résultats de sa consultation
précédente du client
informations dans un cadre à l’ autre.  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"
 Exemple au tableau  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 Gérer les cookies en JS


 Enregistrement d'un cookie :  Suppression d'un cookie :
 Durant la session Web, chaque cookie est conservé en  La méthode la plus simple consiste à le réenregistrer
mémoire, il y a écriture sur le disque à la fermeture du
navigateur. L'écriture s'effectue sur instruction du serveur en lui attribuant une date d'expiration dépassée
utilisant la directive HTTP suivante (incluse dans l'en-tête)  Exemple :

nom=valeur; [expires =date; path= chemin-client; domain= nom- 
<SCRIPT LANGUAGE="JavaScript">
domaine; secure]

Seul le 1er champ, le nom identifiant le cookie et sa valeur (chaîne de

// la date est dépassée !
caractères stockée) sont obligatoires 
var date = new Date(1999,0,1);

date : la date d'expiration, au delà de laquelle le cookie sera supprimé 
function EffacerCookie() {
du fichier

chemin : nom du répertoire serveur

//nom est le nom du cookie

nom-domaine : nom du domaine Internet dans lequel le cookie peut 
document.cookie = "CompterPassageCoursCookie=" +
être traité, les autres serveurs devant l'ignorer ";expires=" + date.toGMTString();
secure : le cookie ne peut être consulté qu'au cours d'un échange
}


sécurisé (type https)

</SCRIPT>
Exemple Cookie
 On va créer un cookie qui sauvegarde le nom d'un visiteur de Fonction pour la création du cookie.
notre site web.
 A la première visite, on demande à l'internaute de nous fournir function setCookie(c_name,value,expiredays)
son nom. {
 Par la suite, le même visiteur recevra un message de bienvenue. 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.


 Fonction qui vérifie l'existence du cookie
function getCookie(c_name){
if (document.cookie.length>0) function checkCookie()
{ c_start=document.cookie.indexOf(c_name + "="); {
if (c_start!=-1) username=getCookie('username');
{ c_start=c_start + c_name.length+1; if (username!=null && username!="")
c_end=document.cookie.indexOf(";",c_start); { alert('Welcome again '+username+'!'); }
if (c_end==-1) c_end=document.cookie.length; else
return unescape(document.cookie.substring(c_start,c_end)); {username=prompt('Please enter your name:',"");
} if (username!=null && username!="")
} {setCookie('username',username,365);}
return ""; }
} }
Exemple complet
<html>
<head>
<script type="text/javascript">
function getCookie(c_name){ ...}
function setCookie(c_name,value,expiredays){ ...}
function checkCookie(){...}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>