Admin CliCours
Formation apprenez à coder et programmer avec JavaScript, tutoriel & guide de travaux pratiques en pdf.
Introduction
Le langage Javascript a mauvaise réputation du fait qu’un grand nombre d’utilisateurs s’en servent de manière intrusive ou à mauvais escient. Certains en arrivent même à croire que ce langage est néfaste et refusent de l’employer, à tort. En effet, quelques règles suffisent à constituer de bons scripts ne détériorant pas l’accessibilité et s’insérant correctement au sein de vos pages sans causer le moindre conflit. Cet article vous montre comment procéder et quelles sont les bonnes pratiques.
Bonnes pratiques de base
Ne misez pas tout sur Javascript
Une bonne page web doit être consultable et entièrement fonctionnelle sans Javascript. Ce langage est optionnel du fait que tout le monde n’en dispose pas. Aussi, Javascript est principalement utile lorsqu’il s’agit d’améliorer et d’étendre le comportement de vos pages.
Cela veut donc dire que vous ne disposez pas forcément de toutes les fonctionnalités de votre page si ce langage est indisponible. En revanche, chacun des éléments présents dans votre page fonctionne (liens, boutons, etc…). Si un bouton ne fonctionne pas sans Javascript, c’est que celui-ci n’a pas sa place dans le code XHTML et qu’il devrait être créé via le script. Les codes suivants illustrent ces propos.
Mauvais code pour un lien d’impression :
<a href=« # » onclick= »window.print(); return false; »>Imprimer</a>
Résultat (lien présent mais non fonctionnel sans Javascript) :
Imprimer
Bon code pour un lien d’impression :
Nota : return false; empêche le navigateur de suivre le lien lorsque Javascript est activé et if(!oCont) return; annule l’insertion du lien si le conteneur récepteur n’existe pas. (bonne pratique à retenir) Pour les mêmes raisons, on évite l’ajout de contenu via un document.write(). Les méthodes d’écriture doivent être réservées à ces contenus optionnels.
Méthode d’insertion de contenu à éviter :
<script type=« text/javascript »><!--
document.write(‘Salut, ça va ?’);
//–></script>
Résultat (disponible uniquement avec JS) :
Salut, ça va ?
Commentez vos scripts
Quoi de pire qu’un code où les variables et méthodes ne veulent rien dire, où l’on ne trouve aucun commentaire et où l’indentation est quasi inexistante ? Entre nous, parmi les deux codes qui suivent, lequel préférez-vous lire ou modifier ?
<script type="text/javascript"><!--functionf(i,a){if(!document.getElementById||!document.getElementsByTagName)return;varc=document.getElementById(i),l=c.getElementsByTagName(a);if(!l)return;varb=l.length-1;for(b;b>=0;b--){if(!l[b].href)continue;window.alert(l[b].href);}//--></script>
<script type="text/javascript"><!--// Alerte de l'url pour chaque élément d'un conteneurfunctionfnRecapLinks(sId, sLink){// Test des méthodesif(!document.getElementById || !document.getElementsByTagName){return;}// Tableau récapitulatif des éléments 'sLink' du conteneur 'sId'varoCont = document.getElementById(sId);varaLinks = oCont.getElementsByTagName(sLink);if(!aLinks){return;}// Lancement d'une alerte sur chaque item du tableau aLinksvariI = aLinks.length -1;for(iI; iI >=0; iI--){if(!aLinks[iI].href){continue;}window.alert(aLinks[iI].href);}}//--></script>
Comme vous pouvez le constater, les variables et la fonction ont une syntaxe particulière. Elles commencent toutes par une ou deux lettres minuscules suivies de mots attachés commençant par une majuscule. C’est une convention de nommage appelée « Notation de type hongroise ». Elle combine la « Notation Pascal » précédée du type de la variable (a pour array, s pour string, o pour object, i pour integer, fn pour function, v pour variant, etc…).
Aussi, il est conseillé, en développement, de commenter vos scripts mais ni trop ni trop peu. Ici, on est à la limite de l’excès. Avec un peu d’habitude, un commentaire par fonction devrait suffire. Lorsque vous y repasserez plusieurs mois après, vous n’aurez pas à réfléchir sur ce que vous aviez codé. Bien entendu, les scripts que vous mettez en ligne peuvent, quant à eux, être optimisés, compressés et se passer de ces commentaires mais gardez-en toujours une copie documentée.
Désolidarisez vos scripts de l’interface utilisateur
Chaque utilisateur possède son propre mode de navigation. Certains utilisent le clavier, d’autres, la souris. Par exemple, cela signifie qu’il faut, dans le cas d’un drag-and-drop, activer le clic ou la pression sur une touche pour rendre votre script accessible. Un gestionnaire d’événement onclick est lancé par le clic de la souris mais aussi par la touche Entrée de votre clavier. Dans le même ordre d’idée, vous devez doubler vos onmouseover par des onfocus ainsi que les onmouseout par des onblur afin que chacun puisse disposer des méthodes affectées aux éléments, et ce, quelquesoit son mode de navigation. Pour illustrer cette notion, prenons le cas d’un rollover. Dans l’exemple suivant, que vous naviguiez au clavier ou à la souris, cela fonctionne.
……..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Programmer avec JavaScript (588 KO) (Cours DOC)
