module 3.2

Systèmes de communication

Programmation CGI et en Javascript (3)

Rendre des pages HTML "interactives"

Solution	Se situe ...	Langage	Avantage	Inconvénient	Exemple d'application
Programmes CGI	Serveur	c, perl, langage de commande, etc.	Peuvent accèder à toutes les ressources du serveur	Multiplient les accès au réseau, problèmes de sécurité	Interfaçage pour interrogation de bases de données
Scripts interprétés	Client	JavaScript, JavaScript 1.2, VBScript	Déchargent le réseau, faciles à programmer	Ne connaît que le document (page) dans lequel ils sont insérés. Ceci est un avantage par rapport aux applets !	Contrôle de l'intégrité des informations entrées dans une forme
Applets	Client	Java, ActiveX	Assez faciles à programmer, lecture possible de fichiers sur le serveur	Ne connaissent pas bien le document qui les comprend	Animation

Programmation CGI (Common Gateway Interface)

CGI est un protocole de communication entre un serveur web et des applications annexes. Les programmes dits CGI sont des programmes situés sur le serveur (dans le répertoire cgi-bin ou dans des répertoires donnés dans la configuration). Ces programmes reçoivent leurs informations par des variables d'environnement et par le flux d'entrée standard. Le détail des opérations dépend de la méthode utilisée. Les méthodes GET et POST sont les plus courantes (HTTP/1.0):

Méthode GET : cette méthode est celle utilisée pour les requêtes standard (lien) et constitue la méthode utilisée par défaut pour les formulaires. Les données font partie de l'URL et toutes les informations transmises au script CGI transitent par des variables d'environnement.
Méthode POST: cette méthode est utilisée avec les formulaires dont la méthode a été précisée. Les données sont ajoutées au message HTTP et transmises au script par le flux d'entrée standard. Le reste des informations (dont le nombre de caractères constituant les données) font l'objet de variables d'environnement.

Les résultats sont envoyés par le flux de sortie standard. Tout langage de programmation possèdant de tels flux (!) et ayant accès aux variables d'environnement peut être utilisé pour créer de tels programmes. Exemple

Note: Depuis la première version de cette page de nombreux langages et extension des serveurs ont vu le jour.

Extension de pages HTML à l'aide de scripts

Il est possible d'enrichir les pages HTML à l'aide de scripts interprétés par le navigateur. Il y a plusieurs langages de script: JavaScript (anciennement LiveScript), VBScript, etc.

Note1 : Depuis la première version de cette page d'autres versions du langage ont vu le jour. Le site de Netscape en consitue la référence.

Note 2 : JavaScript est standardidsé selon la norme ECMA 262 tout comme le langage ActionScript lié à Flash de MacroMedia.

1. Principe de fonctionnement

Des fonctions logées dans le BODY du document (balise <SCRIPT> </SCRIPT>) sont interprétées "à la volée" lors du chargement (voir la fin du code HTML de cette page).
Les fonctions se logent dans le HEAD. Elles sont appelées par des "événements" ou des fonctions interprétées lors du chargement du BODY.

<HTML>
<HEAD><TITLE>essai</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function hello() {
alert("hello") // fenetre prédéfinie
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">

<SCRIPT LANGUAGE="JavaScript">
hello() ;
</SCRIPT>
</BODY></HTML>

Exercice: HTML 4 rajoute un type d'éléments dans les formes: TYPE="button" avec en particulier l'attribut onClick (gestion d'évènement). Crochez la fonction hello() à un tel bouton !

Exercice: Complétez le petit programme « hello() » en demandant préalablement le nom de la personne à saluer (utiliser prompt("votre nom")).

2. Hiérarchie des objets principaux

JavaScript est un langage à hiérarchie d'instances. C'est-à-dire qu'il utilise le paradigme module pour la hiérarchie des objets et le paradigme objet dans l'utilisation des données. Les objets principaux sont liés à la page HTML dans lequel le script est inscrit. D'autres objets sont fournis (string, date, math). D'autres peuvent être construits.

navigator
window

parent, frames, self, top
location
history
document

forms

elements

images
links
anchors

Remarque: le menu 'view', rubrique 'document info', va vous renseigner sur les différentes propriétés d'un document!

Exercice: la valeur d'un élément de nom x contenu dans la forme de nom y peut s'obtenir de plusieurs manière:

window.document.y.x.value
document.y.x.value
document.forms[i].elements[j].value (les formes et éléments sont numérotés depuis 0)

Complétez le petit programme « hello() » en saluant la personne dont le nom est contenu dans un élément "text".

Exercice: Réalisez une forme avec deux champs texte et un bouton « envoi ». Si un des champs est vide, affichez une erreur, sinon envoyez-là !

Exercice: sachant que chaque élément "se connaît" lui-même par 'this' et que la forme le contenant est 'this.form', simplifiez l'écriture du programme précédent en passant un paramètre dans la fonction hello.

Exercice: Réalisez une forme avec deux "checkbox". Un bouton envoi affiche l'état des "checkbox". (nom_element.checked renseigne par true ou false sur l'état d'une "checkbox").

Exercice: Même question mais le nombre de "checkbox" doit pouvoir être modifié rapidement (ce nombre est contenu dans une variable "globale", par exemple var nb_chkbox = 8)

Remarque: Le nombre d'éléments d'une forme peut aussi être obtenu par document.forms[i].elements.lenght.

Exercice: Mêmes questions avec des jeux de boutons "radio".

Exercice: A l'aide d'un bouton envoi, affichez la liste des "links" contenus dans un document (le nombre d'éléments du tableau s'obtient par document.links.lenght)

3. Ecrire dans une nouvelle fenêtre

Crée une fenêtre pour visualiser un fichier HTML	Crée une fenêtre pour y afficher le texte que vous tapez dans le cartouche

Cette date de mise à jour se note automatiquement lors du chargement !