Javascript
Javascript
Javascript
JavaScript
Cours d'initiation
I- Introduction
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é.
<HTML>
<HEAD>
<TITLE>Script 1</TITLE>
<SCRIPT language="Javascript">
…..
madani@ucd.ac.ma 1
Programmation Web (JavaScript – cours d'initiation)
</SCRIPT>
</HEAD>
<BODY>
….
<BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Script 2</TITLE>
<SCRIPT language="Javascript">
…..
</SCRIPT>
</HEAD>
<BODY >….
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE>Script 3</TITLE>
</HEAD>
<BODY>
Il est <SCRIPT language="Javascript">
…..
</SCRIPT>
…
<BODY>
</HTML>
madani@ucd.ac.ma 2
Programmation Web (JavaScript – cours d'initiation)
<HTML>
<HEAD>
<TITLE>Bonjour sans paramètres</TITLE>
<SCRIPT language="Javascript">
function bonjour()
{
alert ("Bonjour Tout le monde !");
}
</SCRIPT>
</HEAD>
<BODY >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 permet d'invoquer la
fonction "bonjour" au chargement de la page en utilisant
l'événement "onload".
<HTML>
<HEAD>
<TITLE>Bonjour avec paramètres</TITLE>
<SCRIPT language="Javascript">
function bonjour(sortie)
{
alert (sortie);
}
</SCRIPT>
</HEAD>
<BODY tout le monde !')">
Voici le contenu de la page
</BODY>
</HTML>
madani@ucd.ac.ma 3
Programmation Web (JavaScript – cours d'initiation)
Remarque
Il faut remarquer que lorsqu'une fonction possède des arguments
chaînes de caractères, ils doivent êtres mis entre quotes.
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);
}
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
a- Affectation
madani@ucd.ac.ma 4
Programmation Web (JavaScript – cours d'initiation)
Variable = expression;
b- Entrée / Sortie
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
If (condition)
{
…
…
}
else
{
…
…
}
switch (variable)
{
case valeur1:
….
break;
Case valeur2:
…
break;
.
.
.
default:
…
madani@ucd.ac.ma 5
Programmation Web (JavaScript – cours d'initiation)
d- Boucles
while (condition)
{
…
…
}
do{
…
…
}
while (condition);
e- Opérateurs
f- Variable
VII- Evénements
madani@ucd.ac.ma 6
Programmation Web (JavaScript – cours d'initiation)
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é
Remarques
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
madani@ucd.ac.ma 7
Programmation Web (JavaScript – cours d'initiation)
Exemple
1- Objet Window
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.
madani@ucd.ac.ma 8
Programmation Web (JavaScript – cours d'initiation)
2- Objet Document
madani@ucd.ac.ma 9
Programmation Web (JavaScript – cours d'initiation)
I3=document.images[2]
I3=document.images["toto"]
Exemple
……
<a href="#"
> ><img src="greenball.gif" name="I3">
</a>
….
Exemple
madani@ucd.ac.ma 10
Programmation Web (JavaScript – cours d'initiation)
<HTML>
<HEAD>
<TITLE>Objet document</TITLE>
<SCRIPT language="Javascript">
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 > voici le corps de la page
</BODY>
</HTML>
3- Objet Form
<form name="f1">
choisir un système d'exploitation :
<select name="liste" ><option value="1">Windows</option>
<option value="2">Linux</option>
<option value="3">OSF</option>
</select>
</form>
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
Programmation Web (JavaScript – cours d'initiation)
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" ></form>
function afficher()
{
var nb=document.f1.age.length;
for(i=0;i<nb;i++)
{
alert(document.f1.age[i].value);
}
}
4- Objet String
madani@ucd.ac.ma 12
Programmation Web (JavaScript – cours d'initiation)
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
Méthode Description
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
Programmation Web (JavaScript – cours d'initiation)
Méthode Description
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
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
Programmation Web (JavaScript – cours d'initiation)
Introduction à Javascript
Atelier n°1
A essayer
Question 1/
<html>
<head>
<title>script 1</script>
</head>
<body>
Bonjour tout le monde <br>
<script language="Javascript">
alert("un premier script en Javascript");
</script>
A très bientôt
</body>
</html>
Question 2/
Question 3/
<html>
<head>
madani@ucd.ac.ma 15
Programmation Web (JavaScript – cours d'initiation)
<title>script3</title>
<script language="Javascript">
function message()
{
alert("un troisième script");
}
</script>
</head>
<body>
Voilà le corps de la page.<br>
A+
</body>
</html>
Question 4/
Question 5/
madani@ucd.ac.ma 16
Programmation Web (JavaScript – cours d'initiation)
Introduction à Javascript
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
Programmation Web (JavaScript – cours d'initiation)
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
Programmation Web (JavaScript – cours d'initiation)
Introduction à Javascript
Atelier n°3
Exercice 1
Exercice 2
madani@ucd.ac.ma 19
Programmation Web (JavaScript – cours d'initiation)
Introduction à Javascript
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
Programmation Web (JavaScript – cours d'initiation)
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
Programmation Web (JavaScript – cours d'initiation)
Introduction à Javascript
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
Programmation Web (JavaScript – cours d'initiation)
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
Programmation Web (JavaScript – cours d'initiation)
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