javascript de la théorie à la pratique

**Alba.1337** · 16/03/2011, 23h10

Bonsoir à vous,
je suis étudiant et ai un TP à faire, je pensais avoir saisi la théorie du javascript, et là je me prends une grande claque, j'espère que vous saurez éclairer ma lanterne.

Il s'agit de modifier un fichier .xhtml à l'aide d'un fichier .js qui lui est joint.
Le fichier .xhtml est une liste de recettes. Le titre principal est déterminé grâce à <h1> et chaque recette par <h3>.
La question est alors de modifier le titre principal, en lui ajoutant le nombre de recettes contenues dans le fichier sous la forme : "titre (3)" (par exemple...).

J'ai donc, dans mon fichier .js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var titre = document.getElementsByTagName('h1')[0];
titre.textContent += ' (' + document.getElementsByTagName('h3').length + ')';

Et là, au chargement de ma page... Rien. Et quand je tente "alert(titre)", j'ai undefined...

Là j'avoue ne plus rien comprendre.
Merci à vous en tout cas!

**kOrt3x** · 16/03/2011, 23h25

Bonjour,

Dans un premier temps, si tu peux modifier ton post afin d'utiliser les balises CODE pour une meilleure lisibilité.

Est-ce que que tu as que ça dans ton code JavaScript ? Peux-tu nous en donner un peu plus ?

**Alba.1337** · 16/03/2011, 23h26

Ah bah non, je n'ai que ça, pour faire la tâche qui est demandée...
Limite j'aurais pu juste mettre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName('h1')[0].textContent += ' (' + document.getElementsByTagName('h3').length + ')';

Enfin selon ce que j'avais cru comprendre de javascript, qui apparemment est faux

**Alba.1337** · 16/03/2011, 23h47

Rebonsoir, j'ai trouvé la solution... Ou en tout cas une solution.
La balise <script> était écrite entre les balises <head>, je l'ai déplacée juste avant la fermeture de ma balise <body>.
Existe t-il un moyen, en laissant la balise <script> entre les balises <head>, de forcer le contenu du fichier .js à n'être interprété qu'en fin de chargement de la page?

**Willpower** · 16/03/2011, 23h49

chez moi ton code fonctionne nickel ! (enfin, j'ai remplacé "textContent" par "innerHTML" pour être compatible avec IE en plus des autres navigateurs)

à mon avis ton problème est que tu places ton codes javascript avant ton code html (par exemple dans le header) et que donc lors de son exécution les balises <h1> et <h3> n'existent pas encore et sont introuvables par ton code !

donc soit tu places ton code javascript à la fin de ton body (pas recommandé ) soit tu rajoutes une instruction dans ton code javascript signalant qu'il ne soit s'exécuté qu'une fois la page complètement chargée ! comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
window.onload = function(){
	var titre = document.getElementsByTagName('h1')[0];
	titre.innerHTML += ' (' + document.getElementsByTagName('h3').length + ')';
}

edit: arg, t'as posté en même temps que moi, saloperie ^^

**Alba.1337** · 16/03/2011, 23h56

Ah bah on a posté en même temps, mais c'est là que t'es balèze!
Tu réponds à une question pas encore posée! Merci!

**Loceka** · 17/03/2011, 08h46

Sinon la solution la plus commune est d'utiliser l'attribut onload de la balise body (qui a à peu près le même comportement que le window.onload dont parle Willpower) :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body onload="modifieTitre()">
<!-- contenu de la page -->
</body>

**laurentSc** · 17/03/2011, 08h58

D'après moi, c'est exactement la même chose, mais j'ai déjà eu recours au window.onload proposé par Willpower quand j'ai voulu insérer mon code dans un outil générateur de site web dans lequel on n'a pas accès à la balise <body> (et elle ne comporte évidemment aucun attribut).

**SpaceFrog** · 17/03/2011, 13h38

ce n'est pas la même chose window != document.body

**laurentSc** · 17/03/2011, 13h50

Si ce n'est pas pareil est-ce que document.body.onload pourrait remplacer window.onload ?

**SpaceFrog** · 17/03/2011, 13h58

oui mais pas a cet endroit là car le document.body n'est pas encore instancié

**Alba.1337** · 17/03/2011, 14h32

J'ai utilisé window.onload, ça marche niquel...
J'en profite pour vous poser une autre question sur laquelle je bloque.
On considère un fichier XHTML quelconque, et on souhaite qu'une fois le document chargé, un message "alert", donne le nombre d'éléments "a", directement contenus dans un élément "li"...
Moi j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function compter(){
var li = document.getElementsByTagName('li');
var cpt = 0;
var c = li.length;
for (i=0; i<c; i++){
	var nodes = li[i].childNodes;
	var s = nodes.length;
	for (j=0; j<s; j++){
		if (nodes[j].nodeName == 'a') { cpt++ }
	}
}
alert(cpt);
}

... Et là ou je suis complètement pommé, alert me renvoie "0"...

**Loceka** · 17/03/2011, 15h05

Y'a eu toute une discussion là dessus : http://www.developpez.net/forums/d10...-nombre-liens/

EDIT :
Sinon je ne vois rien d'ostensiblement faux dans ta démarche actuelle.

Essaye d'écrire le nom de la balise en majuscule :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (nodes[j].nodeName == 'A')

ou mieux, de forcer la casse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (nodes[j].nodeName.toLowerCase() == 'a')

**Alba.1337** · 17/03/2011, 15h11

Ah bah oui, c'était juste ça... J'avais zappé que nodeName renvoyait le nom de la balise en majuscule. C'est toujours pour des conneries qu'on se prend la tête ><

Merci à toi!

**javatwister** · 17/03/2011, 15h23

sachant qu'avec ton code, tu totalises tous les liens de tous les li;

et tu peux aussi faire comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function compter(){
   var li = document.getElementsByTagName('li');
   var cpt = 0;
   for (i=0; i<li.length; i++){
      for(j=0;j<li[i].getElementsByTagName('a').length;j++){
         cpt++
      }
   }
   alert(cpt);
}

**Loceka** · 17/03/2011, 15h33

Envoyé par javatwister

sachant qu'avec ton code, tu totalises tous les liens de tous les li;

On a déjà fait le tour de la question.

(cf le lien que j'ai posté)

**javatwister** · 17/03/2011, 15h39

ah ben oui dis donc

dire que j'ai raté cette étonnante discussion (non sans point commun avec la présente)

bref, je voulais rappeler que boucler sur tous les noeuds est beaucoup moins productif que cibler les tags du type recherché...

**Loceka** · 17/03/2011, 15h43

Du coup tu aurais mieux fait de l'écrire comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function compter(){
   var li = document.getElementsByTagName('li');
   var cpt = 0;
   for (i=0; i<li.length; i++){
      cpt += li[i].getElementsByTagName('a').length;
   }
   alert(cpt);
}