pour dynamiser le code HTML et CSS
Transcription
pour dynamiser le code HTML et CSS
1 J JavaScript S ipt pour dynamiser le code HTML et CSS Mod.IntegWeb MMI1 2014/2015 Généralités 2 CSS HTML 1 Le serveur web répond aux demandes de l’utilisateur en envoyant des pages HTML HTML 2 HTML 3 Demandes de l’utilisateur SERVEUR WEB CLIENT Généralités 3 CSS Le code JavaScript est exécuté dans le navigateur pour répondre aux demandes de l’utilisateur HTML 1 JAVASCRIPT HTML 2 HTML 3 SERVEUR WEB Demandes de l’ tili t l’utilisateur CLIENT Généralités Introduction JavaScript est utilisé en complément du code HTML pour: - afficher des informations variables telles que la date, l’heure - interagir avec les utilisateurs par le biais de boites de dialogues personnalisées - créer des menus dynamiques Le langage JavaScript permet de développer de véritables applications fonctionnant exclusivement dans le cadre d'Internet.(Webmail) JavaScript c’est simplement du texte intégré dans la page HTML - Pas besoin de compilateur - exécution dans le navigateur - n’utilise pas les ressources du serveur JavaScript est de plus en plus utilisé sur le net - Majorité des sites webmail, boutique en ligne, forum, utilise JS - Les utilisateurs bloque de moins en moins JS dans les navigateurs - Les risques avec JS beaucoup plus faible qu'avec qu avec Flash Flash, java et autres outils 4 Généralités 5 Définition JavaScript est - un langage orienté objet - destiné à créer de programmes appelés scripts - intégré aux pages HTML - directement exécutés par un programme navigateur (browser, IE, Firefox, Opéra, Chrome,…) JavaScript n’a aucun rapport avec le langage Java JavaScript est un langage de script simplifié orienté objet dont la syntaxe est basée sur celle du C ou php et de Java. Le langage JavaScript a été initialement élaboré par Netscape en association i i avec S Sun MicroSystem. Mi S Plus tard, Microsoft développera pp son p propre p langage g g JavaScript p officiellement connu sous le nom de JScript. Généralités Possibilités Avec JavaScript il est possible de créer des pages HTML dynamiques - en prenant en compte des données fournies par l’utilisateur - en enregistrant des données dans des variables ou des objets - en dialoguant avec l’utilisateur par le biais de boîtes de dialogues - en gérant des menus dynamiques, animés, évoluant en fonction du contexte - de récupérer sur le serveur des données (processus AJAX) JavaScript est capable de modifier la structure d’une page HTML - en modifiant l’arborescence du DOM (Document Object Model) - en modifiant les propriétés des objets constituant la page JavaScript est capable de modifier les propriétés de style - en modifiant les attributs de style des éléments de la page - en modifiant difi t les l propriétés iété CSS affectées ff té par une ffeuille ill d de style t l De nombreuses bibliothèques JavaScript sont disponibles pour étendre les possibilités du langage et fournir des modules assurant des fonctions évoluées : gestion d’effets d’affichage, transitions, outils d’affichage d’images, de menus animés, gestion de drag-and-drop, … 6 Historique et versions Le langage JavaScript a été initialement élaboré par Netscape en association avec Sun MicroSystem. (1995) Les versions de JavaScript p sont basées sur celle de l’ECMAScript p généralement abrégé ES. ES 1 et ES 2 (1995) versions initiales (très limitées) ES 3 (1999) version fonctionnant sur tous les navigateurs (sauf anciennes version d’IE supportant uniquement JScript) ES 4 version abandonné en raison de modifications importantes qui ne seront pas implémentées dans tous les navigateurs ES 5 ((2009)) dernière version implémenté p dans les derniers navigateur ES 6 futur version actuellement en développement 7 Résumé JavaScript est un langage de programmation interprété JavaScript est utilisé majoritairement dans des pages Web Comme HTML, JavaScript est exécuté par le navigateur de l’internaute l internaute JavaScript est standardisé par l’ECMA International sous le nom d’ECMAScript d ECMAScript La dernière version standardisée de JavaScript est b é sur l’ECMAS basée l’ECMAScript i t 5, 5 sortie ti en 2009 La nouvelle version V6 devrait être disponible en 2015 8 9 Le langage JavaScript coursdraoult.blogspot.fr Mod.IntegWeb MMI1 2014/2015 Premiers pas JavaScript est un langage essentiellement utilisé avec l’HTML. Il sera donc intégré au cœur d d’une une page HTML HTML. Premier exemple : afficher une boite de dialogue <!DOCTYPE html> <html> <head> <title> Bonjour le monde </title> </head> <body> <script> j le monde’); ) alert ((‘Bonjour </script> </body> </html> 10 Le langage JavaScript Fonctions minimales pour commencer : alert("message"); : cette fonction permet l'affichage d'une boite d'alerte. Cette boite de dialogue appartient au navigateur. navigateur prompt("message" , "valeur par défaut"); : Cette fonction affiche une boite de dialogue invitant l'opérateur l opérateur à saisir une réponse au message affiché. Elle retourne alors le texte saisi si l'opérateur à choisi OK ou la valeur null si l'opérateur à choisi ANNULER. confirm("message"); : g contenant le message g et deux boutons Cette fonction affiche une boite de dialogue permettant à l'opérateur de répondre la proposition du message. Elle retourne false pour le bouton [ANNULER] et true pour le bouton [OK]. 11 La syntaxe de JavaScript 12 La syntaxe de JavaScript est relativement simple et comparable à la syntaxe du langage C ou PHP. PHP D D’une une manière générale, générale les instructions doivent être séparées par un pointpoint virgule placé à la fin de chaque instruction. Exemples : Instruction_1; Instruction 2; Instruction_2; Instruction_3; Ou Instruction_1; Instruction_2; Instruction_3; Remarque q : il est p possible de rencontrer des codes JavaScript p sans ; il faut alors qu’il n’y ait pas d’ambiguïté sur la fin de l’instruction pour l’interpréteur, (retour à la ligne). Attention alors à la compression des scripts Pour éviter les problèmes TOUJOURS terminer les instructions par un point-virgule ; La syntaxe de JavaScript JavaScript n’est pas sensible aux espaces, ont en profitera pour structurer correctement les programmes en appliquant l’indentation. l’indentation Exemples : function Bidule(A,B) { if ( A > B ) { alert( " A plus grand que B " ); } else { plus p petit ou égale g à B" ); alert ( " A p } // comparaison de A et B // affichage message A>B // affichage g message g A<=B } Les commentaires : Commentaires en fin de ligne Commentaires sur plusieurs lignes // le commentaire /* première ligne du commentaire seconde ligne dernière ligne */ 13 Les instructions Les Instructions Nous avons trois type d'instructions : l'affectation = , l’appel de fonction, les structure de contrôles : les tests conditionnels et les boucles. Opérateur d'affectation: d affectation: UneVariable = 5; // on affecte la valeur 5 à la variable Appel de fonction : Appel d’une fonction retournant une valeur : L V i bl = NomFonction La_Variable N F ti (); () Appel d’une fonction ne retournant pas de valeur : NomFonction (); Appel d’une fonction recevant un paramètre et retournant une valeur : La Variable = NomFonction ( 5 ); La_Variable 14 Les instructions Les structures de contrôle : Les tests conditionnels : if ( Nb == 2) { Bloc d'instructions si conditions vraie } else { Bloc d'instructions si conditions fausse } Les boucles : do{{ bloc d'instructions exécutées tant que la condition est vraie } while( A < 5 ); 15 Où placer le code JavaScript? Le code JavaScript est inséré dans la page HTML au moyen de la balise <script>. Dans cette balise on trouve l'attribut l attribut type qui permet d'indiquer d indiquer le type du langage utilisé utilisé. Exemple : HTML 4 et XHTML 1.x Exemple : HTML 5 <script type="text/javascript" > <script > ... Code C d JJavaScript S i t ... ... Code C d JJavaScript S i t ... </script> </script> Compatibilité W3C : Il faut utiliser des commentaires d'encadrement <script type= type="text/javascript" text/javascript > <!-... Code JavaScript ... // > //--> </script> 16 Où placer le code JavaScript? 17 On peut placer le code JavaScript à différents endroits dans la page HTML : Dans l'élément <head> : emplacement généralement proposé, mais pas forcement idéal. Défauts : - Peut ralentir le chargement de la page - Risque de dysfonctionnement du code s'il est exécuté au chargement et qu'il fait page g p pas encore chargés. g référence à des éléments de la p (sinon utilisation de l'événement onload) Avantages : - les fonctions de ce code sont disponibles lors du chargement du contenu de la page (autorise l'insertion d'appel de fonction dans le contenu HTML). - Organisation et localisation du code au début de la page HTML. Pour palier aux défauts évoqués, on peut implanter le code JavaScript en fin de page HTML juste avant la balise </body>, mais attention il ne faut pas d'appel de fonction de ce code d inséré i é é dans d l éléments les élé t HTML. HTML Pour mémoire : il est également possible d'implanter du code JavaScript au milieu du code HTML, mais c'est à éviter. Où placer le code JavaScript? Dans un fichier externe : On peut également retrouver le code JavaScript dans un fichier externe. Généralement le code contenu dans un fichier externe correspond à des fonctions utilisées dans plusieurs page d'un d un site Web Web. Ces fichiers sont généralement des bibliothèques de fonctions ou des extensions de JavaScript (Framework : Prototype Prototype, Dojo... Dojo ou jQuery) . Un fichier externe JavaScript portera l'extension .js <body> <script p src= "MesFonctions.js" j ></script> p ( en html 5)) </body> Evidemment le fichier "MesFonctions.js" sera dans le même répertoire que le fichier HTML, sinon on ajoutera le chemin du répertoire contenant le fichier. 18 19 LE DOM Document Object j Model Le Navigateur Navigateur image Champ de saisie Window 20 Window Document L'objet document 21 L'objet document représente la page Web. Le document peut être vue comme un arbre <!doctype html> <head> <html> <head> <meta> <title> <meta charset="utf-8" /> <title>Le titre de la page</title> #texte </head> <body> <div> <p>Un peu de texte <a>et un lien</a></p> </div> </body> </html> <html> <body> <div> <p> #texte <a> #t t #texte Le DOM et JavaScript Exemple JavaScript nous permet donc de manipuler et d'éditer les éléments d'une page web Accès aux éléments : getElementById() : Depuis le DOM-2 nous avons à notre disposition cette méthode qui nous permet de faire référence aux éléments de la page possédant un identifiant id dans ses attributs. getElementsByTagName() : Cette méthode permet de récupérer, sous forme d'un tableau, tous les éléments d'une famille de balises. Exemple : récupérer toutes les div d'une page html var Lesdiv = document.getElementsByTagName ('div'); for (var i= 0, c= Lesdiv.length ; i <c ; i++ ) { alert("Element n° " + (i+1) + " : " + Lesdivs [ i ] ); } Remarque : si on remplace 'div' par '*' le tableau contient tous les éléments de la page 22 Le DOM et JavaScript getElementsByName() : Cette méthode permet de récupérer, sous forme d'un tableau, tous les éléments ayant la même valeur sur l'attribut Name. Exemple avec une page HTML pour les attributs name = "Test" Test var LesElements = document.getElementsByName ('Test'); for (var i= i 0, 0 c= c LesElements .length length ; i <c ; i++ ) { alert("Element n° " + (i+1) + " : " + LesElements [ i ] ); } Attention : cette méthode n'est plus supporté par html5. propose p les méthodes suivantes : La nouvelle norme p querySelector() et querySelectorAll() Ces nouvelles méthodes ne sont pas encore supportées par tous les navigateurs, en attendant des bibliothèques telle que jQuery propose des méthodes équivalentes de sélection 23 Le DOM et JavaScript Démo Modification des attributs JavaScript nous permet l'accès aux attributs des balises : En lecture : getAttribute ( ) La méthode getAttribute reçoit en paramètre le nom de l'attribut : 'href', 'name', 'id' ... En écriture : setAttribute ( ) La méthode setAttribute reçoit en paramètre le nom de l'attribut et la nouvelle valeur. Attention : lors de l'utilisation des ces méthodes il faut évidement que le nom d'attribut p bien à un attribut existant. donné aux fonctions,, corresponde Si l'attribut n'est pas définit ou si c'est un attribut qui n'existe pas pour l'élément la méthode retourne la valeur null. 24 Le DOM et JavaScript 25 Modification des attributs Exemple de modification d'un lien dynamiquement: <body> <a id="L1" href="http://www.orange.com">Un lien modifié dynamiquement</a> <script> i t var lien = document.getElementById('L1'); var href = lien.getAttribute('href'); alert(href); lien.setAttribute('href', 'http://www.google.fr'); </script> </body> // On récupère l'attribut href // On affiche le lien // On modifie l'attribut href Le DOM et JavaScript 26 Modification des attributs Pour JavaScript la plupart des éléments autorisent également un accès direct aux attributs. Exemple : <a id="L1" href='http://google.fr' > google </a> <script> var lien = document.getElementById( 'L1' ); li h f = "http://bing.fr"; lien.href "htt //bi f " // modification difi ti direct di t de d l'URL </script> Attention cas particuliers : pour l'attribut class il faut utiliser className pour l'attribut for de <label> il faut utiliser htmlFor p Le DOM et JavaScript 27 Modification du contenu La propriété innerHTML permet de récupérer le code HTML enfant d'un élément sous forme d'une chaine de caractère. Exemple : <div id="D1"> <a id= id='L1' L1 href= href='http://google http://google.fr fr' > google </a> </div> <script> script var laDiv = document.getElementById( 'D1' ); var ChaineHTML = laDiv.innerHTML; // récupération du code HTML </script> ChaineHTML contient alors "<a id='L1' href='http://google.fr' p g g >g google g </a>" Le DOM et JavaScript Modification du contenu La propriété innerHTML permet également de modifier le code HTML enfant d'un élément en lui affectant une chaine de caractères contenant du code HTML. Exemple : <div id="D1"> <a id= id="L1" L1 href= href='http://google http://google.fr fr' > google </a> </div> <script> script var laDiv = document.getElementById( 'D1' ); // on affecte un nouveau code HTML dans la div laDiv innerHTML = "<a id="L1" href='http://bing.fr' laDiv.innerHTML href='http://bing fr' > bing </a>"; </script> Le code HTML contenu dans la div est maintenant : "<a id="L1" href='http://bing.fr' > bing </a>" 28 Le DOM et JavaScript Modification du contenu Les propriétés L iété innerText i T t ett textContent t tC t t sontt utilisable tili bl comme innerHTML, i HTML mais i elles ne retournent ou ne modifient que le texte (pas les balises html). Pourquoi deux propriétés différentes ? L L'incompatibilité incompatibilité des navigateurs navigateurs. innerText à été introduite dans Internet Explorer mais jamais standardisée. La propriété standardisée est : textContent , interprétée sur tous les navigateurs et sur IE > 9; chrome accepte le deux, mais pas FireFox (textContent).... Problème : comment utiliser ces fonctions avec tous les navigateurs ? Avec JavaScript, il est possible à l'aide d'une simple condition de tester si le navigateur prend en charge une méthode ou une propriété. Exemple : if ( objet.innerText ) { alert(" le navigateur est Internet Explorer "); } else l { alert (" le navigateur n'est pas Internet Explorer "); } 29 Le DOM et JavaScript Modification du contenu Exemple E emple pl plus s complet a avec ec l'affichage d' d'un n conten contenu a avec ec la gestion d du ttype pe de na navigateur. igate r <body> <div id="D1"> <p>Un peu de texte <a>et un lien</a></p> </div> <script> var ladiv = document.getElementById( document getElementById('D1'); D1 ); var txt = ''; if (ladiv.textContent) { // « textContent » existe ? Alors on s'en sert ! txt = ladiv.textContent; } else if( ladiv.innerText) { // « innerText » existe ? Alors on doit être sous IE. txt = ladiv.innerText ; } else { // Si aucun des deux n'existe,, pas p de texte txt = ''; // on force une chaîne de caractères vide } alert(txt); </script> </body> 30 Le DOM, JavaScript et les événements 31 Les événements : IlIls permettent tt t de d déclencher dé l h une ffonction ti llorsqu'une ' action ti estt produite d it par l'utilisateur ou par un événement interne au navigateur. Par exemple : une fenêtre alert() apparait lorsque la souris survole un élément de la page html. Exemple : <span span onmouseover onmouseover="alert( alert( ' survol de la zone' zone ); );"> Texte de la zone </span> /span Ici l'événement mouseover fait appel au code JavaScript alert('survol de la zone') attention à la syntaxe on ajoute on devant le nom de l'événement. Le DOM, JavaScript et les événements 32 Les événements : Événement Syntaxe Déclencheur click onclick Cliquer sur l'élément dblclick ondblclick Double-cliquer q sur l'élément mouseover onmousover Faire entrer le curseur de la souris sur l'élément mouseout onmousout Faire sortir le curseur de la souris de l'élément mousedown onmousedown Appuyer sans relâcher le bouton gauche de la souris sur l'élément mouseup onmouseup Relâcher le bouton gauche de la souris sur l'élément l élément mousemove onmousmove Déplacer la souris sur l'élément keydown onkeydown Appuyer sans relâcher une touche du clavier sur l'élément keyup onkeyup Relâcher une touche du clavier sur l'élément keypress onkeypress Frapper (appuyer puis relâcher) une touche du clavier sur l élément l'élément Le DOM, JavaScript et les événements 33 Les événements : Événement syntaxe déclencheur focus onfocus Cibler un élément placer par exemple le curseur text dans un p de saisie champ blur onblur Annuler le ciblage d'un élément, quitter un champ de saisie change onchange Le contenu d'un champ de saisie (input, textarea, ...) à changé h é select onselect Sélection d'un contenu d'un champ texte submit onsubmit Envoyer un formulaire reset onreset Réinitialiser un formulaire Le DOM, JavaScript et les événements 34 Une première utilisation sur les liens : O utilise On tili lla b balise li <a> pour appeler l d du code d JJavaScript S i t: <a href="#" onclick="alert('Vous avez cliqué !'); " > Cliquez ici </a> href="#" : le lien pointe sur une cible interne à la page qui n'existe pas ! onclick : on détermine sur quel événement le code JavaScript sera exécuté alert('Vous avez cliqué !'); : le code JavaScript à exécuter Attention A i : avec cet exemple, l lle clic li sur ce lilien dé déclenche l h bi bien lle code d JJavaScript S i mais tente également de suivre le lien "#" qui n'existe pas, le navigateur repositionne alors votre page au début. (cela risque de perturber l'utilisateur) Solution : il faut neutraliser le lien <a href="#" onclick="alert('Vous ( avez cliqué q !'); ); return false;; " > Cliquez q ici </a> return false; : bloque le lien Le DOM, JavaScript et les événements 35 Demander la confirmation de suivre un lien: On ajoute O j t donc d à lla b balise li <a> lle code d JJavaScript S i t assurantt lla d demande d d de confirmation de suivre le lien : <a href= href="http://google http://google.fr fr" onclick= onclick="return return confirm( confirm('Confirmez-vous Confirmez-vous ? ?'); ); " >Google</a> href="http://google.fr" : le lien pointe sur le site de google onclick : exécute le code qui retourne la réponse de la boite de dialogue confirm() L'utilisation des liens pour déclencher directement du code JavaScript est simple et rapide, mais il ne faut pas oublier que c'est plutôt utiliser pour naviguer entre les pages p g web. Idéalement on utilisera la balise <button>. Le DOM, JavaScript et les événements 36 Les événements avec le DOM-1 et le DOM-2 : Précédemment P é éd t nous n'avons ' pas utilisé tili é le l DOM pour gérer é les l événements, é é t l'appel l' l direct dans les balises du code JavaScript n'utilise pas l'API DOM. Il existe d'autres d autres techniques de gestion des événements à connaître connaître. DOM-1 : on n'affect plus l'événement dans la code HTML mais dans du code JS <span id="S1">Cliquez-moi !</span> <script> var element = document.getElementById( document getElementById('S1'); S1 ); // récupération référence objet element.onclick = function() { alert("Vous m'avez cliqué !"); }; // affectation d'une fonction JS sur l'événement onclick de l'élément </script> Cette méthode valable sur tous les navigateurs est considérée comme obsolète, mais par les p programmeurs. g elle reste très souvent utilisée p Pour la suppression de l'événement : element.onclick = function() {}; // fonction vide Le DOM, JavaScript et les événements 37 Les événements avec le DOM-0 et le DOM-2 : DOM-2 DOM 2 : Il permett l'affectation l' ff t ti de d plusieurs l i fonctions f ti sur un même ê événement é é t d'un d' objet. C'est une caractéristique qui facilite la création de bibliothèques qui exploite les événements. Attention : problème de compatibilité avant IE 9. Exemple p : var element = document.getElementById('S1'); // récupération référence élément // création d'une d une fonction anonyme et récupération d'une d une référence sur cette fonction var LaFonction = function() {alert("Vous m'avez cliqué !"); }; // ajout de la fonction dans le gestionnaire d'événements d événements de l'objet l objet pour le click element.addEventListener('click', LaFonction, false); Pour la suppression de l'événement : element.removeEventListener('click',UneFonction, false); Démo Le DOM, JavaScript et les événements 38 Les événements avec le DOM-0 et le DOM-2 : DOM 2 : Problème DOM-2 P blè d de compatibilité tibilité avec IE Avant IE9 nous avons les deux méthodes suivantes pour gérer les événements du DOM-2 : attachEvent() et detachEvent(). detachEvent() Exemple de code pour gérer la compatibilité des navigateurs : function addEvent(element, ( , event,, func)) { if (element.addEventListener) { // l'élément possède la méthode addEventListener() element addEventListener(event func, element.addEventListener(event, func false); } else { // l'élément ne possède pas la méthode addEventListener() element attachEvent('on' element.attachEvent( on + event, event func); } } // appell de d la l fonction f ti d'ajout d' j t d'événements d'é é t sur un élé élémentt addEvent(element, 'click', function() { /* le code de la fonction */ }); Le DOM, L'objet event 39 L'objet event : il fournit un ensemble d'informations sur l'événement déclenché. Par exemple quelles touches sont enfoncées, les coordonnées du curseur de la souris... • Cet objet est particulier car il n'existe que lorsqu'un événement est déclenché. • On ne peut y accéder que dans une fonction déclenchée par un événement événement. • Le DOM passe en paramètre à la fonction l'objet événement "event". Attention les versions < IE9 ne supporte pas ce mode de fonctionnement fonctionnement, il faut récupérer les information dans window.event. Exemple de prise en compte de l'objet l objet event element.onclick = function (e) { alert(e.type); }; ou element.addEventListener( l t ddE tLi t ( 'click' ' li k' , function(e) f ti ( ) { alert(e.type); l t( t ) } , false f l ); Le DOM, L'objet event Démo L'objet event : Les principales propriétés ttype : permett de d savoir i quell ttype d'é d'événement é t s'est ' t dé déclenché. l hé Elle contient le nom de l'événement sans le on. target: retourne une référence sur l'objet l objet qui à déclenché l'événement l événement e.target sera équivalent à this, attention valable uniquement en DOM-2 Exemple p : changement g du texte sur un <span> p après p un clic <span id="S1">Cliquez-moi !</span> <script> var LeSpan = document.getElementById('S1'); LeSpan.addEventListener('click', function(e) { g = 'Vous avez cliqué q !';; e.target.innerHTML }, false); </script> 40 Le DOM, L'objet event L'objet event : Les principales propriétés altkey : booléen indiquant si la touche alt est enfoncée ctrlkey : booléen indiquant si la touche ctrl est enfoncée shiftkey : booléen indiquant si la touche shift est enfoncée Keycode y : code de la touche p pressée (p (pour l'événement keypress) yp ) clientX (pageX) : coordonnée X de la souris dans la fenêtre clientY (pageY) : coordonnée Y de la souris dans la fenêtre screenX : coordonnées X de la souris sur l'écran screenY : coordonnées Y de la souris sur l'écran l écran button : renvoie le bouton de la souris 41 Le DOM, L'objet event Démo L'objet event : exemple d'affichage des coordonnées de la souris sur le document function afficheSouris(e){ var AFF = document.getElementById("Aff"); // récupération de la position XY var EV = e || window.event; // gestion IE ou les autres navigateurs X = EV.clientX || EV.pageX; // idem Y = EV.clientY EV clientY || EV.pageY; EV pageY; // idem var Chaine = "X : " + X + " Y : " + Y; // construction de la chaine d'affichage AFF.innerHTML = Chaine; // affichage de la chaine dans la page } // implantation du gestionnaire d'événement sur le document document onmousemove = afficheSouris; document.onmousemove <body> g de la p position de la souris Affichage <div id="AFF"> </div> </body> 42 Le DOM, JavaScript et les Formulaires 43 Les formulaires: ils sont composés de contrôles permettant à un utilisateur d'entrer des informations. On retrouve les éléments suivants : <input> type= "text" text type= "hidden" type= "password" type= "radio" type= "checkbox" type= "submit" type= "reset" " " champ de saisie texte champ caché champ de saisie spécialisé mot de passe bouton radio case à cocher bouton envoi formulaire b bouton reset fformulaire l i <select> boite de liste Le DOM, JavaScript et les Formulaires 44 Les formulaires: accès à la valeur d'un champ texte E Exemple l : <script> var T = document.getElementById( document getElementById("CT"); CT ); var contenu_champ = T.value; T.value = "Nouveau contenu";; </script> <body> <form . . . // récupération référence // lecture du contenu // modification du contenu > <input type="text" id="CT" value="Valeur initiale" /> </form> Le DOM, JavaScript et les Formulaires 45 Les formulaires: accès à une case à cocher On obtient l'état l état d d'une une case à cocher avec la propriété checked Exemple : <script> var C = document.getElementById("case1"); if (C.checked) { alert ("la case est cochée"); } else { alert ("la case n'est pas cochée"); } </script> <body> <form . . . // récupération référence > <input p type="checkbox" yp id="case1" value="Valeur case" /> <input type="checkbox" id="case2" value="Valeur case" /> </form> Le DOM, JavaScript et les Formulaires 46 Les formulaires: accès a une boite de liste on gère les listes déroulantes avec les propriétés : selectedIndex et options. La propriété selectedIndex donne l'index de la valeur sélectionnée. On récupère alors la valeur sélectionnée dans le tableau options. Exemple : <script> p var L = document.getElementById("liste"); var index = L.selectedIndex; var valeur = L.options[ L options[ index].value index] value ; </script> // récupération référence Code html : <select size = "8" id="liste"> <option value="Choix 1" > le choix 1</option> <option p value="Choix 2" > le choix 2</option> p <option value="Choix 3" > le choix 3</option> </select> Le DOM, JavaScript et les Formulaires 47 Les formulaires: l'événement submit cet événement est déclenché lors d'une d une demande d'envoi d envoi de formulaire. On peut implanter une fonction sur cet événement. Généralement elle sera chargée de vérifier le contenu des champs avant de valider l'envoi du formulaire. Cette fonction doit retourner un booléen afin de valider l'envoi l envoi ou de le bloquer bloquer. Exemple : function Envoi() { if (champOK) { return true; } else l { return false; } } Code html : <f <form id "F1" onsubmit=" id="F1" b it " return t E Envoi(); i() "> Le DOM et JavaScript Retour sur le LANGAGE JavaScript 48 Les variables JavaScript Définition : Une variable est une zone de la mémoire dans laquelle on enregistre tout types de données, des valeurs numériques, des chaines de caractères ou des structures de données plus particulières. Pour pouvoir utiliser une variable il faut la nommée et la déclarée. Règle sur les noms de variables : ne peut contenir que des caractères alphanumériques, c-à-d les lettres de A à Z et les chiffres de 0 à 9. peut également contenir l'underscore _ et le dollar $. ne peut pas commencer par un chiffre. peut p pas utiliser de mots-clés utilisé p par JavaScript. p Ne p Attention JavaScript est un langage sensible à la casse, il faut faire attention aux majuscules et minuscules utilisées. Mavariable ou MAVARIABLE ou maVariable sont trois variables différentes. 49 Les variables JavaScript Déclaration d'une variable : Pour déclarer une variable on utilise le mot-clé var. Exemple : var MaVariable; var Variable; IInitialisation iti li ti des d variables i bl : On peut initialiser une variable lors de sa déclaration en utilisant le signe =. var MaVariable M V i bl = 5; 5 // on déclare dé l lla variable i bl MaVariable M V i bl ett on lui l i affect ff t le l valeur l 5 On peut déclarer et initialiser plusieurs variables sur une seule ligne en les séparant par des virgules , : var V1, V2, V3 = 5.5, V4 = 0, V5 = 10 ; Initialisation de deux variables avec la même valeur : var V1,V2; V1 = V2 = 3; 50 Les Types de variables 51 Contrairement à d'autres langages, JavaScript est un langage typé dynamiquement. Toute déclaration de variables se fait avec le mot-clé var qui n'indique pas le type de la variable, contrairement par exemple au langage C qui lui indique le type de la variable lors de sa déclaration. déclaration Avec JavaScript le contenu d'une variable peut changer de type au cours de l'exécution du programme. programme Trois type de variables : •Le type numérique (number) •Le type chaîne de caractères (string) yp booleen ((boolean)) •Le type Les Types de variables 52 Le type numérique (number) Ce type représente tout nombre entier ou réel, positif ou négatif. Pour assigner un type à une variable, il suffit de lui affecter un nombre. Exemple : var VariableNombre = 5; // on assigne un entier var VariableNombre = 3.14; // on assigne un nombre décimal var VariableNombre = 5.45 e+3; // on assigne un réel en notation scientifique var VariableNombre = 0xFA15; // on assigne g un entier au format hexadécimal Les Types de variables Le type chaine de caractères (string) Ce type représente une chaine de caractères (succession de caractères). Deux méthodes d'assignation d assignation : var Texte = "Une chaine de caractère"; var Texte = 'Une Une chaine de caractère'; caractère ; Attention : var maVariable = '125';; // avec des guillemets // avec des apostrophes // on assigne g le caractère 125 à la variable et p pas la valeur // numérique 125 Problème des ' et " dans les chaines de caractères var Texte = 'C'est une chaine à problème' // cette variable contient seulement 'C' Solution : il faut échapper l'apostrophe var Texte = 'C\'est une chaine à problème' 53 Les Types de variables 54 Le type booléen (boolean) Un booléen est un type à deux états : vrai ou faux (true, false) Exemple : var Vrai = true; var Faux = false; L'instruction typeof : permet de déterminer le type yp d'une variable. Cette instruction nous p var Nombre = 2; Chaine = typeof Nombre // chaine contient "number" var UnTexte = "un texte exemple"; Chaine = typeof UnTexte // chaine contient "string" var UnBooleen = true; Chaine = typeof UnBooleen Chaine = typeof UneVariable // chaine contient "boolean" // la variable UneVariable n'est pas initialisée la chaine // contient "undefined" Les opérateurs arithmétiques Nous pouvons manipuler les contenus des variables en appliquant des opérateurs arithmétiques. arithmétiques Opérateurs disponibles : Addition Soustraction Multiplication Division Modulo + * / % reste de la division entière Exemple : var Resultat = 5 + 8: // Resultat contient 13 Var V1=2, V2 = 4, V3 = 2; Resultat = ( V1 + V2 ) * V3; // Resultat contient 12 55 Les opérateurs arithmétiques Simplification de l'écriture des calculs. Exemple : var Nombre = 2; Nombre = Nombre + 5; Ecriture équivalente : Nombre + += 5; S'applique sur tous les opérateurs ; += // ajoute j une valeur à une variable -= // soustrait une valeur à une variable *= // multiplie une variable par une valeur par une valeur /= // divise une variable p %= // affect à une variable le modulo de cette variable avec un nombre Attention, ce raccourci d’écriture est à utiliser avec précaution, il peut parfois rendre la lecture du code plus difficile. 56 Les opérateurs arithmétiques 57 Priorité des Opérateurs Arithmétiques En JavaScript, les opérateurs ont plusieurs niveaux de priorités. Les expressions sont évaluées de la gauche vers la droite tant que les opérateurs ont le même niveau. niveau S S’ilil y a des opérateurs de priorités différentes, les opérateurs ayant la priorité la plus élevée sont évalués en premier. La multiplication et la division ont un niveau de priorité plus élevé que l’addition et la soustraction. p arithmétiques. q Pour contrôler les effets de Donc attention à l’écriture des expressions priorité, utilisez toujours les parenthèses afin de contrôler l'ordre d'exécution des opérations. Les opérateurs unaires Il existe également des opérateurs utilisant une seule opérande, se sont les opérateurs unaires : ++ incrémentation d’une valeur - - décrémentation d’une valeur - inversion du signe d’une valeur Exemples : var Somme = 34; Somme++; Somme--; S Somme = -Somme; S // la variable somme contient 34 // la variable somme contient 35 // la variable somme contient 34 // la l variable i bl somme contient ti t -34 34 58 Concaténation Conversion de type 59 Particularité de l'opérateur + : En plus de faire des additions additions, cet opérateur permet de faire des opérations sur les chaines de caractères : la concaténation. Elle consiste à ajouter une chaine de caractères à la fin d'une d une autre autre. Exemple : var Chaine1 = 'bonjour' bonjour , Chaine2 = 'le le monde'; monde ; var Chaine3 = Chaine1 + " " + Chaine2; // Chaine3 contient "bonjour le monde" peut évidement utiliser également g l'opérateur p += sur les chaines de caractères On p Exemple : j '; var Chaine = 'Bonjour Chaine += 'le monde'; // Chaine contient "Bonjour le monde" Conversion de type Attention au type des variables lorsque vous utilisez l'opérateur + Exemple 1 : var Chaine = "Voici le résultat de 2x4 : ", Res; Res = Chaine + 2 2*4; 4; Alert(Res); Exemple 2 : var V1, V2, resultat; V1 = prompt('Entrez le premier nombre :'); prompt('Entrez p( le second nombre :'); ); V2 = p resultat = V1 + V2; alert(resultat); // Saisie d'une chaine de caractères dans V1 // Saisie d'une chaine de caractères dans V2 // Addition des deux variables dans resultat // Affichage du résultat 60 Conversion de type Attention au type des variables lorsque vous utilisez l'opérateur + Exemple 3 : var V1, V2, resultat; V1 = prompt( prompt('Entrez Entrez le premier nombre :'); : ); V2 = prompt('Entrez le second nombre :'); resultat = V1 * V2; alert(resultat); 61 Conversion de type 62 Afin de lever l'ambiguïté nous devons convertir les chaines de caractères en nombre. Nous avons à notre disposition les fonctions suivantes: parseInt() parseFloat() Chaine entier Chaine flottant Exemple 2 : var V1, V2, resultat; V1 = prompt('Entrez le premier nombre :'); // Saisie d'une chaine de caractères dans V1 V2 = prompt('Entrez le second nombre :'); // Saisie d'une chaine de caractères dans V2 resultat = parseInt(V1) + parseInt(V2); // Addition des deux variables dans resultat // avec la conversion des chaines en entiers alert(resultat); // Affichage du résultat Conversion de type Conversion d'un nombre en chaine de caractères est généralement pris en charge naturellement par JavaScript lors d'affichage d affichage avec par exemple la fonction alert. alert Dans certains cas il peut être nécessaire de placer un nombre dans une chaine de caractère. caractère L'objet number possède plusieurs méthodes permettant la conversion des nombres en chaines de caractères (plus loin dans ce cours) Une astuce simple permet de forcer la conversion d'un nombre dans une chaine : Exemple var Chaine, N1 = 10, N2 = 5; Chaine = '' + N1 + N2; alert(Chaine); Chaine = N1 + N2; alert(Chaine); // la chaine vide '' force la concaténation // Il n'y a pas de chaine à droite du = l'addition est // arithmétique 63 Les constantes 64 Il est parfois nécessaire de définir une valeur une fois pour l'utilisé en lecture sans jamais la modifier JavaScript propose pour cela le mot-clé modifier. mot clé const. const Exemple : const PI = 3.14116; 3 14116; On ne peut affecter une valeur à une constante que lors de sa déclaration. Le code suivant ne fonctionnera pas : const Chaine;; Chaine = "Bonjour"; alert(Chaine); La boite de dialogue d'alerte affichera : undefined car la deuxième ligne n'a aucun effet. Les conditions 65 Les conditions sont basées sur les booléens. Une condition sera vraie ou fausse (true, false). false) Une condition est le résultat d'une comparaison. Si la comparaison est vrai la condition recevra true sinon false. false var Condition = false, A = 2, B = 2, C = 5; Opérateurs de Signification p comparaison Condition = (A == B); alert(Condition); // affichage de true == égal à != différent de Condition = (A == C); alert(Condition); // affichage de false === contenu et type égal à !== contenu et type différent de > supérieur à >= supérieur ou égal à < inférieur à <= Inférieur ou égal à Les conditions 66 Nous avons également des opérateurs permettant de combiner les conditions. Opérateurs logiques Type logique && ET Exemples : || OU var C1, C2 = true, C3 = true, C4 = false; ! NON Les opérateurs logiques : C1 = C2 && C3; C1 = C2 && C4; C1 = C2 || C4;; C1 = !C2; C1 = !(C2 && C4); // C1 true // C1 false // C1 true // C1 false // C1 true Combinaisons des opérateurs : var A = 2, B = 4, C = 4; C1 = (A == B) && (B == 4); C1 = (A == B) || (B == C); // C1 false // C1 true Structure de contrôle if 67 Première structure de contrôle : if On exécute des instructions si une condition est vrai. Syntaxe : if ( condition ) { ... Bloc d'instructions si condition = true } Condition est un booléen. Ce booléen peut être une variable ou une expression composée de variables et d'opérateurs de comparaisons ou d'opérateurs logiques. Exemple : if (A >= 2) { p g grande ou égale g à 2 "); ) alert ( "La variable A est plus } Structure de contrôle if else Seconde structure de contrôle : if else Si la condition est vrai on exécute un bloc d'instructions d instructions sinon on exécute un autre bloc d'instructions. Syntaxe : if ( expression ) { . . . Instructions exécutées si expression = Vrai } else { . . . Instructions exécutées si expression = faux } Exemple : if ( A==0 ) { g à zéro "); ) alert ( " La variable A est égale } else { alert ( " La variable A est différente de zéro "); } 68 Structure de contrôle if else if Seconde structure de contrôle : if else if Si la condition est vrai on exécute un bloc d'instruction sinon on exécute un autre bloc d'instructions. Syntaxe : if ( expression ) { . . . Instructions exécutées si expression = vrai } else if ( expression2 ){ . . . Instructions I t ti exécutées é té sii expression2 i 2 = vraii ett expression i = ffaux } else { . . . Instructions exécutées si expression2 = faux et expression = faux } Exemple : if ( A==0 ) { alert ( " La variable A est égale à zéro "); ); } else if ( A > 0 ) { alert ( " La variable A est supérieur à zéro"); } else { alert ( " La variable A est inférieur à zéro "); } 69 Structure de contrôle switch Lorsque l'on doit choisir plusieurs traitements en fonction de différentes valeurs contenue dans une variable la structure de contrôle switch est plus adaptée que le if else if Syntaxe du switch : switch ( variable ) { case Première_valeur(s) : . . . Instruction; [break;] case Seconde_valeur(s) : . . . Instruction;; [break;] ....... _ ( ): case Derniére_valeur(s) . . . Instruction; [break;] default: . . . Instructions; } Exemple : switch (choix) { case 1 : function Un(); function_Un(); break; case 2 || 5 : function_Deux_ou_Cinq(); q(); break; defaut: function_Autre(); _ () } 70 Boucle while (...) ... 71 Les boucles Elles utilisent un test conditionnel comme l’instruction if … else … Toutefois, il n'y à qu'un seul bloc de code, qui est exécuté aussi longtemps que la condition est vraie. La plus simple des boucles commence par tester une condition. Si la condition est vraie le bloc est exécuté, puis la condition est testée de nouveau. On quitte la boucle lorsque la condition n'est plus vrai. Exemple: Nb = 0; while( Nb < 10) { Nb++; } Cette boucle sera exécutée 10 fois. // initialisation de la variable Nb // Test si Nb est inférieur à 10 // exécution du bloc, ici on incrémente la // variable Boucle do ... while (...) 72 La boucle do … while Dans l’exemple précédent, si la condition est immédiatement fausse, le code à l’intérieur de la boucle n’est jamais exécuté. Lorsqu’il est nécessaire que la boucle soit exécutée au moins une fois on utilise la boucle do … while. Dans ce cas la condition est évaluée à la fin de la boucle, donc la première évaluation de la condition est réalisée après la première itération de la boucle boucle. Exemple: Nb = 0;; do { Nb++; } while( Nb < 10); Boucle for 73 La boucle for Plutôt que de tester une condition, la boucle for exécute un bloc de code un nombre de fois déterminé. Sa structure : for ( valeur_initiale ; condition ; modification_valeur_courante) {… } Généralement on associe à une boucle for au moins une variable de boucle,, initialisé avec une valeur de début. Cette variable est alors testée dans la condition de poursuite de la boucle. Afin de progresser dans la boucle cette variable et modifiée à chaque itération ((modification valeur courante). ) Exemple: for ( var i=0 ; i < 10 ; i++) { document.writeln(″I=″ + i + ″Bonjour <br> ″); } Les ternaires 74 L’unique Opérateurs ternaire de JavaScript Les opérateurs vus précédemment avaient une ou deux opérandes. Il existe un opérateur avec trois opérandes qui est parfois nommé opérateur condition. Exemple: var Nb = 1.0; var resultat = ( Nb > 0.5 ) ? " Valeur supérieure à 0,5 " : " Valeur inférieur ou égale à 0,5 " ; Si la condition est vrai ll’opérateur opérateur retourne la deuxième opérande sinon il retourne la troisième opérande. C’ t un raccourcii par rapportt à l’l’utilisation C’est tili ti d’ d’un bl bloc if … else l