Test de code sur navigateur

**garheb** · 17/10/2013, 17h53

Bonjour,

J'ai un souci avec un code contenant 5 "classes". Lorsque je teste ce code sous NetBeans à l'aide du plugin NodeJS le code fonctionne très bien. Par contre, lorsque je le teste dans une page web (avec Firefox ou Chromium) plus rien ne fonctionne.

Voici le 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
//shape.js
(function(global){
 
    function Shape(id, name) {
        this.id = id;
        this.name = name;
        this.nodes = [];
    }
 
    Shape.prototype.setNodes = function(nodes) {
        alert(this.nodes);
        for(var i=0;i<nodes.length;i++) {
            this.nodes.push(nodes[i]);
        }
 
    };
 
    Shape.prototype.ajoutNode = function(node) {
        this.nodes.push(node);
    };
 
    Shape.prototype.getNombreNodes = function() {
        return this.nodes.length;
    };
    Shape.prototype.getName = function() {
        return this.name;
    };
    Shape.prototype.toString = function () {
        return 'id: ' + this.id + ' nom: ' + this.name;
    };
    Shape.prototype.toSvgPath = function() {
        var toSvg='';
        for (var i=0;i<this.nodes.length;i++) {
            if(i===0) {
                toSvg += 'M ' + this.nodes[i][0] + ' ' + this.nodes[i][1];
            } else {
                toSvg += ' L ' + this.nodes[i][0] + ' ' + this.nodes[i][1];
            }
        }
        return toSvg;
    };
})(this);

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
//building.js
"use strict";
(function () {
    function Building(id, nom) {
        Shape.call(this, id, nom);
    }
    Building.prototype = new Shape(null, null);
    //var forme = new Shape(1, 'truc');
    Building.prototype.toString = function () {
        return Shape.prototype.toString.call(this) + ' aire: ' + this.area;
    };
    Building.prototype.calculAire = function () {
        var area = 0., size = this.nodes.length;
            if( this.nodes.length > 2 ) {
                for( var i = 0; i < size - 1; i++) {
                    area += (this.nodes[i].x * this.nodes[i+1].y )-( this.nodes[i + 1].x * this.nodes[i].y);
                }
            }
            this.area = Math.abs(area / 2);
    };
    Building.prototype.getArea = function() {
            return this.area;
        };
    Building.prototype.setArea = function(aire) {
        this.area = aire;
    };
}(this));

Le code de test sous NetBeans:

Code :

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

1
2
3
4
5
6
var a = new Shape(1, 'dfsfd');
console.log(a.toString());
 
var nouvelleShape = new Building(1, 'abc', 'fdsdf');
nouvelleShape.setNodes([[23,45],[3,5],[12,0]]);
console.log(nouvelleShape.toSvgPath());

Le code de test sur navigateur:

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
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <div id="truc">sdfsd</div>
        <script src="JS/Objets/shape.js"></script>
        <script src="JS/Objets/road.js"></script>
        <script src="JS/Objets/building.js"></script>
        <script src="JS/Objets/amenity.js"></script>
        <script src="JS/Objets/natural.js"></script>
        <script>
            var nouvelleShape = new Shape(1, 'abc');
            alert(nouvelleShape.toString());
            nouvelleShape.setNodes([[23,45],[3,5],[12,0]]);
            var nouvelleRoute = new Road(2, 'route truc', 'autoroute'); //road.create('route truc', 'autoroute');
 
            var contenu = document.getElementById('truc');
            alert(contenu.innerHTML);
            if(contenu!==undefined) {
                contenu.innerHTML = nouvelleShape.toString();
                contenu.innerHTML += '<br />' + nouvelleShape.tailleNodes();
                contenu.innerHTML += '<br />' + nouvelleShape.toSvgPath();
                contenu.innerHTML += '<br />' + nouvelleRoute.toString();
            }
        </script>
    </body>
 
</html>

Le premier alert() ne fonctionne pas. Le new Shape() ne fonctionne donc pas.

Merci d'avance pour votre aide. N'hésitez pas à me signaler des choses illogiques, c'est la première fois que j'utilise les prototypes.

**garheb** · 17/10/2013, 18h32

Bon à priori j'ai trouvé, le problème était que j'ai entouré mon code de closures.

**SylvainPV** · 20/10/2013, 02h06

Tout à fait, les closures isolent le scope de tes classes donc impossible de les utiliser dans un autre script. Il te faut les rattacher à un contexte global, par exemple en écrivant

Code :

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

global.Shape = Shape;

**garheb** · 20/10/2013, 21h55

Merci.

Test de code sur navigateur

JavaScript

Discussions similaires

Partager

Partager