Javascript
Thierry Lecroq (Univ. Rouen) Javascript 1 / 36
Plan
1 Généralités sur Javascript
2 Les bases
3 Les objets prédéfinis
4 Les évènements
Thierry Lecroq (Univ. Rouen) Javascript 2 / 36
Intérêt
Exemple
<html>
<head>
<title>Page s t a t i q u e < / t i t l e >
</head>
<body>
<div>
Nous sommes l e 2/10/2008
</div>
</body>
</html>
Thierry Lecroq (Univ. Rouen) Javascript 3 / 36
Intérêt
Exemple
<html>
<head>
<title>P age dynamique</title>
</head>
<body>
< s c r i p t type = " t e x t / j a v a s cr i p t" >
//<![CDATA[
date = new D a t e () ;
[Link]("Nous sommes l e " , d a t e ) ;
//]]>
< / s cr ipt>
</body>
</html>
Thierry Lecroq (Univ. Rouen) Javascript 4 / 36
interne
< s c r i p t type = " t e x t / j a v a s cr i p t" >
code j a v a s c r i p t
< / s cr ipt >
externe
< s c r i p t type = " t e x t / j a v a S c r i p t " s r c = " u r l / s c r i p t . j s " >
< / s cr ipt >
L a b a l i se < s c r ipt> peut être s'insérer autant de fois que
nécessaire dans les sections HEAD ou BODY
Thierry Lecroq (Univ. Rouen) Javascript 5 / 36
Javascript n’est pas Java
Java a été développé par Sun
JavaScript a été développé par Netscape en 1995 sous le nom de
LiveScript
Microsoft développe le langage Script en 1995
⇒ norme des langages de script par l’ECMA (European Computer
Manufactures Association)
basé sur les objets pas de classe
Java est compilé (applets), Javascript est interprêté (scripts)
ne peut pas lire/écrire dans les fichiers
ne peut pas exécuter d’autres programmes
Thierry Lecroq (Univ. Rouen) Javascript 6 / 36
Plan
1 Généralités sur Javascript
2 Les bases
3 Les objets prédéfinis
4 Les évènements
Thierry Lecroq (Univ. Rouen) Javascript 7 / 36
4 types de base
entier : 127 (base 10), 0755 (base 8), 0xFA15 (base 16)
flottant : 0.123, -0.4e5, .67E-89
booléen : true, f a l s e
chaˆıne de caractères : "chaine" ou ’ c h a i n e ’
Thierry Lecroq (Univ. Rouen) Javascript 8 / 36
Variables
var x; // simple déclaration/
var pi = 3.14; /* déclaration et affectation
d'une valeur */
var prenom = 'toto';
Thierry Lecroq (Univ. Rouen) Javascript 9 / 36
Opérateurs
• affectation
+=, -=, *=, /=, %=, &=, |=, <<=, >>=
• comparaison
==, !=, <, <=, >, >=
• logique
&&, ||, !
• bit
&, |, ^ (XOR), <<, >>, >>>
Thierry Lecroq (Univ. Rouen) Javascript 10 / 36
Expressions
arithmétique
(3+4) * (5 6 .7 / 89)
chaˆıne de caractères
"L ’ ´eto ile" + " " + " f i l a n t e "
logique
temp == 37
h2o = (temp<100) ? "eau" : "vapeur";
h2o = (temp>0) ? ((temp<100) ? "eau" : "vapeur") : "glace"
Thierry Lecroq (Univ. Rouen) Javascript 11 / 36
Structures de contrôle
if (une condition ici) {
// des instructions ici
} else {
// des instructions ici
}
while (une condition ici) {
// des instructions ici
}
for ( initialisation ; condition pour continuer ; progression) {
# des instructions ici
}
Thierry Lecroq (Univ. Rouen) Javascript 12 / 36
Fonctions
Définition
function nomfonction(param1, . . . , paramN) {
/ / code J a v a Scr ip t
return expression ;
}
Appel
nomVariable = nomfonction(exp1, . . . , expN);
Thierry Lecroq (Univ. Rouen) Javascript 13 / 36
INSTRUCTION DE SORTIE
v ar preno m = 'To to';
do [Link] ("salut ");
do [Link] (prenom);
Thierry Lecroq (Univ. Rouen) Javascript 14 / 36
LIRE / ECRIRE
pr ompt()
Ouv re une bo îte de dialo gue av ec une zo ne saisie et 2 bo utons
OK et Annuler, reto urne l’info rmation lue
var reponseUtilisateur = prompt("Message à afficher", "Valeur par défaut");
<html>
<head>
<title>Utilisation de prompt()</title>
</head>
<body>
<script type = "text/javascript">
var nom = prompt("Quel est votre nom ?", "Votre nom ici");
</script>
</body>
</html>
Thierry Lecroq (Univ. Rouen) Javascript 15 / 36
Exercice 1
Écrivez un script qui affiche le message "Hello World !" sur une page
html.
Exercice 2
Objectif : Créer une page HTML qui utilise JavaScript pour afficher une
salutation différente en fonction de l'heure actuelle.
1. Utilisez la fonction Date() de JavaScript pour obtenir l'heure actuelle.
2. Écrivez une fonction qui détermine si c'est le matin, l'après-midi ou le
soir en fonction de l'heure.
3. Affichez une salutation appropriée comme "Bonjour", "Bon après-
midi", ou "Bonsoir" en fonction du moment de la journée.
// Obtenir l'heure actuelle
var dateActuelle = new Date();
var heure = [Link]();
Plan
1 Généralités sur Javascript
2 Les bases
3 Les objets prédéfinis
4 Les évènements
Thierry Lecroq (Univ. Rouen) Javascript 17 / 36
L’objet document
Propriété
title
Methóde
write
Thierry Lecroq (Univ. Rouen) Javascript 18 / 36
L’objet Date
var maDate = new Date()
getYear() : 2 chiffres
g e t F u l l Y e a r ( ) : 4 chiffres
getMonth() : 0 – 11
getDate() : 1 – 31
getDay() : 0 – 6 (dimanche – samedi)
getHours() : 0 – 23
getMinutes : 0 – 59
getSeconds() : 0 – 59
Thierry Lecroq (Univ. Rouen) Javascript 19 / 36
L’objet Math
Méthodes :
atan(), acos(), asin(),tan(), cos(), s i n ( ) ,
a b s ( ) , e x p ( ) , l o g ( ) , max(), m i n ( ) , pow(),
ro und(), s q r t ( ) , f l o o r ( ) , random()
Thierry Lecroq (Univ. Rouen) Javascript 20 / 36
Les tableaux
var T = new Array()
Thierry Lecroq (Univ. Rouen) Javascript 21 / 36
Les tableaux
var j o u r s = new A r r a y ( ) ;
var j o u r s = new A r r a y ( " L und i", "Mardi", "Mercredi, " J e u d i " ,
"Vendredi", "Samedi", "Dimanche");
jours[0]
j o u r s.l ength
Thierry Lecroq (Univ. Rouen) Javascript 22 / 36
Formulaire : HTML
<!DOCTYPE html>
<html>
<head>
<title>Formulaire de Contact</title>
</head>
<body>
<!-- Formulaire HTML -->
<form>
<!-- Champ pour le nom -->
<label for="nom">Nom:</label>
<input type="text" id="nom" name="nom"><br><br>
<!-- Champ pour l'email -->
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<!-- Bouton pour soumettre le formulaire -->
<button onclick="envoyer()">Envoyer</button>
</form>
<!-- Lien vers le script JavaScript -->
<script src="[Link]"></script>
</body>
</html>
Thierry Lecroq (Univ. Rouen) Javascript 23 / 36
Formulaire : Javascript
// Ajout d'un gestionnaire d'événement pour l'envoi du formulaire
function envoyer() {
// Récupère les valeurs des champs du formulaire
var nom = [Link]("nom").value;
var email = [Link]("email").value;
// Affichage des valeurs dans la console (pourrait être remplacé par
une logique de validation ou d'envoi)
[Link]("Nom:", nom, "Email:", email);
};
Thierry Lecroq (Univ. Rouen) Javascript 24 / 36
Plan
1 Généralités sur Javascript
2 Les bases
3 Les objets prédéfinis
4 Les évènements
Thierry Lecroq (Univ. Rouen) Javascript 25 / 36
Les évènements
Exemple
<a href="" o nclick="alert(’Bonjour’)">Cliquez</a>
Thierry Lecroq (Univ. Rouen) Javascript 26 / 36
Les évènements
o n c l i c k : un clic du bouton gauche de la souris sur une cible
onMouseOver : passage du pointeur de la souris sur une cible
onblur : une perte de focus d’une cible
onfocus : une activation d’une cible
onselect : une selection d’une cible
onchange : une modification du contenue d’une cible
onsubmit : une soumission d’un formulaire
onload : un chargement d’une page
onunload : la fermeture d’une fenetre ou le chargement d’une page
autre que la courante
Thierry Lecroq (Univ. Rouen) Javascript 27 / 36
Exercice 3 : Calculatrice
Objectif : Créer une page HTML qui demande à l'utilisateur de saisir deux
nombres, puis utilise une fonction JavaScript pour calculer la somme, la
différence, le produit et le quotient des deux nombres et affiche les
résultats.
Instructions :
1. Ouvrez votre éditeur de texte et créez un nouveau fichier HTML.
2. Créez le squelette de base d'une page HTML.
3. Ajoutez deux champs de saisie pour les nombres.
4. Ajoutez un bouton pour exécuter les calculs.
5. Écrivez une fonction JavaScript qui lit les valeurs des champs de saisie,
effectue les calculs et affiche les résultats.
Utilisez [Link]() pour l'instruction de sortie des résultats, et
[Link]().value pour récupérer les valeurs saisies par
l'utilisateur
