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

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.

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

SpaceFrog · 17/03/2011, 15h50

avec jquery

Code :

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

$('li>a').length

javatwister · 17/03/2011, 15h52

oui, absolument, Loceka

16/03/2011, 23h25	#2
kOrt3x Rédacteur/Modérateur Aurélien Gaymay Technicien Informatique/Etudiant Web Inscription : septembre 2006 Messages : 2 320 Détails du profil Informations personnelles : Nom : Aurélien Gaymay Âge : 29 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Technicien Informatique/Etudiant Web Secteur : Santé Informations forums : Inscription : septembre 2006 Messages : 2 320 Points : 7 272 Points : 7 272	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 ? __________________ QuickEvent : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) QuickEvent Lite : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) ______________________________________________________________________________________ La rubrique Mac - Les cours & tutoriels Mac - Critiques de Livres Mac
	00

16/03/2011, 23h26	#3
Alba.1337 Invité régulier Étudiant Inscription : mars 2010 Messages : 96 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2010 Messages : 96 Points : 6 Points : 6	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
	00

16/03/2011, 23h47	#4
Alba.1337 Invité régulier Étudiant Inscription : mars 2010 Messages : 96 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2010 Messages : 96 Points : 6 Points : 6	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?
	00

17/03/2011, 08h58	#8
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	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).
	00

17/03/2011, 13h38	#9
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	ce n'est pas la même chose window != document.body __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/03/2011, 23h56	#6
Alba.1337 Invité régulier Étudiant Inscription : mars 2010 Messages : 96 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2010 Messages : 96 Points : 6 Points : 6	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!
	10

17/03/2011, 13h50	#10
laurentSc Débutant Laurent Webmaster Inscription : octobre 2006 Messages : 2 873 Détails du profil Informations personnelles : Nom : Laurent Âge : 48 Localisation : France, Isère (Rhône Alpes) Informations professionnelles : Activité : Webmaster Secteur : Industrie Informations forums : Inscription : octobre 2006 Messages : 2 873 Points : 1 320 Points : 1 320	Si ce n'est pas pareil est-ce que document.body.onload pourrait remplacer window.onload ?
	00

17/03/2011, 13h58	#11
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	oui mais pas a cet endroit là car le document.body n'est pas encore instancié __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 15h05	#13
Loceka Membre Expert Tlouye Ci Inscription : mars 2004 Messages : 1 450 Détails du profil Informations personnelles : Nom : Tlouye Ci Informations forums : Inscription : mars 2004 Messages : 1 450 Points : 2 149 Points : 2 149	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')
	00

17/03/2011, 15h11	#14
Alba.1337 Invité régulier Étudiant Inscription : mars 2010 Messages : 96 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mars 2010 Messages : 96 Points : 6 Points : 6	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!
	00

17/03/2011, 15h39	#17
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	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é...
	00

17/03/2011, 15h50	#19
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	avec jquery Code : Sélectionner tout - Visualiser dans une fenêtre à part $('li>a').length __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

17/03/2011, 15h52	#20
javatwister Expert Confirmé danseur Inscription : août 2003 Messages : 2 667 Détails du profil Informations personnelles : Sexe : Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : danseur Informations forums : Inscription : août 2003 Messages : 2 667 Points : 3 035 Points : 3 035	oui, absolument, Loceka
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email