Javascript

Programmation Web (JavaScript – cours d'initiation)
JavaScript
Cours d'initiation
I- Introduction
Javascript est un langage de script orienté objet utilisé pour le

développement des applications Internet. Ce langage a été développé par
la société Netscape Corporation en 1996.
Les programmes (scripts) écrits en Javascript s'intègrent dans le code
HTML d’une page web (HTML). L’intérêt de Javascript est de rendre des
pages web dynamiques : contrôler la saisie des données dans les
formulaires, afficher des menus spéciaux, animer des bandeaux
publicitaires, …
Remarque
Javascript n’a rien en commun avec Java. En effet, Javascript est un
langage interprété par le navigateur du client, alors que Java est un
langage compilé.
II- Logiciels nécessaires
Pour pouvoir programmer en Javascript, vous n’avez besoin que d’un

éditeur de texte simple (Bloc note de Windows, par exemple) et d’un
navigateur (Internet Explorer, Netscape Navigateur, …)
III- Javascript est utilisé côté client
La charge d’exécution du code Javascript est prise en compte par le client

(navigateur du client). Le serveur envoie le code HTML et c'est Javascript
du client qui l'interprète dès qu’il est chargé.
IV- Insertion d’un script Javascript dans une page HTML
Il faut d’abord préciser que Javascript est un langage de script. Le code

n’est pas donc compilé, mais immédiatement placé dans le fichier HTML
en tant que texte ASCII. Pour cette intégration, il existe trois possibilités
différentes :
Insertion dans l’entête
La meilleure solution d’insertion consiste à intégrer le texte source dans

l’entête du fichier HTML. Il est possible d’y écrire le code qui sera utilisé
plus tard par le biais de l’une des deux autres possibilités d’insertion.
<HTML>
<HEAD>
<TITLE>Script 1</TITLE>
<SCRIPT language="Javascript">
…..
madani@ucd.ac.ma 1
</SCRIPT>
</HEAD>
<BODY>
….
<BODY>
</HTML>
La balise <SCRIPT language="Javascript"> introduit le script, la balise

</SCRIPT> le termine.
Exécution via certaines actions
La deuxième possibilité consiste à exécuter certaines commandes

Javascript par le biais de certaines actions du surfeur. De telles actions
peuvent être le chargement ou l'abandon de la page, le passage de la
souris sur une image, … Dans l'exemple suivant, la fonction "bonjour()" est
exécutée lors du chargement de la page.
<HTML>
<HEAD>
…..
</SCRIPT>
</HEAD>
<BODY onload="bonjour()">
….
</BODY>
</HTML>
Insertion dans le corps de la page HTML
La dernière possibilité permet d'intégrer le code source dans le corps de la

page. L'exemple suivant illustre un exemple d'une telle insertion :
<HTML>
<HEAD>
</HEAD>
<BODY>
Il est <SCRIPT language="Javascript">
…..
</SCRIPT>
…
<BODY>
</HTML>
V- Première programmation en Javascript
madani@ucd.ac.ma 2
Ces deux exemples peuvent vous paraître pour l'instant abstraits :
Fonction sans paramètres
Soit le code suivant :
<HTML>
<HEAD>
<TITLE>Bonjour sans paramètres</TITLE>
function bonjour()
{
alert ("Bonjour Tout le monde !");
}
</SCRIPT>
</HEAD>
<BODY onload="bonjour()">
Voici le contenu de la page
</BODY>
</HTML>
Commentaires :
La ligne function bonjour() : définie la fonction. On doit fournir ici
le mot clé 'function' suivi du nom de la fonction.
Le corps de la fonction est délimité par le '{' et '}'.
La balise <BODY onload="bonjour()"> permet d'invoquer la
fonction "bonjour" au chargement de la page en utilisant
l'événement "onload".
Fonction avec paramètres
Reprenons l'exemple précédent en modifiant légèrement la fonction

"bonjour" :
<HTML>
<HEAD>
<TITLE>Bonjour avec paramètres</TITLE>
function bonjour(sortie)
{
alert (sortie);
}
</SCRIPT>
</HEAD>
<BODY onload="bonjour('Bonjour tout le monde !')">
Voici le contenu de la page
</BODY>
</HTML>
madani@ucd.ac.ma 3
Remarque
Il faut remarquer que lorsqu'une fonction possède des arguments
chaînes de caractères, ils doivent êtres mis entre quotes.
VI- Eléments du langage
1- Fonctions
Une fonction est un module permettant d'exécuter une tâche donnée. Elle
peut accepter des arguments, comme elle peut retourner un résultat.
Exemples
a- function bonjour()
{
window.alert("Bonjour");
}
b- function somme(a,b)
{
var s;
s=a+b;
return (s);
}
L'appel d'une fonction :
Dans le cas de a- : bonjour()

Dans le cas de b- : r=somme(x, y)
Voilà quelques exemples de fonctions préexistantes en Javascript
Fonction Description
parseInt() Convertie une chaîne en un entier
parseFloat() Convertie une chaîne en un réel
isNaN Teste si une valeur est non numérique
eval() Evalue une expression
isFinite() Teste si une valeur est finie
2- Instructions
Javascript peut être utilisé comme un langage classique dans lequel on

peut trouver des instructions d'entrée / sortie, des tests (simples ou
multiples), des boucles, …
a- Affectation
L'affectation consiste à affecter la valeur d'une expression à une variable.

La syntaxe est la suivante :
madani@ucd.ac.ma 4
Variable = expression;
L'expression peut être une constante, une variable ou une combinaison.
b- Entrée / Sortie
Elles peuvent être faites en utilisant les deux fonctions "alert()" et

"prompt()".
X = prompt("message"[,"valeur par défaut"]);

window.alert(données)
Exemple
<script language="Javascript">
nom=prompt("Entrez votre nom SVP","");
alert("Bonjour " + nom);
</script>
Remarque
Le '+' joue le rôle de la concaténation dans cet exemple.
c- Les tests
Il existe deux types de testes, simple et multiple :
If (condition)
{
…
…
}
else
{
…
…
}
switch (variable)
{
case valeur1:
….
break;
Case valeur2:
…
break;
.
.
.
default:
…
madani@ucd.ac.ma 5
d- Boucles
For (i=1; i<=10; i++)

{
…
…
}
while (condition)
{
…
…
}
do{
…
…
}
while (condition);
e- Opérateurs
Les opérateurs permettent de réaliser des opérations : +, -, *, /, %, <, <=,

>, >=, =, = =, !=, &&, ||, ++, --, ….
f- Variable
Une variable est un emplacement mémoire (dans la RAM de la machine)

réservé pour stocker une valeur (nombre, texte, …). Il existe deux types
de variables :
Variables locales : déclarées à l'intérieur d'une fonction et ne peuvent être

utilisées qu'a l'intérieur de celle-ci.
Variables globales : déclarées avant toutes les fonctions et peuvent être

utilisées par toutes les fonctions de la page Web.
La déclaration suit la syntaxe suivante :
Var variable [= valeur initiale];
VII- Evénements
Un événement est une action (stimuli) externe qui provoque le

changement d'état d'un objet. C'est la notion d'événements gérée par
Javascript qui rend les pages HTML animées et attractives. En effet, selon
les actions des internautes, des actions seront déclenchées et la page va
madani@ucd.ac.ma 6
s'animer d'une manière ou d'un autre. Le tableau ci-dessous montre les

principaux événements pris en compte par Javascript.
Evénement Description
Onclick() Se produit quand on clique sur un élément (bouton, lien, …)
Onload() Chargement de la page par le navigateur
Onunload() Se produit quand on quitte une page
Onmouseover() Se produit quand on survole un élément avec le pointeur de la
souris
Onmouseout() Se produit quand le pointeur de la souris quitte un élément
Onfocus() Se produit quand un élément reçoit le focus (contrôle, curseur)
Onblur() Se produit quand un élément perd le focus
Onchange() Se produit quand le contenu d'une zone de texte ou d'une liste est
changé
Onsubmit() Se produit quand on clique sur le bouton 'Submit'
Onreset() Se produit quand on clique sur le bouton 'Reset'
Onabort() Se produit quand le chargement d'une est arrêté
Se produit lorsqu’on sélectionne un texte (ou une partie d’un texte)

Onselect() dans un champ de type "text" ou "textarea"
Remarques
• Chaque événement ne peut être associé à n'importe quel objet. Le

tableau ci suivant indique quels événements concernent quelles
balises:
Balise Evénement
<a> : lien hypertexte Onclick,onmouseover,onmouseout
<area> Onmouseover,onmouseout
<body> Onload, onunload
<form> Onreset,onsubmit
<img> Onabort,onload,onerror
<input type="button, checkbox,radio"> Onclick
<input type="text,textarea"> Onblur,onchange,onfocus,onselect
<input type="select"> onblur,onchange,onfocus
<input type="button"> Onclick
<input type="reset"> onreset
<input type="submit"> Onsubmit
• La balise <input type="password"> (utilisé pour la saisie des données

confidentielles) ne génère aucun événement. Cette décision a été prise
par précaution pour ne pas récupérer des mots de passe.
VIII- Les objets
Javascript traite les éléments qui s'affichent dans le navigateur comme

des objets classés selon une certaine hiérarchie. Chaque objet est
caractérisé par un ensemble de propriétés et un ensemble de méthodes
(appelées aussi variables et fonctions dans le vocabulaire de Javascript).
Javascript divise la page du navigateur en objets. Afin d'accéder à

n'importe lequel d'entre eux et de pouvoir le manipuler par l'intermédiaire
madani@ucd.ac.ma 7
de ses propriétés et méthodes, on commence généralement par l'objet le

plus grand (celui contenant tous les autres) puis on descend dans la
hiérarchie jusqu'à ce qu'on atteint l'objet voulu. L'objet le plus grand en
Javascript est "window" (fenêtre), dans cette fenêtre s'affiche une page,
c'est l'objet "document". Cette page peut contenir plusieurs objets
comme les formulaires ("form"), les images ("images"), …(voir hiérarchie
des objets en annexe)
Exemple
Si un champ texte d'un formulaire est nommé 'Z1' alors :

"window.document.forms[0].Z1" désigne le champ texte Z1 du
formulaire courant.
"window.document.forms[0].Z1.value" désigne la propriété value
(valeur, contenu) de la zone de texte Z1 du formulaire courant.
Javascript dispose de plusieurs objets
1- Objet Window
Permet de gérer et de manipuler des fenêtres. Cet objet fournit plusieurs

méthodes et propriétés, parmi lesquelles :
Exemples de quelques méthodes :
x=window.open("contenu","titre","options") : Cette méthode permet

d'ouvrir une fenêtre popup.
où :
contenu : Indique la page qui sera affichée dans la fenêtre pop-up.
titre : le texte qui va apparaître dans la barre de titre de la fenêtre pop-up.
Les options:
Option Description
height(en pixel) : Définit la hauteur de la fenêtre popup
width (en pixel) : Définit la largeur de la fenêtre popup
left (en pixel) : Définit la position gauche de la fenêtre popup
top (en pixel) : Définit la position haut de la fenêtre popup
scrollbar (yes|no) : Affiche ou non les scrollbars (ascenseurs)
status (yes|no) : Affiche ou non la barre d'état
toolbars (yes|no) : Affiche ou non la barre d'outils
resizable (yes|no) : Définit si la fenêtre popup est redimensionnable ou non
directories (yes|no) : Affiche ou non les boutons de navigation
location (yes|no) : Affiche ou non la barre d'adresse
menubar (yes|no) : Affiche ou non la barre de menus
Remarques :
• Les options doivent être saisies les unes après les autres, séparées
par des virgules, sans espaces.
• L'ensemble des options doit être encadré par des guillemets.
• window.close() : (méthode) ferme une fenêtre popup.
madani@ucd.ac.ma 8
• window.alert('message") : (méthode) affiche une boite de message

avec un seul bouton 'OK'
• x=window.confirm("message") : (méthode) affiche une boîte avec deux

boutons 'OK' et 'Cancel'. Le choix de 'OK' retourne la valeur 'True' et
'Cancel' retourne la valeur 'False'
• String s=prompt("message" [,"valeur initiale"]) : cette méthode permet

à l'utilisateur de saisir une valeur et de cliquer sur 'OK'.
• id=setTimeout("fonction()",ms) et clearTimeout(id) : deux méthodes de

minuteries.
• focus() et blur() : pour activer ou désactiver une fenêtre
• moveBy(dx, dy) : déplace la fenêtre par translation
• moveTo(x, y) : déplace le coin gauche, haut de la fenêtre au point (x, y)
• resizeBy(dx, dy) : ajuste les dimensions par translation
• resizeTo(x, y) : ajuste les dimensions jusqu'au point (x, y)
Exemples de quelques propriétés
• window.status : propriété indiquant la barre d'état de la fenêtre

• window.closed : booléen qui indique si la fenêtre a été fermée
• window.history : liste des documents chargés sur la fenêtre (simule les
actions des boutons suivant et précédent). Cette propriété possède à
son tour les méthodes suivantes :
o window.history.back() : document précédent
o window.history.forward() : document suivant
o window.history.go(n) : le document situé à n étapes du présent
document (n est de signe quelconque)
• window.location : cette propriété dispose à son tour de :
o window.location.href : chaîne contenant l'URL
o window.location.hash : partie de l'URL après le # (lien interne)
o window.location.host : nom du serveur et du port
o window.location.protocol : http, ftp, javascript, …
o window.location.reload() : recharge le document
courant(=window.history.go(0))
o window.location.replace(URL) : remplace la page courante par l'URL
indiquée
2- Objet Document
madani@ucd.ac.ma 9
Cet objet est le plus utilisé en Javascript. Il permet de faire référence au

contenu de la page. Parmi les propriétés de cet objet :
Propriété Description
bgColor La couleur du fond
fgColor La couleur du texte
lastModified Une chaîne donnant la date de dernière modification
images Un tableau d'objets image
forms Un tableau d'objets form
links Un tableau d'objets link
Pour accéder à un élément d'un tableau (images, forms, links, …), on

utilise l'indice (les indices commencent à partir de 0). Par exemple,
I3=document.images[2]
On peut aussi utiliser le nom au lieu de l'indice, par exemple :
I3=document.images["toto"]
Exemple
……
<a href="#"
onmouseover="document.images[0].src="redball.gif"
onmouseout="document.images[0].src="greenball.gif">
<img src="greenball.gif" name="I3">
</a>
….
Trois autres propriétés de l'objet document, de type texte, peuvent

uniquement être lues par Javascript et ne peuvent pas être modifiées.
Elles représentent l'adresse URL à partir de laquelle le fichier actuel à été
appelé (document.referrer), l'adresse du fichier lui-même
(document.location) et le titre du document actuel (document.title).
Exemple
madani@ucd.ac.ma 10
<HTML>
<HEAD>
<TITLE>Objet document</TITLE>
function message(){
var mess="Vous venez de "
mess=mess+document.referrer
mess=mess+" et vous vous trouvez sur "
mess=mess+ document.location
mess=mess+". Le titre de cette page est "+document.title
alert(mess);
}
</SCRIPT>
</HEAD>
<BODY onload ="message()">
voici le corps de la page
</BODY>
</HTML>
3- Objet Form
L'objet form (formulaire) peut contenir plusieurs objets de types différents,

comme les champs de saisie (zone de texte), des boutons, des listes, ou
autres. Parmi ses objets :
L'objet select : permet de donner une liste de choix à l'utilisateur. par

exemple :
<form name="f1">
choisir un système d'exploitation :
<select name="liste" onchange="choix()">
<option value="1">Windows</option>
<option value="2">Linux</option>
<option value="3">OSF</option>
</select>
</form>
et la fonction appelée est :
function choix(){
var i=document.forms[0].liste.selectedIndex;
var s=document.forms[0].liste.options[i].value;
alert("Vous avez choisi "+s);
}
où
madani@ucd.ac.ma 11
document.forms[0]  formulaire courant

document.forms[0].liste.selectedIndex  indice de l'élément sélectionné
de la liste
document.forms[0].liste.options[i].value  l'élélement d'indice i de la liste
L'objet radio : les boutons radio permettent un choix unique dans un

ensemble de choix (parfois on parle de choix mutuel ou exclusif)
Exemple
<form name="f1">
<input type="radio" name="age" value="15-">Vous avez moins de 15
ans<br>
<input type="radio" name="age" value="16-30">Vous avez entre 16 et
30 ans<br>
<input type="radio" name="age" value="31-45">Vous avez entre 31 et
45 ans<br>
<input type="radio" name="age" value="45+">Vous avez plus que 45
ans<br>
<input type="Button" value="Afficher choix" onclick="afficher()">
</form>
la fonction appelée est :
function afficher()
{
var nb=document.f1.age.length;
for(i=0;i<nb;i++)
{
alert(document.f1.age[i].value);
}
}
4- Objet String
Cet objet permet la manipulation des chaînes de caractères (textes). Il

fournit plusieurs méthodes, parmi lesquelles :
madani@ucd.ac.ma 12
Méthode Description
chartAt(chaine,position) ou retourne le caractère situé à la position donnée.
chaine.charAt(position
)
chaine.indexOf(sous_chaine) retourne l'indice d'une sous chaîne dans une chaîne de
caractères
chaine.lastIndexOf(sous_chain retourne la dernière position d'une sous chaîne dans une
e) chaîne de caractères
chaine.substring(pos1,pos2) permet d'extraire la sous-chaîne se trouvant entre pos1 et
pos2-1.
chaine.toLowerCase() convertie une chaîne en minuscule
chaine.toUpperCase() convertie un chaîne en majuscule.
chaine.big()
chaine.bold() Met en gras une chaîne de caractères
chaine.fontcolor(couleur) Change la couleur d'une chaîne de caractères
chaine.fontsize(size) Change la taille d'une chaîne de caractères
chaine.italics() Met en italique une chaîne de caractères
chaine.strike() Barre une chaîne de caractères
chaine.sub() Met en indice une chaîne de caractères
chaine.sup() Met en exposant une chaîne de caractères
Remarque :
L'objet String dispose d'une seule propriété "length". Sa syntaxe est
: chaine.length. Cette propriété retourne la longueur d'une chaîne de
caractères donnée.
5- Objet Math
Les méthodes de cet objet permettent de travailler avec Javascript comme

Excel (faire les différents types de calculs). Parmi ces méthodes, on
trouve:
X=Math.abs(y) Valeur absolue de y
X=Math.ceil(y) L'entier supérieur ou égal à y
X=Math.floor(y) L'entier inférieur ou égal à y
X=Math.round(y) Arrondit y à l'entier le plus proche
X=Math.max(y,z) Le maximum de y et z
X=Math.min(y,z) Le minimum de y et z
X=Math.pow(y,z) Retourne y à la puissance z (yz)
X=Math.random() génère un nombre aléatoire entre 0 et 1. Pour avoir un
nombre aléatoire entre a et b  Math.random*(b-a)
+a
X=Math.sqrt(y) Retourne la racine carrée de y
X=Math.sin(y) Retourne le sinus de y
X=Math.cos(y) Retourne le cosinus de y
X=Math.asin(y) Retourne l'arc sinus de y
X=Math.acos(y) Retourne l'arc cosinus de y
X=Math.tan(y) Retourne la tangente de y
X=Math.atan(y) Retourne l'arc tangente de
X=Math.exp(y) Retourne l'exponentielle de y
X=Math.log(y) Retourne le logarithme de y
X=Math.PI (Propriété) retourne la valeur de PI
6- Objet Date
madani@ucd.ac.ma 13
Cet objet permet de sélectionner la date, l'heure, le mois, l'année, … . En

faite tout ce qui est en relation avec le temps. La création d'une variable
"Date" se fait de la manière suivante :
Var d=new Date();
La variable "d" contiendra la date et l'heure système sous la forme de :
Fri Dec 1709:23:30 1998
d.getDate() Retourne le jour (1..31)
d.getDay() Le jour de la semaine (0:Dimanche .. 6:Samedi)
d.getMonth() Le mois entre 0:Janvier et 11:Décembre
d.getYear() L'année
d.toGMTString() La date transformée en chaîne
d.getHours() L'heure entre 0 et 23
d.getMinutes() Les minutes entre 0 et 59
d.getSeconds() Les secondes entre 0 et 59
d.GetFullYear() L'année en quatre chiffres
7- Screen / Navigator
Les objets Screen et Navigator permettent de nous renseigner sur la

résolution de l'écran, le type du navigateur ou encore le nombre maximum
de couleurs :
Propriété Description
screen.height Hauteur (600, 768,…)
screen.width Largeur (800, 1024,…)
screen.colorDepth Profondeur en couleur (8, 16, 32 bits)
navigator.platform Système d'exploitation (win 32, mac)
navigator.appName Nom du navigateur (MSIE ou NetScape)
navigator.userAgent Désignation précise du navigateur (Mozilla compatible,
WindowsNT,…)
navigator.appVersion Retourne des informations sur la version du navigateur
navigator.language Langage (fr, ang, …)
madani@ucd.ac.ma 14
Introduction à Javascript
Atelier n°1
A essayer
Question 1/
<html>
<head>
<title>script 1</script>
</head>
<body>
Bonjour tout le monde <br>
alert("un premier script en Javascript");
</script>
A très bientôt
</body>
</html>
Question 2/
Dans la page précédente, remplacer la méthode de alert() par :

document.write("un deuxième script");
document.write("<hr color=green width=50% height=2 align=center>");
document.write("<b>c'est OK?</b>");
Question 3/
<html>
<head>
madani@ucd.ac.ma 15
<title>script3</title>
function message()
{
alert("un troisième script");
}
</script>
</head>
<body>
Voilà le corps de la page.<br>
A+
</body>
</html>
Question 4/
Remplacer, dans la page précédente, la balise <body> par <body

onload="message()">
Question 5/
Remplacer, dans la page précédente, la balise <body> par <body

onunload="message()">
madani@ucd.ac.ma 16
Atelier n°2
Exercice 1
Utiliser la méthode "prompt()" pour demander un nombre, ensuite afficher
(méthode alert()) l'un des deux messages :
o 10 est un nombre
o A10 n'est pas un nombre
Exercice 2
Réalisez une page HTML contenant deux boutons de commande "Ouvrir"
et "Fermer" permettant d'ouvrir et de fermer respectivement une fenêtre
popup vide.
Exercice 3
Refaire l'exercice précédent pour afficher dans une fenêtre popup une
page HTML de votre choix.
Exercice 4
Le but de cet exercice est d'écrire dans une nouvelle fenêtre vide après sa
création. Pour cela, créer une page HTML contenant un contrôle
<textarea>…</textarea> et un bouton de commande. Le choix de ce
dernier permettra d'écrire le contenu du textarea dans une nouvelle
fenêtre popup vide.
Exercice 5
L'idée est de réaliser un script permettant de charger un document HTML
dans une fenêtre popup vide déjà créée. Pour cela, réaliser une page
HTML contenant un bouton de commande permettant de :
o Ouvrir une fenêtre popup vide
o Charger un document (page HTML de votre choix) dans la fenêtre
popup précédemment ouverte.
madani@ucd.ac.ma 17
Exercice 6
Réaliser la page suivante :
Les deux premiers boutons permettent d'afficher dans des fenêtres popup
les sites www.yahoo.fr et www.nomade.fr. Quant au troisième bouton, il
sera utilisé pour fermer les fenêtres popup, si elles ne le sont pas.
Exercice 7
Utilisez les méthodes de minuterie pour afficher un message qui clignote
dans la barre d'état de la fenêtre (window). Distinguez les deux cas de
figure :
o Le message est fixé
o Le message est saisi dans une zone de texte
Exercice 8
Dans la barre d'état d'une fenêtre popup, afficher périodiquement les
nombres pairs 0, 2, 4, …
madani@ucd.ac.ma 18
Atelier n°3
Exercice 1
- Créer un dossier portant votre nom de famille

- Créer trois pages HTML "page1.htm", "page2.htm" et "page3.htm"
- "page1.htm" contient deux liens : un vers "page2.htm" et l'autre vers
"page3.htm"
- Dans "page2.htm" ecrire un script Javascript qui affiche dans une boîte
de message (alert()) le message suivant au chargement de la page :
Vous venez de (adresse de page1.htm), votre adresse actuelle est

(adresse de page2.htm). Le titre de votre page est (titre de page2.htm)
- Dans "page3.htm", écrire un script similaire qui affiche le message

précédent, mais cette fois-ci dans la barre d'état de la fenêtre et non
dans une boîte de message (window.status).
Exercice 2
- Créer un autre dossier

- Créer deux pages HTML : "accueil.htm" et "pub.htm"
- Lors du chargement de la page "accueil.htm", afficher une fenêtre
popup contenant la page "pub.htm"
- A la ferméture de "accueil.htm", la fenêtre "pub.htm" doit elle aussi
être fermée.
madani@ucd.ac.ma 19
Atelier n°4
Exercice 1
Ecrire un script qui permet de créer une page ayant la forme :
Voici quelques caractéristiques de votre page :
Caractéristiques Valeur
Titre Script3
Adresse C:\\file\…\ex1.htm
Date de dernière modification Le 12/03/05
Exercice 2
Réaliser un script qui permet de valider l'adresse email d'un utilisateur
Validation de l'email
Nom
Email
Distinguer deux cas :
 Lors de la validation avec le bouton "OK"
 Lorsqu'on s'apprête à quitter la zone de texte "Email"
Exercice 3
Ecrire un script qui permet de saisir deux nombres dans deux zones de
texte, et de faire leur somme, différence, multiplication et division en
cliquant sur les boutons correspondants.
Exercice 4
Réaliser une calculatrice similaire à cette de windows (celle qu'on a
réaliser en VB)
Exercice 5
Réaliser un script permettant d'écrire un message donné à la manière
d'une machine à écrire. Distinguer deux cas :
 Affichage dans une zone de texte
 Affichage dans la barre d'état
madani@ucd.ac.ma 20
Exercice 6
Faire clignoter un texte dans :
 une zone de texte
 la barre d'état
Exercice 7
Faire défiler un texte dans une zone de texte (dans la barre d'état de la
fenêtre). On distinguera deux cas :
 Défilement de gauche à droite
 Défilement de droite à gauche
madani@ucd.ac.ma 21
Atelier n°5
Exercice 1
Ecrire un script qui permet de changer une image après avoir été survolée
par le pointeur de la souris.
Exercice 2
Refaire l'exercice précédent de telle sorte à avoir un changement
d'images de manière périodiques.
Exercice 3
Réaliser dans une page HTML un script ayant pour but d'afficher la date et
l'heure système dans la barre d'état et dans une zone de texte.
Exercice 4
Afficher, à l'aide d'un script javascript, le temps passé par un utilisateur
dans une page HTML. Le temps sera affiché dans la barre d'état et dans
une zone de texte, sous forme de :
1h : 20min : 15sec
Exercice 5
L'idée est de réaliser un petit jeu éducatif permettant de générer deux
nombres aléatoires (nombre 1 et nombre 2). L'utilisateur doit trouver leur
somme avant que la machine affiche à son tour le résultat. L'interface
aura la forme suivante :
Jeu éducatif
Nombre 1 Nouveau
Nombre 2
Proposition Résultat
Résultat
Appréciation
madani@ucd.ac.ma 22
Exercice 6
Utiliser la méthode "open" de l'objet "window" pour afficher des
descriptions de chacun des sujets ci-dessous dans des fenêtres popup.
Projets de Fin d'Etudes (PFE)
1- Générateur de CV
2- Gestion d'une bibliothèque municipale
3- Gestion scolaire
Exercice 7
Refaire l'exercice précédent de telle sorte que les fenêtres seront ouvertes
après la survol des liens avec le pointeur de la souris
Exercice 8
Le but est de réaliser un site (ensemble de pages web) dans lequel la page
d'accueil aura la forme ci-dessus. Le choix d'une option de la liste entraîne
l'affichage de la page correspondante (soient les adresses successives :
http://www.google.fr, http://www.yahoo.fr, http://www.caramail.com, http://www.menara.ma,
http://www.2m.tv)
Exercice9
Sur votre site web créer une page que vous nommez "galerie.htm" sur
laquelle vous placez différentes images (miniaturisées). Vous écrivez
ensuite un script qui, lorsque vous cliquez sur une des images, fasse
apparaître l'image originale dans une nouvelle fenêtre comportant un
bouton de fermeture.
Indications
- Créer une page pour chaque image. Cette page doit contenir un
bouton de fermeture.
madani@ucd.ac.ma 23
- Utiliser la méthode "self.close()" pour fermer la fenêtre en cours.
Exercice 10
Refaire l'exercice précédent, mais cette fois ci, la fermeture sera
automatique après x secondes.
Avec ce script, sans intervention de l'utilisateur, la nouvelle fenêtre se
ferme de façon automatique après 4 secondes. En cliquant sur le
bouton, l'utilisateur interrompt prématurément le compteur et ferme la
fenêtre. Avec ce système, on est certain que la nouvelle fenêtre sera
fermée.
madani@ucd.ac.ma 24

Javascript

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Javascript

Încărcat de

Drepturi de autor:

Formate disponibile

Programmation Web (JavaScript – cours d'initiation)

Javascript est un langage de script orienté objet utilisé pour le

II- Logiciels nécessaires

Pour pouvoir programmer en Javascript, vous n’avez besoin que d’un

III- Javascript est utilisé côté client

La charge d’exécution du code Javascript est prise en compte par le client

IV- Insertion d’un script Javascript dans une page HTML

Il faut d’abord préciser que Javascript est un langage de script. Le code

Insertion dans l’entête

La meilleure solution d’insertion consiste à intégrer le texte source dans

La balise <SCRIPT language="Javascript"> introduit le script, la balise

Exécution via certaines actions

La deuxième possibilité consiste à exécuter certaines commandes

Insertion dans le corps de la page HTML

La dernière possibilité permet d'intégrer le code source dans le corps de la

V- Première programmation en Javascript

Ces deux exemples peuvent vous paraître pour l'instant abstraits :

Fonction sans paramètres

Soit le code suivant :

Fonction avec paramètres

Reprenons l'exemple précédent en modifiant légèrement la fonction

VI- Eléments du langage

L'appel d'une fonction :

Dans le cas de a- : bonjour()

Voilà quelques exemples de fonctions préexistantes en Javascript

Javascript peut être utilisé comme un langage classique dans lequel on

L'affectation consiste à affecter la valeur d'une expression à une variable.

L'expression peut être une constante, une variable ou une combinaison.

Elles peuvent être faites en utilisant les deux fonctions "alert()" et

X = prompt("message"[,"valeur par défaut"]);

Il existe deux types de testes, simple et multiple :

For (i=1; i<=10; i++)

Les opérateurs permettent de réaliser des opérations : +, -, *, /, %, <, <=,

Une variable est un emplacement mémoire (dans la RAM de la machine)

Variables locales : déclarées à l'intérieur d'une fonction et ne peuvent être

Variables globales : déclarées avant toutes les fonctions et peuvent être

La déclaration suit la syntaxe suivante :

Var variable [= valeur initiale];

Un événement est une action (stimuli) externe qui provoque le

s'animer d'une manière ou d'un autre. Le tableau ci-dessous montre les

Se produit lorsqu’on sélectionne un texte (ou une partie d’un texte)

• Chaque événement ne peut être associé à n'importe quel objet. Le

• La balise <input type="password"> (utilisé pour la saisie des données

VIII- Les objets

Javascript traite les éléments qui s'affichent dans le navigateur comme

Javascript divise la page du navigateur en objets. Afin d'accéder à

de ses propriétés et méthodes, on commence généralement par l'objet le

Si un champ texte d'un formulaire est nommé 'Z1' alors :

Javascript dispose de plusieurs objets

Permet de gérer et de manipuler des fenêtres. Cet objet fournit plusieurs

Exemples de quelques méthodes :

x=window.open("contenu","titre","options") : Cette méthode permet

• window.close() : (méthode) ferme une fenêtre popup.

• window.alert('message") : (méthode) affiche une boite de message

• x=window.confirm("message") : (méthode) affiche une boîte avec deux

• String s=prompt("message" [,"valeur initiale"]) : cette méthode permet

• id=setTimeout("fonction()",ms) et clearTimeout(id) : deux méthodes de

• focus() et blur() : pour activer ou désactiver une fenêtre

• moveBy(dx, dy) : déplace la fenêtre par translation

• moveTo(x, y) : déplace le coin gauche, haut de la fenêtre au point (x, y)

• resizeBy(dx, dy) : ajuste les dimensions par translation

• resizeTo(x, y) : ajuste les dimensions jusqu'au point (x, y)

Exemples de quelques propriétés

• window.status : propriété indiquant la barre d'état de la fenêtre