Vous êtes sur la page 1sur 17

JAVASCRIPT et CGI

en 3 leçons

Leçon n°1 : JavaScript

Plan

❚ Qu’est-ce que Javascript ?


❚ Programmer en Javascript
❚ Javascript et les objets
❚ Javascript et HTML
❚ Gestion des événements
❚ Gestion des formulaires
❚ Présentation du TP

Ph. Leray JAVASCRIPT 1


Qu’est-ce que Javascript

❚ Langage de programmation interprété :


❙ pas besoin d’étape « préparatoire » (compilation, …)
❙ besoin d’un « interpréteur »

❚ Javascript et le web :
❙ inventeur = Netscape Communications (Javascript 1.2)
❙ imité par Microsoft (JScript 3.0)
❙ interpréteur inclus dans les navigateurs WWW
❙ problème de « compatibilité »
❙ existence d’une norme « neutre » (ECMAScript)

Ph. Leray JAVASCRIPT 2

Où utiliser Javascript

❚ Dans des documents HTML

❚ Deux grandes utilisations :


❙ Javascript « client »
❘ Interpréteur = votre navigateur WWW
❘ utilisation la plus fréquente
❙ Javascript « serveur »
❘ Interpréteur = le serveur WWW
❘ peu utilisé (→ CGI)

Ph. Leray JAVASCRIPT 3


Comment utiliser Javascript

❚ Saisie des scripts :


❙ avec votre éditeur HTML (s’il accepte les balises Javascript)
❙ avec un éditeur de texte
❚ Exécution des scripts :
❙ avec votre navigateur (s’il contient un interpréteur Javascript)
❚ Choix de « compatibilité » selon le public visé :
❙ intranet (= celle du navigateur installé)
❙ public réduit « internautes » (= versions récentes)
❙ tout public ( = Javascript de base)

Ph. Leray JAVASCRIPT 4

Programmer en Javascript

❚ Syntaxe proche du C
❚ Interpréteur « souple »
❙ conversion automatique de types
❘ 1 + 'a' = '1a' attention danger !
❚ Types de données simples
❙ Nb à virgule flottante, chaînes de caractères
❚ Utilisation d’objets simples
❙ Prédéfinis (document.write)
❙ Définis par l’utilisateur (etudiant.nom)

Ph. Leray JAVASCRIPT 5


Programmer en Javascript (suite)

❚ Structures de contrôle classiques : test


❙ if (condition)
{ instruction a1; ... instruction aN; }
else { instruction b1; ... instruction bN; }

❙ switch (expression) {
case constante1:
instruction a1; ... instruction aN; break;
case constante2:
instruction b1; ... instruction bN; break;
default:
instruction c1; ... instruction cN;
}
Ph. Leray JAVASCRIPT 6

Programmer en Javascript (suite)

❚ Structures de contrôle classiques : répétition


❙ for (definition de la variable, condition, évolution de la variable)
{
instruction 1; ...
instruction N;
}

❙ while (condition) {
instruction 1; ...
instruction N;
incrémentation de la variable;
}

Ph. Leray JAVASCRIPT 7


Programmer en Javascript (fin)

❚ Définition de fonctions

❙ function somme(a,b) {
return a+b ;
}

❙ function affiche_coucou() {
document.write(« coucou »);
}

Ph. Leray JAVASCRIPT 8

Javascript et les objets

❚ Classe = famille d'objets avec une structure et


des outils communs
❙ propriétés = éléments de la structure
❙ méthodes = outils de manipulation attachés à la
classe d’objets

❚ Instance d’une classe = élément de la classe

❚ Constructeur = outil de création d’une instance

Ph. Leray JAVASCRIPT 9


Javascript et les objets (suite)

❚ Ex de classe :
❙ la classe individu
❙ propriétés : nom, prénom, date de naissance, …
❙ méthodes : âge
(calcul à partir de date de naissance), ...

❚ Instanciation :
❙ Pierre, Paul et Tom sont des individus

Ph. Leray JAVASCRIPT 10

Javascript et les objets (suite)

❚ Manipulation d’objets en Javascript :


❙ this : objet courant
❙ truc.champ : champ est une propriété de l’objet truc

function age() {
naissance=this.date_naissance
/* calcul de l ’age …*/
return age ;
}

Cette fonction n’est pas liée à un objet précis


Ph. Leray JAVASCRIPT 11
Javascript et les objets (suite)

❚ La façon la plus simple en Javascript est de


créer une fonction constructeur pour une classe:
function individu(nom, prenom, date_naissance) {
this.nom = nom;
this.prenom = prenom;
this.date_naissance = date_naissance;
this.age = age
}

❚ Instanciation = utilisation du constructeur


neveu = new individu( ’Tom', ’Rombi', ’24/02/98');

Ph. Leray JAVASCRIPT 12

Javascript et les objets (suite)

❚ Exemple :
Salarié
nom (« »)
dept (« général »)
Directeur (basé sur salarié)
Salarié
subalternes (tableau vide)
Travailleur (basé sur salarié)
tâches (« »)
Directeur Travailleur
Commercial (… travailleur)
quota (100)
dept (« ventes »)
Commercial Ingénieur
Ingénieur (… travailleur)
dept (« RD »)

Ph. Leray JAVASCRIPT 13


Javascript et les objets (suite)

❚ Héritage en Javascript
Function salarie() {
this.nom=« »;
this.dept=«general »;
}

function directeur() { function travailleur() {


this.subalternes=[]; this.taches=[];
} }
directeur.prototype=new salarie; travailleur.prototype=new salarie;

function commercial() {
this.dept=« ventes »; function ingenieur() {
this.quota=100; this.dept=« RD »;
} }
commercial.prototype=new travailleur; ingenieur.prototype=new travailleur;
Ph. Leray JAVASCRIPT 14

Javascript et les objets (suite)

❚ Création des instances :


❙ jim.nom=« »
jim = new salarie ❙ jim.dept=« general »
❙ sally.nom=« »
sally = new directeur ❙ sally.dept=« general »
❙ sally.subalternes=[]
❙ marc.nom=« »
marc = new travailleur ❙ marc.dept=« general »
❙ marc.taches=[]
❙ fred.nom=« »
fred = new commercial ❙ fred.dept=« ventes »
❙ fred.taches=[]
❙ fred.quota=100
Ph. Leray JAVASCRIPT 15
Javascript et les objets (fin)

❚ Constructeurs avec initialisation des propriétés


Function salarie(nom,dept) {
this.nom=nom || « »;
this.dept=dept || «general »;
}

❚ Ajout de propriétés après construction :


❙ à une instance :
marc.bonus=3000 ;
❙ à un objet :
travailleur.prototype.specialite=« »;

Ph. Leray JAVASCRIPT 16

Javascript et HTML

❚ Pour faire propre : <html>


<head>
<title>Exemples Javascript</title>
❙ définition des
<script language="JavaScript">
fonctions, variables : <!--
<HEAD> var resultat=true;
function coucou() {
document.write("coucou");
❙ appel aux fonctions }
ou scripts simples : //-->
<BODY> </script>
</head>

<body>
<H1><script>coucou();</script>
</H1>
</body>
</html>

Ph. Leray JAVASCRIPT 17


Javascript et HTML (suite)

❚ JavaScript instancie des objets concernant :


❙ le navigateur utilisé (navigator)
❙ l'écran de la machine (screen)
❙ les documents HTML affichés (window)

<SCRIPT>
document.write('Vous utilisez ' + navigator.appName + '<BR>');
document.write('La version de votre navigateur est '
+ navigator.appVersion + '<BR>');
</SCRIPT>

write est une méthode associée à l ’objet document


appName est une propriété de l ’objet navigator

Ph. Leray JAVASCRIPT 18

Javascript et HTML (suite)

❚ Arborescence des objets « client »

frames[] links[]

document images[]
window variable selon
location anchors[] le navigateur

history applets[]

plugins[]
navigator
plugin forms[] elements[]

MimeTypes[] ...

Ph. Leray JAVASCRIPT 19


Javascript et HTML (suite)

<SCRIPT>
document.write('Vous utilisez ' + navigator.appName + '<BR>');
document.write('La version de votre navigateur est ' + navigator.appVersion + '<BR>');
</SCRIPT>

Résultat sous IE :
Vous utilisez Microsoft Internet Explorer
La version de votre navigateur est 4.0 (compatible; MSIE 5.0; Windows 98; DigExt)

Résultat sous NN :
Vous utilisez Netscape
La version de votre navigateur est 4.7 [en] (Win98; I)

Ph. Leray JAVASCRIPT 20

Javascript et HTML (suite)

<SCRIPT>
fen2=window.open("", "fenetre2", "scrollbar=no");
fen2.document.write("j ’écrit dans la fenêtre 2<BR><BR>");

fen2.close();
</SCRIPT>

❙ Création de nouvelles fenêtres,


❙ Manipulation du contenu
❙ Fermeture
❙ Idem avec les frames ...

Ph. Leray JAVASCRIPT 21


Javascript et HTML (suite)

❚ Manipulation des images :


<SCRIPT>
function init() {
var images = new Array(10);
❙ chargement d'un tableau for (var i = 0; i < 10; i++) {
images[i] = new Image();
d'images en mémoire images[i].src = i + ".gif";
}
}
function change(image,i) {
image=image[i] ;
}
</SCRIPT>

❙ affichage d'une image puis <SCRIPT> init(); </SCRIPT>


remplacement par un …
élément du tableau <IMG SRC="0.gif" NAME=bulle>
...
<SCRIPT> change(bulle,2); </SCRIPT>
Ph. Leray JAVASCRIPT 22

Javascript et HTML (fin)

❚ Fenêtres d’interaction avec l’utilisateur :

❙ Fenêtre d'alerte (attirer l'attention de l ’utilisateur)


❘ syntaxe : alert('texte à afficher');

❙ Message de prompt (saisir une information, ...)


❘ syntaxe : valeur=prompt('texte', 'valeur_par_defaut');

❙ Fenêtre de confirmation
❘ syntaxe : retour=confirm('question');
❘ retour = true si on clique sur OK / false pour annuler.

Ph. Leray JAVASCRIPT 23


Gestion des événements

❚ événement = action de l’utilisateur face au


navigateur ou à un objet de la page HTML

❚ A chaque événement, le navigateur crée un objet


event manipulable dans le code JavaScript :
❙ ex :
❘ event.type : type d’événement
❘ event.target : objet en rapport avec l’événement
❘ ...

Ph. Leray JAVASCRIPT 24

Gestion des événements (suite)

❚ Exemples de types d’événements :


onAbort L'utilisateur interrompt le chargement d'une image.
onClick L'utilisateur clique sur un objet.
onChange L'utilisateur a changé la valeur d'un champ de saisie.
onDblClick L'utilisateur double-clique sur un objet.
onDragDrop L'utilisateur fait glisser un objet sur le navigateur.
onError Une erreur se produit lors du chargement d'une image
ou de l'exécution du code JavaScript.
onKeyDown L'utilisateur enfonce une touche.
onKeyPress L'utilisateur à appuyé sur une touche.
onLoad Un document ou image commence à ce charger.
onMouseMove L'utilisateur déplace la souris.
onMouseOver Le curseur de la souris vient de rentrer sur une zone.
onResize Une fenêtre ou une frame est redimensionnée.
onSubmit Un formulaire est soumis.

Ph. Leray JAVASCRIPT 25


Gestion des événements (suite)

❚ Exemple : événement lié à un bouton

<form action="noaction">
<input type="button" value= "Cliquer ici" onClick="window.close()">
</form>

❙ fermeture de la fenêtre courante si on clique sur le


bouton

Ph. Leray JAVASCRIPT 26

Gestion des événements (fin)

❚ Exemple : événement lié à un lien


function change(img,N) {
if (N!=0) image.src="xx.gif"
else image.src="0.gif" }

<IMG SRC="0.gif" NAME=bulle>


<A HREF="#" onMouseOver="change(bulle,1)"
onMouseOut="change(bulle,0)">
Passer sur ce lien pour changer l'image précédente
</A>

On change la source d'une image en fonction de la position de la


souris par rapport au lien

Ph. Leray JAVASCRIPT 27


Gestion des formulaires

❚ Principe : validation locale de certaines zones du


formulaire avant envoi au serveur
function Positif(s) { return (parseInt(s) > 0) }

function Verifie(item) {
var returnVal = false
if (!Positif(item.value)) alert("entrez un nb positif")
else returnVal = true
return returnVal }

function VerifieEtSoumet(theform) {
if (Verifie(theform.quantite)) {
alert("Commande envoyée") ; return true }
else { alert("Commande impossible") ; return false } }

Ph. Leray JAVASCRIPT 28

Gestion des formulaires (suite)

❚ Utilisation dans un <FORM> :

<FORM NAME= "question" ACTION="fini.html" METHOD="post">


Combien d'objets desirez-vous ?
<INPUT TYPE="text" NAME="quantite"
onChange= "Verifie(this)">
<BR>
<INPUT TYPE="submit" VALUE="Commander"
onSubmit= "VerifieEtSoumet(this.form)">
</FORM>

On vérifie la valeur du champ quantite en cas de changement


On vérifie et on soumet le formulaire si on clique sur le bouton de soumission

Ph. Leray JAVASCRIPT 29


Gestion des formulaires (fin)

❚ Autres utilisations possibles :

❙ remplir automatiquement certains éléments du


formulaire qui dépendent de ceux que vous avez
remplis,

❙ définition de l’action associée au formulaire en


fonction de ce qui a été saisi

❙ ...

Ph. Leray JAVASCRIPT 30

Présentation du TP

❚ Création de petits fichiers HTML illustrant les principes


suivants :
❙ Affichage des propriétés associées au navigateur
❙ Affichage et modification de propriétés associées au document
❙ Affichage des différentes fenêtres d'interaction déclenché par
l'appui sur un bouton. (id. pour les valeurs retournées)
❙ Ouverture/Affichage/Fermeture de nouvelles fenêtres "à
distance"
❙ Manipulation d'images en fonction de différents évènements
❙ Validation locale de formulaires

❚ Exemple

Ph. Leray JAVASCRIPT 31


Bibliographie

❚ Livres de référence :
❙ Le guide du programmeur Javascript - N. McFarlane
(Eyrolles)
❙ Programmation HTML et Javascript - P. Chaléat &
D. Charnay (Eyrolles)
❙ Javascript - the definitive guide - D. Flanagan
(O'Reilly)
❚ Manuel de référence on-line :
❙ http://developer.netscape.com/docs/manuals/
communicator/jsref/index.htm
❚ Tutoriels on-line :
❙ http://cui.unige.ch/~pawlak7/javascript/
❙ http://progweb.free.fr/

Ph. Leray JAVASCRIPT 32