Inclure fichier js dans un autre fichier js

**hannibal974** · 23/05/2014, 17h28

Bonjour, voilà je suis débutant en js et j'ai besoin de votre aider.
Je possède un fichier select.js dans lequel je souhaiterais utiliser une fonction définis dans un autre fichier appelé Post.js.
J'ai essayé plusieurs méthodes que j'ai trouvé sur le net mais je ne comprends pas pk je n'y arrives pas.
Dans mon fichier Select.js je voudrais pouvoir utiliser la fonction EnvoiePost de mon fichier Post.js.
Comment pourrais-je faire cela ?

**Bovino** · 23/05/2014, 17h52

Bah... il suffit d'inclure les deux fichiers dans la page qui en a besoin.

Où est le problème ?

**hannibal974** · 23/05/2014, 18h03

En faite j'appel mon js sur un onclick. Du coup je voudrais appeler la fonction Envoiepost dans plusieurs fichiers du coup je l'ai mis dans un fichier à part.
Mon souci est de réalisé un include comme on le fait en php mais en js

**Bovino** · 23/05/2014, 18h17

Ca n'existe pas. La solution "bancale" est d'ajouter une balise script dans ta page, mais encore une fois, pourquoi ne pas inclure le fichier directement à la création de la page ?

**hannibal974** · 23/05/2014, 18h22

Je voudrais bien mais je ne vois pas comment faire.
J'ai un <td> dans le j'appelle ma fonction SelectPlage(a) sur le onclick.
A l'intérieur de cette fonction js, j'utilise une fonction EnvoiePost (x,y,z) qui va me renvoyé sur une autre page en envoyant des données en post sans créer de formulaire.
Peux-tu m'expliquer comment utiliser la fonction EnvoiePost dans SelectPlage parce que je ne vois vraiment pas comment réaliser cela.

**Bovino** · 23/05/2014, 18h28

Mais une fonction JavaScript est accessible depuis n'importe où dans la page...

Les fonctions n'ont pas besoin d'être dans le même fichier pour pouvoir être appelées.
Sinon, comment pourrait-on utiliser des librairies type jQuery ?

**iakou** · 23/05/2014, 18h28

Bonsoir.

- Vous devez créer un dossier "jvs" qui contiendra les routines javascript qui sont appelées par plusieurs pages.
- puis dans les pages appelantes mettre dans le <head> :

Code :

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

<script type="text/javascript" src="jvs/Envoiepost.js"></script>

Vous pourrez ainsi faire appel à votre fontion "Envoiepost()"

Si vous utilisez un frameset il y a aussi une autre possibilité, mais cela est une autre histoire...

**hannibal974** · 23/05/2014, 18h35

J'ai l'impression que l'on ne se comprend pas très bien ou alors c'est juste moi qui ne comprends pas et c'est bien possible.
Je réexplique mon problème en mettant mon code ça sera surement mieux.
Voilà le tableau que je possède dans ma page (j'utilise Symfony2) avec l'appel à mon fichier SelectPlage.js :

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
18
19
20
21
22
23
<table class="cal_calendrier">
    <tr>
        <th class="cal_calendrier_th">L</th>
        <th class="cal_calendrier_th">M</th>
        <th class="cal_calendrier_th">M</th>
        <th class="cal_calendrier_th">J</th>
        <th class="cal_calendrier_th">V</th>
        <th class="cal_calendrier_th">S</th>
        <th class="cal_calendrier_th">D</th>
    </tr>
    {% for a in 0..5 %}
        <tr>
        {% for b in 0..6 %}
            <td class="cal_calendrier_td">
            {% if tab[a][b] is defined %}
                    <p onclick="SelectPlage('{{tab[a][b]}}', '{{chaine}}', '{{date}}')">{{tab[a][b]}}</p>
            {% endif %}
            </td>
        {% endfor %}
        </tr>
        </br>
    {% endfor %}
</table>

Mon fichier SelectPlage.js est le suivant :

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
function SelectPlage(jour, chelem, date)
{   
    /*var filename = './Post.js';
    document.write("<script type='text/javascript' src='"+filename+"'></script>" );*/
    var zero = "0";
    var lp = date.split('/');
    if(jour.length == 1){
        jour = zero.concat(jour);}
    var date = jour.concat('/');
    date = date.concat(lp[1].concat('/'));
    date = date.concat(lp[2]);
    var tab = new Array();
    tab[0] = chelem;
    tab[1] = date;
    post('./recapitulatif', tab, "post");
}

Je possède un autre fichier nommé Post.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
function post(path, params, method)
{
    method = method || "post"; // Set method to post by default if not specified.
 
    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", method);
    form.setAttribute("action", path);
 
    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);
 
            form.appendChild(hiddenField);
         }
    }
 
    document.body.appendChild(form);
    form.submit();
}

Comme on peux le remarquer je veux utiliser la fonction post dans ma fonction SelectPlage.
En php j'aurai fait un simple include pour pouvoir l'utiliser mais je ne sais pas comment faire en js.
Pouvez-vous m'expliquer ce que je dois faire à mon code pour pouvoir faire cela ?

**Bovino** · 23/05/2014, 18h40

je veux utiliser la fonction post dans ma fonction SelectPlage

Dans ce cas, et comme déjà dit dès le premier message, il suffit d'ajouter Post.js dans la page !

**iakou** · 23/05/2014, 18h55

Bonsoir.
Vous pouvez faire comme le modérateur vous l'a suggéré dès le début.
Néanmoins, si vous souhaitez faire des "routines" un peu à la manière des "include" PHP, ce que je vous ai indiqué reste valable.
Cdlt

**Watilin** · 24/05/2014, 16h27

Je n'interviens pas pour donner une solution : Bovino et Iakou s'en sont chargés.

Mais j'ai remarqué quelque chose.

Envoyé par hannibal974

Voilà le tableau que je possède dans ma page (j'utilise Symfony2) avec l'appel à mon fichier SelectPlage.js :

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
<table class="cal_calendrier">
    <tr>
        ...
    </tr>
    {% for a in 0..5 %}
        <tr>
        {% for b in 0..6 %}
            <td class="cal_calendrier_td">
            {% if tab[a][b] is defined %}
                    <p onclick="SelectPlage('{{tab[a][b]}}', '{{chaine}}', '{{date}}')">{{tab[a][b]}}</p>
            {% endif %}
            </td>
        {% endfor %}
        </tr>
        </br>
    {% endfor %}
</table>

Symfony c'est du code serveur. Tes variables serveur {{chaine}} et {{date}} sont-elles correctes au moment où tu les utilises ? Montre-nous un extrait du code HTML généré s'il-te-plaît (Ctrl+U dans ton navigateur). Ça va peut-être révéler un problème avec le onclick qu'on n'avait pas encore repéré.

Tiens d'ailleurs, petit conseil pour l'ergonomie :

Code CSS :

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

p[onclick] { cursor: pointer; }

Autre chose : ce </br> qui est à la fois syntaxiquement incorrect (c'est <br />) et incongru ici : tu n'as pas besoin de faire un saut de ligne entre deux rangs de tableau.

Une remarque à propos de la tentative d'include que tu as mise en commentaire. Ça ne peut pas marcher avec document.write : ça va juste vider ta page et tu seras bien embêté.

Voici la version non destructrice de ce que tu voulais faire :

Code :

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

1
2
3
var $script = document.createElement("script");
$script.src = './Post.js';
document.head.appendChild($script);

(Note : document.head est relativement récent, j'aurais pu écrire document.getElementsByTagName("head")[0] mais je ne voulais pas surcharger mon exemple.)

Si tu mets ces trois lignes de code au début de ta fonction SelectPlage, voilà ce qui va se passer :

L'exécution de SelectPlage est interrompue ;
Le fichier "Post.js" est recherché, puis éventuellement téléchargé s'il est sur un serveur distant, en tout cas il est chargé en mémoire ;
Quand le chargement du fichier se termine, il est passé à l'interpréteur qui va l'interpréter de manière asynchrone pour permettre à SelectPage de reprendre son exécution ;
Par conséquent, quand l'exécution de SelectPage reprend, la fonction post n'est pas encore disponible car le fichier est en cours d'interprétation.

Bien entendu, la solution proposée par Bovino et Iakou est la meilleure, car de loin la plus simple. Cependant, si un jour tu as besoin de charger dynamiquement un script, la solution est de surveiller l'évènement load que le script doit lancer quand il est prêt, c'est-à-dire quand il a été chargé et interprété et exécuté. Voici un exemple :

Le fichier HTML, nommé test.html :

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
<script>
 
function test( ){
   var $script = document.createElement("script");
   $script.addEventListener("load", function( ){
      console.log("externe.js a lance son load"); // 3
   });
 
   $script.src = 'externe.js';
   document.head.appendChild($script);
 
   console.log("fin de l'execution de test"); // 1
}
 
</script>
 
<input type=button value=test onclick="test()">

Le fichier JavaScript à charger, nommé externe.js :

Code :

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

console.log("externe.js a ete execute"); // 2

Quand tu charges la page HTML et que tu cliques sur le bouton de test, la console affiche ceci :

Code console :

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

1
2
3
"fin de l'execution de test"                    test.html:12
"externe.js a ete execute"                      externe.js:1
"externe.js a lance son load"                    test.html:6

Ce qui montre bien dans quel ordre les choses se sont déroulées.

**ascito** · 25/05/2014, 02h23

de mon point de vue, tu devrais différencier déjà 2 choses :

1) les requêtes GET, qui en règle générales permettent et servent à "télécharger" les script et code html sur les clients
2) les requête POST qui ne font que transmettre des données de client / serveur ou serveur / serveur

tout fichier demandant un lecture distante est en GET

toute requête demandant une "vérification" supplémentaire par le serveur ( pour les champs de formulaires par exemple ) est écrit et envoyé via la variable _POST

ce sont deux routes différentes, défini depuis le serveur via les "variables prédéfinies" , http://www.php.net/manual/fr/reserved.variables.php

le fait d’être en environnement node ne change rien a ce principe, tu a un "tuyau" ouvert pour le GET et un pour POST ou PUT ou...

Inclure fichier js dans un autre fichier js

JavaScript

Discussions similaires

Partager

Partager