Une version à jour et éditable de ce livre est disponible sur Wikilivres,
une bibliothèque de livres pédagogiques, à l'URL :
https://fr.wikibooks.org/wiki/Programmation_JavaScript
JavaScript (aliasJS) est un langage deprogrammation utilisé initialement par les navigateurs web, dont le champ d’application s’est progressivement étendu aux serveurs web et aux applications graphiques. Il partage avecJava une syntaxe inspirée du langage C, mais leurs similitudes s'arrêtent là. Il fut créé parNetscape sous le nomLiveScript en 1996.
Le noyau du JavaScript est aujourd'hui défini par le standard ECMA 262[1], connu aussi sous l'appellationECMAScript (ES).
Les fichiers JavaScript possèdent l'extension .js, mais on trouve aussi des .ts correspondant auTypeScript. Il s'agit d'un sur-ensemble syntaxique strict de JavaScript créé parMicrosoft en 2012 pour améliorer et de sécuriser le JS[2].
Intégré directement au sein des pages Web, le JavaScript est alors exécuté par le client Web (par opposition au serveur Web) : c'est le navigateur Web qui prend en charge l'exécution de ces bouts de programme, manipulant leur environnement, appelés scripts.
Généralement, JavaScript sert à interagir avec le documentHTML et ses feuilles de style CSS via l'interface DOM (Document Object Model ; on parle de HTML dynamique ouDHTML pour désigner cette intégration des trois langages). JavaScript est ainsi utilisé pour réaliser des services dynamiques en communication avec le serveur Web, la plupart du temps grâce à une technique appelée (abusivement)AJAX.
Il est souvent source de difficultés dues aux nombreuses versions différentes de l'interpréteur et du DOM, dépendantes des éditeurs denavigateurs. Chacun ayant développé sa propre variante supportant (presque) le standard ECMAScript, un ou deux des deux standards DOM, et possédant de surcroît des fonctionnalités supplémentaires et incompatibles.
Voici les différentes versions du JavaScript par année[3] :
Côté client, le langage est compilé par les navigateurs : ils parsent le script, créent l'arbre de la syntaxe abstraite (AST), l'optimisent, génèrent ducode à octets enjuste-à-temps (JIT) à partir de l'arbre, puis lecode machine spécifique au hardware avec cela, et enfin l'exécute.
Les principaux moteurs de JS sont :
JavaScript est un langage exécuté par le navigateur web, à l'affichage d'une page web. (il est surtout utilisé pour ça)
Créer ce document HTML (le nom du fichier se terminera généralement par.html) puis l'ouvrir avec un navigateur.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><scripttype="text/javascript">alert(prompt("bonjour le monde !"));</script></head><body> Corps de la page.</body></html>
Le navigateur vous demande d’entrer un texte dans unepop-up, affiche le texte donné dans une secondepop-up, et enfin affiche le corps du document.Félicitations, vous avez écrit vos premières instructions JavaScript dans un document HTML !
Note : La plupart des navigateurs exécuteront sans problème ce code simplifié :
<body> Corps de la page.<scripttype="text/javascript">alert(prompt("bonjour le monde !"));</script></body>
<html> <head></head> <body></body> </html>).La tête comme le corps d'un document HTML peuvent contenir des instructions JavaScript :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head></head><body> Corps.<scripttype="text/javascript">alert(prompt("bonjour le monde !"));</script></body></html>
Le navigateur se comporte comme pour le premier document de cette page, excepté le fait que le contenu de la page est affiché avant l’ouverture despop-ups
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><scripttype="text/javascript">functionPrompt_et_alert(){alert(prompt("bonjour le monde !"));}</script></head><body><aonmouseout="Prompt_et_alert();"><!-- une ancre balise un hyperlien --> Corps.</a></body></html>
La fonction est définie en tête de document et est exécutée lorsque la souris sort de l'ancre (onmouseout).
Afin d'aller plus loin, ouvrez la console du navigateur.
Pour apprendre à manipuler cet outil, introduisez une erreur dans votre document, par exemple en oubliant un des guillemets", et vérifiez la présence de l'erreur dans la console JavaScript.
Félicitation, vous êtes paré pour écrire davantage d'instructions !
En deux minutes :
Par la suite, nous utiliserons cette instruction pour faire apparaitre des messages en console, ce qui est pratique pour débuguer sans impacter le fonctionner du site (contrairement àalert()). De plus, on peut y utiliser du code CSS et même y publier des tableaux.
Munis de votre éditeur de texte avec coloration syntaxique, créez ce document*.html et ouvrez-le avec votre navigateur outillé d'une extensionFirebug-like.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><htmllang="fr"><head><scripttype="text/javascript">vartexte;functionPrompt_and_run(){texte=prompt("Bonjour. \nEntrez votre texte :");returnaffiche_dans_div();}functionaffiche_dans_div(){varwikitext=document.getElementById("wikitext");returnwikitext.innerHTML="Votre texte : "+texte;}</script></head><body><aonmouseover="Prompt_and_run();"><!-- la fonction est exécutée lorsque la souris est sur l'ancre -->Écrire.</a><divid="wikitext"></div></body></html>
Le navigateur prompte et affiche le texte dans une division du document.
Pour obtenir une wikipage, il faut communiquer les changements à un serveur, puis que le serveur enregistre les changements.
Vous l'avez compris, ceci nécessite d'autres technologies que le JavaScript. Rendez-vous surProgrammation Web/Programmer en deux minutes à la sous-page :Un wiki en JavaScript et PHP.
Document HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><htmllang="fr"><head></head><body><divid="compteur"></div><scripttype="text/javascript">/* Copier-coller le javascript ici, * ou créez un fichier *.js et déclarez-le dans ce document html. */</script></body></html>
Le JavaScript peut sembler long mais est très simple : il exécute la fonction RunWarCost() qui se ré-exécute toutes les 100 millisecondes (window.setTimeout()).
Au passage cette fonction calcule le prix et l'affiche dans la division "compteur" du document. (document.getElementById().innerHTML)
//////////////////////Start CUSTOMIZATION////////////////////////// Le budget affiché ://var Gadget_WarCost_WhichWar="US in Afghanistan since 2001";//var Gadget_WarCost_WhichWar="US in Iraq since 2003";//var Gadget_WarCost_WhichWar="US in Wars since 2001";varGadget_WarCost_WhichWar="French military budget since 2009";//// Données :vartotalIraq=687000000000;// total dollars allocated to Iraq War.varstartOfIraqWar=newDate("Mar 20, 2003");// start of Iraq War.varIraqBudgetedThrough=newDate("Sept 30, 2009");// current budget goes tovartotalAg=228000000000;// total dollars allocated to Afghanistan War.varstartOfAgWar=newDate("Oct 7, 2001");// start of Afghanistan War.varAgBudgetedThrough=newDate("Sept 30, 2009");// current budget goes tovartotalFM=186000000000;//budget militaire français 2009 - 2014varstartOfFM=newDate("Jan 1, 2009");varFMBudgetedThrough=newDate("Dec 31, 2014");varseparator="'";/////////////////End CUSTOMIZATION/////////////////RunWarCost();////// Exécute la fonction principale. //functionRunWarCost(){varWarCostmoney="$";varOutNumberWarCost=0;// Regarde quelles données afficher.if(Gadget_WarCost_WhichWar=="US in Wars since 2001"){OutNumberWarCost=calculateTotal();}elseif(Gadget_WarCost_WhichWar=="US in Iraq since 2003"){OutNumberWarCost=calculateIraq();}elseif(Gadget_WarCost_WhichWar=="US in Afghanistan since 2001"){OutNumberWarCost=calculateAg();}elseif(Gadget_WarCost_WhichWar=="French military budget since 2009"){OutNumberWarCost=calculateFrenchMilitary();WarCostmoney=" €";}elsealert("The value of parameter Gadget_WarCost_WhichWar is wrong.");varOutTextCostOfWar=number_str(OutNumberWarCost);// Formatage du nombreif(WarCostmoney=="$")OutTextCostOfWar=WarCostmoney+OutTextCostOfWar;// Symbole monétaire avantelseOutTextCostOfWar=OutTextCostOfWar+WarCostmoney;// Symbole monétaire aprèsvarcompteur=document.getElementById("compteur");compteur.innerHTML="Votre compteur : "+OutTextCostOfWar+" = "+Gadget_WarCost_WhichWar;// Affiche la chaîne de caractèrewindow.setTimeout(RunWarCost,1000);////// Ré-exécute la fonction principale dans 1 seconde.}functioncalculateFrenchMilitary(){returncalculateWarCost(startOfFM,FMBudgetedThrough,totalFM);}functioncalculateIraq(){returncalculateWarCost(startOfIraqWar,IraqBudgetedThrough,totalIraq);}functioncalculateAg(){returncalculateWarCost(startOfAgWar,AgBudgetedThrough,totalAg);}functioncalculateTotal(){returncalculateAg()+calculateIraq();}functioncalculateWarCost(startOfWar,BudgetedThrough,totalMoney){vartotalMS=BudgetedThrough-startOfWar;// Durée du budget en millisecondesvarratePerMS=totalMoney/totalMS;// Budget par millisecondevarcurDate=newDate();// Date courantevardiff=curDate-startOfWar;// Millisecondes depuis le début de la guerrereturndiff*ratePerMS;// Coût de la guerre jusqu'à maintenant}functionnumber_str(n){varx=n.toString();vardot=x.lastIndexOf('.');x=x.substr(0,dot);varl=x.length;varres="";for(l-=3;l>0;l-=3)res=separator+x.substr(l,3)+res;res=x.substr(0,l+3)+res;returnres;}
Pour créerTout un site web dans un seul document, écrivez un document HTMLcontenant des divisions non-affichées (style="display:none") et une fonction Javascript pour les afficher lorsqu'on navigue dans le document, en cliquant sur les ancres<a>,
ce qui exécute le Javascript suivant :
functionafficher(a){vare=document.getElementById(a);/* e est l'élément du document d'identité a */e.style.display="inline";/* Applique le style display:inline à l’élément d'id a. (affiche) */cacher_sauf(e);/* Cache les autres éléments. */}functioncacher_sauf(e){vara=document.getElementsByClassName('page');/* Obtient tous les éléments de classe page */for(iina){if(a[i]!=e){e[i].style.display="none";}/* Si différent de e, applique le style display:none. (cache) */}}
*.html suivant, et ouvrez-le dans votre navigateur :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr"dir="ltr"><head><title></title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><scripttype="text/javascript">alert(" Copier/coller ici les fonctions javascript afficher() et cacher_sauf().");</script><styletype="text/css">#sommaire{font-size:18pt;margin:3em;border-bottom:1pxdottedgrey;}#contenu{margin:1em;}</style></head><body><divid="sommaire"><aonclick="afficher('home');">Home</a> -<aonclick="afficher('page1');">Page 1</a> -<aonclick="afficher('page2');">Page 2</a> -<aonclick="afficher('contact');">Contact</a></div><divid="contenu"><divclass="page"id="home"> Welcome on my document. Its<aonclick="afficher('page1');"href="#">page 1</a> is about...</div><divclass="page"id="contact"style="display:none;"> contact page.</div><divclass="page"id="page1"style="display:none;"> page1 text.</div><divclass="page"id="page2"style="display:none;"> page2 text</div></div></body></html>
Félicitation, les divisions de classepage sont affichées et cachées lors des clics sur les ancres.
Remarquez que ce document pose un problème d'accessibilité : les éléments cachés ne s'afficheront pas si le navigateur n'exécute pas le javascript.
L'apparence déclarée à la pseudo-classe hover est active lorsque la souris est sur l'élément.
.page.corps{display:none;}/* Le corps n'est pas affiché. */.page:hover.corps{display:block;}/* Lorsque la souris est sur la page, le corps est affiché. */
*.html et ouvrez-le dans un navigateur :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr"dir="ltr"><head><title></title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metaname="robots"content="index,follow"/><linkrel="shortcut icon"href="/favicon.ico"/><linkrel="copyright"href="http://creativecommons.org/licenses/by-sa/3.0/"/><styletype="text/css">span{cursor:pointer;}#site{position:relative;}#site.page{float:left;margin:01em;padding:3px;border:1pxsolidgray;}#site.page:hover{border:2pxdottedgray;}#site.page:hover.corps{display:block;}#site.page.corps{display:none;position:absolute;top:1.5em;left:1em;padding:1em;}</style></head><body><divid="site"><divclass="page"><span>Home</span><divclass="corps">Home. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</div><!-- fin du corps --></div><!-- fin de la page --><divclass="page"><span>About</span><divclass="corps">About<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div></div><divclass="page"><span>contact page</span><divclass="corps"> Contact page.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat. Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div></div><divclass="page"><span>presentation</span><divclass="corps"> Présentation du contenu.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p></div></div><divclass="page"><span>page1</span><divclass="corps"> Page 1 :<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.</p></div></div><divclass="page"><span>page2</span><divclass="corps">Page 2 :<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem.</p></div></div><divclass="page"><span>Album</span><divclass="corps">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</div><!-- fin du corps --></div><!-- fin de la page --></div><!-- fin du site --></body></html>
Nous allons créer un site défilant dans une division d'id galerie.
La division #galerie contient trois divisions :
div#next etdiv#previous) à droite et à gauche,div#slide {width:10000px;}) contenant les pages à faire défiler horizontalement.div#galerie{height:700px;position:relative;/* Ses divisions seront positionnées par rapport à ce parent. */width:1000px;margin:auto;overflow:hidden;/* Ce qui dépasse sera caché. */}div#next{right:0;}div#previous{left:0;}.defile{position:absolute;/* Par rapport au parent, on se positionne de manière absolue. */top:40%;width:40px;border:1pxsolidgray;z-index:5;cursor:pointer;background:white;}.defile:hover{color:gray;border:2pxdottedgray;}div#slide{position:relative;/* Les pages seront positionnées par rapport à ce parent. */width:10000px;/* Cette division est très large, elle contient les pages. */margin:40px0em00em;}.page{float:left;/* Les pages sont à gauche les unes des autres. */padding:00em;width:1000px;}
<script src=http://). Ensuite viennent nos instructions utilisant l'objet jQuery$().$(document) est le document, l'objet$("#ex") est l'élément du document d'id="ex". Il existe des méthodes associées à ces objets :$("#divisionId").width() <- retourne la largeur de la division, en pixels.$("#divisionId").hide() <- attributstyle="display:none" à la division.$(document).ready() <- s'éxecute lorsque le document est prêt.$(document).ready(function(){// Lorsque le document est prêt,$=newslider("#galerie");// crée l'objet slider().});varslider=function(id){// L'objet slider est une fonction.varself=this;this.div=$(id);this.saut=this.div.width();this.next=this.div.find('#next');this.prev=this.div.find('#previous');this.prev.hide();// Cache le bouton previous en attendant que l'utilisateur clique sur next.this.largeurDesPages=0;// Largeur totale des div.page contenues dans #slidethis.slide=this.div.find('#slide');this.slide.find('.page').each(function(){self.largeurDesPages+=$(this).width();});this.nbSaut=Math.ceil(this.largeurDesPages/this.saut-1);this.courant=0;// Le numéro de la page courante.//Evenement lorsqu'on clique sur nextthis.next.click(function(){if(self.courant<self.nbSaut){self.courant++;if(self.courant==1){self.prev.show();}self.slide.animate({left:-self.saut*self.courant,},900);//alert(self.courant);if(self.courant>=self.nbSaut){self.next.animate({width:"0",border:"0"},1100);}}});//Evenement lorsqu'on clique sur previousthis.prev.click(function(){if(self.courant>0){if(self.courant==self.nbSaut){self.next.animate({width:"40px",border:"1px solid gray"},700);}self.courant--;self.slide.animate({left:-self.saut*(self.courant),},900);//alert(self.courant);}else{self.prev.hide("slow");}});alert("largeur totale des pages : "+this.largeurDesPages+"px\n"+"saut : "+this.saut+"px\n"+"nbSaut: "+this.nbSaut);}
Ces instructions exécutent la méthode ready() de l'objet $(document). ($(document).ready(function(){});)
slider().slider() modifie les styles des divisions #slide, #next et #previous en utilisant les méthodes jQueryanimate(),show() ethide().*.html et ouvrez-le dans un navigateur :<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr"dir="ltr"><head><title></title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metaname="robots"content="index,follow"/><linkrel="shortcut icon"href="/favicon.ico"/><linkrel="copyright"href="http://creativecommons.org/licenses/by-sa/3.0/"/><!-- load jQuery library --><scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script><scripttype="text/javascript">//<![CDATA[alert(' Copie ici les instructions javascript'+'oudeclaretonfichierjavascriptexterneavec<scriptsrc=""type="text/javascript"></script>.'); //]]></script><styletype="text/css">Copielesdéclarationsdestyleicioucréeunfichiercssetutilise<stylesrc=""type="text/css"></script></style></head><body><divid="galerie"><divid="previous"class="defile">prev</div><!-- premier bouton, --><divid="next"class="defile">next</div><!-- deuxieme bouton, --><divid="slide"><!-- et le slide contenant plusieurs pages. --><divclass="page"id="apropos"> About page.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat. Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod. Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue. Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet. Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div><divclass="page"id="contact"> contact page.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat. Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod. Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div><divclass="page"id="presentation"> Présentation du contenu.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div><divclass="page"id="page1"> page1 text.<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue. Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div><divclass="page"id="page2"> page2 text<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat.Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue.Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet.Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div><divclass="page"id="photos"> Album<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt pharetra tempor. Morbi dignissim sollicitudin orci, non molestie lorem placerat quis. Quisque et eros turpis, vel suscipit neque. Nulla facilisi. Mauris vel dictum nibh. Vestibulum et erat erat, ut dictum tellus. Quisque vel mi magna. Nunc sed lectus imperdiet diam vestibulum facilisis eu a enim. Duis vitae magna urna, nec tristique metus. Nunc vel nisi erat, nec commodo felis. Pellentesque sit amet nunc quam. In laoreet, urna vitae elementum rutrum, velit eros blandit lacus, eu volutpat metus sapien at erat. Maecenas risus nisl, malesuada vel lobortis sed, malesuada dapibus urna. Suspendisse potenti. Suspendisse lacinia pharetra libero, non semper odio accumsan et. Aenean quis augue eu ipsum tempus molestie. Suspendisse risus tellus, feugiat a lacinia vitae, hendrerit quis odio. Aenean vulputate luctus dui rhoncus gravida. Pellentesque ut leo ligula, sit amet tincidunt nulla. Pellentesque ut odio eros, a euismod dui. Aenean faucibus turpis et justo vestibulum eget ultricies risus facilisis. Donec sodales dignissim mauris eget euismod.Etiam tellus magna, dignissim vel pulvinar non, auctor et neque. Aliquam erat volutpat. Integer iaculis lorem eget tortor varius faucibus. Mauris ac lectus non metus ornare laoreet et sed elit. Vivamus nec quam lacus. Nunc lobortis mi a urna mattis rhoncus semper est mollis. Nunc velit elit, varius id adipiscing at, gravida at lectus. Sed id odio justo, vel pretium velit. Proin ac dui ut risus rhoncus commodo dapibus sed metus. Maecenas commodo libero id augue congue non luctus mauris luctus. Ut neque magna, porttitor vel elementum eu, congue vitae sapien. Nunc ornare, enim a luctus rhoncus, tortor velit bibendum sem, nec rutrum libero orci hendrerit velit. Aenean in eros ac orci sollicitudin suscipit. Nunc lacinia gravida imperdiet. Morbi convallis mi at magna lacinia id feugiat magna dictum. Vivamus eleifend nibh eu nunc imperdiet tempus. Quisque tellus augue, rutrum a placerat tincidunt, pharetra nec odio. Donec suscipit lacus sed erat ultrices imperdiet. Donec sit amet ante ut orci suscipit eleifend sed vel risus. Fusce aliquam tempus augue. Nam nec tortor ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque eleifend libero in lorem fermentum auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum id est dui, ac adipiscing nisi. Nullam adipiscing dictum orci, eget faucibus dolor dapibus et. Ut euismod sodales aliquet. Cras auctor laoreet odio a iaculis. Vivamus dapibus egestas massa, a lobortis neque cursus ac. Vivamus placerat quam lorem. Aliquam ut magna porta enim lobortis sollicitudin ut ut magna. Nullam tellus orci, consectetur ac consectetur et, malesuada sed dolor. Donec non libero sit amet risus venenatis laoreet. Donec ultrices, sapien eget placerat consectetur, magna libero gravida dolor, at condimentum dui lectus non lorem. Duis eget risus ante, at mattis ipsum. Vivamus nulla augue, placerat ac molestie nec, sollicitudin nec ante. Sed euismod, risus at sodales fringilla, lacus mi accumsan nunc, eget lobortis dolor neque sed arcu. Donec scelerisque mauris vitae lectus faucibus feugiat. Aenean purus odio, volutpat et feugiat eu, posuere sit amet nunc. Cras lectus orci, rhoncus ac mattis ut, ultrices id mi. Cras massa lorem, porttitor sed tempus et, congue quis dui. Fusce tristique faucibus ultricies. In metus felis, congue quis cursus nec, congue sit amet arcu. Quisque in molestie nibh. Curabitur at odio et tortor faucibus commodo a non augue. Nunc a augue a magna vehicula suscipit.</p></div><!-- fin de la derrière .page du slide --></div><!-- fin de la division #slide --></div><!-- fin de la division #galerie --></body></html>
Le CSS permet également d'interagir avec la souris, via notamment la pseudo-classehover.
L'apparence déclarée à la pseudo-classehover est active lorsque la souris est sur l'élément.
div#menu{width:100px;}div#menuul{padding:0;width:100px;border:1pxsolidgray;margin:0px;}div#menuulli{position:relative;list-style:none;border-bottom:1pxsolidgray;}div#menuulul{position:absolute;top:0;left:100px;display:none;}/* ul ul => display:none */div#menuul.niveau1li.sousmenu:hoverul.niveau2,/* li.sousmenu:hover => display */div#menuul.niveau2li.sousmenu:hoverul.niveau3{display:block;}div#menulia{text-decoration:none;color:gray;}div#menuli.sousmenu{background:#F0F0F0;}
ul.niveau2 est affiché (display:block;) lorsque la souris est dessusli.sousmenu (li.sousmenu:hover) contenue dansdiv#menu ul.niveau1.
*.html et ouvrez-le dans votre navigateur<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr"dir="ltr"><head><title></title><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metaname="robots"content="index,follow"/><linkrel="shortcut icon"href="/favicon.ico"/><linkrel="copyright"href="http://creativecommons.org/licenses/by-sa/3.0/"/><scripttype="text/javascript">functionafficher(a){vare=document.getElementById(a);e.style.display="inline";/* Applique display:inline à l'element d'id a */cacher_sauf(e);/* Applique display:none aux autres éléments. */}functioncacher_sauf(a){varels=document.getElementsByClassName('page');for(iinels){if(els[i]!=a){els[i].style.display="none";}}}</script><styletype="text/css">a{cursor:pointer;}#sommaire{font-size:18pt;margin:2em;margin-right:0;border-bottom:1pxdottedgrey;}#contenu{margin:1em;}div#menu{width:100px;}div#menuul{padding:0;width:100px;border:1pxsolidgray;margin:0px;}div#menuulli{position:relative;list-style:none;border-bottom:1pxsolidgray;}div#menuulul{position:absolute;top:0;left:100px;display:none;}/* ul ul => display:none */div#menuul.niveau1li.sousmenu:hoverul.niveau2,/* li.sousmenu:hover => display */div#menuul.niveau2li.sousmenu:hoverul.niveau3{display:block;}div#menulia{text-decoration:none;color:gray;}div#menuli.sousmenu{background:#F0F0F0;}</style></head><body><divid="menu"><ulclass="niveau1"><liclass="sousmenu"><ahref="#"onclick="afficher('home');">Home</a><ulclass="niveau2"><li><ahref="#"onclick="afficher('apropos');">À propos</a></li><li><ahref="#"onclick="afficher('contact');">Contact</a></li></ul></li><liclass="sousmenu"><ahref="#"onclick="afficher('presentation');">Contenu</a><ulclass="niveau2"><liclass="sousmenu"><ahref="#">Articles</a><ulclass="niveau3"><li><ahref="#"onclick="afficher('page1');">Page 1</a></li><li><ahref="#"onclick="afficher('page2');">Page 2</a></li></ul></li><li><ahref="#"onclick="afficher('photos');">Photos</a></li></ul></li></ul></div><divid="sommaire"><aonclick="afficher('home');">Home</a> -<aonclick="afficher('page1');">Page 1</a> -<aonclick="afficher('page2');">Page 2</a> -<aonclick="afficher('contact');">Contact</a></div><divid="contenu"><divclass="page"id="home"> Welcome on my document. Its<aonclick="afficher('page1');"href="#">page 1</a> is about...</div><divclass="page"id="apropos"style="display:none;"> About page.</div><divclass="page"id="contact"style="display:none;"> contact page.</div><divclass="page"id="presentation"style="display:none;"> Présentation du contenu.</div><divclass="page"id="page1"style="display:none;"> page1 text.</div><divclass="page"id="page2"style="display:none;"> page2 text</div><divclass="page"id="photos"style="display:none;"> Album</div></div></body></html>
Pour installer des bibliothèques, il existe plusieursgestionnaires de paquets.
Sur Windows, le télécharger de :https://nodejs.org/en/download/
Sur Linux :
curl -fsSLhttps://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt install -y nodejs
Par exemple pour une installation en environnement de développement uniquement :
npm install mon_package --save-dev
Réputé plus rapide que le précédent, il s'installe à partir de ce dernier :
npm install -g yarn
Par exemple pour une installation en environnement de développement uniquement :
yarn add mon_package --dev
NB : dans les premières versions, c'était :
yarn install mon_package --save-dev
Pour lancer le processus en tâche de fond qui compile et minifie le code dans node_modules :
yarn watch
Unenvironnement de développement intégré (EDI ou IDE en anglais pour Integrated Development Environment) est un programme regroupant un éditeur de texte, des outils automatiques de fabrication, et souvent un débogueur.Il en existe pour pratiquement tous les langages informatique et le Javascript n'échappe pas à la règle. Les IDE pour javascript sont souvent pourvus de fonctionnalité pour écrire en HTML.
Les utilités principales des IDE sont :
Il existe des plugins de navigateurs commeGreasemonkey ou Tampermonkey permettant de stocker des javascripts à exécuter sur certains sites (auquel on n'a pas forcément accès au code). Cela permet par exemple de préremplir des formulaires ou d'ajouter des hyperliens sur des mots reconnus par regex.
Les deux grandes structures du langage sont les instructions et les structures de contrôle, qui toutes deux contiennent des expressions.
La syntaxe du JavaScript est largement inspirée des langages C et Java. Il faut ajouter à cela le fait que la plupart des opérateurs utilisent les mêmes noms ou symboles que dans ces langages.
L'avantage de cette similarité de forme est qu'elle permet de s'appuyer sur ce que l'on connaît déjà dans ces langages très répandus pour coder ou pour lire en JavaScript, ou réciproquement.
L'inconvénient est que cette similarité de forme dissimule des différences nombreuses, subtiles ou fondamentales, et des fonctionnalités inexistantes dans les langages classiques auxquels on est tenté de comparer le JavaScript. Et inversement, on peut vouloir appliquer en JavaScript des mots et des syntaxes propres à ces langages qui lui ressemblent, et être déçu de leur absence.
Une instruction JavaScript est constituée d'une combinaison d'expressions (identificateurs,variables,opérateurs,expressions littérales, appels de fonctions), parfois précédée d'une déclaration (var, void). Elle peut être suivie ou entrecoupée decommentaires.
Une instruction s'achève lorsqu'une autre instruction commence.
En règle générale, on rencontre une ligne d'instruction par ligne de texte. Pour écrire plusieurs instructions sur une même ligne, il est nécessaire de les séparer avec un point-virgule ( ; ). Par habitude, on met souvent des point-virgules à la fin de toutes les instructions en JavaScript mais il faut savoir que leur absence n'est pas une erreur de syntaxe.
s1="trois ";s2="mots ";s3="concaténés";alert(s1+s2+s3);
Les mêmes instructions sur plusieurs lignes, sans point-virgules (JavaScript "comprend" que chaque nouvelle ligne est une instruction différente) :
s1="trois "s2="mots "s3="concaténés"alert(s1+s2+s3)
Une instruction répartie sur plusieurs lignes (JavaScript "comprend" que chaque nouvelle ligne prolonge l'instruction)
alert("trois "+"mots "+"concaténés")
Intégration decommentaires :
alert("trois "// Commentaire en fin de ligne+"mots "/* Commentaire multiligne */+/* peut être placé au milieu d'une instruction */"concaténés");
Ces quatre exemples provoquent l'affichage d'une boite d'avertissement munie de la chaîne "trois mots concaténés". Leur présentation diffère en fonction des besoins d'expressivité et de lisibilité du code tel que voulu par le programmeur.
Les lignes d'instructions sont regroupées enblocs d'instructions délimités par des accolades.
Note : JavaScriptdifférencie les majuscules et les minuscules. Il convient donc d'être vigilant sur ce point lors de l'écriture des lignes d'instructions pour s'éviter de longues séances de débogage.
Lors du chargement d'une page Web, dès que le navigateur rencontre un script, il l'exécute avant de charger la suite du document HTML. Si le script contient des instructions qui doivent être évaluées immédiatement et qui manipulent le document, ce dernier risque de ne pas être prêt.
Lorsque des balises<script> possèdent l'attributdefer, le navigateur est supposé télécharger ces scripts en parallèle (donc plus rapidement), et attendre d'avoir fini le chargement de la page avant de les exécuter dans l'ordre des balises.
Lorsque qu'elles possèdent l'attributasync, le navigateur les télécharge et exécute en parallèle, dans un ordre qui dépend du contexte, donc aléatoire et potentiellement avant la fin du chargement de la page. Il ne faut donc jamais l'utiliser pour charger des bibliothèques ayant des dépendances, comme jQuery.
S'il faut manipuler le document au moment du chargement, il est donc fortement recommandé de déclencher le codeaprès avoir déclaré toute partie du document qui doit être utilisée. Il reste bien sûr possible de déclarer la plupart du code dans des fonctions avant le corps du document, comme cela est fait couramment, et soit d'appeler les fonctions dans un script ultérieur, soit de placer ces instructions dans la méthodedocument.onload.
À la base, chaque fichier ou fragment de code JavaScript est évalué de haut en bas : chaque instruction est exécutée avant de passer à la suivante. Bien entendu, les fonctions, structures de contrôle, et d'autres éléments du langage font que certaines instructions sont évaluées à un autre moment, et/ou plusieurs fois, ou pas du tout.
Les expressions sont évaluées de gauche à droite, en respectant la priorité des opérateurs et les parenthèses. Lorsqu'une expression est composée d'opérations de priorité identique (par exemple, plusieurs additions) la première opération en partant de la gauche est effectuée (et ses opérandes sont évaluées), puis son résultat est utilisé comme opérande de gauche de l'opération suivante (et l'opérande de droite est évaluée), et ainsi de suite.
str=1+3+"5"+-1+2alert(str)// affiche "45-12"
L'exemple ci-dessus montre que la première opération entre deux nombres se comporte normalement (1 et 3 font 4), la seconde se transforme en concaténation car une des opérandes est de type "string", et à partir de là le résultat de chaque opération est une chaîne donc toutes les additions suivantes se transforment en concaténations. Ce serait différent avec des parenthèses :
str=1+3+"5"+(-1+2)alert(str)// affiche "451"
Les opérations de priorité identique ne sont pas évaluées simultanément (techniquement ce ne serait pas possible d'ailleurs) et marginalement, cela peut avoir une influence sur le résultat. Par conséquent, les opérations que l'on appelle commutatives en mathématiques ne sont pas strictement commutatives en JavaScript.
u=v+(v=u)// équivalent à trois instructions séparées pour calculer la suite de Fibonacci// est différent de :u=(v=u)+v// façon tordue d'écrire u*=2
Dans cet exemple, l'addition n'est pas commutative. Si l'opération v=u est placée à gauche de l'addition, elle est évaluée en premier et modifie l'autre opérande. En revanche, placée à droite, elle est évaluéeaprès v, et donc la valeur de v utilisée par l'addition est l'ancienne valeur.
Les blocs d'instructions JavaScript sont constitués d'instructions placées entre une accolade ouvrante ({ ) et une accolade fermante (} ).
Un bloc d'instructions est obligatoirement introduit par ces déclarations (les accolades sont nécessaires même pour une seule instruction) :
Ces autres structures sont généralement suivies d'un bloc d'instruction (mais dans le cas d'une seule instruction les accolades sont facultatives) :
Dans tout autre cas, les accolades sont considérées comme les délimiteurs del'écriture littérale d'un objet et non pas d'un bloc d'instructions.
À l'intérieur d'un bloc, les instructions sont exécutées séquentiellement, à moins de l'apparition du mot réservéreturn (dans une fonction) ou du mot réservébreak (dans certaines structures de branchement conditionnelles) ou de l'occurrence d'une erreur.
Un bloc d'instructions peut lui-même contenir d'autres blocs, généralement des structures conditionnelles ou itératives, mais aussi des déclarations de fonctions imbriquées.
function main(){ // Le début du bloc principal de la fonction function locale() { // Début d'un bloc imbriqué alert("Exécution d'une sous fonction") }}La programmation JavaScript, comme tous les langages informatiques, demande au développeur de définir des identificateurs, et ceci dans deux cas :
Pour construire notre identificateur nous pouvons utiliser les caractères autorisés, et devons proscrire les caractères interdits. De plus, certaines combinaisons sont interdites. Notre identificateur ne doit pas correspondre à unmot réservé. Enfin, il est utile de se conformer à certaines recommandations en ce qui concerne le choix et l'orthographe de l'identificateur, pour renforcer l'expressivité du code.
Tous les caractères sont autorisés, sauf ceux qui contreviennent aux règles précédentes et aux caractères interdits.
$ _\uNNNN- , . " ' @ : / + * % = ~ ! ? < > ( ) [ ] { } # & | ` ^ ¨ €Les identificateurs sont en particulier standardisés par l'ECMA 262[1], au chapitre §7.6.Ce standard s'appuie sur la chapitre 5 de l'Unicode version 3[2].
Sont en particulier autorisés les échappement Unicode, s'ils conduisent à un identificateur autorisé.Enfin, deux identificateurs équivalent ne sont considérés identique que s'ils sont identiques binairement[3].
Les versions suivants d'Unicode peuvent fonctionner mais ne sont pas nécessairement portables et compatibles.
Dans un programme JavaScript, il est courant de devoir introduire des données sous forme littérale. Cela se produit principalement quand on renseigne une variable, ou quand on appelle une fonction.
Ce qui suit est valide pour le code JavaScript écrit dans les fichiers externes, ou entre les balises <script> </script>. En ce qui concerne le code associé aux évènements (onclick, onload...), l'approche est différente.
ma_var="une chaîne exprimée littéralement";mon_nombre=12;// un nombre littéral;alert("Ce message est une chaîne littérale");
Ces expressions littérales peuvent être des chaînes, ou des nombres.
Elles sont constituées de lettres, chiffres, ponctuation et symboles avec un mécanisme (échappement) permettant d'étendre cet ensemble à des caractères de contrôle, de formatage et des caractères spéciaux.
Une chaîne exprimée sous forme littérale est délimitée par des guillemets double ( " ) ou simple ( ' ).
La règle veut qu'une chaîne ouverte avec un guillemet double doit être fermée avec un guillemet double. De même, une chaîne ouverte avec un guillemet simple doit être fermée avec un guillemet simple.
La première complication se produit quand nous désirons inclure des guillemets dans notre chaîne.
Appelons une fonction avec une chaîne en paramètre :
Ce code contientune erreur volontaire !alert("le titre de l'article : "lesjoiesdel'informatique"");// ne marche pas
... à la place, on peut écrire:
alert("le titre de l'article : "+'"'+"les joies de l'informatique"+'"');
... mais c'est affreux.
Pour utiliser une solution élégante, nous avons recours au mécanisme d'échappement.
Le mécanisme d'échappement consiste à inclure dans les chaînes, des anti-slash (\) suivis d'un caractère choisi pour sa fonction.
les caractères échappés sont en nombre limités et facile à mettre en œuvre.
Précédé d'un anti-slash, les guillemets ne feront plus office de délimiteur de chaîne, et ceci permet de les inclure comme de simples symboles de ponctuation.
alert("Mon nom est \"Personne\"");// affiche : Mon nom est "Personne"
Il est interdit d'aller à la ligne à l'intérieur d'une chaîne de caractère délimitée par ' ou ".
Cependant, il peut être utile de formater une chaîne en la présentant sur plusieurs lignes. La séquence d'échappement \n réalise cela. Elle inclut en effet le caractère de contrôle "linefeed" (valeur 10 en décimal, 0A en hexadécimal) qui réalise le retour à la ligne avec la plupart des navigateurs graphique.
Par exemple, il n'est pas possible de formater une chaîne de caractère en utilisant le code suivant :
Ce code contientune erreur volontaire !alert("première,deuxièmeet troisième ligne");// ne marche pas
Il faudra utiliser à la place l'écriture suivante :
alert("première, \ndeuxième \net troisième ligne");
... affiche :
première,deuxièmeet troisième ligne
Autre solution, utiliser l'accent grave à la place de ' ou " (`) :
alert(`première, deuxième et troisième ligne`);
Avec une variable (par interpolation) :
let html = '<h2>Titre</h2>';alert(`première, ${html}et troisième ligne`);La séquence d'échappement \t insère un caractère de tabulation dans la chaîne, et permet ainsi de formater l'affichage. Le caractère de tabulation est codé 9 en décimal et 09 en hexadécimal.
alert("colonne 1 \tcolonne 2 \tcolonne 3");
Javascript, quand il est codé dans un fichier distinct, ou quand il est codé entre les balises <script> </script> ne supporte pas les entités de la forme < ou  , ou toute autre forme d'entité.
L'échappement\u offre un mécanisme de remplacement dont la mise en œuvre nécessite de se référer à une table associant les codes hexadécimaux au symboles correspondant(par exemple).
Ces codeshexadécimaux sont présentés avec4 (ou 5) chiffres hexadécimaux, et la séquence d'échappement \u nécessite d'écrire ces 4 chiffres sous peine d'un déclenchement d'erreur.
alert("Rodrigue as-tu du c\u0153ur?");
... affiche Rodrigue as-tu du cœur?
ce qui est plus conforme à l'original que l'anti-typographique "coeur", utilisé à longueur d'internet.
L'inclusion de caractères Unicode permet l'accès aux symboles et à la citation de fragments utilisant d'autres alphabets que le nôtre.
De plus, il permet également l'inclusion des caractères de contrôle. Ainsi, \n et \u000A sont équivalents.
Unicode est toutefois plus vaste et peut être découvert au travers du livre WikibooksÀ la découverte d'Unicode.
Les nombres sont constitués de chiffres et de signes à l'exclusion du caractère espace. JavaScript permet d'exprimer littéralement les nombres entiers, réels, octaux, hexadécimaux, exponentiels, sous forme positive ou négative.
En plaçant le signe moins ( - ) devant le nombre, on obtient ce nombre en négatif, et ceci qu'il soit noté comme entier, réel, octal, hexadécimal ou exponentiel.
ma_var=-5;
Ils s'écrivent tel quel, c'est la représentation par défaut, employant les chiffres 0 à 9.
ma_var=12;
Le signe de séparation de la partie entière est le point ( . )
ma_var=8.65;
Un nombre commençant par zero et ne comprenant que les chiffres de 0 à 7 sera interprété en octal.
ma_var=0257;
Un nombre commençant par 0x (ou 0X) comprenant les chiffres et les lettres abcdef en minuscule, majuscule ou les deux, sera interprété en hexadécimal.
ma_var=0xf044;
En faisant suivre un nombre entier ou réel de la lettre e (ou E), elle-même suivie d'un entier positif ou négatif, on obtient un nombre ennotation scientifique.
ma_var=2.5e40;// Un grand nombre : 2,5 * 10 exposant 40ma_var=50e-30// Un tout petit nombre
Le typenumber est au format 64 bits double précision.
À l'intérieur des balises HTML, il est possible d'intégrer du code JavaScript associé aux évènements, (comme onclick, onmouseover...). Javascript est à ce moment là interprété en dehors de son territoire propre, c'est à dire entre les balises <script> et </script> ou dans un fichier séparé.Sa rédaction obéit alors aux règles de rédaction des attributs des balises, qui n'autorisent pas tout.
<divonclick="alert('Je suis cliqué')">cliquez moi!</div>
Html, comme xhtml, ne reconnaît pas les séquences de type \uHHHH. Nous devons nous limiter aux caractères échappés classiques, amputés de ( \" ) et ( \' ). En effet, ces deux caractères ne seront pas interprétables comme valeur de la propriété de la balise.
Si nous voulons afficherJe suis "cliqué", nous devons recourir aux entités.
Les entités sont un mécanisme permettant d'insérer n'importe quel caractère dans une chaîne.
Selon la référence du doctype html, nous aurons accès à des entités munies d'un identificateur. Sinon, sous réserve de disposer d'unetable adéquate, nous pouvons reproduire n'importe quel caractère.
Sans aller plus-avant dans la description des entités, nous pouvons les décrire comme suit :
L'entité commence par le caractère & (esperluette ou "et commercial") et finit par un point-virgule. Entre ces deux symboles, on rencontre soit un identificateur ( < > &), soit le code du caractère exprimé endécimal et précédé du signe sharp (#) (  œ).
<divonclick="alert('Je suis "cliqué"')"> // Affiche: Je suis "cliqué" cliquez moi!</div>
... Mission accomplie.
JavaScript permet d'insérer des commentaires dans les programmes, et ceci de deux manières :
Les caractères placés à droite du double-slash sont ignorés par l'interpréteur jusqu'à l’occurrence d'un retour à la ligne.
alert("message");// Commentaire expliquant le rôle de l'instruction
Les commentaires sont ouverts avec ( /* ) et fermés avec ( */ ) et donc ignorés par l'interpréteur.
/* Commentaire sur une ligne *//* Commentairesur plusieurslignes */alert("message");// Cette ligne est exécutée
Les deux syntaxes de commentaire permettent de multiples modes d'inclusion dans le code:
alert("deux "/*Le premier*/+"mot"/*Le deuxième*/);// Inclusion dans les paramètresalert("deux "// Le premier+"mot"/* Le deuxième*/);// Deux inclusions de commentaires
Cet article va passer en revue les mots réservés et constantes prédéfinies de JavaScript.
La normeECMA 262, définit les mots réservés de JavaScript en deux catégories :
On ne doit pas utiliser un mot réservé comme identificateur. Cela provoque une erreur. Mais comme le langage différencie les majuscules et minuscules, il est possible de mettre en majuscule une lettre pour rendre l'identificateur utilisable.
On peut, avec la plupart des navigateurs utiliser un futur mot réservé comme identificateur, mais cela est déconseillé, car le programme ne fonctionnera probablement plus à l'apparition d'une version future de JavaScript.
Voici une description sommaire des mots réservés[1] :
Déclaration d'unevariable locale, avec ou sans affectation. À placer en début d'instruction.
varma_variable;varma_variable="Je suis affecté";
Une variable locale est détruite automatiquement à la fin de la fonction où elle a été créée (sauf dans le cas desclosures). Seul le code écrit dans cette fonction peut y accéder, et dans ce code, la variable est prioritaire sur tout autre identifiant homonyme. En revanche, elle ne peut être détruite par l'opérateurdelete.
Voir la section surrehaussement des déclarations.
Déclaration d'une constante locale[2].
Comme "var" mais restreint la portée au bloc, comme si ce bloc était situé dans une autre fonction. Exemple :
vara=1;varb=2;{vara=11;letb=22;}console.log(a);// 11console.log(b);// 2
Déclaration d'unefonction utilisateur. C'est aussi un opérateur.
functionma_fonction(){alert("Je suis exécuté dans ma_fonction");}
void est une déclaration placée obligatoirement en début d'instruction.void ne fait rien, ne retourne rien, et n'est utile que dans un seul contexte : les pseudo-URL#"ltr"><ahref="#"/w/index.php?title=Programmation_JavaScript/Mots_r%C3%A9serv%C3%A9s&veaction=edit§ion=T-7" title="Modifier la section : with">modifier |modifier le wikicode]
Permet de simplifier la référence aux propriétés et méthodes des objets en précédant un bloc d'instruction dans lequel un objet devient implicite. La déclarationwith rajoute en fait un niveau tout en haut de la pile descopes.
with(navigator){alert(appName+" "+appVersion);}
est équivalent à
alert(navigator.appName+" "+navigator.appVersion);
Employé dans unefonction, provoque le retour au programme appelant avec renvoi facultatif d'un résultat.
functionma_fonction(aparam){s="";if(aparam=="")return;// Sortie sans renvoyer de résultatelses="Le résultat";returns;// Renvoie le contenu de s}
Permet de définir l'exécutionconditionnelle d'instructions ou d'un bloc d'instructions.Peut-être utilisé conjointement à else.
a=5;if(a==5)alert("la condition est remplie");
Utilisé conjointement àif, permet d'exécuter des instructions alternativement au résultat de la condition spécifiée par if.
a=5if(a==5)alert("a est égal à 5");elsealert("a est différent de 5");
Utilisé conjointement à case, permet d'implanter unsélecteur de cas.
functiontest(condition){switch(condition){case"1":alert("condition='1'");break;case"3":alert("condition='3'");break;case"5":alert("condition='5'");break;}}
Utilisé à l'intérieur d'un blocswitch, constitue un des choix du sélecteur.
Utilisé à l'intérieur d'un blocswitch, permet de sortir du sélecteur sans procéder tests suivants.Utilisé à l'intérieur d'une boucle telle un blocswitch, permet de quitter la boucle immédiatement.
Utilisé à l'intérieur d'un blocswitch, constitue l'option par défaut du sélecteur.
Introduit uneboucle itérative.
for(i=0;i<5;i++){alert(i);}
For each :
vararray=[1,2,3];for(lineinarray){alert(line);}
En tableau associatif :
vararray={"a":1,"b":2,"c":3};for(constlineinarray){alert('Clé : '+line+', valeur : '+array[line]);}
NB : voir aussi la méthode Array.prototype.forEach()[3].
Introduit une boucle itérative conditionnelle avec test effectué à chaque tour par "while" :
i=0do{i++alert(i);// Affichera 1, puis 2, puis 3, puis 4, puis 5}while(i<5);
Introduit une boucle itérative conditionnelle:
i=0while(i<5){i++;// Incrémenter ialert(i);// Affiche 1, puis 2, puis 3, puis 4, puis 5}
Utilisé dans une boucle "for", "while" et "do", permet de sauter un tour.
for(i=-2;i<=2;i++){if(i==0)continue;// Si i == 0, on passe directement à 1alert(5/i);// On évite ainsi la division par zéro.}
Provoque une erreur personnalisée.
thrownewError("votre erreur");// a le même effet visuel que alert("votre erreur");
Évalue un bloc (try) en capturant les erreurs, tente de les gérer (catch) si elles se produisent, et quoiqu'il arrive, évalue un dernier bloc (finally).
Opérateur qui détermine l'appartenance à un objet. Dans une bouclefor... in, permet de répéter des instructions pour chaque propriété d'un objet.
Opérateur qui permet l'instanciation d'un objet.
varmon_tableau=newArray();
Cetopérateur permet de tester si une valeur est une instance d'un objet :
t=newArray();alert(tinstanceofArray);// Affiche truealert(tinstanceofDate);// Affiche false
Cetopérateur renvoie le type de la variable placée à droite.
Les valeurs renvoyées partypeof correspondent aux types de variables JavaScript, soit : boolean string number function object undefined.
Cetopérateur permet de supprimer une propriété.
Dans le constructeur ou une méthode d'un objet, c'est une référence à l'objet. Hors de ce contexte,this référence l'objet globalwindow.
Valeur booléenne "vrai".
if(true){alert("Je m'affiche toujours");}
Valeur booléenne "faux".
if(ma_bool==false)alert("C'est pas vrai...")
Valeur de type "object" qui ne référence rien.
C'est la valeur de toutes les variables inexistantes ou supprimées.
Les versions futures de JavaScript intégreront peut-être un ou plusieurs mots réservés parmi la liste suivante. Il est donc officiellement déconseillé de les employer comme identificateurs dans les programmes actuels, sous peine de risquer un comportement bizarre dans le futur[4].
abstractbooleanbytechardoubleenumfinalfloatgotoimplementsintinterfacelongnativepackageprivateprotectedpublicshortsuper
enum, implements, interface, private, static.Les variables permettent d'instancier un objet et de manipuler cette instance à l'aide d'un identificateur (le nom de la variable). Tous les identificateurs en JavaScript sont des références à un objet. Javascript étant un langage au typage dynamique, le type des objets n'est pas déclaré explicitement et il peut changer automatiquement.
Il est donc possible de déclarer une variable sans lui définir de type. Ou plutôt, une variable déclarée de telle manière sera du type undefined.
Tout au long de son utilisation, cette variable pourra changer de type sans que l'interpréteur n'y trouve rien à redire.
var ma_versatile; // est undefinedma_versatile = "Je deviens une chaîne"; // devient stringma_versatile = 5; // devient numberma_versatile = new Array(); // devient object
Il n'est en fait pas nécessaire de déclarer une variable (avec le mot-clévar). La différence est expliquée ci-après.
Les règles d'élaboration des identificateurs sont décrites àce lien.Pour résumer, les identificateurs comportent des caractères alphanumériques et le tiret soulignant (_). Ils ne peuvent commencer par un chiffre, et les majuscules comptent.
L'instanciation directe (sans mot-clé var) d'un objet avec un identificateur donne souvent l'impression de créer une variable globale. En réalité, la notion de "variable globale" n'existe pas en JavaScript. Toutes les variables sont, sauf quand on les déclare avecvar, des propriétés d'un objet. Par défaut, cet objet est implicitement l'objetwindow (et non,window n'est pas une variable globale qui ferait exception à la règle car il est une de ses propres propriétés, c'est-à-dire quewindow est une propriété dewindow).
Commewindow reste l'objet implicite la plupart du temps, une variable créée ainsi pourra être employée comme si elle était globale :
ma_variable = "une valeur";function maFonction(){ mon_autre_variable = "une autre valeur"}maFonction()alert(mon_autre_variable) // affiche "une autre valeur"La variable mon_autre_variable est certes déclarée dans une fonction, mais il faut lire "window.mon_autre_variable" donc c'est une propriété de window et elle ne sera pas détruite automatiquement à la fin de la fonction.
Pour économiser du code, il peut être intéressant de sous-entendre un autre objet quewindow. Cela se fait explicitement avec un blocwith. Cette déclaration ne fonctionne pas aussi simplement qu'en Basic, par exemple. L'objet est en fait placé en haut de lascope chain dans le bloc d'instruction, presque comme si ses propriétés étaient des variables locales d'une fonction (voirProgrammation JavaScript/Scope chain). Lorsqu'on utilise un identificateur dans un blocwith, la résolution se fait aussitôt qu'une des conditions suivantes est remplie :
Si aucune condition n'est remplie et que l'expression affecte une valeur à la variable, cette variable est créée comme propriété de l'objet global. Si l'expression ne fait qu'utiliser la valeur, elle retournera simplementundefined.
c=trued="propriété de window"monObjet={a:0,d:"propriété de monObjet"}with(monObjet){alert(a)// affiche la valeur de monObjet.a : "0"a=2// monObjet.a existe et va être utilisé// si on veut utiliser window.a, il faut le faire explicitementwindow.a=5b="texte"// b n'est encore défini nulle part donc window.b est créé// si on veut créer monObjet.b, il faut le faire explicitementmonObjet.b="autre chose"deletec// monObjet.c n'existe pas, mais window.c va être utiliséalert(d)// affiche "propriété de monObjet"// si on veut l'autre, il faut être explicitealert(window.d)// affiche "propriété de window"}
À l'aide de la déclarationvar, il est possible de définir une variable locale, qui n'est pas une propriété d'un autre objet. Cette déclaration peut avoir lieu n'importe où dans le corps d'une fonction, pas nécessairement au début, mais seules les utilisation ultérieures de l'identificateur feront référence à la variable locale puisqu'elle n'existait pas avant.
Comme toute variable locale, elle est automatiquement détruite à la fin de la fonction, bien que sa valeur puisse être sauvegardée dans certains cas (voirFermeture).Par contre, elle ne peut pas être détruite par l'opérateurdelete.
functionfoo(){varloc_1=2// n'a pas d'existence en dehors de foo()for(i=0;i<loc_1;i++){varloc_2=2*loc_1;// loc_2 est disponible pour toute la fonction foo()alert(loc_2);}alert(loc_2);// S'affiche sans problème}alert(loc_2);// Provoque une erreur
Si la déclarationvar est utilisée en-dehors de toute fonction, la variable sera utilisable dans tout le script.
L'exemple précédent montre l'effethositing (levage) des déclarations avec le mot-clévar.Les déclarations sont en effet remontées au niveau du premier bloc de code de la fonction.Cela permet dans l'exemple précédent de continuer à accéder à la variableloc_2 après la bouclefor.
Par contre, la partie initialisation n'est pas rehaussée et la variable a donc une valeur indéfinie (undefined).L'exemple précédent équivaut au code suivant :
functionfoo(){varloc_1;varloc_2;// Déclaration rehausséevari;// Déclaration impliciteloc_1=2;for(i=0;i<loc_1;i++){loc_2=2*loc_1;// loc_2 est disponible pour toute la fonction foo()alert(loc_2);}alert(loc_2);// S'affiche sans problème, vaudrait undefined si loc_1 <= 0}
Il en va de même pour les fonctions déclarées dans des fonctions :
functionadd(n){vart=addn(5);functionaddn(a)// ^^ déclaration rehaussée implicitement{returna+n;}returnt;}
Cela équivaut au code suivant :
functionadd(n){vart;functionaddn(a){returna+n;}t=addn(5);returnt;}
Depuis Javascript 5, le mot-clélet permet de déclarer des variables locales à un bloc, sans effet de rehaussement.
functionfoo(){letloc_1=2;for(i=0;i<loc_1;i++){letloc_2=2*loc_1;console.log(loc_2);}console.log(loc_2);// --> Uncaught ReferenceError: loc_2 is not defined}
Javascript est faiblement typé, mais typé quand même. Voici une revue des types que peut prendre une variable. Il est possible à tout moment de vérifier le type avec l'opérateurtypeof.
Une variable est du type undefined dans trois cas:
varmaNouvelleVar;// Déclarée mais pas affectéealert(typeofmaNouvelleVar);// Affiche undefined
undefined, ou qu'on lui affecte le résultat d'une expression qui retourne cette valeur.varjeSaisPas=undefinedvarcaNExistePas="impossible".enFrancaisalert(typeofjeSaisPas)// Affiche undefinedalert(typeofcaNExistePas)// Affiche undefined
alert(typeofvarPasDeclaree);// Affiche undefined (si elle n'a effectivement pas été affectée)monEphemere="exister";deletemonEphemere;// la vie est courtealert(typeofmonEphemere);// Affiche undefinedalert(varPasDeclaree)// erreur !!
À noter : dans les deux premiers cas, la variable existe et possède une valeur (undefined). On peut lire cette valeur sans provoquer d'erreur. Dans le troisième cas cependant, la variable n'existe pas : l'opérateurtypeof retourne "undefined", mais lire directement la valeur de la variable provoque une erreur.
JavaScript réunit en un seul type les entiers, petits et grands, les décimaux, et les réels, flottants ou pas.
r=1/3;alert(r);// affiche 0.333333333333alert(typeofr);// affiche numbern=4/2;alert(n);// affiche 2alert(typeofn);// affiche number3.6e5// 360 000 en notation scientifique0x40// 64 en notation hexadécimale0100// 64 en notation octale
Concrètement, les nombres sont stockés sur 64 bits, avec une mantisse de 53 bits. Cela permet des valeurs entières jusqu'à 9 007 199 254 740 991, à partir duquel on commence à perdre de la précision jusqu'à 2^1024-1 qui est la valeur flottante la plus élevée représentable en JavaScript.
En fait, JavaScript inclut également dans le typenumber deux valeurs spéciales.Infinity, un nombre signé, est renvoyé dès que le résultat dépasse la capacité de stockage denumber, mais aussi dans des cas limites simples. Dans les cas indécidables, ou bien lorsqu'une opération qui retourne un nombre ne peut pas le faire, c'est la valeurNaN (Not A Number) qui est renvoyée (voir lesopérateurs arithmétiques,les méthodes de Number etles méthodes de Math pour les cas qui produisent ces deux valeurs).
1/0==Infinity-2/Infinity==00/0==NaNNumber("texte")==NaN
Le typestring stocke une chaîne de caractères. C'est aussi le type le plus "faible" du langage : n'importe quelle valeur peut être convertie en chaîne, et en cas de doute avec l'opérateur+, c'est une concaténation qui aura lieu, pas une addition.
s = "Une chaîne de caractères";alert(typeof s); // Affiche "string"
Tous les objets possèdent une méthode générique toString() "magique" qui est appelée lorsqu'il faut convertir leur valeur en chaîne. Elle peut bien sûr être écrasée par une méthode plus spécifique.
Les chaînes de caractères en JavaScript sont encadrées par des guillemets droits (double quotes, ") ou dessingle quotes ('), au choix. Il n'y a pas de distinction entre des chaînes définies avec l'un ou l'autre, mais si on commence une chaîne par un type de guillemet il faut la finir par le même type. À l'intérieur d'une chaîne, les séquences d'échappement connues fonctionnent comme partout :
etc.
Enfin, JavaScript utilise des chaînes de caractères Unicode multi-octets. Quel que soit l'encodage du fichier où est écrit le script, il est toujours possible d'inclure n'importe quel caractère dans une chaîne, soit en récupérant une chaîne d'un autre fichier, soit en créant une chaîne avec la méthode statique String.fromCharCode(), soit en utilisant la séquence d'échappement :
Une variable de type boolean accepte deux valeurs : vrai et faux.
b=true;alert(typeofb);// Affiche "boolean"c=(5==3);// est faux, mais l'expression est booléenne.alert(typeofc);// Affiche "boolean"
Dans une comparaison, les valeurs suivantes sont équivalentes (opérateur==) àfalse :
Par ailleurs, les valeurs suivantes donnentfalse si on les convertit (explicitement ou pas) en booléen, bien qu'elle ne soient pas toutes équivalentes par comparaison :
Comme ces listes le montrent, une valeur peut être équivalente àfalse sans être considérée comme fausse elle-même ! Et inversement, une valeur considérée comme fausse n'est pas forcément équivalente au booléenfalse.
Cela peut sembler surprenant et illogique à première vue (et source de quelques bugs) mais il faut comprendre l'origine de ces différences :
Une valeur qui n'est pas équivalente àfalse ne sera pas pour autant équivalente àtrue par comparaison, à commencer parnull,NaN etundefined mais aussi toute valeur qui n'est pas équivalente à l'une des conversions possibles detrue (la chaîne "true", la chaîne ou le nombre 1).Par contre, toutes les valeurs qui ne donnent pasfalse par conversion enboolean donnenttrue, sans exception.
Attention, les valeurs de typeobject, y compris les instances des classesString,Number etBoolean créées avec le constructeurnew sont toujours converties entrue, même lorsque leur valeur est "", 0 oufalse (la seule exception estnull qui est de typeobject et dont la conversion en booléen estfalse). Cependant la comparaison avecfalse fonctionne de la même façon qu'avec des valeurs littérales.
Une variable de typeobject assume pleinement sa nature. Les autres types de variables, dits "scalaires", se comportent comme s'ils étaient eux-mêmes une valeur. Ainsi, lorsqu'on passe une variable scalaire à une expression, sa valeur est clonée. En revanche, passer une variable de typeobject ne fait que copier la référence, et la valeur n'est pas clonée.
L'existence de "classes" en JavaScript est discutée. Le langage ne possède pas de déclaration de classe en tant que telle. Pour cette raison, l'utilisation de ce terme sera mise entre guillemets.
Il existe trois manières de créer une variable de typeobject.
L'instanciation explicite d'un objet grâce à un constructeur s'effectue avecl'opérateurnew.
t=newArray();alert(typeoft)// Affiche "object"
Les expressions littérales de chaînes, nombres et booléens créent des variables scalaires alors que le constructeur de ces types crée un objet (explicitement de typeobject et donc strictement différents d'une valeur scalaire équivalente). Mais les expressions littérales de fonctions, tableaux et expressions rationnelles créent des objets, car ce ne sont pas des types scalaires. Ces objets, instanciés sans utilisation denew, sont néanmoins strictement identiques à leur équivalent produit par l'appel d'un constructeur. Par exemple :
// valeur scalaire vs. objet"chaîne"!==newString("chaîne")2.34!==newNumber(2.34)// objet vs. objet... c'est pareil !["a","b","c"]===newArray("a","b","c")/(\w+) ?\(/i===newRegExp("(\w+) ?\(","i")
On peut créer un objet générique (qui sera simplement une instance de la "classe"Object) avec la notation littérale. Cela consiste à écrire, entre accolades, une liste de couples clé : valeur séparés par des virgules, la clé pouvant être un identifiant ou bien une chaîne, et la valeur pouvant être n'importe quelle valeur. La clé et la valeur sont séparés par deux points (':').
objetLitteral={nom:"Mac OS X",version:10.5,"nom de code":"Leopard"}
Attention, dans l'exemple ci-dessus, on ne pourra accéder à la dernière propriété ("nom de code") de l'objet qu'avec la notation tableau (avec des crochets), pas la notation objet (avec des points) car ce n'est pas un identifiant valide (il y a des espaces dedans).
Le DOM (aussi bien W3C que IE) définit certaines "classes" : HTMLElement, HTMLTextNode, HTMLDocument, CSSRuleSet, CSSRule, etc. On doit utiliser les méthodes du DOM (comme document.createElement()) pour instancier ces objets (le "DOM 0" fait exception à cette règle et à bien d'autres).
Les autres "classes" d'objets ne peuvent être créés que par un constructeur. Il y a des constructeurs natifs tels queDate, et on peut définir un constructeur soi-même. Pour plus de détails, voir le chapitre consacré aux objets.
La différence essentielle entre une variable de type function et une variable de type object, est qu'on peut appeler une fonction. Dans les deux sens du terme :
Attention : ne pas confondre le type de variable ("object", "function") avec les constructeurs homonymes (Object,Function). Une variable de type "object" peut avoir n'importe quel constructeur sauf Function et bien des comportements différents, tous différents du comportement d'une fonction. Mais cette section est uniquement consacrée autype "function".
Contrairement aux autres types, le type "function" n'a pas de valeur spéciale (telle queNaN pour "number" ounull pour "object"). Il n'y a aucun moyen de convertir directement un autre type en fonction.
Une fonction est créée par l'expression littérale (exemple ci-dessous) ou bien par le constructeur Function.
functionfibonacci(n){if(isNaN(n)||n<0)returnundefinedn=Math.floor(n)varu=1,v=0while(n--)u=v+(v=u)returnv}
Cette déclaration crée une variable "fibonacci" qui référence la fonction, mais c'est aussi une opération qui retourne la référence de la fonction, que l'on peut ainsi affecter à une autre variable. Il est d'ailleurs possible de déclarer une fonction anonyme. De plus, toute nouvelle fonction reçoit automatiquement une propriétéprototype identique au prototype de la fonction Object.
L'appel se fait en ouvrant et fermant une paire de parenthèses juste après une expression dont la valeur est de type "function". Cette expression n'est pas obligatoirement le nom d'une fonction, ni même un identifiant. Cette signification des parenthèses est prioritaire sur la signification générale (forcer une expression à être évaluée avant celles qui l'entourent).
f=fibonaccideletefibonacci// efface seulement la variable, pas la fonction, qui est toujours référencée par fx=f(10);// Constitue l'appel de la fonction fibonacci, en lui passant un argumentalert(f)// affiche le code de la fonction, y compris le nom donné dans sa déclaration, "fibonacci"
Les opérateurs et méthodes qui acceptent des objets comme opérande ou argument fonctionnent pareil avec des fonctions, notamment le point pour accéder aux propriétés de la fonction.L'opérateurnew n'accepte que des fonctions comme opérande.
Par défaut, la conversion d'une fonction en chaîne retourne le code source de la fonction,préalablement reformaté par l'interpréteur JavaScript : les point-virgules, sauts de ligne et indentations seront normalisés.
Les opérateurs JavaScript reprennent la plupart des opérateurs dulangage C.
Le principal opérateur d'affectation est le signe égal (=). Il permet d'affecter une valeur à une variable.
ma_var = "La valeur affectée";
Comme en C, l'opérateur d'affectation copie la valeur de l'expression qui le suit (opérande de droite) dans la variable qui le précède (opérande de gauche). Contrairement au C, l'opération d'affectation ne retourne généralement pastrue oufalse, mais la valeur qui a été affectée. Dans le cas où l'affectation est impossible, JavaScript lance une exception.
Lorsque l'identifiant à gauche du signe = n'est pas une propriété existante, cette propriété est ajoutée automatiquement à l'objet global (window) et l'affectation se déroule normalement. Il n'y a jamais d'erreur lorsqu'on affecte une valeur à une variable d'un type différent car ce sont les valeurs elles-mêmes qui ont un type en JavaScript, pas les variables. L'affectation à une constante prédéfinie (commeMath.PI) ne provoque pas d'erreur mais la constante ne sera pas modifiée.
La seule cause d'erreur possible lors d'une affectation est lorsque l'opérande de gauche n'est pas une variable valide ou devient autre chose qu'une variable avant l'affectation :
2 = "valeur" // erreur de syntaxe2 + a = "valeur" // erreur car l'addition est évaluée en premier et son résultat n'est pas une variable2 + (a = "valeur") // correct car l'affectation a lieu avant l'addition.
JavaScript reprend les raccourcis sténographiques du langage C en proposant les autres opérateurs d'affectation qui font précéder le signe égal par un opérateur binaire arithmétique (+, -, *, / ou %), de concaténation (+), bit-à-bit (&, | ou ^) ou de décalage de bits (<<, >> ou <<<).
ma_var = ma_var + 2 est remplacé avantageusement parma_var += 2ma_var = ma_var / 2 peut s'écrirema_var /= 2ma_var = ma_var << 2 peut s'écrirema_var <<= 2ma_var = ma_var ^ 1 peut s'écrirema_var ^= 1
et ainsi de suite.
Surchargé avecl'opérateur arithmétique d'addition, l'opérateur de concaténation permet de joindre des chaînes, ou des chaînes avec d'autres objets comme des nombres, qui sont alors automatiquement convertis en chaîne. Le résultat d'une concaténation est du typestring.
La concaténation ne provoque jamais d'erreur car en JavaScript, absolument tout peut être converti en chaîne.
Attention, l'opérateur + fonctionne ainsi dès qu'au moins une des opérandes est de type "string" (y compris la chaîne vide ""), "function" ou "object" (à l'exception denull). Une chaîne représentant un nombre, par exemple la chaîne "17", sera considérée comme une chaîne et ne sera pas convertie automatiquement en nombre par cet opérateur.
s1 = "un ";s2 = "bout";alert(s1 + s2); // Affiche "un bout"
s = "Valeur du nombre : ";n = 10;alert(s + n); // Affiche "Valeur du nombre : 10"
s = "17"; // Une chaîne représentant un nombren = 89;alert(s + n); // Affiche "1789" et non pas 106
t = Array(1,2,3);d = Date();alert(t+d); // Affiche "1,2,3Fri Jan 20 17:13:32 2006"
En présence de deux opérandes de typenumber ouboolean, d'objets construits avecnew Number, de l'objetnull, ou de la valeurundefined, l'opérateur d'addition va effectuer la somme arithmétique des deux valeurs, après les avoir converties en nombre le cas échéant. Le résultat de l'addition est de typenumber :
Exemple :
3 + 1 donne4Dans le cas limiteInfinity + -Infinity, le résultat est NaN.
Attention : si au moins l'un des deux objets ne fait pas partie de ceux mentionnés ci-dessus, alors l'opérateur se comporte comme unopérateur de concaténation :
Exemple :
3 + "bonjour" donne"3bonjour" (et non 0)Accessoirement, l'opérateur + avec une seule opérande à sa droite se comporte comme un opérateur unaire de conversion en nombre, comme la méthode Number(). C'est très utile pour forcer justement les autres + à additionner au lieu de concaténer :
"3" + 10 + "5" === "3105";+"3" + 10 + +"5" === 18 // les chaînes sont converties explicitement en nombres
Retourne la différence arithmétique entre deux valeurs de typenumber ou converties dans ce type.
Le résultat est lui-même de type number.
Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoieNaN (Not a Number). Dans le cas limiteInfinity-Infinity, le résultat est également NaN.
Accessoirement, le signe - avec une seule opérande à sa droite devient un opérateur unaire qui en change le signe (après l'avoir convertie en nombre si nécessaire).
Retourne le produit arithmétique de deux valeurs de typenumber ou converties dans ce type.
Le résultat est lui-même de type number.
Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoieNaN (Not a Number).Dans le cas limiteInfinity*0, le résultat est également NaN.
L'opérateur de division permet d'effectuer la division de deux entités de typenumber ou converties dans ce type.
Le résultat est lui-même de type number.
Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoieNaN (Not a Number). Dans les cas limiteInfinity/Infinity et0/0, le résultat est également NaN.
À noter : la division d'un autre nombre par zéro est possible et retourne le nombreInfinity sans provoquer d'erreur.
Attention : le signe / est également utilisé pour délimiter les expressions rationnelles. En cas d'ambiguïté (même en cas de saut de ligne sans point-virgule), JavaScript privilégie la division.
L'opérateur '%' permet d'effectuer l'opération mathématiquemodulo
Il retourne l'opérande de gauche modulo l'opérande de droite, et les deux opérandes sont d'abord converties ennumber si elles étaient d'un autre type.
Le résultat est lui-même de type number.
Comme pour tous les opérateurs arithmétiques, si l'une des deux opérandes, (ou les deux) n'est pas un nombre (NaN, soit à l'origine, soit parce que la conversion en nombre n'a pas été possible), l'opérateur renvoieNaN (Not a Number). De plus, n'importe quel nombre modulo zéro retournera NaN.
À noter : l'opérateur % accepte sans problème des nombres non-entiers pour les deux opérandes mais dans ce cas il y a souvent un problème de précision, par exemple 4%1.6 affichera 0.7999999999999998 au lieu de 0.8.
nb = 7 % 3; // nb prend la valeur 1 (car (7 - (2*3)) = 1) nb = -7 % 3; // nb prend la valeur -1 nb = 7 % -3; // nb prend la valeur 1 nb = 4 % 1.6; // nb prend (presque) la valeur 0.8
Attention : le signe % est utilisé par l'encodage des URL. S'il est suivi de deux chiffres hexadécimaux, le navigateur convertira la séquence %xx en un caractère si le code se trouve dans une URL#"/w/index.php?title=Programmation_JavaScript/Op%C3%A9rateurs&veaction=edit§ion=T-9" title="Modifier la section : Limitation sur les entiers">modifier |modifier le wikicode]
Javascript n'a pas de type pour les nombres entiers, il utilise des nombres à virgule flottante.Les entiers ou les chiffres d'un nombre réel sont limités à 54 bits dans les opérations arithmétiques, et à 32 bits dans les opérations sur les bits.
Par exemple, l'expression0xF0000000000003FF==0xF000000000000000 retournetrue car seuls les 54 bits de poids forts sont stockés.
L'opérateur logique &&, aussi appelé "prérequis", détermine si deux expressions sont "vraies" (au sens booléen). Le résultat est l'une des deux opérandes, et la conversion booléenne du résultat est identique au résultat de l'opérateur && dans les langages où il retourne simplement un booléen.
Cet opérateur est utilisé fréquemment dans les structures de contrôle if, while, etc :
if ((a == true) && (b==false)) alert("C'est vrai!");L'opérateur && en JavaScript retourne l'opérande de gauche si elle est fausse (c'est-à-dire si sa conversion en booléen est égale àfalse)sans évaluer l'expression de droite, et sinon, évalue et retourne l'opérande de droite.Par conséquent, son résultat n'est généralementpas un booléen et && n'est pas strictement commutatif :
"chaîne" && 25 // retourne 2525 && "chaîne" // retourne "chaîne"NaN && new Date() // retourne NaN et ne crée pas d'objet Datenew Date() && NaN // retourne NaN après avoir créé un objet Datenull && "" // retourne null"" && null // retourne ""
Cela peut provoquer quelques comportements inattendus, par exemple :
if(("vrai" && "vrai") == true) // cette condition ne sera jamais vraie, alors que ce serait le cas en CMais on peut aussi en tirer partie pour condenser un code tel que celui-ci :
if( erreur ) x=prompt( "Échec de l'opération. Recommencer ?" )
en le remplaçant par celui-ci :
erreur && (x=prompt( "Échec de l'opération. Recommencer ?" ))
D'où le nom "prérequis" : l'opérande de droiterequiert que l'opérande de gauche soit vraie pour être évaluée et retournée.
L'opérateur logique ||, aussi appelé "défaut", détermine si au moins une expression est "vraie" (au sens booléen). Le résultat est l'une des deux opérandes, et la conversion booléenne du résultat est identique au résultat de l'opérateur || dans les langages où il retourne simplement un booléen.
if ((a==true)||(b==true)) alert("L'une des deux propositions est vrai. Peut-être les deux");L'opérateur || en JavaScript retourne l'opérande de gauche si elle est vraie (c'est-à-dire si sa conversion en booléen est égale àtrue)sans évaluer l'expression de droite, et sinon, évalue et retourne l'opérande de droite.Par conséquent, son résultat n'est généralementpas un booléen et || n'est pas strictement commutatif :
"chaîne" || 25 // retourne "chaîne"25 || "chaîne" // retourne 25NaN || new Date() // retourne new Date()new Date() || NaN // retourne new Date()null || "" // retourne """" || null // retourne nullclose() || new Date() // ferme la fenêtrenew Date() || close() // retourne new Date() et ne ferme pas la fenêtre
Cela peut provoquer quelques comportements inattendus, par exemple :
if(("vrai" || "faux") == true) // cette condition ne sera jamais vraie, alors que ce serait le cas en CMais on peut aussi en tirer partie pour condenser un code tel que celui-ci :
function augmenter(n){ if(!n) n=1 ...en le remplaçant par celui-ci :
function augmenter(n){ n=n||1 ...D'où le nom "défaut" : si l'opérande de gauche a une valeur non-nulle, elle est utilisée, mais sinon l'opérande de droite est utilisée comme valeurpar défaut. Cela permet à la fonction dans ce dernier exemple de prévoir une valeur par défaut pour son argument 'n', au cas où il ne serait pas fourni.
L'opérateur de négation ! contredit logiquement l'expression qu'il précède. Il en convertit d'abord la valeur en booléen si elle était d'un autre type, et retourne le booléen contraire.
if (!true) alert("alors c'est faux !");Si on l'utilise deux fois de suite (!!) il permet simplement de convertir la valeur de son opérande en booléen :
"chaîne" != true
mais
!! "chaîne" === true
Les opérateurs bit-à-bit et de décalage de bits commencent par convertir leurs opérandes en entiers de 32bits, après les avoir converties ennumber si c'était nécessaire. Les nombres NaN et Infinity donnent le nombre entierzéro.
Les opérateurs logiques &, |, ^ et ~ effectuent un test logique séparément sur chaque bit, de la manière illustrée par l'exemple suivant ou l'opérateur est un ET bit-à-bit :
varn=26&12;
1 1 0 1 0 (26 en binaire) 0 1 1 0 0 (12 en binaire)-------------------1&0 1&1 0&1 1&0 0&0 <- opérations bit à bit 0 1 0 0 0 <- résultat (8 en binaire)
Les autres opérateurs de bits sont les opérateurs de décalage des bits (vers la droite ou la gauche).
Cet opérateur retourne pour deux opérandes entiers (a et b) un nombre entier c dont chaque bit est calculé par la table de vérité suivante :
a & b = c0 0 00 1 01 0 01 1 1
Cet opérateur retourne pour deux opérandes entiers (a et b) un nombre entier c dont chaque bit est calculé par la table de vérité suivante :
a | b = c0 0 00 1 11 0 11 1 1
Cet opérateur retourne pour deux opérandes entiers (a et b) un nombre entier c dont chaque bit est calculé par la table de vérité suivante :
a ^ b = c0 0 00 1 11 0 11 1 0
Cet opérateur retourne pour un opérande entier a un nombre entier c dont chaque bit est l'opposé du bit original :
~a = c 0 1 1 0
Cet opérateur retourne l'opérande de gauche après avoir décalé ses bits vers la gauche du nombre de bits spécifié par l'opérande de droite, en ajoutant de nouveaux bits de valeur nulle et en supprimant les bits qui dépassent de l'autre côté.
Exemple :
varc=15<<3;
0 0 0 0 1 1 1 1 (15 en binaire)0 1 1 1 1 0 0 0 (décalé de 3 bits vers la gauche en ajoutant des zéros)
Attention : le bit le plus à gauche détermine le signe du nombre, et il est aussi affecté par le décalage.
Cet opérateur retourne l'opérande de gauche après avoir décalé ses bits vers la droite du nombre de bits spécifié par l'opérande de droite, en ajoutant de nouveaux bits de valeur nulle à droite et en supprimant des bits de poids faible (les plus à gauche dans la représentation binaire).
Exemple :
varc=15>>3;
0 0 0 0 1 1 1 1 (15 en binaire)0 0 0 0 0 0 0 1 (décalé de 3 bits vers la droite en supprimant les bits 1 1 1)
Le bit de signe (le plus à gauche) est préservé.
Cet opérateur retourne l'opérande de gauche après avoir décalé ses bits vers la droite du nombre de bits spécifié par l'opérande de droite, en ajoutant de nouveaux bits de valeur nulle à droite et en supprimant des bits de poids faible (les plus à gauche dans la représentation binaire).
Exemple :
varc=-15>>>3;
1 1 1 1 1 ... 1 1 0 0 0 1 (-15 en binaire)0 0 0 1 1 ... 1 1 1 1 1 0 (décalé de 3 bits vers la droite en supprimant les bits 0 0 1)
Attention : le bit le plus à gauche détermine le signe du nombre, et il est aussi affecté par le décalage. Le résultat de l'exemple ci-dessus est 536870910.
L'opérateur d'égalité== renvoie la valeur vrai si les deux termes à comparer sont équivalents.
valeur="50";if(valeur==50)alert("valeur vaut 50");// l'alerte sera affichée
L'opérateur=== compare les valeurs et leur type. Le résultat est vrai (true) si les deux valeurs sont égales et de même type.
valeur="50";if(valeur===50)alert("valeur vaut 50 (nombre entier)");// l'alerte ne sera pas affichée (chaîne et entier sont deux types différents)
Si les deux opérandes sont des références (types object, function...), c'est les références qui sont comparées.
if([]==[])alert("les deux listes sont identiques");// l'alerte ne sera pas affichée (chaque opérande est une référence différente même si les listes [] et [] sont semblables)
Quelques valeurs spéciales :
undefined est seulement équivalent, mais pas identique, ànull."" est équivalente au nombre zéro, au booléenfalse, et à une liste vide[].1 est, de plus, équivalent au booléentrue.NaN n'est pas équivalent à la chaîne"NaN".Ces équivalences sont commutatives.
L'opérateur d'inégalité!= renvoie la valeur vrai si les deux termes à comparer sont différents.
valeur="50";if(valeur!=50)alert("valeur ne vaut pas 50");// l'alerte ne sera pas affichée
L'opérateur!== compare les valeurs et leur type. Le résultat est vrai (true) si les deux valeurs sont différentes ou de type différent.
valeur="50";if(valeur!==50)alert("valeur ne vaut pas 50 (nombre entier)");// l'alerte sera affichée (chaîne et entier sont deux types différents)
Respectivement inférieur, inférieur ou égal, supérieur ou égal, supérieur, permet de comparer des valeurs.
if(10>5)alert("Normal, c'est le double");
À l'instar de l'opérateur +, les opérateurs de comparaison peuvent comparer numériquement ou alphabétiquement. Si les deux opérandes sont de typesnumber ouboolean,object construit parnew Number, ou les valeursnull ouundefined (les mêmes valeurs qui font que l'opérateur + les additionnerait), alors les valeurs sont converties en nombres et comparées en tant que telles.Sinon, les valeurs sont converties en chaînes et comparées alphabétiquement.
Ces deux opérateurs proposent un moyen simple d'incrémenter ou décrémenter une variable de typenumber. Si l'opérande n'est pas de type number, elle est convertie automatiquement. Si ce n'est pas une variable du tout, cela provoque une erreur comme pour l'affectation.
a=0;a++;// Réalise a = Number(a) + 1;alert(a);// Affiche 1a--;alert(a);// Affiche 0
Note : Appliqué sur une valeur qui ne peut être convertie, comme une chaîne qui ne représente pas un nombre, l'opérateur abîme définitivement le contenu de la variable. Contrairement à l'opérateur +, l'opérateur ++ ne concatène jamais.
s="une chaîne";s++;// Number("une chaîne") donne NaN, et NaN+1 reste NaN.alert(s);// Affiche "NaN", et la chaîne de départ est perdue.
Remarque :
Comme dans les autres langages, les opérateurs ++ et -- peuvent être placés avant ou après leur opérande. Cela change la valeur retournée par l'opération :
a=0;alert(a++);// Affiche 0, mais a vaut 1 car incrémenté après retour de sa valeur
a=0;alert(++a);// Affiche 1, a vaut bien 1 car incrémenté avant retour de sa valeur
L'opérateur conditionnel est ternaire (il prend trois opérandes). Il est représenté par le signe ? qui sépare les deux premières, et : qui sépare les deux dernières. L'opération retourne l'une des deux opérandes qui entourent les deux points (:) après avoir déterminé si l'expression précédant le point d'interrogation (?) est vraie ou fausse.
(X?A:B)
Si X est vrai (autrement dit si sa conversion en booléen donnetrue), l'opération évalue et retourne A sans évaluer B. Sinon, elle évalue et retourne B sans évaluer A.
On peut se représenter l'opérateur avec une structure if...else classique :
if(X)resultat=Aelseresultat=B
L'opérateurnew crée un nouvel objet qui hérite du prototype de la fonction qui le suit, puis appelle cette fonction dans laquelle le mot-cléthis sera une référence à ce nouvel objet. La fonction qui sert d'opérande à new (leconstructeur) peut prendre des arguments. Le résultat de l'opération est l'objet ainsi créé, sauf si le constructeur retourne autre chose.
maintenant=newDate()// crée un objet avec la fonction prédéfinie Date
functionLivre(nom,auteur)// définition d'un constructeur{this.nom=nomthis.auteur=auteur||"personne"// définit une valeur par défaut si auteur est undefined, null, false, 0 ou ''}hp=newLivre("Harry Potter et les Reliques de la Mort","JK Rowling")
Il est possible, dans l'opération d'instanciation, d'omettre les parenthèses après le nom de la fonction (comme si on ne l'appelait pas) lorsqu'on ne lui passe aucun argument :
maintenant=newDate// crée un objet avec la fonction prédéfinie Date
Bien sûr, une référence du constructeur est suffisante pour instancier un objet, il n'est pas nécessaire d'utiliser le nom de la fonction tel que défini dans la déclarationfunction :
o=Datemaintenant=newo()// crée un objet avec la fonction prédéfinie Date
Il est même possible de déclarer le constructeur dans la même ligne que new, et même d'utiliser une fonction anonyme :
singleton=new(function(){this.prop="valeur"})()
Si l'opérande n'est pas de type "function", l'opération provoque une erreur.
L'opérateurdelete supprime la propriété qui le suit. Si la propriété contient une référence à un objet, seule la référence est supprimée : l'objet existe toujours et, s'il est référencé par d'autres variables, ne sera pas supprimé.
a=3b=["une","liste"]c={prop:"valeur"}deletea// a n'existe plus, ni sa valeurdeleteb// supprime la propriété b ; la liste elle-même sera libérée car elle n'a plus aucune référencedeletec.propalert("prop"inc)// affiche false
Note : seul l'opérateurdelete efface la propriété. Affecternull ouundefined à une variable déréférence l'objet qu'elle référençait s'il y en avait un, mais la variable existe toujours :
a=newDate()c={prop:"valeur"}a=undefinedalert(a)// affiche "undefined"deleteaalert(a)// erreur !c.prop=undefinedalert("prop"inc)// affiche truedeletec.propalert("prop"inc)// affiche false
delete peut supprimer toute propriété existante (y compris prédéfinies telles que Math, Object...), mais pas les variables locales déclarées avecvar ni les arguments d'une fonction, ni les variablesNaN etundefined. Dans les cas où la variable ne peut pas être supprimée, l'opération retournefalse.delete accepte aussi des propriétés inexistantes, et des valeurs anonymes (dans ce cas, il n'a aucun effet).
a="valeur"varb="valeur"deletea// truedeleteb// false, et b n'est pas détruitdelete17// true, totalement inutile, et on peut toujours utiliser le nombre 17deleteMath.PI// false, c'est une propriété en lecture seuledeleteMath// true, et c'est dommage parce qu'on ne peut plus accéder à l'objet Math !
L'opérateur. (point) permet simplement d'accéder à la propriété, nommée par l'opérande de droite, de l'objet référencé par l'opérande de gauche. L'opérande de droite doit être un identifiant ; l'opérande de gauche peut être n'importe quelle expression qui retourne un objet différent denull.
window.document.URL// affiche la propriété "URL" de l'objet référencé par la propriété "document" de l'objet windowMath.sin(1.5)// appelle la méthode référencée par la propriété "sin" de l'objet MathnewDate().getTime()// appelle la méthode référencée par la propriété "getTime" d'un objet construit par Date
Si l'opérande de gauche est une valeur scalaire (string, boolean ou number), elle est convertie en un objet correspondant. Par exemple, une chaîne est convertie en un objet construit par String :
"chaîne".charAt(2)// affiche "a"
L'opérande de droite n'a pas besoin de désigner une propriété existante de l'objet. Il suffit (et il faut) que ce soit un identifiant valide.
L'opération provoque une erreur si l'opérande de gauche estundefined ounull, ou si l'opérande de droite n'est pas un identifiant.
Attention, le point est également le séparateur entre parties entière et décimale d'un nombre. S'il est immédiatement précédé par un nombre entier (sans espace), il ne fonctionnera pas comme opérateur.
Idem sur "." mais sans erreur (TypeError) si l'objet n'existe pas.
Définit une valeur par défaut si une variable est null ou undefined.
L'opérateurtypeof retourne une chaîne représentant le type de la valeur de l'expression à sa droite. Les possibilités sont "undefined", "boolean", "number", "string", "object" et "function".
if((typeofarg)!="number")alert("arg n'est pas un nombre !")
L'opérateurinstanceof détermine si l'opérande de gauche "hérite" de l'objet à droite. C'est-à-dire, pour parler JavaScript, si le prototype de l'objet à droite deinstanceof se trouve dans la chaîne de prototypes de l'opérande de gauche.instanceof retourne un booléen.L'opérande de droite n'a pas besoin d'être le constructeur de celle de gauche pour queinstanceof retournetrue.
newDate()instanceofDate// truenewDate()instanceofObject// truenewDate()instanceofArray// false[2,7,8]instanceofArray// true
instanceof retourne toujoursfalse lorsque l'opérande de gauche est une valeur scalaire (types string, boolean, number), undefined ou null. Une erreur se produit si c'est l'opérande de droite qui est dans ce cas.
L'opérateurin détermine si l'expression à sa gauche est le nom d'une propriété de l'objet à sa droite. L'opérande de droite doit obligatoirement être de type "object" et différente denull, sinon l'opération provoque une erreur. L'opérande de gauche peut être n'importe quelle valeur car elle sera automatiquement convertie en chaîne.
Exemple :
var liste = [1, 5, "bleu", new Date()]var perso = {nom : "Potter", prenom : "Harry"}alert(2 in liste) // affiche true car liste[2] existealert("bleu" in liste) // affiche false car "bleu" est la valeur de liste[2] mais pas une clé de la listealert("length" in liste) // affiche true car liste est un Array qui possède une propriété lengthalert("nom" in perso) // affiche true, l'objet perso possède bien une propriété "nom"alert("Harry" in perso) // affiche false, "Harry" n'est pas une propriété mais la valeur d'une propriétéalert("toString" in perso) // affiche true, l'objet perso hérite la méthode toString du prototype de ObjectOn voit quein va chercher dans le prototype des objets s'il ne trouve pas la propriété dans l'objet lui-même. Pour savoir si une propriété est directement possédée par un objet, il y a la méthodehasOwnProperty(name) :
alert(perso.hasOwnProperty("nom")) // truealert(perso.hasOwnProperty("toString")) // falseDans le contexte de la structure de contrôlefor... in, l'opérateurin joue un rôle un peu différent.
L'opérateur "virgule" permet simplement de juxtaposer plusieurs expressions, et retourne la valeur de la dernière (celle de droite).
alert( (x=3, 1) )
Ce code va afficher le nombre 1, mais l'affectation x=3 aura bien lieu d'abord.
C'est très utilisé dans les bouclesfor, où on doit parfois initialiser, tester ou incrémenter plusieurs variables différentes en une seule expression.
Le signe "virgule" fonctionne différemment dans certains contextes (notamment quand on énumère les éléments d'une liste ou d'un objet, ou les arguments d'une fonction, ce n'est plus qu'un simple séparateur).
alert( x=3, 1 )
affichera 3, parce que 3 et 1 seront considérés comme deux arguments de la méthodealert mais elle n'affiche que le premier.
Récupère tous les paramètres de l'appel d'une fonction dans un seul argument de sa signature.
Par défaut les attributs de classe sont publics. Pour les rendre privés, il faut les déclarer avec cet opérateur. Ex :
class MaClasse { #monChampPrivé;}JavaScript dispose de structures de contrôle comparables à ce qu'on rencontre en langage C. La plupart des règles et habitudes acquises dans ce langage sont immédiatement transposables en JavaScript.
Avant de passer en revue les structures de contrôle, il est utile de lire le paragrapheÉtablissement d'une expression logique qui précise certains aspects de la méthode.
L'usage deif,while etdo met en œuvre des expressions logiques dont le résultat testé (vrai) conditionnera l'exécution de l'instruction ou du bloc d'instructions associé.
Ces expressions logiques sont inscrites entre parenthèses.
Du plus simple au plus complexe, on trouve :
Avec des variables numériques ou des variables chaînes, le principe est similaire :
De même avec les opérateurs de comparaison :
etc..
À l'étape suivante, on peut combiner des expressions logiques avec des opérateurs logiques ET ( && ) et OU (||).
... Et ainsi de suite... en faisant très attention aux parenthèses et à l'ordre de priorité des opérateurs, et à conserver une certaine lisibilité au code.
L'auteur de cet article ne vient pas du C , mais du pascal. Il commet donc encore aujourd'hui l'erreur de confondre l'opérateur d'affectation avec l'opérateur d'égalité logique. Ceci a pour conséquence d'introduire un bug à retardement dû à l'affectation de la variable de test.
if (ma_var = 0) Exécution du code
L'expression (ma_var = 0) est fausse. L'expression (ma_var = 5) est vraie. Mais dans les deux cas, l'affectation a lieu, écrasant le contenu précédent de la variable.
Donc cette erreur, si elle n'est pas comprise, plonge le programmeur dans des abîmes de questions et de doutes, avec peu de chances de comprendre pourquoi. Bien entendu, la bonne façon est d'utiliser l'opérateur d'égalité logique ( == ) à la place de l'opérateur d'affectation ( = ).La valeur de l'opération d'affectation peut cependant être utilisée volontairement. Voirla section sur l'opérateur =.
La structure de contrôleif permet de subordonner l'exécution d'une ligne ou d'un bloc d'instructions à l'évaluation (vrai) d'uneexpression logique.
La syntaxe est :
if(condition_vrai)// Exécution d'une ligne d'instructionsalert("La condition est vraie");...if(condition_vrai)// Exécution d'un bloc d'instructions{alert("La condition est vrai");alert("... je le confirme");}
Le mot réservéelse permet d'exécuter une ligne ou un bloc d'instructions alternativement au résultat de l'évaluation de l'expression logique.
if(condition)alert("La condition est vrai");elsealert("la condition est fausse");...if(condition){alert("La condition est vraie");alert("... je le confirme");}else{alert("la condition est fausse");alert("... je le confirme");}
Cet opérateur est remarquable par sa concision et peut se substituer à la structureif… else. Il est expliqué en détailssur la page précédente.
Parfois, il permet d'économiser beaucoup de code. En théorie, presque toute structure if... else peut être remplacée par cet opérateur, du moment qu'elle ne contient pas de déclaration. En pratique, il vaut mieux le réserver à des cas simples.
Le mot réservéswitch permet en conjonction aveccase de mettre en place un sélecteur de cas d'une grande souplesse.
Cette structure remplace avantageusement une structure équivalente construite à partir de if else et if else imbriqués.
Le mécanisme de test ne fait pas appel à une expression logique, mais à une comparaison d'une variable de type scalaire avec des valeurs du même type.
Contrairement au langage C, qui nécessite que les valeurs de comparaison soient des constantes littérales, JavaScript, interprété, autorise l'usage de variables.
La structureswitch case ne pourrait pas fonctionner correctement sansbreak.En effet, et cela est déconcertant au début, quand une condition case est vérifiée, l'interpréteur n'effectue plus de test et exécute tout ce qu'il trouve jusqu'à la fin en passant par dessus lescase rencontrés.
Enfin, le mot réservédefault couvre les cas différents de ceux traités par lescase.
switch(ma_var){varegal_deux=2;case1:alert("Ma variable vaut 1");break;caseegal_deux:alert("Ma variable vaut 2");break;default:alert("Ma variable vaut autre chose que 1 ou 2");}
On remarque lesbreak systématiques dans ce cas.
D'autre part, on illustre la possibilité de fournir des variables àcase, ce qui n'est pas possible en langage C.Deuxième exemple : Nous allons regrouper plusieurs cas, et déclencher plusieurs exécutions d'instructions pour certaines valeurs.
switch(ma_var){case0:alert("Vraiment nulle, cette variable");// Elle vaut zerobreak;case1:case3:alert("Ma variable vaut 1 ou 3");// Et on continuecase5:alert("Ma variable est impaire et comprise entre 1 et 5");break;case2:case4:case6:alert("Ma variable est paire et comprise entre 2 et 6");break;case7:alert("Ma variable est égale à 7");break;default:alert("Ma variable est négative ou supérieure à 7")}
On remarquera l'utilisation desbreak pour regrouper des cas entre eux...
JavaScript implémente les mêmes structures de contrôle d'itération que le langage c, à savoir les bouclesfor,while etdo.
Avant de les examiner, nous allons regarder l'usage decontinue etbreak appliqué aux boucles.
Cette instruction permet à volonté de sauter des tours. L'exemple suivant saute le passage à zero d'une itération comprise entre -2 et 2.
for(vari=-2;i<=2;i++){if(i==0)continue;alert(i);// Affiche -2, puis -1, 1 et 2... mais pas le zero.}
Cette fonctionnalité decontinue est aussi applicable aux boucleswhile etdo.
continue peut être suivi du nom d'une étiquette placée juste avant une boucle. Dans ce cas, l'exécution continue au niveau de cette boucle, pas de celle qui contient directement l'instructioncontinue.
Les bouclefor,while etdo autorisent l'usage debreak pour sortir de l'itération.
Chacune de ces boucles possède une condition d'arrêt, mais parfois il peut être souhaitable de sortir de la boucle pour d'autres raisons (en cas d'erreur, si on a trouvé ce qu'on cherchait avant la fin d'une recherche, si l'utilisateur a décidé d'annuler une longue opération…).Par défaut,break termine immédiatement la boucle dont il fait partie et le script continue après cette boucle.
De même quecontinue,break peut être suivi du nom d'une étiquette. Dans ce cas, l'exécution continue après la structure désignée par l'étiquette, pas après la boucle qui contient directement l'instructionbreak.
Quand on utilise la boucle jQuery .each(), elle exécute une fonction, donc il faut remplacer "break" par "return false".
Exemple pour sélectionner une option d'un menu déroulant :
$(document).ready(function(){$("#liste_deroulante > option").each(function(){if($(this).val()=="valeur à sélectionner"){$(this).attr('selected','selected');returnfalse;}});});
Une étiquette est un identifiant suivi de ':' (deux points). On peut la placer avant une instruction ou une structure de contrôle.
Il n'y apas d'instructiongoto en JavaScript. Les étiquettes servent exclusivement à affiner l'utilisation debreak etcontinue (voir plus haut).
str="Liste des objets :\n"annuler=falseparcoursListe:for(iinliste){if(!liste.hasOwnProperty(i))continue// passe à l'itération suivante dans cette bouclestr+="\n• L'élément «"+i+"» de la liste contient :\n"if(annuler){str+="\nopération annulée."break// reprend l'exécution immédiatement après cette boucle}parcoursProps:for(jinliste[i]){if(!liste[i].hasOwnProperty(j))continue// passe à l'itération suivante dans cette boucleif(annuler){str+="\nopération annulée."breakparcoursListe// reprend l'exécution immédiatement après la boucle extérieure}str+="- "+j+" = "+liste[i][j]+"\n"}}
La structure for permet d'effectuer plusieurs fois une ligne d'instructions ou un bloc d'instructions.
Les modalités d'exécution de l'itération sont indiquées entre les parenthèses précédant le mot réservé for. L'instruction ou le bloc à exécuter se situent après.
Syntaxe:
for(modalités)action;oufor(modalités){action1;action2;}
Par modalités, nous regroupons en fait trois choses distinctes qui sont:
Ces trois instructions sont séparées par des points-virgule et placées entre parenthèses après le mot réservéfor.
Généralement, ces trois instructions s'appliquent à une variable chargée de contrôler l'itération, et qu'on nomme avec la lettrei.
L'exemple le plus simple est le suivant :
for(i=0;i<5;i++){alert(i);// Affiche 0, puis 1, puis 2, puis 3, puis 4}
Dans cet exemple, nous avons initialisé la variable i à 0, défini la condition pour exécuter la boucle (répéter tant que i est strictement inférieur à 5) et défini le changement à effectuer à chaque tour (incrémenter i).
Une fois assimilé le fonctionnement, on imagine aisément toutes les possibilités.
D'abord, on peut initialiser i avec la valeur de son choix. Commencer avec 1, ou un nombre négatif.
Ensuite, on est libre de l'expression de la condition : strictement inférieur à 5, inférieur ou égal à 5 (<=) à condition devienne fausse à un moment donné, pour sortir.
On n'est pas tenu exclusivement d'incrémenter i. On peut modifier la valeur par pas de 2.
for(i=4;i<=10;i+=2)alert(i+"estunnombrepaircomprisentre4et10);// affiche 4, puis 6, 8 et 10
De la même manière, une boucle peut être décroissante :
for(i=5;i>=0;i--)alert(i);// affiche 5, puis 4, 3, 2, 1 et 0
En sortie de boucle, i contient la valeur résultante des modifications. Pour le dernier exemple, c'est -1.
Grâce à l'opérateurin il est possible d'utiliser une forme spéciale de la bouclefor pour parcourir un tableau ou une table associative (clé -> valeur) par ses indices/clés :
vartableau=["une","boucle for","spéciale"];for(variintableau)alert(tableau[i]);// affiche successivement tous les éléments du tableau// i valant successivement : 0, 1, 2
vartable={"yes":"oui","no":"non","maybe":"peut-être"};for(variintable)alert(table[i]);// affiche successivement "oui", "non", "peut-être"// i valant successivement : "yes", "no", "maybe"
vartable={"yes":"oui","no":"non"};for(const[key,value]ofObject.entries(table)){console.log(key,value);}
ou :
vartable={"yes":"oui","no":"non"};table.forEach(functioncallback(key,value){console.log(`${key}:${value}`);});
Il est possible, par inattention, de programmer une boucle infinie. Cela se produit quand la condition de boucle reste vraie malgré la modification de la variable.
for (i=0;i >= 0; i++)
L'incrémentation de i ne changera pas le fait que la variable est supérieure ou égale à zéro...
La structure for s'appuie sur une variable pour piloter le déroulement de la boucle. Seulement, elle ne rend pas la variable comme elle l'a reçue. Elle la modifie complètement. Pour éviter de modifier une variable par erreur, il est judicieux d'utiliser le mot réservévar pour déclarer une variable locale à la boucle :
for(vari=0;....
La structure while conditionne l'exécution répétée d'une instruction ou d'un bloc d'instructions au test d'une expression logique.
while(condition)action;ouwhile(condition){action1;action2;}
Pour qu'il soit possible de sortir de la boucle, il faut que les instructions modifient à terme la condition pour la rendre fausse.
vari=0;// Initialiser iwhile(i<5)// Tant que i est strictement inférieur à cinqi++;// ... l'incrémenter.
En langage c, la boucle while peut-être volontairement infinie : while(true) toujours vrai, mais en JavaScript, le navigateur ne l'acceptera probablement pas.
La structure do permet d'exécuter une instruction ou un bloc d'instructions et de répéter cette action tant qu'une expression logique surveillée par while est vraie.
doactionwhile(condition)
vari=0;do{i++}while(i<5);
Pour éviter qu'une erreur interrompe l'exécution du programme, on peut l'attraper et définir des actions à effectuer si elle survient.
Les exceptions les plus courantes sont des ressources introuvables (ex : plus de réseau ou base de données en maintenance) ou des calculs impossibles comme les divisions par zéro.
Appel réseau :
try{call_network()}catch(error){print_retry_later_message()}finally{log()}
Calcul d'une moyenne :
"use strict";constx=15;letaverage;try{x=x+5;average=x/0;alert("The average is: "+average);}catch(err){alert("Something strange occurs. The error is: "+err);}finally{alert("End of program.");}
Dans cet exemple, la division par zéro montre que l'exécution est toujours interrompue avant l'affichage de la moyenne, pour passer dans le bloccatch puis lefinally.
Si on corrige la division, on constate qu'on ne passe plus dans le bloccatch, mais toujours dans lefinally (même si les blocs qui le précèdent contiennent unreturn).
Il est aussi possible de provoquer soi-même des exceptions pour interrompre une exécution.
Calcul d'une moyenne :
"use strict";constx=15;letaverage;try{average=x/0;if(average===Infinity||Number.isNaN(average)){throw"Error during division. The result is: "+average;}alert("The average is: "+average);}catch(err){alert("Something strange occurs. The error is: "+err);}finally{alert("End of program.");}
Ici la division par zéro ne provoque pas d'exception, mais renvoieInfinity. On la provoque donc explicitement ensuite.
Calcul d'un âge :
"use strict";constanswer=prompt("How old are you?");constage=Number(answer);if(isNaN(age)){throwanswer+" cannot be converted to a number.";}alert("Next year you will be "+(age+1));
Dans tous les cas(sauf deux), la fonction nécessite unIdentificateur établi avec les mêmes règles que pour lesvariables.
Pour déclarer une fonction, on emploie la syntaxe suivante:
function ma_fonction()
C'est à dire, utilisation dumot réservéfunction suivi de l'identificateur et de parenthèses. Ces dernières serviront à définir les paramètres de la fonction.
La plupart des fonctions servent à effectuer des opérations sur des variables données en argument, mais ce n'est pas une obligation.
function init(){ if (!navigator.cookieEnabled)...}Les paramètres sont transmis à la fonction entre les parenthèses de la déclaration.Comme javascript est un langage à typage dynamique, les paramètres se résument à de simples identificateurs séparés par des virgules.
function display_message(s1, s2){ var result = s1 + " " + s2; alert(result);}Une valeur par défaut du paramètre peut aussi être définie :
function display_message(s1 = 0, s2 = 1){ var result = s1 + " " + s2; alert(result);}JavaScript offre beaucoup de souplesse dans l'envoi d'arguments à une fonction.Le langage ne vous oblige pas à rédiger des fonctions au nombre d'arguments préétablis.
Un mécanisme simple permet à tout moment de compter et d'accéder aux paramètres.JavaScript autorise l'appel d'une fonction en omettant les paramètres. Ceci ne déclenche pas d'erreur, mais c'est une incivilité, source de bugs.
La fonction, elle, peut à tout moment se rendre compte de la présence, absence, nombre et nature des paramètres, et ceci à travers un tableau intégré à la fonction et nommé "arguments".
function foo(param1){ if (arguments.length==0) alert("fonction foo : paramètre manquant");}// Appel de la fonction sans paramètre :foo(); // Affiche "paramètre manquant";L'exemple suivant montre comment tirer partie du tableauarguments pour traiter des données dont on ne connaît pas le nombre au départ.
function concat_chaînes(){ result = ""; for(i = 0; i < arguments.length; i++) // Pour chaque argument { result += arguments[i] + " "; // Ajouter le contenu et une espace à result } return result; // renvoyer le résultat}alert(concat_chaînes("Concaténation","de","chaînes")); // Affiche "Concaténation de chaînes "Avec le mot réservéreturn, la fonction est capable de retourner une valeur au programme appelant.Cette valeur est contenue dans une donnée en tout point comparable à une variable typée.
Le mot réservé return peut s'employer sans valeur de retour, uniquement dans le but de "sortir" de la fonction.Il est possible d'utiliser plusieurs fois return dans une fonction, l'exécution sera interrompue au premier return rencontré.
function foo(p){ var resultat = ""; if (condition_1) return; // Sortie de secours else resultat = traitement(p); return resultat; // Sortie normale}Note : Bien que parfaitement valide, cette pratique est généralement déconseillée en algorithmie.Une fonction doit s'efforcer d'avoir une entrée et une sortie.Cependant le recours à cette pratique est parfois nécessaire pour conserver une structure de code simple, par exemple pour éviter un trop grand niveau d'imbrication de conditions.
La fonction peut avoir besoin de créer des variables pour mener à bien ses calculs. Dans ce cas, il est indispensable de garder en tête qu'une variable non-précédée du mot réservévar se révèle globale, et donc source de conflits. Une bonne pratique consiste à déclarer ses variables en début de fonction, même si rien ne vous y oblige.
function foo(){ var v1; var v2;}Une fonction peut contenir des sous-fonctions qui lui sont propre et l'aide à accomplir sa tâche.
function foo(n){ function bar(p) { return p*p*p; } for (var i = 0; i < n; i++) bar(i);}Nous pouvons admettre quatre modèles de fonction :Avec ou sans paramètres, avec ou sans valeur de retour.
Sans valeur de retour, la fonction est un verbe. Il suffit de la nommer avec ses paramètres, et elle s'exécute :
<body onload="init()">
Si l'on a prévu que la fonction renvoie une valeur, on peut recueillir celle-ci dans une variable, ou l'utiliser directement, ou l'ignorer si bon nous semble.Le résultat renvoyé par la fonction a toutes les caractéristiques d'une variable (type, valeur, utilisabilité avec des opérateurs...
var le_cube_de_trois = cube(3); // Valeur de retour recueillie dans une variablealert("Cube de 3 : " + cube(3)); // Affiche "Cube de 3 : 27" (concaténation)cube(3); // Appel sourd de la fonction, on ignore le résultatLes parenthèses demeurent nécessaire à l'identification complète de la fonction. Elles restent vide. (Les espaces sont possibles, ainsi que les commentaires slash-étoile)
n = foo();n = foo ( );n = foo(/* J'occupe l'espace... */);
Les paramètres envoyés à une fonction peuvent être sous forme de constante, de référence à une variable ou d'expression littérale.
result = foo("Chaîne littérale", ma_var, true); // Littéral, variable et constante booléenneLes variables envoyées en paramètre d'une fonction subissent ou ne subissent pas de modifications selon leur nature:
Si la variable est d'un type primitif comme string, bool et number, le mécanisme d'appel de la fonction envoie en fait des copies de la variable. Les modifications opérées par la fonction n'ont pas de répercussion sur la variable originale, sous réserve, bien entendu qu'il n'y ait pas de collision d'identification avec une variable globale.
function foo(str){ str = "c'est pas si important";}s = "Très important";foo(s);alert(s); // Affiche "Très important" : pas d'altérationIl en est tout autrement avec les instances d'un objet transmis en paramètre. Dans ce cas, le mécanisme d'appel de la fonction envoie un pointeur sur l'objet, et la fonction a toute latitude pour opérer des modifications sur les propriétés ou données de l'objet.
function modif_array(tab){ tab[0] = "c'est pas si important";}t = Array();t[0] = "Très important";modif_array(t);alert(t[0]); // Affiche "c'est pas si important" : modification du contenu de l'objetUne fonction déclarée sans identificateur est une expression de type "function" qui peut être utilisée comme argument d'une fonction, ou affectée à une variable. L'invocation d'une telle fonction se fait en utilisant le paramètre ou la variable.
varsuperieur=function(a,b){returna>b;};if(superieur(5,4))alert("5 > 4");
functionaffiche(objet,f_tostring){alert(f_tostring(objet));}varpersonne={"nom":"clinton","prenom":"bill"};affiche(personne,function(o){returno.prenom+" "+o.nom;});
Les versions récentes du langage Javascript supportent la notation fléchée pour la création de fonction[1].Dans cette notation, le ou les arguments sont spécifiés avant la flèche=> qui est suivie soit d'un bloc de code à exécuter (accolades), soit d'une valeur ou expression à retourner.
Exemple de calcul de somme (bloc de code) :
donnees => { var somme = 0; for (var i=0 ; i<donnees.length ; i++) somme += donnees[i]; return somme;}Exemple de fonction retournant la valeur d'une expression :
(a,b) => a + b;
Les deux cas se distinguent par l'utilisation d'accolades.Pour retourner une expression de type objet, comme les accolades doivent être utilisés pour ce cas, il faut entourer l'objet de parenthèses :
(a,b) => ( { min: a, max: b} );Lesévénements JavaScript permettent d'intercepter les changements d'états de l'environnement provoqués par le documentHTML, lesscripts ou l'interaction du client.
Lorsqu'un événement survient, un objet Event permettant de le décrire est créé. Il se propage alors dans l'arbreDOM selon trois phases déterminées par la cible (l'objet depuis lequel l’événement est intercepté) :
Cet objet a été défini par leW3C, mais malheureusementInternet Explorer en a sa propre définition ce qui oblige ledéveloppeur à tenir compte dunavigateur.
Certaines propriétés de cet objet concernent tous les types d'événements et d'autres, tels que le bouton de la souris, sont spécifiques à un ou plusieurs événements. Seules les premières nous intéressent dans cette partie, nous verrons les autres dans la description des événements.
Identique sous Internet Explorer.
Renvoie le type d’événement (onkeydown, onload...).
Équivalent Internet Explorer :srcElement.
Permet de récupérer l'élément depuis lequel l’événement a été envoyé. Il ne s'agit pas forcément de celui auquel on associe la fonction, mais de l'élément qui a récupéré le focus ou qui le récupère au moment de l'action. Par exemple, lors du clique de la souris sur un bouton, c'est ce bouton qui est renvoyé. Ou bien lorsque l'on appuie sur une touche du clavier, c'est l'objet qui a le focus qui est renvoyé.
Non supporté par Internet Explorer.
Permet de récupérer l'objet auquel l’événement a été rattaché. Équivaut à utiliser la référence this qui fonctionne dans certain cas sous Internet Explorer.
Équivalent Internet Explorer : l'attributcancelBubble.
Cette méthode arrête la propagation de l'événement dans l'arbreDOM après le nœud sur lequel il se trouve. Il faut faire attention au fait qu'il s'agisse d'une méthode dans le W3C mais d'un attribut sous Internet Explorer.
Équivalent Internet Explorer : l'attributevent.returnValue = false.
Empêche l'action normalement prévue de se dérouler. Par exemple, lors de l'appui sur la touche tabulation dans un champ texte, cela annulera le changement de focus et permettra l'insertion d'une indentation. Il est préférable d'utiliser l'expression"return false;" (sauf pour Internet Explorer) qui est mieux supportée.
Chaque événement peut être capté par les objets HTML concernés en leurs associant une fonction ou une commande JavaScript. Nous verrons plus loin comment fonctionnent les écouteurs (gestionnaires d'événements DOM-2). Ici nous utiliserons le type de gestionnaire d’événement DOM-0, plus simple et plus fiable : les événements sont des méthodes (le nom de l’événement avec le préfixe "on") qu'il suffit de définir. Ces méthodes peuvent prendre en paramètre un objet Event qui permettra de contrôler l'événement. Cependant, ce paramètre n'est pas toujours nécessaire.
Il existe deux façons de définir les événements :
1. Directement dans la balise de l'objet concerné :
<FORM><INPUTtype="button"id="bt"onclick="alert('Vous avez cliqué sur '+this.id+'.');"></FORM>
La commande peut aussi être une fonction que vous avez vous-même définie ultérieurement.
2. En associant une fonction via JavaScript :
<FORM><INPUTtype="button"id="bt"></FORM>
La fonction javascript est définie après :
document.getElementById("bt").onclick=function(event){alert("Vous avez cliqué sur "+this.id+".");}
Le paramètre Event n'est pas accessible avec Internet Explorer, il faut donc passer par la variable globale window.event. Autrement, il suffit de récupérer l'instance de l'Event en paramètre de la fonction.
//Capture la touche de clavier enfoncéedocument.onkeydown=function(event){//Internet Explorer ne prend pas d'objet Event en paramètre, il faut donc aller le chercher dans l'objet windowif(typeofevent=="undefined")event=window.event;}
Il est possible d'intercepter le flux d’événements dans l'arbre DOM avec des écouteurs d’événements. Pour ajouter un écouteur à un objet HTML il suffit d'utiliser la méthode addEventListener. Cet écouteur peut-être supprimé avec removeEventListener. Il s'agit du type de gestionnaire d’événement DOM-2.
Équivalent Internet Explorer :attachEvent;
Cette méthode crée un écouteur pour un objet HTML. Il prend trois paramètres :
Le mot clé this n'est hélas pas reconnu dans cette méthode, c'est pourquoi il est préférable d'utiliser le gestionnaire d’événement DOM-0.
functionclickMe(event){//this.id renvoie "undefined" : this n'est pas reconnu icialert("Type : "+event.type+"\nCible courante : "+this.id);if(navigator.appName=="Microsoft Internet Explorer"){//Ne fonctionne pas : this n'est pas reconnu icithis.detachEvent("onclick",clickMe);}else{this.removeEventListener("click",clickMe,false);}}if(navigator.appName=="Microsoft Internet Explorer"){document.getElementById("my_button").attachEvent("onclick",clickMe);}else{document.getElementById("my_button").addEventListener("click",clickMe,false);}
Équivalent Internet Explorer :detachEvent;
Pour détruire un écouteur, il faut utiliser cette méthode avec les mêmes paramètres que addEventListener (ou detachEvent).
En cas d'interruption de chargement d'une image.
Objets concernés : Image.
Lorsque l'utilisateur quitte l'objet et que celui-ci perd le focus.
Objets concernés : Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea et window.
Lorsque l'utilisateur quitte l'objet après l'avoir modifié et que celui-ci perd le focus.
Objets concernés : FileUpload, Select, Submit, Text et TextArea.
Exemple de récupération de la valeur :
let select = document.querySelector('#my_select_id'); let selectedOption = select[select.value]; console.log(selectedOption.text);Lors d'un clique de souris sur l'objet.
Objets concernés : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
Lors d'un double clique de souris sur l'objet.
Objets concernés : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
Survient lors d'une erreur de chargement.
Objets concernés : Image et window.
Lorsque l'objet est sélectionné et prend le focus.
Objets concernés : Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea et window.
Lorsqu'on appuie sur une touche. Pour tous les évènements clavier, Event a pour attribut keyCode (Internet Explorer) ou which (Netscape) et contient le code de la touche enfoncée.
document.onkeydown=function(event){//On vérifie le navigateurif(navigator.appName==="Microsoft Internet Explorer"){//On envoie un message avec la touche appuyée pour Internet Exploreralert(event.keyCode);}else{//On envoie un message avec la touche appuyée pour Netscapealert(event.which);}}
Objets concernés : document, Image, Input (type=file, password ou text), Link et TextArea.
Lorsqu'on maintient une touche appuyée. Pour tous les événements clavier, Event a pour attribut keyCode (Internet Explorer) ou which (Netscape) et contient le code de la touche enfoncée.
Objets concernés : document, Image, Link et TextArea.
Lorsqu'on relâche sur une touche. Pour tous les événements clavier, Event a pour attribut keyCode (Internet Explorer) ou which (Netscape) et contient le code de la touche enfoncée.
Objets concernés : document, Image, Link et TextArea.
Lors du chargement de la page HTML, d'une frame ou d'une image.
Objets concernés : Image, Layer et window.
En quittant le fichier. L'objet Event ne subit pas la phase de bouillonnement avec onunload.
Objet concerné : window.
En maintenant une touche de la souris appuyée.
Les attributs de Event pour la souris sont les suivants :
document.onmousedown=function(event){//Netscapeif(navigator.appName!="Microsoft Internet Explorer"){alert(event.pageX+" - "+event.which);}//Internet Explorerelse{alert(window.event.x+" - "+window.event.button);}}
Objets concernés : Button, document et Link.
En relâchant une touche de la souris. Pour les attributs de Event voironmousedown.
Objets concernés : Button, document et Link.
En bougeant la souris. Pour les attributs de Event voironmousedown.
Objets concernés : window et document
En quittant l'élément avec la souris.
Objets concernés : Area, Layer et Link. Pour les attributs de Event voironmousedown.
En passant sur l'élément avec la souris.
Objets concernés : Area, Layer et Link. Pour les attributs de Event voironmousedown.
En sélectionnant du texte.
Objets concernés : text et Textarea.
Lors de l'initialisation du formulaire.
Objet concerné : form.
En envoyant le formulaire
Objets concernés : form
Lors du redimensionnement du fichier.
Objet concerné : window.
Lors du déplacement du fichier.
Objet concerné : window.
Lors d'un glisser-déposer vers la fenêtre.
Objet concerné : window.
Lorsqu'un lien est activé.
Objets concernés : Link
JavaScript dispose d'une bibliothèque d'objets étoffée en regard d'un nombre de fonctions classiques réduit au minimum.
Ils possèdent des propriétés et méthodes statiques (directement utilisables sans créer d'instance), et la plupart sont en même temps des classes d'objets. C'est à dire qu'il est possible de créer des instances, lesquelles bénéficient de propriétés et méthodes qui leur sont propres.
String,Number,Boolean...new.new.navigator ouwindow par exemple, sont instanciés par le navigateur automatiquement ou bien indirectement par l'appel de méthodes du DOM, mais jamais directement avecnew. D'ailleurs aucune classe correspondante n'est disponible pour en créer de nouvelles instances avec l'opérateurnew.Cette objet représente une fenêtre de navigateur[1].
L'objetdocument permet d'interagir avec le document présenté (page web).
undefined si aucun trouvé.true en ligne,false hors ligne.length ne comptabilisera pas les cellules déclarées en mode associatif.Exemples
let countriesCodes = ['FR', 'BE'];console.log(countriesCodes.length); // 2countriesCodes['Canada'] = 'CA';console.log(countriesCodes); // Array [0: "FR", 1: "BE", Canada: "CA"]console.log(countriesCodes.length); // 2, undefined
const countriesNamesAndCodes = { 'France': 'FR', 'Belgique': 'BE',};console.log(countriesNamesAndCodes.length); // undefinedcountriesNamesAndCodes[0] = 'CA';console.log(countriesNamesAndCodes); // Object [1: "CA", France: "FR", Belgique: "BE"]console.log(countriesNamesAndCodes.length); // undefined, undefinedlength, qui gère les indices à partir de zéro.Une seule propriété :length[1].
| Propriété | Lecture/Ecriture | type |
|---|---|---|
| length | Lecture seule | entier |
Voici une description succincte des méthodes classées par fonctionnalités.
| Méthode | Description | Exemple |
|---|---|---|
| pop() | Supprime et retourne le dernier élément | mon_tableau.pop() |
| push() | Ajoute un ou plusieurs éléments à la fin | mon_tableau.push("nouveau","deuxième nouveau") |
| shift() | Supprime le premier élément | mon_tableau.shift() |
| unshift() | Ajoute des éléments au début | mon_tableau.unshift("nouveau1", "nouveau2") |
| splice() | Insère des éléments | mon_tableau.splice(ou,2,"nouveau1","nouveau2") |
| reverse() | Réorganise le tableau de la fin vers le début | mon_tableau(reverse) |
| concat() | Concaténer plusieurs tableaux | mon_tableau.concat(T2,t3) |
| Rôle : | Le ou les tableaux envoyés en paramètres sont ajoutés à la fin du tableau. |
| Arguments : | Le ou les tableaux à ajouter, séparés par des virgules |
| Valeur renvoyée : | Un tableau contenant les éléments du tableau de départ plus les tableaux ajoutés. |
| Rôle : | Le dernier élément du tableau est supprimé du tableau et renvoyé. |
| Arguments : | aucun |
| Valeur renvoyée : | l'élément supprimé |
| Rôle : | ajoute un ou plusieurs éléments à la fin. |
| Arguments : | Le ou les éléments à ajouter, séparés par des virgules. |
| Valeur renvoyée : | Jusqu'à JavaScript 1.2, renvoie le dernier élément ajouté. Avec les versions plus récentes, renvoie la taille du tableau. |
| Rôle : | Le premier élément du tableau est supprimé et renvoyé. |
| Arguments : | aucun |
| Valeur renvoyée : | l'élément supprimé |
| Rôle : | Un élément ou plusieurs éléments sont insérés au début du tableau. |
| Arguments : | aucun |
| Valeur renvoyée : | La nouvelle longueur |
| Rôle : | Remplace (éventuellement ajoute) un certain nombre d'éléments à l'endroit spécifié. |
| Arguments : | Indice (base zero) |
| Valeur renvoyée : | aucun ou le tableau des éléments coupés |
| Rôle : | Inverse l'ordre des éléments. |
| Arguments : | aucun |
| Valeur renvoyée : | aucun |
| Méthode | Description | Exemple |
|---|---|---|
| join() | Extrait les données dans une chaîne avec le délimiteur donné en paramètre | s = mon_tableau.join(" ") |
| slice() | Renvoie un tableau contenant 'nombre' cellules à partir de 'debut' | n_tab = mon_tableau.slice(debut,nombre) |
| Rôle : | Renvoie la valeur correspondant à la clé passée en paramètre. |
| Arguments : | clé |
| Valeur renvoyée : | valeur correspondante |
Ex :
const tableau = ['a', 'b', 'c'];console.log(tableau.at(0)); // aconsole.log(tableau.at(-1)); // c
| Rôle : | Renvoie la première valeur correspondant à la condition passée en paramètre. |
| Arguments : | condition |
| Valeur renvoyée : | valeur correspondante |
Ex :
const tableau = ['a', 'b', 'c'];console.log(tableau.find(v => v > 'a')); // b
| Rôle : | Renvoie vrai si la valeur se trouve dans le tableau, faux sinon. |
| Arguments : | valeur |
| Valeur renvoyée : | présence |
Ex :
const tableau = ['a', 'b', 'c'];console.log(tableau.includes('z')); // false| Rôle : | Renvoie une chaîne contenant les éléments du tableau séparés par le ou les caractères transmis en argument. |
| Arguments : | le (ou les) caractères de séparation |
| Valeur renvoyée : | La chaîne ainsi construite |
| Rôle : | Renvoie un tableau contenant un nombre d'éléments extraits à partir de l'indice. |
| Arguments : | Indice Nombre |
| Valeur renvoyée : | Le tableau résultant |
| Méthode | Description | Exemple |
|---|---|---|
| sort() | Trier le tableau | mon_tableau.sort() |
tableau.every(function (ligne) {...}); : renvoie un booléen indiquant si tous les éléments du tableau vérifie une expression.
tableau.map(function (ligne) {...}); : renvoie un booléen indiquant si au moins un des éléments du tableau vérifie une expression.
tableau.filter(function (ligne) {...}); : affiche les éléments d'un tableau qui vérifient une expression.
tableau.map(function (ligne) {...}); : crée un nouveau tableau contenant le résultat d'une fonction sur chaque élément.
tableau.reduce(function (accumulateur, ligne) {...}, 0); : crée un nouveau tableau contenant le résultat d'une fonction sur chaque élément avec la possibilité de récupérer des données issues des lignes itérées dans un accumulateur. Ce dernier est initialisé en second paramètre.
Prévue en standard pour trier des chaînes alphanumériques, la méthodesort est capable de bien plus grâce au mécanisme de fonction de comparaison externe.
En effet, en programmant judicieusement cette fonction, vous pouvez trier des nombres, des dates, ou même des objets abstraits.
| Rôle : | Effectue le tri du tableau. Selon le mode désiré, il peut être nécessaire de définir une fonction de comparaison, et la transmettre en argument. |
| Arguments : | Tri en mode caractère : Pas d'argument |
| Valeur renvoyée : | Aucun |
1er exemple : fonction de tri ascendant définie à part, appelée ensuite par son nom dans la fonctionsort.
functionpour_tri_ascendant(n1,n2){return(n1-n2);// Retourne positif si n1 > n2, négatif ou nul si n1 < n2}t=newArray(1,3,2);t.sort(pour_tri_ascendant);alert(t.join(","));// Affiche "1,2,3"
2eme exemple : fonction de tri descendante.
functionpour_tri_descendant(n1,n2){return(n2-n1);// Retourne positif si n1 < n2, négatif ou nul si n1 > n2}t=newArray(1,3,2);t.sort(pour_tri_descendant);alert(t.join(","));// Affiche "3,2,1"
3eme exemple : Intégration d'une fonction anonyme directement définie dans le paramètre.
t=newArray(1,3,2);t.sort(function(n1,n2){returnn1-n2;});alert(t.join(","));// Affiche "1,2,3"
4eme exemple : tri d'une notion abstraite (petit moyen grand).
functioncompare_taille(s1,s2){if(s1=="petit")return-1;if(s1=="moyen"){if(s2=="petit")return1;elsereturn-1;}if(s1=="grand")return1;return0;// Égalité}t=newArray("petit","grand","moyen","grand","petit","moyen");t.sort(compare_taille);alert(t.join(","));// // Affiche "petit,petit,moyen,moyen,grand,grand"
| Méthode | Description | Exemple |
|---|---|---|
| toString() | Renvoyer le contenu de l'objet sous forme de chaîne | s = mon_tableau.toString() |
| toLocaleString() | Renvoyer le contenu de l'objet sous forme de chaîne formatée selon le PC (pour les formats de date) | s = mon_tableau.toLocaleString() |
t=newArray("Premier","Deuxieme","Troisieme");t.sort();// Invocation de la méthode sort()alert(t);// Affiche "Deuxieme,Premier,Troisieme", soit le contenu par ordre alphabétique
L'instanciation consiste à invoquer le constructeur de l'objet à l'aide du mot réservé new.
mon_tableau=newArray();// Simple et directmon_tableau=newArray(10);// Imposition de dix cases vides, (de 0 à 9) length vaut 10// Note : rien n’empêche immédiatement après de faire mon_tableau[11] (dynamisme)mon_tableau=newArray("Elément 1","Elément 2");// Remplissage à la déclaration.
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 élémentst["nom"] = "contenu de 'nom'";alert(t[0]); // Affiche 'null'alert(t[3]); // Affiche "Contenu de trois";alert(t["nom"]); // Affiche "contenu de 'nom'"alert(t[4]); // Affiche "undefined"
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 élémentsvar nb_elements = t.length; // Lecture de length dans une variablealert("Le tableau a " + t.length + " éléments"); // Affiche "le tableau a 4 éléments"for(i = 0; i < t.length; i++)alert("contenu de : " + i + t[i]);// Affiche "null", puis "null", "null" et "Contenu de trois"Cet objet désigne le typebooléen[1]. Il est faux par défaut.
myBoolean=newBoolean(1);console.log(myBoolean);// Boolean { true }console.log(myBoolean.toString());// true
varnow=newDate();varjj=now.getDate();varmm=now.getMonth()+1;varaaaa=now.getYear();varH=now.getHours();varM=now.getMinutes();
<!DOCTYPE html><html><body><scripttype="text/JavaScript">varj,r,a,neauv_a,neauv_j,neauv_m,m,mr,jr;j=prompt("donner les jours");j=parseInt(j);m=prompt("donner le mois");m=parseInt(m);a=prompt("donner l'année");a=parseInt(a);j_ajou=prompt("donner les jours à ajouter");j_ajou=parseInt(j_ajou);mr=j/30;jr=j%30;neauv_j=j+mr;neauv_m=m+mr;neauv_a=a;if(neauv_j<=30){{neauv_j=1;neauv_m=neauv_m+1;}elseif(neauv_m<12){neauv_m=1;neauv_a=neauv_a+1;}}alert("la nouvelle date est"+neauv_j'/'+neauv_m'/'+neauv_a);</script></body></html>
Les exceptions renvoient des objets de typeError, ou qui en héritent[1].
Pour en créer une :
varmyError=newError('Message');
Cette section est vide, pas assez détaillée ou incomplète.Votre aide est la bienvenue !Pour afficher arrondit un nombre formaté à la française :
let myAmountOfMoneyWithVat = document.querySelector('#myAmountOfMoneyWithVat').value.replace(/,/g, '.').replace(/ /g, '').replace(/[\s€]/g, '');document.querySelector('#myAmountOfMoneyWithVat').value = myAmountOfMoneyWithVat.toFixed(2);Un objet Javascript est en réalité une table associant un nom (attribut ou clé) à une valeur.
Exemple :
vararticle=newObject();article.nom="Livre";article.prix_unitaire=21.99;article.quantite=2;
Variante :
functionArticle(nom,prix_unitaire,quantite){this.nom=nom;this.prix_unitaire=prix_unitaire;this.quantite=quantite;this.resume=function(){returnthis.nom+" x "+this.quantite+" à "+this.prix_unitaire+" l'unité coûte(nt) "+(this.quantite*this.prix_unitaire);}returnthis;}vararticle=newArticle("Livre",21.99,2);
Pour accéder au nom de l'article :
alert("L'article est : "+article.nom);// syntaxe objetalert("L'article est : "+article["nom"]);// syntaxe table associative
La notation abrégée utilise une série d'association nom-valeur entre accolades :
{nom :valeur ,nom :valeur , ... }Exemple :
vararticle={"nom":"Livre","prix_unitaire":21.99,"quantite":2,"resume":function(){returnthis.nom+" x "+this.quantite+" à "+this.prix_unitaire+" l'unité coûte(nt) "+(this.quantite*this.prix_unitaire);}};
Le nom peut se passer des guillemets s'il suit la syntaxe des identificateurs :
vararticle={nom:"Livre",prix_unitaire:21.99,quantite:2,resume:function(){returnthis.nom+" x "+this.quantite+" à "+this.prix_unitaire+" l'unité coûte(nt) "+(this.quantite*this.prix_unitaire);}};
Parmi les plus utiles[1] :
À priori, le type String de JavaScript contient du texte dans un encodage donné. En particulier, cet encodage peut-être lié à UTF-16.
Par exemple, Ecma 262 indique en §4.3.16 qu'uneString value qui est une séquence d'entiers 16 bits non signés. Chaque multiplet de 16-bits est une unité de code de texte UTF-16. ECMAScript ne contraint pas ces valeurs[1].
console.log('1'.padStart(3, '0')); affiche "001".console.log("chien|chat".slice(0, ("chien|chat").indexOf('|'))); renvoie "chien".Les éléments HTML sont les nœuds d'un arbre. Ils peuvent donc en avoir des parents et des enfants[1].
Pour récupérer le texte contenu dans une balise HTML :
Cette section est vide, pas assez détaillée ou incomplète.Votre aide est la bienvenue !En informatique, uneexpression régulière ouexpression rationnelle ouexpression normale oumotif, est une chaîne de caractères, qui décrit, selon une syntaxe précise, un ensemble de chaînes de caractères possibles.Les expressions régulières sont également appeléesregex (de l'anglaisregular expression).Elles sont issues des théories mathématiques deslangages formels.Les expressions régulières sont aujourd’hui utilisées pour la lecture, le contrôle, la modification, et l'analyse de textes ainsi que la manipulation des langues formelles que sont leslangages informatiques.
L'exemple d'expression régulière suivant permet de valider qu'une chaîne de caractère correspond à la syntaxe d'un nombre entier non signé, c'est à dire une suite non vide de chiffres :
[0-9]+
En détails :
En Javascript, la validation d'une chaîne de caractères peut se faire en utilisant la méthodematch de la chaîne de caractère à tester :
letchaine='12345';// ou '12ABC'if(chaine.match("^[0-9]+$"))// OU : if (/^[0-9]+$/.test(a)){console.log('Le texte est un entier positif');}else{console.log('Le texte n\'est pas un entier positif');}
À partir de la version 6 d'ECMA-script, les regex unicode seront supportées.
Les expressions rationnelles peuvent être analysées et testées via un débogueur en ligne commehttps://regex101.com/.
| Caractère | Type | Explication |
|---|---|---|
. | Point | N'importe quel caractère |
[...] | crochets | classe de caractères : tous les caractères énumérés dans la classe, avec possibilité de plages dont les bornes sont séparées par "-". Ex :[0-9a-z] pour tout l'alphanumérique en minuscule, ou[0-Z] pour tous les caractères de la table Unicode entre "0" et "Z", c'est-à-dire l'alphanumérique majuscule plus ":;<=>?@"[1]. |
[^...] | crochets et circonflexe | classe complémentée : tous les caractères sauf ceux énumérés. |
[...[...]] | union | Union des deux ensembles |
[...&&[...]] | intersection | Intersection des deux ensembles |
^ | circonflexe | Marque le début de la chaîne ou de la ligne. |
$ | dollar | Marque la fin de la chaîne ou de la ligne. |
| | barre verticale | Alternative - ou reconnaît l'un ou l'autre |
(...) | parenthèses | groupe de capture : utilisé pour limiter la portée d'un masque ou de l'alternative, grouper un motif répété ou capturer une séquence |
\n | référence | Même séquence que celle capturée précédemment par lenèmegroupe de capture |
\g{n} | référence | Même séquence que celle capturée précédemment par lenèmegroupe de capture |
(?P<nom>pattern) | Sous-motif nommé | Nomme le résultat d'un groupe de capture par un nom. |
\g{nom} | référence | Même séquence que celle capturée précédemment par legroupe de capture nomménom. |
\k<nom> | référence | Même séquence que celle capturée précédemment par legroupe de capture nomménom. |
Par défaut, les caractères et groupes ne sont pas répétés.Les quantificateurs permettent de spécifier le nombre de répétitions et sont spécifiés immédiatement après le caractère ou groupe concerné.
| Caractère | Type | Explication |
|---|---|---|
* | astérisque | 0, 1 ou plusieurs occurrences |
+ | plus | 1 ou plusieurs occurrences |
? | interrogation | 0 ou 1 occurrence |
{...} | accolades | nombre de répétitions : spécifie le nombre de répétitions du motif précédent (minimum et maximum). Avec la présence de la virgule, quand le minimum est absent la valeur par défaut est zéro, quand le maximum est absent la valeur pas défaut est l'infini. Sans virgule (un seul nombre) il s'agit du nombre exact (minimum et maximum ont la même valeur). Exemples :
|
Par défaut les quantificateurs ne recherchent pas forcément la plus longue séquence de répétition possible.Il est possible de les suffixer avec un caractère pour modifier leur comportement.
| Caractère | Type | Explication |
|---|---|---|
? | réticent | Le quantificateur qui précède recherchera la plus petite séquence possible. |
+ | possessif | Le quantificateur qui précède recherchera la plus grande séquence possible. |
Remarques :
^ et$) ne fonctionnent pas dans[] où ils ont un autre rôle.* et+ sont toujoursavides, pour qu'ils laissent la priorité il faut leur apposer un? à leur suite[2].| Classe | Signification |
|---|---|
[[:alpha:]] | n'importe quelle lettre |
[[:digit:]] | n'importe quel chiffre |
[[:xdigit:]] | caractères hexadécimaux |
[[:alnum:]] | n'importe quelle lettre ou chiffre |
[[:space:]] | n'importe quel espace blanc |
[[:punct:]] | n'importe quel signe de ponctuation |
[[:lower:]] | n'importe quelle lettre en minuscule |
[[:upper:]] | n'importe quelle lettre capitale |
[[:blank:]] | espace ou tabulation |
[[:graph:]] | caractères affichables et imprimables |
[[:cntrl:]] | caractères d'échappement |
[[:print:]] | caractères imprimables exceptés ceux de contrôle |
| Expression | Signification |
|---|---|
\\ | Antislash |
\C | Caractère spécialC non interprété :[ ] { } ( ) ? * . : \ & - ^ $ |
\Q...\E | Séquence littérale non interprétée |
\0xxx | Caractère Unicode (1 à 3 chiffres octaux) |
\a | Alarme (ASCII 07) |
\A | Début de chaîne |
\b | Caractère de début ou fin de mot |
\B | Caractère qui n'est pas début ou fin de mot |
\cX | Caractère de contrôle ASCII (X étant une lettre) |
\d | Chiffre |
\D | Non chiffre |
\e | Escape (ASCII 1B) |
\f | Form-feed (ASCII 0C) |
\G | Fin de la correspondance précédente |
\h | Espace blanc horizontal[ \t\xA0\u1680\u180e\u2000-\u200a\u202f\u205f\u3000] |
\H | Non espace blanc horizontal[^\h] |
\n | Fin de ligne |
\pL,\p{L},\p{Letter} | Lettre (dans tout langage) |
\r | Retour charriot |
\R | Retour à la ligne, équivaut à\u000D\u000A|[\u000A\u000B\u000C\u000D\u0085\u2028\u2029] |
\s | Caractères espace[ \t\n\x0B\f\r] |
\S | Non caractères espace[^\s] |
\t | Tabulation |
\uxxxx | Caractère Unicode (4 chiffres hexadécimaux) |
\v | Espace blanc vertical[\n\x0B\f\r\x85\u2028\u2029] |
\V | Non espace blanc vertical[^\v] |
\w | Caractère alphanumérique : lettre, chiffre ou underscore |
\W | Caractère qui n'est pas lettre, chiffre ou underscore |
\xxx | Caractère Unicode (2 chiffres hexadécimaux) |
\x{xx...x} | Caractère Unicode (chiffres hexadécimaux) |
\X | Caractère Unicode du groupe de graphèmes étendu |
\z | Fin de chaîne |
Constructeurs spéciaux :Ces fonctions précèdent l'expression à laquelle elles s'appliquent, et le tout doit être placé entre parenthèses.
?: :groupe non capturant. Ignorer le groupe de capture lors de la numérotation desbackreferences. Exemple :((?:sous-chaine_non_renvoyée|autre).*).?: juste après la parenthèse ouvrante, et en décalant les numéros des groupes référencés.?> : groupe non capturant indépendant.?<= :positive lookbehind, vérifier (sans consommer) que ce qui précède correspond au motif spécifié. Exemple :(?<=q)u?<! :negative lookbehind, vérifier (sans consommer) que ce qui précède ne correspond pas au motif spécifié.?= :positive lookahead, vérifier (sans consommer) que ce qui suit correspond au motif spécifié.?! :negative lookahead, vérifier (sans consommer) que ce qui suit ne correspond pas au motif spécifié. Exemples :Options :
Les options d'interprétation sont en général spécifiées à part.Mais certaines API ne permettent pas de les spécifier.Il est possible d'insérer ces options dans l'expression régulière[7].
(?optionsactivées-optionsdésactivées)Exemples :
(?i)[AEIOUY]+(?-i)[AEIOUY]+Les options s'appliquent à toute l'expression quelle que soit leur position dans l'expression.
Avec un objet de type expression régulière créé soit explicitement par appel au constructeur RegExp soit par la syntaxe /.../ :
true oufalse).Avec la chaîne de caractère à tester, le premier argument étant soit un objet de type expression régulière, soit une chaîne de caractère :
La fonctionRegExp contient deux paramètres : la chaine à traiter et facultativement, le type de traitement : "g" (global), "i" (ignorer la casse) ou "gi".
varchaine="Test regex Javascript pour Wikibooks francophone.";varexpression=newRegExp("Wikibooks","g");if(chaine.match(expression))document.write("Le texte parle de Wikibooks");elsedocument.write("Le texte ne parle pas de Wikibooks");
Depuis ES6, le regex est natif en JS.
// Remplace tous les espaces par des underscoresvarchaine="Test regex Javascript pour Wikibooks francophone.";varexpression=newRegExp("( )","g");document.write("Chaîne d'origine : "+chaine+"<BR>");document.write("Chaîne traitée : "+chaine.replace(expression,"_")+"<BR>");
functiontrim(haystack,needle){constregex=newRegExp('(^\\'+needle+'+|\\'+needle+'+$)',"g");returnhaystack.replaceAll(regex,'');}chaine='http://test.com//';console.log(trim(chaine,'/'));// http://test.com
Les fonctions prédéfinies sont natives à JavaScript : elles peuvent être appelées sans installer de bibliothèque.
Les opérations binaires correspondent à une manipulation bit à bit d'une valeur contenue dans un variable. Il est important de comprendre le procéder des opérations binaires avant de travailler avec ces dernières.
Un valeur contenue dans une variable est représenté côté machine par une succession de "0" et de "1". Chaque bit est placé à une position qui définit son poids et permet de cumuler les valeurs.
Le principe est en fait plus simple qu'il n'y parait. Prenons une donnée sur 4 bits:
0011
Ici, nous avons 4 colonnes qui représentent un bit chacun. Il faut lire les données de droite à gauche. La première colonne représente 2^0, le second 2^1, le troisième 2^2 et enfin la quatrième 2^3
Il suffit alors de cumuler les valeurs. Ici :
1* 2^0 = 1+ 1* 2^1 = 2+ 0* 2^2 = 0+ 0* 2^3 = 0
Soit : 3
La combinaison de 0 et 1 permet donc de représenter n'importe quel chiffre selon la taille en octet alloué à la variable. Sur 4 bit, on peut alors représenter au maximum le chiffre 1111 qui donne:
1* 2^0 = 1+ 1* 2^1 = 2+ 1* 2^2 = 4+ 1* 2^3 = 8
Soit : 15. En conséquence, en partant de 0, 4 bits représentent 16 valeurs possible allant de 0 à 15
Il est possible de manipuler des valeurs binaire en utilisant des opérateurs spécifiques.Ainsi, il est possible de faire :
Les 3 premières opérations se font "bit à bit" à place respectives :
Ainsi, prenons un exemple: 9 et 12 (ne fait pas 9+12):9 = 100112 = 1100
on regarde chaque colonne, et on opère avec un "et".
Résultat 1000 => 8
Le "ou" donne:
Résultat 1101 => 13
et enfin le ou exclusif:
Résultat 0101 => 5
Les opérations se font sur 32 bits.Les autres bits sont ignorés.
Exemple :
0x100000007>>1/* == 3 car seuls les bits 31 à 0 sont pris en compte. */
On se sert d'opérations binaires dans beaucoup de cas, notamment pour le chiffrement, ou encore des opérations optimisées en mathématiques.Elles sont aussi utilisées pour manipuler les ensembles d'items dont le nombre d'instances est limité (énumération) représentés sous la forme d'un entier ou un bit à 1 représente la présence d'un item, et 0 son absence.
Il est à noter que répéter deux fois un "ou exclusif" revient à revenir à la valeur d'origine.Exemple :
Valeur 5 => 0101
Appliquons deux fois le ou exclusif avec 4 = 0100
0101 => valeur initiale 5xou 0100 => ou exclusif avec 4 0001 => 1xou 0100 => encore avec 4 0101 = valeur 5, retour à l'état initial
Il existe plusieurs opérateurs qui permettent ces opérations.
Ainsi en #"ltr">
vara=5varb=4alert(a&b)/*Affiche 4*/alert(a|b)/*Affiche 5*/alert(a^b)/*Affiche 1*/
L'opération binaire ne se faisant que sur des entiers, il est nécessaire de connaitre le code ASCII des caractères sur lesquels nous voulons opérer. Il suffit d'utiliser la méthode "charCodeAt()" qui retourne le code ASCII à la position donnée.
Ainsi
vara="a"//on récupère le code ASCII à l'index "0" => premier caractèrealert(a.charCodeAt(0))//affiche 97
Cela permet dont de faire une opération binaire sur une chaine:
//hello et world ont la même taille, c'est important pour cet exemple.vara="hello"varb="world"varbuffer=[]//cela va faire h^w, e^o, l^r, l^l; o^dfor(vari=0;i<a.length;i++){buffer.push(a.charCodeAt(i)^b.charCodeAt(i))}alert(buffer.join(':'))//31:10:30:0:11varresult=""//opération inverse, revient à "hello"for(vari=0;i<a.length;i++){result+=String.fromCharCode(buffer[i]^b.charCodeAt(i))}alert(result)//hello
Une fermeture ou clôture (appeléeclosure en anglais) est une fonction accompagnée de son environnement lexical.L'environnement lexical d'une fonction est l'ensemble des variables non locales qu'elle a capturées, soit par valeur (c'est-à-dire par copie des valeurs des variables), soit par référence (c'est-à-dire par copie des adresses mémoires des variables).Une fermeture est donc créée, entre autres, lorsqu'une fonction est définie dans le corps d'une autre fonction et utilise des paramètres ou des variables locales de cette dernière.
Une fermeture peut être passée en argument d'une fonction dans l'environnement où elle a été créée (passée vers le bas) ou renvoyée comme valeur de retour (passée vers le haut).Dans ce cas, le problème posé alors par la fermeture est qu'elle fait référence à des données qui auraient typiquement été allouées sur la pile d'exécution et libérées à la sortie de l'environnement.Hors optimisations par le compilateur, le problème est généralement résolu par une allocation sur le tas de l'environnement.
En javascript, il est possible de créer explicitement des fermetures pour conserver des valeurs dans un contexte particulier.Par exemple, dans une fonction qui crée des boutons dans une boucle en définissant une fonction d'écoute du clic de l'utilisateur a besoin d'utiliser une fermeture.
La fonction de l'exemple ci-dessous crée des boutons pour ouvrir des panneaux cachés initialement, sans utiliser de fermeture :
functioncreerBoutons(){varboutons=document.querySelectorAll(".panel-bouton-ouvrir");varpanels=document.querySelectorAll(".panel-ouvrable");for(vari=0;i<boutons.length;i++){varbouton=boutons[i];// Le bouton déclenchant l'ouverture/fermeturevarpanel=panels[i];// Le panel caché initialementbouton.addEventListener('click',function(){togglePanel(bouton,panel)});}}
Le problème est visible lorsque la page contient plusieurs boutons et plusieurs panels : tous les boutons n'activent que le dernier panel et seul le dernier bouton change d'état même si c'est un autre bouton qui est cliqué.
La cause est la fonctionnalitéhoisting de Javascript : les déclarations de variables avecvar sont remontées au niveau de la fonction.Le code précédent est interprété comme ceci :
functioncreerBoutons(){varboutons=document.querySelectorAll(".panel-bouton-ouvrir");varpanels=document.querySelectorAll(".panel-ouvrable");varbouton,panels;for(vari=0;i<boutons.length;i++){bouton=boutons[i];// Le bouton déclenchant l'ouverture/fermeturepanel=panels[i];// Le panel caché initialementbouton.addEventListener('click',function(){togglePanel(bouton,panel)});}}
Il est facile de comprendre la cause du problème : lors de l'appel à la fonction, les variablesbouton etpanel sont les mêmes pour toutes les fonctions d'écoute et contiennent les valeurs qui leurs ont été assignées lors de la dernière itération.Seuls le dernier bouton et le dernier panel sont donc fonctionnels.
La solution est de forcer la création de nouvelles variables à chaque itération pour conserver les valeurs assignées, utilisées par les fonctions d'écoute des différents boutons.Pour cela, une fermeture est nécessaire :
functioncreerBoutons(){varboutons=document.querySelectorAll(".panel-bouton-ouvrir");varpanels=document.querySelectorAll(".panel-ouvrable");for(vari=0;i<boutons.length;i++)(function(){varbouton=boutons[i];// Le bouton déclenchant l'ouverture/fermeturevarpanel=panels[i];// Le panel caché initialementbouton.addEventListener('click',function(){togglePanel(bouton,panel)});})();}
Le bloc d'instruction est encapsulé dans une fonction anonyme, appelée immédiatement.Les variables qui y sont déclarées sont déjà au niveau le plus haut de la fonction.Les valeurs qui leurs sont assignées proviennent des variables locales de la fonction englobante et sont les copies des valeurs au moment de l'appel à la fonction anonyme durant l'itération de la bouclefor.
En JavaScript 6 (EcmaScript 6), il est possible d'utiliserlet ouconst à la place devar pour déclarer les variables, car lehoisting n'est pas opérant avec ces mots-clés.
Les fermetures peuvent être utilisées aussi pour créer des fonctions de manière dynamique, comme l'exemple ci-dessous créant des fonctions multiplicatrice par un facteur passé en argument.
functioncreerMultiplicationPar(facteur){functionmultiplier(nombre){// Accède à son argument et celui de la fonction qui l'englobereturnnombre*facteur;}returnmultiplier;// Retourne la fonction locale}vardoubler=creerMultiplicationPar(2);vartripler=creerMultiplicationPar(3);console.log(doubler(100));// -> 200console.log(tripler(100));// -> 300
Comme une fonction est utilisable comme n'importe quel type de données en JavaScript, on peut écrire :
functioncreerMultiplicationPar(facteur){returnfunction(nombre){// Accède à son argument et celui de la fonction qui l'englobereturnnombre*facteur;};// Retourne la fonction locale}
En ES6 :
functioncreerMultiplicationPar(facteur){return(nombre)=>nombre*facteur;}
Dans la programmation orientée objet, le programme est conçu pour que ses composants soient aussi modulaires que possible. En particulier, quand un nouveau type d'objet est créé, il devrait fonctionner sans problèmes lorsqu'il est placé dans un environnement différent ou nouveau projet de programmation, c'est à dire qu'il est indépendant. Le résultat est une réduction du temps passé dans la réécriture de code.
JavaScript utilise des objets pour représenter des types de données complexes. Ces objets sont de petites structures de données avec leurs propres champs et des fonctions d'accès ou de modification de ces données. Ces objets bénéficient d'une approche où les variables sont protégées de toute ingérence extérieure. Si les variables peuvent être modifiées directement par le code d'un programmeen dehors de la fonction ou de l'objet, alors il ne peut plus être tributaire de donner un résultat précis.
Contrairement à d'autres langages de programmation, JavaScript n'a pas de niveaux de protection sur les membres d'un objet. JavaScript utilise un prototype de forme des objets, qui peuvent encore hériter de classes des parents, mais n'est pas une forme pure de langage orienté objet ; il s'agit un langage de programmation objet par prototype. Cependant, la plupart des modèles de conception peut encore s'appliquer au langage tant que l'on ne cherche pas à accéder directement à l'état interne de l'objet (par exemple, en utilisant les méthodes d'un objet).
Comme avec d'autres langages de programmation, en JavaScript, les références aux champs et fonctions d'un objet utilisent le point (.) entre l'objet et le nom du champ.
Le mot clénew crée un nouvel objet.
item=newObject();
Dans JavaScript, les objets n'ont pas de forme fixe - ils peuvent se modifier en cours d'exécution pour crée un nouvel objet, ou pour créer des champs ou fonctions.
money=newObject();money.quarters=10;
Comme on le voit plus bas, on peut créer des méthodes pour l'objet de la même manière.
En JavaScript, qui est un langage deprogrammation orientée prototype, chaque objet hérite des attributs et méthodes de son prototype.
Exemple :
functionAnimal(race,sex){this.race=race;this.sex=sexmanger=function(){return"je mange";}}Animal.prototype.attaquer=function(){alert("J'attaque");};varanim=newAnimal("labrador","male");anim.age=10;anim.courir=function(vitesse){alert("Je cours à "+vitesse+" km/h");};// ->anim.courir(50);anim.attaquer();
Le mot cléthis est utilisé dans une méthode, et se réfère à l'objet qui est attaché à cette méthode.
money.addQuarters=function(amount){this.quarters+=amount;}money.addQuarters(10);
/** * Modélisation d'une voiture * * @class Voiture */varVoiture=(function(){//'use strict';Voiture.couleur="verte";// methode de classeVoiture.construire=function(marque){returnnewVoiture(marque);};// constructeurfunctionVoiture(marque){this.marque=marque;}// méthodes d'instanceVoiture.prototype={rouler:function(direction){document.write("la voiture roule");},getMarque:function(){returnthis.marque;}};returnVoiture;}());// ->varsaab=newVoiture('Saab');varchrysler=Voiture.construire('Chrysler');chrysler.rouler();alert(saab.getMarque());
La notation objet du langage JavascriptJSON (JavaScriptObjectNotation en anglais) permet de déclarer des objets en donnant la valeur des membres. Cette notation concerne également les tableaux qui sont considérés comme des objets.
Elle abrège la déclaration de données en permettant de donner toutes les valeurs d'un objet ou d'un tableau en une seule expression.Cette expression peut, par exemple, être passée en paramètre d'une fonction.
Contrairement à sa principale alternative, leXML, cette notation ne comprend aucun en-tête et est toujours encodée en UTF8.
Un autre avantage de ce format par rapport au XML, quand il est utilisé pour un échange de données (RPC, REST, ...) : les données sont typées, ce qui signifie que les données sont directement interprétées en javascript (entiers, booléen, chaîne de caractères, ...), contrairement au XML où toutes les données sont des chaînes de caractères à interpréter explicitement dans le code.
Le format JSON est un sous-ensemble de la syntaxe du langage JavaScript décrivant les données de type booléen, nombre (entier et à virgule flottante), chaîne de caractère, objet et tableau.
| Syntaxe | Type | Description |
|---|---|---|
| valeur | Booléen / Nombre / Chaîne de caractères |
|
| [item1 ,item2 ,... ] | Tableau | Un tableau est représenté par la liste des items séparés par des virgules, encadrée par des crochets. |
| {clé1 :valeur1 ,clé2 :valeur2 ,... } | Objet | Un objet est représenté par la liste des associations clés et valeurs séparées par des virgules, encadrée par des accolades. Les clés doivent être d'un type supporté par le format (un des types de cette table). Elle ne peut pas être un mot sans guillemets, qui n'est accepté que par le langage JavaScript. |
Le nombre restreint de types de données participe au fait que ce format est très utilisé avec beaucoup de langage de programmation car il est facile de faire un interpréteur et un encodeur pour ce format.JSON a aussi inspiré beaucoup d'autres formats de sérialisation des données.
Un tableau est en réalité une forme spéciale d'objet.Pour preuve, la fonctiontypeof(...) retourne le type"object" quand on lui passe un tableau.
La syntaxe abrégée pour déclarer le contenu d'un tableau utilise une série de valeurs entre crochets :
[valeur,valeur... ]
Oùvaleur est une expression dont le type peut être quelconque (entier, chaîne de caractères, tableau, objet, ...).
Exemple :
varfruits=["pomme","orange","pamplemousse"];
Hors code javascript, dans un fichier de données au format JSON, il n'y a pas de déclaration de variable ou de point-virgule à la fin :
["pomme","orange","pamplemousse"]
Équivalent sans la notation :
varfruits=newArray();fruits[0]="pomme";fruits[1]="orange";fruits[2]="pamplemousse";
Variante :
varfruits=newArray();fruits.push("pomme");fruits.push("orange");fruits.push("pamplemousse");
Il est possible d'imbriquer les tableaux, c'est à dire déclarer un tableau de tableaux :
varparfums_glaces=[["chocolat","vanille"],["fraise"],["framboise","cassis"]];
Tous les éléments d'un tableau ne sont pas obligatoirement du même type :
vararticle=["Livre",21.99];// nom et prix
Un objet Javascript est en réalité une table associant un nom (attribut ou clé) à une valeur.
La notation JSON utilise une série d'association nom-valeur entre accolades :
{nom :valeur ,nom :valeur , ... }Exemple :
{"nom":"Livre","prix_unitaire":21.99,"quantite":2}
Contrairement à Javascript, la notation au format JSON n'accepte pas les clés sans guillemets ni les fonctions car les clés doivent être d'un type supporté par JSON.
Il est possible de déclarer des tableaux d'objets, des objets contenant des tableaux ou d'autres objets, ...
Exemple complexe :
[{"client":"Jean","articles":[{"nom":"Livre","quantite":2,"prix_unitaire":21.99},{"nom":"Stylo","quantite":4,"prix_unitaire":0.79}],"mode_paiement":"chèque"},{"client":"Pierre","articles":[{"nom":"Livre","quantite":1,"prix_unitaire":21.99},{"nom":"Trombones","quantite":50,"prix_unitaire":0.05}],"mode_paiement":"espèces"}]
JSON.stringify({ name: 'test', age: 22 }, null, 4); donne la chaine de caractères :'{ "name": "test", "age": 22}'Convertisseurs JSON :
Bases de données JSON :
AJAX signifie "Asynchronous Javascript And Xml", soit « Javascript asynchrone et Xml » en français.Il s'agit d'un moyen de charger le contenu retourné par un serveur web (ressource, fichier, ...) depuis le javascript.Cela permet notamment de recharger une partie de l'interface web sans recharger toute la page.
functioncreateXhrObject(){if(window.XMLHttpRequest)returnnewXMLHttpRequest();if(window.ActiveXObject){varnames=["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP"];for(variinnames){try{returnnewActiveXObject(names[i]);}catch(e){}}}window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");returnnull;// non supporté}functionupdatePage(contentpath){letxhr=createXhrObject();xhr.onreadystatechange=function(){if(xhr.readyState==4&&xhr.status==200)document.getElementById('cadre_contenu').innerHTML=xhr.responseText;}xhr.open("GET","load.php?page="+contentpath,true);xhr.send(null);// Envoi avec données (typiquement pour une requête POST seulement, null pour GET).}
Pour persister des données dans l'ordinateur de l'utilisateur, on distingue trois méthodes[10] :
Apparus en JS avec ES6 en 2013, lesgénérateurs permettent de retourner un grand volume de données sans surcharger la rame, en la découpant en petits paquets.
En deux mots, on les utilise en remplaçantreturn paryield. Mais il faut aussi créer une fonction générateur, annotée avec un astérisque[1], pour suivre lepatron de conception "Itérateur".
function*fourInts(){letint=0;while(int<4){yieldint;int++;}}constgen=fourInts();// créationalert(gen.next().value);// 0alert(gen.next().value);// 1alert(gen.next().value);// 2alert(gen.next().value);// 3alert(gen.next().value);// undefined
Lecadriciel Dojo est unframeworkopen source enJavaScript.
Le présent manuel se fonde sur ladocumentation officielle de Dojo disponible en Wiki.
Son but est le développement rapide d'applications en JavaScript exécutées côté client et communiquant avec le serveur avec une granularité inférieure à la page grâce à Ajax.
Le présent livre a pour finalité de fournir un ensemble de connaissance de départ pour les nouveaux utilisateurs deDojo.
Il est important que la version 0.4.0 ou supérieure soit utilisée. Elle peut être trouvée à cette adresse :
http://download.dojotoolkit.org/release-0.4.0/
Créer l'arborescence suivante :
- HelloWorldTutorial/ | |---- js/ | ---- dojo/
télécharger ladernière version de dojo et la décompresser dans le répertoire HelloWorld/js/dojo/
Vous devriez alors avoir la structure suivante : ('..' indique qu'il y a plus de répertoire)
- HelloWorldTutorial/ | |-- js/ | -- dojo/ | -- build.txt -- CHANGELOG -- demos | -- .. -- dojo.js -- dojo.js.uncompressed.js -- iframe_history.html -- LICENSE -- README -- src/ | -- ..
Nous allons maintenant créer une page html de base qui servira à appeler toutes les fonctionnalités de Dojo que nous utiliserons par la suite.
<html> <head> <title>Dojo: Hello World!</title> <!-- SECTION 1 --> <script type="text/javascript" src="js/dojo/dojo.js"></script> </head> <body> </body></html>
Nous allons créer un bouton gadget (widget en anglais, c'est ce terme qui est utilisé par Dojo) avec le texteHello world. Dans ce cas ci, trois option sont disponible (mouseOut, mouseOver, et mouseDown), qui enrichissent considérablement l'expérience de l'utilisateur !
La première chose à faire est de demander à Dojo de charger le module correspondant.
Dans l'en-tête (<head> jusqu'à </head>), placer la section correspondante :
<!-- SECTION 2 --> <script type="text/javascript"> // Charge le code de Dojo relatif aux fonctions de chargement des widgets dojo.require("dojo.widget.*"); // Charge le code de Dojo relatif au bouton gadget dojo.require("dojo.widget.Button"); </script>Le premierdojo.require instruit dojo d'inclure les fonctionswidget (gadgets) (Attention cela ne charge pas tous les widgets!) ; ce sont les lignes d'instructions du second dojo.require qui charge le bouton. Si vous oubliez la deuxième ligne, vous aurez un bouton en HTML.
Après avoir fait ces changements, insérer ce code suivant à l'intérieur des balises <body> et </body>
<button dojoType="Button" widgetId="helloButton">Salut tout le monde!</button>
L'élément clé à percevoir ici est ledojoType. Le type est ici un bouton, mais nous pourrions mettre uninput à la place.
LewidgetId identifie le bouton. Il peut être remplacé par simplementid .
Pour mettre plusieurs boutons avec la même phrase, il faut copier cette ligne et changer l'id.
Si vous voulez que votre HTML soitvalide W3C, il faut changer l'attributdojoType qui n'est pas reconnu. Exemple :
<inputdojoType="ComboBox">
devient
<inputclass="dojo-ComboBox">
où ComboBox est votre Widget. Vous pouvez donc ainsi faire de l'AJAX compatible aux normes du W3C.
jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.
Typiquement, il faut l'inclure depuis son site ou en le téléchargeant :
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
Pour vérifier la version installée ensuite, taper dans la console du navigateur (F12) :
console.log(jQuery().jquery);
Afin de raccourcir la syntaxe au maximum, en jQuery le dollar ($) est un alias de la fonctionjQuery() servant à rechercher dans le DOM un nœud correspondant au sélecteur en paramètre.
Par exemple, entrer le sélecteur$('.data') dans la console du navigateur affiche un objet avec les éléments de la page au format jQuery.
Autre exemple pour rechercher par attribut de données :$('*[data-my-attribute-id="' + attribute_id + '"]').
Pour éviter des recherches absolues dans toute la page, on peut aussi lancer des recherches relatives à un nœud. Ceci est appelé le "traversing"[1], et jQuery propose les méthodes ci-dessous pour ce faire :
Cherche tous les enfants de l'objet courant correspondant au paramètre.
Cherche tous les parents de l'objet courant correspondant au paramètre.
Cherche le premier enfant de l'objet courant correspondant au paramètre.
Cherche dans le premier parent de l'objet courant correspondant au paramètre.
Pour boucler sur tous les éléments possédant une classe :
$('.ma_classe').each(function(index,result){if(result.value===null){returntrue;// continue}if(result.value==="stop"){console.log(index);returnfalse;// break}});
Il existe deux syntaxes pour écouter les évènements : l'une avec la méthode "on" et l'autre avec le nom de l'évènement directement. Exemple avec "change" :
$(document).on('change','#mon_id',function(){...$('#mon_id').change(function(){...
Les principaux évènements utilisés sont[2] :
Quand la page est finie de charger.
Quand on change la valeur d'un champ.
Quand on clique sur un élément.
Permettent de rajouter des classes à des éléments JQuery.
Depuis la v1.4, on peut y mettre des fonctions[3]. Par exemple pour retirer toutes les classes par préfixe (finissant par un nombre) :
monElement.removeClass(function (index, className) { regex = new RegExp(monPrefix + '[0-9]+', 'g'); return (className.match(regex) || []).join(' '); });La méthodejQuery.ajax() permet comme son nom l'indique de lancer des requêtesAJAX, c'est-à-dire asynchrones[4] enXMLHttpRequest (XHR).
Pour appliquer un traitement dépendant du résultat de ces requêtes, il suffit de les faire suivre par les méthodes existantes qui correspondent à chaque type de résultat.
Par exemple, le code suivant récupère un fichier et affiche son contenu, ou une erreur si le fichier est inaccessible :
$.ajax({url:"http://www.example.com",type:'POST',data:{'id':1,},dataType:'json',}).done(function(data){alert(data);}).fail(function(){alert('The file is missing!');});
Le style avec callbacks "error: / success:" sous "url:" est moins bien géré au niveau "defer" que les méthodes ".done() et .fail()" (voire ".then() et .fail()"), introduites dans la v1.5[5].
| Nom | Fonction |
|---|---|
| $(), jQuery() | Fonction de sélection, et d'initialisation |
| holdReady() | Retiens ou relâche un évènement jQuery |
| noConflict() | Supprime un mot réservé |
| sub() | Crée une copie modifiable d'un objet jQuery |
| when() | Planifie des objets |
| each() | Sélectionne chaque élément d'un objet |
| parents() | Sélectionne tous les éléments parents |
| parent() | Sélectionne le parent direct |
| children() | Sélectionne tous les enfants |
| closest() | Sélectionne l'élément le plus proche avec une certaine caractéristique (évite desparent().parent().parent()). |
| hasClass() | Renvoie si l'élément à une classe |
| addClass() | Ajoute une classe |
| removeClass() | Retire une classe |
| toggleClass() | Échange deux classes |
| Sélecteurs | |
| :animated | Sélectionne les éléments animés |
| :hidden | Sélectionne les éléments cachés |
| :visible | Sélectionne les éléments visibles |
| :first | Sélectionne le premier élément |
| :last | Sélectionne le dernier élément |
| :even | Sélectionne les éléments pairs |
| :odd | Sélectionne les éléments impairs |
| :eq(index) | Sélectionne le nème élément |
| :gt(index) | Sélectionne les éléments supérieurs au nème |
| :lt(index) | Sélectionne les éléments inférieurs au nème |
| :input | Sélectionne les champs modifiables |
| :text | Sélectionne les champs texte |
| :radio | Sélectionne les boutons radio |
| :checkbox | Sélectionne les cases à cocher |
| :checked | Sélectionne les boutons radio et cases à cocher cochés |
| :first-child | Sélectionne le premier élément enfant |
| :last-child | Sélectionne le dernier élément enfant |
| parent > child | Sélectionne le premier enfant d'un parent |
| Méthodes[7] | |
| .attr() | Affiche ou remplace la valeur d'un attribut |
| .val() | Affiche ou remplace la valeur d'un champ |
| .html() | Affiche ou remplace l'objet par de l'HTML |
| .text() | Affiche ou remplace l'objet par du texte |
| .prepend() | Ajoute le paramètre avant l'objet, dans la balise |
| .append() | Ajoute le paramètre après l'objet, dans la balise |
| .prependTo() | Ajoute l'objet avant le paramètre, dans la balise |
| .appendTo() | Ajoute l'objet après le paramètre, dans la balise |
| .before() | Ajoute le paramètre avant l'objet |
| .after() | Ajoute le paramètre après l'objet |
| .insertBefore() | Ajoute l'objet avant le paramètre |
| .insertAfter() | Ajoute l'objet après le paramètre |
| .wrap() | Ajoute les balises en paramètre autour de l'objet |
| .wrapInner() | Ajoute les balises en paramètre autour de l'objet à l'intérieur |
| .wrapAll() | Ajoute les balises en paramètre autour des objets |
| .clone() | Duplique un objet |
| .empty() | Vide un objet |
| .remove() | Retire un objet |
| .removeAttr() | Retire un attribut |
| .replaceWith() | Remplace l'objet par le paramètre |
| .replaceAll() | Remplace le paramètre par l'objet |
Node.js est un framework JavaScript apparu en 2009, qui fournit plusieurs modules :
Télécharger le .msi surhttps://nodejs.org
sudoaptinstallbuild-essentialcheckinstalllibssl-devcurl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh|bashnvmls-remote# copier la version vouluenvminstallv14.18.1
Sur Debian, remplacer la version voulue dans l'URL. Exemple :
RUNcurl-sLhttps://deb.nodesource.com/setup_14.x|bash-RUNapt-getinstall-ynodejsRUNapt-getinstall-ynpmnpm install télécharge les dépendances décrites dans le fichier package.json.
Exemple pour en installer de nouvelles :
npminstallbabel-polyfillnpminstallnode-sass--save-dev
React.js est un framework JavaScript développé parFacebook depuis 2013, qui privilégie laprogrammation déclarative à laprogrammation impérative[1] pour développer desapplications monopages (SPA) performantes, car il ne modifie que les fragments de page nécessaires[2] en asynchrone.
React est utilisé dans de nombreuses applications à fort trafic, telles que Netflix, Yahoo, Airbnb, Sony, Atlassian, Facebook, Instagram ou encore WhatsApp.
De plus, le frameworkReact Native permet d'utiliser la syntaxe React pour développer des applications mobiles.
Par ailleurs, il existe des outils pour l'utiliser avec le frameworkPHP Symfony en back-end, notamment :
Pour créer une application React vide sous Linux :
sudonpminstall--globalnpxnpxcreate-react-appReactAppcdReactAppnpmstartReact fonctionne à base de composants dans lesquels on injecte des "props" (properties)[4].
Le but est de découper l'application en composants réutilisables.Il est recommandé de les déclarer avec une majuscule, et ils peuvent être des fonctions, desfonctions fléchées, ou des classes (depuis ES6).Exemple :
// FonctionfunctionHelloWorldFunction(props){return<b>HelloWorld!,{props.name}</b>;}// Fonction fléchéeconstHelloWorldArrowFunction=()=>{return<b>HelloWorld!,{props.name}</b>;};// ClasseimportReactfrom'react'classHelloWorldClassextendsReact.Component{render(){return<b>HelloWorld!,{this.props.name}</b>;}}
Il y a donc deux façons de créer un composant :
React.Component, gérant son état dans un attributstate. Cette classe possède alors une méthode nomméerender retournant ce qu'il faut afficher, incluant d'autres composants. Son état doit alors être modifié par la méthodesetState qui fusionne l'objet spécifié avec l'état courant et déclenche un nouvel affichage du composant si nécessaire.Cette syntaxe permet de mélanger du code XML (HTML ou composants React) au JavaScript.Le JavaScript est intégré lui-même dans le XML entre des accolades pour l'interpolation, c'est-à-dire interpréter des variables, calculer une expression, appeler une fonction...
Cette syntaxe particulière ne fait pas partie du JavaScript standard compris par les navigateurs et exige donc une compilation avant que l'application soit exécutée. Il faut l'installer avec :
yarn add @babel/preset-react --dev
La syntaxe HTML des JSX est légèrement différente :
Exemple :
return<divclassName="main-title"style={{fontSize:'36pt',fontWeight:'bold'}}>Unexemple</div>
Pour invoquer un composant, il faut l'importer et le mettre dans une balise XML, avec ses props comme attributs.Pour importer une fonction au lieu de tout un fichier, la mettre entre accolades.
Exemple :
importReactfrom'react'import{render}from'react-dom'importHelloWorldfrom'./HelloWorld'constyou="me"render(<HelloWorldname={you}/>document.querySelector('#app'),)
Les états des composants peuvent être gérés par la bibliothèqueRedux, ou depuis React 16.8 (en 2019) par des hooks[6] dont voici la liste[7] :
React.createClass contient les fonctions.ReactDOM les invoque[8]. ReactDOM.render() change l'affichage.On peut le tester en ligne sur :
Voici les méthodes magiques qui s'exécutent automatiquement selon l'étape du composant[9] :
La valeur retournée pour l'affichage d'un composant ne peut pas contenir plusieurs balises HTML sœurs, elles doivent être encapsulées dans une seule.Or, dans le cas des balises "li" ou "td", les encapsuler ajouterait un nœud qui les séparerait de leur balise parente ("ul" ou "table").
Les fragments sont la solution à cela en permettant d'encapsuler plusieurs éléments[10]. Ils peuvent être représentés par des balises vides.
Exemple :
return<><spanid="nom">Taille:</span><spanid="valeur">{fileSize}octets</span></>
Il existe beaucoup de bibliothèques logicielles utilisables en React[11].
Par exemple :
Exemple d'installation pour lesselect HTML :
yarn add react-select
Pour afficher des objets non scalaires (équivalent duvar_dump() de PHP) :
alert(JSON.stringify(monObjet1));
Un mode d'exécution pas à pas est ainsi possible dans l'onglet Débogueur (CTRL + Maj + S). En rafraichissant la page, il permet d'afficher les contenus des variables, sans avoir à placer desconsole.log() dans le code.
SousIE, dans les options avancées (Menu "Outils" / "Options Internet" / Onglet "Avancées"), décocher 2 options "désactiver le débogage de script". Si une erreur JavaScript est présente dans la page, une popup vous demandera si vous souhaitez ouvrir le déboguer de Microsoft (Microsoft Script Editor).
Ce navigateur vous dira ainsi, qu'il ne reconnait pas la fonctiongetElementsByClassName disponible dans d'autres navigateurs.
F12 lance le débogage de la page.
Il existe des modules de navigateur pour connaitre l'état des composants React :
Et pour suivre les changements d'état :
La fonction doit être chargée sansaddOnloadHook().
Peut provenir d'un littéral qui n'est pas entre guillemets.
Si une requête AJAX s'interrompt avec cette erreur dans Firefox, c'est que son chargement a été arrêté. Par exemple parce qu'elle est remplacée par une autre ou que la page qui l'appelle est rechargée.
Mieux vaut tester que l'objet sur lequel on boucle est itérable avant, sous peine d'erreur.
Il faut donc ajouter une ligne avant le .forEach() (ou le .each() jQuery).
jQuery n'est pas importé, ou alors pas dans le bloc "head".
Un attribut est redéfini avec le mauvais opérateur, par exemple :
// Remplacer "$('#champ1').val() = '1';" par :$('#champ1').attr('value','1');// ou "$('#URL1').attr('href') = 'https://fr.wikibooks.org';" par :$('#URL1').attr('href','https://fr.wikibooks.org');
Lors d'unnpm install, il faut alors lancernpm rebuild.Si cela ne fonctionne pas, fermer les programmes qui lisent ce code (ex : IDE) et lancer :npm cache clean --force; npm install.Sinon, mettre à jour Node.
Exclure le dossier des scans antivirus et antimalware.
Ajouter l'option--max-old-space-size=4096.
Se produit quand on importe un module inexistant. Pour importer une fonction seulement, utiliser la syntaxe avec accolade. Ex :
importReact,{useEffect}from'react'
Cette erreur se produit quand le composant n'est plus présent dans la page, mais que son état est mis à jour par la conclusion d'une opération asynchrone (Promise, timer, évènement...).
Pour ne plus avoir ce message, il faut libérer les ressources (timer, annuler les requêtes en cours...) dans la fonction retournée dans le code d'un useEffect, et gérer un booléen mis à jour pour connaître l'état du composant au début des callbacks pour ne pas effectuer le traitement si le composant n'est plus monté.
A component is changing an uncontrolled input of typecontroltype to be controlled. Input Elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Les contrôles d'entrée de formulaire (champ texte, case à cocher, liste déroulante, ...) peuvent être contrôlé ou non, mais ne peuvent varier entre les deux modes.
Le mode contrôlé signifie que la valeur est définie par un état (useState en codage de composant de type fonctionnel).
Cette erreur peut arriverquand l'état n'a pas de valeur initiale définie (undefined), ce qui met le contrôle d'entrée en mode non contrôlé.Le mode change à contrôlé quand l'utilisateur modifie la valeur (taper du texte, cocher la case, ...) provoquant un changement de l'état à une valeur définie, passant le contrôle d'entrée en mode contrôlé, ce qui provoque ce message d'erreur.
Dans ce cas, le remède est de définir une valeur initiale (argument de la fonctionuseState).
Les hooks sont les fonctions dont le nom commence par "use" (useState, useEffect).Chaque appel à une telle fonction alloue en interne un emplacement (slot) permettant de stocker l'état interne du hook.Ces fonctions doivent donc être appelées systématiquement, et toujours dans le même ordre, donc sans condition.
React n'est pas un framework stable, et cette erreur peut être un faux positif très gênant.
La propriétéCSSz-index n'agit que sur les éléments ayant une propriétéposition.La solution est de définir cette propriété, en général avec la valeurrelative.
Cette section est vide, pas assez détaillée ou incomplète.Votre aide est la bienvenue ! GFDL | Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de lalicence de documentation libre GNU, version 1.2 ou plus récente publiée par laFree Software Foundation ; sans sections inaltérables, sans texte de première page de couverture et sans texte de dernière page de couverture. |