javascript de la théorie à la pratique

Version imprimable

16/03/2011, 23h10
Alba.1337

javascript de la théorie à la pratique
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:

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!
16/03/2011, 23h25
kOrt3x

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 ?
16/03/2011, 23h26
Alba.1337

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

Code:

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

Enfin selon ce que j'avais cru comprendre de javascript, qui apparemment est faux :P
16/03/2011, 23h47
Alba.1337

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?
16/03/2011, 23h49
Willpower
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:

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 ^^
16/03/2011, 23h56
Alba.1337

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!
17/03/2011, 08h46
Loceka
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:

1 2 3 <body onload="modifieTitre()">  </body>
17/03/2011, 08h58
laurentSc

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).
17/03/2011, 13h38
SpaceFrog

ce n'est pas la même chose window != document.body
17/03/2011, 13h50
laurentSc

Si ce n'est pas pareil est-ce que document.body.onload pourrait remplacer window.onload ?
17/03/2011, 13h58
SpaceFrog

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

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:

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"...

17/03/2011, 15h05
Loceka

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. :koi:

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

Code:

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

ou mieux, de forcer la casse :

Code:

if (nodes[j].nodeName.toLowerCase() == 'a')
17/03/2011, 15h11
Alba.1337

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!

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

et tu peux aussi faire comme ça:

Code:

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);
}

17/03/2011, 15h33
Loceka

Citation:

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. :mouarf: (cf le lien que j'ai posté)
17/03/2011, 15h39
javatwister

ah ben oui dis donc :mouarf:

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

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

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

Code:

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);
}

17/03/2011, 15h50
SpaceFrog

avec jquery

Code:

$('li>a').length

:whistle:
17/03/2011, 15h52
javatwister

oui, absolument, Loceka :ccool:
17/03/2011, 15h54
Loceka

Citation:

Envoyé par SpaceFrog

avec jquery

Code:

$('li>a').length

:whistle:

Tu vas te faire taper par Auteur :no:
17/03/2011, 15h57
javatwister

et en plus, quel est l'intérêt? :mrgreen:
17/03/2011, 16h06
SpaceFrog

Citation:

Tu vas te faire taper par Auteur

pour quelle raison ?

et pis qu'il y vienne d'abord :grin:
17/03/2011, 16h53
Alba.1337

Fiou, je viens de venir à bout de ce TP, grâce à vous!
Merci bien!
17/03/2011, 16h53
Loceka

Citation:

Envoyé par SpaceFrog

pour quelle raison ?

Parce que tu utilises un script de 200ko pour une simple méthode qui fait 10 lignes de code !
17/03/2011, 16h59
SpaceFrog

83 Ko !!!!

mais je n'ai jamais dit qu'il fallait utiliser jquery juste pour cela...
je souligne juste que si l'on est dans un contexte jquery ...

Citation:

Envoyé par Loceka

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

Code:

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);
}

:nono:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<ul>
			<li><a>1</a></li>
			<li><a>2</a></li>
			<li><a>3</a></li>
			<li><a>4</a></li>
			<li>
				<ul>
					<li><a>5</a></li>
					<li><a>6</a></li>
				</ul>
			</li>
		</ul>
		<script type="text/javascript">
                   var li = document.getElementsByTagName('li');
                   var cpt = 0;
                   for (i=0; i<li.length; i++){
                      cpt += li[i].getElementsByTagName('a').length;
                   }
                   alert(cpt);
                </script>
	</body>
</html>

Renvoie 8 et non 6 : il y a des balises a comptées 2 fois vu qu'elles ont 2 ancêtres li ;)

bien vu encore (chuis trop vieux pour ces c...ies)

donc

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function compter(){
 
var l=document.links, cpt=0;
 
for(i=0;i<l.length;i++){
	if(l[i].parentNode.nodeName=="LI"){
		cpt++
	}
}
 
alert(cpt)
 
}

17/03/2011, 18h57
SpaceFrog

Code:

if(l[i].parentNode.nodeName.toUpperCase()=="LI"){

comme qui y'a pas d'age ^^
18/03/2011, 00h44
javatwister

non non, je confirme, les nodeName sortent en majuscule jusqu'à nouvel ordre ;)

sur ce, je vais me coucher :mrgreen:
18/03/2011, 08h25
SpaceFrog

de façon crossbrowser ? j'en mettrais pas le fil de ma souris sans fil à couper ...
18/03/2011, 09h02
Willpower

Citation:

Envoyé par SpaceFrog

de façon crossbrowser ? j'en mettrais pas le fil de ma souris sans fil à couper ...

Quasi certain !
18/03/2011, 09h13
javatwister

tu verras, quand tu auras mon âge et ma sagesse: tu découvriras la lumière, petit scarabée :mrgreen:

ceci dit, c'est un archaïsme voué à disparaître, j'espère;
18/03/2011, 09h18
SpaceFrog

t'es pas plus jeune que moi toi ? ^^