[JavaScript] T12 :Comment passer des paramètres à une page web?

Pour cela on crée un formulaire dont les valeurs seront transmises automatiquement, et dans la page de destination, un script va recevoir les valeurs transmises.

Nous avons vu comment créer un formulaire, ici nous allons détailler comme extraire les données transmises.

1) Comprendre le format des paramètres d'URL

Trois symboles sont utilisés pour ajouter une chaîne de paramètres à une URL:

  ?   concatène l'URL et la chaîne de paramètres.
  &   sépare les paramètres multiples.
  =   assigne une valeur à une variable.

Exemple:

http://www.xul.fr/demo.html?login="moi"&password="1234"

Dans cet exemple, nous avons deux paramètres, login et password, auxquels sont assignés les valeurs "moi" et "1234".

2) Les valeurs sont transmises du formulaire au serveur

Il n'y a rien de particulier à faire pour envoyer les valeurs: toutes les variables et leurs valeurs dans un formulaire sont automatiquement envoyées pourvu que la propriété "action" du formulaire désigne le nom d'un fichier à charger.

L'attribut "name" de chaque élément de formulaire fournit le nom de la variable et l'attribut "value" fournit sa valeur.

<form action="param-back.html" method="GET">
...divers composants graphiques...
</form>

Voir le source du formulaire plus loin.

La méthode GET ajoute les données à l'URL, tandis que la méthode POST les transmettrait directement.

Envoyer des données sans formulaire

Si l'on veut passer des paramètres à un script ou une page sans afficher un formulaire (mais en utilisant une balise form), on utilise le champ "hidden":

<form action="autrepage.html">
    <input type="hidden" name="nomvar"  value="12345" />
</form>

Ce formulaire non apparent passera à autrepage.html l'argument nomvar=12345.

3) Récupérer les données incluses dans l'URL dans la page

L'attribut location.search contient la chaîne des paramètres, il reste à l'analyser.

Voici le code complet pour le traitement des données transmises:

<script language="JavaScript">
  function processUser()
  {
    var parameters = location.search.substring(1).split("&");

    var temp = parameters[0].split("=");
    l = unescape(temp[1]);
    temp = parameters[1].split("=");
    p = unescape(temp[1]);
    document.getElementById("log").innerHTML = l;
    document.getElementById("pass").innerHTML = p;
  }
</script>

Explications:

1. location.search est la propriété qui contient la liste des paramètres.
2. substring(1) saute le symbole ? et retourne la chaîne sans ce symbole.
3. split("&") découpe la chaîne et retourne un tableau dont les éléments sont les paramètres.
4. on assigne ce tableau à la variable "parameters". On peut alors accéder aux éléments particuliers en indiçant le tableau. Parameters[0] est le premier élément.
5. il faut encore découper le paramètre dans un autre petit tableau qui contiendra le nom de la variable et la valeur.
6. dans cet exemple, nous utilisons seulement la valeur, aussi nous indiçons le petit tableau sur le second élément, temp[1].
7. la fonction unescape convertit les caractères spéciaux.
8. on a assigné la variable l avec la valeur de login et la variable p avec le mot de passe.
9. le login est écrit dans le champ log grâce à la méthode getElementById.
10. et le mot de passe dans le champ pass.

4) Compléter la page chargée avec les données reçues

Dans cet exemple, je suppose que l'on veut écrire les données dans la page qui reçoit les données.
La variable login a été assignée dans le code précédent.
Deux champs ont été définies dans la page:

 <div id="log"></div>
 <div id="pass"></div>

Les champs sont identifiés par la propriété id. Pour les remplir avec les données, on utilise la méthode de DOM getElementById("") et la propriété innerHTML.

getElementById("log").innerHTML = login;

5) Maintenant, testons le script

Remplissez les champs ci-dessous et cliquez sur le bouton.

Login: 
Mot de passe: 

Read More

[JavaScript/HTML4]T11 :Création et utilisation d'un formulaire

HTML 4 et JavaScript permettent de réaliser une application Web de base avec les composants de formulaires.

On crée un formulaire avec la balise form

Cela se faire en insérant les balises <form> et </form> dans la section <body> de la page HTML. Mais les éditeurs de pages ont une commande pour insérer un formulaire automatiquement.
On place ensuite les objets de formulaire à l'intérieur de la balise form.

La balise form a des attributs pour l'accès dynamique dans la page par le DOM et pour l'envoi des données.

Les attributs du formulaire

id

L'identifieur unique.

name

Le nom, son rôle est équivalent à celui de l'identifieur sauf pour les fonctions du DOM, car la méthode getElementById se base sur l'id.

action

Le nom d'un script à charger lorsque l'on soumet le formulaire, avec le bouton du type submit. Noter que les noms et valeurs des composants graphiques sont donnés automatiquement en paramètres du script.

onSubmit

Evènement déclenché lorsque le formulaire est soumis et avant l'exécution de l'action. Elle peut permettre de déterminer si l'action doit être exécutée ou non.

On accède aux composants de formulaire par le DOM

Pour accéder aux éléments du formulaire en JavaScript on peut utiliser les méthodes du DOM ou chainer le nom (ou l'identifieur) des éléments et sous-éléments à partir de l'objet racine qui estdocument.
Par exemple, un formulaire à pour nom monform, il contient le bouton monbouton, et ce bouton à un libellé assigné à l'attribut value, on peut le connaître avec la chaîne:

document.monform.monbouton.value

ou l'assigner dynamiquement selon la même voie:

document.monform.monbouton.value="valeur"    

Il est possible comme on le verra dans l'exemple de bouton ci-dessous, si c'est le composant graphique lui-même qui indique au code JavaScript le nom du composant à traiter, d'utiliser le mot-cléthis, (en français ceci), donc l'objet dont l'attribut contient la référence à lui-même.

Alternativement si on a donné un identifieur à un élément, on peut y accéder par l'attribut ID:

var val = document.getElementById("xxx").value;  

Exemple simple du bouton

Les boutons sont de plusieurs types, lesquels sont spécifiés par l'attribut type: 
button, qui correspond au composant graphique,
submit, qui est associé au formulaire et qui déclenche le chargement du fichier assigné à l'attribut action.
image: le bouton est une image chargée dans un fichier.

Les attributs sont donc type, id, name et value pour un texte ou src pour une image.
L'attribut value contient le libellé qui doit être affiché sur le bouton.

Pour associer une action à un bouton simple, de type "button", on utilise l'évènement onClick auquel est assignée une fonction JavaScript.
Exemple, à l'intérieur du formulaire:

<button name="Mon-Bouton" value="Mon Bouton" onClick="click(this);" />

et dans la section HEAD, le code JavaScript:

<script language="JavaScript">
function clic(element)
{
    alert("Cliqué sur " + element.name);
}
</script>

Si l'on attribue un id au bouton, on peut accéder directement au bouton grâce à cet id et à une fonction du DOM:

<button id="monid" name="Mon-bouton" onClick="clic();" />

et dans le code JavaScript:

var id = document.getElementById("monid");
alert("Cliqué sur " + id.value);

Code complet:

<form method="GET" action="">
  <input type="button" name="Mon bouton" value="Cliquez" onClick="clic(this);">
</form>

function clic(element)
{
  alert("Cliqué sur " + element.value);
}

Exemple avec une image

On peut utiliser une image comme bouton. Le code JavaScript est inchangé, seuls changent le type du bouton, et l'attribut value est remplacé par l'attribut src pour désigner le fichier de l'image à utiliser:

<input type="image" nom="Sauvegarde" src="save.gif" onClick="click(this);" />

Code:

<form method="post" action="">
  <input type="image" name="Sauvegarde"  onClick="clic(this);" src="save.gif"/>
</form>

function clic(element)
{
  alert("cliqué sur " + element.value);
}

Exemple avec OnSubmit

Nous avons parlé de l'attribut onSubmit à propos du formulaire. Nous allons en donner un exemple d'utilisation.
Le code du formulaire:

<form name="Monform" action="hello" onSubmit="return submitcheck(this);" />

Le mot réservé return indique que l'on doit exécuter conditionnellement l'action selon la valeur vrai ou faux qui est retournée par la fonction.
Le code JavaScript simplifié (dans un exemple réel on retournerait une valeur différente selon un traitement quelconque):

function submitcheck(element)
{
   alert("L'action à exécuter est " + element.action);
   return false;
}

Code complet:

<form method="post"  onSubmit="return submitcheck(this);" >
  <input type="submit" name="Mon bouton" value="Cliquez" onClick="clic(this);">
</form>

function clic(element)
{
  alert("Cliqué sur " + element.name);
}

function submitcheck(element)
{
  alert("L'action a exécuter est " + element.action);
  return false;
}

Read More

[javaScript] T10 : Ouvrir une fenêtre en JavaScript

Pour afficher des données de façon dynamique, on peut utiliser une iframe ou ouvrir une nouvelle fenêtre. Dans le second cas on dispose d'une série d'options pour définir ce qui est affiché ou non sur la fenêtre.

Options

Ces attributs sont assignés lors de la création de la fenêtre. Ils ont la valeur yes ou no selon l'activation ou non, ou un nombre entier.

scrollbars

Vaut yes si les barres de défilement s'affichent et no sinon.

statusbar

Vaut yes ou no selon que l'on affiche la barre d'état ou non.

toolbar

Vaut yes ou no selon que l'on affiche la barre d'outils ou non.

menubar

Présenter un menu ou non.

resizable

On peut changer les dimensions ou non. Le coin inférieur droit est modifié en conséquence.

directories

Inclure les boutons de favoris.

width

Largeur de la fenêtre en pixels.

height

Hauteur en pixels.

Il n'y a pas d'option pour supprimer la barre d'adresse. C'est quelque chose de délibéré de la part des éditeurs de navigateurs, pour empêcher que les sites malveillants ne trompent sur l'origine de la page qui est affichée.

Méthodes

open(url, nom [, liste de propriétés])

Ouvre une nouvelle fenêtre. L'URL et le nom sont donnés en paramètres ainsi que la liste des options. Comme exemple d'options, on a statusbar, toolbar, scrollbar, width, height...
Les options sont encloses entre guillemets simples ou doubles, et à l'intérieur, séparées par une virgule.

close()

Ferme la fenêtre. Exemple: x.close(); window.close().

Démonstration interactive de création d'une fenêtre

Cette démonstration par l'exemple permet de définir toutes les propriétés d'une fenêtre à partir d'un formulaire et de la créer en cliquant sur un bouton.
Il s'agit d'un programme de base à adapter à votre application.

Démonstration de la méthode open de l'objet HTML window.
Sélectionner les propriétés de la fenêtre à définir et cliquer sur le bouton open Le code des options va s'affiché sous le formulaire. 

Dans cette démo, une page est chargée mais son contenu est effacé par la commande:

1	win.document.write("Hello!");

Sans cette commande la fenêtre ne reste pas affichée sous IE7. Il vous appartient d'adapter le code selon votre application.

Toolbar  Menubar  Scrollbars  Statusbar  Resizable  Directories 
Width  Height 
URL 

Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

function yesno(arg) {   if(arg) return "oui";   return "non"; }   function demo() {   var t = document.myform.checktool.checked;   var m = document.myform.checkmenu.checked;   var s = document.myform.checkscroll.checked;   var u = document.myform.checkstatus.checked;   var r = document.myform.checkresize.checked;   var d = document.myform.checkdir.checked;   var w = document.myform.wwidth.value;   var h = document.myform.wheight.value;   var options = "location=yes,toolbar=" +           yesno(t) +           ",menubar=" + yesno(m) +           ",scrollbars=" + yesno(s) +          ",statusbar=" + yesno(u) +          ",resizable=" + yesno(r) +          ",directories=" + yesno(d) +          ",width=" + w +          ",height=" + h;     var url = "window-demo.php";   var myname = "mywindow";   document.getElementById("storage").innerHTML = options;   var win = window.open(url, myname, options);   win.document.write("Hello!"); }

Read More