webmestre : conception de sites et administration de serveurs web

WEBMESTRE : CONCEPTION DE SITES ET
ADMINISTRATION DE SERVEURS WEB
ALGORITHMIQUE / PROGRAMMATION ORIENTÉES INTERNET
Cours et TP A3 (1/2 module)
Chapitre 10
FONCTIONS / PROCÉDURES - GESTION DES ÉVÉNEMENTS

CONSERVATOIRE NATIONAL DES ARTS ET METIERS
Le plus grand soin a été apporté à la réalisation de ce support pédagogique afin de vous fournir une information
complète et fiable. Cependant le Cnam Champagne-Ardenne n’assume de responsabilité, ni pour son utilisation,
ni pour les contrefaçons de brevets ou atteintes aux droits de tierces personnes qui pourraient résulter de cette
utilisation.
Les exemples ou programmes présents dans cet ouvrage sont fournis pour illustrer les descriptions théoriques. Ils
ne sont en aucun cas destinés à une utilisation commerciale ou professionnelle.
Le Cnam ne pourra en aucun cas être tenu responsable des préjudices ou dommages de quelque nature que ce soit
pouvant résulter de l’utilisation de ces exemples ou programmes.
Tous les noms de produits ou autres marques cités dans ce support sont des marques déposées par leurs proprié-
taires respectifs.
Ce support pédagogique a été rédigé par Michaël KRAJECKI, Maître de Conférences à l’Université de Reims-
Champagne-Ardenne.
Copyright c 2001-2004 Centre d’Enseignement A Distance du Cnam Champagne-Ardenne.
Tous droits réservés.
Toute reproduction, même partielle, par quelque procédé que ce soit, est interdite sans autorisation préalable du
Cnam Champagne-Ardenne. Une copie par xérographie, photographie, film, support magnétique ou autre, constitue
une contrefaçon passible des peines prévues par la loi, du 11 mars 1957 et du 3 juillet 1995, sur la protection des
droits d’auteur.

CONSERVATOIRE NATIONAL DES ARTS ET METIERS
Table des matières
1 INTRODUCTION 2
2 FONCTIONS 2
2.1 Exemple : calcul du maximum ......................................... 2
2.1.1 Contexte ................................................ 2
2.1.2 Algorithme ............................................... 2
2.1.3 Remarques ............................................... 3
2.2 Définition .................................................... 3
2.3 Retour à l’exemple du calcul du maximum .................................. 4
2.3.1 Définition de la fonction max() .................................... 4
2.3.2 Utilisation de la fonction max() .................................... 4
2.3.3 Synthèse ................................................ 5
3 PASSAGE DE PARAMÈTRES, VARIABLES LOCALES 5
3.1 Introduction ................................................... 5
3.2 Définiton de la fonction ............................................. 5
3.3 Utilisation de la fonction ............................................ 6
3.4 Analyse du phénomène au moment de l’appel ............................... 6
3.5 D’autres versions de l’algorithme principal .................................. 6
3.6 Autre exemple de fonction : PGCD de deux entiers ............................. 7
4 PROCÉDURES 8
4.1 Définition .................................................... 8
4.2 Exemple : affichage des multiples d’un entier ................................ 8
4.3 Remarques ................................................... 9
5 FONCTIONS ET PROCÉDURES EN JAVASCRIPT 9
5.1 Absence de typage des variables et paramètres .............................. 9
5.2 Dénomination commune : function .................................... 10
5.3 Exemples de fonction et procédure ...................................... 10
5.4 Positionner le code Javascript par rapport au code HTML ......................... 11
5.4.1 Déclenchement des actions ...................................... 11
5.4.2 Définition des méthodes ........................................ 12
6 DÉCLENCHER DES ACTIONS EN RÉACTION À DES ÉVÉNEMENTS 13
6.1 En cliquant sur un lien ............................................. 13
6.2 En réaction à un événement .......................................... 14
6.2.1 Les principaux événements permettant de déclencher une action ................. 15
6.2.2 Exemple ................................................. 15
Algorithmique / Programmation orientées Internet 1

CONSERVATOIRE NATIONAL DES ARTS ET METIERS
1 INTRODUCTION
Nous avons étudié, dans les deux derniers chapitres, la façon d’écrire des algorithmes et de les traduire en
Javascript. Ecrire un algorithme consiste à décomposer le traitement à réaliser en actions simples, mais il est parfois
utile de décomposer ce traitement en blocs d’actions simples. Identifier de tels blocs permet, en les nommant, de
les appeler à différents endroits de l’algorithme, et éventuellement de les y utiliser plusieurs fois sans ouvoir à les
réécrire.
De tels blocs d’instructions, nommés, s’appellent fonctions ou procédures, selon qu’ils permettent d’obtenir une
valeur ou de réaliser des actions. En Javascript, ils seront rassemblés sous le temre générique de méthodes.
Dans ce chapitre, nous allons voir comment identifier et déclarer des fonctions et des procédures, et comment
les appeler dans l’agorithme qui doit y avoir recours (ou dans d’autres fonctions ou procédures qui les utiliseraient).
Nous verrons ensuite comment procéder en javascript.
Enfin, nous décrirons les différents moyens de faire appel à des méthodes en Javascipt, et en particulier comment
les invoquer en réaction à des événements (chargement de la page, clic de souris, ...).
Ces notions nous permettront alors d’écrire des pages Web réellement interactives, puisqu’elles pourront en
particulier utiliser des renseignements fournis ar l’utilisateur, et lui en fournir d’autres en retour.
2 FONCTIONS
Nous allons voir en quoi l’utilisation de fonction(s) peut nous être utile, puis nous préciserons comment on décrit
et comment on utilise une fonction. Pour mettee ce la en évidence, considérons un exemple particulier.
2.1 Exemple : calcul du maximum
2.1.1 Contexte
Notre objectif est ici d’écrire un algorithme qui calcule le maximum de deux quantités, puis celui de deux autres
valeurs (les valeurs seront stockées dans quatre variables : a,b,cet d). L’algorithme de calcul du maximum de deux
valeurs a déjà été étudié dans le chapitre 8, au titre des structures conditionnelles. L’écriture de cet algorithme ne
pose donc pas de problème : il s’agit
– de lire les valeurs associées aux variables a,b,cet d;
– d’appliquer l’algorithme du maximum aux variables aet b;
– puis d’appliquer l’algorithme du maximum aux variables cet d;
– d’afficher les deux résultats.
2.1.2 Algorithme
Voici donc la mise en œuvre de cet algorithme :
FONCTIONS / PROCÉDURES - GESTION DES ÉVÉNEMENTS2

CONSERVATOIRE NATIONAL DES ARTS ET METIERS
Algorithme maximum.
déclaration :
variable : a, b, c, d, maxAB, maxCD : entiers
Début
lire(a,b,c,d) { pour les initialiser }
Si a≥balors
maxAB ←a
sinon
maxAB ←b
Fsi
Si c≥dalors
maxCD ←c
sinon
maxCD ←d
Fsi
écrire(maxAB, maxCD) { pour connaître le résultat }
Fin.
2.1.3 Remarques
Cet algorithme suscite quelques remarques :
– on retrouve la même suite d’actions pour chacun des deux calculs de maximum;
– seules les variables utilisées dans cette suite d’actions sont différentes (a,bet maxAB pour le premier calcul;
c,det maxCD pour le second);
– dans les deux cas, le résultat de cette suite d’actions est une valeur de type entier.
Afin de profiter de ces remarques, on souhaite n’avoir à décrire qu’une seule fois la suite d’actions à réaliser,
tout en permettant de les appliquer à des valeurs différentes. C’est ce que permettra l’utilisation d’une fonction : une
fonction permet de mettre en commun un certain nombre d’actions afin de faciliter l’utilisation multiple de ces actions
dans un algorithme.
Nous allons maintenant définir plus précisément ce qu’est une fonction, puis nous verrons comment écrire la
fonction (nommer le bloc d’instructions et faire en sorte qu’il renvoie une valeur), et enfin comment l’exploiter dans un
algorithme (en particulier comment récupérer la valeur qu’elle renvoie, pour pouvoir l’utiliser).
2.2 Définition
Définition 1 (Fonction) Une fonction est un bloc (une suite) d’actions (d’instructions), nommé et éventuellement
paramétré, permettant d’obtenir un résultat.
On associe un type à une fonction : c’est le type du résultat produit.
Lorsqu’une fonction est déclarée (et donc nommée), on peut ensuite l’appeler par son nom.
Vous pouvez tout de suite remarquer qu’une fonction renvoie une valeur d’une type particulier (toujours le même,
quel que soit le contexte de son utilisation, même si on l’utilise plusieurs fois).
Les fonctions permettent d’appliquer le principe diviser pour régner :
– chaque fonction résoud un sous problème;
– l’algorithme principal appelle ces fonctions, autant de fois que nécesaire, pour réaliser le traitement souhaité,
afin d’apporter une solution au problème exprimé par l’utilisateur.
Nous pouvons maintenant décrire comment on définit et comment on utilise une telle fonction, en revenant à notre
exemple (algorithme qui calcule et affiche le maximum de deux valeurs, deux fois de suite).
Algorithmique / Programmation orientées Internet 3