Le Web dynamique JavaScript - Ivan Madjarov

 
 
Le Web dynamique JavaScript - Ivan Madjarov
Le Web dynamique
                 M2105



JavaScript
Le script côté client



       Ivan Madjarov , IUT-R&T, 2002-2018
Le Web dynamique JavaScript - Ivan Madjarov
JavaScript - Le script côté client
o Le modèle Client-Serveur, les scripts et les langages
  interprétés
   1. Côté Client : HTML/CSS/JavaScript
   2. Côté Serveur : PHP/ASP/JSP




Développement Web      IvMad, 2002-2018              2
Le Web dynamique JavaScript - Ivan Madjarov
JavaScript - Le langage
o Le JavaScript est un langage de programmation de
scripts introduit dans le code HTML5.
o Le navigateur Web du côté client interprète le code
HTML et le script de manière native.
o La qualité d'interprétation dépend du type de
navigateur (IE, Firefox, Chrome, Opera, Safari ou autre).
o JavaScript est un langage objet et événementiel.
o Le développeur peut créer des objets interactifs avec
des propriétés et des méthodes et peut leur associer des
actions en fonction d'événements déclenchés par le client
(passage de souris, clic, saisie clavier)
 Développement Web     IvMad, 2002-2018                3
Le Web dynamique JavaScript - Ivan Madjarov
JavaScript - Intégration
o Intégrer du code JavaScript dans une page HTML5
   n dans le corps de la page 
   n dans la partie entête 
         … 

   n dans un événement d'objet.
        onClick="alert('Vous avez cliqué')";

   n appel d'un script au clique d'un lien :
      Cliquez ici

   n depuis un fichier externe :
        
Développement Web        IvMad, 2002-2018                 4
Le Web dynamique JavaScript - Ivan Madjarov
JavaScript - Intégrer



  
  Javascript


 
  alert("Bonjour tout le monde!");
 

                                   TEST



 Développement Web     IvMad, 2002-2018          5
Le Web dynamique JavaScript - Ivan Madjarov
JavaScript - Appeler


JavaScript

function Charger() {
alert('Bienvenue sur le site');
}



Texte HTML dans le corps de la page Web...

                                       (Test)


 Développement Web     IvMad, 2002-2018                6
Le Web dynamique JavaScript - Ivan Madjarov
JavaScript - Les Variables
o Une variable est déclarée par le mot clé var.
o Si la variable est initialisée, cela défini son type:
  var prenom = "Marcel"; // type string
  var age = 29;                // type numérique
o Une concaténation transforme les types en chaîne de
  caractères :
    var accueil = "Bonjour " + prenom + " " + nom;
o De manière générale, les instructions JavaScript doivent
  être séparées par un point-virgule (;).



 Développement Web      IvMad, 2002-2018                  7
JavaScript - Les Variables
o L'accessibilité d'une variable dépend de l’endroit où la
  variable est affectée. On parle donc de la portée des
  variables.
    n GLOBALE : Une variable déclarée en dehors de toute fonction
      peut être utilisée n’importe où dans le script.
    n LOCALE : Une variable déclarée dans une fonction aura une
      portée limitée à cette seule fonction, c’est-à-dire quelle est
      inutilisable ailleurs.
o Pour déclarer une variable à l’intérieur d’une fonction et
  la rendre GLOBALE celle-ci doit être déclarée sans le
  mot clé var.

 Développement Web         IvMad, 2002-2018                      8
JavaScript - Les Variables
o En JavaScript il existe plusieurs types de données.
    n La fonction typeof() permet d’obtenir le type de la donnée
    n    Les nombres :
         var a = 36; alert(typeof(a));                 // "number"
         var a = "Salut"; alert(typeof(a));            // "string"

o String - chaines de caractères ou textes.
o Les booléens : var a = true; var b = false;
    n Une donnée a toujours une valeur, elle est soit VRAIE soit
      FAUSSE (true or false).
    n Si var = 0, sa valeur est considérée comme FALSE, Si var = 1, ou
      n’importe quelle autre valeur est considérée comme TRUE.


 Développement Web          IvMad, 2002-2018                       9
JavaScript - Les Instructions
o Le test conditionnel:
   if (condition) { … } else { … }
o Les boucles:
   For (initialisation; condition; opération) {
         // Vos instructions
   }
   while (condition) {
         // Les instructions de la boucle
   }
o Un commentaire:
   // commentaire sur une ligne
   /* des commentaires sur plusieurs lignes */

Développement Web     IvMad, 2002-2018            10
JavaScript - Les Instructions

var saCouleur = prompt("Quelle est ta couleur?");
switch(saCouleur) {
     case 'bleu' : alert("tu aimes le bleu");
           break; // on a fini les instructions pour ce cas.
     case 'blanc' : alert("tu aimes le blanc"); break;
     case 'rouge' : alert("tu aimes le rouge"); break;
     default : // Pour indiquer tous les autres cas
          alert("ta couleur n\'est pas dans la liste");
// écrire une apostrophe à l’intérieur de deux quottes,
// nous devons mettre un "\" (un caractère d’échappement).
         break;
}



    Développement Web         IvMad, 2002-2018                 11
JavaScript - Les Tableaux
o En JavaScript, les tableaux sont des objets:
   var T = new Array(10); // Initialise un tableau de 10 el
o Le premier élément est indexé à 0.
o Il est possible de déclarer un tableau sans dimension
fixe. La taille du tableau s'adapte en fonction du contenu
(taille variable).
o Pour accéder aux éléments du tableau:
   T[0] = 10;        T[9] = 5;   T[2] = "Toto";
o Des propriétés associées à l'objet : T.length
 Retourne le nombre d'éléments de l'objet Array.


 Développement Web           IvMad, 2002-2018           12
JavaScript - Les Tableaux
o Un tableau, en JavaScript, est une variable pouvant
contenir plusieurs données indépendantes, indexées
par un numéro, appelé indice, qui assure l'accès aux
données.
    Indice          0          1             2          3
    Données         donnée 1   donnée 2      donnée 3   donnée 4

o Tableaux associatifs
  o indices personnalisés pour indexer les valeurs du
    tableau.
    Indice          "Paul"     "André"       "Marie"    "Jean"
    Données         1000       500           1200       4500

Développement Web                  IvMad, 2002-2018                13
JavaScript – La notion d’Objets
o Imaginez un arbre dans un jardin comportant une
  branche sur laquelle se trouve un nid.
  La hiérarchie d'objets est définie comme ceci :
o jardin
   n arbre
     o branche
        n feuille
        n nid
                § largeur: 20
                § couleur: jaune
                § hauteur: 4

Développement Web           IvMad, 2002-2018        14
JavaScript – La notion d’Objets
Notation
o Le nid sur l'arbre est donc désigné comme suit :
   jardin.arbre.branche.nid
o Pour changer la couleur du nid :
   jardin.arbre.branche.nid.couleur = vert;
Les objets du navigateur
o L'objet de la racine est l'objet fenêtre (window)
o Dans la fenêtre s'affiche une page (document )
o Cette page peut contenir plusieurs objets, comme
   des formulaires, des images, etc.
   window.document.title = "titre de la page web";

Développement Web     IvMad, 2002-2018               15
JavaScript - Les Objets
o La déclaration se fait avec le mot-clé var.
o Pour créer un objet, il faut utiliser l'instruction new
suivi du type d'objet prédéfini.
o Le respect des majuscules/minuscule est obligatoire.
   var datejour = new Date();
   var unedate = new Date(a, m,               j,   h,   m, s);
n Cela correspond à la création d'un type objet et
  donne accès aux méthodes et propriétés prédéfinies
    var a = datejour.getDay();
    la variable alors contient le numéro du jour dans la semaine
    (0 pour dimanche, ..., 6 pour samedi)

 Développement Web         IvMad, 2002-2018                   16
JavaScript - Les Objets


Javascript



var t = new Array("dimanche","lundi", "mardi",
             "mercredi","jeudi", "vendredi", "samedi");
var datejour = new Date();
var a = datejour.getDay();
document.write("Le numéro du jour est "+a+"le jour de la semaine est "+t[a]+"");


                                       [Test]

 Développement Web     IvMad, 2002-2018                17
JavaScript - Les méthodes
o Une méthode est une fonction associée à un objet
o Appel d'une méthode:
  o window.objet1.objet2.methode();
       window étant l'objet de base du navigateur
o Exemple:
  o une page HTML est composée d'un objet appelé
    document.
  o A l'objet document est associée une méthode
    write(liste de paramètres).
      n La méthode permet de modifier de façon dynamique
        le contenu de la page.
  o window.document.write("bonjour"); (Test, Txt)
  o La méthode writeln() ajoute un retour chariot à la fin.
Développement Web       IvMad, 2002-2018                18
JavaScript - L'Objet
o Le mot-clé this
   n Lorsqu'on fait appel à une fonction à partir d'un
     objet (formulaire), le mot clé this fait référence à
     l'objet en cours et se substitue à l'appel complet:
     window.objet1.objet2...
   n Ainsi, lorsque on passe l'objet en cours en paramètre
     à une fonction, il suffit de faire nom_fonction(this)
     pour obtenir l'objet dans la fonction.
   n Pour manipuler les propriétés de l'objet il suffira de
     taper this.propriete (où propriete représente le nom
     de la propriété).

Développement Web      IvMad, 2002-2018                 19
JavaScript - Les chaînes de caractères
o La longueur d'une chaîne
   • Une chaîne de caractères en JavaScript est un objet
     String sur lequel s'appliquent des propriétés et des
     méthodes
   • La propriété length indique le nombre de caractères
     dans la chaîne
   • var chaine="azerty"; 6
JavaScript - Les chaînes de caractères
o MAJUSCULES / minuscules
   var chaine = "Ceci est un texte";
   var maj = chaine.toUpperCase();
   var min = chaine.toLowerCase();
o Une sous-chaîne dans une chaîne
   var domaine = "www.javascript.com";
   var extension = domaine.substring( domaine.lastIndexOf(".") );
   n substring extrait une sous-chaîne à partir de l'indice
     retournée par lastIndexOf qui retrouve la dernière
     occurrence de sous-chaine



Développement Web         IvMad, 2005-2013
                                 2002-2018                    21
JavaScript – L'objet String




Développement Web   IvMad, 2005-2013
                           2002-2018   22
JavaScript – L'objet String




Développement Web   IvMad, 2005-2013
                           2002-2018   23
JavaScript - Conversions
o Les fonctions de conversion
  • transformer une chaîne en un entier ou un réel:
        var chaîne = "3.14";
        var entier = parseInt(chaîne);
        var reel = parseFloat(chaîne);
o Est-ce un nombre
   • Pour détecter qu'une chaîne a le format d'un nombre,
     on applique la fonction isNaN(valeur) qui renvoie :
        - true si valeur n'est pas un nombre
        - false si valeur est un nombre


Développement Web       IvMad, 2005-2013
                               2002-2018              24
JavaScript – L'objet Math
     o Utilisation:
        x = Math.propriété; x = Math.méthode(paramètre);
    Méthode/Param                   Valeur            Méthode/param
E                         constante d'Euler           sqrt()          Racine carrée
LN2                       logarithme naturel de       exp()           valeur exponentielle
                          2
LN10                      logarithme naturel de       max()           le plus grand de deux
                          10                                          chiffres
PI                        constante PI                min()           le plus petit de deux
                                                                      chiffres
abs()                     valeur positive             pow()           puissance exposant
cos()                     cosinus                     random()        0 ou 1 aléatoire
sin()                     sinus                       round()         arrondi d'un nombre

      Développement Web                      IvMad, 2005-2013
                                                    2002-2018                            25
JavaScript : L'objet Date
o L'objet Date est inclus de façon native dans JavaScript et
  permet de manipuler les variables date et la gestion du
  temps.
o Les dates en JavaScript sont exprimées en nombre de
  millisecondes depuis le 1er janvier 1970.
o La syntaxe pour créer un objet date peut être:
    var Nom_objet = new Date();
  Elle permet de stocker la date et l'heure actuelle.
o La date stockée dans la variable contient le jour, le mois,
  l'année, l'heure, les minutes, et les secondes sous la
  forme d'une chaîne de caractères.
o Il est donc difficile d'accéder à un seul élément de l'objet.
 Développement Web       IvMad, 2002-2018                  26
JavaScript: Méthodes de l'objet Date
o Les méthodes de l'objet Date fournissent l'accès aux
  éléments par la syntaxe suivante:
    Objet_Date.Methode()
    n getDate() : Récupère la valeur du jour du mois. Le retour est
       un entier (entre 1 et 31) qui correspond au jour du mois;
    n getDay() : Récupère la valeur du jour de la semaine pour la
       date spécifiée. Le retour est un entier qui correspond au jour de
       la semaine : 0 pour dimanche, 1 pour lundi, ...
    n getTime() : Récupère le nombre de millisecondes depuis le 1er
       janvier 1970. L'objet retourné est un entier.
         o La méthode est utile pour convertir des dates, soustraire ou ajouter
           deux dates, etc.
    n toLocaleString() : Convertit une date en "string" au format
         local, par exemple : 10/05/82 05:15:20
 Développement Web              IvMad, 2002-2018                            27
JavaScript: Méthodes de l'objet Date


Javascript - Date

var d1 = new Date(2015, 09-1, 10);
var d2 = new Date(2005, 09-1, 16);
var milD1 = d1.getTime();
var milD2 = d2.getTime();
document.write("Date-1: "+d1+" convertir en "+milD1+"
millisecondesDate-2: "+d2+" convertir en "+milD2+"
millisecondes");





 Développement Web     IvMad, 2002-2018                28
JavaScript: Méthodes de l'objet Date


Dates

function intDates(frm) {
  var sd1 = new Date(document.frm.ladate.value).getTime();
  alert("1. "+new Date(document.getElementById("ladate").value)+"
2. millisecondes: "+sd1);
}

Entrez une date





 Développement Web        IvMad, 2002-2018                   29
JavaScript - les boîtes de dialogue
o La méthode alert() permet d'afficher dans une boîte
composée d'une fenêtre et d'un bouton OK un texte fournit en
paramètre. Exemple.




o La méthode confirm() est similaire à la méthode alert(), si ce
n'est qu'elle permet un choix entre "OK" et "Annuler". Lorsque
l'utilisateur appuie sur "OK" la méthode renvoie la valeur true.
Elle renvoie false dans le cas contraire... Exemple.

 Développement Web        IvMad, 2002-2018                    30
JavaScript - les boîtes de dialogue
o La méthode prompt()
o La méthode prompt fournit un moyen simple de
  récupérer une information provenant de
  l'utilisateur.
o La méthode prompt() requiert deux arguments :
   n le texte d'invite
   n Le texte par défaut dans le champ de saisie




Développement Web        IvMad, 2002-2018          31
JavaScript - Détecter mobile
function detectmob() {
   if( navigator.userAgent.match(/Android/i) ||
       navigator.userAgent.match(/webOS/i) ||
       navigator.userAgent.match(/iPhone/i) ||
       navigator.userAgent.match(/iPad/i) ||
       navigator.userAgent.match(/iPod/i) ||
       navigator.userAgent.match(/BlackBerry/i) ||
       navigator.userAgent.match(/Windows Phone/i) )
    {
       return true;
    } else {                                        La propriété
       return false;                         navigator.userAgent
    }                                        donne des informations
}                                            sur le nom, la version et
                                                   la plateforme du
                                                   navigateur Web.

 Développement Web          IvMad, 2002-2018                          32
JavaScript - Les événements
o Les évènements sont des actions de l'utilisateur, qui
  donnent lieu à une interactivité.
o Ainsi, il est possible d'associer des fonctions, des
  méthodes à des événements:
   n le passage de la souris au-dessus d'une zone, le
     changement d'une valeur, …
o Le gestionnaire d'événement permet d'associer une
  action à un événement.
   n    onEvenement="Action_Javascript_ou_Fonction()";
o Les gestionnaires d'événements sont associés à des
  objets …

Développement Web      IvMad, 2002-2018                 33
JavaScript - Liste des événements




Développement Web   IvMad, 2002-2018   34
JavaScript - Liste des événements
o Un événement ne peut pas être associé à n'importe
  quel objet... il est évident qu'un événement
  OnChange ne peut pas s'appliquer à un lien
  hypertexte par exemple, ...
o Objets auxquels on peut associer des événements:




Développement Web    IvMad, 2002-2018            35
JavaScript - Formulaires
o Utilisation du JavaScript pour valider les données
    n Le JavaScript est un bon moyen d’effectuer une validation puissante
      des données utilisateurs côté client avant l’envoi des données sur
      serveur.
o A Noter : cela ne dispense en aucun cas la vérification de
  l’intégrité des données côté serveur (en PhP par exemple).
    n En effet, rien n'empêche un utilisateur de désactiver le JavaScript sur
      son navigateur et cela pourrait alors poser des problèmes si les
      données ne sont pas validées côté serveur.
o L'utilité de JavaScript est intéressante au sens où l'on peut
  effectuer des tests poussés et vérifier et informer un
  utilisateur en direct de la validité d'un champ ou non.
o Le calcul à partir des données de plusieurs champs devient
  désormais possible.
 Développement Web             IvMad, 2002-2018                          36
JavaScript - Formulaires
o Les éléments de formulaire sont des objets JavaScript.
  Soit le formulaire:
    
    
    
o Accéder au formulaire:
    n Un formulaire est un élément de l'objet document
    document.forms["general"]
    document.forms[0]
    document.general
    n forms est le nom du tableau des formulaires de
      document
 Développement Web      IvMad, 2002-2018                 37
JavaScript - Formulaires
o Accéder à un élément:
   document.forms["general"].elements["champ1"]
   document.forms["general"].elements[0]
   document.forms["general"].champ1
   n "elements" est le nom du tableau de tous les
     éléments du formulaire.
o On peut atteindre un élément par :
   − son nom,
   − son indice,
   n Utilisez le nom des éléments, plutôt que les indices.
     Les noms sont indépendants du formulaire.



Développement Web       IvMad, 2002-2018                 38
JavaScript – Manipuler des formulaires
o Manipuler les propriétés d'un élément
   n Pour placer dans la zone de texte les mots "ça
     marche", il faut juste écrire :
   n document.forms["general"].elements["champ1"].
     value="ça marche"

o Appeler une méthode sur un élément
   n Pour donner le focus à un champ texte il faut appeler
     la méthode focus() sur cet élément.
   n document.forms["general"].elements["champ1"].
     focus();

o Récupérer une valeur d'un champs:
        var a = this.form.name.value;
Développement Web        IvMad, 2002-2018              39
Formulaires - this
Le mot clé this représente l'objet JavaScript en cours.








 Développement Web     IvMad, 2002-2018                   40
Formulaires - input
o Les zones de texte 
   n La principale action sur une zone de texte est de
     manipuler son contenu.
   n Un formulaire "maform" possède un champ texte
     "monchamp".
   n On accède au contenu du champ par :
   n document.forms["maform"].elements["monchamp"].value
   n Il faut ajouter la propriété .value pour accéder au
     contenu du champ!
   n Alors, il faut penser aux opérations sur les chaînes de
     caractères.

Développement Web       IvMad, 2002-2018                  41
JavaScript - méthodes d'accès
o Méthode : window.document.getElementById(id)
    n Retourne un objet HTML à partir de son id
o On peut ainsi modifier les input dans un formulaire:
    
    function f() {
       var obj = document.getElementById("champ_input");
       alert('le champ a pour valeur: "'+obj.value+"'")
       obj.value="autre valeur";
       alert('maintenant il contient: "'+obj.value+'"');
    }
    
    
    
    
    
    
                                      [Tester]
 Développement Web         IvMad, 2002-2018                    42
JavaScript - modification
o Méthode getElementById avec attribut style pour
  modifier la couleur de fond d'un div
    
    
    #div1 { background-color : #2f9be7;
            width : 12.500em; height : 12.500em; }
    
    
    
    
    
    
    
o                                                  [Tester]
Développement Web         IvMad, 2002-2018                    43
JavaScript - méthodes d'accès
o Méthode : window.document.getElementsByName()
   n Retourne un objet HTML à partir de son nom:

 Fraise 
 Banane 
 Pomme 


   document.getElementsByName("fruit")[0].checked = true;
   document.getElementsByName("fruit")[1].checked = true;
   document.getElementsByName("fruit")[2].checked = true;

   n Les cases sont repérées
     et cochées par programmation:                    [Tester]



Développement Web         IvMad, 2002-2018                   44
Formulaires - Les cases à cocher
Détecter une case cochée. On utilise la propriété
checked qui est de type booléen (true / false) pour vrai
ou faux.

   Enseignant
   Etudiant
   




 Développement Web     IvMad, 2002-2018               45
Formulaires - Les radio-boutons
La gestion des radio-boutons est assez complexe.

   Windows 95
   Windows 98
   Windows NT
   Linux
   Autre
   
        
                function testerRadio(radio) {
                for (var i=0; i
Formulaires - Les radio-boutons




Développement Web   IvMad, 2002-2018   47
Formulaires - SELECT
La structure d'un élément de type                  Nom             Nom de la liste
SELECT (voir Tableau)
                                                   selectedIndex   Indice de la ligne
Pour récupérer l'indice la ligne                                   sélectionnée
                                                                   (ligne 1 : indice=0)
sélectionnée :
this.form.elements['liste'].selectedIndex          options         Tableau des lignes
Pour récupérer le nombre de lignes :
this.form.elements['liste'].options.length         length          Nombre de lignes
Pour récupérer la valeur de la ligne
sélectionnée:                                      value           Valeur d'une ligne
this.form.elements['liste'].options[this.for
m.elements['liste'].selectedIndex].value           text            Libellé d'une ligne




 Développement Web              IvMad, 2002-2018                                         48
JavaScript - Changer un contenu



Changer un contenu

  function uneFonction() {
     x = document.getElementById("demo");    // Trouver l'élément
     x.innerHTML = "Bonjour de JavaScript!"; // Changer le contenu
} // innerHTML accède au contenu



JavaScript

JavaScript peux changer le contenu d'un paragraphe HTML.

Clic

                                              [Test]
 Développement Web         IvMad, 2002-2018                    49
JavaScript - Charger dynamiquement
o Pour charger dynamiquement une page HTML à partir
  d'une fonction JavaScript on utilise la propriété
    document.location.href
o Le code suivant redirige vers une page HTML au
  lancement de la première:
   
   
   
   function charger() {
      document.location.href="page.html";
   }
   
   
   
   
   
Développement Web        IvMad, 2002-2018          50
Formulaires - Calcule
Exercice
function controle(form1) {
var inpt = document.form1.input.value;
var tsts = parseFloat(inpt);
alert(inpt+" usd = "+(tsts*0.835)+" eur");
}




Donnez une somme en USD :



    Développement Web        IvMad, 2002-2018                 51
Formulaires - Contrôler la saisie
o Un nombre:
o Il peut être utile de vérifier que la saisie dans un
  champ de formulaire est bien un nombre : saisie de
  quantités, de prix...
o Soit nb le champ à tester. Si !(isNaN(nb)) retourne
  true, alors nb est un nombre.
   
      function CheckNombre(nb) {
      // retourne true si c'est un nombre
      // et false sinon
      return !(isNaN(nb));
      }
   

Développement Web      IvMad, 2002-2018             52
Formulaires - Contrôler la saisie
o Valider un formulaire par JavaScript :
    n Il est souvent utile de vérifier la saisie d'un formulaire
      avant de le valider.
    n L'idéal est de créer un bouton (de type "button" et
      pas "submit") qui appelle une fonction JavaScript qui
      contrôle la saisie et soumet ou non le formulaire.

   Adresse mail
    
   



 Développement Web        IvMad, 2002-2018                  53
Formulaires - Contrôler la saisie
o Pour vérifier qu'un mail est valide, il suffit de tester la
  présence de @ et du point.

   function ValiderMail(formulaire) {
     if (formulaire.mail.value.indexOf("@")
Formulaires - Contrôler la saisie
o Pour vérifier la validité de deux champs qui contiennent deux
  adresses mail apriori identique on peut utiliser la méthode
  Str1.LocalCompare(Str2);

function ComparerMail() {
  var M1 = "iv@iut.fr";
  var M2 = "iv@iut.net";
  if (!(M1.localeCompare(M2))) {
    alert("Equivalence des adresses mail")
  } else {
    alert("Différence dans les adresses mail");
  }
}          /* 0 identique; -1 Str1 Str2 */


 Développement Web       IvMad, 2002-2018                  55
Les pop-ups
o Le mot popup peut être traduit par fenêtre
  surgissante. (souvent bloqué par les navigateurs)
o L'événement est déclenchée par l'utilisateur (clic,
  ouverture de site, minuterie, ...) via un code
  JavaScript.
o L'objet window possède la méthode open qui prend
  3 paramètres chaînes de caractères :
     window.open( page [,nom] [,options] );
   − page contient l'adresse de la page à afficher.
   − nom du popup qui va être ouvert.
   − options paramétrage du popup.

Développement Web         IvMad, 2002-2018            56
Les pop-ups – 'page' et 'nom'
o Pour ouvrir un popup sur un lien, voici la syntaxe
  HTML :
   
   Ouverture popup basique
   
o Déclaration la fonction popup() :
    
       function popup(page) {
         window.open(page);
       }
    




Développement Web      IvMad, 2002-2018                57
Les pop-ups – 'options'
La chaîne d'options d'affichage:




Développement Web      IvMad, 2002-2018   58
Les pop-ups – 'options'
Ouverture d'une fenêtre popup en fonction

function ShowWindow(cURL) {
   var ControlWindow;
   ControlWindow = window.open(cURL, "RFC", "status,
       height=480, width=640, status=no, scrollbars=yes,
       resizable=yes, toolbar=0");
   if (parseInt(navigator.appVersion) >= 3)    {
     ControlWindow.focus();
   }
}


                                                    [Test]

 Développement Web     IvMad, 2002-2018                59
JavaScript - Définir un objet




  var person = new Object();
  person.firstname = "John";
  person.lastname = "Despere";
  person.age = 45;
  person.eyecolor = "blue";
  document.write(person.firstname + " is "
            + person.age + " years old.");





 Développement Web     IvMad, 2002-2018      60
Vous pouvez aussi lire
Partie suivante ... Annuler