Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours suivant : Initiation à la bibliothèque jQuery
Liste des fichiers associés à ce fichier HTML :
version 1.21, dernière mise à jour le 19 décembre 2012.
Il est courant de rencontrer sur Internet des codes JavaScript écrits par d'autres programmeurs, et que l'on souhaite incorporer à ses pages. Il arrive aussi que l'on souhaite réutiliser
du contenu, des fonctions que l'on a soi-même écrites précédemment.
Cependant, ce désir de vouloir reprendre du code de sources externes se heurte souvent à des difficultés :
le code est incompatible avec certains navigateurs ;
les noms des fonctions entrent en compétition. Par exemple, il est courant d'appeler au chargement de la page une fonction
que l'on nomme Init() ; mais ce nom est très commun et si l'on souhaite mélanger des codes issus de plusieurs sources, il est probable que des
erreurs soient créées ;
les variables elles-mêmes peuvent porter des noms ambigus. Cela est plus grave, dans la mesure où la redéfinition d'une variable n'est pas signalée comme un bogue du code, et peut donc passer inaperçue ;
les gestionnaires d'événement peuvent s'écraser l'un l'autre.
Heureusement, de « bonnes pratiques » de codage permettent de ne pas tomber dans ces pièges. On pourra consulter avec profit le blog de Christian Heilmann, intitulé Wait-till-I-come.
Nous avons vu dans un chapitre précédent comment ajouter du contenu à un document. Cependant, cette possibilité présente de gros inconvénients en termes d'accessibilité : les utilisateurs ne disposant pas
de JavaScript sont dans l'incapacité de consulter ce contenu si des précautions ne sont pas prises.
À cet égard, il est primordial que tout contenu informatif présent dans un document doit être présent dans le code HTML de la page. Par exemple, il ne faut pas utiliser JavaScript pour ajouter, par exemple, un menu de navigation.
Une alternative consiste à faire en sorte que le contenu soit déjà présent dans la page, puis, au chargement du document,
de le cacher par JavaScript pour ensuite le faire réapparaître en fonction des besoins.
CSS est un langage qui est dédié à la mise en forme. Par conséquent, il est toujours plus rapide de changer l'apparence d'un
élément en faisant appel à CSS qu'à JavaScript. Cela a pour conséquence de préférer systématiquement l'utilisation de la propriété className aux propriétés de l'objet style. Par exemple, si l'on doit changer en rouge la couleur d'un élément elt, on définira de préférence une classe "exemple" qui spécifiera une couleur de police rouge et on fera elt.className="exemple"; au lieu d'indiquer elt.style.color="red". Cela offre en outre l'avantage d'externaliser en-dehors du script la définition de cette mise en forme.
Certains éléments sont déjà pourvus d'une classe dans le code HTML. Manipuler la propriété className peut faire perdre une mise en forme. Rappelons en effet qu'il est tout à fait possible pour un élément d'avoir plusieurs
classes : <span id="span1" class="classe1 classe2 classe3">(...)</span>. Si on utilise directement span1.className="classe3", par exemple, l'élément va perdre toutes ses autres classes, ce qui n'est pas forcément le but recherché. Afin de l'éviter,
il faut tester au préalable si className existe pour l'élément en question, puis ajouter la nouvelle classe à son contenu si c'est le cas.
Avant de faire appel à une propriété ou une méthode, il vaut mieux au prélable s'assurer qu'aucune erreur ne sera produite si elle n'est pas disponible. Il était d'usage de faire une détection du navigateur utilisé, mais cette pratique a disparu pour laisser place à des méthodes plus efficaces.
Il suffit en effet de tester si ce dont on a besoin ne produit pas de code erreur, et de conditionner la poursuite de l'exécution du code au fait qu'il n'y a pas d'erreur.
Supposons par exemple que l'on souhaite utiliser la méthode getElementById. On écrira...
if (!document.getElementById) return ;
//Code à exécuter quand getElementById est supporté.
Ainsi, le navigateur ignorera « naturellement » le code qu'il ne peut pas comprendre.
Avant d'agir sur un élément, encore faut-il être sûr qu'il existe... Cela peut paraître superflu quand on n'intervient que
sur une seule page, mais lorsque le fichier JavaScript est amené à être mis en commun pour plusieurs documents, il est possible que le cas apparaisse où un élément n'existe pas
sur une page... ce qui peut amener des erreurs.
Selon le cas, on peut alors soit placer les instructions réservées à un élément à l'intérieur d'un test, soit stopper l'exécution du script :
if (document.getElementById("id1"){
//Code à exécuter quand l'élément d'identifiant id1 existe.
}
if (!document.getElementById("id1") return ;
{
//Code à exécuter quand l'élément d'identifiant id1 existe.
}
Il arrive que des variables soient redéfinies entre plusieurs scripts épars dans des fichiers distincts. Une redéfinition malencontreuse d'une variable peut perturber le fonctionnement d'un script, et il faut donc au maximum limiter le risque d'interférences entre deux variables. La toute première précaution à prendre est donc de limiter au maximum la portée d'une variable, en recourant à la déclaration var.
On pourrait penser à utiliser des noms de variables très explicites, voire à les préfixer ou les suffixer, comme par exemple
monCodeAMoiRienQuAMoi_maVariable, mais il faut pour cela trouver un préfixe unique (celui de l'exemple précédent a certes peu de chances d'être repris !),
et surtout, par la suite, se garder des fautes de frappe. Qui plus est, cela a comme inconvénient que si par extraordinaire,
le préfixe est utilisé dans un autre fichier, l'ensemble des variables et fonctions doit être renommé. Ce n'est donc pas une
solution très efficace.
JavaScript ne permet pas comme d'autres langages de définir des classes, et d'instancier ensuite des objets. Mais il est possible de
créer directement des objets, grâce au mot-clef Object.
var objet1 = new Object ;
objet1.chaine="Bonjour!" ;
objet1.affiche=function(){
alert(this.chaine) ;
}
objet1.affiche() ;
La déclaration précédent définit l'objet objet1, lui attache une propriété (chaine) et une méthode que l'on appelle ensuite. Ainsi, la méthode est associée à cet objet uniquement, et il n'y a pas de risque
que sa définition écrase une autre définition qui serait donnée pour un autre objet.
Il est possible d'aller un peu plus loin dans la création d'un objet en utilisant un « littéral objet », mais cette méthode
ne fonctionne pas pour les navigateurs anciens (Netscape jusqu'à la version 3 et Internet Explorer jusqu'à la version 4) La déclaration précédente s'écrit alors...
var objet1 =
{
chaine:"Bonjour!",
affiche:function()
{
alert(this.chaine) ;
}
}
objet1.affiche() ;
Cela permet de ne pas avoir à répéter le nom de l'objet défini, réduit donc les risques d'erreur et facilite la maintenance
et la reprise ultérieure du code. Attention, dans l'exemple précédent, les lignes dans le littéral sont séparées par des virgules,
et les définitions utilisent des : et non des points-virgule.
Il est possible d'aller encore un peu plus loin. En effet, il n'est parfois pas souhaitable que certaines propriétés d'un objet soient accessibles de l'« extérieur » du script. En programmation orientée objet, on fait appel, dans une classe, à des membres dits privés et d'autres publics. Il est possible de faire de même en javascript, en utilisant le fait qu'une fonction est un objet, et que la portée des variables qui y sont déclarées y est limitée. Ainsi,
var livre = new function()
{
//Membres privés
var chaine = "Test" ;
function allerA(Page)
{
(...)
}
function sauterDixPages()
{
(...)
}
//Membres publics: attention, il ne doit pas y avoir de retour à la ligne entre return et l'accolade
return {
ouvrir : function()
{
allerA(1) ;
} ,
allerA : allerA
} ;
} ;
Dans le code précédent, seules les méthodes ouvrir et allerA sont disponibles. Cela permet en outre de rassembler en tête de la déclaration tout ce qui relève d'une configuration. Par
exemple...
var livre = newfunction()
{
//Configuration à éditer
var config={
pageParDefaut : "1" ,
titre : "Titre par défaut"} ;
//Membres privés
var chaine = "Test" ;
function allerA(Page)
{
(...)
}
function sauterDixPages()
{
(...)
}
//Membres publics
return {
ouvrir : function()
{
allerA(config.pageParDefaut) ;
} ,
allerA : allerA
} ;
} ;
Nous avons jusqu'à présent chargé nos fonctions Init à l'aide de l'attribut onload de l'élément body. Cependant, il y a fort à parier que si l'on fait appel à d'autres scripts, le chargement de la page soit perturbé, et qu'il
y ait des conflits. Il faut en effet au préalable s'assurer qu'aucun script ne se lance au même moment. S'il y en déjà un,
il faut ajouter le nouveau script.
Heureusement, la méthode addEventListener permet d'ajouter un gestionnaire à ceux qui existent éventuellement déjà. On peut alors l'utiliser, mais dans le cadre d'une méthode plus
large, que nous appellerons addLoadListener, qui est compatible avec Internet Explorer :
function addLoadListener(gestionnaire){
if (window.addEventListener)
{
window.addEventListener('load', gestionnaire, false) ;
}
else if (document.addEventListener)
{
document.addEventListener('load', gestionnaire, false) ;
}
else if (window.attachEvent)
{
window.attachEvent('onload', gestionnaire) ;
}
}
Afin de préserver au maximum les possibilités d'interagir avec le document avec le clavier, il est recommandé de n'affecter
des événements de clic que sur des éléments susceptibles de recevoir le « focus » clavier, à savoir a, area et les éléments de formulaire.
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
Cours suivant : Initiation à la bibliothèque jQuery
Liste des fichiers associés à ce fichier HTML :
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.