Cours 5

En résumé

Il est question ici de trois choses :

1. jQuery, une bibliothèque de fonctions javascript qui permet de rendre dynamique un document html avec très peu de programmation
2. les formulaires en xhtml, pour permettre à l’utilisateur du site d’entrer des informations
3. une pincée de php, qui permet de programmer du côté serveur, notamment pour traiter les informations envoyées par l’utilisateur au moyen d’un formulaire

Le 1. et le 2. seront probablement vus en TP la semaine qui vient.

Seul le 2. sera au programme du partiel.

Le 3. sera probablement abordé la semaine suivante (juste après le partiel, donc.)

jQuery

Avant tout, rappelons que javascript permet de programmer des scripts qui seront exécutés par le client (le navigateur), donc sur la machine de l’internaute qui visite le site et non sur le serveur.
Le serveur envoie le code html, le css et le javascript sans les interpréter.

jQuery est une bibliothèque de fonctions (library en anglais) mise au point à partir de 2006 dans le but initial de manipuler facilement les propriétés css. D’où l’intérêt de vous en montrer les bases comme complément à l’apprentissage de css.

Pour démarrer

• lancer un script se fait généralement au moyen de la méthode

  $(document).ready()

• télécharger l’exemple simpliste jquery.html et tester les deux fichiers alert-ready.js et add-class.js (cet exemple est décrit dans un tutorial de la documentation de jquery).

L’idée de base et qui rend très facile l’utilisation de jQuery, c’est que pour manipuler un ou plusieurs éléments, on les désigne au moyen de sélecteurs selon la syntaxe css, comme suit:

$("div#menu a.ext").hide()

Dans cet exemple, on fait disparaître (voir les détails plus bas) tous les liens (éléments a) de classe ext dans le div d’identifiant menu.

Quelques méthodes simples

Pour des exemples plus significatifs, la documentation de l’API est très claire et fournit de nombreux exemples interactifs dont le code source se limite à quelques lignes (souvent de l’ordre de trois ou quatre).

• La doc
• pour manipuler les propriétés css (voir rubrique CSS de la doc), les méthodes
  • .addClass() (voir plus haut, exemple add-class.js)
  • .css(name, value)
  • .css({ 'name' : 'value', 'name' : 'value' , ... })
• pour gérer les événements (rubrique Events de la doc)
  • quelques exemples : .click(...), .mouseOver(), .hover(..., ...)
  • plus généralement :
    .bind('click', function() { ... })
    .unbind(), .unbind('click') etc.
• Quelques effets (rubrique Effects de la doc)
  • .hide('slow'), .show
  • .fadeIn() / Out

Les formulaires xhtml

Pour commencer

Voir le fichier formulaire.html.

Les principaux points à retenir dans cet exemple :

• il n’y a qu’un seul formulaire, défini par la balise form, et contenant plusieurs éléments de saisie
• l’élément label permet de sélectionner plus facilement un élément input: si on clique sur le label, l’input correspondant s’actionne (la correspondance est spécifiée au moyens des attributs for et id de label et input respectivement. Observez la différence entre les input Surnom et Prénom ;
• lorsque plusieurs input sont utilisés pour une même variable du formulaire, ils doivent être associés au moyen de l’attribut name (comme pour les boutons homme / femme)
• on envoie le formulaire au moyen de l’input de type submit
• Lorsqu’on clique sur homme et qu’on envoie le formulaire, cela a pour effet d’ajouter la chaîne "?sexe=homme" dans la barre d’adresse du navigateur. Ceci permettra de traiter le formulaire par la suite. Notez que les autres valeurs ne sont pas présentes

D’autres éléments de saisie

Voir les exemples donnés dans la liste de w3schools.

• cases à cocher
• listes d’options
• zones de texte
• etc.
• j’ajouterais aussi les input de type file
  (voir l’élément input pour une liste complète.)

Traitement d’un formulaire en PHP

A suivre…