Programmation JavaScript cours inspiré du cours de R. Vivian.

Programmation Programmation JavaScriptJavaScript

cours inspiré du cours de R. Viviancours inspiré du cours de R. Vivian

•Intro à JSIntro à JS•Structure d’un scriptStructure d’un script•Les chaînes de Les chaînes de caractèrescaractères•Les formulairesLes formulaires•Accéder aux élémentsAccéder aux éléments•JS et les mathsJS et les maths

•AnnexesAnnexes•Trucs et astuces des Trucs et astuces des formulairesformulaires•Les tableauxLes tableaux•Le modèle objet JSLe modèle objet JS

PlanPlan Introduction à JSIntroduction à JS Structure d’un scriptStructure d’un script Les chaînes de caractèresLes chaînes de caractères Les formulairesLes formulaires Accéder aux élémentsAccéder aux éléments Le langage objet JSLe langage objet JS JS et les mathsJS et les maths JS et les cookiesJS et les cookies JS et les popupJS et les popup

AnnexesAnnexes Trucs et astuces des formulairesTrucs et astuces des formulaires Les tableauxLes tableaux Le modèle objet JSLe modèle objet JS



I. PrésentationI. Présentation JavaScript est un langage de JavaScript est un langage de

programmation complètement lié au programmation complètement lié au langage HTML.langage HTML.

Le développeur Internet code ses Le développeur Internet code ses pages HTML en y intégrant des pages HTML en y intégrant des sources JavaScript.sources JavaScript.

Le visiteur, par l'intermédiaire de son Le visiteur, par l'intermédiaire de son navigateur, navigateur, chargecharge le code des le code des pages.pages.



I. PrésentationI. Présentation C'est le navigateur qui interprète le C'est le navigateur qui interprète le

code HTML et JavaScriptcode HTML et JavaScript L'interprétation dépend L'interprétation dépend

naturellement du type de navigateur naturellement du type de navigateur utilisé et de sa versionutilisé et de sa version

JavaScript est un langage JavaScript est un langage objetobjet et et événementielévénementiel



I. PrésentationI. Présentation Le développeur crée et utilise des objets Le développeur crée et utilise des objets

ayant des ayant des propriétéspropriétés et des et des méthodesméthodes.. L'interprète gérant votre page détecte L'interprète gérant votre page détecte

automatiquement tous les automatiquement tous les événementsévénements déclenchés par le visiteurdéclenchés par le visiteur passage de sourispassage de souris clicclic saisie clavier...saisie clavier...

À ces événements sont associées des À ces événements sont associées des actionsactions

Par exemple Par exemple onClickonClick permet de spécifier permet de spécifier des actions lors d'un clic de souris sur un des actions lors d'un clic de souris sur un objet donnéobjet donné



I.1 HTML et JavaScriptI.1 HTML et JavaScript

Il y a plusieurs endroits dans Il y a plusieurs endroits dans une page web où il est possible une page web où il est possible d'intégrer du code JavaScriptd'intégrer du code JavaScript dans le corps de la page,dans le corps de la page, en entête de page,en entête de page, dans un événement d'un objet de dans un événement d'un objet de

la page.la page.

I.1 HTML et JavaScriptI.1 HTML et JavaScript<HTML><HEAD><TITLE> Titre de page </TITLE><SCRIPT language="JavaScript"> // Fin de la partie cachée</SCRIPT></HEAD> <BODY><SCRIPT type="text/JavaScript"> // Fin de la partie cachée</SCRIPT></BODY></HTML>



I.2 VariablesI.2 Variables

JavaScript utilise l'instruction JavaScript utilise l'instruction varvar pour la déclaration.pour la déclaration.

Pour Pour déclarer une variabledéclarer une variable basiquebasique ( (càd de type entier, numérique, càd de type entier, numérique,

chaîne de caractèreschaîne de caractères), il ne faut pas ), il ne faut pas déclarer le type. Le navigateur le déclarer le type. Le navigateur le détecte tout seul.détecte tout seul.

Par contre toute nouvelle Par contre toute nouvelle variable doit être initialisée.variable doit être initialisée.



I.2 Variables : ExempleI.2 Variables : Exemple

On remarque la présence du point virgule On remarque la présence du point virgule ((;;) à la fin de chaque instruction.) à la fin de chaque instruction.

Il est possible de placer sur une même Il est possible de placer sur une même ligne plusieurs instructions séparées par ligne plusieurs instructions séparées par des points virgules.des points virgules.

var prenom_visiteur="Marcel";var nom_visiteur="Dupond";var age_visiteur=29;




Une variable déjà déclarée Une variable déjà déclarée s'utilise ensuite normalements'utilise ensuite normalement

var accueil="Bonjour " + prenom + " " + nom;


•AnnexesAnnexes•Trucs et astuces des Trucs et astuces des formulairesformulaires•Les tableauxLes tableaux•Le modèle objet JSLe modèle objet JS <HTML>

<HEAD> <TITLE> Exemple 1 </TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

var bonjour = "Bonjour !";

var question = "Comment allez vous ";

var phrase = bonjour + "<BR>" + question;

window.document.write( phrase, "aujourd'hui ?" );

</SCRIPT>

</BODY>

</HTML>




<HTML>

<HEAD> <SCRIPT> function saluer() { alert("Bonjour tout le monde

!"); }</SCRIPT>

</HEAD>

<BODY>

<H4>Exécution immédiate</H4>

<SCRIPT> alert("Bonjour tout le monde !"); </SCRIPT>

<H4>Exécution sur événement onClick</H4>

<FORM>

<INPUT type="button" name="Bouton1"

value="Salut" onClick="saluer()">

</FORM>

<H4>Exécution sur protocole javascript:</H4>

<A HREF = "javascript:saluer()"> pour saluer </A>

</BODY>

</HTML>




I.3 ObjetsI.3 Objets

Les éléments manipulés par Les éléments manipulés par JavaScript et affichés dans votre JavaScript et affichés dans votre navigateur sont des navigateur sont des objetsobjets

Càd des éléments Càd des éléments Classés selon une Classés selon une hiérarchiehiérarchie pour pour

pouvoir les désigner précisémentpouvoir les désigner précisément Auxquels on associe des Auxquels on associe des

propriétéspropriétés et des et des méthodesméthodes



I.3 ObjetsI.3 Objets Cette notion est importante mais nous Cette notion est importante mais nous

allons en aborder que le strict allons en aborder que le strict nécessaire pour ce cours!nécessaire pour ce cours!

Voyons cela sur un exemple concretVoyons cela sur un exemple concret Imaginez un un jardin dans lequel on Imaginez un un jardin dans lequel on

trouvetrouve une branche sur laquelle se trouve un nidune branche sur laquelle se trouve un nid une balançoire avec un trapèze, une une balançoire avec un trapèze, une

corde et un autre nidcorde et un autre nid Une salade (ce sont des maraîchers Une salade (ce sont des maraîchers

d'occaz)d'occaz)



arbrebranche

feuille

nid

tronc

racine

Largeur 20

Color jaune

Hauteur 4

salade

balançoire

jardin

trapèze

corde

nid

Largeur 15

Color maron

Hauteur 6



I.3 ObjetsI.3 Objets Le nid sur l'arbre est donc désigné par Le nid sur l'arbre est donc désigné par

Contrairement au nid situé sur la balançoire Contrairement au nid situé sur la balançoire

Imaginez maintenant que l'on veuille Imaginez maintenant que l'on veuille changer la couleur du nid (dans l'arbre) pour changer la couleur du nid (dans l'arbre) pour le peindre en vertle peindre en vert

il suffirait de taper une commande du genreil suffirait de taper une commande du genre

C'est donc ainsi que l'on représente les C'est donc ainsi que l'on représente les objets en JavaScript, à la seule différence objets en JavaScript, à la seule différence que ce n'est pas un jardin qui est représenté que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre sous forme d'objets mais la fenêtre de votre navigateur... navigateur...

jardin.arbre.branche.nid.couleur= vert;

jardin.balançoire.nid

jardin.arbre.branche.nid



I.3 ObjetsI.3 Objets JavaScript intègre d'origine plusieurs JavaScript intègre d'origine plusieurs

type d'objets.type d'objets. L'objet le plus grand est la fenêtreL'objet le plus grand est la fenêtre

windowwindow Dans la fenêtre s'affiche une pageDans la fenêtre s'affiche une page

documentdocument ATTENTIONATTENTION, , le respect des le respect des

majuscules/minuscules est majuscules/minuscules est indispensable et source de indispensable et source de nombreuses erreursnombreuses erreurs..



Pour accéder à cet élément, on utilise la notation pointéewindow.document.form.textarea



I.3 Objets : ExempleI.3 Objets : Exemple Voyons en détail l'objet Voyons en détail l'objet DateDate, très , très

utile dans un environnement utile dans un environnement Internet.Internet. La déclaration se fait toujours avec La déclaration se fait toujours avec varvar.. Pour créer un objet, il faut utiliser le mot Pour créer un objet, il faut utiliser le mot

clé clé newnew suivi du type d'objet; ici suivi du type d'objet; ici datedate..

// crée un objet date contenant la date du jour.var date_jour=new date();// crée un objet date avec une date paramétrable. var une_date=new date(annee,mois-1,jour,heure,min) ;



<HTML>

<HEAD> </HEAD>

<BODY>

<SCRIPT>

var date_jour = new Date();

window.document.write( date_jour );

</SCRIPT>

</BODY>

</HTML>

I.3 ObjetsI.3 ObjetsAffichage de la dateAffichage de la date



I.5 FonctionsI.5 Fonctions

Les fonctions sont déclarées et Les fonctions sont déclarées et codées dans codées dans l'entête de la l'entête de la pagepage et peuvent être appelées et peuvent être appelées ensuite à n'importe quel endroit ensuite à n'importe quel endroit de la page.de la page.




Pour déclarer une fonction on Pour déclarer une fonction on utilise le mot-clé utilise le mot-clé functionfunction, suivi , suivi de son nom et des de son nom et des éventuels éventuels paramètresparamètres..

function ma_fonction(param1, param2){ ... }function mon_autre_fonction(){ ... }



I.5 FonctionsI.5 Fonctions Le corps des fonctions est délimité Le corps des fonctions est délimité

par par {{ et et }} dans lequel on place la dans lequel on place la déclaration des variables locales, déclaration des variables locales, propres à la fonction, ainsi que propres à la fonction, ainsi que l'ensemble des traitements.l'ensemble des traitements.

RemarqueRemarque non précédée de var, une variable a une non précédée de var, une variable a une

visibilité globale.visibilité globale. Précédée de var, une variable a une Précédée de var, une variable a une

visibilité limitée à la fonction ou elle a visibilité limitée à la fonction ou elle a été définie.été définie.




Une fonction aura dans son Une fonction aura dans son corps une ou plusieurs corps une ou plusieurs instructions instructions returnreturn qui qui permet(tent) de renvoyer une permet(tent) de renvoyer une valeur ou un objet. valeur ou un objet.

Une fonction sans instruction Une fonction sans instruction return est une return est une procédureprocédure..



I.5 Fonctions : ExempleI.5 Fonctions : Exemple<HTML><HEAD><SCRIPT> function bonjour(prenom) { // déclaration de la procédure document.write("Bonjour, comment vas-tu ",prenom,"?<br>"); }

function volumeSphere(rayon) { // déclaration de fonctions return 4/3*Math.PI*Math.pow(rayon,3); }

function calculerPrix(PrixUnitaire, NbArticles) { // Facturation return PrixUnitaire* NbArticles; }</SCRIPT></HEAD>

L’entêteL’entête



I.5 Fonctions : ExempleI.5 Fonctions : Exemple<BODY><SCRIPT> // appel de la procédure bonjour("Toto") ;

//appels des fonctions var montant=calculerPrix( 150 , 4) ; document.write(“Tu dois “,montant,”F.<BR>”);

document.write( "Tu dois ", calculerPrix( 150, 4), "F.<BR>");

document.write( "Volume de la sphère unité : ", volumeSphere(1)," ?<BR>" );</SCRIPT></BODY> </HTML>



II Structure d'un ScriptII Structure d'un Script

Le JavaScript a une structure de Le JavaScript a une structure de programmation proche du programmation proche du langage langage CC; moins riche ; moins riche naturellementnaturellement



II.1 Écrire un commentaireII.1 Écrire un commentaire

Indispensable les commentaires Indispensable les commentaires en programmation.en programmation.

Pour mettre en commentaire Pour mettre en commentaire une partie de code, jusqu'au une partie de code, jusqu'au prochain retour à la ligneprochain retour à la ligne

var age=25; // Ceci est en commentaire



II.1 Écrire un commentaireII.1 Écrire un commentaire

Pour mettre en commentaire Pour mettre en commentaire plusieurs lignes de codeplusieurs lignes de code

/* Ceci est en commentaire Ligne 1Ligne 2

Dernière ligne */



II.2 Grouper les instructionsII.2 Grouper les instructions

Les instructions sont regroupées Les instructions sont regroupées par les accolades par les accolades {{ et et }}..

Il doit y avoir autant d'accolades Il doit y avoir autant d'accolades ouvertes que d'accolades ouvertes que d'accolades fermées.fermées.

Le groupement d'instructions est Le groupement d'instructions est utile.utile.



II.2 Grouper les instructionsII.2 Grouper les instructions

Il permet par exemple de Il permet par exemple de regrouper les instructions d'une regrouper les instructions d'une fonctionfonction

function somme(a,b){

var sum=a+b;return sum;

}



II.3 Test ConditionnelII.3 Test Conditionnel

L'instruction L'instruction ifif permet permet d'effectuer certaines actions d'effectuer certaines actions uniquement quand un test uniquement quand un test donné a pour valeur donné a pour valeur truetrue(( vrai : valeur booléenne) vrai : valeur booléenne)




Il y a 2 moyens d'utiliser Il y a 2 moyens d'utiliser ifif Action à réaliser = une instructionAction à réaliser = une instruction

Action = plusieurs instructionsAction = plusieurs instructions

// si l'âge est inf à 18 ans, un message est affiché et// le visiteur est redirigé vers la page mineur.php3.if (age<18) {

alert("Vous devez être majeur");window.location="mineur.php3";

}

// Si l'âge est inf à 18 ans, un message est affichéif ( age < 18 ) alert( "Vous devez être majeur" );




L'instruction L'instruction ifif peut êtrepeut être complétée par l'instruction complétée par l'instruction else else pour gérer les actions à associer pour gérer les actions à associer à la valeur à la valeur falsefalse du testdu test



II.3 Test Conditionnel ExempleII.3 Test Conditionnel Exemple

<HTML><HEAD> </HEAD><BODY> <SCRIPT>

var age=15;var wl = "mineur.php3";if (age < 18)

alert(" encore un peu jeune petit");else{

alert( "c'est bon tu peux entrer"); wl = "majeur.php3";

}window.location = wl ;

</SCRIPT></BODY> </HTML>



II.4 Boucle II.4 Boucle forfor

Une boucle Une boucle forfor répèterépète un un groupe d'instructions groupe d'instructions tant quetant que la la partie condition est vraie.partie condition est vraie.

Une ou plusieurs variables Une ou plusieurs variables définissent le nombre définissent le nombre d'itérationsd'itérations

for ( initialisation; condition; incrément ){

// Vos instructions}



II.4 Boucle II.4 Boucle forfor Ces variables sont initialisées au Ces variables sont initialisées au 11erer

passagepassage puis la condition est puis la condition est évaluéeévaluée

Ensuite, Ensuite, à chaque début d'itérationà chaque début d'itération les instructions de la partie les instructions de la partie incrémentincrément sont exécutées sont exécutées En générale elles modifient les variables En générale elles modifient les variables

d'itérationd'itération Après la partie Après la partie incrémentincrément faite, la faite, la

condition est réévaluéecondition est réévaluée



II.4 Boucle II.4 Boucle forfor : Exemples : Exemples

Faire une boucle pour i variant Faire une boucle pour i variant de 0 à 100 inclus par pas de 1de 0 à 100 inclus par pas de 1

Faire une boucle pour i variant Faire une boucle pour i variant de 10 à 0 inclus par pas de -1de 10 à 0 inclus par pas de -1

for (var i=0;i<=100;i=i+1)

for (var i=10;i>0;i=i-1)



II.4 Boucle II.4 Boucle forfor : Exemple : Exemple

Voici une application Voici une application mathématique.mathématique.

Il s'agit de calculer la somme Il s'agit de calculer la somme des nombres de 1 à N.des nombres de 1 à N.

function somme(N){

var sum=0;for (var i=1;i<=N;i=i+1){

sum=sum+i;}alert("Somme de 1 à "+N+" = "+sum);

}



II.4 Boucle II.4 Boucle forfor : Astuces : Astuces

Écrire Écrire a++a++ est équivalent à est équivalent à a=a+1a=a+1

Et Et a--a-- est équivalent à est équivalent à a=a-1a=a-1 Dans la même idée, on peut Dans la même idée, on peut

aussi remplacer aussi remplacer a=a+5a=a+5 par par a+=5a+=5 Vous trouverez donc souvent Vous trouverez donc souvent

les boucles for avec cette les boucles for avec cette syntaxesyntaxe

for(var i=0;i<100;i++)



II.4 Boucle II.4 Boucle forfor : Exemple : Exemple

<HTML><HEAD> </HEAD><BODY><SCRIPT>

for(var i=0;i<10;i++){

alert(" message " + i);}

</SCRIPT></BODY> </HTML>



III Chaînes de caractèresIII Chaînes de caractères

Tous les langages de Tous les langages de programmation prévoient une programmation prévoient une gestion des chaînes de gestion des chaînes de caractèrescaractères

JavaScript est particulièrement JavaScript est particulièrement bien adapté pour le traitement bien adapté pour le traitement des chaînesdes chaînes



III.1 DéclarationIII.1 Déclaration

Pour déclarer une chaîne de Pour déclarer une chaîne de caractères, vous pouvez utiliser caractères, vous pouvez utiliser les guillemets " ou l'apostrophe 'les guillemets " ou l'apostrophe '

var chaine1="Bonjour";var chaine2='Bonjour'; // Ces deux lignes ont le même effet



III.1 DéclarationIII.1 Déclaration Cela se corse quand il s'agit d'initialiser Cela se corse quand il s'agit d'initialiser

une chaîne avec un de ces caractèresune chaîne avec un de ces caractères

Le secret est d'alterner les guillemets et Le secret est d'alterner les guillemets et les apostrophes selon les caractères les apostrophes selon les caractères spéciaux à afficherspéciaux à afficher

Il faut veillez à ne pas fermer la chaîne Il faut veillez à ne pas fermer la chaîne de caractères avant sa fin normale pour de caractères avant sa fin normale pour éviter les erreurs JavaScriptéviter les erreurs JavaScript

var chaine1="Bonjour l'ami";var chaine2='Je vous dis "Bonjour " ';



Exemple de déclaration incorrecteExemple de déclaration incorrecte

Il existe aussi une autre solutionIl existe aussi une autre solution

La variable chaine1 contient La variable chaine1 contient Je lui Je lui dis "Bonjour l'ami"dis "Bonjour l'ami"..

Javascript a interprété Javascript a interprété \"\" comme comme un guillemet.un guillemet.


var chaine1="Je vous dis "Bonjour"";// ici, le " indique la fin de chaîne

var chaine1="Je lui dis \"Bonjour l'ami\" ";



Une variable peut être transformée Une variable peut être transformée en une chaîne de caractères à tout en une chaîne de caractères à tout momentmoment

Il est possible de modifier Il est possible de modifier dynamiquement le type de la variabledynamiquement le type de la variable

A la fin de ce script, A la fin de ce script, chainechaine est un est un nombre qui vaut 3.14159 ; nombre qui vaut 3.14159 ; pipi est une est une chaînechaîne qui contient "3.14152654". qui contient "3.14152654".


var chaine="azerty";var pi=3.14159;chaine=pi;pi=pi+"2654";




La différence peut sembler sans La différence peut sembler sans importance. importance. Il n'en est rien!Il n'en est rien! Quand une variable est un Quand une variable est un

nombre, il est possible de lui nombre, il est possible de lui appliquer des opérations (addition, appliquer des opérations (addition, multiplication, ...)multiplication, ...)

Quand une variable est de type Quand une variable est de type chaîne de caractères, on peut lui chaîne de caractères, on peut lui appliquer les méthodes propres appliquer les méthodes propres aux objets chaînesaux objets chaînes



III.2 OpérationsIII.2 Opérations L'opération de base est la L'opération de base est la

concaténationconcaténation de chaînes de chaînes Elle consiste à assembler deux chaînes Elle consiste à assembler deux chaînes

en uneen une L'opérateur est le L'opérateur est le ++, à ne pas confondre , à ne pas confondre

avec l'opérateur addition qui s'applique avec l'opérateur addition qui s'applique aux nombresaux nombres

La variable La variable chainechaine contient après ce contient après ce script script "Vive le JavaScript""Vive le JavaScript". La . La concaténation est une opération simple concaténation est une opération simple et très utileet très utile

var chaine1="Vive le ";var chaine2="JavaScript";var chaine=chaine1+chaine2;



III.2 OpérationsIII.2 Opérations Une chaîne de caractères en Une chaîne de caractères en

JavaScript est un objet JavaScript est un objet stringstring sur sur lequel s'appliquent des propriétés lequel s'appliquent des propriétés et des méthodes.et des méthodes.

La propriété La propriété lengthlength indique le indique le nombre de caractères de la chaînenombre de caractères de la chaîne

chaine.lengthchaine.length retourne le nombre retourne le nombre de caractères, ici 6 caractèresde caractères, ici 6 caractères

var chaine="azerty";



III.2 OpérationsIII.2 Opérations

La méthode La méthode charAt(n)charAt(n) récupère récupère le nième caractèrele nième caractère AttentionAttention, le premier caractère a , le premier caractère a

comme indice 0comme indice 0

chaine.charAt(1)chaine.charAt(1) retourne "z" retourne "z"

var chaine="azerty"



III.2 OpérationsIII.2 Opérations

Il est utile de pouvoir extraire un Il est utile de pouvoir extraire un morceau d'une chaînemorceau d'une chaîne

La question est de récupérer le La question est de récupérer le jour, le mois et l'année dans 3 jour, le mois et l'année dans 3 variables différentesvariables différentes

var date="15/08/2000";

var jour = date.substring(0,2);var mois = date.substring(3,5);var annee = date.substring(6,10);



III.2 OpérationsIII.2 Opérations substringsubstring attend 2 paramètres attend 2 paramètres

l'indice du premier caractère (inclus),l'indice du premier caractère (inclus), l'indice du dernier caractère (exclus).l'indice du dernier caractère (exclus).

Si les deux paramètres sont inversés, Si les deux paramètres sont inversés, javascript rétablit l'ordre logiquejavascript rétablit l'ordre logique chaine.substring(6,10) chaine.substring(6,10) et et

chaine.substring(10,6)chaine.substring(10,6) sont identiques sont identiques Si le deuxième paramètre est omis, la Si le deuxième paramètre est omis, la

chaîne retournée commence à chaîne retournée commence à l'indice indiqué et se termine à la fin l'indice indiqué et se termine à la fin de la chaîne.de la chaîne.



III.2 OpérationsIII.2 Opérations Deux méthodes permettent de Deux méthodes permettent de

retrouver une sous-chaîne d'une retrouver une sous-chaîne d'une chaînechaîne

Ces méthodes retrouvent la position Ces méthodes retrouvent la position d'une chaîne et retourne son indiced'une chaîne et retourne son indice

La méthode La méthode lastindexof(souschaine)lastindexof(souschaine) retourne l'indice de la dernière occurrence retourne l'indice de la dernière occurrence de souschainede souschaine

Si la sous-chaîne n'est pas trouvé, Si la sous-chaîne n'est pas trouvé, lastindexoflastindexof retourne -1 retourne -1

var dom = "www.toutjavascript.com";var ext = domaine.substring(domaine.lastindexof("."));



III.2 OpérationsIII.2 Opérations JavaScript offre deux méthodes JavaScript offre deux méthodes

pour transformer les lettres (et pour transformer les lettres (et des lettres uniquement) d'un mot des lettres uniquement) d'un mot en majuscules ou en minusculesen majuscules ou en minuscules

A la fin de ce script, A la fin de ce script, majmaj contient contient CECI EST UN TEXTECECI EST UN TEXTE et et minmin contient contient ceci est un textececi est un texte

var chaine="Ceci est un texte";var maj=chaine.toUpperCase();var min=chaine.toLowerCase();



IV FormulairesIV Formulaires

Les formulaires sont la base des Les formulaires sont la base des échanges entre le site et le échanges entre le site et le visiteur.visiteur.

JavaScript ne peut pas JavaScript ne peut pas échanger d'information à partir échanger d'information à partir de fichier texte ou de base de de fichier texte ou de base de données.données.




JavaScript associé aux JavaScript associé aux formulaires permetformulaires permet d'assister et de guider le visiteur, d'assister et de guider le visiteur, de contrôler la saisie,de contrôler la saisie, de faire des traitementsde faire des traitements

((calcul, manipulation de chaînes de calcul, manipulation de chaînes de

caractèrescaractères), ), d'envoyer les résultats d'envoyer les résultats au serveurau serveur..




Pour intégrer des éléments de Pour intégrer des éléments de formulaire, il faut encadrer les formulaire, il faut encadrer les balises par balises par <form><form> et et </form></form>..

Dans la suite de ce document, Dans la suite de ce document, sont présentés tous les sont présentés tous les éléments de formulaire avec les éléments de formulaire avec les propriétés, les méthodes et les propriétés, les méthodes et les événements associés.événements associés.




Création de formulaire

Case à cocherRadio-bouton

TextPasswordTextarea

BoutonBouton Reset

Bouton SubmitValeur cachée



name Nom du formulaireaction Adresse du script de serveur à exécutermethod Méthode d'appel du script (get ou post)enctype Type d'encodage du formulairetarget Destination du retour du formulaire

IV.1 La balise IV.1 La balise <form><form>propriétés, méthodes, propriétés, méthodes,

événementsévénements

submit Déclenche l'action du formulaire

reset Réinitialise avec les valeurs par défaut

onSubmit Détecte la soumission du formulaire

onReset Détecte la réinitialisation



IV.1 définitions des IV.1 définitions des méthodesméthodes et et événementsévénements

Une Une méthodeméthode est une fonction (ou est une fonction (ou procédure) de procédure) de traitement de donnéestraitement de données associée à un objetassociée à un objet

Un Un événementévénement est une fonction (pas une est une fonction (pas une procédure!) toujours associée à un objet procédure!) toujours associée à un objet mais qui mais qui réagit en fonction des réagit en fonction des interventions de l'utilisateurinterventions de l'utilisateur Il utilise le clavier pour fournir des infosIl utilise le clavier pour fournir des infos Il sélectionne l'objet avec la sourisIl sélectionne l'objet avec la souris Il spécifie des valeurs de l'objet avec la sourisIl spécifie des valeurs de l'objet avec la souris

Cette notion d'événement est Cette notion d'événement est crucialecruciale car car elle est la base du fonctionnement des elle est la base du fonctionnement des pgms InterNetpgms InterNet



IV.2 L'élément IV.2 L'élément inputinput L'objet L'objet inputinput est le plus utilisé de est le plus utilisé de

tous.tous. Il permet d'afficherIl permet d'afficher

des champs texte,des champs texte, des boutons, des boutons, des radio-boutons, des radio-boutons, des cases à cocher, des cases à cocher, le champ caché, le champ caché, les boutons spéciaux les boutons spéciaux resetreset et et

submitsubmit..


•AnnexesAnnexes•Trucs et astuces des Trucs et astuces des formulairesformulaires•Les tableauxLes tableaux•Le modèle objet JSLe modèle objet JS name Nom du champ

type type du champ text, button, radio, checkbox, submit, reset

value Libellé texte

defaultvalue Valeur par défaut du champ (utile avec reset)

size Taille du champ

maxlength Taille maximale du champ de type texte

checked Case à cocher ou radio bouton coché ou non

disabled Grisé (modification impossible par le visiteur)

readOnly Lecture seule

class Nom de la classe de style

style Chaîne de caractères pour le style

IV.2 L'élément IV.2 L'élément inputinput propriétéspropriétés


•AnnexesAnnexes•Trucs et astuces des Trucs et astuces des formulairesformulaires•Les tableauxLes tableaux•Le modèle objet JSLe modèle objet JS focus Donne le focus (ou le curseur ou la main)

blur Enlève le focus

click Simule un clic (sur un bouton)

onFocus Détecte la prise de focus

onBlur Détecte la perte de focus

onClick Détecte le clic souris (sur un bouton)

onChange Détecte les changements

IV.2 L'élément IV.2 L'élément inputinput méthodes et événementsméthodes et événements



IV.2.1 Les Zones de TextesIV.2.1 Les Zones de Textes Une zone de texte est définie par la Une zone de texte est définie par la

balise balise inputinput avec un type avec un type texttext

Propriétés acceptéesPropriétés acceptées namename | | valuevalue | | defaultvaluedefaultvalue | | sizesize | |

maxlengthmaxlength | | disableddisabled | | readOnlyreadOnly | | classclass | | stylestyle

Méthodes acceptéesMéthodes acceptées focusfocus, , blurblur

Evénements acceptésEvénements acceptés onFocusonFocus, , onBluronBlur, , onChangeonChange

<input type="text">



IV.2.2 Les BoutonsIV.2.2 Les Boutons Un bouton est défini par la balise Un bouton est défini par la balise inputinput

avec un type avec un type buttonbutton

Propriétés acceptéesPropriétés acceptées namename | | valuevalue | | defaultvaluedefaultvalue | | sizesize | | maxlengthmaxlength

| | disableddisabled | | readOnlyreadOnly | | classclass | | stylestyle Méthodes acceptéesMéthodes acceptées

focusfocus | | blurblur | | clickclick Événements acceptésÉvénements acceptés

onFocusonFocus | | onBluronBlur | | onClickonClick L'événement le plus utilisé est L'événement le plus utilisé est onClickonClick car car

il détecte le clic utilisateur.il détecte le clic utilisateur.

<input type="button" value="Ceci est un bouton">



IV.2.3 Les Radio-BoutonsIV.2.3 Les Radio-Boutons

Un Un radio-boutonsradio-boutons est défini par est défini par la balise INPUT avec un type la balise INPUT avec un type "radio""radio"

Pour définir un groupe, il faut Pour définir un groupe, il faut donner le même nom (champs donner le même nom (champs namename) à tous les radios.) à tous les radios.

Ainsi, la sélection sera unique Ainsi, la sélection sera unique pour l'ensemble du groupe.pour l'ensemble du groupe.

<input type="radio" name="sexe" value="homme"> Homme<input type="radio" name="sexe" value="femme" checked>Femme



IV.2.4 les Cases à CocherIV.2.4 les Cases à Cocher

Une case à cocher est définie Une case à cocher est définie par la balise INPUT avec un par la balise INPUT avec un type type checkboxcheckbox..

Contrairement aux cases à Contrairement aux cases à cocher, il n'y a pas d'exclusion cocher, il n'y a pas d'exclusion entre les propositions.entre les propositions.




Ici, Majeur et Etudiant sont Ici, Majeur et Etudiant sont décochés à l'origine.décochés à l'origine.

Mais il est possible de n'être ni Mais il est possible de n'être ni l'un, ni l'autre, ou l'un des deux.l'un, ni l'autre, ou l'un des deux.

<input type="checkbox" name="majeur">Majeur<input type="checkbox" name="etudiant">Etudiant



IV.2.5 Le passwordIV.2.5 Le password PasswordPassword se présente comme une se présente comme une

zone de texte.zone de texte. Mais il affiche des * pour cacher le Mais il affiche des * pour cacher le

contenu du champ.contenu du champ. Il est aussi impossible de copier le Il est aussi impossible de copier le

contenu (CTRL+C).contenu (CTRL+C). Il est donc adapté à la saisie de mot Il est donc adapté à la saisie de mot

de passe.de passe.

<input type="password" name="passe" value="azerty" size=10>



IV.2.6 La valeur cachéeIV.2.6 La valeur cachée Un champ caché est destiné à Un champ caché est destiné à

transmettre des informations dans le transmettre des informations dans le formulaire, sans que le visiteur ne formulaire, sans que le visiteur ne s'en aperçoivent.s'en aperçoivent.

Cela peut être une adresse mail, un Cela peut être une adresse mail, un résultat de traitement, l'heure, un résultat de traitement, l'heure, un cookiecookie ou toute autre information. ou toute autre information.

Naturellement, le champ n'apparaît Naturellement, le champ n'apparaît pas!pas!

<input type="hidden" value="contenu caché" name="cache">



IV.2.6 La valeur cachéeIV.2.6 La valeur cachée Propriétés acceptéesPropriétés acceptées

namename | | valuevalue | | defaultvaluedefaultvalue Naturellement, toutes les Naturellement, toutes les

propriétés et les événements propriétés et les événements concernant son affichage et son concernant son affichage et son apparence sont sans effet.apparence sont sans effet.

RemarqueRemarque : : Même s'il n'apparaît Même s'il n'apparaît pas à l'écran, son contenu reste pas à l'écran, son contenu reste manipulable en JavaScript.manipulable en JavaScript.



IV.2.7 Les boutons spéciauxIV.2.7 Les boutons spéciaux

Les boutons Les boutons resetreset et et submitsubmit existent bien!existent bien!

Il faut les décrire (Je préconise Il faut les décrire (Je préconise de les éviter)???de les éviter)???

<form name="formspe" action="javascript:alert('Soumis')">

<input type="text" name="texte" value="Contenu">

< input type="checkbox" checked>Cochez moi !<BR>

< input type="reset" value="RESET">

< input type="submit" value="SUBMIT">

</form>



IV.3 Les menus de sélectionIV.3 Les menus de sélection Les listes sont définies par les Les listes sont définies par les

balises balises <select></select><select></select> Cette balise définie la zone de la Cette balise définie la zone de la

liste. Les lignes de contenu de la liste. Les lignes de contenu de la liste sont alimentées par les balises liste sont alimentées par les balises <option></option ><option></option >

<select name="mono" size=1><option value="1">ligne 1</option ><option value="2">ligne 2</option ><option value="3">ligne 3</option ><option value="4">ligne 4</option >

</select>



IV.3 Les menus de sélectionIV.3 Les menus de sélection

Les listes peuvent se présenter Les listes peuvent se présenter de plusieurs manières, selon de plusieurs manières, selon leur propriété.leur propriété. Sur une ligne : Sur une ligne : size=1size=1 Sur plusieurs lignes mono-Sur plusieurs lignes mono-

sélection : sélection : size=4size=4 Sur plusieurs lignes multi-Sur plusieurs lignes multi-

sélection sélection multiplemultiple size=4size=4



IV.3 L'élément IV.3 L'élément optionoption

L'objet L'objet optionoption est assez simple est assez simple Il peut avoir comme attributsIl peut avoir comme attributs

namename, , valuevalue, , selectedselected selectedselected force la sélection de force la sélection de

cette occurrence dans la listecette occurrence dans la liste



name Nom de la listesize Nombre de lignes à affichermultiple Sélection multiple autorisée

disabled Grisage de la listeclass Classe de feuille de stylestyle Style de la liste

IV.3 L'élément IV.3 L'élément optionoptionpropriétés, méthodes, propriétés, méthodes,


add Ajoute un ligne (objet OPTION)

remove Supprime une lignefocus Donne le focus à la listeblur Reprend le focus

onChange Détecte la sélection d'une nouvelle ligne


onBlur Détecte la perte de focus



IV.4 les zones de textes multi IV.4 les zones de textes multi lignes lignes textareatextarea

L'objet L'objet textareatextarea est est essentiellement utilisé pour essentiellement utilisé pour permettre au visiteur de saisir permettre au visiteur de saisir un texte assez long (message, un texte assez long (message, descriptif...)descriptif...)

<textarea name="texte" rows="5" cols="20">Ligne 1Ligne 2...

</ textarea >



IV.4 L'élément IV.4 L'élément textareatextareapropriétés, méthodes, propriétés, méthodes,


name Nom de la zone

rows Nombre de lignes

cols Nombre de colonnes

disabled Grisage de la zone

readOnly Lecture seule

class Classe de feuille de style

style Style de la liste

focus Donne le focus à la zone

blur Reprend le focus

onChange Détecte le changement de contenu

onScroll Détecte le défilement de la zone


onFocus Détecte la perte de focus



IV.4 L'élément IV.4 L'élément textareatextareapropriétés, méthodes, propriétés, méthodes,


Les 2 propriétés Les 2 propriétés rowsrows et et colscols qui indiquent respectivement le qui indiquent respectivement le nombre de lignes et de colonnes nombre de lignes et de colonnes de la zonede la zone

Le texte contenu dans l'élément Le texte contenu dans l'élément textareatextarea apparaît tel que dans le apparaît tel que dans le code sourcecode source

Un retour à la ligne dans le code Un retour à la ligne dans le code source crée une nouvelle ligne source crée une nouvelle ligne dans la zonedans la zone



V L'accès aux élémentsV L'accès aux éléments

Les éléments de formulaire sont Les éléments de formulaire sont des objets JavaScriptdes objets JavaScript

Voyons comment accéder via Voyons comment accéder via JavaScript aux objets d'un JavaScript aux objets d'un formulaireformulaire

Supposons le formulaire suivantSupposons le formulaire suivant

<form name="general"><input type="text" name="champ1"

value="Valeur initiale"></form>



V L'accès aux élémentsV L'accès aux éléments

general

champ1

Value = "valeur initiale"

Name = "champ1"

Type = text

Pour accéder à un objet il faut suivre sa hiérarchie.On peut comparer cela à un jeu de poupées russes .



V.1 Accéder au formulaireV.1 Accéder au formulaire Le formulaire est un élément de l'objet Le formulaire est un élément de l'objet

documentdocument Pour accéder au formulaire général, il faut Pour accéder au formulaire général, il faut

écrireécrire

formsforms est le tableau des formulaires de est le tableau des formulaires de documentdocument

On peut accéder à un formulaire parOn peut accéder à un formulaire par son nom comme indice dans son nom comme indice dans formsforms ou ou son entier comme indice dans son entier comme indice dans formsforms ou ou

Les indices des tableaux commence à 0Les indices des tableaux commence à 0 son nom tout simplementson nom tout simplement

document.forms[0] oudocument.general



V.2 Accéder à un élémentV.2 Accéder à un élément Pour accéder maintenant à la zone de Pour accéder maintenant à la zone de

texte, on écrittexte, on écrit

elementselements est le tableau de tous les est le tableau de tous les éléments du formulaireéléments du formulaire

On peut accéder à un élément parOn peut accéder à un élément par son nom comme indice dans son nom comme indice dans elementselements ou ou son entier comme indice dans son entier comme indice dans elementselements

ou ou son nom tout simplementson nom tout simplement

document.general.elements[0] oudocument.general.champ1



V.3 Manipuler les propriétés V.3 Manipuler les propriétés d'un élémentd'un élément

Par exemple, pour placer dans Par exemple, pour placer dans la zone de texte le mot la zone de texte le mot "NOUVEAU", il faut écrire"NOUVEAU", il faut écrire

document.general.champ1.value="NOUVEAU";



V.4 Appeler une méthode d'un V.4 Appeler une méthode d'un élémentélément

Pour donner le Pour donner le focusfocus au champ au champ texte du haut de cette page, il texte du haut de cette page, il faut appeler la méthode focus() faut appeler la méthode focus() sur cet élémentsur cet élément

document.general. champ1.focus()



V.5 Intégrer du JavaScript V.5 Intégrer du JavaScript dans un événementdans un événement

Un événement est déclenché Un événement est déclenché par le navigateur en réaction à par le navigateur en réaction à une action de l'utilisateur ou une action de l'utilisateur ou d'un changement quelconque d'un changement quelconque détectédétecté

L'événement le plus classique, L'événement le plus classique, appelé appelé onClickonClick, est… le clic sur , est… le clic sur un boutonun bouton




Reprenons l'exemple précédent, Reprenons l'exemple précédent, et plaçons "NOUVEAU" dans la et plaçons "NOUVEAU" dans la zone de texte du formulaire à zone de texte du formulaire à l'aide d'un boutonl'aide d'un bouton

<form name=“CHG">

<input type="text" name=“ZT“ value="Valeur initiale">

<input type="button" value="Changer la zone de texte“ onClick='document. CHG.ZT.value = “new" '>

</form>




Dans le bouton, on a rajouté Dans le bouton, on a rajouté l'événement l'événement onClickonClick qui reçoit le qui reçoit le code JavaScript à exécuter lors du code JavaScript à exécuter lors du clic sur le boutonclic sur le bouton

Le code javascript doit se mettre Le code javascript doit se mettre entre " ou entre 'entre " ou entre ' Il faut faire très attention à alterner les " Il faut faire très attention à alterner les "

et 'et ' On peut écrire On peut écrire

onClick='alert("Bonjour")'onClick='alert("Bonjour")' ouou onClick="alert('Bonjour')"onClick="alert('Bonjour')"

onClick=' document. CHG. ZT.value = “Still new" '



V.6 L'objet V.6 L'objet thisthis Il est fastidieux d'accéder aux Il est fastidieux d'accéder aux

éléments de formulaire par éléments de formulaire par toute la chaînetoute la chaîne

document.forms.elementsdocument.forms.elements Un objet JavaScript Un objet JavaScript thisthis

permet de raccourcir ce chemin permet de raccourcir ce chemin d'accèsd'accès

thisthis représente l'objet représente l'objet JavaScript JavaScript en cours d'utilisationen cours d'utilisation



V.6 L'objet V.6 L'objet thisthis exemple exemple Quand un zone de texte reçoit l'attention Quand un zone de texte reçoit l'attention

(le focus), un message apparaît dans la (le focus), un message apparaît dans la barre de statut pour indiquer son nom; le barre de statut pour indiquer son nom; le message disparaît quand le champ perd le message disparaît quand le champ perd le focusfocus

<form name="formfocus"><input type="text"

name="champtexte" value="contenu"onFocus="window.status=this.name" onBlur="window.status=''">

</form>

•La variable window.status contient le message avec le nom du champ obtenu par this.name équivalent ici à

document.formfocus.champtexte.name



V.6 L'objet V.6 L'objet thisthis exemple exemple Reprenons encore une fois notre Reprenons encore une fois notre

champ texte qui peut voir son champ texte qui peut voir son contenu changer lors du clic sur un contenu changer lors du clic sur un boutonbouton

Grâce à Grâce à this.formthis.form, on peut accéder , on peut accéder au formulaire de l'élément en coursau formulaire de l'élément en cours

Le chemin pour accéder à Le chemin pour accéder à zonedetextezonedetexte est ensuite classique est ensuite classique

<form name="mine"> <input type="text" name="zonedetexte" value="Valeur initiale"> <input type="button" value="Changer le contenu" onClick=' this.form.zonedetexte.value="NOUVEAU" '></form>



V.6 L'objet V.6 L'objet thisthis exemple exemple• Un bouton sert principalement à déclencher une action Un bouton sert principalement à déclencher une action

JavaScript.JavaScript.• Nous avons déjà vu dans le paragraphe Nous avons déjà vu dans le paragraphe Intégrer du JavaScript Intégrer du JavaScript

dans un événementdans un événement comment détecter le click sur un bouton comment détecter le click sur un bouton• La propriété La propriété valuevalue contient le libellé du bouton. contient le libellé du bouton.• Comme pour une zone de texte, ce libellé est accessibleComme pour une zone de texte, ce libellé est accessible

• checkedchecked est de type booléen est de type booléen– Il contient Il contient truetrue si l'objet est si l'objet est cochécoché et et falsefalse sinon. sinon.

<form><form> <input type="checkbox" name="majeur">Majeur <input type="checkbox" name="majeur">Majeur <input type="checkbox" name="etudiant">Etudiant <input type="checkbox" name="etudiant">Etudiant <input type="button" value="Tester" <input type="button" value="Tester" onClick="alert('Majeur : ' +onClick="alert('Majeur : ' + this.form.majeur.checked + this.form.majeur.checked + '\nEtudiant : ' +'\nEtudiant : ' + this.form.etudiant.checked);" >this.form.etudiant.checked);" ></form></form>



V.7 Accéder auxV.7 Accéder auxzones de textezones de texte

La principale action en JavaScript sur La principale action en JavaScript sur une zone de texte est de manipuler son une zone de texte est de manipuler son contenucontenu

Imaginons un formulaire appelé myform Imaginons un formulaire appelé myform qui possède un champ texte appelé qui possède un champ texte appelé myfieldmyfield

On accède au contenu du champ parOn accède au contenu du champ par

Il faut bien penser à ajouter la propriété Il faut bien penser à ajouter la propriété value value pour accéder au contenupour accéder au contenu

document. myform. myfield.value



V.8 Accéder auxV.8 Accéder auxradio-boutonsradio-boutons

<form>

<input type="radio" name="os" value="WXP" checked> WindXP < input type="radio" name="os" value="Linux"> Linux < input type="radio" name="os" value="Autre"> Autre

// le bouton défini précédemment < input type="button" value="Tester“ onClick="testerRadio(this.form.os)">

// une fct de consultation du groupe 'radio' de radio-boutons <script language="javascript"> function testerRadio(radio) { for (var i=0; i<radio.length;i++) { if (radio[i].checked) { alert("Système = "+radio[i].value) } } } </script>

</form>



V.9 Accéder auxV.9 Accéder aux menus de sélection menus de sélection

<select name="liste" size=1> <option value="valeur ligne 1">Libellé ligne 1 </option> <option value="valeur ligne 2">Libellé ligne 2 </option> <option value="valeur ligne 3">Libellé ligne 3 </option> <option value="valeur ligne 4">Libellé ligne 4 </option></select>

name Nom de la liste

selectedIndex Indice de la ligne sélectionnée(ligne 1 : indice=0)

options Tableau des lignes

length Nombre de lignes

value Valeur d'une ligne

text Libellé d'une ligne



V.9 Accéder auxV.9 Accéder auxmenus de sélectionmenus de sélection

Pour récupérer l'indice la ligne Pour récupérer l'indice la ligne sélectionnéesélectionnée

this.form. liste.selectedIndexthis.form. liste.selectedIndex Pour récupérer le nombre de Pour récupérer le nombre de

ligneslignesthis.form.liste.options.lengththis.form.liste.options.length

Pour récupérer la valeur de la Pour récupérer la valeur de la ligne sélectionnéeligne sélectionnée

this.form.liste.options[this.form.liste.selectedIndex].value



V.10 Accéder auxV.10 Accéder auxtextareatextarea

Une zone de texte multi-lignes a comme Une zone de texte multi-lignes a comme propriété principale propriété principale valuevalue qui contient le texte qui contient le texte de la zonede la zone

Pour récupérer le contenu de la zone, on Pour récupérer le contenu de la zone, on utiliseutilise

document.nom. zone.valuedocument.nom. zone.value Afin de pouvoir traiter la chaîne résultante, il Afin de pouvoir traiter la chaîne résultante, il

faut traduire l'ensemble de scaractères faut traduire l'ensemble de scaractères spéciaux (RC, #, LF, …) en un spéciaux (RC, #, LF, …) en un code code compréhensiblecompréhensible La fonction La fonction escape(car)escape(car) retourne le code retourne le code

correspondant à correspondant à carcar La fonction La fonction unescape(code)unescape(code) retourne le caractère retourne le caractère

correspondantcorrespondant Par exemple Par exemple escape("#")escape("#") retourne retourne "%23""%23" et et

unescape("%23")unescape("%23") retourne retourne "#""#"



VII.1 Conversion chaîne de VII.1 Conversion chaîne de caractères en nombrescaractères en nombres

Les variables ne sont pas Les variables ne sont pas typéestypées

Mais il est utile de savoir Mais il est utile de savoir transformer une chaîne en un transformer une chaîne en un entier ou un réel (nombre à entier ou un réel (nombre à virgule)virgule)

Imaginons ce scriptImaginons ce script

var chaine="3.14";var entier=parseInt(chaine);var reel=parseFloat(chaine);



VII.2 L'objet VII.2 L'objet MathMath

La plupart des fonctions La plupart des fonctions mathématiques sont des mathématiques sont des méthodes de l'objet méthodes de l'objet MathMath

Retourne une valeur entre 0 et 1Retourne une valeur entre 0 et 1var nb=Math.random();



Math.abs(a) Retourne la valeur absolue de a

Math.round(a) Retourne l'entier arrondi le plus proche de a

Math.ceil(a) Retourne l'entier immédiatement supérieur (ou égal) à a

Math.floor(a) Retourne l'entier immédiatement inférieur (ou égal) à a

Math.sqrt(a) Retourne la racine carrée de a

Math.log(a) Retourne le logarithme de a

Math.ln(a) Retourne le logarithme népérien de a

Math.exp(a) Retourne l'exponentielle de a

Math.pow(a,b) Retourne a à la puissance b

Math.min(a,b) Retourne le plus petit des paramètres a ou b

Math.max(a,b) Retourne le plus grand des paramètres a ou b

VII.3 L'objet Math et VII.3 L'objet Math et ses méthodesses méthodes



VII.3 L'objet Math et VII.3 L'objet Math et ses méthodesses méthodes

Math.cos() Retourne le cosinus d'un angle en radians

Math.sin() Retourne le sinus d'un angle en radians

Math.tan() Retourne la tangente d'un angle en radians

Math.acos() Retourne l'arc cosinus en radians

Math.asin() Retourne l'arc sinus en radians

Math.atan() Retourne l'arc tangente en radians



A.1 Introduction Nous allons voir de nombreuses Nous allons voir de nombreuses

astuces pour rendre un formulaire astuces pour rendre un formulaire dynamique et attractif, en réaction dynamique et attractif, en réaction aux événements générés par aux événements générés par l'utilisateurl'utilisateur

Il est nécessaire de bien connaître Il est nécessaire de bien connaître le principe des formulaires HTML le principe des formulaires HTML pour tirer partie de ces astuces.pour tirer partie de ces astuces.



A.2 Donner le focusà un élément

Le premier champ texte a le Le premier champ texte a le focus au chargement de la pagefocus au chargement de la page

Cliquez sur les boutons pour Cliquez sur les boutons pour donner le focus aux autres donner le focus aux autres élémentséléments

La prise de focus est possible La prise de focus est possible pour tous les types d'objetspour tous les types d'objets



A.2 Donner le focusà un élément

<BODY onLoad="document.form1.champ1.focus();"> <FORM name="form1">

<INPUT type="texte" name="champ1">

<INPUT type="button" value="suivant" onClick="this.form.champ2.focus()"><p>

<SELECT name="champ2" > <OPTION>Ceci est la ligne n° 1</OPTION> <OPTION>Ceci est la ligne n° 2</OPTION> </SELECT>

<INPUT type="button" value="suivant“ onClick="this.form.champ3.focus()"><p>

<TEXTAREA rows="2" cols="15" name="champ3"></textarea>

<INPUT type="button" value="valider">

</FORM></BODY>



A.3 Changer le libelléA.3 Changer le libellé

<FORM name="form2">

<INPUT type="button" name="bouton" value='Cliquez-moi !‘ onClick="this.value='Touché !'">

</FORM>



A.4 Autoriser un seul clicA.4 Autoriser un seul clic

Accepte le premier clic sur le Accepte le premier clic sur le bouton et empêche les suivantsbouton et empêche les suivants

Utile pour éviter de recevoir 3 Utile pour éviter de recevoir 3 fois le même message quand un fois le même message quand un visiteur visiteur bégaiebégaie sur le bouton sur le bouton "Envoyer" !"Envoyer" !



A.4 Autoriser un seul clicA.4 Autoriser un seul clic

<SCRIPT language="javascript">

var nbclic=0 // Initialisation à 0 du nombre de clic

function CompteClic(formulaire) { // Fonction appelée par le bouton nbclic++; // nbclic+1 if (nbclic>1) { // Plus de 1 clic alert("Vous avez déjà cliqué"); } else { alert("Premier Clic."); } // 1 seul clic }

</SCRIPT>

<INPUT type="button" name="bouton" value="Cliquez" onClick="CompteClic(this.form)">



A.5 Valider un formulaireA.5 Valider un formulaire

Il est souvent utile de vérifier la Il est souvent utile de vérifier la saisie d'un formulaire avant de saisie d'un formulaire avant de le validerle valider

L'idéal est de créer un bouton L'idéal est de créer un bouton (de type "button" et pas (de type "button" et pas "submit") qui appelle une "submit") qui appelle une fonction javascript qui contrôle fonction javascript qui contrôle la saisie et soumet ou non le la saisie et soumet ou non le formulaireformulaire



A.5 Valider un formulaireA.5 Valider un formulaire

Voyons un exple de saisie d'un Voyons un exple de saisie d'un emailemail

<FORM name="form4" action="mailto:[email protected]" method="post">


function ValiderMail(formulaire) { if( formulaire.mail.value.indexOf( "@", 0 ) < 0 ) { alert("Adresse mail saisie invalide.\nLe formulaire ne sera pas validé.") ; } else { alert("Formulaire validé.\nPour valider un formulaire : formulaire.submit()"); formulaire.submit(); // Pour valider le formulaire en javascript } }</SCRIPT> <INPUT type="texte" name="mail"><INPUT type="button" name="bouton" value="Valider"

onClick="ValiderMail(this.form)">

</FORM>



A.6 Vider un champA.6 Vider un champà la prise de focusà la prise de focus

<FORM name="form5">

<INPUT type="texte" name="login" value='Votre login' onFocus='this.value=""; ' >

</FORM>



A.7 DétecterA.7 Détecterla touche Entréela touche Entrée

Utile dans les formulaires de Utile dans les formulaires de recherche, où la plupart des recherche, où la plupart des utilisateurs tapent [Entrée] pour utilisateurs tapent [Entrée] pour valider la recherche, sans cliquer sur valider la recherche, sans cliquer sur le bouton "Rechercher"le bouton "Rechercher"

L'appui sur [Entrée] déclenche la L'appui sur [Entrée] déclenche la soumission du formulaire qu'il est soumission du formulaire qu'il est possible de détecter avec possible de détecter avec l'événement onSubmitl'événement onSubmit

<FORM name="formulaire" onSubmit="maFonction()">



A.8 Empêcher la saisieA.8 Empêcher la saisied'un champd'un champ

Dès que la curseur souris arrive sur Dès que la curseur souris arrive sur ce champ, il est enlevéce champ, il est enlevé

Cela rend impossible la saisie ou la Cela rend impossible la saisie ou la modification de son contenumodification de son contenu

L'astuce est d'utiliser l'événement L'astuce est d'utiliser l'événement onFocusonFocus qui détecte l'arrivée du qui détecte l'arrivée du curseur dans le champcurseur dans le champ

<INPUT type="text" value="Non modifiable" name="champ"

onFocus="this.blur()">

<INPUT type="text" value="Non modifiable" name="champ"

onFocus="this.form.champ2.focus()">



I.4 TableauxI.4 Tableaux

En JavaScript, les tableaux sont En JavaScript, les tableaux sont des objets.des objets.

Leurs déclarations sont identiques Leurs déclarations sont identiques à celles vues précédemment.à celles vues précédemment.

// tableau de 10 éléments de type basique//(réel, entier, chaîne de caractères).var un_tableau = new Array( 10) ;




En JavaScript, le premier En JavaScript, le premier élément d'un tableau est indexé élément d'un tableau est indexé à à 00

Il est possible de déclarer un Il est possible de déclarer un tableau sans fixer sa dimensiontableau sans fixer sa dimension

Alors la taille du tableau Alors la taille du tableau s'adapte au fur et à mesure à s'adapte au fur et à mesure à son contenuson contenu

var un_autre_tableau=new Array;




Pour accéder aux éléments du Pour accéder aux éléments du tableau, on utilise les crochets tableau, on utilise les crochets [[ et et ]]

un_tableau[0]=10;un_tableau[9]=5;un_tableau[9]=un_tableau[0]-5 ;




Des Des méthodesméthodes associées à associées à l'objet permettent d'effectuer des l'objet permettent d'effectuer des traitements ou d'accéder à des traitements ou d'accéder à des propriétés.propriétés.

On utilise la On utilise la notation pointéenotation pointée pour appliquer une méthode sur pour appliquer une méthode sur un objet ou pour accéder à une un objet ou pour accéder à une propriété.propriété.

// Le nbre d'éléments de l'objet Array un_tableau

var dimension = un_tableau.length;



I.4 Tableaux : ExempleI.4 Tableaux : Exemple

<HTML><HEAD> </HEAD><BODY> <SCRIPT>

var un_tableau=new Array(10) ; var dimension=un_tableau.length;

document.write(dimension);

</SCRIPT> </BODY> </HTML>



I.4 Tableaux : ExempleI.4 Tableaux : Exemple

<HTML><HEAD> <H1> Tableau des 4 saisons </H1> </HEAD><BODY> <SCRIPT> var Les4saisons = new Array("printemps", "été", "automne", "hiver");

document.write("<BR>", "Voici les 4 saisons : <OL>");

for (i=0 ; i<4 ; i++) { document.write("<LI>", Les4saisons[i] ); }

document.write("</OL>"); </SCRIPT> </BODY> </HTML>



JavaScript a une gestion particulière des tableaux. Un tableau est un objet Array.

3 Les tableaux Javascript

3.1 La déclaration de tableaux

C'est quoi un tableau ?

Les tableaux sont des éléments indispensables de la programmation. Un tableau est une structure ordonnée permettant de recevoir des informations. Les jours de la semaine peuvent être stockés en mémoire dans un tableau. Le tableau en mémoire peut être comparé au tableau réel:

Indice 1 2 3 4 5 6 7

Contenu Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

L'intérêt premier du tableau est de permettre un accès à une information par son indice. Par exemple, le premier élément de ce tableau contient "Lundi". Le paragraphe suivant montre comment remplir un tableau.



Déclaration de base

Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser

l'instruction new :

(Var) tab=new Array;

La variable tab a maintenant la structure d'un tableau. Elle possède les propriétés

et les méthodes des tableaux et est prête à recevoir le contenu du tableau. En

javascript, comme dans la plupart des langages de programmation, le premier

élément du tableau commence à l'indice 0 (comme en C). C'est un peu gênant,

mais on commence a avoir l’habitude.

Pour alimenter le tableau avec les jours de la semaine, on écrit le code suivant :

tab=new Array;

tab[0]="Lundi";

tab[1]="Mardi";

tab[2]="Mercredi";

tab[3]="Jeudi";

tab[4]="Vendredi";

tab[5]="Samedi";

tab[6]="Dimanche";

var longueur = tab.length;



Maintenant, le tableau est initialisé avec les jours de la semaine. La variable

longueur contient 7 : il y a 7 éléments dans le tableau de l'indice 0 à l'indice 6 (soit

7-1). Si on accède à un élément dont l'indice n'existe pas, javascript retourne

undefined. Par exemple, tab[10] n'existe pas, cet élément vaut undefined.

Exercice : Écrire un programme qui trie un tableau contenant des noms d’animaux. Il est possible de comparer les contenus de cellule par un simple test de supériorité comme sur des valeurs numériques.



<HTML>

<HEAD>

<TITLE>Tri d'un tableau par une méthode peu astucieuse</TITLE> </HEAD>

<BODY>

<script language="JavaScript">

animaux= new Array(7)

animaux[0] = "chien"

animaux[1] = "autruche "; animaux[2] = "wapiti"

animaux[3] = "dromadaire "; animaux[4] = "lynx"

animaux[5] = "belette" ; animaux[6] = "lapin"

document.write("<H3>Tri d'un tableau</H3>")

for (i=0; i<6; i++)

for (j=i+1; j<7; j++)

if (animaux[j] < animaux[i])

{ provisoire = animaux[i]

animaux[i] = animaux[j]

animaux[j] = provisoire

}

for (i=0; i<7;)

document.write(animaux[i++] + "<BR>")

</script>

</BODY>

</HTML>



3.2 Les tableaux spéciaux

Nous avons vu comment créer un tableau simple à une seule dimension. C'est la

base de tous les tableaux possibles en javascript.

DDans certains cas, un indice numérique est moins pratique ou moins explicite qu'un indice sous forme de texte. Par exemple, imaginons que pour chaque jour de la semaine on ait une page spéciale à charger :

- samedi et dimanche = weekend.html

- mercredi = enfant.html

- les autres jours = travail.html

I

l pourrait être intéressant d'avoir un tableau de ce type :



Indice Lundi Mardi Mercredi Jeudi Vendredi Samedi Dimanche

Contenu travail travail enfant travail travail weekend weekend

Qui serait déclaré ainsi en javascript :var tab=new Array;tab["Lundi"]=" travail ";tab["Mardi"]=" travail ";tab["Mercredi"]="enfant";tab["Jeudi"]=" travail ";tab["Vendredi"]=" travail ";tab["Samedi"]="weekend";tab["Dimanche"]="weekend";

Grâce à cette déclaration un peu spéciale, on accède aux éléments du tableau par le jour de la semaine.



Les tableaux d'objets Pour l'instant, les tableaux que nous avons vus contenaient des valeurs basiques

(chaînes de caractères ou nombres). Il est possible d'associer à un élément de tableau un objet javascript complexe. Imaginons un tableau contenant tous vos animaux domestiques. Un animal domestique est décrit par :

- son nom- son espèce- son âge Voici la fonction qui construit un animal en mémoire :

function Animal(un_nom,une_espece,un_age) {this.nom=un_nom;this.espece=une_espece;this.age=un_age;}



On peut créer les animaux en appelant la fonction Animal :

var milou=new Animal("Milou","Chien","4")

var titi=new Animal("Titi","Canari","1")

var rominet=new Animal("Rominet","Chat","2")

On a maintenant en mémoire 3 variables correspondant à nos 3 animaux: milou,

titi et rominet

Attention : il ne faut pas confondre les variables en minuscules avec le nom de

l'animal qui est une chaîne de caractères et qui comporte une majuscule !

Il ne reste qu'à créer le tableau animaux :

var animaux=new Array;

animaux[0]=milou;

animaux[1]=titi;

animaux[2]=rominet;



Ici, le premier élément du tableau animaux contient un objet, la variable milou.

Il ne faut pas mettre de guillemet autour de milou : ce n'est pas une chaîne de

caractères, mais un nom de variable.

Pour accéder à l'objet premier animal (indice 0), on écrit : animaux[0]

Pour accéder à ses propriétés, on utilise la notion pointée :

animaux[0].nom

animaux[0].espece

animaux[0].age



<HTML>

<HEAD>

<TITLE>Petite zoologie portative</TITLE>

<script language="JavaScript">

function ANIMAL(genre, ordre, famille)

{ this.genre = genre; this.ordre = ordre; this.famille = famille

}

animal = new Array()

animal["rat"] = new ANIMAL("Mammifères", "Rongeurs", "Omnivores")

animal["porc"] = new ANIMAL("Mammifères", "Pachydermes", "Suidés")

animal["chat"] = new ANIMAL("Mammifères", "Carnassiers", "Carnivores")

animal["aigle"] = new ANIMAL("Oiseaux", "Rapaces", "Faucons")

animal["carpe"] = new ANIMAL("Cyprins", "Malacoptérygiens", "Cyprinoïdes")

animal["canard"]= new ANIMAL("Oiseaux", "Palmipèdes", "Lamellirostres")

animal["ours"] = new ANIMAL("Mammifères", "Carnassiers", "Carnivores")

animal["grenouille"] = new ANIMAL("Batraciens", "Anoures", "Rainettes")

Gros exemple



function recherche(bete)

{ bete = bete.toLowerCase() // Pour mettre les caractères en minuscule

if (typeof animal[bete] == "undefined") // On vérifie que l'on est bien dans le tableau

{ alert(" Animal non trouvé ");

} // Affichage des caractéristiques

document.forms[0].elements[2].value = animal[bete].genre

document.forms[0].elements[3].value = animal[bete].ordre

document.forms[0].elements[4].value = animal[bete].famille

}

</script>



</HEAD> <BODY><H2>Petite zoologie portative</H2><FORM>Nom de l'animal :<INPUT TYPE="text" VALUE="" SIZE="10"><INPUT type="button" VALUE="Afficher" onClick="recherche(document.forms[0].elements[0].value)"><P><PRE>Genre : <INPUT TYPE="text" VALUE="" SIZE="20">Ordre : <INPUT TYPE="text" VALUE="" SIZE="20">Famille : <INPUT TYPE="text" VALUE="" SIZE="20"></PRE></FORM><HR></BODY></HTML>



Les tableaux à plusieurs dimensions

On vient de voir qu'il est possible de créer des tableaux d'objets. Or un tableau est

aussi un objet javascript Array. Il est donc possible de créer des tableaux de

tableaux, ce qui correspond à des tableaux à plusieurs dimensions. Le nombre de

dimensions d'un tableau n'est pas limité; mais nous allons traiter un exemple

simple et concret à deux dimensions. Imaginons un jeu de morpion. La zone de

jeu est un plateau de 3 par 3. Supposons cette grille à un moment donné de la

partie :

2102XO1OX0X

Cette grille est bien un tableau à 2 dimensions. Décidons, par convention,

d'indicer d'abord la colonne puis la ligne. Ainsi, la case[0,0] coin supérieur gauche

est vide, la case [0,2] coin inférieur gauche contient "O", la case[2,0] coin

supérieur droit contient "X".



Comment faire pour créer un tableau javascript de ce type ?

On va créer un tableau de 3 colonnes ; une colonne étant un tableau de 3 cases.

D'abord on crée les 3 colonnes :

var col0=new Array; col0[0]=" "; col0[1]="X"; col0[2]="O";

var col1=new Array; col1[0]=" "; col1[1]="O"; col1[2]="X";

var col2=new Array; col2[0]="X"; col2[1]=" "; col2[2]=" ";

Ensuite le tableau morpion :

var morpion=new Array;

morpion[0]=col0; morpion[1]=col1; morpion[2]=col2;

Pour accéder à l'élément [0,2], on écrit simplement :

morpion[0][2]

Afficher l’exemple (très modeste) du morpion (v=vide)



Un exemple utile Les tableaux sont utilisés dans la plupart des scripts du site. Voici quelques

scripts simples qui montrent bien l'emploi des tableaux.

Formatage de dateLe formatage de dates est un bon exemple d'utilisation des tableaux. Le

navigateur peut retourner le numéro du jour et du mois en cours. Avec ces indices, on peut aller rechercher le libellé en français du jour et du mois.

var dt=new Date;var jour=dt.getDay( );var nu=dt.getDate( );var mois=dt.getMonth( );Var tabjr=new

Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");var tabmois=new

Array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet", "Août","Septembre","Novembre","Décembre");document.write("Nous sommes le "+tabjr[jour]+" "+nu+" "+tabmois[mois]); Voici le résultat de ce script : Nous sommes le date . La méthode getDay() retourne le numéro du jour de la semaine, 0 pour le

dimanche à 6 pour samedi. La méthode getMonth() retourne le numéro du mois, 0 pour Janvier à 11 pour Décembre. Ici, on affiche le jour et le mois correspondant aux indices retournés.



VI.1 IntroductionVI.1 Introduction

JavaScript est un langage ObjetJavaScript est un langage Objet Cette approche permet de Cette approche permet de

développer des scritps développer des scritps réutilisables évolutifs et réutilisables évolutifs et paramétrablesparamétrables

Ce chapitre présente les Ce chapitre présente les principes généraux de la principes généraux de la programmation objetprogrammation objet



VI.2 DéclarationVI.2 Déclaration

On utilise l'instruction new à On utilise l'instruction new à laquelle on adjointlaquelle on adjoint soit un type d'objet prédéfini soit un type d'objet prédéfini

(Date, Array, ...)(Date, Array, ...) soit une instruction qui permet de soit une instruction qui permet de

créer les propriétés de cet objetcréer les propriétés de cet objet



// l'objet Date est prédéfine au sein de l'interprète var fetnat=new Date(14;07;2003);

// Chein est un type créé de toute piècevar mon_chien=new Chien("Milou","Fox Terrier");

function Chien(le_nom,la_race) {this.nom=le_nom;this.race=la_race;

}

VI.2 Déclaration : ExempleVI.2 Déclaration : Exemple

L'instruction L'instruction ChienChien fait appel au mot fait appel au mot thisthis qui qui représente l'objet en cours (ici, représente l'objet en cours (ici, mon_chienmon_chien))



VI.2 Déclaration : ExempleVI.2 Déclaration : Exemple La variable La variable mon_chienmon_chien est est

maintenant un objet de type maintenant un objet de type chien qui contient les propriétés chien qui contient les propriétés nom et racenom et race

Naturellement, il est possible de Naturellement, il est possible de rajouter des propriétés très rajouter des propriétés très facilement, sans se soucier des facilement, sans se soucier des questions d'indices questions d'indices qu'imposerait un tableau du typequ'imposerait un tableau du type



<HTML><HEAD> <TITLE> woua woua </TITLE> <SCRIPT LANGUAGE = "JavaScript"> function Chien(le_nom,la_race) { this.nom=le_nom; this.race=la_race; } </SCRIPT></HEAD>

<BODY BGCOLOR="white"> <SCRIPT LANGUAGE = "JavaScript"> var mon_chien = new Chien("Milou","Fox Terrier"); document.write(mon_chien.nom + " est un "+mon_chien.race); </SCRIPT></BODY></HTML>

VI.2 Déclaration : ExempleVI.2 Déclaration : Exemple



VI.3 L'utilisation des méthodesVI.3 L'utilisation des méthodes Lors de la création d'un objet, Il est Lors de la création d'un objet, Il est

également possible d'associer des également possible d'associer des méthodes à celui-ciméthodes à celui-ci

La déclaration des méthodes se fait La déclaration des méthodes se fait pendant la création de l'objetpendant la création de l'objet

function Chien(le_nom,la_race) {

this.nom=le_nom;this.race=la_race;this.Afficher=AfficherChien;

}function AfficherChien(){

alert("Ce chien s'appelle " + this.nom +".\n C'est un "+this.race+".");

}



VI.3 le VI.3 le withwith

On remarque encore l'utilisation On remarque encore l'utilisation de de thisthis qui représente l'objet sur qui représente l'objet sur lequel est appliquée la méthodelequel est appliquée la méthode

Il est possible aussi de déclarer Il est possible aussi de déclarer la fonction avec le mot la fonction avec le mot withwith

function AfficherChien() { with( this ) alert("Ce chien s'appelle " + this.nom + ".\nC'est un "+this.race+".");}

JavaScript et JavaScript et les cookiesles cookies

Chapitre VIIIChapitre VIII



VIII.1 À quoi servent-ils ?VIII.1 À quoi servent-ils ? Les cookies sont très utilisés, par tous les sites Les cookies sont très utilisés, par tous les sites

commerciaux et par de plus en plus de sites personnelscommerciaux et par de plus en plus de sites personnels La raison est simple. Un cookie permet de stocker de La raison est simple. Un cookie permet de stocker de

manière permanente des informations sur le poste du manière permanente des informations sur le poste du visiteur, qui pourront être récupérées lors des futures visiteur, qui pourront être récupérées lors des futures visitesvisites

Voyons quelques unes des principales informations Voyons quelques unes des principales informations stockées dans les cookiesstockées dans les cookies Le nombre de visites, la date de la dernière visite,Le nombre de visites, la date de la dernière visite, Un identifiant et un mot de passe pour une Un identifiant et un mot de passe pour une

reconnaissance automatique du visiteur.reconnaissance automatique du visiteur. Une liste de mots-clés utilisés dans les moteurs de Une liste de mots-clés utilisés dans les moteurs de

recherche pour cibler les publicités à afficher (Exemple : recherche pour cibler les publicités à afficher (Exemple : beaucoup de moteurs de recherche) beaucoup de moteurs de recherche)

Une liste de paramètres de préférences de navigation Une liste de paramètres de préférences de navigation pour personnaliser la page présentée (Exemple : Mon pour personnaliser la page présentée (Exemple : Mon Yahoo !) Yahoo !)

Des informations à transférer d'une page à l'autre du site. Des informations à transférer d'une page à l'autre du site.



VIII.2 Comment stockerVIII.2 Comment stockerles informations ?les informations ?

Le type d'informations à stocker Le type d'informations à stocker n'a aucune influence sur le coden'a aucune influence sur le code

Un cookie est un fichier de texte Un cookie est un fichier de texte qui contient une chaîne de qui contient une chaîne de caractères représentant les caractères représentant les informationsinformations




function SetCookie (name, value){

// récupérer les paramètresvar argv=SetCookie.arguments;var argc=SetCookie.arguments.length;

var expires=(argc > 2) ? argv[2] : null; // date d'expir.var path=(argc > 3) ? argv[3] : null; // le cheminvar domain=(argc > 4) ? argv[4] : null; // domain namevar secure=(argc > 5) ? argv[5] : false; // protection du cookies

document.cookie=name+"="+escape(value)+ ((expires==null) ? "" : ("&expires="+expires.toGMTString()))+ ((path==null) ? "" : ("&path="+path))+ ((domain==null) ? "" : ("&domain="+domain))+ ((secure==true) ? "&secure" : "");

}




var MyPathname=location.pathname;var MyDomain=MyPathname.substring(0,pathname.lastIndexOf('/')) +'/';var date_exp = new Date();

date_exp.setTime(date_exp.getTime()+(365*24*3600*1000));

// Ici on définit une durée de vie de 365 joursSetCookie("prenom","Arthur",date_exp,MyPatname,MyDomain);

JavaScript et JavaScript et les PopUples PopUp

Chapitre IXChapitre IX



La valeur à stocker est associée à un nom de cookie. La date d'expiration permet de définir la

longévité du cookie. Si elle est omise, le cookie est détruit à la fermeture du navigateur. Le path

indique simplement d'où vient le cookie. Le nom de domaine permet d'identifier le cookie

parmi tous ceux stockés sur la machine. La variable secure indique si l'accès au cookie est

protégé. Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la

fonction comme ceci :



8.3 Comment RECUPERER les informations ?

Voyons un cookie qui contiendrait les informations suivantes :

· prenom = Arthur

· nb_visite = 3

Pour récupérer l'information prenom, il faut extraire, de la chaîne de caractères composant le cookie, le nom de la

variable soit prenom. La valeur de prenom est la chaine de caractères située immédiatement après et séparée par ';' et par ' '.

Voici le code des fonctions nécessaires à la récupération d'une information :

function getCookieVal(offset)

{

var endstr=document.cookie.indexOf (";", offset);

if (endstr==-1) endstr=document.cookie.length;

return unescape(document.cookie.substring(offset, endstr));

}



function GetCookie (name)

{

var arg=name+"=";

var alen=arg.length;

var clen=document.cookie.length;

var i=0;

while (i<clen) {

var j=i+alen;

if (document.cookie.substring(i, j)==arg)

return getCookieVal (j);

i=document.cookie.indexOf(" ",i)+1;

if (i==0) break;}

return null;

}

Si la variable demandée n'est pas contenue dans le cookie, elle est considérée comme valant null. Pour

récupérer la variable prenom, il suffit d'appeler la fonction :

le_prenom=GetCookie("prenom");



10.1 C'est quoi une popup ?

Le mot popup peut être traduit par fenêtre surgissante. L'ouverture de cette fenêtre est déclenchée

par un événement utilisateur (clic, ouverture de site, minuterie, ...) via une seule ligne de code

javascript. Un popup est ouvert grâce à la méthode (ou fonction) appelée sur l'objet window.

Cette fonction attend 3 paramètres : window.open( page [,nom] [,options] )

10 Les POPUP

Les trois paramètres sont des chaînes de caractères.

- page contient l'adresse de la page à afficher.

- nom contient le nom du popup qui va être ouvert. Non obligatoire.

- options est une chaîne de caractères contenant les options de paramétrage du popup. Non

obligatoire.

Les 2 derniers paramètres ne sont pas indispensables.



Pour ouvrir un popup sur un lien, voici la syntaxe HTML :

<A href="javascript:popup('popup.html')">Ouverture popup basique</A>

avec comme déclaration la fonction popup() :


function popup(page) { window.open(page); }

</SCRIPT>

10.2 Les options d'affichage

Il est possible grâce au second paramètre d'affecter un nom au popup ouvert. Ainsi les autres popups

seront ouverts dans le même popup. Cela évite d'envahir l'écran du visiteur avec de multiples fenêtres.

Pour remettre le popup en premier plan, voir la page "Aller plus loin". Sans le paramètre nom, un nouveau

popup est ouvert à chaque fois.

Le dernier paramètre contient une chaîne d'options d'affichage. Chaque option est séparée par une

virgule (à ne pas confondre avec la syntaxe des feuilles de style qui demande un point-virgule).



Voici la liste des options :

Propriétés Effets Valeurs possibles

directories Affichage de la barre de liens yes | no

menubar Affichage de la barre de menu yes | no

status Affichage de la barre de statut yes | no

location Affichage de la zone d'adresse yes | no

scrollbars Affichage des barres de scrolling yes | no | auto

resizable Autorise le redimensionnement du popup yes | no

height Hauteur en pixels nombre entier

width Largeur en pixels nombre entier

left Position horizontale en pixels sur l'écran nombre entier

top Position verticale en pixels sur l'écran nombre entier

fullscreen Popup en plein écran (version 5 et +) yes | no



Quelques exemples de combinaisons d'options :

Position fixe en haut à gauche

OuvrirPopup('popup.html','','top=10,left=10')

Popup minimaliste

Aucune barre de menu, non redimensionnable, taille fixe

OuvrirPopup('popup.html', '', 'resizable=no, location=no, width=200, height=100, menubar=no, status=no, scrollbars=no,

menubar=no')

Popup fullscreen

Page en plein ecran (version 5 et +). Faire un ALT F4 pour s'en sortir

OuvrirPopup('popup.html','','fullscreen=yes')

Voici la fonction javascript qui ouvre un popup pour tous ces exemples :

<SCRIPT language=javascript>

function OuvrirPopup(page,nom,option) { window.open(page,nom,option); }

</SCRIPT>



10.3 Utilisation des popups

Popup à l'ouverture/Fermeture d'une page

Pour ouvrir un popup à l'ouverture d'une page, ajoutez dans la balise <BODY> l'événement :

<BODY onLoad="OuvrirPopup('page.html','nom','options...')">

De la même manière, pour ouvrir un popup à la fermeture de la page, remplacer l'événement onload

par onunload.

Créer un popup tout en javascript

Il est possible de créer un popup sans utiliser une page pré-existante mais simplement en la générant depuis la page appelante, via du javascript.



Fermer une popup

Il peut être utile de pouvoir fermer une popup depuis la page qui l'a généré. Pour cela, il est nécessaire

de conserver dans une variable globale le resultat de l'ouverture du popup par window.open.

Le code javascript est ici :


var w;

function Ouvrir() { w=window.open("popup.html","pop1","width=200,height=200"); }

function Fermer() { if (w.document) { w.close(); } }

</SCRIPT>

La première ligne var w déclare la variable globale. Dans la fonction Ouvrir, w reçoit le résultat de window.open. Dans la fonction Fermer, on teste si w est bien un objet de type window; si oui, on ferme le popup avec la méthode close().



Popups multiples ayant le même nom

Vous avez peut être remarqué qu'une popup qui s'ouvre dans un popup de même nom déjà ouvert

reste caché. Voici la solution pour replacer la popup en premier plan.

Voici le code source :

function OuvrirVisible() {

var w=window.open("popup.html","pop1","width=200,height=200");

w.document.close();

w.focus();

}

Le principe est donc de rendre le focus à la fenêtre après son ouverture.



Centrer une popup

Voici comment centrer un popup :

javascript:PopupCentrer('popup.html',300,150,'menubar=no,status=no')

Popup toujours visible

Pour forcer le popup a rester toujours visible, il suffit d'ajouter ce code dans la balise <BODY> de la page du popup : onblur="window.focus()"

La seule solution pour s'en débarrasser est de le fermer complètement.javascript:OuvrirPopup('popup2.html','','width=200,height=200,menubar=no,status=no')



Communiquer avec la fenêtre appelante

Depuis une popup il est possible d'atteindre l'objet window de la fenêtre appelante grâce à window.opener.

On peut ainsi modifier le contenu de la fenêtre appelante ou récupérer des informations de la popup pour les

replacer dans un formulaire de la fenêtre appelante.

Cet exemple permet de placer dans le champ choix du formulaire origine :

OuvrirPopup('popchoix.html','popupchoix','width=300,height=150,menubar=no,status=no')

Avec dans la page popchoix :

function Reporter(l) {

var choix=l.options[l.options.selectedIndex].value;

window.opener.document.forms["origine"].elements["choix"].value=choix;

}

<SELECT name="liste" onChange="Reporter(this)">

Programmation JavaScript cours inspiré du cours de R. Vivian.

Documents

Transcript of Programmation JavaScript cours inspiré du cours de R. Vivian.