aide sur séparation JS et HTML

**tallent_e** · 02/07/2012, 23h32

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 :

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
 
<!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

**andry.aime** · 03/07/2012, 07h32

Bonjour,

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

Code :

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

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 html :

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

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

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 :

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

A+.

**tallent_e** · 03/07/2012, 23h22

Merci de ta réponse Andry.

Voici ce que çà donne :

Mon fichier index.htm

Code html :

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
 
<!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 :

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

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 ...

**andry.aime** · 04/07/2012, 07h09

Bonjour,

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

Code html :

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
 
<!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>

**billy101** · 04/07/2012, 09h22

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

**tallent_e** · 04/07/2012, 19h54

bonsoir, merci de vos réponses.

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

Code :

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

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 ...) ??

aide sur séparation JS et HTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager