Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

Défilé d'images

Code non fonctionnel

1 2 >>

Sujet résolu

21 août 2010 à 15:15:25

Bonjour,

Je débute dans JavaScript et je souhaite créer un défilé d'images avec un code assez dynamique.

Voilà mon .js :

screen = new array();

function addScreen(url, text)
{
  newScreenLength = screen.length + 1;

  screen[newScreenLength][0] = new image();
  screen[newScreenLength][0].src = url;
  
  screen[screenLength][1] = text;
}

addScreen("http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png/", "Barre de chargement");
addScreen("http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png/", "Ecran Titre du jeu");
addScreen("http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png/", "Premier niveau du jeu");

function startAnim(ms, screenActual)
{
  if (typeOf(screenActual) == 'undefined')
  {
    screenActual = 0;
  }
  else
  {
  if (screenActual == screen.length)
  {
    screenActual = 0;
  }
  document.getElementById("gameScreens").innerHTML = '<img src="' + screen[screenActual, 0] + '" />' + '<br />' + screen[screenActual, 1];
  screenActual++;
  setTimeout("startAnim(ms, screenActual)", ms);
  }
}

Et le HTML concerné :

<body onload="startAnim(3000, 0);">

<div id="gameScreens">
</div>

Malheureusement, ceci ne fonctionne pas : la page reste blanche et rien ne se passe.
Je ne connais pas très bien les propriétés JS ni son fonctionnement.

C'est pourquoi j'en appelle à vous.
Merci d'avance pour l'aide que vous saurez m'apporter.

21 août 2010 à 15:15:25

Le message qui suit est une réponse automatique activée par un modérateur.
Les réponses automatiques permettent d'éviter aux modérateurs d'avoir à répéter de nombreuses fois la même chose, et donc de leur faire gagner beaucoup de temps.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter le modérateur en question par MP.

Description insuffisante du problème

Bonjour,

Le modérateur ayant posté ce message estime que vous n'avez pas donné assez d'informations quant à votre problème.
Afin de faciliter la tâche aux membres qui souhaitent vous aider, il vous est demandé de fournir les erreurs obtenues, ou d'expliquer le comportement inhabituel de votre script. Vous contenter de fournir votre code en disant « ça ne marche pas » n'est pas suffisant.
Le modérateur vous invite donc à éditer votre message afin de le clarifier.

Merci de votre compréhension.

Les modérateurs.

Directeur technique, créateur de jeux HTML5 et fan de JavaScript | La suite de OnHack est sur les rails !

21 août 2010 à 16:42:38

J'ai édité dans le premier post.
"Malheureusement, ceci ne fonctionne pas : la page reste blanche et rien ne se passe."

22 août 2010 à 20:18:52

Noone ?

23 août 2010 à 20:24:49

Up !

24 août 2010 à 21:20:45

Re-up !

26 août 2010 à 11:30:03

Another up.

26 août 2010 à 11:45:33

Déjà en petite intro : change le type de code, à la place d'"autre" met "Javascript"

(car la on a aucune couleur donc moins lisible).
Ensuite par "éthique" on met des points virgules à la fin des lignes (ça évite des problèmes de compréhension / compilation il me semble).

Pour terminer, si ton code html ce trouve après le Javascript il est normal que ça marche pas, car il va commencé par exécuter tes fonctions sans même savoir où est le div. Pour le reste pas trop regarder, mais déjà ça serra plus clair

.

Ps : si tu utilise Firefox (sur les autres il doit exister aussi), tu peux utiliser dans Outils la Console d'erreurs (Ctrl + maj + j), qui peut t'aider sur les erreurs rencontrer. (il existe aussi des plugins comme FireBug, je sais qu'il existe des équivalents dans d'autre navigateur mais je les connais pas

).

26 août 2010 à 21:03:57

J'ai oublié de préciser dans le premier post que j'avais mis dans le body : <body onload="startAnim(3000, 0)".
Et j'ai mis les points virgules.

Merci de ton aide !

Nouveau code :

<html>

<head>
</head>

<body>

<div id="gameScreens">
</div>

<script type="text/javascript">
function addScreen(url, text)
{
  screenLength = screen.length + 1;

  screen[screenLength][0] = new image();
  screen[screenLength][0].src = url;
  
  screen[screenLength][1] = text;
}

window.onload = function()
{
	screen = new array();
	screenActual = 0;
	addScreen("http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png", "Barre de chargement");
	addScreen("http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png", "Ecran Titre du jeu");
	addScreen("http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png", "Premier niveau du jeu");
	startAnim(3000, 0);
}

function startAnim(ms, screenActual)
{
  if (typeOf(screenActual) == 'undefined')
  {
    screenActual = 0;
  }
  else
  {
	if (screenActual == screen.length)
	{
		screenActual = 0;
	}
	document.getElementById("gameScreens").innerHTML = '<img src="' + screen[screenActual, 0] + '" />' + '<br />' + screen[screenActual, 1];
	screenActual++;
	setTimeout("startAnim(ms, screenActual)", ms);
  }
}
</script>

</body>

Ca ne marche toujours pas.

Même en mettant le fichier dans un .js séparé ça ne marche pas. =/

27 août 2010 à 1:08:47

Ton code est bourré d'erreur.

Je te conseilles de télécharger Google Chrome qui intègre une super console d'erreur javascript (pas taper les autres, j'ai pas trouvé d'équivalent sur firefox et autres..).

Par exemple tu as des erreurs dans ta fonction onload...
Il y a aussi des erreurs quand tu déclares tes classes (attention les majuscules sont obligatoires !).

[edit] et dit ce que tu veux faire exactement parce que là je ne pige pas trop le concept...

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

27 août 2010 à 14:33:24

Ca tombe bien j'ai Chrome.

Je voudrais que, dans la div "gameScreens", les screens s'affichent toutes les 3000 ms (premier paramètre de startAnim), avec leur légende en dessous (d'où le tableau à 2D).

Les images des screens s'affichent au même endroit mais changent !

Schéma :

Image utilisateur

29 août 2010 à 14:28:50

Nek, tu ne peux pas me donner les erreurs du code ?
Tu n'as même pas besoin de les corriger !

30 août 2010 à 0:32:10

Tu cliques sur la petite icone en forme de clé en haut à droite dans Google chrome.
Dans « Outils » choisis « Console JavaScript ».

Actualise ta page et le tour est joué.

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

30 août 2010 à 21:10:31

Oh merci beaucoup.
Grâce à toi j'ai appris à utiliser le débogueur JavaScript de Chrome.

J'ai corrigé quelques erreurs (3-4) et lors de mes recherches j'ai découvert beaucoup de choses sur JavaScript...
C'est vraiment un langage de très haut niveau.

Néanmoins il reste une erreur :

"Uncaught TypeError: Cannot set property '0' of undefined
addScreendefilIMG.html:20
InitdefilIMG.html:46
(anonymous function)"

Nouveau code :

<html>

<body>

<div id="gameScreens">
</div>

<div id="gameScreens">
</div>

<script type="text/javascript">
function addScreen(url, text)
{
	if (typeof(screen) === 'undefined')
	{
		var screen = new Array();
	}
  screenLength = screen.length + 1;

  screen[screenLength][0] = new Image();
  screen[screenLength][0].src = url;

  screen[screenLength][1] = text;
}

function startAnim(ms, screenActual)
{
  if (typeof(screenActual) === 'undefined')
  {
    var screenActual = 0;
  }
  else
  {
	if (screenActual == screen.length)
	{
		screenActual = 0;
	}
	document.getElementById("gameScreens").innerHTML = '<img src="' + screen[screenActual, 0] + '" />' + '<br />' + screen[screenActual, 1];
	screenActual++;
	setTimeout("startAnim(ms, screenActual)", ms);
  }
}

function Init()
{
	addScreen("http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png", "Barre de chargement");
	addScreen("http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png", "Ecran Titre du jeu");
	addScreen("http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png", "Premier niveau du jeu");
	startAnim(3000, 0);
}
window.onload = Init();
</script>
</body>

</html>

Lorsque dans la console JS j'écris startAnim(3000, 0), ceci s'affiche à l'écran.

<icône de mauvais lien d'image>
undefined

Il m'affiche aussi cette erreur :
"startAnim(3000, 0)
undefined
undefinedFailed to load resource
Uncaught ReferenceError: ms is not defined
(anonymous function)"

Merci de votre aide et désolé de ne pas pouvoir me débrouiller seul.

30 août 2010 à 21:53:03

Aucun soucis. On est là pour t'aider, mais simplement pas pour te faire ton boulot, c'est pour ça que je t'ai dit comment faire au dernier post et que je ne te l'ai pas fait directement.

Bon tu as tout un tas de soucis.

if (typeof(screen) === 'undefined')

screen ne PEUT PAS être défini puisque tu ne le défini pas avant

.
De plus tu vérifie si sa valeur vaut la chaine de caractères 'undefined', ce qui est purement et simplement impossible puisque screen n'est pas défini.
En fait le script réagit comme ça parce que les trois égales "forcent" à la comparaison par type, si tu supprime un égale il ne fera plus attention au type (c'est à dire "chaine de caractère") ainsi ta condition va passer.

Tu définis ta variable dans la condition... Ouais c'est possible mais je déconseilles, ceci dit ce n'est pas une erreur.

Admettons que ta condition passe, ta variable sera un array vide autrement dit screenLength contiendra 0+1, soit 1.
Sachant que screen ne contient rien, même pas une case comment screen[1] pourrait être défini ?

Note: ta variable screen sera détruite à la fin de ta fonction. Pour palier à ce problème tu dois la déclarer en dehors de ta fonction, tu pourras l'utiliser dans la fonction mais elle ne sera pas effacée !

Bon courage !
Et un conseil, va lire le nouveau tuto sur le javascript !

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

30 août 2010 à 22:10:49

Merci !

"screen ne PEUT PAS être défini puisque tu ne le défini pas avant"
C'est volontaire.
Comme tu dis, je veux créer la variable si elle n'est pas déclarée.

Même si screenLength vaut 0 au début, il s'incrémente dès qu'on ajoute un élément dans le tableau !

Pour régler le problème de la portée des variables, je peux peut-être les passer en arguments...
Non je vais faire comme tu dis, la déclarer au début.

P.S : Ce tuto sur JS est nouveau.

30 août 2010 à 22:18:05

A chaque poste recode ton script avec mes conseil s'il te plait.

Les passer en arguments ce n'est pas une mauvaise idée, encore faut-il BIEN le faire ! Il faudra donc retourner à chaque fois screen.
Par contre ton screen.length + 1; est inutile.

Réfléchi, quand tu en es à rentrer tableau[4] = "machin" c'est la 5ème case que tu remplies. Autrement dit tableau.length va renvoyer 5 ! Soit le numéro de la prochaine case ! Sachant que la première case est 0...

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

30 août 2010 à 22:23:02

J'ai corrigé quelques erreurs.
Je venais de voir que l'incrémentation était mal placée en relisant bien mon code. :s

<html>

<body>

<div id="gameScreens">
</div>

<div id="gameScreens">
</div>

<script type="text/javascript">
var screen = new Array();
var screenLength = 0;
var screenActual = 0;

function addScreen(url, text)
{
  screen[screenLength][0] = new Image();
  screen[screenLength][0].src = url;

  screen[screenLength][1] = text;
  
	screenLength += 1;
}

function startAnim(ms, screenActual)
{
	if (screenActual == screenLength)
	{
		screenActual = 0;
	}
	document.getElementById("gameScreens").innerHTML = '<img src="' + screen[screenActual][0].src + '" />' + '<br />' + screen[screenActual][1];
	screenActual++;
	setTimeout("startAnim(ms, screenActual)", ms);
}

function Init()
{
	addScreen("http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png", "Barre de chargement");
	addScreen("http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png", "Ecran Titre du jeu");
	addScreen("http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png", "Premier niveau du jeu");
	startAnim(3000, 0);
}
window.onload = Init();
</script>
</body>

</html>

30 août 2010 à 22:49:36

screen[screenLength][0] n'est pas défini. Normal je n'ai vu nul part ceci: screen[screenLength] = new Array();

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

31 août 2010 à 15:13:53

Ah il faut le faire de cette manière ?
Très bien.

Voilà le nouveau code (ne fonctionnant pas encore : "Uncaught SyntaxError: Unexpected token [")

<html>

<body>

<div id="gameScreens">
</div>

<div id="gameScreens">
</div>

<script type="text/javascript">
var screen = new Array();
var screen[0] = new Array();
var screenLength = 0;
var screenActual = 0;

function addScreen(url, text)
{
  screen[screenLength][0] = new Image();
  screen[screenLength][0].src = url;

  screen[screenLength][1] = text;
  
	screenLength += 1;
}

function startAnim(ms, screenActual)
{
	if (screenActual == screenLength)
	{
		screenActual = 0;
	}
	document.getElementById("gameScreens").innerHTML = '<img src="' + screen[screenActual][0].src + '" "alt="Screen du projet." />' + '<br />' + '<span>' + screen[screenActual][1] + '</span>';
	screenActual++;
	setTimeout("startAnim(ms, screenActual)", ms);
}

function Init()
{
	addScreen("http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png", "Barre de chargement");
	addScreen("http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png", "Ecran Titre du jeu");
	addScreen("http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png", "Premier niveau du jeu");
	startAnim(3000, 0);
}
window.onload = Init();
</script>
</body>

</html>

31 août 2010 à 19:26:48

Tu utilises var screen[0] = new Array();

Ici tu (re)définies ta variable grâce au mot clé var. Et apparemment à la déclaration d'une variable (que tu ne dois pas redéclarer !) tu n'as pas le droit de la considérer comme un array directement (logique).
Bref supprime le var qui est devant et tout ira bien jusqu'à ce que tu essaies screen[1][0] ...

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

31 août 2010 à 20:15:52

Found it.

Il faut à chaque fois redéclarer le tableau.
Je croyais que JavaScript gérait mieux ça, m'enfin.

Seulement reste encore un problème : "Uncaught ReferenceError: ms is not defined".
Un problème de récursivité ?

<html>

<body>

<div id="gameScreens">
</div>

<div id="gameScreens">
</div>

<script type="text/javascript">
var screen = new Array();
screen[0] = new Array();
var screenLength = 0;
var screenActual = 0;

function addScreen(url, text)
{
	screen[screenLength] = new Array();
  screen[screenLength][0] = new Image();
  screen[screenLength][0].src = url;

  screen[screenLength][1] = text;
  
	screenLength += 1;
}

function startAnim(ms, screenActual)
{
	if (screenActual == screenLength)
	{
		screenActual = 0;
	}
	document.getElementById("gameScreens").innerHTML = '<img src="' + screen[screenActual][0].src + '" "alt="Screen du projet." />' + '<br />' + '<span>' + screen[screenActual][1] + '</span>';
	screenActual++;
	setTimeout("startAnim(ms, screenActual)", ms);
}

function Init()
{
	addScreen("http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png", "Barre de chargement");
	addScreen("http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png", "Ecran Titre du jeu");
	addScreen("http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png", "Premier niveau du jeu");
	startAnim(3000, 0);
}
window.onload = Init();
</script>
</body>

</html>

31 août 2010 à 22:32:14

setTimeout("startAnim(ms, screenActual)", ms);

Mauvaise pratique. Premièrement: les guillemets. Deuxièmement: on ne peut pas envoyer des paramètres comme ça.

// Version propre non compatible avec IE:
setTimeout(startAnim, ms, ms, screenActual);

// Version dégueu compatible avec tous les navigateurs:
setTimeout(function () { startAnim(ms, screenActual); }, ms);

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

1 septembre 2010 à 8:42:42

Merci sincèrement.
Ca marche parfaitement !

Grâce à toi, mon problème est résolu.

Et j'ai fait des progrès en JS.

2 novembre 2010 à 12:57:47

Re-bonjour !

Finalement j'ai trouvé que mon code était pas très propre (il faut séparer le HTML du JS...) et de plus il n'est pas compatible avec Firefox.

J'ai essayé de me le refaire correctement : les images sont toutes affichées (aucune n'est cachée alors que le display : "none" du script devrait le faire !), et la console JS de Chrome n'affiche aucune erreur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

        <head>
                <script>
                        function startAnim(ms, screenActual, screenArray) {
                                screensNbr = screenArray.length;
                                if (screenActual == screensNbr) {
                                        screenActual = 0;
                                }

                                for (i = 0; i <= screensNbr; i++) {
                                        screenArray[screenActual].style.display = (i == screenActual) ? "none" : "";
                                }
                                
                                screenActual++;
                                setTimeout(function () { startAnim(3000, screenActual, screenArray); }, ms); // Le function() est moche mais compatible avec tous les navigos
                        }
                        
                        function initAnim() {
                                var screensList = document.getElementById("slideShow").getElementsByTagName("li");
                                
                                startAnim(0, 0, screensList);
                        }
                        window.onload = 'initAnim';
                </script>
        </head>

        <body>
                <ul id="slideShow" style="list-style-type: none;">
                        <li><img src="http://img41.xooimage.com/files/2/9/4/screen1-1ecd98c.png" alt="" /><br /><span>Barre de chargement</span></li>
                        <li><img src="http://img41.xooimage.com/files/2/4/1/screen2-1ecd9b8.png" alt="" /><br /><span>Ecran Titre du jeu</span></li>
                        <li><img src="http://img28.xooimage.com/files/2/4/0/screen3-1ecdc18.png" alt="" /><br /><span>Premier niveau du jeu</span></li>
                </ul>
        </body>

</html>

2 novembre 2010 à 18:07:49

Explique moi l'intérêt de ta boucle en détail avec des mots français s'il te plaît.

for (i = 0; i <= screensNbr; i++) {
    screenArray[screenActual].style.display = (i == screenActual) ? "none" : "";
}

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

2 novembre 2010 à 19:07:14

Tant que i est plus petit ou égal à screensNbr, incrémenter i.
Pour l'élément du tableau screenArray correspondant à l'index screenActual définir la propriété css display :
- si i vaut screenActual : "none", on cache l'élément li
- si i vaut screenActual : "", on affiche (ou ré-affiche) l'élément li (il n'y en aura qu'un seul par appel de fonction).

Le but est de simuler le diaporama en cachant certains éléments de la liste html et d'en laisser un seul qui correspond à l'image affichée.

2 novembre 2010 à 19:39:04

En fait en français je voyais plutôt:

>for (i = 0; i <= screensNbr; i++) {
>pour i de 0 au nombre d'images totale alors {
Autrement dit exécution pour i=0,i=1,i=2,i=3 (soit 4fois, moui, pourquoi pas)

>(i == screenActual) ?
>si i est égal au numéro actuel, alors

>screenArray[screenActual].style.display = "none"
>mettre la propriété display de l'élément actuel à "none"

> :
>Sinon

>screenArray[screenActual].style.display = ""
>mettre la propriété display de l'élément actuel à ""

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

2 novembre 2010 à 20:02:12

J'ai corrigé le : for (i = 0; i <= screensNbr; i++) { en for (i = 0; i < screensNbr; i++) {.

Mais pour le reste je ne vois pas quel est le problème. :/

2 novembre 2010 à 21:06:54

Dans ce cas décompose exactement ce que fait ta boucle avec les valeurs de base, c'est à dire:
screensNbr = 3
screenActual = 0
screenArray = [ DOM Element, DOM Element, DOM Element ]

Pour être précis je te demande quelque chose genre
1- initialisation de la boucle, i=0
2- i < 3 donc on continue la boucle
3- i vaut maintenant 1
4- ...

Venez sur Zeste de Savoir, on est bien :-) . Mon tuto PHPSpec.

1 2 >>

Défilé d'images

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.