[Résolu] [Geany] Génération de citation aléatoire - insertion de script par alapema - page 1 - OpenClassrooms

[Résolu] [Geany] Génération de citation aléatoire - insertion de script par alapema - page 1 - OpenClassrooms

[Geany] Génération de citation aléatoire

insertion de script

 

Sujet résolu

alapema

3 juillet 2012 à 20:13:50

Bon jour à tous,

Je me suis mis au javascript il y a quelques jours et j'avoue avoir de gros gros gros soucis pour comprendre comment ça marche.

J'ai donc lu le tuto "Dynamisez votre site internet" jusqu'au TP du formulaire, j'ai recherché un peu partout pour trouver d'autres infos, mais au final j'ai toujours le même soucis: Bon dieu, comment on fait pour appeler le script depuis le html?

Enfin, je ne suis pas sur que mon problème vienne de là, mais voyez pas vous-même:

Voici mon fichier script.js:

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

function quote () {     var quote=document.createTextNode('');     var random = math.round(math.random()*4) ;     switch (random) {         case 0:             quote='« La musique, c’est du bruit qui pense.  » – Victor Hugo' ;             break;         case 1:             quote='« Cool stuff, bro ! » – Chuck Norris' ;             break;         case 2:             quote='« Piiika ! » – Pikachu' ;             break;         case 3:             quote='« IkkkkkKKkkkkKKkkk KKkk kKKkkkk » – Lord of the Dolphins' ;             break;         default:             quote='Som\'thing wrong within the matrix' ;             break;     }     var citation = document.getElementById('citation');     citation.replaceChild(quote) ; }             var page = document.getElementByTag("body"); page.addEventListener("onload", quote());

Le fichier html comprend bien <script type="text/javascript" src="script.js"></script> en bas de page, et mon objet 'citation' est comme ceci: <div id="citation"> Pouet pouet </div>

Ce qui se passe au chargement de la page c'est... rien. j'ai juste mon "pouet pouet" dans mon <div> et c'est tout.
Alors voilà, je pense que l'erreur vient de la définition de l'évènement, mais sincèrement j'ai rien pané pendant le tuto (la partie est sacrément lourde et imbuvable à mon humble avis).

Savez-vous d'où provient le problème?

Merci beaucoup d'avance =)

PS: question supplémentaire parce que ça va me servir et qu'autant le faire ici puisque le sujet est presque le même.

Si je veux lancer la fonction par un clic gauche sur un lien défini, je changerai la définition de l'event comme ceci?

1 2	var bouton = getElementById('ID_du_lien'); bouton.addEventListener("onclick", quote());

CappaFlow

•  

3 juillet 2012 à 21:09:48

Bonjour.

- Actuellement tu t'embêtes pour rien avec le switch.
Mets les citations dans un tableau quoteArray par exemple, et mets directement le nombre aléatoire en indice (quoteArray[random])
- replaceChild accepte 2 arguments : l'élément qui va être supprimé et celui qui va le remplacer.
Tu peux utiliser textContent si la div (ou p, ou autre) ne contient que du texte.
- addEventListener prend en compte la référence à une fonction et non le résultat, avec un booléen facultatif même si c'est toujours mieux de le mettre.
Tu peux allez voir la syntaxe de cette fonction dans le cours, qui est :
addEventListener("event", fonction, boolean);
Exemple :
addEventListener("click", fais_ceci, true);
Note : il ne faut pas mettre le "on" devant le nom de l'évènement avec cette fonction.

Je vous ai aidé ? Appuyez sur le bouton "Ce message est utile", avec le pouce levé vers le haut !  (en bas à gauche de mon message)

alapema

3 juillet 2012 à 21:47:40

Merci pour vos éclaircissements.

Comme ceci cela convient-til? (il semble que non puisque j'ai toujours "pouet pouet" en citation)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function quote () {     var quote=document.createTextNode('') ;     var random = math.round(math.random()*3) ;     var quoteArray= ['« La musique, c’est du bruit qui pense.  » – Victor Hugo',                          '« Cool stuff, bro ! » – Chuck Norris' ,                  '« Piiika ! » – Pikachu',              '« IkkkkkKKkkkkKKkkk KKkk kKKkkkk » – Lord of the Dolphins'] ;                                               quote = quoteArray[random] ;     var citation = document.getElementById('citation');     citation.replaceChild(textContent,quote) ; }             var page = document.getElementByTag("body"); page.addEventListener("load", quote(), true);

Cocoduf

3 juillet 2012 à 22:11:31

Voici un code différent qui fonctionne car le tien est rempli d'erreurs :

1 2 3 4 5 6 7 8 9

function nouvelle_citation() {   var random = Math.floor(Math.random() * 4);   var quoteArray = ['a','b','c','d'];   var quote = quoteArray[random];   var citation = document.getElementById('citation');   citation.innerHTML = quote; }   window.onload = nouvelle_citation();

alapema

3 juillet 2012 à 22:19:07

Citation : Cocoduf

Voici un code différent qui fonctionne car le tien est rempli d'erreurs

Je vous remercie, je prends note du morceau de code.

Mais est-ce possible de revenir sur les erreurs, j'aimerai les comprendre? Ça serait dommage de les refaire une autre fois.
Je vous rappelle que je suis en train d'apprendre, alors si une âme généreuse pouvait passer un peu de temps à m'expliquer ce que je ne vois pas, je l'en remercierai grandement 

Cocoduf

3 juillet 2012 à 22:41:18

Bien sûr, je vais voir ce que je peux faire pour vous guider 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function quote () {     var quote=document.createTextNode('') ;     var random = math.round(math.random()*3) ;     var quoteArray= ['« La musique, c’est du bruit qui pense.  » – Victor Hugo',                          '« Cool stuff, bro ! » – Chuck Norris' ,                  '« Piiika ! » – Pikachu',              '« IkkkkkKKkkkkKKkkk KKkk kKKkkkk » – Lord of the Dolphins'] ;                                               quote = quoteArray[random] ;     var citation = document.getElementById('citation');     citation.replaceChild(textContent,quote) ; }             var page = document.getElementByTag("body"); page.addEventListener("load", quote(), true);

1) Ta fonction quote() a le même nom qu'une de tes variables (ligne 3), ce qui est interdit car ça créer des bugs.
2) Ta variable quote contient document.createTextNode('') lorsque tu la déclares, mais tu lui donnes une nouvelle valeur plus tard : quote = quoteArray[random];. Tu aurais dû déclarer ta variable en une seule fois comme ceci : var quote = document.createTextNode(quoteArray[random]);
3) Ligne 4 tu utilises l'objet Math sans majuscule.
4) La ligne 12 est mal écrite, tu devrais te documenter sur l'utilisation de replaceChild() (voir ici)
5) Ligne 15, tu as fait des erreurs. Tout d'abord n'oublie pas le 's' à Elements et les dernières lettres Name. Ensuite cette méthode te retourne un tableau (array), donc tu dois signaler la position de ton body dans cet array (soit [0] car il n'y a qu'une balise 'body') comme ceci :
document.getElementsByTagName('body')[0];

Voilà pour ce que j'ai repéré, il y en a peut-être d'autres, mais ne t'inquiète pas tu vas progresser.
Et ne te casses pas la tête, les simples innerHTML ou textContent sont suffisants pour remplacer du texte à un endroit précis 

alapema

3 juillet 2012 à 23:05:03

Oui, merci beaucoup!

En fait j'ai beaucoup de mal à comprendre comment marche le javascript (j'ai bossé un peu sur Gambas et C++ déjà). Je le trouve très illisible, pas instinctif. Et surtout, j'ai du mal à trouver des ressources claires (le tuto ne l'est pas vraiment à mon avis =/)

Une autre question:

Si je veux insérer une image dans ma citation, c'est possible? (je ne pense pas que ça soit faisable comme en programmation avec des

1	'texte' & variable_balize_image & 'texte'

, mais sait-on jamais.

A propos du changement de citation par click, il me suffit de remplacer la ligne

1	window.onload = nouvelle_citation();

par

1 2	var bouton = document.getElementById("id_du_bouton"); bouton.onclick(nouvelle_citation());

du coup?

Ou bien il faut un "addEventListener" ?

Cocoduf

3 juillet 2012 à 23:11:52

Pour le changement de citation par le clic sur un bouton, tu peux déclarer l’évènement directement à partir de la balise :
<button onclick="nouvelle_citation();">Changer citation</button>
Pour insérer une image au plus simple, dans ton tableau de citations il suffit d'écrire ton texte avec une balise <img src="image.png" alt="citation" /> et d'utiliser innerHTML au lieu de textContent dans le script. 

alapema

3 juillet 2012 à 23:49:31

Oh extra!
Merci beaucoup c'est génial, le javascript me sourit enfin x)

Une dernière chose avant de mettre le sujet en résolu. Vous vous souvenez du bouton?
Et bien en fait c'est un lien et il doit changer le fond de ma page.

Voici ma tentative (qui ne marche pas):

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

function background(target) {     var backArray =['mist_desert.jpg',                                     'stone_wall.jpg',                                     'metal_brush.jpg',                                     'stone_white?jpg',                                     'urban_wrappers.jpg',                                     'wood_white.jpg'];     switch (target) {         case 'ambient':             body.background=backArray[1];             break;         case 'stoner':             body.background=backArray[2];             break;         case 'metal':             body.background=backArray[5];             break;         case 'electro':             body.background=backArray[4];             break;         case 'trip:hop':             body.background=backArray[5];             break;         case 'jazz':             body.background=backArray[6];             break;     } }

avec bien sur l'html:

1	<li><a onclick="background(e.target.textContent)" href='#' title="Changer for the ambient background">ambient</a></li>

Si j'ai bien compris comment marcher le "e.target", là je demande de récupérer seulement le texte contenu dans la balise <a> sélectionnée non?

Ou alors c'est cette histoire d'activation du lien. J'ai vu quelque part qu'on pouvait annuler la redirection. Mais je ne me souviens plus comment... =/

alapema

4 juillet 2012 à 0:13:20

Citation : Cocoduf

J'ai besoin que tu postes un message sur ton topic étant donné que je n'ai pas le droit d'en faire 2 d'affilés et que j'en ai posté un indésirable... :/
Sinon voici mon message  :



Alors il faut remplacer e.target par this :

1	<li><a onclick="background(this.textContent)" href='#' title="Changer for the ambient background">ambient</a></li>

car tu veux accéder au contenu de l'élément qui a appelé l’évènement.
Ensuite, dans ton script, si tu veux conserver la même forme :

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

function background(target) {     var backArray = ['mist_desert.jpg','stone_wall.jpg','metal_brush.jpg','stone_white?jpg','urban_wrappers.jpg','wood_white.jpg'];         var body = document.getElementsByTagName('body')[0];     switch (target) {         case 'ambient':             body.style.background = "url("+backArray[0]+")";             break;         case 'stoner':             body.style.background = "url("+backArray[1]+")";             break;         case 'metal':             body.style.background = "url("+backArray[2]+")";             break;         case 'electro':             body.style.background = "url("+backArray[3]+")";             break;         case 'trip:hop':             body.style.background = "url("+backArray[4]+")";             break;         case 'jazz':             body.style.background = "url("+backArray[5]+")";             break;     } }

Je n'ai pas testé, mais ça doit fonctionner. 
Désolé de mon précédant message supprimé, j'ai appuyé sur le mauvais bouton.

Ok je vais tester ça.
C'est très sympa merci =)

Edit: Ouiiiiiii ça marche. Merci mille fois 
Cependant... comment garder le réglage? SI l'on recharge la page le fond change automatiquement... comment faire 
Une variable que l'on garde grâce à la fonction et que l'on charge avec window.onload?

Cocoduf

4 juillet 2012 à 0:21:13

EDIT :
De rien !
Si tu veux que le background garde ce fond, tourne toi vers PHP 

alapema

4 juillet 2012 à 0:33:33

Oh mon dieu >< Ca n'en finira donc jamais?

C'est dur de faire un site =(

Merci beaucoup pour toute l'aide en tout cas. Je note résolu.

CappaFlow

•  

4 juillet 2012 à 12:13:12

Citation : Cocoduf

Voici un code différent qui fonctionne car le tien est rempli d'erreurs :

1 2 3 4 5 6 7 8 9

function nouvelle_citation() {   var random = Math.floor(Math.random() * 4);   var quoteArray = ['a','b','c','d'];   var quote = quoteArray[random];   var citation = document.getElementById('citation');   citation.innerHTML = quote; }   window.onload = nouvelle_citation();

Toujours faux pour l'évènement.
Quand on assigne une fonction à un évènement, il faut que ce soit la référence à la fonction et non le résultat.
fonction() --> fonction
Que ce soit en DOM-0 (truc.onevent) ou en DOM-2 (addEventListener), c'est pareil.

Tu peux aussi utiliser les cookies ou le webStorage (qui est plus simple que les cookies il faut le dire) pour stocker la couleur.

Je vous ai aidé ? Appuyez sur le bouton "Ce message est utile", avec le pouce levé vers le haut !  (en bas à gauche de mon message)