Programmation JavaScript/Version imprimable
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
Introduction
JavaScript (alias JS) est un langage de programmation utilisĂ© initialement par les navigateurs web, dont le champ dâapplication sâest progressivement Ă©tendu aux serveurs web et aux applications graphiques. Il partage avec Java une syntaxe inspirĂ©e du langage C, mais leurs similitudes s'arrĂȘtent lĂ . Il fut crĂ©Ă© par Netscape sous le nom LiveScript en 1996.
Le noyau du JavaScript est aujourd'hui défini par le standard ECMA 262[1], connu aussi sous l'appellation ECMAScript (ES).
Les fichiers JavaScript possÚdent l'extension .js, mais on trouve aussi des .ts correspondant au TypeScript. Il s'agit d'un sur-ensemble syntaxique strict de JavaScript créé par Microsoft 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 document HTML et ses feuilles de style CSS via l'interface DOM (Document Object Model ; on parle de HTML dynamique ou DHTML 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 de navigateurs. 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.
Versions
[modifier | modifier le wikicode]Voici les différentes versions du JavaScript par année[3] :
- ES2015 / ES6
- ES2016 / ES7
- ES2017 / ES8
- ES2018 / ES9
- ES2019 / ES10
- ES2020 / ES11
- ES2021 / ES12
- ES2022 / ES13
- ES2023 / ES14
Moteurs JS
[modifier | modifier le wikicode]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 du code à octets en juste-à -temps (JIT) à partir de l'arbre, puis le code machine spécifique au hardware avec cela, et enfin l'exécute.
Les principaux moteurs de JS sont :
- V8 de Google, Google Chrome, Electron, Chromium, node.js
- SpiderMonkey de Mozilla, Firefox
- JavaScriptCore d'Apple, Safari
- ActionScript d'Adobe, Flash
Références
[modifier | modifier le wikicode]
Programmer en deux minutes
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>
<script type="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 une pop-up, affiche le texte donnĂ© dans une seconde pop-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.
<script type="text/javascript">
alert(prompt("bonjour le monde !"));
</script>
</body>
Une minute
[modifier | modifier le wikicode]- Une page web est un document composĂ© d'une tĂȘte et d'un corps (
<html> <head></head> <body></body> </html>). - Le corps du document est affichĂ© Ă l'Ă©cran tandis que la tĂȘte contient le titre de la page, son favicon, ses mots-clĂ©s, etc. (pour un exemple, afficher le code source de cette page (on peut souvent utiliser le raccourci clavier Ctrl + U))
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.
<script type="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 des pop-ups
une minute trente : une fonction JavaScript
[modifier | modifier le wikicode]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function Prompt_et_alert() {
alert(prompt("bonjour le monde !"));
}
</script>
</head>
<body>
<a onmouseout="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).
Deux minutes
[modifier | modifier le wikicode]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 :
- Une page wiki
- Compteur en temps réel des dépenses militaires.
- Tout un site web dans un seul document.
console.log()
[modifier | modifier le wikicode]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.
Programmer en deux minutes/Une page wiki
Munis de votre éditeur de texte avec coloration syntaxique, créez ce document *.html et ouvrez-le avec votre navigateur outillé d'une extension Firebug-like.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<script type="text/javascript">
var texte;
function Prompt_and_run() {
texte = prompt("Bonjour. \nEntrez votre texte :");
return affiche_dans_div();
}
function affiche_dans_div() {
var wikitext = document.getElementById("wikitext");
return wikitext.innerHTML= "Votre texte : " + texte;
}
</script>
</head>
<body>
<a onmouseover="Prompt_and_run();"> <!-- la fonction est exécutée lorsque la souris est sur l'ancre -->
Ăcrire.
</a>
<div id="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 sur Programmation Web/Programmer en deux minutes à la sous-page : Un wiki en JavaScript et PHP.
Programmer en deux minutes/Compteur en temps réel
Document HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
</head>
<body>
<div id="compteur"></div>
<script type="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)
- Si vous ĂȘtes un utilisateur enregistrĂ© de WikipĂ©dia, vous pouvez personnaliser votre JavaScript pour ajouter Ă votre interface plein de choses, dont bien sĂ»r ce compteur. (voir Gadget-WarCost.js)
//////////////////////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";
var Gadget_WarCost_WhichWar="French military budget since 2009";
//// Données :
var totalIraq = 687000000000; // total dollars allocated to Iraq War.
var startOfIraqWar = new Date("Mar 20, 2003"); // start of Iraq War.
var IraqBudgetedThrough = new Date("Sept 30, 2009"); // current budget goes to
var totalAg = 228000000000; // total dollars allocated to Afghanistan War.
var startOfAgWar = new Date("Oct 7, 2001"); // start of Afghanistan War.
var AgBudgetedThrough = new Date("Sept 30, 2009"); // current budget goes to
var totalFM=186000000000; //budget militaire français 2009 - 2014
var startOfFM=new Date("Jan 1, 2009");
var FMBudgetedThrough=new Date("Dec 31, 2014");
var separator = "'";
/////////////////End CUSTOMIZATION/////////////////
RunWarCost(); ////// Exécute la fonction principale. //
function RunWarCost()
{
var WarCostmoney = "$";
var OutNumberWarCost = 0;
// Regarde quelles données afficher.
if (Gadget_WarCost_WhichWar == "US in Wars since 2001")
{
OutNumberWarCost = calculateTotal();
}
else if (Gadget_WarCost_WhichWar == "US in Iraq since 2003")
{
OutNumberWarCost = calculateIraq();
}
else if (Gadget_WarCost_WhichWar =="US in Afghanistan since 2001")
{
OutNumberWarCost = calculateAg();
}
else if (Gadget_WarCost_WhichWar =="French military budget since 2009")
{
OutNumberWarCost = calculateFrenchMilitary();
WarCostmoney = " âŹ";
}
else alert("The value of parameter Gadget_WarCost_WhichWar is wrong.");
var OutTextCostOfWar = number_str(OutNumberWarCost); // Formatage du nombre
if (WarCostmoney=="$")
OutTextCostOfWar = WarCostmoney + OutTextCostOfWar; // Symbole monétaire avant
else
OutTextCostOfWar = OutTextCostOfWar + WarCostmoney; // Symbole monétaire aprÚs
var compteur = document.getElementById("compteur");
compteur.innerHTML= "Votre compteur : " + OutTextCostOfWar + " = " + Gadget_WarCost_WhichWar; // Affiche la chaĂźne de caractĂšre
window.setTimeout(RunWarCost, 1000); ////// Ré-exécute la fonction principale dans 1 seconde.
}
function calculateFrenchMilitary()
{
return calculateWarCost(startOfFM, FMBudgetedThrough, totalFM);
}
function calculateIraq()
{
return calculateWarCost(startOfIraqWar, IraqBudgetedThrough, totalIraq);
}
function calculateAg()
{
return calculateWarCost(startOfAgWar, AgBudgetedThrough, totalAg);
}
function calculateTotal()
{
return calculateAg() + calculateIraq();
}
function calculateWarCost(startOfWar, BudgetedThrough, totalMoney)
{
var totalMS = BudgetedThrough - startOfWar; // Durée du budget en millisecondes
var ratePerMS = totalMoney / totalMS; // Budget par milliseconde
var curDate = new Date(); // Date courante
var diff = curDate - startOfWar; // Millisecondes depuis le début de la guerre
return diff * ratePerMS; // Coût de la guerre jusqu'à maintenant
}
function number_str(n)
{
var x = n.toString();
var dot = x.lastIndexOf('.');
x = x.substr(0,dot);
var l = x.length;
var res = "";
for(l-=3 ; l>0 ; l-=3)
res = separator+x.substr(l,3) + res;
res = x.substr(0,l+3) + res;
return res;
}
Programmer en deux minutes/Tout un site web dans un seul document
Pour créer Tout un site web dans un seul document, écrivez un document HTML
contenant 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 onclick="afficher()">,
ce qui exécute le Javascript suivant :
function afficher(a) {
var e=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. */
}
function cacher_sauf(e) {
var a=document.getElementsByClassName('page'); /* Obtient tous les éléments de classe page */
for(i in a) {
if (a[i] != e) {e[i].style.display="none";} /* Si différent de e, applique le style display:none. (cache) */
}
}
- Créez à l'aide d'un éditeur avec coloration syntaxique le fichier
*.htmlsuivant, 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
alert(" Copier/coller ici les fonctions javascript afficher() et cacher_sauf().");
</script>
<style type="text/css">
#sommaire {font-size:18pt; margin:3em; border-bottom:1px dotted grey;}
#contenu {margin:1em;}
</style>
</head>
<body >
<div id="sommaire">
<a onclick="afficher('home');">Home</a> -
<a onclick="afficher('page1');">Page 1</a> -
<a onclick="afficher('page2');">Page 2</a> -
<a onclick="afficher('contact');">Contact</a>
</div>
<div id="contenu">
<div class="page" id="home">
Welcome on my document. Its <a onclick="afficher('page1');" href="#">page 1</a> is about...
</div>
<div class="page" id="contact" style="display:none;">
contact page.
</div>
<div class="page" id="page1" style="display:none;">
page1 text.
</div>
<div class="page" id="page2" style="display:none;">
page2 text
</div>
</div>
</body>
</html>
Félicitation, les divisions de classe page 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.
Sans utiliser de JavaScript !
[modifier | modifier le wikicode]L'apparence déclarée à la pseudo-classe hover est active lorsque la souris est sur l'élément.
- CSS
.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é. */
- Créez ce document
*.htmlet 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-sa/3.0/" />
<style type="text/css">
span {cursor:pointer;}
#site {position:relative;}
#site .page { float:left;
margin:0 1em; padding:3px;
border:1px solid gray;}
#site .page:hover {border:2px dotted gray; }
#site .page:hover .corps { display:block; }
#site .page .corps { display:none;
position: absolute;
top: 1.5em;
left: 1em; padding:1em;}
</style>
</head>
<body >
<div id="site">
<div class="page"><span>Home</span>
<div class="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 -->
<div class="page"><span>About</span>
<div class="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>
<div class="page"><span>contact page</span>
<div class="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>
<div class="page">
<span>presentation</span>
<div class="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>
<div class="page">
<span>page1</span>
<div class="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>
<div class="page">
<span>page2</span>
<div class="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>
<div class="page">
<span>Album</span>
<div class="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>
Avec jQuery, une librairie d'instructions javascript
[modifier | modifier le wikicode]Nous allons créer un site défilant dans une division d'id galerie.
La division #galerie contient trois divisions :
- deux boutons (
div#nextetdiv#previous) Ă droite et Ă gauche, - une trĂšs large division (
div#slide {width:10000px;}) contenant les pages à faire défiler horizontalement.
- CSS
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:1px solid gray;z-index:5;
cursor:pointer;background:white;}
.defile:hover {color:gray; border:2px dotted gray;}
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:40px 0em 0 0em;}
.page { float:left; /* Les pages sont Ă gauche les unes des autres. */
padding:0 0em;
width:1000px;}
- Javascript
- La librairie jQuery est dĂ©clarĂ©e en tĂȘte du document (
<script src=http://). Ensuite viennent nos instructions utilisant l'objet jQuery$().
- L'objet
$(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,
$ = new slider("#galerie"); // crée l'objet slider().
});
var slider = function(id){ // L'objet slider est une fonction.
var self=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 #slide
this.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 next
this.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 previous
this.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(){});)
- Lorsque le document est prĂȘt c'est-Ă -dire que tout est chargĂ©, la fonction est exĂ©cutĂ©e. Cette fonction crĂ©e l'objet
slider(). slider()modifie les styles des divisions #slide, #next et #previous en utilisant les méthodes jQueryanimate(),show()ethide().
- Créez ce document
*.htmlet 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-sa/3.0/" />
<!-- load jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
alert(' Copie ici les instructions javascript'
+' ou declare ton fichier javascript externe avec <script src="" type="text/javascript"></script>.');
//]]>
</script>
<style type="text/css">
Copie les déclarations de style ici ou crée un fichier css et utilise <style src="" type="text/css"></script>
</style>
</head>
<body >
<div id="galerie">
<div id="previous" class="defile">prev</div><!-- premier bouton, -->
<div id="next" class="defile">next</div> <!-- deuxieme bouton, -->
<div id="slide"> <!-- et le slide contenant plusieurs pages. -->
<div class="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>
<div class="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>
<div class="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>
<div class="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>
<div class="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>
<div class="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>
Un menu déroulant en CSS
[modifier | modifier le wikicode]Le CSS permet Ă©galement d'interagir avec la souris, via notamment la pseudo-classe hover.
L'apparence déclarée à la pseudo-classe hover est active lorsque la souris est sur l'élément.
- CSS declarations
div#menu {width:100px;}
div#menu ul {padding: 0; width: 100px; border:1px solid gray; margin:0px; }
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid gray;}
div#menu ul ul {position: absolute; top: 0; left: 100px; display:none;} /* ul ul => display:none */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, /* li.sousmenu:hover => display */
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu li a {text-decoration: none; color:gray;}
div#menu li.sousmenu {background: #F0F0F0;}
ul.niveau2 est affiché (display:block;) lorsque la souris est dessus li.sousmenu (li.sousmenu:hover) contenue dans div#menu ul.niveau1.
- Créez ce document
*.htmlet 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index,follow" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-sa/3.0/" />
<script type="text/javascript">
function afficher(a) {
var e=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. */
}
function cacher_sauf(a) {
var els=document.getElementsByClassName('page');
for(i in els) {
if (els[i] != a) {els[i].style.display="none";}
}
}
</script>
<style type="text/css">
a{cursor:pointer;}
#sommaire { font-size:18pt;
margin:2em;
margin-right:0;
border-bottom:1px dotted grey;}
#contenu {margin:1em;}
div#menu {width:100px;}
div#menu ul {padding: 0; width: 100px; border:1px solid gray; margin:0px; }
div#menu ul li {position:relative; list-style: none; border-bottom:1px solid gray;}
div#menu ul ul {position: absolute; top: 0; left: 100px; display:none;} /* ul ul => display:none */
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, /* li.sousmenu:hover => display */
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu li a {text-decoration: none; color:gray;}
div#menu li.sousmenu {background: #F0F0F0;}
</style>
</head>
<body>
<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><a href="#" onclick="afficher('home');">Home</a>
<ul class="niveau2">
<li><a href="#" onclick="afficher('apropos');">Ă propos</a></li>
<li><a href="#" onclick="afficher('contact');">Contact</a></li>
</ul>
</li>
<li class="sousmenu"><a href="#" onclick="afficher('presentation');">Contenu</a>
<ul class="niveau2">
<li class="sousmenu"><a href="#">Articles</a>
<ul class="niveau3">
<li><a href="#" onclick="afficher('page1');">Page 1</a></li>
<li><a href="#" onclick="afficher('page2');">Page 2</a></li>
</ul>
</li>
<li><a href="#" onclick="afficher('photos');">Photos</a></li>
</ul>
</li>
</ul>
</div>
<div id="sommaire">
<a onclick="afficher('home');">Home</a> -
<a onclick="afficher('page1');">Page 1</a> -
<a onclick="afficher('page2');">Page 2</a> -
<a onclick="afficher('contact');">Contact</a>
</div>
<div id="contenu">
<div class="page" id="home">
Welcome on my document. Its <a onclick="afficher('page1');" href="#">page 1</a> is about...
</div>
<div class="page" id="apropos" style="display:none;">
About page.
</div>
<div class="page" id="contact" style="display:none;">
contact page.
</div>
<div class="page" id="presentation" style="display:none;">
Présentation du contenu.
</div>
<div class="page" id="page1" style="display:none;">
page1 text.
</div>
<div class="page" id="page2" style="display:none;">
page2 text
</div>
<div class="page" id="photos" style="display:none;">
Album
</div>
</div>
</body>
</html>
Outils de développement
Gestionnaires de paquets
[modifier | modifier le wikicode]Pour installer des bibliothĂšques, il existe plusieurs gestionnaires de paquets.
Installation
[modifier | modifier le wikicode]Sur Windows, le télécharger de : https://nodejs.org/en/download/
Sur Linux :
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt install -y nodejs
Utilisation
[modifier | modifier le wikicode]Par exemple pour une installation en environnement de développement uniquement :
npm install mon_package --save-dev
Installation
[modifier | modifier le wikicode]Réputé plus rapide que le précédent, il s'installe à partir de ce dernier :
npm install -g yarn
Utilisation
[modifier | modifier le wikicode]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
IDE
[modifier | modifier le wikicode]Un environnement 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 :
- L'analyse du code (Syntaxique, fonctionnel, objet...)
- Permet d'éviter de faire des erreurs et de parcourir rapidement les différentes parties du code.
- Le débogueur
- Indique oĂč se trouve les erreurs et de quel type d'erreur il s'agit.
- L'auto complétion
- Permet de visionner les méthodes et paramÚtres des objets javascript que vous utilisez.
- La documentation
- L'aide de chaque fonction est accessible rapidement.
- Les générateurs de code
- Des exemples de code permettent d'obtenir des programmes trĂšs rapidement.
Libre
[modifier | modifier le wikicode]- Visual Studio Code
- NetBeans
- Aptana (Basé sur Eclipse)
Propriétaire
[modifier | modifier le wikicode]- PhpStorm (ou WebStorm)
- Dreamweaver
En ligne
[modifier | modifier le wikicode]- https://jsfiddle.net/ : un interpréteur en ligne, pratique pour tester des commandes.
- http://jsbin.com/#javascript,html : interpréteur en ligne.
- https://www.htmlstrip.com/javascript-validator : validateur en ligne.
Plugins de navigateur
[modifier | modifier le wikicode]Il existe des plugins de navigateurs comme Greasemonkey 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.
Syntaxe
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.
Ligne d'instruction
Composition d'une instruction
[modifier | modifier le wikicode]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 de commentaires.
DĂ©limitation des instructions
[modifier | modifier le wikicode]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 de commentaires :
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.
Regroupement des lignes d'instructions en blocs
[modifier | modifier le wikicode]Les lignes d'instructions sont regroupées en blocs d'instructions délimités par des accolades.
Note : JavaScript diffĂ©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.
Ordre d'Ă©valuation
Scripts
[modifier | modifier le wikicode]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'attribut defer, 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'attribut async, 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 code aprĂš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Ă©thode document.onload.
Instructions
[modifier | modifier le wikicode]à 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.
Expressions
[modifier | modifier le wikicode]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 + 2
alert( 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ée aprÚs v, et donc la valeur de v utilisée par l'addition est l'ancienne valeur.
Bloc d'instructions
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) :
- une déclaration de fonction
- une déclaration d'objet implicite with
- les déclarations try, catch et finally
- et par la structure de contrĂŽle switch
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) :
- une déclaration de boucle (for, while, do)
- un branchement conditionnel (if et else)
Dans tout autre cas, les accolades sont considérées comme les délimiteurs de l'écriture littérale d'un objet et non pas d'un bloc d'instructions.
Exécution séquentielle
[modifier | modifier le wikicode]à 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.
Inclusion de blocs
[modifier | modifier le wikicode]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")
}
}
Identificateurs
La programmation JavaScript, comme tous les langages informatiques, demande au développeur de définir des identificateurs, et ceci dans deux cas :
- pour nommer une fonction utilisateur
- pour nommer une variable
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 à un mot 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.
Principales rĂšgles
[modifier | modifier le wikicode]- Ne pas commencer par un chiffre,
- Ne pas utiliser de caractĂšre interdit,
- Ne pas faire suivre un caractÚre accentué par un chiffre,
- Rester monobloc. Pas de caractĂšre espace au milieu,
- Vérifier que l'identificateur n'est pas un mot réservé,
- Garder en tĂȘte que javascript diffĂ©rencie les majuscules des minuscules.
CaractÚres autorisés
[modifier | modifier le wikicode]Tous les caractÚres sont autorisés, sauf ceux qui contreviennent aux rÚgles précédentes et aux caractÚres interdits.
- Les lettres de l'alphabet, majuscules et minuscules,
- Les chiffres, sous réserve de ne pas commencer avec,
- Les caractÚres accentués, avec limitations,
- Certains caractÚres spéciaux :
$ _ - Les séquences d'échappement unicode de forme
\uNNNN
CaractĂšres interdits
[modifier | modifier le wikicode]- Les ponctuations et autres symboles spéciaux :
- , . " ' @ : / + * % = ~ ! ? < > ( ) [ ] { } # & | ` ^ š ⏠- Les caractÚres de contrÎles obtenus par séquence d'échappement,
- Les espaces.
Standardisation
[modifier | modifier le wikicode]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.
Notes de bas de page
[modifier | modifier le wikicode]- â Librement disponible sur internet
- â Lire Ă©ventuellement Ă la dĂ©couverte d'Unicode.
- â Par exemple la sĂ©quence [ e; accent aigu ] (en deux points de code ) est diffĂ©rent de [ e accent aigu ] (en un seul point de code)
Expression littérale
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.
Les chaßnes sous forme littérale
[modifier | modifier le wikicode]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 contient une erreur volontaire !
alert("le titre de l'article : "les joies de l'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
[modifier | modifier le wikicode]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.
L'Ă©chappement des guillemets simples (\') ou double (\")
[modifier | modifier le wikicode]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"
Le retour Ă la ligne avec \n
[modifier | modifier le wikicode]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 contient une erreur volontaire !
alert("premiĂšre,
deuxiĂšme
et 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Ăšme et troisiĂšme ligne
Heredoc : le retour Ă la ligne avec `
[modifier | modifier le wikicode]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 tabulation avec \t
[modifier | modifier le wikicode]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");
L'inclusion de caractĂšres unicode avec \u
[modifier | modifier le wikicode]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 codes hexadécimaux sont présentés avec 4 (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 sous forme littérale
[modifier | modifier le wikicode]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.
Les nombres négatifs
[modifier | modifier le wikicode]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;
Les entiers
[modifier | modifier le wikicode]Ils s'écrivent tel quel, c'est la représentation par défaut, employant les chiffres 0 à 9.
ma_var = 12;
Les réels
[modifier | modifier le wikicode]Le signe de séparation de la partie entiÚre est le point ( . )
ma_var = 8.65;
L'octal
[modifier | modifier le wikicode]Un nombre commençant par zero et ne comprenant que les chiffres de 0 à 7 sera interprété en octal.
ma_var = 0257;
L'hexadécimal
[modifier | modifier le wikicode]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;
La notation scientifique
[modifier | modifier le wikicode]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 en notation scientifique.
ma_var = 2.5e40; // Un grand nombre : 2,5 * 10 exposant 40
ma_var = 50e-30 // Un tout petit nombre
Taille des nombres
[modifier | modifier le wikicode]Le type number est au format 64 bits double précision.
Les chaßnes littérales dans les expressions associées aux évÚnements
[modifier | modifier le wikicode]à 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.
<div onclick="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 afficher Je 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'une table 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Ă© en dĂ©cimal et prĂ©cĂ©dĂ© du signe sharp (#) (  œ).
<div onclick="alert('Je suis "cliqué"')"> // Affiche: Je suis "cliqué"
cliquez moi!
</div>
... Mission accomplie.
Commentaire
JavaScript permet d'insérer des commentaires dans les programmes, et ceci de deux maniÚres :
- Syntaxe Ă double-slash (//)
- Syntaxe slash-Ă©toile (/* */)
La syntaxe Ă double-slash.
[modifier | modifier le wikicode]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
La syntaxe slash-Ă©toile.
[modifier | modifier le wikicode]Les commentaires sont ouverts avec ( /* ) et fermés avec ( */ ) et donc ignorés par l'interpréteur.
/* Commentaire sur une ligne */
/* Commentaire
sur plusieurs
lignes */
alert("message"); // Cette ligne est exécutée
Intégration dans les lignes d'instruction
[modifier | modifier le wikicode]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Ăštres
alert("deux " // Le premier
+ "mot" /* Le deuxiĂšme*/); // Deux inclusions de commentaires
Mots réservés
Cet article va passer en revue les mots réservés et constantes prédéfinies de JavaScript.
La norme ECMA 262, définit les mots réservés de JavaScript en deux catégories :
- les mots réservés (break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof)
- les futurs mots réservés (abstract enum int short boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public).
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Ă©clarations
[modifier | modifier le wikicode]var
[modifier | modifier le wikicode]Déclaration d'une variable locale, avec ou sans affectation. à placer en début d'instruction.
var ma_variable;
var ma_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 des closures). 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Ă©rateur delete.
Voir la section sur rehaussement des déclarations.
const
[modifier | modifier le wikicode]DĂ©claration d'une constante locale[2].
let
[modifier | modifier le wikicode]Comme "var" mais restreint la portée au bloc, comme si ce bloc était situé dans une autre fonction. Exemple :
var a = 1;
var b = 2;
{
var a = 11;
let b = 22;
}
console.log(a); // 11
console.log(b); // 2
function
[modifier | modifier le wikicode]Déclaration d'une fonction utilisateur. C'est aussi un opérateur.
function ma_fonction()
{
alert("Je suis exécuté dans ma_fonction");
}
void
[modifier | modifier le wikicode]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 javascript:. En effet, si l'instruction qui compose cet URL retourne une valeur, cette valeur remplace le contenu de la page, ce qui est souvent indésirable. On place alors la déclaration void pour que l'instruction n'ait aucune valeur.
<a href="javascript:void(maFonction())">...</a>
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éclaration with rajoute en fait un niveau tout en haut de la pile de scopes.
with(navigator)
{
alert(appName + " " + appVersion);
}
est Ă©quivalent Ă
alert(navigator.appName + " " +navigator.appVersion);
Structures de contrĂŽle
[modifier | modifier le wikicode]return
[modifier | modifier le wikicode]Employé dans une fonction, provoque le retour au programme appelant avec renvoi facultatif d'un résultat.
function ma_fonction(aparam)
{
s = "";
if (aparam == "")
return; // Sortie sans renvoyer de résultat
else
s = "Le résultat";
return s; // Renvoie le contenu de s
}
if
[modifier | modifier le wikicode]Permet de dĂ©finir l'exĂ©cution conditionnelle d'instructions ou d'un bloc d'instructions. Peut-ĂȘtre utilisĂ© conjointement Ă else.
a = 5;
if (a==5)
alert("la condition est remplie");
else
[modifier | modifier le wikicode]Utilisé conjointement à if, permet d'exécuter des instructions alternativement au résultat de la condition spécifiée par if.
a = 5
if (a==5)
alert("a est Ă©gal Ă 5");
else
alert("a est différent de 5");
switch
[modifier | modifier le wikicode]Utilisé conjointement à case, permet d'implanter un sélecteur de cas.
function test(condition)
{
switch(condition)
{
case "1":
alert("condition='1'");
break;
case "3":
alert("condition='3'");
break;
case "5":
alert("condition='5'");
break;
}
}
case
[modifier | modifier le wikicode]Utilisé à l'intérieur d'un bloc switch, constitue un des choix du sélecteur.
break
[modifier | modifier le wikicode]Utilisé à l'intérieur d'un bloc switch, permet de sortir du sélecteur sans procéder tests suivants. Utilisé à l'intérieur d'une boucle telle un bloc switch, permet de quitter la boucle immédiatement.
default
[modifier | modifier le wikicode]Utilisé à l'intérieur d'un bloc switch, constitue l'option par défaut du sélecteur.
for
[modifier | modifier le wikicode]Introduit une boucle itérative.
for (i=0;i<5;i++)
{
alert(i);
}
For each :
var array = [1, 2, 3];
for (line in array)
{
alert(line);
}
En tableau associatif :
var array = { "a" : 1, "b" : 2, "c": 3 };
for (const line in array)
{
alert('Clé : ' + line + ', valeur : ' + array[line]);
}
NB : voir aussi la méthode Array.prototype.forEach()[3].
do
[modifier | modifier le wikicode]Introduit une boucle itérative conditionnelle avec test effectué à chaque tour par "while" :
i=0
do
{
i++
alert(i); // Affichera 1, puis 2, puis 3, puis 4, puis 5
}
while(i<5);
while
[modifier | modifier le wikicode]Introduit une boucle itérative conditionnelle:
i=0
while(i<5)
{
i++; // Incrémenter i
alert(i); // Affiche 1, puis 2, puis 3, puis 4, puis 5
}
continue
[modifier | modifier le wikicode]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 Ă 1
alert(5/i); // On évite ainsi la division par zéro.
}
Gestions des erreurs
[modifier | modifier le wikicode]throw
[modifier | modifier le wikicode]Provoque une erreur personnalisée.
throw new Error("votre erreur");// a le mĂȘme effet visuel que alert("votre erreur");
try ... catch ... finally
[modifier | modifier le wikicode]Ă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érateurs
[modifier | modifier le wikicode]in
[modifier | modifier le wikicode]Opérateur qui détermine l'appartenance à un objet. Dans une boucle for... in, permet de répéter des instructions pour chaque propriété d'un objet.
new
[modifier | modifier le wikicode]Opérateur qui permet l'instanciation d'un objet.
var mon_tableau = new Array();
instanceof
[modifier | modifier le wikicode]Cet opérateur permet de tester si une valeur est une instance d'un objet :
t = new Array();
alert(t instanceof Array); // Affiche true
alert(t instanceof Date); // Affiche false
typeof
[modifier | modifier le wikicode]Cet opérateur renvoie le type de la variable placée à droite.
Les valeurs renvoyées par typeof correspondent aux types de variables JavaScript, soit :
boolean string number function object undefined.
delete
[modifier | modifier le wikicode]Cet opérateur permet de supprimer une propriété.
Valeurs spéciales
[modifier | modifier le wikicode]this
[modifier | modifier le wikicode]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 global window.
true
[modifier | modifier le wikicode]Valeur booléenne "vrai".
if (true)
{
alert("Je m'affiche toujours");
}
false
[modifier | modifier le wikicode]Valeur booléenne "faux".
if (ma_bool == false)
alert("C'est pas vrai...")
null
[modifier | modifier le wikicode]Valeur de type "object" qui ne référence rien.
undefined
[modifier | modifier le wikicode]C'est la valeur de toutes les variables inexistantes ou supprimées.
Nouveaux mots réservés
[modifier | modifier le wikicode]await
[modifier | modifier le wikicode]class
[modifier | modifier le wikicode]const
[modifier | modifier le wikicode]debugger
[modifier | modifier le wikicode]export
[modifier | modifier le wikicode]extends
[modifier | modifier le wikicode]import
[modifier | modifier le wikicode]static
[modifier | modifier le wikicode]yield
[modifier | modifier le wikicode]Futurs mots réservés
[modifier | modifier le wikicode]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].
abstract
boolean
byte
char
double
enum
final
float
goto
implements
int
interface
long
native
package
private
protected
public
short
super
enum, implements, interface, private, static.Références
[modifier | modifier le wikicode]- â https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords
- â https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/const
- â https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
- â https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#future_reserved_words
Variables
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.
Typage dynamique
[modifier | modifier le wikicode]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 undefined ma_versatile = "Je deviens une chaĂźne"; // devient string ma_versatile = 5; // devient number ma_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.
Identificateur
[modifier | modifier le wikicode]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.
Portée
[modifier | modifier le wikicode]Propriétés
[modifier | modifier le wikicode]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 avec var, des propriétés d'un objet. Par défaut, cet objet est implicitement l'objet window (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 que window est une propriété de window).
Comme window 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.
Sous-entendre un objet
[modifier | modifier le wikicode]Pour Ă©conomiser du code, il peut ĂȘtre intĂ©ressant de sous-entendre un autre objet que window. Cela se fait explicitement avec un bloc with. Cette dĂ©claration ne fonctionne pas aussi simplement qu'en Basic, par exemple. L'objet est en fait placĂ© en haut de la scope chain dans le bloc d'instruction, presque comme si ses propriĂ©tĂ©s Ă©taient des variables locales d'une fonction (voir Programmation JavaScript/Scope chain). Lorsqu'on utilise un identificateur dans un bloc with, la rĂ©solution se fait aussitĂŽt qu'une des conditions suivantes est remplie :
- l'identificateur est une propriété existante de l'objet sous-entendu
- l'identificateur existe ailleurs dans la scope chain, en partant du haut (par exemple, une variable locale)
- l'identificateur est une propriété existante de window
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 simplement undefined.
c=true
d="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 explicitement
window.a=5
b="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 explicitement
monObjet.b="autre chose"
delete c // 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 explicite
alert(window.d) // affiche "propriété de window"
}
Variables locales
[modifier | modifier le wikicode]Ă l'aide de la dĂ©claration var, 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 (voir Fermeture). Par contre, elle ne peut pas ĂȘtre dĂ©truite par l'opĂ©rateur delete.
function foo()
{
var loc_1 = 2 // n'a pas d'existence en dehors de foo()
for (i = 0 ; i < loc_1; i++)
{
var 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
}
alert(loc_2); // Provoque une erreur
Si la déclaration var est utilisée en-dehors de toute fonction, la variable sera utilisable dans tout le script.
Hoisting
[modifier | modifier le wikicode]L'exemple précédent montre l'effet hositing (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 variable loc_2 aprÚs la boucle for.
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 :
function foo()
{
var loc_1;
var loc_2; // Déclaration rehaussée
var i; // DĂ©claration implicite
loc_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 :
function add(n)
{
var t = addn(5);
function addn(a) // ^^ déclaration rehaussée implicitement
{
return a+n;
}
return t;
}
Cela Ă©quivaut au code suivant :
function add(n)
{
var t;
function addn(a)
{
return a+n;
}
t = addn(5);
return t;
}
Depuis Javascript 5, le mot-clé let permet de déclarer des variables locales à un bloc, sans effet de rehaussement.
function foo()
{
let loc_1 = 2;
for (i = 0 ; i < loc_1; i++)
{
let loc_2 = 2 * loc_1;
console.log(loc_2);
}
console.log(loc_2); // --> Uncaught ReferenceError: loc_2 is not defined
}
Types
[modifier | modifier le wikicode]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Ă©rateur typeof.
undefined
[modifier | modifier le wikicode]Une variable est du type undefined dans trois cas:
- AprÚs déclaration var sans affectation
var maNouvelleVar; // Déclarée mais pas affectée
alert(typeof maNouvelleVar); // Affiche undefined
- Si on lui affecte explicitement la valeur
undefined, ou qu'on lui affecte le résultat d'une expression qui retourne cette valeur.
var jeSaisPas = undefined
var caNExistePas = "impossible".enFrancais
alert (typeof jeSaisPas) // Affiche undefined
alert (typeof caNExistePas) // Affiche undefined
- Si elle n'a pas été déclarée ni utilisée, ou bien qu'elle a été effacée par l'opérateur delete.
alert(typeof varPasDeclaree); // Affiche undefined (si elle n'a effectivement pas été affectée)
monEphemere = "exister";
delete monEphemere; // la vie est courte
alert (typeof monEphemere); // Affiche undefined
alert(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érateur typeof retourne "undefined", mais lire directement la valeur de la variable provoque une erreur.
number
[modifier | modifier le wikicode]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.333333333333
alert(typeof r); // affiche number
n = 4/2;
alert(n); // affiche 2
alert(typeof n); // affiche number
3.6e5 // 360 000 en notation scientifique
0x40 // 64 en notation hexadécimale
0100 // 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 type number deux valeurs spéciales. Infinity, un nombre signé, est renvoyé dÚs que le résultat dépasse la capacité de stockage de number, 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 valeur NaN (Not A Number) qui est renvoyée (voir les opérateurs arithmétiques, les méthodes de Number et les méthodes de Math pour les cas qui produisent ces deux valeurs).
1/0 == Infinity
-2 / Infinity == 0
0/0 == NaN
Number("texte") == NaN
string
[modifier | modifier le wikicode]Le type string 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 des single 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 :
- \n : line feed, saut de ligne Unix
- \r : carriage return, saut de ligne Mac OS classique
- \t : tabulation
- \\ : backslash
- \' ou \" : un guillemet si la chaĂźne commence par ce caractĂšre
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 :
- \xHH : HH est le code hexadécimal du caractÚre dans l'encodage courant
- \uHHHH : HHHH est le code hexadécimal du caractÚre dans le tableau Unicode. Il ne peut y avoir moins de 4 chiffres aprÚs la séquence \u.
boolean
[modifier | modifier le wikicode]Une variable de type boolean accepte deux valeurs : vrai et faux.
b = true;
alert(typeof b); // Affiche "boolean"
c = (5 == 3); // est faux, mais l'expression est booléenne.
alert(typeof c); // Affiche "boolean"
Dans une comparaison, les valeurs suivantes sont équivalentes (opérateur ==) à false :
- 0 : le nombre zéro et ses variations, du style 0.000, 0x0, 0e12, etc.
- "" : la chaĂźne vide
- "0" : la chaßne contenant le nombre zéro, et toutes ses variations, comme pour le nombre
- [] ou new Array() : un tableau vide, et en fait tout objet dont la conversion en chaĂźne est l'une des valeurs ci-dessus
Par ailleurs, les valeurs suivantes donnent false si on les convertit (explicitement ou pas) en booléen, bien qu'elle ne soient pas toutes équivalentes par comparaison :
- 0 et ses variations
- ""
- null
- NaN
- undefined
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Ă©en false.
Cela peut sembler surprenant et illogique à premiÚre vue (et source de quelques bugs) mais il faut comprendre l'origine de ces différences :
- les valeurs null, NaN et undefined refusent simplement d'ĂȘtre Ă©quivalentes Ă n'importe quoi sauf elles-mĂȘmes. Donc l'opĂ©rateur == retournera systĂ©matiquement false si une des opĂ©randes est null, NaN ou undefined et que l'autre n'est pas strictement identique. Cependant, Ă choisir entre vrai ou faux (lors d'une conversion en Boolean, il n'y a pas d'autre choix), ces valeurs sont plutĂŽt false.
- les chaßnes "0" et ses variantes sont... des chaßnes, et false est un booléen. JavaScript ne peut pas comparer directement deux types différents. Il pourrait convertir la chaßne en booléen, mais préfÚre convertir les deux en number (le type number est plus "fort"). Le résultat est 0 == 0 la comparaison est donc vraie. Cependant, "0" reste une chaßne non-vide, et si on la convertir en booléen, on obtient true.
- la chaĂźne "false" est aussi une chaĂźne, mais ne peut pas ĂȘtre convertie en number. JavaScript, en dernier recours, convertit alors l'autre opĂ©rande en string et se retrouve Ă comparer "false"=="false", ce qui est vrai. Par contre, comme pour "0", la chaĂźne n'est pas vide et sa conversion en boolĂ©en donne true.
- le tableau vide [] est un tableau, donc JavaScript le convertit en chaßne pour le comparer à false. Or, la méthode toString() d'un tableau retourne la fusion de tous les éléments, séparés par des virgules. Comme il n'y a aucun élément dans le tableau, le résultat est la chaßne vide "", qui est équivalente à false. Par contre, un tableau est de type objet et sa conversion en booléen donne true.
Une valeur qui n'est pas Ă©quivalente Ă false ne sera pas pour autant Ă©quivalente Ă true par comparaison, Ă commencer par null, NaN et undefined mais aussi toute valeur qui n'est pas Ă©quivalente Ă l'une des conversions possibles de true (la chaĂźne "true", la chaĂźne ou le nombre 1). Par contre, toutes les valeurs qui ne donnent pas false par conversion en boolean donnent true, sans exception.
Attention, les valeurs de type object, y compris les instances des classes String, Number et Boolean crĂ©Ă©es avec le constructeur new sont toujours converties en true, mĂȘme lorsque leur valeur est "", 0 ou false (la seule exception est null qui est de type object et dont la conversion en boolĂ©en est false). Cependant la comparaison avec false fonctionne de la mĂȘme façon qu'avec des valeurs littĂ©rales.
object
[modifier | modifier le wikicode]Une variable de type object 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 type object 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 type object.
- implicitement par l'expression littérale d'une valeur non-scalaire (valable uniquement quand une expression littérale existe pour la "classe" voulue)
- explicitement avec new et le constructeur (valable pour toutes les "classes" sauf les objet du DOM)
- indirectement pour les objets du DOM (et on ne peut pas utiliser new avec eux)
L'instanciation explicite d'un objet grùce à un constructeur s'effectue avec l'opérateur new.
t = new Array();
alert(typeof t) // 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 type object 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 de new, sont néanmoins strictement identiques à leur équivalent produit par l'appel d'un constructeur. Par exemple :
// valeur scalaire vs. objet
"chaĂźne" !== new String("chaĂźne")
2.34 !== new Number(2.34)
// objet vs. objet... c'est pareil !
["a", "b", "c"] === new Array("a", "b", "c")
/(\w+) ?\(/i === new RegExp("(\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 que Date, et on peut dĂ©finir un constructeur soi-mĂȘme. Pour plus de dĂ©tails, voir le chapitre consacrĂ© aux objets.
function
[modifier | modifier le wikicode]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 :
- une fonction peut ĂȘtre nommĂ©e, par un identifiant autre que le nom de la variable qui la rĂ©fĂ©rence
- une fonction peut ĂȘtre invoquĂ©e
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 au type "function".
Contrairement aux autres types, le type "function" n'a pas de valeur spéciale (telle que NaN pour "number" ou null 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.
function fibonacci( n )
{
if(isNaN(n) || n<0)
return undefined
n=Math.floor(n)
var u = 1, v = 0
while(n--)
u = v + (v = u)
return v
}
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 = fibonacci
delete fibonacci // efface seulement la variable, pas la fonction, qui est toujours référencée par f
x = f(10); // Constitue l'appel de la fonction fibonacci, en lui passant un argument
alert(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érateur new 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.
Opérateurs
Les opérateurs JavaScript reprennent la plupart des opérateurs du langage C.
Affectation (= et ses dérivés)
[modifier | modifier le wikicode]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 pas true ou false, 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 (comme Math.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 syntaxe 2 + a = "valeur" // erreur car l'addition est évaluée en premier et son résultat n'est pas une variable 2 + (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 par ma_var += 2
ma_var = ma_var / 2 peut s'Ă©crire ma_var /= 2
ma_var = ma_var << 2 peut s'Ă©crire ma_var <<= 2
ma_var = ma_var ^ 1 peut s'Ă©crire ma_var ^= 1
et ainsi de suite.
Concaténation (+)
[modifier | modifier le wikicode]Surchargé avec l'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 type string.
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 de null). 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 nombre n = 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"
Opérateurs arithmétiques
[modifier | modifier le wikicode]Addition (+)
[modifier | modifier le wikicode]En présence de deux opérandes de type number ou boolean, d'objets construits avec new Number, de l'objet null, ou de la valeur undefined, 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 type number :
Exemple :
3 + 1donne4
Dans le cas limite Infinity + -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 un opé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
Soustraction (-)
[modifier | modifier le wikicode]Retourne la différence arithmétique entre deux valeurs de type number 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 renvoie NaN (Not a Number). Dans le cas limite Infinity-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).
Multiplication (*)
[modifier | modifier le wikicode]Retourne le produit arithmétique de deux valeurs de type number 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 renvoie NaN (Not a Number).
Dans le cas limite Infinity*0, le résultat est également NaN.
Division (/)
[modifier | modifier le wikicode]L'opérateur de division permet d'effectuer la division de deux entités de type number 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 renvoie NaN (Not a Number). Dans les cas limite Infinity/Infinity et 0/0, le résultat est également NaN.
à noter : la division d'un autre nombre par zéro est possible et retourne le nombre Infinity 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.
Modulo (%)
[modifier | modifier le wikicode]L'opérateur '%' permet d'effectuer l'opération mathématique modulo
Il retourne l'opérande de gauche modulo l'opérande de droite, et les deux opérandes sont d'abord converties en number 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 renvoie NaN (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 javascript:. Pour éviter ce problÚme, mettez l'opérande de droite entre parenthÚses ou bien séparez-la de l'opérateur par un espace.
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'expression 0xF0000000000003FF == 0xF000000000000000 retourne true car seuls les 54 bits de poids forts sont stockés.
Opérateurs logiques
[modifier | modifier le wikicode]ET (&&)
[modifier | modifier le wikicode]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éralement pas un booléen et && n'est pas strictement commutatif :
"chaßne" && 25 // retourne 25 25 && "chaßne" // retourne "chaßne" NaN && new Date() // retourne NaN et ne crée pas d'objet Date new Date() && NaN // retourne NaN aprÚs avoir créé un objet Date null && "" // 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 C
Mais 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 droite requiert que l'opĂ©rande de gauche soit vraie pour ĂȘtre Ă©valuĂ©e et retournĂ©e.
OU (||)
[modifier | modifier le wikicode]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éralement pas un booléen et || n'est pas strictement commutatif :
"chaĂźne" || 25 // retourne "chaĂźne" 25 || "chaĂźne" // retourne 25 NaN || new Date() // retourne new Date() new Date() || NaN // retourne new Date() null || "" // retourne "" "" || null // retourne null close() || new Date() // ferme la fenĂȘtre new 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 C
Mais 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 valeur par 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.
NON (!)
[modifier | modifier le wikicode]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
Opérateurs de bits
[modifier | modifier le wikicode]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 en number si c'était nécessaire. Les nombres NaN et Infinity donnent le nombre entier zé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 :
var n = 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).
Et binaire (&)
[modifier | modifier le wikicode]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 = c 0 0 0 0 1 0 1 0 0 1 1 1
Ou binaire (|)
[modifier | modifier le wikicode]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 = c 0 0 0 0 1 1 1 0 1 1 1 1
Ou exclusif binaire (^)
[modifier | modifier le wikicode]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 = c 0 0 0 0 1 1 1 0 1 1 1 0
Non binaire (~)
[modifier | modifier le wikicode]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
DĂ©calage de bits vers la gauche (<<)
[modifier | modifier le wikicode]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 :
var c = 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.
DĂ©calage de bits vers la droite (>>)
[modifier | modifier le wikicode]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 :
var c = 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é.
DĂ©calage de bits vers la droite y compris le bit de signe (>>>)
[modifier | modifier le wikicode]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 :
var c = -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.
Opérateurs de comparaison
[modifier | modifier le wikicode]ĂgalitĂ© (==, ===)
[modifier | modifier le wikicode]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 :
undefinedest seulement Ă©quivalent, mais pas identique, Ănull.- La chaĂźne vide
""est équivalente au nombre zéro, au booléenfalse, et à une liste vide[]. - Tous les nombres sont équivalents à leurs représentations sous forme de chaßne.
- Le nombre
1est, de plus, équivalent au booléentrue. - Par contre le nombre
NaNn'est pas Ă©quivalent Ă la chaĂźne"NaN".
Ces Ă©quivalences sont commutatives.
Inégalité (!=, !==)
[modifier | modifier le wikicode]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)
Ordre (<, <=, >=, >)
[modifier | modifier le wikicode]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 types number ou boolean, object construit par new Number, ou les valeurs null ou undefined (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.
Opérateurs d'incrémentation et décrémentation (++ --)
[modifier | modifier le wikicode]Ces deux opérateurs proposent un moyen simple d'incrémenter ou décrémenter une variable de type number. 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 1
a--;
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 :
- En langage C cette instruction peut ĂȘtre utilisĂ©e car une chaĂźne de caractĂšres en C est un pointeur, donc fondamentalement un nombre entier. Ce n'est pas le cas en JavaScript.
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 :
- Lorsque l'opérateur est placé à droite, l'opération retourne d'abord la valeur de départ de la variable puis l'incrémente (Post-incrémentation);
- Lorsque l'opérateur est à gauche, l'opération incrémente d'abord la variable puis retourne sa valeur modifiée (Pré-incrémentation).
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
Opérateurs spéciaux
[modifier | modifier le wikicode]Conditionnel (? :)
[modifier | modifier le wikicode]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 donne true), 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 = A
else
resultat = B
Instanciation (new)
[modifier | modifier le wikicode]L'opérateur new 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 (le constructeur) peut prendre des arguments. Le résultat de l'opération est l'objet ainsi créé, sauf si le constructeur retourne autre chose.
maintenant = new Date() // crée un objet avec la fonction prédéfinie Date
function Livre( nom, auteur ) // définition d'un constructeur
{
this.nom = nom
this.auteur = auteur || "personne" // définit une valeur par défaut si auteur est undefined, null, false, 0 ou ''
}
hp = new Livre( "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 = new Date // 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éclaration function :
o = Date
maintenant = new o() // 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.
Dé-référencement (delete)
[modifier | modifier le wikicode]L'opérateur delete 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 = 3
b = ["une", "liste"]
c = { prop: "valeur" }
delete a // a n'existe plus, ni sa valeur
delete b // supprime la propriĂ©tĂ© b ; la liste elle-mĂȘme sera libĂ©rĂ©e car elle n'a plus aucune rĂ©fĂ©rence
delete c.prop
alert("prop" in c) // affiche false
Note : seul l'opérateur delete efface la propriété. Affecter null ou undefined à 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 = new Date()
c = { prop: "valeur" }
a = undefined
alert(a) // affiche "undefined"
delete a
alert(a) // erreur !
c.prop = undefined
alert("prop" in c) // affiche true
delete c.prop
alert("prop" in c) // 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 avec var ni les arguments d'une fonction, ni les variables NaN et undefined. Dans les cas oĂč la variable ne peut pas ĂȘtre supprimĂ©e, l'opĂ©ration retourne false. delete accepte aussi des propriĂ©tĂ©s inexistantes, et des valeurs anonymes (dans ce cas, il n'a aucun effet).
a = "valeur"
var b = "valeur"
delete a // true
delete b // false, et b n'est pas détruit
delete 17 // true, totalement inutile, et on peut toujours utiliser le nombre 17
delete Math.PI // false, c'est une propriété en lecture seule
delete Math // true, et c'est dommage parce qu'on ne peut plus accéder à l'objet Math !
Propriété d'un objet (.)
[modifier | modifier le wikicode]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 de null.
window . document . URL // affiche la propriété "URL" de l'objet référencé par la propriété "document" de l'objet window
Math . sin( 1.5 ) // appelle la méthode référencée par la propriété "sin" de l'objet Math
new Date() . 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 est undefined ou null, 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.
Propriété d'un objet existant (?.)
[modifier | modifier le wikicode]Idem sur "." mais sans erreur (TypeError) si l'objet n'existe pas.
Valeur d'une variable inexistante (??)
[modifier | modifier le wikicode]Définit une valeur par défaut si une variable est null ou undefined.
Type de variable (typeof)
[modifier | modifier le wikicode]L'opérateur typeof 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((typeof arg) != "number")
alert("arg n'est pas un nombre !")
Type d'objet (instanceof)
[modifier | modifier le wikicode]L'opĂ©rateur instanceof 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 de instanceof 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 que instanceof retourne true.
new Date() instanceof Date // true
new Date() instanceof Object // true
new Date() instanceof Array // false
[2,7,8] instanceof Array // true
instanceof retourne toujours false 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.
Appartenance Ă une liste (in)
[modifier | modifier le wikicode]L'opĂ©rateur in 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 de null, 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] existe
alert("bleu" in liste) // affiche false car "bleu" est la valeur de liste[2] mais pas une clé de la liste
alert("length" in liste) // affiche true car liste est un Array qui possÚde une propriété length
alert("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 Object
On voit que in 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Ă©thode hasOwnProperty(name) :
alert(perso.hasOwnProperty("nom")) // true
alert(perso.hasOwnProperty("toString")) // false
Dans le contexte de la structure de contrÎle for... in, l'opérateur in joue un rÎle un peu différent.
Juxtaposition (,)
[modifier | modifier le wikicode]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 boucles for, 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éthode alert mais elle n'affiche que le premier.
Opérateur variadique (...)
[modifier | modifier le wikicode]RĂ©cupĂšre tous les paramĂštres de l'appel d'une fonction dans un seul argument de sa signature.
Opérateur de déclaration privée (#)
[modifier | modifier le wikicode]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é;
}
Structures de contrĂŽle
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.
Ătablissement d'une expression logique
[modifier | modifier le wikicode]L'usage de if, while et do 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 :
- (5 == 5) est bizarre mais vrai
- (true) La constante true est toujours vraie
- (false) La constante false est toujours fausse
- (var_bool) Si var_bool est vrai, l'expression est vraie
- (!var_bool)Si var_bool est vrai, l'expression est fausse
- (var_bool==false) Si var_bool est faux, l'expression est vraie (et oui...)
Avec des variables numériques ou des variables chaßnes, le principe est similaire :
- (ma_var_num == 5)
- (ma_chaine == "foo")
De mĂȘme avec les opĂ©rateurs de comparaison :
- (ma_var > 0) ma_var non nulle
- (ma_var <= 5) inférieure ou égale à 5
- (ma_chaine != "bar") le contenu de ma_chaine différent de "bar"
etc..
à l'étape suivante, on peut combiner des expressions logiques avec des opérateurs logiques ET ( && ) et OU (||).
- ((ma_var==5)&&(ma_chaine=="bar")) RĂ©aliser les deux conditions
- ((ma_var==5)||(ma_chaĂźne=="bar")) RĂ©aliser l'une des conditions
- ((ma_var==5)&&(ma_chaine=="bar")||(!var_bool))
... 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.
Le piĂšge
[modifier | modifier le wikicode]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. Voir la section sur l'opĂ©rateur =.
Branchement conditionnel
[modifier | modifier le wikicode]if else
[modifier | modifier le wikicode]La structure de contrÎle if permet de subordonner l'exécution d'une ligne ou d'un bloc d'instructions à l'évaluation (vrai) d'une expression logique.
La syntaxe est :
if (condition_vrai) // Exécution d'une ligne d'instructions
alert("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");
else
alert("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");
}
? :
[modifier | modifier le wikicode]Cet opérateur est remarquable par sa concision et peut se substituer à la structure if⊠else. Il est expliqué en détails sur 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.
switch
[modifier | modifier le wikicode]Le mot réservé switch permet en conjonction avec case 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 structure switch case ne pourrait pas fonctionner correctement sans break.
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 les case rencontrés.
Enfin, le mot réservé default couvre les cas différents de ceux traités par les case.
switch(ma_var)
{
var egal_deux = 2;
case 1 :
alert("Ma variable vaut 1");
break;
case egal_deux :
alert("Ma variable vaut 2");
break;
default : alert("Ma variable vaut autre chose que 1 ou 2");
}
On remarque les break 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)
{
case 0:
alert("Vraiment nulle, cette variable"); // Elle vaut zero
break;
case 1:
case 3: alert("Ma variable vaut 1 ou 3"); // Et on continue
case 5:
alert("Ma variable est impaire et comprise entre 1 et 5");
break;
case 2:
case 4:
case 6:
alert("Ma variable est paire et comprise entre 2 et 6");
break;
case 7:
alert("Ma variable est Ă©gale Ă 7");
break;
default: alert("Ma variable est négative ou supérieure à 7")
}
On remarquera l'utilisation des break pour regrouper des cas entre eux...
ContrÎle d'itération (boucles)
[modifier | modifier le wikicode]JavaScript implĂ©mente les mĂȘmes structures de contrĂŽle d'itĂ©ration que le langage c, Ă savoir les boucles for, while et do.
Avant de les examiner, nous allons regarder l'usage de continue et break appliqué aux boucles.
Utilisation de continue
[modifier | modifier le wikicode]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 (var i=-2; i <= 2; i++)
{
if (i==0)
continue;
alert(i); // Affiche -2, puis -1, 1 et 2... mais pas le zero.
}
Cette fonctionnalité de continue est aussi applicable aux boucles while et do.
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'instruction continue.
Utilisation de break
[modifier | modifier le wikicode]Les boucle for, while et do autorisent l'usage de break 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 que continue, 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'instruction break.
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');
return false;
}
});
});
Ătiquettes
[modifier | modifier le wikicode]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 a pas d'instruction goto en JavaScript. Les Ă©tiquettes servent exclusivement Ă affiner l'utilisation de break et continue (voir plus haut).
str = "Liste des objets :\n"
annuler = false
parcoursListe : for(i in liste)
{
if(!liste.hasOwnProperty(i))
continue // passe à l'itération suivante dans cette boucle
str+="\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(j in liste[i])
{
if(!liste[i].hasOwnProperty(j))
continue // passe à l'itération suivante dans cette boucle
if(annuler)
{
str+="\nopération annulée."
break parcoursListe // reprend l'exécution immédiatement aprÚs la boucle extérieure
}
str+="- "+j+" = "+liste[i][j]+"\n"
}
}
for
[modifier | modifier le wikicode]Description
[modifier | modifier le wikicode]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;
ou
for (modalités){action1; action2;}
Par modalités, nous regroupons en fait trois choses distinctes qui sont:
- l'initialisation
- La condition pour exécuter la boucle
- Les changements à effectuer à chaque tour (généralement une incrémentation ou décrémentation).
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 lettre i.
Boucle croissante
[modifier | modifier le wikicode]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.
Boucle Ă paliers
[modifier | modifier le wikicode]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 + "est un nombre pair compris entre 4 et 10); // affiche 4, puis 6, 8 et 10
Boucle décroissante
[modifier | modifier le wikicode]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
Ătat en sortie de boucle
[modifier | modifier le wikicode]En sortie de boucle, i contient la valeur résultante des modifications. Pour le dernier exemple, c'est -1.
Boucle de parcours
[modifier | modifier le wikicode]Grùce à l'opérateur in il est possible d'utiliser une forme spéciale de la boucle for pour parcourir un tableau ou une table associative (clé -> valeur) par ses indices/clés :
var tableau = [ "une", "boucle for", "spéciale" ];
for (var i in tableau)
alert(tableau[i]); // affiche successivement tous les éléments du tableau
// i valant successivement : 0, 1, 2
var table = { "yes":"oui" , "no":"non" , "maybe":"peut-ĂȘtre" };
for (var i in table)
alert(table[i]); // affiche successivement "oui", "non", "peut-ĂȘtre"
// i valant successivement : "yes", "no", "maybe"
Clés et valeurs
[modifier | modifier le wikicode]var table = { "yes":"oui" , "no":"non" };
for (const [key, value] of Object.entries(table)) {
console.log(key, value);
}
ou :
var table = { "yes":"oui" , "no":"non" };
table.forEach(function callback(key, value) {
console.log(`${key}: ${value}`);
});
Ăviter les piĂšges :
[modifier | modifier le wikicode]Boucle infinie
[modifier | modifier le wikicode]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...
Variable modifiée
[modifier | modifier le wikicode]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 (var i=0; ....
while
[modifier | modifier le wikicode]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;
ou
while (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.
var i = 0; // Initialiser i
while (i<5) // Tant que i est strictement inférieur à cinq
i++; // ... 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.
do
[modifier | modifier le wikicode]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.
do
action
while (condition)
var i = 0;
do
{
i++
}
while(i < 5);
Exceptions et erreurs
try / catch / finally
[modifier | modifier le wikicode]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.
Exemples
[modifier | modifier le wikicode]Appel réseau :
try {
call_network()
} catch (error) {
print_retry_later_message()
} finally {
log()
}
Calcul d'une moyenne :
"use strict";
const x = 15;
let average;
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 bloc catch puis le finally.
Si on corrige la division, on constate qu'on ne passe plus dans le bloc catch, mais toujours dans le finally (mĂȘme si les blocs qui le prĂ©cĂšdent contiennent un return).
throw
[modifier | modifier le wikicode]Il est aussi possible de provoquer soi-mĂȘme des exceptions pour interrompre une exĂ©cution.
Exemples
[modifier | modifier le wikicode]Calcul d'une moyenne :
"use strict";
const x = 15;
let average;
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 renvoie Infinity. On la provoque donc explicitement ensuite.
Calcul d'un Ăąge :
"use strict";
const answer = prompt("How old are you?");
const age = Number(answer);
if (isNaN(age)) {
throw answer + " cannot be converted to a number.";
}
alert("Next year you will be " + (age + 1));
Fonctions utilisateur
DĂ©claration et identification
[modifier | modifier le wikicode]Dans tous les cas (sauf deux), la fonction nĂ©cessite un Identificateur Ă©tabli avec les mĂȘmes rĂšgles que pour les variables.
Pour déclarer une fonction, on emploie la syntaxe suivante:
function ma_fonction()
C'est à dire, utilisation du mot réservé function suivi de l'identificateur et de parenthÚses. Ces derniÚres serviront à définir les paramÚtres de la fonction.
Fonction sans paramĂštres
[modifier | modifier le wikicode]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)...
}
Transmission de paramĂštres
[modifier | modifier le wikicode]Transmission classique
[modifier | modifier le wikicode]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);
}
Autre mode de paramétrage
[modifier | modifier le wikicode]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 tableau arguments 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 "
Valeur renvoyée
[modifier | modifier le wikicode]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.
return vide
[modifier | modifier le wikicode]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.
Corps de la fonction
[modifier | modifier le wikicode]Variables
[modifier | modifier le wikicode]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;
}
Sous-fonction
[modifier | modifier le wikicode]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);
}
Appel de la fonction
[modifier | modifier le wikicode]Nous pouvons admettre quatre modĂšles de fonction :
Avec ou sans paramĂštres, avec ou sans valeur de retour.
Sans valeur de retour
[modifier | modifier le wikicode]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()">
Avec valeur de retour
[modifier | modifier le wikicode]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 variable
alert("Cube de 3 : " + cube(3)); // Affiche "Cube de 3 : 27" (concaténation)
cube(3); // Appel sourd de la fonction, on ignore le résultat
Sans paramĂštre
[modifier | modifier le wikicode]Les 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... */);
Avec paramĂštre
[modifier | modifier le wikicode]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éenne
Que deviennent les variables envoyées
[modifier | modifier le wikicode]Les variables envoyées en paramÚtre d'une fonction subissent ou ne subissent pas de modifications selon leur nature:
Primitives
[modifier | modifier le wikicode]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ération
Instance d'un objet
[modifier | modifier le wikicode]Il 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'objet
Fonction sans identificateur
[modifier | modifier le wikicode]Une 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.
var superieur = function(a,b){
return a>b;
};
if (superieur(5,4)) alert("5 > 4");
function affiche(objet, f_tostring)
{
alert( f_tostring(objet) );
}
var personne = { "nom":"clinton", "prenom":"bill" };
affiche(personne, function(o){
return o.prenom + " " + o.nom;
}
);
Notation fléchée
[modifier | modifier le wikicode]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
} );
Références
[modifier | modifier le wikicode]- â Parmi les navigateurs supportant cette syntaxe : Chrome 45, Edge 12, Firefox 22, Safari 10 et Opera 32 selon https://www.w3schools.com/js/js_arrow_function.asp
ĂvĂšnement
Les événements JavaScript permettent d'intercepter les changements d'états de l'environnement provoqués par le document HTML, les scripts ou l'interaction du client.
L'objet Event
[modifier | modifier le wikicode]Lorsqu'un Ă©vĂ©nement survient, un objet Event permettant de le dĂ©crire est crĂ©Ă©. Il se propage alors dans l'arbre DOM selon trois phases dĂ©terminĂ©es par la cible (l'objet depuis lequel lâĂ©vĂ©nement est interceptĂ©) :
- Capture : l'événement se propage de la racine du document (incluse) à la cible (exclue).
- Cible : l'événement atteint la cible.
- Bouillonnement : l'événement se propage dans le sens inverse : de la cible (exclue) à la racine du document (incluse).
Cet objet a été défini par le W3C, mais malheureusement Internet Explorer en a sa propre définition ce qui oblige le développeur à tenir compte du navigateur.
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.
type
[modifier | modifier le wikicode]Identique sous Internet Explorer.
Renvoie le type dâĂ©vĂ©nement (onkeydown, onload...).
target
[modifier | modifier le wikicode]Ă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Ă©.
currentTarget
[modifier | modifier le wikicode]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.
stopPropagation
[modifier | modifier le wikicode]Ăquivalent Internet Explorer : l'attribut cancelBubble.
Cette mĂ©thode arrĂȘte la propagation de l'Ă©vĂ©nement dans l'arbre DOM 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.
preventDefault
[modifier | modifier le wikicode]Ăquivalent Internet Explorer : l'attribut event.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.
Gestionnaires dâĂ©vĂ©nements DOM-0
[modifier | modifier le wikicode]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>
<INPUT type="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>
<INPUT type="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ée
document.onkeydown = function(event)
{
//Internet Explorer ne prend pas d'objet Event en paramĂštre, il faut donc aller le chercher dans l'objet window
if (typeof event == "undefined" ) event = window.event;
}
Ăcouteurs d'Ă©vĂ©nements
[modifier | modifier le wikicode]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.
addEventListener
[modifier | modifier le wikicode]Ăquivalent Internet Explorer : attachEvent;
Cette méthode crée un écouteur pour un objet HTML. Il prend trois paramÚtres :
- type : le type dâĂ©vĂ©nement. Le suffixe "on" n'est requis que pour Internet Explorer.
- EventListener : la fonction appelĂ©e lors de lâĂ©vĂ©nement.
- useCapture : true pour la phase de capture et false pour celles de la cible et du bouillonnement. Ce paramĂštre n'est pas disponible sous Internet Explorer qui ne traite que la cible et le bouillonnement.
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.
function clickMe(event)
{
//this.id renvoie "undefined" : this n'est pas reconnu ici
alert("Type : "+event.type+"\nCible courante : "+this.id);
if(navigator.appName == "Microsoft Internet Explorer")
{
//Ne fonctionne pas : this n'est pas reconnu ici
this.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);
}
removeEventListener
[modifier | modifier le wikicode]Ă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).
ĂvĂ©nements
[modifier | modifier le wikicode]onabort
[modifier | modifier le wikicode]En cas d'interruption de chargement d'une image.
Objets concernés : Image.
onblur
[modifier | modifier le wikicode]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.
onchange
[modifier | modifier le wikicode]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);
onclick
[modifier | modifier le wikicode]Lors d'un clique de souris sur l'objet.
Objets concernés : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
ondblclick
[modifier | modifier le wikicode]Lors d'un double clique de souris sur l'objet.
Objets concernés : Button, document, Checkbox, Link, Radio, Reset, Select et Submit.
onerror
[modifier | modifier le wikicode]Survient lors d'une erreur de chargement.
Objets concernés : Image et window.
onfocus
[modifier | modifier le wikicode]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.
onkeydown
[modifier | modifier le wikicode]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 navigateur
if(navigator.appName === "Microsoft Internet Explorer")
{
//On envoie un message avec la touche appuyée pour Internet Explorer
alert(event.keyCode);
}
else
{
//On envoie un message avec la touche appuyée pour Netscape
alert(event.which);
}
}
Objets concernés : document, Image, Input (type=file, password ou text), Link et TextArea.
onkeypress
[modifier | modifier le wikicode]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.
onkeyup
[modifier | modifier le wikicode]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.
onload
[modifier | modifier le wikicode]Lors du chargement de la page HTML, d'une frame ou d'une image.
Objets concernés : Image, Layer et window.
onunload
[modifier | modifier le wikicode]En quittant le fichier. L'objet Event ne subit pas la phase de bouillonnement avec onunload.
Objet concerné : window.
onmousedown
[modifier | modifier le wikicode]En maintenant une touche de la souris appuyée.
Les attributs de Event pour la souris sont les suivants :
- pageX (Netscape) ou x (Internet Explorer) : position horizontale de la souris. Sous Netscape, le défilement du document n'est pas pris en compte.
- pageY (Netscape) ou y (Internet Explorer) : position horizontale de la souris. Sous Netscape, le défilement du document n'est pas pris en compte.
- which (Netscape) ou button (Internet Explorer) : bouton de la souris enfoncé, relùché ou maintenu. Avec which, le clique gauche renvoie 1, le milieu renvoie 2 et le droit renvoie 3. Avec button (sous Internet Explorer), le clique gauche renvoie 0, le milieu renvoie 4 et le droit renvoie 2.
document.onmousedown = function(event)
{
//Netscape
if(navigator.appName != "Microsoft Internet Explorer")
{
alert(event.pageX+" - "+event.which);
}
//Internet Explorer
else
{
alert(window.event.x+" - "+window.event.button);
}
}
Objets concernés : Button, document et Link.
onmouseup
[modifier | modifier le wikicode]En relĂąchant une touche de la souris. Pour les attributs de Event voir onmousedown.
Objets concernés : Button, document et Link.
onmousemove
[modifier | modifier le wikicode]En bougeant la souris. Pour les attributs de Event voir onmousedown.
Objets concernés : window et document
onmouseout
[modifier | modifier le wikicode]En quittant l'élément avec la souris.
Objets concernés : Area, Layer et Link. Pour les attributs de Event voir onmousedown.
onmouseover
[modifier | modifier le wikicode]En passant sur l'élément avec la souris.
Objets concernés : Area, Layer et Link. Pour les attributs de Event voir onmousedown.
onselect
[modifier | modifier le wikicode]En sélectionnant du texte.
Objets concernés : text et Textarea.
onreset
[modifier | modifier le wikicode]Lors de l'initialisation du formulaire.
Objet concerné : form.
onsubmit
[modifier | modifier le wikicode]En envoyant le formulaire
Objets concernés : form
onresize
[modifier | modifier le wikicode]Lors du redimensionnement du fichier.
Objet concerné : window.
onmove
[modifier | modifier le wikicode]Lors du déplacement du fichier.
Objet concerné : window.
dragdrop
[modifier | modifier le wikicode]Lors d'un glisser-dĂ©poser vers la fenĂȘtre.
Objet concerné : window.
javascript
[modifier | modifier le wikicode]Lorsqu'un lien est activé.
Objets concernés : Link
Objets prédéfinis
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.
- Les valeurs littérales de type chaßne, nombre, booléen, etc instancient implicitement un objet
String,Number,Boolean... - Certains objets comme Date se construisent explicitement avec
new. - Souvent, le constructeur permet de crĂ©er une instance mĂȘme en oubliant le mot-clĂ©
new. - Des objets comme Math sont purement statiques et n'ont aucune instance.
- Les objets spécifiques au DOM,
navigatorouwindowpar 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.
Références/Objets/window
Cette objet reprĂ©sente une fenĂȘtre de navigateur[1].
Propriétés
[modifier | modifier le wikicode]- closed
- fenĂȘtre fermĂ©e
- defaultStatus
- affichage normal dans la barre d'Ă©tat
- innerHeight
- hauteur du domaine d'affichage
- innerWidth
- largeur du domaine d'affichage
- locationbar
- barre d'adresse
- menubar
- barre de menus
- name
- nom de fenĂȘtre
- outerHeight
- hauteur de la fenĂȘtre globale
- outerWidth
- largeur de la fenĂȘtre globale
- pageXOffset
- position de dĂ©part de la fenĂȘtre Ă partir de la gauche
- pageYOffset
- position de dĂ©part de la fenĂȘtre Ă partir du haut
- personalbar
- barre pour les adresses favorites
- scrollbars
- barres de défilement
- statusbar
- barre d'Ă©tat
- status
- Contenu de la barre d'Ă©tat
- toolbar
- barre d'outils
MĂ©thodes
[modifier | modifier le wikicode]- alert()
- boite de dialogue avec infos
- back()
- page précédente
- blur()
- quitter la fenĂȘtre
- captureEvents()
- surveiller les événements
- clearInterval()
- interrompre la suite d'instructions sans fin
- clearTimeout()
- interrompre le compte Ă rebours
- close()
- fermer la fenĂȘtre
- confirm()
- boite de dialogue pour confirmer
- disableExternalCapture()
- empĂȘcher une surveillance extĂ©rieure
- enableExternalCapture()
- permettre une surveillance extérieure
- find()
- chercher du texte
- focus()
- activer la fenĂȘtre
- forward()
- page suivante
- handleEvent()
- renvoyer l'événement
- home()
- appeler la page d'accueil
- moveBy()
- se mouvoir avec des mentions relatives
- moveTo()
- se mouvoir avec des mentions absolues
- open()
- ouvrir une nouvelle fenĂȘtre
- print()
- imprimer
- prompt()
- fenĂȘtre de dialogue pour la saisie de valeur
- releaseEvents()
- fermer un événement
- resizeBy()
- modifier la taille avec des mentions relatives
- resizeTo()
- modifier la taille avec des mentions absolues
- routeEvent()
- parcourir la hiérarchie des gestionnaires d'événement
- scrollBy()
- défiler un certain nombre de pixels
- scrollTo()
- défiler jusqu'à la position
- setInterval()
- établir une liste d'instructions planifiées
- setTimeout()
- entamer le compte Ă rebours
- stop()
- interrompre
Références
[modifier | modifier le wikicode]
Références/Objets/document
L'objet document permet d'interagir avec le document présenté (page web).
Propriétés
[modifier | modifier le wikicode]- alinkColor
- couleur des liens lorsqu'ils sont cliqués.
- bgColor
- couleur d'arriĂšre plan.
- charset
- jeu de caractÚres utilisé.
- cookie
- chaĂźne de caractĂšres pouvant ĂȘtre sauvegardĂ©e chez l'utilisateur.
- defaultCharset
- jeu de caractÚres par défaut.
- fgColor
- couleur pour le texte.
- lastModified
- date de derniĂšre modification du document.
- linkColor
- couleur pour les liens.
- referrer
- page précédente dans l'historique.
- title
- titre du document.
- URL
- adresse URL du document.
- vlinkColor
- couleur pour les liens déjà visités.
MĂ©thodes
[modifier | modifier le wikicode]- captureEvents()
- capturer les événements.
- close()
- fermer le document.
- createAttribute()
- crĂ©er un nĆud d'attribut.
- createElement()
- crĂ©er un nĆud d'Ă©lĂ©ment.
- createTextNode()
- crĂ©er un nĆud de texte.
- getElementById()
- AccÚs à l'élément HTML par l'attribut Id.
- getElementsByName()
- AccÚs à l'élément HTML par l'attribut name.
- getElementsByTagName()
- AccÚs à l'élément HTML par liste d'éléments.
- getSelection()
- Obtenir une structure objet d'information sur la sélection courante.
- handleEvent()
- traiter les événements.
- open()
- Ouvrir un autre document.
- querySelector()
- Obtenir le premier élément correspondant au sélecteur CSS spécifié, ou
undefinedsi aucun trouvé. - querySelectorAll()
- Obtenir un tableau de tous les éléments correspondant au sélecteur CSS spécifié.
- releaseEvents()
- fermer des événements.
- routeEvent()
- Parcourir la hiérarchie des gestionnaires d'événement.
- write()
- Ăcrire dans le document.
- writeln()
- Ăcrire une ligne dans le document.
Références/Objets/navigator
Propriétés
[modifier | modifier le wikicode]- appCodeName
- Surnom du navigateur.
- appName
- Nom officiel du navigateur.
- appVersion
- version du navigateur.
- clipboard
- Presse-papier.
- cookieEnabled
- Cookies permis.
- language
- Langue du navigateur.
- languages
- Langues du navigateur disponibles.
- onLine
- Ătat de la connexion :
trueen ligne,falsehors ligne. - pdfViewerEnabled
- Ătat d'activation du visualiseur de fichiers PDF.
- platform
- Plate-forme sur laquelle tourne le navigateur.
- product
- Nom de produit associé au navigateur.
- userAgent
- Identification HTTP du navigateur.
MĂ©thodes
[modifier | modifier le wikicode]- javaEnabled()
- Vérifier la disponibilité Java.
Références/Objets/Array
Caractéristiques
[modifier | modifier le wikicode]- Les tableaux de type Array sont dynamiques. Il n'est pas nécessaire de les dimensionner à l'avance, et leurs taille peut croßtre ou décroßtre en fonction du nombre d'éléments contenus. La propriété length contient le plus grand indice entier positif + 1.
- Il n'est pas obligatoire que les éléments soient contigus.
- L'objet Array combine les caractéristiques d'un tableau classique (adressage des éléments par l'indice 0, 1...n), et les caractéristiques d'un tableau associatif (adressage des éléments avec un identificateur entre guillemets). L'interpréteur est trÚs souple, il est possible de panacher les deux modes. Mais dans ce cas, la propriété
lengthne comptabilisera pas les cellules déclarées en mode associatif.
Exemples
- En partant d'un tableau itératif :
let countriesCodes = ['FR', 'BE']; console.log(countriesCodes.length); // 2 countriesCodes['Canada'] = 'CA'; console.log(countriesCodes); // Array [â0: "FR", 1: "BE", Canada: "CA"] console.log(countriesCodes.length); // 2, undefined
- En partant d'un tableau associatif (objet) :
const countriesNamesAndCodes = {
'France': 'FR',
'Belgique': 'BE',
};
console.log(countriesNamesAndCodes.length); // undefined
countriesNamesAndCodes[0] = 'CA';
console.log(countriesNamesAndCodes); // Object [1: "CA", âFrance: "FR", Belgique: "BE"]
console.log(countriesNamesAndCodes.length); // undefined, undefined
- Souplesse de l'interpréteur, encore, il est possible de mentionner des indices négatifs! Fort heureusement, ils n'influencent pas la valeur de
length, qui gÚre les indices à partir de zéro.
- Un mĂȘme tableau peut contenir plusieurs types de donnĂ©es, comme des chaĂźnes, nombres, objets, ou... tableaux, ce qui permet de construire de vĂ©ritable structures de donnĂ©es.
Propriétés
[modifier | modifier le wikicode]Une seule propriété : length[1].
| Propriété | Lecture/Ecriture | type |
|---|---|---|
| length | Lecture seule | entier |
MĂ©thodes
[modifier | modifier le wikicode]Voici une description succincte des méthodes classées par fonctionnalités.
Modification du contenu
[modifier | modifier le wikicode]| 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)
|
concat()
[modifier | modifier le wikicode]| 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. |
pop()
[modifier | modifier le wikicode]| RÎle : | Le dernier élément du tableau est supprimé du tableau et renvoyé. |
| Arguments : | aucun |
| Valeur renvoyée : | l'élément supprimé |
push()
[modifier | modifier le wikicode]| 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. |
shift()
[modifier | modifier le wikicode]| RÎle : | Le premier élément du tableau est supprimé et renvoyé. |
| Arguments : | aucun |
| Valeur renvoyée : | l'élément supprimé |
unshift()
[modifier | modifier le wikicode]| 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 |
splice()
[modifier | modifier le wikicode]| 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 |
reverse()
[modifier | modifier le wikicode]| RÎle : | Inverse l'ordre des éléments. |
| Arguments : | aucun |
| Valeur renvoyée : | aucun |
Obtenir des données
[modifier | modifier le wikicode]| 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)
|
at()
[modifier | modifier le wikicode]| 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)); // a console.log(tableau.at(-1)); // c
find()
[modifier | modifier le wikicode]| 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
includes()
[modifier | modifier le wikicode]| 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
join()
[modifier | modifier le wikicode]| 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 |
slice()
[modifier | modifier le wikicode]| 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 |
Trier
[modifier | modifier le wikicode]| MĂ©thode | Description | Exemple |
|---|---|---|
| sort() | Trier le tableau | mon_tableau.sort()
|
every()
[modifier | modifier le wikicode]tableau.every(function (ligne) {...}); : renvoie un booléen indiquant si tous les éléments du tableau vérifie une expression.
some()
[modifier | modifier le wikicode]tableau.map(function (ligne) {...}); : renvoie un booléen indiquant si au moins un des éléments du tableau vérifie une expression.
filter()
[modifier | modifier le wikicode]tableau.filter(function (ligne) {...}); : affiche les éléments d'un tableau qui vérifient une expression.
map()
[modifier | modifier le wikicode]tableau.map(function (ligne) {...}); : crée un nouveau tableau contenant le résultat d'une fonction sur chaque élément.
reduce()
[modifier | modifier le wikicode]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.
sort()
[modifier | modifier le wikicode]Prévue en standard pour trier des chaßnes alphanumériques, la méthode sort 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 fonction sort.
function pour_tri_ascendant(n1, n2)
{
return (n1 - n2); // Retourne positif si n1 > n2, négatif ou nul si n1 < n2
}
t = new Array(1,3,2);
t.sort(pour_tri_ascendant);
alert(t.join(",")); // Affiche "1,2,3"
2eme exemple : fonction de tri descendante.
function pour_tri_descendant(n1, n2)
{
return (n2 - n1); // Retourne positif si n1 < n2, négatif ou nul si n1 > n2
}
t = new Array(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 = new Array(1,3,2);
t.sort( function(n1,n2) { return n1-n2; } );
alert(t.join(",")); // Affiche "1,2,3"
4eme exemple : tri d'une notion abstraite (petit moyen grand).
function compare_taille(s1,s2)
{
if (s1=="petit") return -1;
if (s1=="moyen")
{
if (s2=="petit") return 1;
else return -1;
}
if (s1=="grand") return 1;
return 0; // ĂgalitĂ©
}
t = new Array("petit","grand","moyen","grand","petit","moyen");
t.sort( compare_taille);
alert(t.join(",")); // // Affiche "petit,petit,moyen,moyen,grand,grand"
Méthodes héritées
[modifier | modifier le wikicode]| 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 = new Array("Premier","Deuxieme","Troisieme");
t.sort(); // Invocation de la méthode sort()
alert(t); // Affiche "Deuxieme,Premier,Troisieme", soit le contenu par ordre alphabétique
Manipulation
[modifier | modifier le wikicode]Instanciation
[modifier | modifier le wikicode]L'instanciation consiste à invoquer le constructeur de l'objet à l'aide du mot réservé new.
mon_tableau = new Array(); // Simple et direct
mon_tableau = new Array(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 = new Array("Elément 1", "Elément 2"); // Remplissage à la déclaration.
Adressage d'un élément
[modifier | modifier le wikicode]t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments t["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"
Lecture de la propriété length
[modifier | modifier le wikicode]t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments
var nb_elements = t.length; // Lecture de length dans une variable
alert("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"
Références
[modifier | modifier le wikicode]
Références/Objets/Boolean
Cet objet désigne le type booléen[1]. Il est faux par défaut.
Exemples
[modifier | modifier le wikicode]myBoolean = new Boolean(1);
console.log(myBoolean); // Boolean { true }
console.log(myBoolean.toString()); // true
Références
[modifier | modifier le wikicode]
Références/Objets/Date
MĂ©thodes
[modifier | modifier le wikicode]- getDate()
- renvoie le jour du mois
- getDay()
- renvoie le jour de la semaine
- getFullYear()
- renvoie l'année complÚte
- getHours()
- renvoie la partie heures de l'heure
- getMilliseconds()
- renvoie les milliĂšmes de secondes
- getMinutes()
- renvoie la partie minutes de l'heure
- getMonth()
- renvoie le mois
- getSeconds()
- renvoie la partie secondes de l'heure
- getTime()
- renvoie l'heure
- getTimezoneOffset()
- renvoie le décalage horaire de l'heure locale
- getUTCDate()
- renvoie le jour du mois de l'heure UTC (temps universel coordonné)
- getUTCDay()
- renvoie le jour de la semaine de l'heure UTC
- getUTCFullYear()
- renvoie l'année complÚte de l'heure UTC
- getUTCHours()
- renvoie la partie heures de l'heure UTC
- getUTCMilliseconds()
- renvoie les milliĂšmes de secondes de l'heure UTC
- getUTCMinutes()
- renvoie la partie minutes de l'heure UTC
- getUTCMonth()
- renvoie le mois de l'heure UTC
- getUTCSeconds()
- renvoie la partie secondes de l'heure UTC
- getYear()
- renvoie l'année
- parse()
- renvoie le nombre de milliĂšmes de secondes depuis le 1/1/1970
- setDate()
- change le jour du mois de l'objet
- setFullYear()
- change l'année complÚte de l'objet
- setHours()
- change la partie heures de l'heure de l'objet
- setMilliseconds()
- change la partie milliĂšmes de seconde de l'heure de l'objet
- setMinutes()
- change la partie minutes de l'heure de l'objet
- setMonth()
- change la partie mois de la date de l'objet
- setSeconds()
- change la partie secondes de l'heure de l'objet
- setTime()
- change la date et l'heure de l'objet
- setUTCDate()
- change le jour du mois de l'heure UTC de l'objet
- setUTCDay()
- change le jour de la semaine de l'heure UTC de l'objet
- setUTCFullYear()
- change l'année complÚte de l'heure UTC de l'objet
- setUTCHours()
- change la partie heures de l'heure UTC de l'objet
- setUTCMilliseconds()
- change la partie milliĂšmes de seconde de l'heure UTC de l'objet
- setUTCMinutes()
- change la partie minutes de l'heure UTC de l'objet
- setUTCMonth()
- change le mois de l'heure UTC de l'objet
- setUTCSeconds()
- change la partie secondes de l'heure UTC de l'objet
- setYear()
- change la date et l'heure de l'objet
- toGMTString()
- convertir la date et l'heure au format GMT
- toLocaleString()
- convertir la date et l'heure au format local
- UTC()
- renvoie le nombre de milliÚmes de secondes entre le 1/1/1970 et un moment donné
Exemples
[modifier | modifier le wikicode] var now = new Date();
var jj = now.getDate();
var mm = now.getMonth() + 1;
var aaaa = now.getYear();
var H = now.getHours();
var M = now.getMinutes();
<!DOCTYPE html>
<html>
<body>
<script type="text/JavaScript">
var j,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;}
else
if(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>
Références/Objets/Error
Les exceptions renvoient des objets de type Error, ou qui en héritent[1].
Pour en créer une :
var myError = new Error('Message');
Références
[modifier | modifier le wikicode]
Références/Objets/Function
Propriétés
[modifier | modifier le wikicode]- arguments
- tableau de noms d'arguments
- arity
- nombre d'arguments
- caller
- nom de la fonction qui appelle
Exemples
[modifier | modifier le wikicode]- toUpperCase()
Cette section est vide, pas assez détaillée ou incomplÚte.
Références/Objets/Math
Propriétés
[modifier | modifier le wikicode]- E :
- constante d'Euler
- LN2
- logarithme naturel de 2
- LN10
- logarithme naturel de 10
- LOG2E
- logarithme constant de 2
- LOG10E
- logarithme constant de 10
- PI
- constante PI
- SQRT1_2
- constante pour racine carrée de 0,5
- SQRT2
- constante pour racine carrée de 2
MĂ©thodes
[modifier | modifier le wikicode]- abs()
- valeur positive
- acos()
- arc cosinus
- asin()
- arc sinus
- atan()
- arc tangente
- ceil()
- nombre entier supérieur le plus proche
- cos()
- cosinus
- exp()
- valeur exponentielle
- floor()
- nombre entier inférieur le plus proche
- log()
- utilisation du logarithme naturel
- max()
- le plus grand de deux chiffres
- min()
- le plus petit de deux chiffres
- pow()
- nombre puissance exposant
- random()
- 0 ou 1 aléatoire
- round()
- arrondi commercial d'un nombre
- sin()
- sinus
- sqrt()
- racine carrée
- tan()
- tangente
Références/Objets/Number
Propriétés
[modifier | modifier le wikicode]- MAX_VALUE
- plus grand nombre pouvant ĂȘtre sauvegardĂ©
- MIN_VALUE
- plus petit nombre pouvant ĂȘtre sauvegardĂ©
- NaN
- nombre non valable
- NEGATIVE_INFINITY
- nombre trop petit
- POSITIVE_INFINITY
- nombre trop grand
MĂ©thodes
[modifier | modifier le wikicode]- toExponential()
- toFixed()
- toPrecision()
- toString()
Exemples
[modifier | modifier le wikicode]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);
Références/Objets/Object
Un objet Javascript est en réalité une table associant un nom (attribut ou clé) à une valeur.
Exemple :
var article = new Object();
article.nom = "Livre";
article.prix_unitaire = 21.99;
article.quantite = 2;
Variante :
function Article(nom, prix_unitaire, quantite)
{
this.nom = nom;
this.prix_unitaire = prix_unitaire;
this.quantite = quantite;
this.resume = function(){
return this.nom+" x "+this.quantite+" Ă "+this.prix_unitaire+
" l'unité coûte(nt) "+( this.quantite*this.prix_unitaire );
}
return this;
}
var article = new Article( "Livre", 21.99, 2);
Pour accéder au nom de l'article :
alert( "L'article est : " + article.nom ); // syntaxe objet
alert( "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 :
var article = {
"nom" : "Livre",
"prix_unitaire" : 21.99,
"quantite" : 2,
"resume" : function(){
return this.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 :
var article = {
nom : "Livre",
prix_unitaire : 21.99,
quantite : 2,
resume : function(){
return this.nom+" x "+this.quantite+" Ă "+this.prix_unitaire+
" l'unité coûte(nt) "+( this.quantite*this.prix_unitaire );
}
};
MĂ©thodes
[modifier | modifier le wikicode]Parmi les plus utiles[1] :
- keys() : renvoie un tableau des clés de l'objet.
- values() : renvoie un tableau des valeurs de l'objet.
Références
[modifier | modifier le wikicode]
Références/Objets/String
Encodage
[modifier | modifier le wikicode]Ă 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'une String 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].
Propriétés
[modifier | modifier le wikicode]- length
- nombre de caractÚres, ou plus précisément, nombre d'unités de code de 16 bits.
MĂ©thodes
[modifier | modifier le wikicode]- charAt()
rechercher un signe à une position- renvoie le caractÚre (en fait l'unité de code) situé dans la chaßne à l'offset indiqué, ou en son absence, la chaßne vide.
- charCodeAt()
valeur de code Latin-1 à une position- renvoie la valeur du caractÚre (en fait l'unité de code) situé dans la chaßne à l'offset indiqué, ou en son absence, le nombre NaN.
- concat()
- concaténer des chaßnes de caractÚres.
- fromCharCode()
créer une chaßne de caractÚres en Latin 1- créer une chaßne à partir de la liste des unités de codes numériques indiquée.
- indexOf()
- rechercher la position d'un caractĂšre
- Recherchrche une sous chaĂźne Ă parti d'un position, et renvoie l'offset oĂč se trouve la sous-chaĂźne, et -1 lorsque la sous-chaĂźne n'est pas trouvĂ©e.
- lastIndexOf()
- rechercher la derniĂšre position d'un caractĂšre.
- match()
- appliquer une expression réguliÚre
- Renvoie vrai, faux ou nul en fonction de l'Ă©ventuelle correspondance.
- padStart() et padEnd()
- compléter la chaine avec un caractÚre, jusqu'à une certaine taille. Souvent utilisé pour afficher des nombres en commençant pas des 0. Ex :
console.log('1'.padStart(3, '0'));affiche "001".
- replace()
- appliquer une expression réguliÚre et remplacer.
- search()
- chercher avec une expression réguliÚre.
- slice()
- extraire une partie d'une chaĂźne de caractĂšres. Ex :
console.log("chien|chat".slice(0, ("chien|chat").indexOf('|')));renvoie "chien".
- split()
- scinder une chaĂźne de caractĂšres.
- substr()
- rechercher une sous-chaĂźne de caractĂšres Ă partir d'une position.
- substring()
- rechercher une sous-chaĂźne de caractĂšres.
- toLowerCase()
- tout Ă©crire en minuscules
- Renvoie une chaßne ou chaque caractÚre BMP a été converti en minuscule. Les surrogates ne sont pas modifiés.
- toUpperCase()
- tout Ă©crire en majuscules
- Renvoie une chaßne ou chaque caractÚre BMP a été converti en majuscule. Les surrogates ne sont pas modifiés.
Références
[modifier | modifier le wikicode]
Références/Objets/Element
Les Ă©lĂ©ments HTML sont les nĆuds d'un arbre. Ils peuvent donc en avoir des parents et des enfants[1].
Propriétés
[modifier | modifier le wikicode]Pour récupérer le texte contenu dans une balise HTML :
- nodeValue
- innerHTML
- textContent
- innerText
MĂ©thodes
[modifier | modifier le wikicode] Cette section est vide, pas assez détaillée ou incomplÚte. Références
[modifier | modifier le wikicode]
Références/Objets/RegExp
En informatique, une expression rĂ©guliĂšre ou expression rationnelle ou expression normale ou motif, 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Ă©es regex (de l'anglais regular expression). Elles sont issues des thĂ©ories mathĂ©matiques des langages 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 les langages 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 :
- Les crochets spécifient l'ensemble des caractÚres auquel doit appartenir le caractÚre courant de la chaßne. Dans cet exemple, l'ensemble est celui des chiffres de 0 à 9 inclus.
- Le caractÚre plus indique de répéter le motif précédent au moins une fois (suite non vide).
En Javascript, la validation d'une chaßne de caractÚres peut se faire en utilisant la méthode match de la chaßne de caractÚre à tester :
let chaine = '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.
Syntaxe
[modifier | modifier le wikicode]Les expressions rationnelles peuvent ĂȘtre analysĂ©es et testĂ©es via un dĂ©bogueur en ligne comme https://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. |
^
|
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 le nĂšme groupe de capture |
\g{n}
|
rĂ©fĂ©rence | MĂȘme sĂ©quence que celle capturĂ©e prĂ©cĂ©demment par le nĂšme groupe 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 le groupe 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 :
- Les caractÚres de début et fin de chaßne (
^et$) ne fonctionnent pas dans[]oĂč ils ont un autre rĂŽle. - Les opĂ©rateurs
*et+sont toujours avides, 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écial C 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 |
\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 des backreferences. Exemple :((?:sous-chaine_non_renvoyée|autre).*).- La présence d'un groupe capturant peut engendrer une allocation mémoire supplémentaire. Si une expression réguliÚre particuliÚrement complexe provoque une erreur de mémoire, essayez de remplacer les groupes capturant non référencés et inutilisés par des groupes non-capturant en ajoutant
?:juste aprÚs la parenthÚse ouvrante, et en décalant les numéros des groupes référencés.
- La présence d'un groupe capturant peut engendrer une allocation mémoire supplémentaire. Si une expression réguliÚre particuliÚrement complexe provoque une erreur de mémoire, essayez de remplacer les groupes capturant non référencés et inutilisés par des groupes non-capturant en ajoutant
?>: groupe non capturant indépendant.?<=: positive lookbehind, vérifier (sans consommer) que ce qui précÚde correspond au motif spécifié. Exemple :- Chercher une lettre u précédée d'une lettre q :
(?<=q)u
- Chercher une lettre u précédée d'une lettre q :
?<!: 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 :
- Chercher un mot composé de voyelles sans tenir compte de la casse :
(?i)[AEIOUY]+
- Chercher un mot composé de voyelles en tenant compte de la casse, ici en majuscules :
(?-i)[AEIOUY]+
Les options s'appliquent Ă toute l'expression quelle que soit leur position dans l'expression.
MĂ©thodes
[modifier | modifier le wikicode]Avec un objet de type expression réguliÚre créé soit explicitement par appel au constructeur RegExp soit par la syntaxe /.../ :
- regexp.test(str)
- Tester si la chaßne de caractÚre en argument correspond à l'expression réguliÚre. Retourne un booléen (
trueoufalse).
- regexp.exec(str)
- Appliquer une expression réguliÚre et retourner tous les groupes capturés avec des parenthÚses.
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 :
- string.match(regexp)
- Appliquer une expression réguliÚre et retourner tous les groupes capturés avec des parenthÚses.
- string.replace(regexp, replacement)
- Appliquer une expression réguliÚre pour remplacer les parties qui correspondent par un autre texte qui peut inclure des références aux parties trouvées.
Recherche
[modifier | modifier le wikicode]La fonction RegExp contient deux paramĂštres : la chaine Ă traiter et facultativement, le type de traitement : "g" (global), "i" (ignorer la casse) ou "gi".
var chaine="Test regex Javascript pour Wikibooks francophone.";
var expression=new RegExp("Wikibooks","g");
if (chaine.match(expression))
document.write("Le texte parle de Wikibooks");
else
document.write("Le texte ne parle pas de Wikibooks");
Remplacement
[modifier | modifier le wikicode]
Depuis ES6, le regex est natif en JS.
// Remplace tous les espaces par des underscores
var chaine="Test regex Javascript pour Wikibooks francophone.";
var expression=new RegExp("( )", "g");
document.write("ChaĂźne d'origine : " + chaine + "<BR>");
document.write("Chaßne traitée : " + chaine.replace(expression, "_") + "<BR>");
trim(something)
[modifier | modifier le wikicode]function trim(haystack, needle)
{
const regex = new RegExp('(^\\' + needle + '+|\\' + needle + '+$)', "g");
return haystack.replaceAll(regex, '');
}
chaine = 'http://test.com//';
console.log(trim(chaine, '/')); // http://test.com
Références
[modifier | modifier le wikicode]
Fonctions prédéfinies
Les fonctions prĂ©dĂ©finies sont natives Ă JavaScript : elles peuvent ĂȘtre appelĂ©es sans installer de bibliothĂšque.
Exemples
[modifier | modifier le wikicode]- decodeURI()
- décode une URI codée
- decodeURIComponent()
- décode une URI codée - II
- encodeURI()
- coder une URI
- encodeURIComponent()
- code une URI- II
- eval()
- interpréter une expression
- escape()
- transforme des signes ASCII en nombres
- isFinite()
- vérifie le domaine numérique de valeurs
- isNaN()
- vérifie si la valeur n'est pas un nombre
- parseFloat()
- transforme en nombre avec décimales
- parseInt()
- transforme en nombre entier
- Number()
- transforme un objet en nombre
- String()
- transforme le contenu d'un objet en une chaĂźne de caractĂšres
- unescape()
- transforme des nombres en caractĂšres ASCII
Opérateurs de bits
Opérations binaires
[modifier | modifier le wikicode]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.
Représentation binaire
[modifier | modifier le wikicode]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
Opérations
[modifier | modifier le wikicode]Il est possible de manipuler des valeurs binaire en utilisant des opérateurs spécifiques. Ainsi, il est possible de faire :
- une opération "ou",
- une opération "et",
- une opération "ou exclusif",
- un décalage de bits.
Les 3 premiÚres opérations se font "bit à bit" à place respectives :
- Le "et" vérifie si les deux bits valent "1". Dans ce cas, l'opération résulte d'un "1", sinon "0".
- Le "ou" vérifie si un des bit est égal à "1" ou les deux. Dans ce cas, l'opération résulte d'un "1", sinon "0".
- Le "ou" vérifie si un des bit est égal à "1" mais pas les deux. Dans ce cas, l'opération résulte d'un "1", sinon "0".
Ainsi, prenons un exemple: 9 et 12 (ne fait pas 9+12): 9 = 1001 12 = 1100
on regarde chaque colonne, et on opĂšre avec un "et".
- colonne 1 => 1 et 0 = 0
- colonne 2 => 0 et 0 => 0
- colonne 3 => 0 et 1 => 0
- colonne 4 => 1 et 1 => 1
RĂ©sultat 1000 => 8
Le "ou" donne:
- colonne 1 => 1 ou 0 = 1
- colonne 2 => 0 ou 0 => 0
- colonne 3 => 0 ou 1 => 1
- colonne 4 => 1 ou 1 => 1
RĂ©sultat 1101 => 13
et enfin le ou exclusif:
- colonne 1 => 1 xou 0 = 1
- colonne 2 => 0 xou 0 => 0
- colonne 3 => 0 xou 1 => 1
- colonne 4 => 1 xou 1 => 0
RĂ©sultat 0101 => 5
Limitation
[modifier | modifier le wikicode]
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. */
Utilité
[modifier | modifier le wikicode]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 5
xou 0100 => ou exclusif avec 4
0001 => 1
xou 0100 => encore avec 4
0101 = valeur 5, retour Ă l'Ă©tat initial
Les opérateurs
[modifier | modifier le wikicode]Il existe plusieurs opérateurs qui permettent ces opérations.
- & - "ET" (and)
- | - "OU" (or)
- ^ - "OU Exclusif" (xor)
Ainsi en javascript:
var a = 5
var b = 4
alert(a&b) /*Affiche 4*/
alert(a|b) /*Affiche 5*/
alert(a^b) /*Affiche 1*/
Manipulation sur chaĂźne de caractĂšres
[modifier | modifier le wikicode]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
var a="a"
//on récupÚre le code ASCII à l'index "0" => premier caractÚre
alert(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.
var a="hello"
var b="world"
var buffer = []
//cela va faire h^w, e^o, l^r, l^l; o^d
for (var i=0; i<a.length; i++) {
buffer.push ( a.charCodeAt(i)^b.charCodeAt(i) )
}
alert ( buffer.join(':') ) //31:10:30:0:11
var result = ""
//opération inverse, revient à "hello"
for (var i=0; i<a.length; i++) {
result += String.fromCharCode(buffer[i] ^ b.charCodeAt(i))
}
alert(result) //hello
DĂ©calage de bits
[modifier | modifier le wikicode]Fermeture
Une fermeture ou clÎture (appelée closure 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.
Itérations
[modifier | modifier le wikicode]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 :
function creerBoutons()
{
var boutons = document.querySelectorAll(".panel-bouton-ouvrir");
var panels = document.querySelectorAll(".panel-ouvrable");
for(var i=0 ; i<boutons.length ; i++)
{
var bouton = boutons[i]; // Le bouton déclenchant l'ouverture/fermeture
var panel = panels[i]; // Le panel caché initialement
bouton.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 avec var sont remontées au niveau de la fonction.
Le code précédent est interprété comme ceci :
function creerBoutons()
{
var boutons = document.querySelectorAll(".panel-bouton-ouvrir");
var panels = document.querySelectorAll(".panel-ouvrable");
var bouton, panels;
for(var i=0 ; i<boutons.length ; i++)
{
bouton = boutons[i]; // Le bouton déclenchant l'ouverture/fermeture
panel = panels[i]; // Le panel caché initialement
bouton.addEventListener('click', function(){togglePanel(bouton, panel)});
}
}
Il est facile de comprendre la cause du problĂšme : lors de l'appel Ă la fonction, les variables bouton et panel 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 :
function creerBoutons()
{
var boutons = document.querySelectorAll(".panel-bouton-ouvrir");
var panels = document.querySelectorAll(".panel-ouvrable");
for(var i=0 ; i<boutons.length ; i++)
(function () {
var bouton = boutons[i]; // Le bouton déclenchant l'ouverture/fermeture
var panel = panels[i]; // Le panel caché initialement
bouton.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 boucle for.
En JavaScript 6 (EcmaScript 6), il est possible d'utiliser let ou const à la place de var pour déclarer les variables, car le hoisting n'est pas opérant avec ces mots-clés.
Créer des fonctions de maniÚre dynamique
[modifier | modifier le wikicode]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.
function creerMultiplicationPar(facteur)
{
function multiplier(nombre)
{
// AccĂšde Ă son argument et celui de la fonction qui l'englobe
return nombre * facteur;
}
return multiplier; // Retourne la fonction locale
}
var doubler = creerMultiplicationPar(2);
var tripler = creerMultiplicationPar(3);
console.log(doubler(100)); // -> 200
console.log(tripler(100)); // -> 300
Comme une fonction est utilisable comme n'importe quel type de données en JavaScript, on peut écrire :
function creerMultiplicationPar(facteur)
{
return function(nombre)
{
// AccĂšde Ă son argument et celui de la fonction qui l'englobe
return nombre * facteur;
}; // Retourne la fonction locale
}
En ES6 :
function creerMultiplicationPar(facteur)
{
return (nombre) => nombre * facteur;
}
Programmation objet
Programmation objet
[modifier | modifier le wikicode]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 programme en 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.
Mot clé new
[modifier | modifier le wikicode]Le mot clé new crée un nouvel objet.
item = new Object();
MĂ©thodes et champs d'un objet
[modifier | modifier le wikicode]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 = new Object();
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.
Function et prototype
[modifier | modifier le wikicode]En JavaScript, qui est un langage de programmation orientée prototype, chaque objet hérite des attributs et méthodes de son prototype.
Exemple :
function Animal(race, sex)
{
this.race = race;
this.sex = sex
manger = function()
{
return "je mange";
}
}
Animal.prototype.attaquer = function(){
alert("J'attaque");
};
var anim = new Animal("labrador","male");
anim.age = 10;
anim.courir = function(vitesse){
alert("Je cours Ă "+vitesse+" km/h");
};
// ->
anim.courir(50);
anim.attaquer();
Mot clé this
[modifier | modifier le wikicode]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);
Paradigme de programmation classe/objet
[modifier | modifier le wikicode]/**
* Modélisation d'une voiture
*
* @class Voiture
*/
var Voiture = (function () {
//'use strict';
Voiture.couleur = "verte";
// methode de classe
Voiture.construire = function (marque) {
return new Voiture(marque);
};
// constructeur
function Voiture(marque) {
this.marque = marque;
}
// méthodes d'instance
Voiture.prototype = {
rouler: function (direction) {
document.write("la voiture roule");
},
getMarque: function (){
return this.marque;
}
};
return Voiture;
}());
// ->
var saab = new Voiture('Saab');
var chrysler = Voiture.construire('Chrysler');
chrysler.rouler();
alert(saab.getMarque());
Notation JSON
La notation objet du langage Javascript JSON (JavaScript Object Notation 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, le XML, 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.
Syntaxe
[modifier | modifier le wikicode]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.
Tableau
[modifier | modifier le wikicode]Un tableau est en réalité une forme spéciale d'objet.
Pour preuve, la fonction typeof(...) 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 :
var fruits = [ "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 :
var fruits = new Array();
fruits[0] = "pomme";
fruits[1] = "orange";
fruits[2] = "pamplemousse";
Variante :
var fruits = new Array();
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 :
var parfums_glaces = [
[ "chocolat", "vanille" ],
[ "fraise" ],
[ "framboise", "cassis" ]
];
Tous les Ă©lĂ©ments d'un tableau ne sont pas obligatoirement du mĂȘme type :
var article = [ "Livre", 21.99 ]; // nom et prix
Objet
[modifier | modifier le wikicode]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.
Imbrications
[modifier | modifier le wikicode]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"
}
]
Conversions
[modifier | modifier le wikicode]- JSON.parse()[8] : convertit un JSON en objet ou tableau JS.
- JSON.stringify()[9] : convertit un objet ou un tableau JS en JSON.
- Pour le pretty-print, on peut indiquer le nombre d'espace d'indentation en paramĂštre 3. Ex :
JSON.stringify({ name: 'test', age: 22 }, null, 4);donne la chaine de caractĂšres :
- Pour le pretty-print, on peut indiquer le nombre d'espace d'indentation en paramĂštre 3. Ex :
'{
"name": "test",
"age": 22
}'
Voir aussi
[modifier | modifier le wikicode]Convertisseurs JSON :
Bases de données JSON :
Ajax
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.
Exemple
[modifier | modifier le wikicode]function createXhrObject()
{
if (window.XMLHttpRequest)
return new XMLHttpRequest();
if (window.ActiveXObject)
{
var names = [
"Msxml2.XMLHTTP.6.0",
"Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP",
"Microsoft.XMLHTTP"
];
for(var i in names)
{
try{ return new ActiveXObject(names[i]); }
catch(e){}
}
}
window.alert("Votre navigateur ne prend pas en charge l'objet XMLHTTPRequest.");
return null; // non supporté
}
function updatePage(contentpath)
{
let xhr = 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).
}
Stockage
Pour persister des données dans l'ordinateur de l'utilisateur, on distingue trois méthodes[10] :
- Les cookies (<= 4 Mo).
- Le stockage web local, alias LocalStorage (<= 10 Mo).
- L'Indexed Database API, alias IndexedDB (<= 50 Mo).
Références
[modifier | modifier le wikicode]- â https://unicode-table.com/fr/
- â https://docstore.mik.ua/orelly/webprog/pcook/ch13_05.htm
- â https://www.regular-expressions.info/posixbrackets.html
- â https://www.regular-expressions.info/unicode.html
- â https://www.regextester.com/15
- â Jan Goyvaerts, Steven Levithan, Regular Expressions Cookbook, O'Reilly Media, Inc., (lire en ligne)
- â Les options sont appelĂ©es modificateurs (modifiers en anglais), voir https://www.regular-expressions.info/modifiers.html
- â https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
- â https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
- â https://www.html5rocks.com/en/tutorials/offline/quota-research/
Générateurs
Apparus en JS avec ES6 en 2013, les gé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çant return par yield. Mais il faut aussi créer une fonction générateur, annotée avec un astérisque[1], pour suivre le patron de conception "Itérateur".
Exemple
[modifier | modifier le wikicode]function* fourInts() {
let int = 0;
while (int < 4) {
yield int;
int++;
}
}
const gen = fourInts(); // création
alert(gen.next().value); // 0
alert(gen.next().value); // 1
alert(gen.next().value); // 2
alert(gen.next().value); // 3
alert(gen.next().value); // undefined
Références
[modifier | modifier le wikicode]
Dojo
Le cadriciel Dojo est un framework open source en JavaScript.
Le présent manuel se fonde sur la documentation 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.
Dojo/Hello World
Le présent livre a pour finalité de fournir un ensemble de connaissance de départ pour les nouveaux utilisateurs de Dojo.
Notes
[modifier | modifier le wikicode]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/
Initialiser Dojo
[modifier | modifier le wikicode]Créer l'arborescence suivante :
- HelloWorldTutorial/
|
|---- js/
|
---- dojo/
télécharger la derniÚ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/
|
-- ..
Pour commencer
[modifier | modifier le wikicode]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>
Créer un bouton gadget
[modifier | modifier le wikicode]Nous allons créer un bouton gadget (widget en anglais, c'est ce terme qui est utilisé par Dojo) avec le texte Hello 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 premier dojo.require instruit dojo d'inclure les fonctions widget (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 le dojoType. Le type est ici un bouton, mais nous pourrions mettre un input à la place.
Le widgetId identifie le bouton. Il peut ĂȘtre remplacĂ© par simplement id .
Pour mettre plusieurs boutons avec la mĂȘme phrase, il faut copier cette ligne et changer l'id.
Dojo/Widgets
HTML valide W3C
[modifier | modifier le wikicode]Si vous voulez que votre HTML soit valide W3C, il faut changer l'attribut dojoType qui n'est pas reconnu. Exemple :
<input dojoType="ComboBox">
devient
<input class="dojo-ComboBox">
oĂč ComboBox est votre Widget. Vous pouvez donc ainsi faire de l'AJAX compatible aux normes du W3C.
Dojo/Ressources
Liens externes
[modifier | modifier le wikicode]
jQuery
jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.
Installation
[modifier | modifier le wikicode]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);
Utilisation
[modifier | modifier le wikicode]Recherches
[modifier | modifier le wikicode]Afin de raccourcir la syntaxe au maximum, en jQuery le dollar ($) est un alias de la fonction jQuery() 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 :
.find()
[modifier | modifier le wikicode]Cherche tous les enfants de l'objet courant correspondant au paramĂštre.
.parents()
[modifier | modifier le wikicode]Cherche tous les parents de l'objet courant correspondant au paramĂštre.
.first()
[modifier | modifier le wikicode]Cherche le premier enfant de l'objet courant correspondant au paramĂštre.
.closest()
[modifier | modifier le wikicode]Cherche dans le premier parent de l'objet courant correspondant au paramĂštre.
.each()
[modifier | modifier le wikicode]Pour boucler sur tous les éléments possédant une classe :
$('.ma_classe').each(function(index, result) {
if (result.value === null) {
return true; // continue
}
if (result.value === "stop") {
console.log(index);
return false; // break
}
});
ĂvĂšnements
[modifier | modifier le wikicode]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] :
.ready()
[modifier | modifier le wikicode]Quand la page est finie de charger.
.change()
[modifier | modifier le wikicode]Quand on change la valeur d'un champ.
.click()
[modifier | modifier le wikicode]Quand on clique sur un élément.
.addClass() et .removeClass()
[modifier | modifier le wikicode]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(' ');
});
.ajax()
[modifier | modifier le wikicode]La mĂ©thode jQuery.ajax() permet comme son nom l'indique de lancer des requĂȘtes AJAX, c'est-Ă -dire asynchrones[4] en XMLHttpRequest (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].
Mots réservés
[modifier | modifier le wikicode]| 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 des parent().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 |
Références
[modifier | modifier le wikicode]- â https://api.jquery.com/category/traversing/
- â https://api.jquery.com/category/events/
- â https://stackoverflow.com/questions/2644299/jquery-removeclass-wildcard
- â http://api.jquery.com/jquery.ajax/
- â https://stackoverflow.com/questions/10931836/should-i-use-done-and-fail-for-new-jquery-ajax-code-instead-of-success-and
- â http://api.jquery.com/category/core/
- â http://tutorials.jenkov.com/jquery/dom.html
Node.js
Node.js est un framework JavaScript apparu en 2009, qui fournit plusieurs modules :
- npm (initialement Node Package Manager) : gestionnaire de paquet.
- Un serveur HTTP.
- La possibilité de manipuler les systÚmes de fichier, et de créer des programmes entiÚrement en JS.
Installation
[modifier | modifier le wikicode]
Windows
[modifier | modifier le wikicode]Télécharger le .msi sur https://nodejs.org
Linux
[modifier | modifier le wikicode]sudo apt install build-essential checkinstall libssl-dev
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
nvm ls-remote # copier la version voulue
nvm install v14.18.1
Docker
[modifier | modifier le wikicode]Sur Debian, remplacer la version voulue dans l'URL. Exemple :
RUN curl -sL https://deb.nodesource.com/setup_14.x | bash -
RUN apt-get install -y nodejs
RUN apt-get install -y npm
Utilisation
[modifier | modifier le wikicode]npm install télécharge les dépendances décrites dans le fichier package.json.
Exemple pour en installer de nouvelles :
npm install babel-polyfill
npm install node-sass --save-dev
React.js
Introduction
[modifier | modifier le wikicode]React.js est un framework JavaScript développé par Facebook depuis 2013, qui privilégie la programmation déclarative à la programmation impérative [1] pour développer des applications 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 framework React Native permet d'utiliser la syntaxe React pour développer des applications mobiles.
Par ailleurs, il existe des outils pour l'utiliser avec le framework PHP Symfony en back-end, notamment :
- Via le framework Stimulus qui permet d'appeler des composants React depuis les templates Twig.
- Via la bibliothÚque API Platform qui permet de générer un client React à partir de son API PHP[3].
Installation
[modifier | modifier le wikicode]Pour créer une application React vide sous Linux :
sudo npm install --global npx
npx create-react-app ReactApp
cd ReactApp
npm start
Composants
[modifier | modifier le wikicode]React 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, des fonctions flĂ©chĂ©es, ou des classes (depuis ES6). Exemple :
// Fonction
function HelloWorldFunction(props) {
return <b>HelloWorld!, {props.name}</b>;
}
// Fonction fléchée
const HelloWorldArrowFunction = () => {
return <b>HelloWorld!, {props.name}</b>;
};
// Classe
import React from 'react'
class HelloWorldClass extends React.Component {
render() {
return <b>HelloWorld!, {this.props.name}</b>;
}
}
Il y a donc deux façons de créer un composant :
- En créant une sous-classe de
React.Component, gĂ©rant son Ă©tat dans un attributstate. Cette classe possĂšde alors une mĂ©thode nommĂ©erenderretournant ce qu'il faut afficher, incluant d'autres composants. Son Ă©tat doit alors ĂȘtre modifiĂ© par la mĂ©thodesetStatequi fusionne l'objet spĂ©cifiĂ© avec l'Ă©tat courant et dĂ©clenche un nouvel affichage du composant si nĂ©cessaire. - En crĂ©ant une fonction ayant les propriĂ©tĂ©s comme arguments, qui retourne ce qu'il faut afficher. Cette fonction utilise alors des hooks qui permettent de retrouver les Ă©tats des prĂ©cĂ©dents affichages ; ces Ă©tats sont crĂ©Ă©s lors du premier affichage.
JSX
[modifier | modifier le wikicode]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 :
- Il faut utiliser l'attribut "className" au lieu de "class",
- Il faut utiliser l'attribut "htmlFor" au lieu de "for",
- L'attribut "style" doit ĂȘtre dĂ©fini comme un dictionnaire de rĂšgles de style, en retirant les tirets du nom des attributs tout en mettant la lettre suivante en majuscule.
Exemple :
return <div className="main-title" style={{ fontSize: '36pt', fontWeight: 'bold' }}>
Un exemple
</div>
Appels
[modifier | modifier le wikicode]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 :
import React from 'react'
import { render } from 'react-dom'
import HelloWorld from './HelloWorld'
const you = "me"
render(
<HelloWorld name={you}/>
document.querySelector('#app'),
)
Ătats
[modifier | modifier le wikicode]Les Ă©tats des composants peuvent ĂȘtre gĂ©rĂ©s par la bibliothĂšque Redux, ou depuis React 16.8 (en 2019) par des hooks[6] dont voici la liste[7] :
- useCallback
- useContext
- useDebugValue
- useEffect
- useImperativeHandle
- useLayoutEffect
- useMemo : mémorise un résultat pour gagner en performances en évitant de le recalculer ensuite.
- useReducer
- useRef
- useState
Cycle de vie
[modifier | modifier le wikicode]React.createClasscontient les fonctions.ReactDOMles invoque[8]. ReactDOM.render() change l'affichage.
On peut le tester en ligne sur :
- https://codepen.io/gaearon/pen/gwoJZk?editors=0010.
- https://codesandbox.io/s/react-typescript-react-ts (qui supporte le TypeScript en plus).
Voici les méthodes magiques qui s'exécutent automatiquement selon l'étape du composant[9] :
- constructor : s'exécute à l'initialisation de la classe.
- componentWillMount() : s'exécute juste aprÚs le constructeur.
- componentDidMount() : s'exécute aprÚs "componentWillMount", quand le composant s'affiche.
- componentDidUpdate() : s'exécute quand le composant affiché se rafraichit, suite à une modification d'état.
Fragments
[modifier | modifier le wikicode]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 <>
<span id="nom">Taille : </span>
<span id="valeur">{fileSize} octets</span>
</>
BibliothĂšques
[modifier | modifier le wikicode]Il existe beaucoup de bibliothĂšques logicielles utilisables en React[11].
Par exemple :
- Axios pour le client HTTP[12].
- Formik pour les formulaires HTML[13].
- Griddle pour afficher des tableaux[14].
- React Router pour le routing client[15]. Par exemple pour gérer les URL, on utilise sa classe Route.
- React Select pour des sélections HTML[16].
- Redux pour stocker des Ă©tats.
Exemple d'installation pour les select HTML :
yarn add react-select
Références
[modifier | modifier le wikicode]- â https://facebook.github.io/react/
- â https://fr.reactjs.org/
- â https://api-platform.com/docs/client-generator/react/#generating-a-progressive-web-app
- â https://react.dev/learn/passing-props-to-a-component
- â https://fr.reactjs.org/docs/introducing-jsx.html
- â https://fr.reactjs.org/docs/hooks-intro.html
- â https://fr.reactjs.org/docs/hooks-reference.html
- â https://www.w3schools.com/react/
- â https://react.dev/reference/react/Component
- â https://fr.reactjs.org/docs/fragments.html
- â https://www.bytestechnolab.com/blog/20-top-react-ui-components-in-2022/
- â https://axios-http.com/fr/docs/intro
- â https://formik.org/
- â https://griddlegriddle.github.io/Griddle/
- â https://reactrouter.com/fr/main/start/overview
- â https://react-select.com
DĂ©bogage
Afficher des objets
[modifier | modifier le wikicode]Pour afficher des objets non scalaires (Ă©quivalent du var_dump() de PHP) :
alert(JSON.stringify(monObjet1));
DĂ©bogage au sein d'un navigateur
[modifier | modifier le wikicode]Firefox
[modifier | modifier le wikicode]- Firefox fournit une console d'erreur JavaScript (Menu "Outils" / "Console d'erreur")
- Des extensions spécifiques permettent de faciliter le débogage du JavaScript :
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 des console.log() dans le code.
Chrome
[modifier | modifier le wikicode]Internet Explorer
[modifier | modifier le wikicode]Sous IE, 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 fonction getElementsByClassName disponible dans d'autres navigateurs.
F12 lance le débogage de la page.
React & Redux
[modifier | modifier le wikicode]Il existe des modules de navigateur pour connaitre l'Ă©tat des composants React :
- React Developer Tools
Et pour suivre les changements d'Ă©tat :
- Redux DevTools
Références
[modifier | modifier le wikicode]Voir aussi
[modifier | modifier le wikicode]- http://www.misfu.com/static/Javascript/detect.html
- https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Erreurs/JSON_bad_parse
Erreurs connues
Lenteurs
[modifier | modifier le wikicode]- minifier le code.
- passer en asynchrone ce qui peut l'ĂȘtre.
- alléger les images (.png, .svg)
Vanilla JS
[modifier | modifier le wikicode]addOnloadHook is not defined
[modifier | modifier le wikicode]La fonction doit ĂȘtre chargĂ©e sans addOnloadHook().
missing ) after argument list
[modifier | modifier le wikicode]Peut provenir d'un littéral qui n'est pas entre guillemets.
NS_BINDING_ABORTED
[modifier | modifier le wikicode]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.
cannot use 'in' operator to search for "length" in...
[modifier | modifier le wikicode]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
[modifier | modifier le wikicode]$ is not defined
[modifier | modifier le wikicode]jQuery n'est pas importé, ou alors pas dans le bloc "head".
ReferenceError: invalid assignment left-hand side
[modifier | modifier le wikicode]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');
Node.js
[modifier | modifier le wikicode]npm
[modifier | modifier le wikicode]ERR! Maximum call stack size exceeded ou ERR! code EBUSY
[modifier | modifier le wikicode]Lors d'un npm install, il faut alors lancer npm 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.
EBUSY resource busy or locked
[modifier | modifier le wikicode]Exclure le dossier des scans antivirus et antimalware.
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
[modifier | modifier le wikicode]Ajouter l'option --max-old-space-size=4096.
React
[modifier | modifier le wikicode]Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0___default() is not a function
[modifier | modifier le wikicode]Se produit quand on importe un module inexistant. Pour importer une fonction seulement, utiliser la syntaxe avec accolade. Ex :
import React, { useEffect } from 'react'
Can't perform a React state update on an unmounted component
[modifier | modifier le wikicode]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 type controltype to be controlled.
[modifier | modifier le wikicode]A component is changing an uncontrolled input of type controltype 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 arriver quand 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 fonction useState).
React Hook "use..." is called conditionally. React Hooks must be called in the exact same order in every component render
[modifier | modifier le wikicode]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.
CSS
[modifier | modifier le wikicode]z-index n'a aucun effet sur cet élément, car il ne s'agit pas d'un élément positionné
[modifier | modifier le wikicode]La propriété CSS z-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 valeur relative.
Cette section est vide, pas assez détaillée ou incomplÚte.
Références
Liens externes
[modifier | modifier le wikicode]Spécifications
[modifier | modifier le wikicode]- Standard ECMA 262 ECMAScript Language Specification
Documentation
[modifier | modifier le wikicode]Outils
[modifier | modifier le wikicode] GFDL
|
Vous avez la permission de copier, distribuer et/ou modifier ce document selon les termes de la licence de documentation libre GNU, version 1.2 ou plus récente publiée par la Free Software Foundation ; sans sections inaltérables, sans texte de premiÚre page de couverture et sans texte de derniÚre page de couverture. |