Si le test est passé avec succès, un lien vers la page est affiché avec le message qui donne le résultat du test. if (test_cookie()=="oui"){ document.write(’<a href="monautrepage.php"> mon autre page</a>’); } Un compteur Voici un autre exemple d’application : un compteur de visiteurs. Le programme est composé de plusieurs fonctions encapsulées. L’encapsulation L’encapsulation consiste à écrire un programme de sorte qu’il puisse être utilisé par différents scripts. En JavaScript, c’est une fonction ou un objet. Ici la fonction ranger_biscuit() peut être appelée dans n’importe quelle circonstance. Le compteur vous servira à identifier les visiteurs sur votre site et à reconnaître les fidèles qui reviennent régulièrement. Afficher le nombre de visiteurs sur votre page rangerait votre site dans les antiquités encore en ligne. Par contre, un visiteur sera flatté d’avoir été remarqué comme étant intéressé par le thème du site et, éventuellement, d’avoir un petit privilège pour cette raison. L’application ici a une architecture savante. Voyez d’abord les lignes de code puis les différentes fonctions au fur et à mesure qu’elles sont appelées : var expiradate = new Date(); var visites; expdate.setTime(expiradate.getTime() + (24 * 60 * 60 * 1000 * 365)); if(!(visites = manger_biscuit("visites"))) { visites = 0; } else { visites++; } Le JavaScript Double Poche CSS • 751 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. ranger_biscuit("visites", visites, expdate, "/", null, false); Les deux premières lignes déclarent et initialisent les variables expira- date et visites. Ensuite, chaque variable est nourrie. La variable expiradate repousse la date d’une année. La variable visites est affectée du chiffre 0 ou incrémentée selon le résultat ou non de l’appel à la fonction manger_bis- cuit(). Le test porte sur le résultat de l’appel à la fonction. Le contenu de la propriété cookie La propriété cookie de l’objet cookie contient les paires nom=valeur de tous les cookies disponibles pour cette page particulière. En outre, chaque cookie contient des caractéristiques facultatives comme expires, la date d’expiration, path, le chemin pour lequel il est valide, domain, le domaine du serveur, secure, le drapeau sécurité (true ou false). Quand vous allez fouiller dans un cookie grâce à document.cookie, vous avez une ou plusieurs paires nom=valeur.Le nom est celui du cookie et la valeur, sa valeur. La chaîne obtenue est terminée par un point-virgule. Si la page ne dispose que d’un seul cookie, les paires sont séparées par un point-virgule suivi d’un espace. Pour tester votre cookie, vous pouvez utiliser l’expression documen- t.write(document.cookie);. Ainsi vous afficherez son contenu. Voyez les fonctions. Les deux principales sont appelées dans les lignes de code précédentes : manger_biscuit() et ranger_biscuit(). La fonction manger_biscuit() récupère les données du cookie. L’argu- ment employé est le nom du cookie. Rappel : document.cookie est une chaîne qui peut contenir un ou plusieurs cookies. La première partie de la fonction s’attache à identifier la longueur de la chaîne qui suit l’expression nom= (c’est-à-dire le mot visites). Ici la variable qui contient la valeur du cookie prendra le nom $visites. Une première évaluation du cookie valide le fait que la taille du biscuit est plus grande que 0 au moyen d’un while. Si ce n’est pas le cas, la fonction retourne null. 9 Les CSS se marient bien 752 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Dans le while, la valeur de i est 0. Vous créez une variable j qui est égale à la longueur du nom (visites) et du signe =. La méthode substring() vérifie que le premier nom est celui qui est en argument de la fonction ; si c’est le cas, la position du premier caractère de la valeur est envoyée à la fonction ingredients_biscuit(), sinon i prend la valeur du mot qui suit immédiatement l’espace, c’est-à-dire le nom du deuxième cookie, et ainsi de suite jusqu’à ce que le test soit vrai. La méthode substring() La méthode substring() utilisée abondamment pour analyser la propriété cookie de l’objet document est nourrie par deux arguments : le premier donne la position du premier caractère et le second donne la longueur totale de la chaîne. function manger_biscuit (nom) { var arg = nom + "="; var longueur_nom = arg.length; var taille_biscuit = document.cookie.length; vari=0; while (i < taille_biscuit) { varj=i+longueur_nom; if (document.cookie.substring(i, j) == arg){ return ingredients_biscuit (j); } else { i = document.cookie.indexOf(" ", i) + 1; } if (i == 0) { break; } } //fin du while return null; } Examinez maintenant la fonction manger_biscuit(). function ingredients_biscuit (debut_mot) { var fin_mot = document.cookie.indexOf (";", debut_mot); if (fin_mot == -1) fin_mot = document.cookie.length; return unescape Le JavaScript Double Poche CSS • 753 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. (document.cookie.substring(debut_mot, fin_mot)); } Cette fonction reçoit le début du mot représentant la valeur et en localisant le point-virgule en induit la longueur. Elle renvoie la valeur reconstituée avec la méthode unescape(). La dernière fonction a pour objectif de créer ou de modifier le cookie. function ranger_biscuit (nom, valeur) { var arg_valeur = ranger_biscuit.arguments; var arg_nombre = ranger_biscuit.arguments.length; var expires=(2<arg_nombre) ? arg_valeur[2]: null; var path = (3 < arg_nombre) ? arg_valeur[3] : null; var domain=(4<arg_nombre) ? arg_valeur[4]: null; var secure=(5 < arg_nombre) ? arg_valeur[5]: false; document.cookie = nom + "=" + escape (valeur) + ((expires == null) ? "" : ("; expires=" + m Figure 9.24 : Fonction ranger_biscuit() 9 Les CSS se marient bien 754 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } Avec la détection du navigateur En outre, JavaScript permet de détecter un navigateur. var nom = navigator.appName; var version = parseInt(navigator.appVersion); var IDnavigateur = navigator.userAgent; var navigateur = 0; if (nom.indexOf("Explorer")>0){ if (version >= 4) navigateur= 1; else navigateur=2; if (IDnavigateur.indexOf("MSIE 5.0")>0)navigateur=2; } if (navigateur ==0){ var balise =’<link href="generique.css" rel="stylesheet" type="text/css" />\n"; } else { var balise =’<link href="generique_IE.css" rel="stylesheet" type="text/css" />\n"; } document.write (balise); Le programme teste le nom et la version du navigateur et récrit la balise qui conduit à la feuille de style adéquate. Le modèle objet de document (DOM) et AJAX Le DOM (Document Object Model) est un arbre avec une hiérarchie descendante à partir de l’objet document. Il est matérialisé par les différentes balises du document HTML, XHTML et XML. La structure intériorisée dans le modèle est constituée de balises qui se côtoient et qui contiennent parfois d’autres balises. Ainsi tout le document est contenu dans les balises <html> et </html>, qui contiennent les balises head qui contiennent les balises title et les balises <meta http−equiv= "Content−Type" content="text/html; charset=iso−8859−1"/> et <link rel="stylesheet" href="feuille.css" type="text/css" />, tandis que la balise body est la balise frère de la balise head puisque ces deux balises sont au même niveau dans la hiérarchie. Le JavaScript Double Poche CSS • 755 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Pour bien comprendre, il faut bien avoir l’arbre complet dans la tête et le visualiser. C’est un arbre généalogique : ainsi head est un descendant de html, un frère de body, un père de link et de meta. Les éléments sont appelés des nœuds (nodes) en référence au langage XML qui est à l’origine de ce modèle. Les nœuds au-dessus du nœud courant sont appelés les ancêtres et les nœuds au-dessous sont les descendants. Chaque nœud se positionne dans l’arbre relativement aux autres nœuds. AJAX AJAX est vraiment au carrefour des langages du Web. Il utilise des passerelles entre le XML, le JavaScript, les CSS et d’autres langages comme PHP, Java, Ruby, etc. Des applications existent pour transformer des objets d’un langage à l’autre afin de les fournir à l’API JavaScript du navigateur qui pourra les manipuler. L’intérêt du JavaScript est qu’il agit directement sur la page sans demander d’autres manipulations et les changements se font à vue. Le DOM permet d’envoyer les données retournées, dans un élément de l’arbre HTML, c’est-à-dire à un endroit précis dans la page. Ces techniques évitent de solliciter le serveur à chaque requête et de faire travailler le navigateur sur le PC client sur des données serveur chargées en même temps que la page. Au départ, JavaScript tournait sur lui-même : il était impossible de charger des données non incluses dans la page. Tout est parti de la classe JavaScript XmlHttpRequest, créée par Microsoft, à partir de la ver- sion 4.0 d’Internet Explorer, puis adoptée par les autres navigateurs. Le principe d’AJAX (Asynchronous JavaScript And XML) est de pouvoir envoyer des requêtes et de les afficher sans recharger la page. La page devient alors une application. AJAX est une combinaison de technolo- gies : HTML et CSS pour la présentation, DOM, qui transforme chaque élément de l’arbre en objet, et JavaScript avec l’objet XMLHttpRequest pour gérer les requêtes et les réponses. Asynchrone signifie que l’appli- cation, une fois la requête envoyée, n’attend pas la réponse mais poursuit son processus et affiche la réponse quand elle se présente. 9 Les CSS se marient bien 756 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Le nom de chaque propriété est écrit à la manière JavaScript. Ainsi font−size devient fontSize,etbackground−color, backgroundColor, etc. Voici une liste d’instruments de musique : <ul> <li>le violon</li> <li>le piano</li> <li>la guitare</li> </ul> L’élément parent est la balise ul dont les enfants sont les balises li et les petits-enfants les nœuds texte de li, autrement dit leur contenu (le violon, le piano, la guitare). Ce modèle DOM permet d’identifier les nœuds ou balises et donc d’agir dessus individuellement ou collectivement en adressant une commande à tous les nœuds de même niveau ou à tous les descendants d’une balise. Ces commandes peuvent influer sur le contenu d’un nœud ou sa position d’une manière dynamique. Avec les CSS, il est possible de masquer un nœud ou de le transformer, ou encore de le faire apparaître par un événement comme :hover. b Figure 9.25 : Liste non ordonnée b Figure 9.26 : Titre noir Le JavaScript Double Poche CSS • 757 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <h1 id="titre" class="titraille">Grand titre</h1> <button onclick="<button onclick= "document.getElementById(’titre’) .style.color = ’orange’;"> Mettre le titre en orange</button>">Mettre le titre en orange </button> </body> </html> L’élément peut être désigné par son identifiant (getElementById), par la valeur de son attribut name (getElementByName) ou par le nom de sa balise (getElementByTagname). Ici, le fait d’appuyer sur le bouton colorie le titre en orange sans que la page n’ait besoin d’être rechargée. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>Test</title> <script type="text/javascript"> <!-- function contraste() { document.getElementsByTagName("body")[0] .setAttribute("bgColor", "white"); document.getElementsByTagName("body")[0] .setAttribute("text", "black"); } //--> </script></head> <body bgcolor="#FFFFCC" text="#E00000"> <button onClick="contraste()">En noir et blanc</button> </pre></form> </body></html> b Figure 9.27 : Titre orange 9 Les CSS se marient bien 758 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Ce bouton permet de rendre un site plus lisible en ce sens qu’il affecte un fond blanc et des caractères noirs à la page. Le premier élément body ([0]) est visé. La méthode setAttribute() donne une valeur à un attribut ou une propriété. <html> <head> <script> function changeStyle() { c = document.getElementById("cellule"); c.style.width = "250px"; } </script> <table border="1"><tr> <td id="cellule">C’est la cellule</td></tr> </table> <form> <input value="élargir" type="button" onclick="changeStyle();" /> </form> </html> Ici on insère une propriété width avec getElementById() et la fonction comprend deux lignes de code. Il est même possible de remplacer du texte dans la page, toujours sans la recharger. Dans le petit programme suivant, une question est posée et la réponse donnée via le menu déroulant du formulaire déclenche, par l’événement onChange, l’exécution de la fonction. Selon la réponse, la page affiche "Encore une fois !"ou "Bravo !" et le changement se fait à vue. b Figure 9.28 : Noir et blanc b Figure 9.29 : Mauvaise réponse Le JavaScript Double Poche CSS • 759 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. <html><head><title>Test</title> <script type="text/javascript"> <!-- function reponse() { ind_choix=document.forms[0].choix.selectedIndex; valeur_quatre=document.forms[0] .choix.options[ind_choix].value; if (valeur_quatre==’4’){ var noeud_texte = document.createTextNode("Bravo!"); } else { var noeud_texte = document.createTextNode("Encore une fois!"); } document.getElementById("lareponse") .replaceChild(noeud_texte, document .getElementById("lareponse").firstChild); } //--> </script></head> <body> <table border="1" bgcolor="#FFFFC0" width="30%"> <tr><td id="z1">Quelle est la couleur de l’océan ?</td> <td id="lareponse">ça dépend!</td></tr> </table> <p> <form action="#" method="post"> Choisissez <br /> <select name="choix" size="1" onChange="reponse()"> <option value=""></option> <option value="1">Blanc</option> <option value="2">Noir</option> <option value="3">Rouge</option> <option value="4">Bleu</option> < option value="5">Jaune</option> </select> </form> </body></html> b Figure 9.30 : Bonne réponse 9 Les CSS se marient bien 760 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... d’ouverture et de fermeture doivent avoir la même casse Une balise solitaire doit être accompagnée d’une barre oblique (par exemple, ) Comme les 778 • Double Poche CSS Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Le XML CSS, le XML sépare la présentation et les données Un document (le fichier DTD) définit les balises et leur syntaxe, et facilite la construction et le débogage... qui permettait, à partir d’un même contenu, de visionner des pages à l’aspect différent Double Poche CSS • 777 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark 9 m Les CSS se marient bien Figure 9.38 : Le site XMLfr Aux débuts d’Internet, la simplicité et le manque de contraintes du HTML ont contribué à le répandre très largement et rapidement à travers le monde et à en... . title et les balises <meta http−equiv= "Content−Type" content="text/html; charset=iso−8859−1"/> et <link rel="stylesheet". Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. } } } } function setHover(){ LI = document.getElementById(’menu’) .getElementsByTagName(’li’);