aide sur séparation JS et HTML

Version imprimable

Bonjour,

J'ai une question de la famille "débutant".
Je souhaite faire des graphiques qui tiennent la route esthétiquement. Rickshaw (on dit "librairie js" ?) semble convenir à mes besoins.

Voici le code sur lequel je souhaite intervenir:

http://code.shutterstock.com/rickshaw/
Code:

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 <!doctype html> <script src="/vendor/d3.min.js"></script> <script src="/vendor/d3.layout.min.js"></script> <script src="/rickshaw.min.js"></script> <div id="chart"></div> <script> var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 300, height: 200, series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] }); graph.render(); </script>
Je veux que le graph apparaisse au chargement de la page dans le navigateur.
Je veux créer un répertoire standard pour mon projet, c'est-à-dire séparer HTML et javascript.

quelqu'un peut-il m'indiquer comment aboutir à mes fins ? (ce que je prends du code original pour le glisser dans un .js et comment j'appelle la fonction pour qu'elle soit appelée à l'affichage).

quelqu'un peut-il aussi me préciser le sens de : <div id="chart"></div> ??
comment le navigateur associe-t'il le nom "chart" à la fonction en question??

merci :)

Bonjour,

Met cette partie de code dans un fichier js que tu appelleras dans la page :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var graph = new Rickshaw.Graph( { element: document.querySelector("#chart"), width: 300, height: 200, series: [{ color: 'steelblue', data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ] }] });
Ensuite, tu appelles graph.render(); dans le onload du body.

Code:

<body onload="graph.render();">

Citation:

quelqu'un peut-il aussi me préciser le sens de : <div id="chart"></div> ??
comment le navigateur associe-t'il le nom "chart" à la fonction en question??

Indice :

Citation:

element: document.querySelector("#chart"),

Citation:

<div id="chart"></div>

:aie:

A+.

Merci de ta réponse Andry.

Voici ce que çà donne :

Mon fichier index.htm

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
 
    <head>
        <title>Tests de graphiques Rickshaw</title>
    </head>
 
    <script src="../vendor/d3.min.js"></script>
    <script src="../vendor/d3.layout.min.js"></script>
    <script src="../rickshaw.min.js"></script>
    <script src="Example01.js"></script>  
 
    <div id="chart"></div>
    <body onload="graph.render();"></body>
 
</html>

Et voici mon fichier javascript Example01.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
// Example01.js http://code.shutterstock.com/rickshaw/tutorial/introduction.html
 
var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];
 
var graph = new Rickshaw.Graph( {
    element: document.querySelector("#chart"),
    width: 580,
    height: 250,
    series: [ {
        color: 'steelblue',
        data: data
    } ]
} );

mais çà ne fonctionne pas. bah ...

Bonjour,

Il faut mettre les JS dans la balise head et les contenus de la page dans body.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
 
    <head>
        <title>Tests de graphiques Rickshaw</title>
        <script src="../vendor/d3.min.js"></script>
        <script src="../vendor/d3.layout.min.js"></script>
        <script src="../rickshaw.min.js"></script>
        <script src="Example01.js"></script>
    </head>
 
    <body onload="graph.render();">
        <div id="chart"></div>
    </body>
 
</html>

04/07/2012, 09h22
billy101

Les fichiers js s'appelllent toujours dans la balise head. Ton contenu HTML va dans le body de ton document

bonsoir, merci de vos réponses.

du coup, le contenu de mon fichier javascript Example01.js, je le laisse comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
var data = [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 17 }, { x: 3, y: 42 } ];
 
var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
        width: 580,
        height: 250,
        series: [ {
                color: 'steelblue',
                data: data
        } ]
} );

ou je le transforme (en je ne sais quoi ...) ??

04/07/2012, 21h50
tallent_e
Bonsoir ! ... encore.

À la base mon erreur venait de ....
Code:

1 2 3 4 <script src="../vendor/d3.min.js"></script> <script src="../vendor/d3.layout.min.js"></script> <script src="../rickshaw.min.js"></script>
Bien évidemment, il faut remplacer les .. par le nom du dossier contenant les fichiers en javascript.

Tout çà me rappelle les débuts [très] douloureux avec c++, quand je passais des jours à installer une librairie ... lol

C'est en forgeant .....

En tous les cas, merci pour le coup de pouce :)