Jump to content

Externaliser le JavaScript


Recommended Posts

Bonjour, (problèmes résolus, solution plus bas ;) )

Suite à la lecture de l'article Séparer le comportement de la structure, j'essaye de séparer le JavaScript du code HTML. Ce n'est pas évident quand on ne pratique pas le JavaScript tout les jours.

J'ai une page web avec une ligne du temps qui a plusieurs liens (liens par année). En dessous de cette ligne du temps, j'ai un cadre par année. Par défaut, je les affiche tous. Quand l'utilisateur clique sur un des liens, j'aimerai qu'il n'affiche que la boite de l'année sélectionnée. Cela fonctionnait avec de vulgaires onclick sur mes liens, mais je souhaiterai séparer la couche présentation contenu de la couche événementielle.

J'ai placé des id sur mes liens: annee2006lien, annee2007lien et quand on cliquera sur un de ces liens, seul celui de l'année sélectionnée s'affichera. Par exemple, annee2006lien affichera annee2006 et cachera annee2007.

Voici le code JS qu'il exécute à chaque chargement de page:

window.onload = initAffichageAnnees;
function initAffichageAnnees(){
var tableLength = tableAnnees.length;

var nav = document.getElementById('timeline'); // récupère la ligne du temps
var liens = nav.getElementsByTagName('a'); // récupère les liens de la ligne du temps

for (i = 0; i < liens.length; i++){
var idName = liens[i].id;
idName = idName.substr(0,9); //transforme annee2006lien en annee2006

liens[i].onclick = function() { //rajoute le onclick au lien
afficher(idName);
};
}
}

Voici le contenu de la fonction Afficher (inchangée avec le passage onclick dans la page html -> onclick dans un fichier externe):

function afficher(element){
var tableAnnees = new Array("annee2006", "annee2007", "annee2008");
var tableLength = tableAnnees.length;

if (element != null){
document.getElementById(element).style.display = 'block'; //affiche l'element
document.getElementById("btnAfficherTout").style.display = 'block';
for (i=0; i<tableLength; i++) {
if (tableAnnees[i] != element)
document.getElementById(tableAnnees[i]).style.display = 'none';
}
}
else{//affiche tout
for (i=0; i<tableLength; i++) {
document.getElementById(tableAnnees[i]).style.display = 'block';
}
document.getElementById("btnAfficherTout").style.display = 'none';
}
}

Actuellement, quand on clique, il cache pendant un dixième de seconde avant de tout réafficher. Et j'ai également remarqué qu'il affichait toujours le même cadre. Ce cadre correspond au dernier de la boucle des liens (dans le code d'initialisation). D'après ce que je comprends (débutant inside), il réinitialise à chaque fois qu'on clique et il perdrait l'endroit où j'ai cliqué (valeur de idName) ?

Je pense qu'il y a deux problèmes:

-le fait qu'il cache seulement pendant un dixième de seconde, pourquoi il ne laisse pas caché/affiché comme avant quand je faisais mes onclick dans le code html?

-le fait qu'il perde le lien cliqué, si je clique sur 2006, il m'affiche le cadre de 2008 (dernier dans la boucle des liens).

Pourriez-vous m'aider ?

Merci d'avance :)

Edited by v4np13
Link to post
Share on other sites

Après quelques recherches, j'ai trouvé une des deux solutions. Le problème du dernier de la boucle:

window.onload = initAffichageAnnees;
function initAffichageAnnees(){
var tableLength = tableAnnees.length;

var nav = document.getElementById('timeline'); // récupère la ligne du temps
var liens = nav.getElementsByTagName('a'); // récupère les liens de la ligne du temps

for (i = 0; i < liens.length; i++){
var idName = liens[i].id;

liens[i].idName = idName.substr(0,9); //transforme annee2006lien en annee2006 et stocke dans liens[i]
liens[i].onclick = function() { //rajoute le onclick au lien
afficher(this.idName); ///récupère l'idName de cet objet
};
}
}

En utilisant this.idName. :)

Il ne reste plus que le problème de l'affichage qui ne reste pas plus longtemps qu'un dixième de seconde.

Link to post
Share on other sites

Quelques minutes plus tard, j'ai trouvé la deuxième solution, rajouter un return false;:

function initAffichageAnnees(){
var tableLength = tableAnnees.length;

var nav = document.getElementById('timeline'); // récupère la ligne du temps
var liens = nav.getElementsByTagName('a'); // récupère les liens de la ligne du temps

for (i = 0; i < liens.length; i++){
var idName = liens[i].id;
idName = idName.substr(0,9); //transforme annee2006lien en annee2006
liens[i].idName = idName;
liens[i].onclick = function() {
afficher(this.idName);
return false;
};
}
}

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...