1. Qu'est-ce que Javascript ?

    2. Javascript est un langage de script que l'on peut utiliser avec HTML pour créer des pages web dynamiques. Cela permet notamment de: HTML permet de créer des pages web statiques au moyen de balises ou d'objets. Javascript permet d'inspecter et de manipuler ces objets de manière interactive, et de réaliser quelques animations. Les deux langages sont complémentaires.

  2. Premier script

    3. Le Javascript est une extension du langage HTML qui est incluse dans le code. Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes.
    Il ne faut pas confondre le JavaScript et le Java. En effet contrairement au langage Java, le code est directement écrit dans la page HTML, c'est un langage peu évolué qui ne permet aucune confidentialité au niveau des codes (ceux-ci sont effectivement visibles).
    D'autre part l'applet Java (le programme) doit être compilé à chaque chargement de la page, d'où un important ralentissement pour les applets Java contrairement au JavaScript.

    1. Quel langage pour quel navigateur ?

      2.  Il existe différentes versions du langage Javascript, qui ne sont pas toutes compréhensibles pour des versions anciennes des navigateurs. En général, voici le tableau des concordances:
      Javascript
      Internet Explorer
      Netscape
      1.0
      3.0
      2.0
      1.1
      4.0
      3.0
      1.2
      4.0
      4.0
      1.3
      5.0
      4.5
      1.5
      5.5
      6.0

    2. Où taper le script ?

      3. Les scripts sont généralement écrits dans un document HTML (fichier qui est donc sauvegardé avec l'extension .htm ou .html). Il est possible de constituer un fichier séparé, avec le seul script, mais il devra alors porter l'extension .js
      Voici un exemple de code html:
      1. <html>
      2. <head>
      3. <title> page d'accueil </title>
      4. </head>
      5. <body>
      6. Bienvenue sur notre site <br>
      7. Il est encore en construction.
      8. </body>
      9. </html>
       qui nous donne
      Bienvenue sur notre site
      Il est encore en construction.

      On peut améliorer cette page en insérant du Javascript:
      1. <html>
      2. <head>
      3. <title> page d'accueil </title>
      4. </head>
      5. <body>
      6. Bienvenue sur notre site <br>
      7. Il est encore en construction.<br>
      8. Dernière modification:
      9. <script language="javascript">
      10. document.write(document.lastModified);
      11. </script>
      12. </body>
      13. </html>
      ce qui nous donne
      Bienvenue sur notre site
      Il est encore en construction.
      Dernière modification:
      La date de modification changera à chaque enregistrement du fichier .html.

    3. Les commentaires

      4. Une commentaire Javascript est ignoré par l'interpréteur. Il y a deux façons d'écrire des commentaires:

      Même s'ils commencent à se faire rares, ils existe encore des navigateurs incapables de lire et d'interpréter le JavaScript. Ils affichent alors le code en clair sur l'écran, comme s'il s'agissait d'un simple texte. Pour éviter cela, on ajoute deux lignes:
      1. <script language="JavaScript">
      2. <!--
      3. // Ici le code Javascript
      4. //-->
      5. </script>
       Les navigateurs considèrent alors ces lignes comme des commentaires.

    4. Comment voir le résultat ?

      5.  En utilisant un navigateur et en allant sur la page web.
      Regardons un premier script
      1. <head>
      2. <title>Premier script en Javascript</title>
      3. </head>
      4. <FONT FACE="arial">
      5. <script language="JavaScript">
      6. var m1; //Votre nom
      7. var food; //Aliment
      8. var animal; //Animal
      9. var tv; //programme tele
      10. m1=prompt("Tapez votre nom:","");
      11. tv=prompt("Tapez le nom d'une serie tele:","");
      12. food=prompt("Tapez le nom d'un aliment:","");
      13. animal=prompt("Tapez le nom d'un gros animal:","");
      14. document.write("<B>Nouvelle série!</B><BR><BR>");
      15. document.write("Ce soir, en exclusivité, le premier épisode de la série "+tv+" !! <br><br>");
      16. document.write("Le personnage principal - "+m1+" - cherche un "+animal+" dévoreur de "+food+" .<BR><BR>");
      17. </script>
      18. ca vous a plu ?
      19. </FONT>
      20. </body>
      21. </html>

      voir le résultat

      On déclare les variables utilisées au début du script. Il ne faut pas oublier de mettre un point-virgule à la fin de chaque ligne de commande.

      On peut également afficher des messages déroulants dans la barre d'état, par exemple à l'aide du script suivant:

      1. <script language="JavaScript">
      2. var msg = "Un exemple de message qui passe";
      3. var espace="... ...";
      4. var pos=0;
      5. function MessageDeroulant()
      6. {
      7. window.status =msg.substring(pos,msg.length)+espace+msg.substring(0,pos);
      8. pos++;
      9. if (pos > msg.length) pos=0;
      10. window.setTimeout("MessageDeroulant()",200);
      11. }
      12. MessageDeroulant();
      13. </script>


      Une page web contenant du Javascript s'écrit généralement en deux temps. Par exemple, si l'on souhaite écrire un programme permettant de générer des proverbes, on commence par créer le formulaire en HTML:
      1. <html>
      2. <head>
      3. <title> Générateur de proverbes en Javascript </title>
      4. <head>
      1. </head>
      2. <body>
      3. <center>
      4. <h1> Générateur de proverbe </h1>
      5. </center>
      6. Saisissez un nom et un adjectif, tous deux masculins.
      7. Cliquez sur le bouton "Proverbe" pour générer un proverbe<br>
      8. Si vous faites une erreur ou si vous souhaitez recommencer, cliquez sur le bouton "effacer".
      9. <br>
      10. <br>
      11. <br>
      12. <form name="formu">
      13. Nom : <input name="un_nom" size="25">
      14. <br><br>
      15. Adjectif: <input name="un_adjectif" size="25">
      16. <br><br><br>
      17. <input type="button" name="lancer" value="proverbe"
      18. onClick="afficherProverbe(document.formu.un_nom.value,
      19. document.formu.un_adjectif.value)">
      20. <input type="reset" name="effacer" value="effacer">
      21. </form>
      22. </body>
      23. </html>

      Mais pour le moment, il ne se passe rien quand on presse les boutons. Il faut rajouter une fonction créant le proverbe:
      1. <head>
      2. <script language="javascript">
      3. <!-- Cacher cette partie du fichier pour les navigateurs ne reconnaissant
      4. // pas Javascript
      5. // Début du script
      6. function afficherProverbe(nom,adjectif)
      7. { /*====================================
      8. Cette fonction construit des proverbes personnalisés en insérant
      9. deux mots saisis par l'utilisateur dans un proverbe à trous.
      10. Cette fonction accepte deux arguments et ne renvoie aucune valeur */
      11. // Si l'utilisateur n'a pas saisi de nom, prendre "fer" par défaut
      12. if (! nom)
      13. { nom = "fer" }
      14. // Si l'utilisateur n'a pas saisi d'adjectif, prendre "chaud" par
      15. // défaut
      16. if (! adjectif)
      17. {adjectif="chaud"}
      18. //Construire le proverbe et
      19. // l'afficher dans une boite de message
      20. window.alert("Il faut battre le "
      21. + nom
      22. + " quand il est "
      23. + adjectif
      24. + "!" )
      25. }
      26. // fin du script
      27. // fin de la dissimulation du code -->
      28. </script>
      29. </head>
       Au cas où l'utilisateur n'aurait rien saisi, on utilise deux mots par défaut.

      voir le résultat

      Le gestionnaire d'événements OnClick associé au bouton appelé Proverbe appelle la fonction afficherProverbe(). Lors de l'éxécution, lorsque l'utilisateur a cliqué sur le bouton Proverbe l'interpréteur Javascript envoie deux informations à la fonction afficherProverbe(): le nom et l'adjectif saisis par l'utilisateur.

      La fonction afficherProverbe() génère le proverbe et l'affiche.

    5. Erreurs fréquentes

      6. Pour corriger les erreurs, on tape la ligne Javascript: dans la barre de navigation. Cela ouvre la console de debuggage.
      Les erreurs les plus fréquentes sont: En fonction de la version du navigateur, vous aurez:

  3. Quelques notions de programmation

    1. Les variables

      2. Pour créer une variable, on dispose de deux méthodes: Un nom de variable doit suivre certaines règles:

    2. Les conditions

      3. Le script peut réagir automatiquement à des conditions. Les expressions conditionnelles sont de la forme:
      if (condition)
      {
      instructions 1
      }
      else
      {
      instructions 2
      }
      Par exemple:
      1. <script language="javascript">
      2. var a=1;
      3. if (a==2)
      4. { document.write(" ça vaut 2<br>");
      5. }
      6. else
      7. {document.write("ça ne vaut pas 2<br>");
      8. }
      9. if (a==3||a==2)
      10. { document.write(" ça vaut 2 ou 3 <br>");
      11. }
      12. else
      13. {document.write("ça ne vaut pas 2 ni 3<br>");
      14. }
      15. a=2;
      16. if (a==2)
      17. { document.write(" ça vaut 2 <br>");
      18. }
      19. else
      20. {document.write("ça ne vaut pas 2<br>");
      21. }
      22. if (a==3||a==2)
      23. { document.write(" ça vaut 2 ou 3 <br>");
      24. }
      25. else
      26. {document.write("ça ne vaut pas 2 ni 3<br>");
      27. }
      28. </script>
       On obtient


      Pour écrire ces conditions, il existe plusieurs opérateurs logiques (ET, OU,..) et plusieurs opérateurs de comparaison (égalité, différence,...)

      Il existe une deuxième instruction conditionnelle, évitant une accumulation de test:
      1. <script language="javascript">
      2. var a=5;
      3. switch(a)
      4. { case "1": document.write("ca vaut un")
      5. break
      6. case "2": document.write("ca vaut deux")
      7. break
      8. case "3": document.write("ca vaut trois")
      9. break
      10. default :document.write("c'est plus grand que trois")
      11. }
      12. </script>
       On obtient

    3. Les boucles

      4. Une boucle permet de répéter une certaine séquence un nombre de fois défini. Il existe trois types de boucles:
      for(initialisation du compteur; condition; action sur le compyeur à réaliser à chaque boucle)
      {
      instructions à exécuter
      }

      Par exemple:
      1. <script language="javascript">
      2. for (i=1; i<15; i++){
      3. document.write(" Ligne ",i," ");
      4. }
      5. </script>
       On obtient


      while(condition)
      {
      instructions à exécuter
      }

      Par exemple:
      1. <script language="javascript">
      2. var i=0;
      3. while (i<15) {
      4. document.write(" Ligne ",i," ");
      5. i++;
      6. }
      7. </script>
       On obtient


      Ou, en mettant la condition à la fin de la boucle:
      do
      {
      instructions – ex*cuter
      }
      while(condition)

      Par exemple:
      1. <script language="javascript">
      2. var i=1;
      3. do
      4. { document.write(" Ligne ",i," ");
      5. i++;
      6. }
      7. while(i < 15);
      8. </script>
       on obtient



      Avec certains navigateurs, les boucles sans fin ne peuvent être interrompues par l'utilisateur, sauf s'il ferme le navigateur - et même dans ce cas, on peut avoir un blocage.
      Il faut donc prévoir une porte de sortie.
      Par exemple:
      1. <script language="javascript">
      2. var j=0;
      3. while(j<15){
      4. j++;
      5. if (j==13) break
      6. document.write(" Ligne ",j," ");
      7. }
      8. </script>
       ce qui nous donne

      On peut également passer une valeur de l'indice grace à une condition intermédiaire:
      1. <script language="javascript">
      2. var j=0;
      3. while(j<15){
      4. j++;
      5. if (j==13) continue
      6. document.write(" Ligne ",j," ");
      7. }
      8. </script>
       ce qui nous donne


      Les boucles peuvent également servir à énumérer différentes propriétes d'un objet. Par exemple, les propriétes de l'objet navigator:
      1. <script language="javascript">
      2. for (i in navigator) {
      3. document.write("Propriété : "+i);
      4. document.write(" - valeur :" +navigator[i]+"<br>");
      5. }
      6. </script>
       ce qui nous donne

    4. Les fonctions

      5.

      1. Déclarer une fonction

        2. Il faut toujours déclarer une fonction avant de l'utiliser. Matériellement, elle doit se trouver ``au-dessus" dans votre programme (par exemple entre les balises <head> et </head>). Une fonction peut (mais ce n'est pas obligatoire) accepter des valeurs (des arguments). Elle se déclare de la façon suivante:
        function nom_de_votre_fonction (parametre1, parametre2){
        instruction 1;
        instruction 2;
        }

        Chaque déclaration de fonction doit être avec le mot-clé function. suivi du nom de la fonction que vous souhaitez définir. Ce noms se plie aux mêmes conventions que les noms de variables (ne doit pas commencer par un chiffre ni contenir d'espace,...). Les paramètres sont des variables que nous passons en référence à la fonction.

      2. Portée des variables

        3. Il existe deux types de variables déclarées dans des fonctions: les variables locales et les variables globales. Lorsque l'on crée une variable avec le mot-clé var, sa portée sera locale, c'est-à-dire que cette variable n'existera que dans cette fonction. Cela permet d'utiliser une variable sans se soucier de savoir si cette variable existe déjà dans le programme ou pas et sans avoir peur d'effacer la valeur de cette variable. Par exemple, toutes les variables de compteur peuvent être appelées compteur.
        Regardons un exemple:
        1. <script language="javascript">
        2. var mon_age=28;
        3. mon_nom = "Anne";
        4. /* Deux variables viennent d'être déclarées
        5. Elles ne sont pas dans une fonction et ont donc une portée globale,
        6. qu'elles soient ou non déclarées avec le mot-clé "var"
        7. */
        8. function vieillir()
        9. {
        10. mon_age = 29;
        11. var mon_nom="Philippe";
        12. }
        13. /*
        14. Dans la fonction vieillir() la variable mon_age est déclarée sans le mot "var", elle a donc une portée globale
        15. La variable mon_nom est déclarée avec le mot-clé "var" et a donc une portée locale,
        16. c'est à dire que mon_nom ne sera égal à "Philippe" que dans cette fonction et nulle part ailleurs
        17. */
        18. document.write('Mon âge : ');
        19. document.write(mon_age);
        20. document.write('<br>Mon nom : ');
        21. document.write(mon_nom);
         On écrit le nom et les variables. On a


        1. vieillir();
         On éxécute la fonction vieillir

        1. document.write('<br><br><br>Mon âge : ');
        2. document.write(mon_age);
        3. document.write('<br>Mon nom : ');
        4. document.write(mon_nom);
         Cette fois, on obtient:


        1. </script>
          2.
        On pense à fermer le script

        le résultat

    5. Les opérateurs logiques

      6. Ils permettent de combiner plusieurs conditions.
      Opérateur Symbole Exemple Effet
      ou || condition1 || condition 2 retourne vrai si l'une des conditions est vraie
      et && condition1 && condition2 retourne vrai si les deux conditions sont vraies
      non ! !condition retourne vrai si la condition est fausse, faux dans le cas contraire

    6. Les opérateurs de comparaison

      7.  Ils permettent de comparer des variables, qu'elles soient des chaînes de caractères ou des nombres.
      Opérateur Symbole Exemple Effet
      égalité == nombre == 3 Retourne vrai si la variable nombre est égale à 3, retourne faux sinon
      différence != nombre != 3 Retourne vrai si la variable nombre n'est pas égale à 3, retourne faux sinon
      infériorité stricte < nombre < 3 Retourne vrai si la variable nombre est inférieure à 3, retourne faux sinon
      infériorité < = nombre < =3 Retourne vrai si la variable nombre est inférieure ou égale à 3, retourne faux sinon
      supériorité stricte < nombre > 3 Retourne vrai si la variable nombre est supérieure à 3, retourne faux sinon
      supériorité < = nombre > =3 Retourne vrai si la variable nombre est supérieure ou égale à 3, retourne faux sinon

    7. Les opérateurs d'arithmétique

      8.  On peut utiliser des opérateurs d'assignation pour effectuer une opération sur une variable puis stocker le résultat dans cette même variable.
      1. <script language="JavaScript">
      2. var nombre =10;
      3. // Addition
      4. nombre +=1; // nombre vaut 11
      5. //Soustraction
      6. nombre -=4; // nombre vaut 7
      7. //Multiplication
      8. nombre *=4; // nombre vaut 28 (7*4)
      9. //Division
      10. nombre /=2; //nombre vaut 14 (28 /2)
      11. </script>
      On peut également utiliser des opérateurs d'incrémentation pour modifier la valeur d'une variable numérique.
      1. <script language="JavaScript">
      2. var nombre=10;
      3. //Incrémentation
      4. nombre++; // nombre vaut désormais 11
      5. // Décrémentation
      6. nombre--; //nombre vaut désormais 10
      7. </script>
       Il faut faire attention à la place des symboles ++:

      Imaginons que la variable nombre soit égale à 10
      resultat =nombre++;
      Dans ce cas, resultat vaut 10 et nombre vaut 11 car l'incrémentation ne s'effectue qu'après que la valeur de la variable à incrémenter a été envoyée.
      resultat=++nombre;
      Dans ce cas, resultat et nombre valent tous les deux 11, car l'incrémentation est faite avant l'envoi de la valeur.

    8. Les objets

      1. Les méthodes

        2. Une méthode est une fonction associée à un objet. Par exemple, l'instruction document.write est une méthode. Nous l'utilisons pour afficher du texte dans le navigateur. Elle est associée à l'objet document.
        Il peut exister plusieurs méthodes associées à un objet. Par exemple, document comprend aussi la méthode writeln qui est la copie conforme de write à ceci près qu'elle ajoute automatiquement un retour chariot (passage de ligne) après le texte affiché.

      2. Les chaines de caractères

        3. Dans le tableau suivant, la variable Phrase vaut "bonjour tout le monde" (i.e. on a tapé <script language="javascript"> Phrase="bonjour tout le monde" ... )
    Propriété Effet Script d'exemple Résultat
    length Renvoie le nombre de caractères compris dans la chaine <script language="javascript">
    Phrase="bonjour tout le monde" ;
    document.write(Phrase.length);
    </script>
         		.
    anchor("ancre") Définit la chaine de caractère comme étant une ancre
    Phrase.anchor("arret") est équivalent à la syntaxe HTML
    <a name="arret"> bonjour tout le monde </a>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    Phrase.anchor("arret");
    </script>
    big() Met le texte en gros caractère
    Phrase.big() est équivalent à la syntaxe HTML
    <big> bonjour tout le monde </big>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.big());
    </script>
    blink() Fait clignoter le texte (ne fonctionne que sous Netscape)
    Phrase.big() est équivalent à la syntaxe HTML
    <blink> bonjour tout le monde </blink>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.blink());
    </script>
    bold Met le texte en gras
    Phrase.bold() est équivalent à la syntaxe HTML
    <b> bonjour tout le monde </b>    		 <script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.bold());
    </script>
    fontcolor("couleur") Met le texte dans la couleur donnée
    Phrase.fontcolor("green") est équivalent à la syntaxe HTML
    <font color="green"> bonjour tout le monde </font>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.fontcolor("green"));
    </script>
    fontsize("taille") Met le texte à la taille indiquée
    Phrase.fontsize("4") est équivalent à la syntaxe HTML
    <font size=4> bonjour tout le monde </font>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.fontsize("4"));
    </script>
    italics() Met le texte en italique
    Phrase.italics est équivalent à la syntaxe HTML
    <i> bonjour tout le monde </i>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.italics());
    </script>
    link("URL") Définit le texte comme étant un lien hypertexte Phrase.link("http://www.gage.polytechnique.fr/~fredet") est équivalent à la syntaxe HTML
    <a href="http://www.gage.polytechnique.fr/~fredet"> bonjour tout le monde </a>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.link("http://www.gage.polytechnique.fr/~fredet"));
    </script>
    small() Réduit la taille du texte Phrase.small() est équivalent à la syntaxe HTML
    <small> bonjour tout le monde </small>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.small());
    </script>
    strike() barre le texte Phrase.strike() est équivalent à la syntaxe HTML
    <strike> bonjour tout le monde </strike>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.strike());
    </script>
    sub() Déplace la chaine vers le bas de la ligne Phrase.sub() est équivalent à la syntaxe HTML
    <sub> bonjour tout le monde </sub>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.sub());
    </script>
    sup() Déplace la chaine vers le haut de la ligne Phrase.sup() est équivalent à la syntaxe HTML
    <sup> bonjour tout le monde </sup>     		<script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.sup());
    </script>
    toLowerCase() Force la chaine en minuscule <script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.toLowerCase());
    </script>
    toUpperCase() Force la chaine en majuscule <script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.toUpperCase());
    </script>
    charAt(position) Retourne le caractère placé à la position indiquée par le paramètre (la première lettre d'une chaine est considérée en position 0) <script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.charAt(3));
    </script>
    indexOf("sous-chaine") Retourne la position de la sous-chaîne passée en paramètre. Il est possible d'ajouter un paramètre de début de recherche, disant où débuter la recherche. <script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.indexOf("jour"));
    document.write(Phrase.indexOf("o"));
    document.write(Phrase.indexOf("o",3));
    document.write(Phrase.indexOf("toto"));
    </script>
    lastIndexOf("sous-chaine") Retourne la position de la dernière sous-chaîne passée en paramètre. <script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.lastIndexOf("o"));
    </script>
    substring(debut,fin) Retourne la chaîne contenue entre les deux positions passées en paramètre <script language="javascript">
    Phrase="bonjour tout le monde";
    document.write(Phrase.substring(3,5));
    </script>

      1. Gestion des fenêtres

        2. Pour ouvrir une nouvelle fenêtre, on peut insérer dans une balise de lien <a> comme cadre de destination _blank . Cela donne <a href="fichier.html" target="_blank"> . Javascript permet d'améliorer cette fonction en paramètrant la fenêtre qui s'ouvrira. Pour cela, on utilise la m'ethode open de l'objet window. La syntaxe de cette méthode est
        nom_de_la_fenetre = window.open(URL, nom, paramètres).
        La variable nom_de_la_fenetre servira à écrire dans cette fenêtre, à la manipuler, à la déplacer, à la fermer ... URL est l'adresse de la page à ouvrir, elle peut êtrerelative ou absolue. Le nom de la fenêtre est à différencier de la variable Javascript, il sert au HTML par exemple pour les balises target. Par exemple,
        NouvelleFenetre=window.open("about:blank", "awindow", "height=200, width=400, toolbar=1");
        Le mot-clé "about:blank" indique au navigateur qu'aucune page ne doit être chargée. Les paramètres de la méthode window.open
        Paramètre Description Valeurs possibles
        alwaysRaised Définit si la nouvelle fenêtre sera toujours au-dessus des autres (Netscape seulement) 0 ou 1
        height Hauteur de la nouvelle fenêtre n exprimé en pixels
        left Distance de la nouvelle fenêtre par rapport à la gauche de l'écran n exprimé en pixels
        location Montre ou cache la barre d'adresse 0 ou 1
        menubar Montre ou cache la barre de menus 0 ou 1
        resizable Définit si la fenêtre est redimensionnable ou non 0 ou 1
        scrollbars Montre ou cache les barres de défilement 0 ou 1
        status Montre ou cache la barre de statut 0 ou 1
        toolbar Montre ou cache la barre d'outils 0 ou 1
        top Distance de la nouvelle fenêtre par rapport au haut de l'écran n exprimé en pixels
        width Largeur de la nouvelle fenêtre n exprimé en pixels

        Pour chacune des valeurs, 0 correspond à la négation et 1 à l'activation de la propriété. Les paramètres fournis doivent être séparés par des points-virgules. Leur ordre n'a pas d'importance.

        On peut écrire dans la fenêtre que l'on vient d'ouvrir:
        NouvelleFenetre.document.write('Bonjour');


        On peut également combiner un formulaire et l'ouverture de nouvelle fenêtre.

      2. Format de la date

        3. En Javascript les dates correspondent au nombre de millisecondes écoulées depuis le 1er Janvier 1970, minuit. Les dates avant 1970 ne sont pas autorisées.
        Pour créer une nouvelle date, il faut utiliser le mot-clé new. On peut spécifier la date à stocker dans l'objet lors de sa création. On peut utiliser plusieurs formats:
        anniversaire = new Date();
        anniversaire = new Date("25 octobre 2000 08:00:00");
        anniversaire = new Date(25,10,2000);
        anniversaire = new Date(25,10,200,8,0,0);
        On peut appliquer plusieurs méthodes à cet objet. Initialisaons une variable: var uneDate= new Date(1977,02,20,17,05,30) ainsi uneDate est définie comme étant le 20 mars 1977 à 17 h 05 min 30s (le compte des mois commence à 0).
        Méthodes pour lire la date ou l'heure
        Méthodes Effets
        getFullYear()Retourne l'année sur 4 chiffres de l'objet auquel il est associé.
        uneDate.getFullYear() retourne
        getMonth()Retourne le mois.
        uneDate.getMonth() retourne (Mars)
        getDate()Retourne le jour du mois.
        uneDate.getDate() retourne
        getDay()retourne le jour de la semaine.
        uneDate.getDay() retourne
        uneDate.getHours()Retourne l'heure.
        uneDate.getHours() retourne
        getMinutes()retourne les minutes.
        uneDate.getMinutes() retourne
        getSeconds()Retourne les minutes.
        uneDate.getSeconds() retourne
        getTime()Retourne le nombre de millisecondes écoulées depuis le 1er janvier 1970. Cela permet de comparer deux dates
        uneDate.getTime() retourne
        getTimezoneOffset()Retourne la différence entre l'heure locale et l'heure GMT
        Méthodes pour modifier la Date
        Méthodes Effets
        setYear() Permet d'affecter une année à l'objet auquel il est associé.
        uneDate.setYear(année) transforme la date en 20 Mars 2001
        setMonth(mois) Permet d'affecter un nouveau mois.
        uneDate.setMonth(0) transforme la date en 20 Janvier 1977
        setDate(jour) Permet d'affecter un nouveau jour du mois.
        uneDate.setDate(12) transforme la date en 20 Mars 1977
        setHours(heure) Permet d'affecter une nouvelle heure
        uneDate.setHour(12) transforme la date en 20 Mars 1977 à 12h05min 30s.
        setMinutes(minutes) Permet d'affecter des minutes.
        uneDate.setMinutes(55) transforme la date en 20 Mars 1977 à 17h 55min 30s.
        setSeconds(secondes) Permet d'affecter des secondes
        uneDate.setSeconds(15) transforme la date en 20 Mars 1977 à 17h 05 min 15s.
        setTime(secondes) Permet d'affecter un nouveau nombre de millisecondes
        uneDate.setTime(0) nous retourne la date de référence, à savoir le 1er janvier 1970 à minuit.
        Autres méthodes
        Méthodes Effets
        toGMTString() Retourne la date au format GMT.
        uneDate.toGMTString() retourne
        toLocaleString Retourne la date au format local prédéfini par la machine de l'utilisateur exécutant le script.
        uneDate.toLocaleString() retourne

  4. Interagir avec l'utilisateur

    1. Les boutons

      2.  Javascript nous permet également de réagir aux clics de l'utilisateur.


      Un bouton poussoir peut déclencher une action



      De même qu'un clic sur un bouton radio
      Bouton 1 Bouton 2 Bouton 3
      1. <script language="javascript">
      2. //<!--
      3. function MontrerEvenement(bouton)
      4. { alert("vous avez cliquez sur l'élément " + bouton.type + " appelé "+ bouton.value)
      5. }
      6. //-->
      7. </script>
      8. <form name="formulairebouton1">
      9. <br><br>
      10. Un <b> bouton poussoir </b> peut déclencher une action
      11. <br><br>
      12. <input type="button" name="lancer" value="Cliquez ici"
      13. onClick="MontrerEvenement(this) ">
      14. <br>
      15. <br>
      16. De même qu'un clic sur un bouton radio
      17. <br>
      18. <input type="radio" name="radioGroup" value="BoutonUn"
      19. onClick="MontrerEvenement(this)"> Bouton 1
      20. <input type="radio" name="radioGroup" value="BoutonDeux"
      21. onClick="MontrerEvenement(this)"> Bouton 2
      22. <input type="radio" name="radioGroup" value="BoutonTrois"
      23. onClick="MontrerEvenement(this)"> Bouton 3
      24. </form>
       Voici un tableau récapitulatif des événements reconnus par les différents types de boutons:
      élément Définition HTML événements reconnus
      button <input type="button" ...> onClick
      onDbleClick
      onMouseDown
      onMouseUp
      onFocus
      onBlur
      radio <input type="radio" ...> Les mêmes que button
      Submit <input type="submit" ...> Les mêmes que button
      Reset <input type="reset" ...> Les mêmes que button
      form <form ... > onReset
      onSubmit



      Les boutons précédent et suivant sont un peu différents et peuvent être crées automatiquement.

      le script permettant de gérer le bouton précédent:

      1. <a href="javascript:history.back();">
      2. <img border=0 src="imagesjavascript/flecheretour.gif">
      3. </a>

      le script permettant de gérer le bouton suivant:

      1. <a href="javascript:history.forward();">
      2. <img border=0 src="imagesjavascript/flecheavant.gif">
      3. </a>

    2. Les formulaires

      3. On peut méler javascript et des formulaires, pour interagir avec l'utilisateur. Par exemple:

      Générateur de proverbe

      Saisissez un nom et un adjectif, tous deux masculins. Cliquez sur le bouton "Proverbe" pour générer un proverbe
      Si vous faites une erreur ou si vous souhaitez recommencer, cliquez sur le bouton "effacer".


      Nom :

      Adjectif:


      Le script correspondant:
      1. <html>
      2. <head>
      3. <title> Générateur de proverbes en Javascript </title>
      4. <script language="javascript">
      5. <!-- Cacher cette partie du fichier pour les navigateurs ne reconnaissant
      6. // pas Javascript
      7. // Début du script
      8. function afficherProverbe(nom,adjectif)
      9. { /*====================================
      10. Cette fonction construit des proverbes personnalisés en insérant
      11. deux mots saisis par l'utilisateur dans un proverbe à trous.
      12. Cette fonction accepte deux arguments et ne renvoie aucune valeur */
      13. // Si l'utilisateur n'a pas saisi de nom, prendre "arbre" par défaut
      14. if (! nom)
      15. { nom = "fer" }
      16. // Si l'utilisateur n'a pas saisi d'adjectif, prendre "beau" par
      17. // défaut
      18. if (! adjectif)
      19. {adjectif="chaud"}
      20. //Construire le proverbe et
      21. // l'afficher dans une boite de message
      22. window.alert("Il faut battre le "
      23. + nom
      24. + " quand il est "
      25. + adjectif
      26. + "!" )
      27. }
      28. // fin du script
      29. // fin de la dissimulation du code -->
      30. </script>
      31. </head>
      32. <body>
      33. <center>
      34. <h1> Générateur de proverbe </h1>
      35. </center>
      36. Saisissez un nom et un adjectif, tous deux masculins.
      37. Cliquez sur le bouton "Proverbe" pour générer un proverbe<br>
      38. Si vous faites une erreur ou si vous souhaitez recommencer, cliquez sur le
      39. bouton "effacer".
      40. <br><br><br>
      41. <form name="formu">
      42. Nom : <input name="un_nom" size="25">
      43. <br><br>
      44. Adjectif: <input name="un_adjectif" size="25">
      45. <br><br><br>
      46. <input type="button" name="lancer" value="proverbe"
      47. onClick="afficherProverbe(document.formu.un_nom.value,
      48. document.formu.un_adjectif.value)">
      49. <input type="reset" name="effacer" value="effacer">
      50. </form>
      51. </body>
      52. </html>


    3. Les survols ("rollovers")

      4. L'utilisation la plus courante de Javascript dans le domaine des images est la création de survols, ces images qui changent d'apparence lorsque l'on pointe dessus. Les survols sont généralement employés pour les images qui servent de liens. On utilise un gestionnaire d'événements onMouseOver qui remplace l'image par sa version modifiée, et un gestionnaire onMouseOut qui rétablit l'image initiale. Regardons un exemple:

      Ce résultat est obtenu avec les instructions suivantes:
      <a href="#"
      onmouseover="dessin.src='imagesjavascript/Polar_bear.gif'"
      onmouseout="dessin.src='imagesjavascript/hublot_ile.gif'">
      <img name="dessin" src="imagesjavascript/hublot_ile.gif" height="150" width="150" border="0"/></a>
       Polar_bear.gif et hublot_ile.gif étant les noms des deux images qui se succèdent.

  5. Les cookies

    6. Ce sont de petits fichiers contenant des variables et leurs valeurs, stockés sur le disque dur de l'utilisateur (par exemple date de la dernière venue, nombre de passages sur le site,...).
    Un cookie a besoin de plusieurs paramètres, notamment Un cookie peut être considéré comme une variable à laquelle on doit donner un nom et affecter une valeur. On peut également définir une durée de vie pour un cookie. Si cette durée n'est pas précisée, il sera effacé quand l'utilisateur fermera son navigateur.
    pour créer un cookie: document.cookie = "nomducookie=valeurducookie;expires=DateExpirationAuFormatGMT"
    On peut également créer une fonction fixant la date d'expiration du cookie au 11 octobre 2020:

    function CreerCookie(nom,valeur)
    {
    dateExt= new Date(2020,11,11);
    dateExp =dateExp.toGMTString();
    document.cookie = nom +'=' + escape(valeur) +'; expires ='+dateExp+';';
    }
    On peut par exemple demander son nom au visiteur et le mémoriser dans un cookie:

    VisiteurNom = prompt('Entrez votre prénom','Votre prénom ici');
    CreerCookie("prenom",VisiteurNom);

    On peut lire le contenu de ce cookie: document.write(document.cookie).

    Un cookie stocke plusieurs données. Les couples nom-valeur sont séparés par des points-virgules (nom1=valeur1;nom2=valeur2;nom3=valeur3). On peut écrire une petite fonction permettant de lire les valeurs que l'on désire:

    function ScanCookie(variable)
    {
    cook = document.cookie;
    variable += '=';
    place = cook.indexOf(variable,0);
    if (place <= -1)
    return("0");
    else
    {
    end = cook.indexOf(";",place)
    if (end <= -1)
    return(unescape(cook.substring(place+variable.length,cook.length)));
    else
    return(unescape(cook.substring(place+variable.length,end)));
    }
    }

    On appelle ensuite cette fonction document.write(ScanCookie("prenom"))

  6. Références

    1. Livres

      • Javascript pour les nuls - E. A. Vander Veer
      • Javascript - e-Poche, Micro application

    2. Sites web