Une syntax error

**aertys** · 31/12/2014, 15h42

bonjour à tous,

je vous donne d'abord out mon code ensuite j'ai mis l'erreur:

HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<!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'>
	<head>
		<meta http-equiv='content-type' content='text/html' charset='utf-8' />
		<title>Mario mouvant</title>
		<link rel='icon' href='favicon.ico' />
		<script type='text/javascript' src='js/mario_mouvant_html.js'></script>
		<script type='text/javascript' src='js/mario_mouvant.js'></scrip
	<body>  
	 </body> 
</html>

mario_mouvant_html.js

Code :

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

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
30
var fig = document.createElement ('figure');
	fig.id = 'mario',
	fig.style.position = 'relative';
 
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
var choix = prompt ("Veuillez choisir votre personnage." + \n +
							"m pour Mario" + \n +
							"l pour Luigi" + \n +
							"w pour Wario.");
 
	choix = choix.toLowerCase();
 
	switch (choix) {
		case 'm':
			mario.src = "../img/Mario.png";
			break;
		case 'l':
			mario.src = "../img/Luigi.png";
			break;
		case 'w':
			mario.src = "../img/Wario.png";
			break;
		default:			
			mario.src = "../img/Mario.png";
			break;
	}
 
fig.appendChild(mario);
body.appendChild(fig):

en lançant cette page HTML,il ne m'afiche rien. j'ai donc ouvert une console web qui m'affiche l'erreur suivante:

SyntaxError: illegal character mario_mouvant_html.js;

q

**ryan** · 31/12/2014, 15h50

Yop,

A première vue: je placerais les \n entre guillemets.

**lysandro** · 31/12/2014, 16h03

En complément de ce qu'à déjà répondu Ryan

Il y a en un peu partout ... celle que j'ai vu (uniquement les erreurs de syntaxe) sont corrigées dans ton code ci-dessous
HTML

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
	<!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'>
	<head>
		<meta http-equiv='content-type' content='text/html; charset=utf-8' charset='utf-8' />
		<title>Mario mouvant</title>
		<link rel='icon' href='favicon.ico' />
		<script type='text/javascript' src='js/mario_mouvant_html.js'></script>
		<script type='text/javascript' src='js/mario_mouvant.js'></script>
	<body>  
	 </body> 
</html>

mario_mouvant_html.js

Code javascript :

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

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
30
var fig = document.createElement ('figure');
	fig.id = 'mario',; // pas une erreur de syntaxe
	fig.style.position = 'relative';
	
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
var choix = prompt ("Veuillez choisir votre personnage." + "\n" +
							"m pour Mario" + "\n" +
							"l pour Luigi" + "\n" +
							"w pour Wario.");
							
	choix = choix.toLowerCase();
								
	switch (choix) {
		case 'm':
			mario.src = "../img/Mario.png";
			break;
		case 'l':
			mario.src = "../img/Luigi.png";
			break;
		case 'w':
			mario.src = "../img/Wario.png";
			break;
		default:			
			mario.src = "../img/Mario.png";
			break;
	}

fig.appendChild(mario);
body.appendChild(fig):;

edit: l'attribut charset dans la balise meta a été introduit en html5, il n'existe pas en xhtml1.0.

**aertys** · 31/12/2014, 18h39

pouvez-vous m'expliquer ceci;

body.appendChild(fig):;

**ryan** · 31/12/2014, 19h41

Yop!

On ajoute une balise figure, nommée "fig", dans le body de la page.

**aertys** · 01/01/2015, 12h16

en fait c'est surtout ce symbole dont je voudrais une explication

:

**ryan** · 01/01/2015, 12h36

Yop,

M'attendais tellement peu a le voir là que je ne l'ai pas aperçu...
A ma connaissance, ces deux points ne servent à rien et ne devraient pas être là.

**aertys** · 05/01/2015, 20h00

bonjour,

mon script a fonctionné la première fois mais depuis, le prompt s'affiche bien, et j'ai une page blanche après

la console web m'affiche ces erreurs:

TypeError: mybody is undefined mario_mouvant_html.js:35
ReferenceError: mario is not defined mario_mouvant.js:3

voici mes codes:
mario_mouvant.js:

Code :

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

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
(function() { 
 
var mgauche = mario.style.left,
	droite = mario.style.right,
	bas = mario.style.bottom,
	haut = mario.style.up;
 
    function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
        if (element.attachEvent) {
            element.attachEvent ('on' + event, func);
        } 
        else {
            element.addEventListener (event, func, false);
        }
    }
 
addEvent (window, 'keydown', function (e) {
 
	switch (e.keyCode) {
		case 37:
		if (parseInt(gauche) != 0) {	
			gauche = (parseInt(gauche) - 10) + "px";
		}
		else {
			alert ("Je ne peux pasaller  plus loin, patate!");
		}
		break;
 
		case 39:
		if (parseInt(droite) != 0) {
			gauche = (parseInt(gauche) + 10) + "px";
		}
		else {
			alert ("Je ne peux pas aller  plus loin, patate!");
		}
		break;
 
		case 38:
		if (parseInt(haut) != 0) {
			haut = (parseInt(haut) - 10) + "px";
		}
		else {
			alert ("Je ne peux pas aller  plus loin, patate!");
		}
		break;
 
		case 40:
		if (parseInt(bas) != 0) {
			haut = (parseInt(haut) + 10) + "px";
		}
		else {
			alert ("Je ne peux pas aller  plus loin, patate!");
		}
		break;
 
		}
 
 
 
 
 
 
});
 
 
 
 
 
 
})();

mario_mouvant_html.js:

Code :

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

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
30
31
32
33
34
35
36
37
(function() { 
 
var mybody = document.getElementsByTagName("body") [0];
 
var fig = document.createElement ('figure');
	fig.id = 'mario';
	fig.style.position = 'relative';
 
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
var choix = prompt ("Veuillez choisir votre personnage." + "\n" +
							"m pour Mario" + "\n" +
							"l pour Luigi" + "\n" +
							"w pour Wario.");
 
	choix = choix.toLowerCase();
 
	switch (choix) {
		case 'm':
			mario.src = "img/Mario.png";
			break;
		case 'l':
			mario.src = "img/Luigi.png";
			break;
		case 'w':
			mario.src = "img/Wario.png";
			break;
		default:			
			mario.src = "img/Mario.png";
			break;
	}
 
fig.appendChild(mario);
 
mybody.appendChild(fig);
 
})();

**lysandro** · 05/01/2015, 23h43

Tout est dans les erreurs :

TypeError: mybody is undefined mario_mouvant_html.js:35

'mybody' est 'undefined', pourquoi ? Tes scripts sont évalués lors du traitement de ta page, dans le '<head>'. Le '<body>' n'est pas encore traité et n'est donc pas encore connu. L'affectation 'mybody = document.getElementsByTagName("body")[0]' renvoie 'undefined'. Quand plus tard tu essayes d'appeler une méthode dessus 'mybody.appendChild(...)' l'erreur se déclenche.

Tu peux mettre tes scripts juste avant la fermeture du body '</body>' ou utiliser les événements et n'évaluer tes scripts que lorsque la page est complétement chargée.

ReferenceError: mario is not defined mario_mouvant.js:3

Dans mario_mouvant_html.js, tu définis ta variable 'mario' dans une fonction (le '(function(){ ... })()'), 'mario' n'est pas connu en dehors. Lorsque tu essayes d'y accéder dans mario_mouvant.js, le moteur te dit qu'il ne connait pas de symbol 'mario'.

Tu peux définir 'mario' comme variable globale ou mettre tes scripts dans la même fonction ou trouver un moyen de communiquer entre tes deux fonctions. Ou plus simple sans doute, rajouter :

Code :

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

1
2
3
4
(function() { 
var mario = document.getElementById("mario").firstChild; 
var mgauche = mario.style.left,
...

**aertys** · 06/01/2015, 14h03

bon alors maintenant l'image s'affiche bien. j’ai vérifié la touche enfoncée via des alert() et c'est la bonne mais il ne me déplace soit pas l'image soit dans le sens inverse de l’effet escompté

**lysandro** · 06/01/2015, 15h41

Que quelque chose puisse bouger avec le code fourni me laisse songeur... Trop de choses à deviner.

edit: dans ma réponse précédente, j'avais supposé que 'mario' était l'image (<img>) comme utilisée dans ton code, bien que tu ais mis 'mario' comme 'id' sur la figure (<figure>). D'où le 'document.getElementById("mario").firstChild' qui récupère l'image, mais c'était peut-être la figure que tu voulais déplacer ?

**aertys** · 06/01/2015, 20h04

j'ai essayé de modifier les marges de mon <img> en fonction de la touche par utilisateur, d'où le switch, donc le faire "bouger".

**lysandro** · 06/01/2015, 20h09

Dans le code fourni, tu calcules des valeurs (gauche, haut) mais elle ne sont jamais affectées.

**aertys** · 07/01/2015, 10h31

comment puis-je les affecter si ce n'est en faisant ça :

Code :

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

			gauche = (parseInt(gauche) - 10) + "px";

**lysandro** · 07/01/2015, 11h44

En faisant plutot ça document.getElementById("mario").style.left = gauche+"px"; par exemple. Sinon je ne vois pas comment quoi que ce soit puisse bouger.

edit: Dans ton code html généré tu utilises une balise 'figure', cette balise est plutot réservée aux illustrations (au sens large: texte, image, dessin, etc) dans un texte. Comme tu cherches à établir un aire de jeu pour déplacer mario, je te propose de passer plutot par une balise plus générique comme un 'div'.

Ci-dessous, tu trouveras un exemple fonctionnel du code. Juste un exemple, pour le comparer à ton code.

Code :

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

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <meta http-equiv='content-type' content='text/html; charset=utf-8' />
        <title>Mario mouvant</title>
    <body>
        <div id="airedejeu"  style="position:relative; width:100%; height:100%;">
            <img id="mario" style="position:absolute;" src="../img/Mario.png">
        </div>
        <script type='text/javascript'>
            (function() { 
                var aire_de_jeu = document.getElementById("airedejeu");
                // calcul des limites de l'aire de jeu
                // à remettre à jour en cas de redimensionnement
                var bord = {
                    haut   : 0,
                    gauche : 0,
                    bas    : (parseInt(aire_de_jeu.clientHeight) || 400) - (parseInt(aire_de_jeu.clientTop ) || 0),
                    droit  : (parseInt(aire_de_jeu.clientWidth ) || 400) - (parseInt(aire_de_jeu.clientLeft) || 0)
                };
 
                var mario = document.getElementById("mario");
                // récupération de la position et des dimensions de l'image
                // à remettre à jour en cas de changement d'image
                var gauche  = parseInt(mario.style.left) ||  0,
                    haut    = parseInt(mario.style.top ) ||  0,
                    largeur = parseInt(mario.width     ) || 20,
                    hauteur = parseInt(mario.height    ) || 20;
 
                var keydown_listener = function onkeydown ( event ) {
                    // constantes par convention
                    var KEYCODE_LEFT_ARROW  = 37,
                        KEYCODE_RIGHT_ARROW = 39,
                        KEYCODE_UP_ARROW    = 38,
                        KEYCODE_DOWN_ARROW  = 40;
                    var KEYMODIFIER_CTRL    = 0x1000,
                        KEYMODIFIER_SHIFT   = 0x2000,
                        KEYMODIFIER_ALT     = 0x4000;
 
                    var message = "Je ne peux pas aller plus loin, patate !";
                    var déplacement = 10;
 
                    event = event || window.event;
                    var keyCode = event.keyCode;
                    if ( event.ctrlKey )
                        keyCode |= KEYMODIFIER_CTRL;
                    if ( event.shiftKey )
                        keyCode |= KEYMODIFIER_SHIFT;
                    if ( event.altKey )
                        keyCode |= KEYMODIFIER_ALT;
 
                    var bord_atteint = false,
                        mettre_à_jour_position = true;
 
                    switch ( keyCode ) {
                        case KEYCODE_LEFT_ARROW:
                            if ( (gauche-déplacement) >= bord.gauche ) {    
                                gauche -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_RIGHT_ARROW:
                            if ( (gauche+largeur+déplacement) < bord.droit ) {
                                gauche += déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_UP_ARROW:
                            if ( (haut-déplacement) >= bord.haut ) {
                                haut -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_DOWN_ARROW:
                            if ( (haut+hauteur+déplacement) < bord.bas ) {
                                haut += déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        default:
                            mettre_à_jour_position = false;
                            break;
                    }
 
                    if ( bord_atteint ) {
                        mettre_à_jour_position = false;
                        alert(message);
                    }
 
                    if ( mettre_à_jour_position ) {
                        mario.style.top  = haut+"px";
                        mario.style.left = gauche+"px";
                    }
                };
 
                if ( document.addEventListener )
                    document.addEventListener('keydown',keydown_listener,true);
                else if ( document.attachEvent )
                    document.attachEvent('onkeydown',keydown_listener);
                else
                    document.onkeydown = keydown_listener;
            })();
        </script>
     </body> 
</html>

avertissement: Comme le script est juste après le html, il est possible que l'image ne soit pas encore disponible lors de l'initialisation des variables 'largeur' et 'hauteur' (chaque ressource génère une connexion à part pour son chargement, suivant la taille ce chargement peut-être plus ou moins long). Une actualisation de la page fera l'affaire, c'est juste un exemple. Pour ton jeu, il faudra sans doute t'assurer que l'image choisie est arrivée avant d'accéder à ses dimensions ('mario.width'). Je ne l'ai pas fait volontairement. Pas plus que je n'ai reporté ton code de sélection de l'image.

**aertys** · 18/01/2015, 17h09

Bonjour,

Merci pour votre aide.

Voici mes nouveaux codes : mario_mouvant_html.js

Code :

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

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
30
31
32
33
34
35
36
37
38
39
40
(function() { 
 
var mybody = document.getElementsByTagName("body") [0];
 
var fig = document.createElement ('figure');
	fig.id = 'aire_de_jeu';
	fig.style.position = 'absolute';
 
var mario = document.createElement ('img');
	mario.alt = "Mario ne s'affiche pas. Veuillez patienter ou recommencez";
	mario.id = 'mario';
	mario.style.position = 'absolute';
 
var choix = prompt ("Veuillez choisir votre personnage." + "\n" +
							"m pour Mario" + "\n" +
							"l pour Luigi" + "\n" +
							"w pour Wario.");
 
	choix = choix.toLowerCase();
 
	switch (choix) {
		case 'm':
			mario.src = "img/Mario.png";
			break;
		case 'l':
			mario.src = "img/Luigi.png";
			break;
		case 'w':
			mario.src = "img/Wario.png";
			break;
		default:			
			mario.src = "img/Mario.png";
			break;
	}
 
fig.appendChild(mario);
 
mybody.appendChild(fig);
 
})();

mario_mouvant.js :

Code :

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

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
(function() { 
 
 
 
var mario = document.getElementById("mario");
var gauche = parseInt(mario.style.left) || 0,
//	droite = mario.style.right,
//	bas = mario.style.bottom,
	haut = parseInt(mario.style.top) || 0,
	largeur = parseInt(mario.width) || 20,
	hauteur = parseInt(mario.height) || 20;
var bord = {
     haut   : 0,
     gauche : 0,
     bas    : (parseInt(aire_de_jeu.clientHeight) || 400) - (parseInt(aire_de_jeu.clientTop ) || 0),
     droit  : (parseInt(aire_de_jeu.clientWidth ) || 400) - (parseInt(aire_de_jeu.clientLeft) || 0)
};
 
var bord_atteint = false,
     mettre_à_jour_position = true;
 
var message = "Je ne peux pas aller plus loin, patate !";
var deplacement = 10;
	event = event || window.event;
 
    function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
        if (element.attachEvent) {
            element.attachEvent ('on' + event, func);
        } 
        else {
            element.addEventListener (event, func, false);
        }
    };
 
addEvent (window, 'keydown', function (event) {
 
     var KEYCODE_LEFT_ARROW  = 37,
          KEYCODE_RIGHT_ARROW = 39,
          KEYCODE_UP_ARROW    = 38,
          KEYCODE_DOWN_ARROW  = 40;
 
                    switch ( event.keyCode ) {
                        case KEYCODE_LEFT_ARROW:
                            if ( (gauche-déplacement) >= bord.gauche ) {    
                                gauche -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_RIGHT_ARROW:
                            if ( (gauche+largeur+déplacement) < bord.droit ) {
                                gauche += déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_UP_ARROW:
                            if ( (haut-déplacement) >= bord.haut ) {
                                haut -= déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        case KEYCODE_DOWN_ARROW:
                            if ( (haut+hauteur+déplacement) < bord.bas ) {
                                haut += déplacement;
                            }
                            else {
                                bord_atteint = true;
                            }
                            break;
 
                        default:
                            mettre_à_jour_position = false;
                            break;
                    }
 
                    if ( bord_atteint ) {
                        mettre_à_jour_position = false;
                        alert(message);
                    }
 
                    if ( mettre_à_jour_position ) {
                        mario.style.top  = haut+"px";
                        mario.style.left = gauche+"px";
                    }
                });
 
 
 
 
 
 
});
 
 
 
 
 
 
})();

mais voici une nouvelle erreur que je ne sais pas résoudre :

SyntaxError: missing ) after argument list mario_mouvant.js:92

Avez-vous une idée ?

**lysandro** · 18/01/2015, 18h07

Les accolades et les parenthéses vont par paire. Recherche si il ne t'en manque pas ou si tu n'en a pas en trop.
"Erreur de syntaxe: il manque une parenthèse fermante ) après une liste d'arguments dans : mario_mouvant.js, ligne : 92"

**Watilin** · 18/01/2015, 18h51

D'après le message d'erreur c'est un problème avec les parenthèses ou les accolades. Tu peux t'aider d'un outil d'indentation automatique pour trouver le problème. Par exemple avec Firefox, fais Maj+F4 pour ouvrir l'ardoise, puis colle ton code et fais Ctrl+P pour le réindenter. Les endroits où l'indentation devient incohérente t'indiquent généralement à quel endroit les choses ont commencé à déconner

**aertys** · 18/01/2015, 20h20

j'ai corrigé mon code mais il y a encore quelques problemes

pour les résoudre, j'aimerais d'abord une explication des lignes suivantes:

Code :

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

                            if ( (gauche-deplacement) >= bord.gauche ) {

Code :

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

                            if ( (gauche+largeur+deplacement) < bord.droit ) {

pourquoi y a-t-il une différence?

**lysandro** · 18/01/2015, 23h33

Code :

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

1
2
3
4
5
6
7
8
9
10
bord.gauche                                            bord.droit
    |                gauche                                 |
    |                 [+]--------+                          |
    |                  |  mario  |                          |
    |                  |<------->|                          |
    |                  | largeur |                          |
    |             <----|         |---->                     |
    |          déplacement     déplacement                  |
    |                                                       |
    [gauche-deplacement]         [gauche+largeur+deplacement]

Une syntax error

JavaScript

Discussions similaires

Partager

Partager