Le Web Dynamique avec JavaScript - Concepts et Syntaxe

La page est créée Jessica Leroux
 
CONTINUER À LIRE
Le Web Dynamique avec JavaScript - Concepts et Syntaxe
Le Web Dynamique avec
 JavaScript
             Concepts et Syntaxe

©A. Belaïd                         1
Le Web Dynamique avec JavaScript - Concepts et Syntaxe
Intérêt
             „   Présentation de JavaScript
                 –   Contrôle du contenu et de l’apparence de pages Web
                 –   Contrôle de fonctionnalités du Navigateur Internet
                 –   Gestion du contenu d’une page Web
                 –   Gestion d’interactions avec l’utilisateur
                 –   Liens avec les applets Java
                 –   Manipulation et gestion d’images
                 –   Lecture et écriture de Cookies
                 –   Autres fonctionnalités intéressantes

                                                                          2
©A. Belaïd
Utilisation
             „   Contexte d’utilisation
                 –   JavaScript(JS) s’utilise dans le contexte du Web
                     principalement au travers d’un navigateur Internet
                 –   JS permet l’exécution de code informatique intégré à des
                     pages Web
                 –   JS est un des outils permettant de développer du « Web
                     Dynamique »
             „   Contexte technique
                 –   JS n’est pas simple, et nécessite une relative bonne
                     connaissance des techniques de programmation
                 –   JS est un Langage de troisième génération cousin de
                     Java, du langage C ou du Basic en terme de forme de
                     programmation

                                                                                3
©A. Belaïd
Réel intérêt
             „   Étroite liaison avec les navigateurs Internet
                 –   Contrôle du contenu et de l’apparence de page Web
                      • write()… faire apparaître un texte supplémentaire
                        dynamiquement
                      • Construction d’une page dynamiquement à partir de
                        rien
                 –   Contrôle de fonctionnalités du Navigateur Internet
                      • Affichage de message par boite de dialogue ou dans
                        la barre de status
                      • Saisie de données simples
                      • Ouverture et gestion de l’affichage d’URL dans des
                        fenêtres du navigateur

                                                                             4
©A. Belaïd
Réel intérêt
             „   Étroite liaison avec les navigateurs Internet
                 –   Gestion du contenu d’une page Web
                      • Accès à la liste des liens hypertextes, images,
                        applets Java,... d’une page
                      • Accès à l’ensemble des contrôles boutons, zone de
                        saisie,... d’une page
                 –   Gestion d’interactions avec l’utilisateur
                      • Gestions d’actions liées à des événements
                        utilisateur:
                          ™ déplacement de la souris sur un contrôle,
                              validation d’une saisie, d’un Submit sur un
                              formulaire...

                                                                            5
©A. Belaïd
Exemple

                       6
©A. Belaïd
Présentation
             „   Javascript
                 –   Langage de script incorporé dans le HTML
                 –   Historiquement, premier langage de script pour le Web
                 –   Apporte des améliorations au HTML
                      • HTML permet d'écrire
                      • JavaScript permet de programmer, c'est-à-dire de
                        gérer l'information
             „   Qualités
                 –   Disponible sur les navigateurs actuels et gratuit
             „   Défauts
                 –   Interprété et donc lent

                                                                             7
©A. Belaïd
Introduction
             „   A quoi ressemble un script ?
                 –   C’est une portion de code qui vient s'insérer dans une
                     page HTML
                 –   Le code du script n'est toutefois pas visible dans la
                     fenêtre du navigateur car il est compris entre des balises
                     (ou tags) spécifiques qui signalent au navigateur qu'il
                     s'agit d'un script écrit en langage JavaScript
                 –   Balises annonçant le code Javascript :
                       
                            Placez ici le code de votre script
                       
                                                                                  8
©A. Belaïd
Introduction
             „   Où placer ce code ? partout, mais de préférence organisé :
                  
                                  Déclarations + initialisations de paramètres
                                  fonctions;
                         
                                                                                         9
©A. Belaïd
Exemple
             „   Sans fonctions : simple.html
                 
                     Programme Out2
                     
                                                                                     10
©A. Belaïd
Exemple plus complet
             variable-visibilite.html
                
                                var x = new String('abc');
                                alert(x);
                                function commencer() {
                                          var x = new Number(123);
                                          x++;
                                          alert(x); }
                                function suivre() {
                                var x = new Boolean(false);
                                          alert(x); }
                     
                    commencer();
                    suivre();
                
                                                              11
©A. Belaïd
Variables et types
             „   Déclaration
                 
                    var date; // Déclaration sans affectation
                    var compteur=0; // Déclaration avec affectation
                    toto='coucou'; // Déclaration implicite par affectation
                    var prem, second; // variables séparées par des virgules
             „   Déclaration typée
                     monNombre = new Number(); // Déclaration typée sans
                     affectation
                     e = new Number(2.71828); // Déclaration typée avec
                     affectation
                     var maChaine = new String(); //
                     var toto = new Boolean(true); //
                 
                                                                               12
©A. Belaïd
Tableau
             „   Array : tableau.html
                 –   Le type des éléments : nombres, chaînes, booléens, ...
                 –   La dimension 1, 2, ou 3, ... : tab(7) ; tab(x,y) ; tab(A,B,C) ; ...
                 –   Les indices : souvent des nombres entiers
                      
                          // Tableau de chaînes, de dimension 1, indicé de 0 à 6 :
                          Jour=new Array(7);
                          Jour[0]='Dimanche' ;
                          Jour[1]='Lundi' ;
                          Jour[2]='Mardi' ; ...
                          Jour[6]='Samedi' ;
                          // En énumérant les éléments :
                           jour=new Array('dimanche','lundi','mardi', ... ,'vendredi','samedi');
                      
                      document.write(Jour[1], ' ' , jour[0]); affiche : Lundi dimanche

                                                                                                   13
©A. Belaïd
Opérateurs
             „   Arithmétiques
                 –   classique
             „   De comparaison
                 –   Test d’égalité : ==, différent : !=
             „   Logiques
                 –   Ou : ||, ET : &&
             „   Affectation arithmétique
                 –   addition : +=, multiplication *=, division /=…

                                                                      14
©A. Belaïd
Conditionnelles
             „   Choix simple : conditionnelle.html
                 if (condition booléenne)
                      {Instructions à exécuter si "oui";}
                 else
                      {Instructions à exécuter si "non";}
             „   Choix multiple : choix-multiple.html
                 switch(x) {
                    case 1 : instructions 1; break;
                    case 2 : instructions 2; break;
                    ...
                    case n : instructions 3; break;
                    default : instructions 4; break;
                 };

                                                            15
©A. Belaïd
Itération
             „   For : iteration.html
                     for (valeur de départ ; contrôle pour sortie ; progression )
                     { Instructions à itérer }
                 –   Exemple
                     for (i=1;i
Fonctions
             „   Syntaxe
                 function maFonction(x, toto) {
                    ... instructions; ...
                    return valeur du résultat;
                 }
             „   Exemple
                 
                    function VolCylindre(r,h) {
                             pi=3.14159;
                             return pi*r*r*h;
                    }
                    document.write(VolCylindre(1,2));
                 
                                                        17
©A. Belaïd
Fonctions prédéfinies
             „   Mathématiques
                 function lancer(n) {
                 for (i=1 , suite='' ; i
Javascript
                   Programmation objet

F. GEOFFROY
     ©A. Belaïd                          19
Les objets
             „   Description
                 –   Javascript divise la page du navigateur en objets, afin de
                     permettre d'accéder à n'importe lequel d'entre-eux et de
                     pouvoir les manipuler par l'intermédiaire de leurs propriétés
                 –   On commence généralement par l'objet le plus grand (celui
                     contenant tous les autres) puis on descend dans la hiérarchie
                     jusqu'à arriver à l'objet voulu
                       • L'objet le plus grand est l'objet fenêtre : window
                       • Dans la fenêtre s'affiche une page, c'est l'objet document
                       • Cette page peut contenir plusieurs objets, comme
                           ™ des formulaires,
                           ™ des images, etc.

                                                                                      20
©A. Belaïd
Les objets
             „   Les objets de base
                 –   navigator : contient des informations sur le navigateur de
                     celui qui visite la page
                 –   window : objet où s'affiche la page, il contient donc des
                     propriétés concernant la fenêtre elle-même mais aussi
                     tous les objets-enfants contenus dans celle-ci
                 –   location : contient des informations relatives à l'adresse
                     de la page à l'écran
                 –   history: c'est l'historique, c'est-à-dire la liste de liens qui
                     ont été visités précédemment
                 –   document : contient les propriétés sur le contenu du
                     document (couleur d'arrière plan, titre, ...)

                                                                                       21
©A. Belaïd
Hiérarchie des objets

                                     22
©A. Belaïd
Navigator
             „   Propriétés
                 –   a plusieurs propriétés concernant votre navigateur
                       • appName :
                           ™ connaître le nom : Netscape, IE, Mozilla
                       • appVersion :
                           ™ connaître la version
                       • language :
                           ™ FR, AN
                       • platform :
                           ™ windows, Linux…
                 –   Pour le savoir : exécuter :
                       
                         document.write(navigator.propriété);
                       
                                                                          23
©A. Belaïd
Navigator
              –   a plusieurs méthodes
                    • javaEnabled() :
                           ™ permet de vérifier si le navigateur du client est
                             configuré pour exécuter des applets Java
                    • …
              –   Exemple d’utilisation de Navigator :
                    Nom = navigator.appName;
                    if (Nom == 'Netscape') {
                        placer ici les instructions à exécuter s'il s'agit de Netscape
                        Navigator 4 ou supérieur }
                     if (Nom == 'Microsoft Internet Explorer') {
                    placer ici les instructions à exécuter s'il s'agit de Microsoft
                        Internet Explorer 4 ou supérieur
                    }

                                                                                         24
©A. Belaïd
L’objet Window
             „   Définition
                 –   est l'objet par excellence dans Javascript, car il est le
                     parent de chaque objet qui compose la page web
                 –   il contient donc :
                        • l'objet document :
                             ™ la page en elle-même
                        • l'objet location :
                             ™ le lieu de stockage de la page
                        • l'objet history :
                             ™ les pages visitées précédemment
                        • l'objet frames :
                             ™ les cadres (division de la fenêtre en sous-
                               fenêtres)

                                                                                 25
©A. Belaïd
L’objet Window
             „   Exemple :
                  window.open("http://www.loria.fr","nom_de_la_fenetre","options_d
                     e_la_fenetre");
             „   Options :
                  –   menubar = yes/no :
                        • affiche ou non la barre de menu (fichier, edition, ...)
                  –   resizable = yes/no :
                        • définit si la taille de la fenêtre est modifiable ou non
                  –   scrollbars = yes/no :
                        • affiche ou non les ascenceurs (barres de défilement)
             „   Exemple :
                   Cliquez ici
                    pour fermer la fenêtre 

                                                                                        26
©A. Belaïd
L’objet Window
             „   Propriétés :
                  –   frames[] : tableau de cadres contenus
                  –   length : nombre de cadres (nombre d'éléments du tableau
                      frames
                  –   name : nom de la fenêtre dans laquelle on se trouve
                  –   parent : fenêtre qui englobe celle dans laquelle on se trouve
             „   Méthodes appliquées dessus :
                  –   alert(), confirm() et prompt() : font apparaître une boîte de
                      dialogue
                  –   open(), et close() : permettent l'ouverture et la fermeture de
                      fenêtres
             „   Exemple :
                  window.open("http://www.loria.fr","nom_de_la_fenetre","options_d
                     e_la_fenetre");

                                                                                       27
©A. Belaïd
L’objet document
             „   Élément majeur, permet de
                 –   récupérer des informations d'un formulaire,
                 –   créer des calques et les déplacer, écrire du texte...
             „   Propriétés :
                 –   document.fgColor
                      • permet de récupérer et de changer la couleur du
                        texte de votre page HTML
                          ™ document.fgColor = "#993333";
                 –   document.bgColor
                      • permet de récupérer et de changer la couleur de fond
                        de votre page HTML
                 –   document.lastModified
                      • permet de savoir quand la page html a été modifiée

                                                                               28
©A. Belaïd
L’objet document
             „   Propriétés (suite) :
                  –   document.linkColor
                       • permet de récupérer et de changer la couleur des liens de
                         votre page HTML
                  –   document.location
                       • permet de récupérer et changer l'url de votre page HTML,
                         ce qui revient à charger une autre page HTML
                           document.location = "URL/monDoc.HTML";
                  –   document.write()
                       • permet d'écrire dans votre page HTML
                  –   document.images[ ]
                       • permet de récupérer et changer les images de votre page
                         HTML
                  –   document.forms[ ]
                       • permet de récupérer et changer les informations de votre
                         formulaire
                                                                                     29
©A. Belaïd
L’objet document
             „   Rappel : création de formulaires
                 –   Autant qu’on veut entre
                      •  
                 –   Options ou éléments
                      • Zone de texte : 2 possibilités
                          ™ 
                          ™ 
                            
                      • Case à cocher
                          ™ 
                      • Bouton radio
                          ™ < input type= "radio" name="sexe" value="femme">

                                                                         30
©A. Belaïd
L’objet document
             „   Rappel : création de formulaires
                 –   Sélection
                      • 
                        Afrique
                        < option >Amérique
                        < option >Asie>
                        < option >Europe
                        < option >Océanie

                                                     31
©A. Belaïd
L’objet document
             „   Le champ « text » :
                 –   a par exemple comme propriétés :
                      • name : le nom du champ de texte
                      • value: le texte contenu dans le champ
                      • size: la taille du champ de texte

                                                                32
©A. Belaïd
L’objet document
             „   Le champ form : propriétés :
                 –   action ()
                       • Définit l'URL où le formulaire sera envoyé
                 –   elements
                       • Tableau représentant les éléments du formulaire
                 –   length
                       • Nombre d'éléments à l'intérieur du formulaire
                 –   method
                       • Définit le type d'envoi du formulaire (get ou post)
                 –   name
                       • Définit le nom du formulaire
                 –   target
                       • Définit la page (fenêtre ou frame) de réponse
                 –   parent
                       • Indique une fenêtre d'un cadre (frame)

                                                                               33
©A. Belaïd
L’objet document
             „   Le champ form : action ()
                  
                     Test
                     
                                                                                            34
©A. Belaïd
L’objet document
             „   Exemple
                 –   Il s’agit d’accéder au champ : case cochée pour modifier
                     le contenu du texte : case cochée ou case non cochée :
                 –   Code du formulaire
                         
                                                                                35
©A. Belaïd
L’objet document
             „   Pour modifier le champ : objet-form1.html
                 –   On utilise la fonction javascript associée au bouton
                     checkbox suivante :
                      
                        function ModifChamp() {
                        if (document.forms["form1"].checkbox.checked) {
                          document.forms["form1"].champ_text.value='Bouton
                        coché' }
                        else {
                        document.forms["form1"].champ_text.value='bouton
                        non coché' } }
                      
                                                                             36
©A. Belaïd
L’objet document
             „   Autre exemple : moyenne-notes.html
                 –   Afficher la note d’une élève dans une matière et calculer
                     sa moyenne

                                                                                 37
©A. Belaïd
L’objet document
             „   Autre exemple : cacher-montrer.html
                 –   Cacher montrer une image

                                                       38
©A. Belaïd
L’objet document
             „   Le champ form : length :
                      •   sauvegarde le nombre de formulaires définis dans un fichier
                  
                                                                                        39
©A. Belaïd
L’objet document
             „   Le champ form : method :
                     •   Sauvegarde la valeur qui figure lors de la définition du formulaire
                         dans l'attribut method= - en principe, "get" ou "post".
                 
                   function Methode() {
                     if(document.formulaire_test.action.indexOf("@") > 0)
                        document.formulaire_test.method = "post";
                     else
                        document.formulaire_test.method = "get";
                        return true;
                   }
                   …
                   
                                                                                               40
©A. Belaïd
L’objet document
             „   Le champ form : name :
                     •   Sauvegarde le nom d’un formulaire
                 
                    Test
                    
                                                                                     41
©A. Belaïd
L’objet document
             „   Le champ form : target :
                      •   Précise la cible (cadre) dans laquelle l’affichage sera fait :
                    
                    Test
                      
                                                                                    42
©A. Belaïd
L’objet document
             „   Le champ form : submit() :
                  –   Envoi du formulaire : JavaScript lance un compte à rebours avec la
                      méthode setTimeout(). Après 60000 millièmes de secondes, donc
                      après une minute, la fonction on_y_va() est appelée. Celle-ci envoie le
                      formulaire avec submit()
                          
                          Test
                          
                                                                                                43
©A. Belaïd
L’objet document
             „   Le champ form : elements :
                 –    Propriétés :
                      • checked (coché)
                      • defaultChecked (coché par défaut)
                      • defaultValue (valeur entrée par défaut)
                      • form (nom du formulaire)
                      • name (nom de l'élément)
                      • type (type de l'élément)
                      • value (valeur/contenu de l'élément)

                 –   Méthodes :
                      • blur() (quitter l'élément)
                      • click() (cliquer sur l'élément)
                      • focus() (positionner sur l'élément)
                      • handleEvent() ((traiter l'événement)
                      • select() (sélectionner du texte)

                                                                  44
©A. Belaïd
L’objet document
             „   Checked : Exemple : Sauvegarde si oui ou non une case à cocher ou une
                 case d'option est activée. Les valeurs possibles sont true ou 1 ou false ou 0.
                  
                      avec cadres
                      sans cadres 
                     
                                                                                                  45
©A. Belaïd
L’objet document
             „   defaultValue : Sauvegarde le texte par défaut d'un champ de saisie
                  Test 
                  
                      uri: 
                       
                                                                                           46
©A. Belaïd
Javascript
                   Gestion d’événements

F. GEOFFROY
     ©A. Belaïd                           47
Interaction
             „   Appel de fonction à la demande : au clic
                       …objet à cliquer .... 
                 –   Normalement :
                      • le href permet d’ouvrir une page web ou d’aller à un
                        autre endroit du document
                 –   Pour l’utiliser pour appeler une fonction de réaction :
                      • On écrit : javascript + : + fonction
                      Î fonction pré-définie
                          javascript:alert("Incrémenter veut dire augmenter")
                      Î fonction personnelle
                          javascript:surface-rectangle(x,y)
                      Î attention au " de href : à l’intérieur, on met des côtes ‘…’
                          (aide?)

                                                                                       48
©A. Belaïd
Appel de fonction dans href
             „   Exemple
                 
                     Test
                     
                      atteindre a2. Veuillez
                     cliquer d'abord ici 
                      Ici a2 -
                     Cliquez ensuite ici
                 
                                                             49
©A. Belaïd
Appel de fonction dans href
             „   Autre exemple
                 
                     Test
                     
                      Lien
                      souhaité
                     
                                                             50
©A. Belaïd
Les évènements
             „   Présentation
                 –   Les événement sont l’intérêt du JS en matière de
                     programmation Web
                 –   Ils donnent une interactivité à la page que vous
                     consultez, ce qui n’existe pas avec le HTML, si on
                     excepte bien entendu le lien hypertexte
                 –   Le JS permet de réagir à certaines actions de
                     l’utilisateur
                 –   On nomme évènement le mot Event, et gestionnaire
                     d’événement le mot-clé onEvent

                                                                          51
©A. Belaïd
Les évènements
             „   Fonctionnement
                 –   Les évènements sont indiqués dans la balise d’un formulaire,
                     le plus souvent
                 –   Ils apparaissent comme un paramètre supplémentaire et
                     suivent une syntaxe particulière
                 –   Syntaxe :
                           
                 –   balise :
                      •   nom de la balise HTML qui supporte l’événement
                 –   onEvent :
                      •   gestionnaire d’événement associé à l’événement Event
                 –   Code :
                      •   fait le plus souvent référence à une fonction définie dans
                          les balises …. Il peut cependant s’agir
                          d’instructions directement

                                                                                   52
©A. Belaïd
Les évènements
             „   Fonctionnement
                 –   Plusieurs gestionnaires d’évènements peuvent être
                     placés dans la même balise
                 –   Certaines balises n’appartenant pas à un formulaire
                     peuvent supporter des gestionnaires d’événement
                 –   Exemple
                          click?
                 –   Prévient du click puis la page

                                                                               53
©A. Belaïd
Les évènements
             „   Le clic de souris
                 –   Gestionnaire d’événement
                      •   onClick
                 –   Exemple :
                      •   
                 –   Balises supportées :
                      •   
                      •   
                      •   
                      •   
                      •   
                      •   

                                                                                      54
©A. Belaïd
Les évènements
             „   Le chargement
                 –   Gestionnaire d’événement
                      •  onLoad
                 –   Exemple :
                      •  
                 –   Balises supportées :
                      •  
                      •  
                 –   Effets :
                      •  Au chargement, réaliser tel événement

                                                                            55
©A. Belaïd
Les évènements
             „   Error
                 –   Gestionnaire d’événement
                      •  onError
                 –   Exemple :
                      •  
                 –   Balises supportées :
                      •  
                      •  
                      •  
                 –   Effets :
                      •  Prévient l’erreur au chargement

                                                                        56
©A. Belaïd
Les évènements
             „   Abort
                 –   Gestionnaire d’événement
                      •  onAbort
                 –   Exemple :
                      •
Les évènements
             „   Le passage de la souris
                 –   Gestionnaire d’événement
                     •   onMouseOver
                 –   Exemples :
                     •   
                     •     Move the mouse pointer
                         over this text, then move it elsewhere in the document.
                     •   http://www.google.frhttp://www.google.fr
                 –   Balises supportées :
                     •   Presque toutes
                 –   Effets :
                     •   Prévient quand on survole la cible : zone, texte, lien
                                                                                          58
©A. Belaïd
Les évènements
             „   L’éloignement de la souris
                 –   Gestionnaire d’événement
                     •   onMouseOut
                 –   Exemples :
                     •
Les évènements
             „   Le focus
                 –   Gestionnaire d’événement
                     •   onFocus
                 –   Exemples :
                     •   
                 –   Balises supportées :
                     •   
                     •   
                     •   
                     •   
                 –   Effets :
                     •   Écrit le message quand on clique sur la zone d’entrée du texte

                                                                                          60
©A. Belaïd
Les évènements
             „   Le blur
                 –   Gestionnaire d’événement
                     •   onBlur
                 –   Exemples :
                     •   
                 –   Balises supportées :
                     •   
                     •   
                     •   
                     •   
                 –   Effets :
                     •   Avertit à la fin du remplissage dans la zone d’écriture, si on n’a
                         rien oublié

                                                                                              61
©A. Belaïd
Les évènements
             „   Les changements : choix-form.html
                 –   Gestionnaire d’événement
                     •   onChange
                 –   Exemples :
                     •   
                 –   Balises supportées :
                     •   
                     •   
                     •   
                     •   
                 –   Effets :
                     •   Avertit du changement par rapport à ce qu’il y avait d’écrit dans
                         la zone d’écriture

                                                                                             62
©A. Belaïd
Les évènements
             „   La sélection
                 –   Gestionnaire d’événement
                     •   onSelect
                 –   Exemples :
                     •   
                 –   Balises supportées :
                     •   
                     •   
                 –   Effets :
                     •   Avertit de la sélection d’un champ

                                                                                 63
©A. Belaïd
Les évènements
             „   L’envoi
                 –   Gestionnaire d’événement
                     •   onSubmit
                 –   Exemple :
                     •   
                 –   Balises supportées :
                     •   
                 –   Effets :
                     •   Avertit de la sélection d’un champ

                                                                             64
©A. Belaïd
Les évènements
             „   Le reset
                 –   Gestionnaire d’événement
                     •   onReset
                 –   Exemple :
                     •
La commande InnerHTML
             „   Rôle
                 –   Permet de changer le contenu d’une balise
                 –   Le HTML contenu entre les balises  peut être changé
                     de manière dynamique
                 –   Par exemple :
                       Hello World 
                 –   Tout le HTML entre  et  peut être remplacé
                     dynamiquement en utilisant le code Javascript :
                     
                         document.getElementById('DivExample').innerHTML="Good
                         Afternoon";
                     
                 –    De cette manière, il peut être changé dans n’importe quel
                     code HTML valide

                                                                                  66
©A. Belaïd
La commande InnerHTML
             „   Exemple : TD1-JavaScript/innerHTML.html

                                                       67
©A. Belaïd
Applications
                 „     Memory : memory/memory.html

             Tableau

             Formulaire
                                                     68
©A. Belaïd
…
             document.write('');
       L
             for (i=1 ;i
for (i=1 ;i
function change_im(nbim) { //
                 if (place[nbim] !=0) {
                          if (nbim==nbim2) nbim=0;
                          else{
                               if (nbim==nbim3) nbim=0;
                                  else{
                                      if (choixim==3){
                                           if (val1==val2) {
                                               efface(nbim2);efface(nbim3);gain++;}
                                               else {
                                                no_efface(nbim2);no_efface(nbim3);}
                                                choixim=1;nbim3=0
                                           }
                                           if (choixim==1) {nbim2=nbim;val1=place[nbim];choix++;}
                                           if (choixim==2) {nbim3=nbim;val2=place[nbim];}
                                           choixim++;
                                           }
                                   }
                                   document.images[nbim-1].src = non_im+place[nbim]+".gif";
                                   if (choixim==3){
                                      if (gain==divs-1) {
                                           setTimeout("efface(nbim2);efface(nbim3);document.images[1].src =
                                           'gagne.gif';",500);gain++;
                                      }
                                   }
                          document.form1.result.value = choix
                       }
             }                                                                                              71
©A. Belaïd
Applications
               „    Puzzle : puzzle/puzzle.html

             On clique sur une case puis sur   On peut voir le puzzle rassemblé
             une autre pour indiquer où on
             veut déplacer la première

                                                                                  72
©A. Belaïd
Vous pouvez aussi lire