Discussion :

[nadfri2019]

Bonjour, la question peut paraître trivial pour certains, mais je n'ai pas trouvé un bon tuto au sujet des import/export en Javascript.

J'ai plusieurs page HTML utilisant le même script mise à part une ou 2 fonctions qui sont modifiés spécifiquement pour chacune d'elle.

Ce qui fait que j'ai au final un script par page. Et quand je veux faire une petite modification, je dois aller modifier tous les scripts.

J'aimerai bien avoir un script unique que toutes les pages utilisent, et donc facilement modifiable, et juste un petit script avec ma fonction spécifique pour chaque page.

La question est, comment faire pour que le script principale puisse utiliser une fonction et des variables qui sont dans un autre script?

Cdt.

[javatwister]

Salut,

Je ne sais pas où tu as "cherché" mais c'est étonnant que tu n'aies pas trouvé de réponse!

Principe:
Imaginons que tu veuilles afficher la date du jour sur toutes les pages de ton site, en haut de page.

1) Tu crées ton script qui affiche la date:

Code javascript :

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

1
2
3
4
5
6
7
8
window.addEventListener("load",function(){
	const d=document.createElement("div");
	d.textContent=`Nous sommes le ${new Intl.DateTimeFormat(
		undefined,
		{day:"numeric",weekday:"long",month:"long",year:"numeric"})
		.format(new Date())}.`
	document.body.insertBefore(d,document.body.firstChild);
});

2) Tu copies ce code dans un fichier vierge que tu appelles date.js.

3) Tu insères dans le head de tes pages la ligne suivante:

Code :

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

<script src="date.js"></script>

Voilà.

[nadfri2019]

En fait,

Pour etre plus clair,

je suis entrain de faire un casse-brique avec différents niveaux. Un niveau par page.

Le script est identique sur toutes pages sauf la fonction qui s'occupe de l'affichage des bricks, sinon tous les niveaux seraient identiques .

Je veux isoler cette fonction dans un autre script, afin d'eviter à avoir un gros script à chaque page, et surtout pour la mise à jour du script en cas de bug.
A l'heure actuelle, quand je découvre un bug, je dois mofidier le code sur chaque page.

Voici un schema:
page 1 contient script 1
page 2 contient script 2
page 3 contient script 3

et je voudrais avoir:

page 1,2,3 pointe vers le même script + script contenant uniquement la fonction de l'affichage des briques personnalisées

Je sais qu'il faut faire le script de la fonction dans un fichier séparé avec un export, afin de pouvoir l'importer dans le fichier Js principale, mais je n'arrive pas à trouver la procédure.

[javatwister]

je n'arrive pas à trouver la procédure.

Ah bon? A quoi a servi ma réponse, alors?

[nadfri2019]

J'arrive pas à m'exprimer clairement .

Je n'ai pas de problème à lancer un script via le head, le problème est plutot le suivant:

J'ai un script principal contenant 3 fonctions par exemple:
Script.js =>
-init()
-construction()
-affichage() cette fonction a besoin de la fonction construction() pour fonctionner

je veux isoler la fonction "construction()" dans un autre script, car sur toutes mes pages, init() et affichage() sont toujours identiques.

Une fois construction() dans un fichier séparé, comment faire pour l'appeler dans le fichier principale, vu qu'il ne peut pas être reconnu en l'etat?

[javatwister]

Code :

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

<script src="fichier_qui_contient_construction.js"></script>

[nadfri2019]

J'ai compris mon erreur, en effet ta méthode marche

Comme j'ai l'habitude de mettre des window.onload en debut de tout mes scripts, ca faisait bugger l'app.

Et en le retirant simplement du script construction(), ca marche nickel .

Moi qui me prenait la tete avec import function ect....

Je te remercie.

[nadfri2019]

Dernière question, comment fait-on pour les variables?

Afin qu'elles soient reconnues indépendamment du fichier?

[javatwister]

Ben il faudrait un exemple, un bout de code, quoi...
Mais une variable globale dans un fichier externe reste une variable accessible à tous les niveaux du code;

[nadfri2019]

En reprenant ton exemple:

Code HTML :

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

1
2
3
4
5
6
7
8
<html>
<head>
          <script src="date.js"></script>
	  <script src="script.js"></script>
</head>
<body>
</body>
</html>

date.js:

Code :

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

1
2
3
4
5
6
7
8
window.addEventListener("load",function(){
	const d=document.createElement("div");
	d.textContent=`Nous sommes le ${new Intl.DateTimeFormat(
		undefined,
		{day:"numeric",weekday:"long",month:"long",year:"numeric"})
		.format(new Date())}.`
	document.body.insertBefore(d,document.body.firstChild);
});

script.js

Code :

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

console.log(d.textContent);

Sur la console, on a :

ReferenceError: d is not defined

[javatwister]

C'est parce que d est défini dans un gestionnaire d'événément; même s'il s'agit de "window", la variable n'est pas considérée comme globale;
dans ce cas précis, soit tu déclares ta variable avant le gestionnaire "load", soit tu créées un objet global dans lequel tu stockes toutes tes variables:

Code javascript :

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

1
2
3
4
5
const v={
   briques: 10000,
   balle:true,
   score:0
}

et quand tu as besoin d'une variable, tu appelles v.briques, v.balle, etc.

[nadfri2019]

J'ai finalement réussi à déclarer mes variables globales en dehors du window.onload, par contre j'ai du mettre mes 2 scripts à la fin de la balise "body".

Sinon quelques une de mes variables étaient soit pas initialisé, ou bien à la valeur null.

En général c'est du à quoi?

[javatwister]

Si tu définis "d" comme un élément de la page, il faut que cet élément existe au moment où tu l'appelles;
Donc, si tu l'as appelé en dehors de "onload" et avant que l'élément soit chargé, tu provoques une erreur;

[nadfri2019]

A partir de quel moment on peut savoir quand un élément est chargé ou non?

Et pourquoi l'emplacement du fichier JS à encore une importance (head, fin de body etc...)?

[javatwister]

Le fichier html est interprété de haut en bas...