JavaScript-1

Techniques à Objets et Internet
Le Web et sa programmation
Jean-François Perrot
Université Pierre et Marie Curie (Paris 6)
Cours n° 3 : Introduction à Javascript -1
• Que recouvre la notion de script ?
• Javascript : programmation séquentielle
Jean-François Perrot
JavaScript 1
1
Sommaire
Scripts en général : 3 - 7
Javascript et HTML : 8 - 13
Javascript : Syntaxe : 14 - 16
alert, confirm & prompt : 18 - 24
document.write : 25 - 32
Jean-François Perrot
JavaScript 1
2
1
Vous avez dit script ?
• Le mot anglais script désigne (dans l'acception qui nous
intéresse) le texte d'un film ou d'une pièce de théâtre. Un script
est donc un texte destiné à être joué - comme un programme...
• En informatique, on entend généralement par script un "petit
programme", et par suite on trouve couramment la définition :
un langage de scripts est un langage de programmation allégé.
(en V.O. : a scripting language is a lightweight programming
language).
• Mais en fait cette idée recouvre plusieurs situations assez
différentes
– en informatique "lourde"
– en informatique "légère" pour l'écriture de pages Web.
Jean-François Perrot
JavaScript 1
3
scripts pour informaticiens
Le terme script apparaît dans au moins deux contextes très
différents :
• en intelligence artificielle, dans une perspective proche de son
sens ordinaire (films, théâtre), il désigne le comportement d'un
acteur vu comme un tout (et non pas comme une collection de
méthodes)
• en génie logiciel, un script est un (petit) programme chargé de
coordonner l'exécution de plusieurs autres (gros) programmes,
supposés écrits dans des langages "sérieux" :
par exemple des programmes de calcul scientifique écrits en C
ou en Fortran seront pilotés par un script écrit en langage de
commande (shell sous Unix) ou en Perl ou en TCL, etc.
Jean-François Perrot
JavaScript 1
4
2
scripts sur le Web
clients & serveurs
• Rappel : dans le fonctionnement d'une page Web, un client (le
navigateur Web) va chercher chez un serveur (sur le réseau, à
l'adresse donnée par l'URL) un programme (le texte html de la
page concernée) qu'il exécute ensuite "en local".
• Au cours de cette exécution, d'autres requêtes peuvent être
adressées au même serveur, ou à d'autres.
• Si on fait abstraction des problèmes de transmission, une
session avec un navigateur Web peut donc être vue comme
une alternance de calculs locaux (chez le client) et de calculs
distants (chez le ou les serveurs).
• Cette distinction induit deux types de scripts...
Jean-François Perrot
JavaScript 1
5
scripts sur le Web : chez le client
• La notation html est censée coder la mise en forme d'un texte
(illustré), dont l'interprétation par le navigateur donne une image
fixe.
• On souhaite introduire dans ce cadre fixe un peu d'animation, au
moyen d'un petit programme qui sera interprété par le navigateur
(vu comme un acteur récitant son rôle) : un script !
• Reste à convenir d'une norme réglementant l'extension nécessaire
à la notation html. La chose ne peut pas être simple : il s'agit de
définir un langage...
– Netscape, Sun et autres promeuvent Javascript (dont le nom
est trompeur : ce n'est pas un Java simplifié !)
– Microsoft accepte Javascript mais développe en concurrence
VBscript, dérivé de Visual Basic.
• Le présent cours est consacré à Javascript .
Jean-François Perrot
JavaScript 1
6
3
scripts sur le Web : chez le serveur
• Lorsqu'une requête est adressée à un serveur Web, sa tâche
principale est de répondre à cette requête en envoyant une page
html supposée déjà écrite.
En supplément, le serveur peut exécuter un petit programme
pour mettre au point le texte html qu'il va envoyer : un script !
• Les scripts exécutés par le serveur pour répondre à des requêtes
de clients sont appelés scripts CGI (de Common Gateway
Interface). Ils n'ont rien de commun avec les scripts exécutés par
le navigateur-client.
L'utilisation principale des scripts CGI est la réponse aux
formulaires html (typiquement, des accès à des bases de
données).
• C'est aussi un des domaines d'application de Javascript.
On reparlera de CGI quand il sera question des formulaires en
Javascript.
Jean-François Perrot
JavaScript 1
7
La balise html <script...>
• Un script apparaît dans le code html d'une page encadré par
<script ...> .... </script>
• La balise a deux attributs courants :
– type (obligatoire),
• valeur "text/javascript" ou "text/vbscript"
• "vbscript" n'est interprété que par MS Explorer
– src (optionnel)
• valeur une chaîne donnant le chemin d'accès à un fichier contenant
le code du script, portant l'extension ".js"
• Exemple :
<script type="text/javascript" src="tab.js" />
• Situation la plus fréquente
<script type="text/javascript">
...code Javascript...
</script>
Jean-François Perrot
JavaScript 1
8
4
Variation des normes
strict vs transitional
• Autrefois, au lieu de type="text/javascript"
on écrivait language="Javascript".
Cette formulation est aujourd'hui deprecated
(et interdite en XHTML-strict).
• La norme XHTML-stricte prévoit qu'on doit écrire :
<script type="text/javascript">
<![CDATA[ ...code Javascript...]]>
</script>
Mais cette forme reste obscure pour les navigateurs actuels.
• Nous écrirons donc ,
<script type="text/javascript">
...code Javascript...
</script>
et nous invoquerons la norme XHTML-transitional !
Jean-François Perrot
JavaScript 1
9
Emplacement dans la page
et exécution du script
• Le script est un texte parenthésé qui doit respecter le
parenthésage des balises html.
• Il peut se situer soit dans l'en-tête (<head> ...</head>)
soit dans le corps (<body> ...</body>) de la page, soit
dans les deux (script composé de plusieurs morceaux bien
parenthésés).
• Les éléments situés dans l'en-tête se comportent comme
des déclarations, ils ne s'exécutent pas directement (voir
plus loin).
• Les éléments situés dans le corps s'exécutent au fur et à
mesure du chargement de la page.
Jean-François Perrot
JavaScript 1
10
5
<html>
<head>
<title>Essai de write</title>
<script type="text/javascript">
var truc = "Hello World !";
</script>
</head>
Premier exemple
Write0.html
<body>
<p>Debut</p>
<p>
<script type="text/javascript">
document.write("<p>"+truc+"</p>");
document.write("<h3>"+truc+"</h3>");
document.write("<h2>"+truc+"</h2>");
document.write("<h1>"+truc+"</h1>");
</script>
</p>
<p>Fin</p>
</body>
</html>
Jean-François Perrot
JavaScript 1
11
Remarques
• Comme on voit, la concaténation des chaînes de caractères
s'écrit "+", comme en Java.
• Les balises html qui apparaissent dans les chaînes passées
en argument à l'instruction document.write sont
dûment interprétées par le navigateur.
• Attention ! Dans l'exemple précédent, ne pas interpréter
l'instruction document.write "une chaîne"
– comme 'le document écrit "une chaîne"'
– mais comme 'on écrit "une chaîne" dans le document en
cours d'ouverture'
• Notamment, on ne pourra plus rien écrire lorsque
l'ouverture sera terminée et que le document sera fermé !
Jean-François Perrot
JavaScript 1
12
6
Réflexes en Javascript
• Les événements associés à différentes plages d'une page
Web déclenchent des réflexes dont le code s'écrit en
Javascript (cf. 2è cours JavaScript).
• Le "pseudo-protocole" javascript: permet de loger
une séquence de code Javascript partout où on peut placer
une URL - p.ex. dans un lien hypertexte
Exemple :
Alerte2
<a href="javascript: alert('Il ne se passera rien !');">
Cliquer ici
</a>
Noter l'emploi différencié de deux guillemets de chaînes (simples et doubles)
Jean-François Perrot
JavaScript 1
13
Syntaxe de Javascript
• Essentiellement comme en C (et en Java) :
– affectation par "=" ;
– comparateur d'égalité "==" / d'inégalité "!=" ;
– instructions élémentaires terminées par le point-virgule ";" (optionnel
si on écrit une instruction par ligne) ;
– structures de contrôle parenthésées par des accolades "{" et "}".
– Attention ! Majuscules/minuscules sont significatives, au
contraire de html !!!
• Différence majeure : les variables
– les variables sont déclarées par le mot-clé var ;
– toute déclaration est réputée globale !
• même celles qui sont faites dans une en-tête de boucle, à la Java...
– les variables ne sont pas typées.
• Autre différence : les tableaux
– tab = new Array(7); crée un tableau à 8 éléments
tab[0], tab[1], ... tab[7]
Jean-François Perrot
JavaScript 1
14
7
Chaînes de caractères en Javascript
• Les chaînes de caractères sont les données les plus souvent
manipulées dans une page Web.
• D'usage fréquent : Les constantes de chaînes peuvent être
encadrées soit de guillemets simples, soit de guillemets
doubles (mais pas les deux à la fois) :
– "une 'vraie' chaine" / 'une "vraie" chaine'
• La concaténation des chaînes est notée "+" (comme en Java).
– du coup l'opérateur "+" a un comportement non-standard...
• Les nombres sont automatiquement convertis en chaînes.
• Les chaînes sont converties en nombres par les fonctions
standard parseInt et parseFloat.
• Les caractères spéciaux "\n", "\t", "\b" sont acceptés.
Jean-François Perrot
JavaScript 1
15
Nombres, chaînes, conversions
• Les nombres sont uniformément représentés en format flottant sur
32 bits (le type double de C et autres langages)
– pas de distinction entre entiers et "réels" (contrairement à C et
à Java) : 5/2 -> 2.5
• Les règles de conversion conduisent à des situations imprévues :
– le "contexte" est fixé par la fonction ou par l'opérateur
• document.write(--> chaîne)
• x - y --> nombres
"0xF" - "10" -> 5
– mais "+" est ambigu...
• priorité aux chaînes : 1 + "2" -> "12"
• mais dans l'ordre d'évaluation de gauche à droite !
– 1 + 2 + "3" -> "33", (1+2) + "3" -> "33"
– mais 1 +(2 +"3") -> "123"...
Jean-François Perrot
JavaScript 1
16
8
L'instruction alert
(1)
Alerte1.html
• Elle prend en argument
une chaîne de caractères
(sans saut de ligne) et
affiche une fenêtre de
dialogue sur l'écran.
<script type="text/javascript">
alert("Il ne se passera rien !");
</script>
• Le calcul est suspendu
jusqu'à ce que
l'utilisateur clique sur le
bouton "OK".
Jean-François Perrot
<html>
<head>
<title>Essai d'alerte
</title>
</head>
<body>
<p>Debut</p>
<p>
</p>
<p>Fin</p>
</body>
</html>
JavaScript 1
17
L'instruction alert (2)
Jean-François Perrot
JavaScript 1
18
9
L'instruction confirm
(1)
Confirm1.html
• Elle prend en argument
une chaîne de caractères,
affiche une fenêtre de
dialogue sur l'écran, et
renvoie une valeur vrai
ou faux.
• Le calcul est suspendu
jusqu'à ce que l'utilisateur
clique sur le bouton "OK"
[valeur vrai] ou sur le
bouton "cancel" (alias
"Annuler") [valeur faux].
Jean-François Perrot
<html>
<head>
<title>Essai de confirm
</title>
</head>
<body>
<p>Debut</p>
<p>
<script type="text/javascript">
if ( confirm ("D'accord ?") ) {
alert ("OK !");
} else {
alert ("KO !");
}
</script>
</p>
<p>Fin</p>
</body>
</html>
JavaScript 1
19
L'instruction confirm (2)
Jean-François Perrot
JavaScript 1
20
10
L'instruction
confirm
(3)
Jean-François Perrot
JavaScript 1
L'instruction prompt
(1)
Prompt1.html
• Elle prend en argument deux
chaînes de caractères, affiche
une fenêtre de dialogue sur
l'écran, et renvoie une valeur
chaîne.
• Le calcul est suspendu jusqu'à
ce que l'utilisateur clique sur
le bouton "OK" [valeur
affichée] ou sur le bouton
"cancel" (alias "Annuler")
[valeur "vide" null, pas la
chaîne vide ""].
Jean-François Perrot
21
<html>
<head>
<title>Essai de prompt
</title>
</head>
<body>
<p>Debut</p>
<p>
<script type="text/javascript">
var chaineLue = prompt("Quelle
est votre couleur préférée ?",
"bleu");
if ( chaineLue == "rouge" ) {
alert ("OK !");
} else {
alert ("KO !");
}
</script>
</p>
<p>Fin</p>
</body>
JavaScript
1
</html>
22
11
L'instruction
prompt
(2)
Jean-François Perrot
JavaScript 1
23
JavaScript 1
24
L'instruction
prompt
(3)
Jean-François Perrot
12
L'instruction document.write (1)
• Elle prend en argument une chaîne de caractères
(sans saut de ligne) et l'affiche dans la page.
• Attention !
la chaîne
affichée est
considérée
comme du
html, elle est
interprétée
comme telle
en fonction du
contexte de la
page au
moment de
l'affichage.
Jean-François Perrot
Write1.html
<html>
<head>
<title>Essai de write</title>
</head>
<body>
<p>Debut</p>
<p>
<b>
<script type="text/javascript">
var chaineLue = prompt("Quelle est votre couleur préférée ?",
"bleu");
document.write("La couleur que j'ai lue est le: </b> <p>");
document.write("<h1>"+ chaineLue);
</script>
</h1> </p>
</p>
<p>Fin</p>
</body>
</html>
JavaScript 1
25
L'instruction document.write (2)
Jean-François Perrot
JavaScript 1
26
13
L'instruction document.write (3)
Conséquences de
l'interprétation html :
– les blancs
supplémentaires
et les sauts de ligne
sont sans effet ;
– l'instruction
document.writeln
est (la plupart du temps)
équivalente à write.
Jean-François Perrot
<html>
<head>
<title>Essai de write</title>
</head>
<body>
<p>Debut</p>
<p>
<b>
<script type="text/javascript">
var chaineLue = prompt("Quelle est votre_
couleur préférée ?", "bleu");
document.writeln("La couleur
que \n");
document.write(" j'ai lue \n est le:");
document.write(" </b> <p>");
document.write("<h1>"+ chaineLue);
</script>
</h1> </p>
</p>
<p>Fin</p>
</body>
</html>
JavaScript 1
27
Deuxième exemple :
montrer les photos de la promo.
l'en-tête de la page
<html>
<head>
<title>Photo1</title>
<script type="text/javascript">
var chemin = "../PhotJPG/"; // globale
// Le tableau des noms
lesGens = new Array(12);
lesGens[0] = "Marie-H&eacute;l&egrave;ne AHAMADA";
lesGens[1] = "Lo&iuml;c BARON-BARBIER";
lesGens[2] = "Youssouf COULIBALY";
lesGens[3] = "Clarisse DUCREUX";
lesGens[4] = "V&eacute;ronique GILLON";
lesGens[5] = "Haiying HUANG";
lesGens[6] = "Virginie JOUBERT";
lesGens[7] = "Dorian LACOMBE";
lesGens[8] = "Arthur LACOMME";
lesGens[9] = "J&eacute;r&ocirc;me MEYER";
lesGens[10] = "Xavier MONNOT";
lesGens[11] = "L&eacute;onard STRONG";
lesGens[12] = "S&eacute;bastien S&Uuml;SS";
</script>
</head>
Jean-François Perrot
JavaScript 1
Photo1.html
28
14
<body> <p>Debut</p> <p>
<script type="text/javascript">
var nom;
var num;
Deuxième exemple :
montrer les photos de la promo.
le corps de la page
alert("Vous allez choisir une photo.");
if ( confirm(" Allons-y ! ") ) {
num = parseInt(prompt("Quel numero de photo ?", ""));
if ( num > 13 ) {
alert('Pas plus de 13, SVP');
} else {
if ( num < 10 ) {
chemin = chemin+"0"+num+".jpg";
} else {
chemin = chemin+num+".jpg";
}
Photo1.html
nom = lesGens[num-1];
document.write('<img src='+chemin+'>');
document.write('<h3>'+nom+'</h3>');
}
}
</script>
</p> <p>Fin</p> </body>
</html>
Jean-François Perrot
JavaScript 1
29
JavaScript 1
30
Deuxième exemple :
exécution
(début)
Jean-François Perrot
15
Deuxième
exemple :
exécution
(fin)
Jean-François Perrot
JavaScript 1
31
JavaScript 1
32
Deuxième exemple :
exécution
accident
Jean-François Perrot
16