Systèmes de communication

Programmation CGI et en Javascript (3)


INTRODUCTION | MODULE 1| MODULE 2 | MODULE 3.1 | MODULE 4 | INDEX

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):

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.

JavaScript

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

  1. 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).
  2. 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.

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:

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 !