38
Documents intéractifs CGI - JavaScript Saïd Radhouani Université de Genève avril 2005

Documents intéractifs

Embed Size (px)

DESCRIPTION

Common Gateway Interface, JavaScript, Web Forms

Citation preview

Page 1: Documents intéractifs

Documents intéractifsCGI - JavaScript

Saïd Radhouani Université de Genèveavril 2005

Page 2: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 2

Introduction

HTML seul ne permet pas de créer des documents interactifs

Besoin d’un programme Exécuté côté serveur

Exemples : CGI (Common Gateway Interface), PHP (PHP Hypertext Preprocessor)

Exécuté côté clientExemple: Javascript

HTML permet en revanche de créer l’interface de ces programmes Formulaires Affichage des résultats d’un programme

Page 3: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 3

CGI – Common Gateway Interface

Une CGI (Common Gateway Interface) est une technique qui permet à un client d'exécuter des programmes spécifiques sur un serveur, il permet de : produire des pages html dynamiques accès à des bases de données l'affichage de données traitées par le serveur ...

Un des grands intérêts est la possibilité de fournir des pages dynamiques. L'application la plus fréquente repose sur l'utilisation de formulaire HTML : ça permet à l'utilisateur de choisir ou saisir des données, puis à

cliquer sur un bouton de soumission du formulaire, envoyant alors les données du formulaire en paramètre du programme CGI...

Page 4: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 4

CGI - généralités

Un programme CGI peut être écrit dans n'importe quel langage qui est:

capable de lire le flux de données d'entrée capable de traiter des chaînes de caractères capable d'écrire sur le flux standard de sortie exécutable ou interprétable par le serveur

Les langages de programmation les plus utilisés pour écrire des CGI sont :

Le langage Perl (majoritairement) Les langages C, C++ Java ...

Page 5: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 5

CGI – principe de fonctionnement

Lorsqu'une requête est envoyée au serveur, celui-ci examine l'extension du fichier demandé afin de déterminer l'action qu'il va effectuer

Exemples : fichier HTML (extension .htm ou .html) : le serveur génère des en-

têtes de réponse HTTP et envoie le fichier HTML au navigateur

fichier CGI écrit en Perl (extension .pl) : le serveur exécute l'interpréteur Perl, celui-ci interprète le code contenu dans le fichier .pl puis envoie les données au serveur, qui va les envoyer au navigateur (comme dans le cas d'un fichier HTML)

fichier CGI écrit en langage C (extension .exe) : le serveur exécute la CGI, puis envoie vers le navigateur les données que le programme lui aura transmis

Page 6: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 6

CGI – principe de fonctionnement

Exécution d'un programme sur le serveur et création de la page La page html envoyée est générée dynamiquement

Navigateur web (client)

<html> …

</html>

http://www....[paramètres]

page html

Serveur Web

La page HTML est créée en fonction de la requête HTTP

Le client reçoit la page dont le contenu est créé en temps réel

Chaque client reçoit une page dont le contenu est dépendant de sa requête

Page 7: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 7

Les formulaires

Permettent aux auteurs de dialoguer avec leurs lecteurs

Page 8: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 8

Les formulaires - La balise FORM

La balise FORM ~ un conteneur

Balise <form>…</form>

Permet de regrouper des éléments d’un formulaire qui vont permettre à l'utilisateur de choisir ou de saisir des données, qui seront envoyées à l'URL indiqué dans l'attribut ACTION par la méthode indiquée par l'attribut METHOD

Il est possible d'insérer n'importe quel élément HTML de base dans une balise FORM (textes, boutons, tableaux, liens,...) mais il est surtout intéressant d'insérer des éléments interactifs. Ces éléments sont :

La balise INPUT: un ensemble de boutons et de champs de saisie La balise TEXTAREA: une zone de saisie La balise SELECT: une liste à choix multiples

Page 9: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 9

Les formulaires - La balise FORM

Attributs obligatoires :

Method => sous quelle forme seront envoyées les réponsesGET : le contenu du formulaire apparaît dans l’URLPOST : le contenu est posté dans le corps de la requête

http

Action => indique l’adresse d’envoiScript CGI : URL du programme qui va traiter les

données e-Mail : mailto:[email protected]

Attributs facultatifs : Name : nom du formulaire Enctype => spécifie le codage des données transmises

Page 10: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 10

Les formulaires - La balise FORM

Syntaxe :<FORM

NAME = «nom_form» METHOD =«POST» ou «GET»ACTION = «URL»ENCTYPE = «type mime»

>…</FORM>

Exemples : <form name="formulaire" method= "get" action =

 "http://www.machin.com/cgi-bin/script.cgi">

Page 11: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 11

Les formulaires - Envoi des données

Les données sont envoyées sous forme de paire nom/valeur Syntaxe : champ1=valeur&champ2=valeur&…

eg. Google

Envoi par email :<form action="mailto:adresse_email"method="post" enctype="text/plain">

enctype="text/plain" => éviter d’avoir un message illisible comme :nom=Radhouani&prenom=Sa%EFd&email=Said.Radhouani%40cui.unige.ch&

Ajouter un sujet au message action = "mailto:adresse_email?subject=..."

eg.

Page 12: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 12

Les formulaires - La balsie INPUT

INPUT => créer des éléments interactifs Syntaxe :

<INPUT type=“type de l’élément” value=“valeur par défaut” name=“nom de l’élément”

Attributs Type : spécifie le type d’élément Value : valeur initiale Name : nom de l’élément Size : nombre de caractères Maxlength : nombre max. de caractères checked (pour les boutons “radio”) indique que l’élément est

sélectionné

Page 13: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 13

Champ de saisi de texte - une ligne Syntaxe : <input type="text" name="nom"> Size : taille de la case Maxlength : nombre max de caractères

Password Syntaxe : <input type="password" name="pwd">

Les formulaires - Champ de saisi

Page 14: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 14

Les formulaires - Champ de saisi

Champ de saisi - plusieurs lignes (≠ INPUT type = “texte”) Syntaxe : <TEXTAREA name=”nom" rows=”x" cols=”y” …>

texte par défaut </TEXTAREA>

Cols : le nombre de caractères que peut contenir une ligne Rows : le nombre de lignes Name : le nom associé au champ Readonly : permet d'empêcher l'utilisateur de modifier le texte

entré par défaut dans le champ Value : la valeur qui sera envoyée par défaut au script si le champ

de saisie n'est pas modifié par l'utilisateur

Page 15: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 15

Les formulaires - Cases à cocher

Case à cocher Deux états : checked (coché)/unchecked(non coché)

Syntaxe : <input type=”CHECKBOX" name=”nom" value=”valeur"> texte affiché</input>

Exemple : <input type="checkbox" name=”navigateurs" value=”Netscape"> Netscape</input> <br><input type="checkbox" name="navigateurs” value="mozilla"> Mozilla</input><br>…<input type="checkbox" name="navigateurs” value="autre"> Autre</input>

Page 16: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 16

Les formulaires - Bonton option

Bouton option : radio - un seul choix parmi plusieurs Tous les boutons ont le même nom Checked : attribut permettant de sélectionner un élément par défaut

Exemple : <input type="radio" name="boisson" value="cafe">café</input><br>

<input type="radio" name="boisson" checked value="orange” checked>jus d'oranges</input><br>…<input type="radio" name="boisson" value="autre">autre</input><br>

Page 17: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 17

Les formulaires - La balise SELECT

La balise SELECT => créer une liste déroulante d’éléments Les éléments sont précisés par les balises OPTION Attributs :

Name : le nom du champ Disabled : créer une liste désactivée (affichée en grisée)

Exemple : <select name="couleur_prefere">

<option value="bleu">Bleu</option><option value="jaune">Jaune</option><option value="rouge">Rouge</option><option value="vert">Vert</option><option value="orange">Orange</option><option value="violet">Violet</option>

</select>

Page 18: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 18

Les formulaires - La balise SELECT

Autres attributs : MULTIPLE => Sélection multiple SIZE => nombre d’éléments affichés en même temps

Exemple : <select multiple="multiple" name="couleurs_detestees"

size="6">

Page 19: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 19

Les formulaires - Groupement dans une sélection

Groupement dans une sélection => Balise OPTGROUP

Exemple : <select name="couleur_prefere">

<optgroup label="couleurs de base"><option value="bleu">Bleu</option><option value="jaune">Jaune</option><option value="rouge">Rouge</option>

</optgroup><optgroup label="mélanges">

<option value="vert">Vert</option><option value="orange">Orange</option><option value="violet">Violet</option>

</optgroup> </select>

Page 20: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 20

Les formulaires - Regroupement d’éléments

Grouper des éléments FIELDSET : Regroupement de champs LEGEND : Légende d'un regroupement - texte affiché LABEL : étiquette du champ - texte affiché ID du champ

Exemple:<fieldset><legend>Auteur</legend>

<label for="nom">Nom:</label><input type="text" id="nom" name="nom" /><label for=”prenom">Prénom:</label><input type="text" id="prenom" name="prenom" />

</fieldset>

Page 21: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 21

Les formulaires - Sélection d’un fichier

Sélection d’un fichier à envoyer avec le formulaire Préciser le type de données pouvant être envoyées grâce à

l’attribut ENCTYPE

Exemple : <form enctype=”…" method=“post” action =”mailto:...">

fichier à envoyer <input type=“file” size=20 name=“fichier”></form>

Page 22: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 22

Les formulaires - Champs cachés

Champs cachées

Ça permet de transmettre de l’information d’un formulaire au suivant, lorsqu’on a prévu un enchaînement de formulaires

Syntaxe : <input type=“hidden” name=“...” value=“...”>

Exemple : écolde doctorale de Grenoble

http://adum.igh.cnrs.fr/index.pl

Page 23: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 23

Les formulaires - Bouton SUBMIT/RESET

Bouton de remise à zéro : rétablir les éléments du formulaires à leurs valeurs par défaut

Attributs : TYPE : type du bouton = RESET NAME : nom du bouton VALUE : le texte du bouton

Syntaxe <input type="reset" name="effacer" value="clear">

Bouton de soumission - envoi du formulaire au programme (ou email)

Syntaxe : <input type="submit" name="envoi" value="envoi">

Bouton de soumission personnalisé : son apparence est l’image située à l’emplacement précisé par son attribut SRC

Syntaxe : SRC = “URL”

Page 24: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 24

Démos

Exemple de recherche de vidéo : Cf. Charhad

Autres exemples :Formulaires sans/avec contrôle

Référence :W3C :

http://www.la-grange.net/w3c/html4.01/interact/forms.html

Page 25: Documents intéractifs

Introduction à JavaScriptcontrôle des champs d’un formulaire

Page 26: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 26

Langage de script - JavaScript

C'est un langage de programmation Le langage de script est incorporé dans un document HTML Apporter des améliorations au langage HTML Exécuter des commandes du côté client

Fonctionnement :

------------------------ ------------------------------------------------------------------------------------------------------------------------------------

HTML Script

<SCRIPT language="Javascript">

Le code du script

</SCRIPT >

Page 27: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 27

Web intéractif

Les langages de script permet d'avoir des pages actives et non dynamiques

Le contenu des pages est fixe

Navigateur web (client)

<html> …<javascript…>…</html>

http://www.unige.ch/…Serveur Web

Interpréteur Javascript

page html

Page 28: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 28

JavaScript - Utilisation

Affichage d'un message dans la barre d'état quand l'utilisateur positionne le curseur de la souris sur un lien

Ouverture d'une boîte de dialogue lors d'un click Modification d'une image lors du survol d'un lien par le pointeur

de la souris Fermer une fenêtre lors d’un click Ouverture d'une fenêtre popup Modifier l'apparence d'une page web Afficher des message pour l'utilisateur Afficher une horloge … Contrôler les champs d'un formulaire

Page 29: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 29

JavaScript

Balise script (n’importe où dans la page HTML)<script language="javascript"><!--

instructions JavaScript

// -->

</script>

Dans un fichier externe<script language="javascript" src="fich.js">

document.write("script non trouvé");</script>

Page 30: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 30

javaScript - Variables

Une variable est un objet repéré par un nom; Elle est prévue pour contenir des données qui pourront

changer au cours de l’exécution du programme

Une variable peut être déclarée : Explicitement

var i;var j = 1;

Implicitement nom = “toto”;

Types de données (pas besoin de préciser) Entiers Flottants Booléens (true / false) Chaînes de caractères (entre ‘ ‘ ou “ “)

Page 31: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 31

javaScript - Quelques opérateurs

i=0; affectation

== comparaison

>, >=, <, <= + - / *

&& et, || ou, != différent

! Not

++, -- incrément, décrément

% modulo

i += x; i-= x; ajoute / retire x à i

i *= x; i /= x;

Page 32: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 32

JavaScript : Structures de contrôle

if (condition) {instructions;

}else {

instructions;}

condition ? instructions à exécuter si vrai instructions à ne pas exécuter si faux

Page 33: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 33

javaScript : Structures de contrôle

switch (Variable) {

case Valeur1:

Liste d'instructions;

break;

case Valeur2:

Liste d'instructions;

break;

default:

Liste d'instructions;

break;

}

Page 34: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 34

JavaScript : Boucles

for (initialisation; condition d’arrêt; incrément){

instructions}

while (condition) {

instructions}

do {Instructions

} while (condition)

Page 35: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 35

JavaScript : Fonctions

Une fonction attribue un nom à un ensemble d’instructions (sous-programme)

Permet d’exécuter plusieurs fois les mêmes instructions sans avoir à tout réécrir

Permet de modulariser le code

Une fonction peut avoir zéro ou plusieurs paramètres

Retourne parfois un résultat

Page 36: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 36

JavaScript : Evénements

Les événements permettent de conditionner l’exécution de code JavaScript aux actions de l’utilisateur

(double) clics de souris

Positionner le curseur sur un élément de l’interface

Fermeture d’une page

...

Page 37: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 37

JavaScript- Contrôle des champs d’un formulaire

Principe : appeler une fonction JavaScript qui permet de contrôler les champs du formulaire

<form method="get" action=  "URL ou email" name= "nom du formulaire" onsubmit="return Fonction_JavaScript(this)" >

Fonction_JavaScript est une fonction JavaScript Elle a comme paramètre le contenu du formulaire (this) Elle permet de contrôler tous les champs du formulaire

Page 38: Documents intéractifs

04 avril 2005 Saïd Radhouani - CUI 38

Liens tiles

Il existe des sites sur lequels on peut trouver des dizaines de programmes JavaScript prêts à l’emploi

Exemple : http://www.editeurjavascript.com/scripts/