Initiation au JavaScript (merci à Xavier Merrheim et Jean Gourdin http://www.ac-creteil.fr/util/programmation/javascript/ )
Sommaire Introduction --------------------------------------- 3 Les bases (afficher une chaîne, une image, concaténer, fonctions, variables) ------------------------------------------ 9 Date et heure ------------------------------------- 17 Evt de saisie par INPUT ----------------------- 20 Evt de saisie par formulaire ------------------ 25 Déclencher des évts javascript -------------- 30 Faire des sommaires élaborés (animés) -- 32 Compléments ------------------------------------ 38 Ouvrir un fenêtre Passer des paramètres entre fenêtres Lien HREF à choix multiples
Introduction Crée fin 1995 par Netscape et Sun Microsystems Objectif : rendre les pages HTML dynamiques On peut inclure un programme en JavaScript à l'intérieur d'une page HTML C'est un script (petit programme) encadré par <script language=JavaScript> et </script> Le programme sera exécuté par le navigateur sur le poste client Décharge le serveur Évite les temps d'attente (délais de réponse) On peut ainsi programmer des animations et des effets en tout genre
Présentation rapide JavaScript (JS) est un langage structuré MAIS : Structures de contrôle (if, while,…) Structures de données (variables locales, globales, tableaux,…) JS contient des gestionnaires d'événement MAIS : Langage de scripts dépendant de HTML (extension pour enrichir et rendre plus interactif le HTML) Ne peut fonctionner seul (≠ JAVA) JS fonctionne avec des classes d'objets mais ce n'est pas un réel langage orienté objet (pas d'héritage de classe, ni de polymorphisme)
Code JS : à 3 endroits différents Entre les balises <SCRIPT>....</SCRIPT> dans la section d'en-tête, ou dans le corps de la page Associé à une balise HTML qui gère un événement Syntaxe : <Balise onEvenement = "code JS " > souvent associé à l'appel d'une (ou plus) fonctions Nous verrons quels événements sont utilisables sur quelles balises Associé au pseudo-protocole javascript: dans une URL (appel distant comme http: ou ftp:) <A HREF="JavaScript:code JS ou fonction JS" …> texte </A>
Exécution Le code inclus dans la séquence <SCRIPT> est évalué au début du chargement de la page S'il est inclus dans la section <HEAD>, il n'est pas exécuté tout de suite mais il est rendu activable AVANT le chargement complet de la page Par contre, s'il fait partie du corps du document, il est immédiatement exécuté en même temps que le code HTML est interprété
Quelques remarques … JavaScript est sensible à la casse ! (Différence avec le HTML) Commentaires abondants recommandés : // pour une simple ligne de commentaires /* .....*/ pour les encadrer sur plusieurs lignes On peut placer le code dans un fichier spécifique d'extension .JS : <SCRIPT LANGUAGE=JavaScript SRC=source.js> </SCRIPT> Ça permet de réutiliser un script JS depuis plusieurs pages Attention ! source.js doit être un fichier accessible au moment de l'exécution, dans le répertoire courant ou à une adresse URL précisée
document.write(chaine) JavaScript contient des fonctions prédéfinies Par exemple, pour afficher une chaîne à l'intérieur du document HTML courant : document.write(chaine s) Cette commande affiche aussi des nombres ils sont transformés en chaîne par le navigateur
Un premier exemple <script language=JavaScript> <HTML> <HEAD> <TITLE> Exemple JS1</TITLE> </HEAD> <BODY> <H1>Un exemple de Javascript</H1> Le JavaScript est exécuté <B>avant l'affichage</B> sur le navigateur<P> <script language=JavaScript> document.write("Bonjour, cette chaine est écrite à partir de JavaScript."); </script> <P> Salut, ce texte fait aussi partie du corps du document mais il est écrit en HTML.<br> Il n'y a PAS DE DIFFERENCE pour l'utilisateur. <A HREF=index.html>RETOUR</A> </BODY> </HTML> Cf exemple1.html
Concaténation de chaînes <SCRIPT LANGUAGE="JavaScript"> var bonjour = "Bonjour !"; var question = "Comment allez vous "; var phrase = bonjour + "<BR>" + question; document.write(phrase, "aujourd'hui ?"); </SCRIPT>
Affichage d'une image OU en passant par une variable : A NOTER : <SCRIPT language = "JavaScript" > document.write("<IMG SRC= '../../images/mon_rat.jpg'> <BR> <H1> Une photo de mon meilleur ami</H1><P>"); OU en passant par une variable : var img = "<IMG SRC='../../images/mon_rat.jpg'> <BR> <H1> Une photo de mon meilleur ami</H1>" ; document.write(img,"<P>"); A NOTER : les apostrophes pour ne pas couper la chaîne JS Les guillemets autour des balises HTML dans document.write()
Structures de contrôles En JavaScript, on peut utiliser le if, le for, le while même syntaxe qu'en C++ Exemples : for(i=0;i<5;i++) document.write("i vaut "+i+"<BR>"); j=90; if(j>50) document.write("j est plus grand que 50<BR>"); else document.write("j est plus petit que 50<BR>"); k=0; while(k<4) {document.write("k vaut "+k+"<BR>");k++;} Voir exemple 2
Les fonctions On peut écrire des fonctions avec paramètres en JavaScript Les déclarations de fonctions sont à inclure dans la section <HEAD>..</HEAD> Les variables sont par défaut locales On peut définir des variables globales par var Exemple (voir exemple 3 et exemple31): function f(s) { for(i=0;i<3;i++) document.write(s+"<BR>"; j=j+1; document.write("j vaut : "+j+"<BR>"); } var j=0;
Non typage des variables Les variables peuvent changer de type au cours de l'exécution d'un programme Langage dit "à typage faible" Ceci n'est pas vraiment un avantage du JavaScript : un léger bug peut aboutir à des résultats étranges! Cela nuit gravement à la structure des programmes voir exemple 4
Valeurs numériques Valeur max possible en javascript : 1.79769 e+308 Valeur min possible : 5 e-324 Valeur non numérique : constante NaN (Not a Number) ex.: afficher( "chaine"*1 ) NaN Afficher (1/0 ) Infinity Afficher (-1/0) -Infinity
Les tableaux Pour définir un tableau à 10 cases toto=new Array(10); on utilise ensuite toto comme un tableau en C++ toto[3]=14; voir exemple 5
Affichage de la date et heure <SCRIPT language = "JavaScript" > var date = new Date(); // déclaration d'une variable de type Date // la variable date contient alors la date courante var mois = date.getMonth() + 1; // getMonth() retourne le N° du mois à partir de 0 (à 11) var jour = date.getDate() ; var annee = date.getYear(); if (navigator.appName =='Netscape') annee = annee + 1900 ; // getYear() donne le numéro de l'année à partir de 1900 // Netscape et Mozilla donnent les années à partir de 1900 document.write("<B>Date</B> " , jour, " / ", mois, " / "+annee, "<BR>"); document.write("<B>Heure</B> ", date.getHours(), " : ",date.getMinutes(), " : ",date.getSeconds() ) </SCRIPT> Cf exempleDate.html
Notation objet Objet.méthode() Convention d'écriture java : appel de la méthode d'un objet Convention d'écriture java : Les noms de méthode commencent par des minuscules et chaque nouveau mot par une MAJUSCULE : getMonth(), getYear(), etc. la post-incrémentation : i++; est autorisée aussi en JavaScript Elle signifie : j’utilise i puis je lui ajoute 1 ensuite (i = i + 1;) (++i; signifie "j'incrémente i de 1 puis je le retourne")
Exercice 1 Faire un premier fichier JavaScript : qui calcule la somme des 100 premiers entiers non nuls affiche le résultat Modifiez-le script pour que l'affichage montre la somme à chaque pas
Saisie par ligne de texte Pas de blanc entre < et INPUT !! Ligne de texte <INPUT TYPE="text" NAME="Nom du champ" VALUE="texte initial" SIZE=longueur ou MAXLENGTH=nb > Les divers paramètres TYPE="text" est facultatif, car il s'agit du type de champ par défaut; sinon : "button" ou "password" pour cacher les caractères saisis NAME pour préciser le nom du champ (utile pour récupérer la valeur ensuite). VALUE pour donner un texte initial au champ. SIZE fixe la longueur visible du champ (éventuellement son contenu défile vers la gauche). MAXLENGTH pour limiter le nombre de caractères pouvant être entrés dans le champ.
Exemple 6 Déclaration / définition d'une fonction <script language=JavaScript> function essai() { alert("BONJOUR TOUT LE MONDE"); } </script> déclaration dans l'entête, c'est mieux ! Alert() est une fonction prédéfinie qui affiche une boîte de dialogue simple avec retour par OK ou échap Appel déclenché par un clic (évenement onClick) sur un bouton créé par JS (button): <form> <input TYPE=button VALUE=CLIQUEZ onClick="essai()"> </form>
Fonction alert(texte) Cliquez <form> <input type="button" value="Cliquez" onClick = "alert('Coucou, c\'est moi !')"> </form>
Les Formulaires Un formulaire form est un objet inclus dans un objet document (page HTML) Toute la partie formulaire de la page doit se trouver entre les marqueurs <FORM> ....</FORM> Cette balise sert de conteneur pour accueillir les éléments ou composants du formulaire un bouton, une ligne de texte, une liste de choix… Chacun de ces composants s'y trouve déclaré est créé individuellement par une balise qui commence généralement par INPUT ou par SELECT
Règles de nommage Formulaire Chaque formulaire porte un nom, par exemple F1 On donne un nom au champ texte par exemple X La valeur du champ texte du formulaire F1 est l'objet JavaScript : document.F1.X.value Pour récupérer ce qui a été saisi: eval(ch) permet d'obtenir l’objet correspondant à la chaîne ch Et notamment eval(object.value) la valeur entière correspondant au texte saisi (voir exemple 7 slide suivant)
Exemple 7 (1) Fonction de calcul : <script language=JavaScript> function calculer() { var x,y; x=eval(document.F1.X.value); y=eval(document.F1.Y.value); document.F1.Z.value = x+y; } </script>
Exemple 7 (2) Formulaire de saisie et d'affichage <FORM name=F1> TAPEZ X: <input type=text size=20 name=X><br> TAPEZ Y: <input type=text size=20 name=Y > <input TYPE=button VALUE=CALCULER onClick="calculer()"> <br> le résultat de x+y est : <input type=text size=20 name=Z > </FORM>
Envoyer un formulaire Attribut ACTION de FORM qui précise le mode de transmission Pour un envoi par mail : <FORM ACTION="mailto:nom destinataire@nom serveur" METHOD="POST"> .................. <INPUT TYPE="SUBMIT" VALUE="Envoyer" <INPUT TYPE="RESET" VALUE="Effacer" </FORM> Voir un exemple plus complet de formulaire : jsFormulaire.html
Saisie dans une fenêtre On utilise la méthode prédéfinie prompt() prenom = prompt( "Ecrivez votre prénom",""); document.write("Bonjour ",prenom," !");
Modifier une image On peut donner un nom à une image : par exemple im Le source de cette image est alors l'objet JavaScript document.im.src Voir l'exemple 8 Toutes les images d'un document sont numérotées et stockées dans un tableau : elles correspondent aux objets JavaScript document.images[i] Voir l'exemple 9
Objets JavaScripts On peut stocker des objets JavaScript dans des variables Exemple : x=document.im; Pour modifier cette image, il faut ensuite écrire x.src = "xxx.gif" Voir exemple 10
Les événements JavaScript On peut déclencher l'exécution d'un programme en JavaScript en réponse à une multitude d'événements: clic sur un bouton, clic sur un lien, saisie du texte dans un champ de formulaire, etc. Sur un clic <A HREF="Javascript:cliquer()">CLIC</A> voir exemple 11 Par le passage sur un zone écran <A onMouseOver="Javascript:cliquer()">CLIC</A> voir exemple 12 Redonner le focus à un champ : document.F1.Nom.focus(); voir exempleFocus
Liste des événements onBlur : se produit quand un champ Textarea, Text ou Select n'est plus activé. onChange : se produit quand un champ Textarea, Text ou Select est modifié par l'utilisateur. onClick : se produit quand un composant Button, Checkbox, Radio Link, Reset ou Submit reçoit un click souris onFocus : se produit quand un composant Textarea, Text ou Select est activé. onLoad : se produit quand le navigateur a fini de charger une fenêtre ou toutes les frames d'un FRAMESET. L'événement onLoad se positionne dans la balise BODY ou dans la balise FRAMESET onMouseOver : se produit quand la souris passe sur un Hyperlien ou une zone activable d'une image. onSelect se produit quand un composant Textarea ou Text est sélectionné. onSubmit : se produit quand un formulaire est globalement validé appui du bouton Submit. onUnload :se produit quand on quitte un document. L'événement onUnload se positionne dans la balise BODY ou dans la balise FRAMESET. onAbort : se produit quand l'utilisateur interrompt le chargement d'une image onError : se produit quand le chargement d'une page ou d'une image produit une erreur. onMouseout : se produit quand la souris quitte une zone Area d'une image ou un hyperlien. onReset : se produit quand on clique sur le bouton reset d'un formulaire
Gestionnaires d’évts JS et Balises HTML Gest. événement provoqué par l'utilisateur qui ... sur les objets ... onBlur enlève le focus du composant text, textarea, select onChange change la valeur d'un texte ou d'un composant à options onClick clique sur un composant ou un hyperlien button, checkbox, radio, reset, submit onFocus donne le focus au composant onLoad charge la page dans le navigateur balises BODY, FRAMESET onMouseOut la souris quitte un lien ou une ancre balises <A HREF..>, <AREA HREF..> onMouseOver bouge la souris sur un lien ou une ancre onReset efface les saisies d'un formulaire bouton reset onSelect sélectionne une zone d'édition d'un formulaire text, textarea onSubmit soumet un formulaire bouton submit onUnload quitte la page
Effacer du texte Attention, ne marche pas pour tous les navigateurs ? (Mozilla et IE : OK) Les feuilles de style possède un champ visibility valant 'visible' ou 'hidden' (caché) On peut modifier dynamiquement un feuille de style pour effacer ou faire réapparaître un paragraphe. Le champ visibility de la feuille de style du paragraphe d'identifiant toto est l'objet JavaScript : document.all.toto.style.visibility Voir exemple 13
Un sommaire On peut réaliser des sommaires avec des frames mais on peut aussi les réaliser en JavaScript. Avantage : on n'a besoin que d'un seul fichier Selon les cas, l'une ou l'autre des techniques peut être utilisée Voir l'exemple 14 La fonction eval permet de transformer une chaîne de caractères en objet JavaScript Voir l'exemple 15
Déplacer du texte <BODY onload="Javascript:ma_fonction();"> On utilise setTimout(s,t) qui exécutera l'instruction s après t millisecondes. Il s'agit d'une sorte de récursivité : la fonction de déplacement s'appelle elle-même via setTimeout() Cette technique permet notamment d'avoir plusieurs animations simultanées Voir l'exemple 16
Exemple 17 On a écrit une fonction d'animation générale et réutilisable dans le fichier anim.js On insère ce fichier par : <SCRIPT Language="JavaScript" SRC="anim.js"> </SCRIPT> Ce fichier JS ne contient qu'une fonction La fonction deplace() avec l'entête suivante : function deplace(objet,xdebut,ydebut,xfin,yfin,nb,temps,suite) {… }
anim.js function deplace (objet, xdebut, ydebut, xfin, yfin, nb, temps, suite) { // objet : objet à déplacer // xdebut, xfin ; xfin, yfin : coordonnées des points de départ et d’arrivée // nb : nombre de répétitions du déplacement // temps : durée en millisecondes entre 2 déplacements // suite : instruction à exécuter ensuite (à la fin du déplacement) if(nb!=0) { d=eval("document.all."+objet+".style"); xdebut=xdebut+(xfin-xdebut)/nb; ydebut=ydebut+(yfin-ydebut)/nb; d.left=xdebut; d.top=ydebut; nb=nb-1; setTimeout("deplace('"+objet+"',"+xdebut+","+ydebut+","+xfin+","+yfin +","+nb+","+temps+",'"+suite+"');",temps); } else setTimeout(suite,temps);
Sommaire animé On peut rendre un sommaire plus attractif en gérant l'apparition animée de paragraphes Il ne faut pas en faire de trop ! Voir les exemples 18 et 19
Effets sur les liens On peut faire des effets intéressants en changeant une image lorsqu'on passe sur un lien hypertexte Voir l'exemple très rudimentaire 20
Compléments Javascript Ouvrir une nouvelle fenêtre Passage de paramètres entre fenêtres Emplacement des scripts Un lien HREF avec choix multiple
1. Ouvrir une fenêtre Syntaxe : window.open ('URL', 'nom_fenêtre', 'caractéristiques') Attention pas d’espace dans la chaine caractéristiques ! On peut préciser avec resizable si le visiteur peut redimensionner la fenêtre. Les valeurs top et left permettent de positionner (par rapport à la fenêtre maître) la nouvelle fenêtre. Exemple : <form> <input type="button" value="Exemple" name="Exemple" onClick="window.open('fenetre.htm', 'Exemple', 'width=250,height=300,top=120,left=120')"> </form>
Caractéristiques d'une fenêtre 1) menubar (défaut : no). 2) toolbar (défaut : no). 3) location (défaut : no). 4) status (défaut : no). 5) scrollbars (défaut : no).
Fermer la fenêtre créée A l'intérieur de cette fenêtre on peut créer un bouton de fermeture : <form> <input type="button" value="Fermer" onclick="window.close()"> </form> Cf fichier exCreationFenetre.html
2. Passage de variables avec window.location.href On peut passer des variables d'une page html à une autre Une méthode possible est d'envoyer la ou les variable(s) dans l'URL de la page demandée et de les récupérer lors du chargement de cette page Soit la page appelante : base.html et la page appelée : option.html Du côté de la page appelante, base.html Générer la chaîne de requête : var requete= " var1=' " +var1+" '; var2="+var2+"; " ; (avec var1 qui vaut Lorie et var2 qui vaut '2', on obtient bien : var1='Lorie';var2=2; Notez les quotes autour des noms des variables)
Page appelante (suite) On va ensuite « url-encoder » : requete = escape(requete) ; Puis appeler la page option.html: window.location.href = « option.html?" + requete ; (surtout ne pas oublier le point d'interrogation)
Passage de variables (2) Dans le fichier option.html, on va déclarer les variables que l'on veut récupérer, et on leur donne des valeurs par défaut au cas où … var var1 = "défaut", var2 = 0 ; (elles doivent avoir les mêmes noms !! Analyse de la chaîne envoyée…) On récupère ce qui a été envoyé lors de l'appel du fichier : var requete = window.location.search ; Si la chaîne envoyée est vide, on utilise les valeurs par défauts, sinon on opère sur la sous-chaine commençant après le 1er caractère (le '?') if (requete) { requete=requete.substring(1) ;
Page appelée (suite) on « url-décode » cette chaîne : requete = unescape(requete) ; et enfin, puisqu'on a pris soin de générer du javascript, on l'exécute : eval(requete); } (le '}' final ferme le test if (requete) ) On se retrouve alors avec une variable var1 contenant la chaîne "Lorie" et une variable var2 valant 2 L’exemple ne fonctionne pas : à revoir!
Remarque sur l'url-encodage L'url-encodage est une technique de sécurité pour éviter que des caractères spéciaux n'aillent se balader dans les noms de fichier Et entraîner des réactions désagréables du serveur L'inconvénient est que le script "url-encodant" ne marche pas directement en local avec Explorer 5 (et antérieur) qui va alors chercher en vain un fichier : option.html?var1%3D%27Lorie%27%3Bvar2%3D2%3B sur le disque Il faut donc désactiver provisoirement cet encodage/décodage lors des mises au point en local
Autre méthode : passage paramètres avec window.open Depuis la fenêtre appelante, ouvrir une fenêtre : <INPUT type="button" value="Ouvrir le popup" onClick="window.open('popchoix.html','popupchoix’, 'width=300,height=150,menubar=no,status=no‘" On récupère des informations du popup pour les replacer dans un formulaire de la fenêtre appelante. En fait avec window.open, le serveur considère qu’on reste dans le même script il suffit d’utiliser les noms de champs du formulaire et de variables qui sont donc connus (portée des variables dans les 2 fichiers) Nom page
Dans la fenêtre appelée <FORM> <SELECT name="liste" onChange="Reporter(this)"> <OPTION value="">Votre choix ...</OPTION> <OPTION value="Voiture">Voiture</OPTION> <OPTION value="Moto">Moto</OPTION> <OPTION value="Vélo">Vélo</OPTION> </SELECT> </FORM> Voir l’exemple popcom.html
Envoi d’un item de choix SELECT function Reporter(list) { var valeur = list.options[list.options.selectedIndex].value; window.opener.document.forms["origine"].elements["choix"].value=valeur; } Nom du formulaire dans la fenêtre appelante Nom du champ du formulaire dans la fenêtre appelante
3. Emplacement des scripts Est-il possible d'utiliser un identificateur (par exemple une fonction ou une variable indiquant le type de navigateur utilisé par le client) à un endroit de la page HTML alors qu'il est défini dans un script placé plus loin dans la page ? Oui ! Au moment du chargement, tout le code Javascript est analysé quel que soit son emplacement dans la page Si bien que dans n'importe quel endroit de la page, on peut référencer une variable, pourvu qu'elle soit définie au plus haut niveau et donc qu'elle soit visible En fait, tous les éléments JavaSript d'une page constituent les parties d'un seul et même programme JavaScript
4. Lien par image avec choix On peut avoir un lien qui propose une image et passe par une fonction pour sa partie fonctionnelle : En cliquant sur l'image ci-dessous, un dialogue vous permettra de choisir entre les 3 sites suivants : Le journal "La Provence" Le journal "Libération" Le journal "Le Monde" <a href="" OnClick="this.href=choix()"><img src="../Images/Choisir.jpg" width="72" height="30" border="0></a>
Lien par image avec choix function choix(){ var Num=prompt(<Message>); //Choix de l'utilisateur switch(Num) { case 1 : return <URL 1>; case 2 : return <URL 2>; ... case <i> : return <URL i>; ... default : return "#"; //Renvoi # si réponse non prévue } }
Modifier plusieurs cadres à la fois Il y a deux façons de changer plusieurs cadres depuis un unique lien : Une solution HTML et une solution Javascript La solution HTML consiste à faire un lien qui pointe sur un nouveau plan de découpage spécifiant une nouvelle combinaison de cadres avec TARGET="_top" (ce qui remplacera la fenêtre en cours) sauf si les cadres à mettre à jour font partie d'un plan de découpage imbriqué. Ainsi dans le plan initial, on utilisera un plan secondaire pour définir la partie imbriquée. Par exemple : <FRAMESET COLS="*,3*"> <FRAME SRC="contenus.html" NAME="Contenus"> <FRAME SRC="plan2.html" NAME="Affichage"> </FRAMESET> Un lien peut maintenant utiliser TARGET="Affichage" pour remplacer simultanément tous les cadres définis par plan2.html.
Modifier plusieurs cadres à la fois Solution en Javascript La solution JavaScript utilise l'attribut onClick du lien pour mettre à jour le 2ème cadre. Par exemple : <A HREF="URL1" TARGET=Cadre1 onClick="top.Cadre2.location='URL2';"> Mettre à jour les deux cadres </A> Le lien va mettre à jour Frame1 avec URL1; et si l'utilisateur a installé JavaScript, alors Cadre2 sera également mise à jour.
Divers liens… Etude des événements onMouse sur une image en coordonnées Démo explications sur : http://www.ac-creteil.fr/util/programmation/javascript/Jour2/c-evenement.html Images et zones réactives (map) http://cyberzoide.developpez.com/html/map.php3