JeuWeb Créez votre jeu par navigateur !

php_addict · (Modification du message : 06-03-2010, 10:12 PM par Anthor.)

bonjour

j'ai une toute petite question spécifique à Javascript qui peut paraitre idiote (j'espere que le titre du topic convient):

Grosso modo, j'ai un script js (script.js) dans le <head> et des variables dans la page html (entre <body></body> ) qui sont utilisées par script.js

Je me demande si ce qui suit est "la bonne facon" de faire:

Code :
<html>

<head>

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

</head>

Bla bla bla

Bla bla bla

Bla bla bla

<script type="text/javascript">

var MaVariable=123;

</script>

</html>

est ce recommandé?
est ce fréquement utilisé?
Y a t il des inconvenient?

Ca fonctionne bien, mais au cas où ce n'est pas recommandé de faire ceci, je vais avoir du mal à faire autrement...car certaines de mes variables sont générées entre les balises <body></body>

En vous remerciant une fois de plus de m'avoir lu, et en espérant ne pas trop être un boulet pour le forum...

bonne soirée

**Sephi-Chan** · 06-03-2010, 09:19 PM

Peux-tu nous montrer ton script externe, afin de voir comment tu utilises ces variables définies dans le corps de la page ?

Dans l'idée, ce que tu fais n'est pas un problème : certains scripts ont besoin d'informations liées au contexte courant de la page (telle que générée par le serveur).

Ensuite, il y a plusieurs manière de faire, c'est pour ça qu'il nous faudrait ton script (au moins partiellement) pour t'aider au mieux.

Je cherche également quelques pistes pour concevoir des interfaces riches en Javascript (avec des composants qui changent d'état, etc.) et je dois reconnaître qu'aucune n'est réellement à mon goût. Cependant, je pense avoir quelques pistes à te donner.

Sephi-Chan

Ps : le titre est bien puisqu'il permet de deviner ce qu'on va trouver dans le sujet. Wink

php_addict · 06-03-2010, 09:41 PM

salut ;-)

donc dans le corps de la page , dans le <body> je défini des variables comme ceci (ce code JS est généré en php):

Code :
<script type="text/javascript">

var Ressources= 1234;

var production_horaire= 100;

</script>

voici comment j'utilise les variables dans le script externe, celui loadé dans le <head>:

Code :
Ressources = Ressources + ( production_horaire/3600);

document.getElementById('ressources').innerHTML = parseInt(nb_Ressources);

merci de ton aide ;-)

PS: merci d'avoir modifier le titre de mon topic

Allwise · (Modification du message : 06-03-2010, 09:54 PM par Allwise.)

Salut, le problème avec cette méthode est que dans ton script "externe" (qui n'est pas externe en réalité puisqu'il est sur ton serveur) est que tu fais appel à des données qui ne sont pas encore chargées.
Alors ça peut marcher si le contenu de la page se charge avant le fichier javascript, mais dans le cas inverse tu auras une erreur.

Si le bout de script dans ta page n'est responsable que de la déclaration de variables, pourquoi ne pas le placer dans le header de ta page ?

Code :
<script type="text/javascript">

var Ressources= 1234;

var production_horaire= 100;

</script>

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

Si vraiment tu es obligé de mettre tes variables dans le body, tu peux aussi créer une fonction dans script.js et l'appeler après la déclaration de tes variables, ou encore charger le code de script.js une fois que la page est chargée, avec window.onload par exemple.

Sinon, une bonne pratique est de situer tes variables et fonctions dans un "espace de nom", qui n'est en fait qu'un objet, et de travailler dedans plutôt que d'utiliser des variables globales.

**Sephi-Chan** · (Modification du message : 06-03-2010, 10:10 PM par Sephi-Chan.)

Pas forcément Allwise, il suffit que son script externe patiente jusqu'à ce que le DOM soit complètement chargé. On peut le faire comme tu l'indiques avec onload mais ça n'est pas une façon propre de faire (car on écrase les éventuels comportements actuels au lieux d'en ajouter) : mieux vaut utiliser les eventListeners de Javascript (qui ont le défaut de poser quelques problèmes de compatibilité) ou mieux encore : utiliser une librairie qui t'évitera de maintenir plusieurs versions de ton code (à cause des différences entre navigateurs).

Avec jQuery ça donne :



$(document).ready(function(){

  // Tout ce que tu veux…

});

Ton usage est effectivement une possibilité : ça a l'avantage d'être simple et fonctionnel.

Tu peux aussi utiliser des objets en Javascript, ça permet de concentrer la logique propre à un élément et éviter les collisions de variables. Ça demande un niveau un peu plus avancé en Javascript.

Une autre approche est de transmettre tes données à Javascript grâce à HTML, comme je le montrais dans une autre discussion. C'est une fonctionnalité qu'officialise HTML5, mais ça fonctionne déjà partout (puisqu'on utilise juste des attributs).

Par exemple :



<div class="slide content-page" id="slide-2" data-type="content_page" data-current-step="0" data-steps="3">

  <!-- … -->

</div>

Ensuite, récupérer tes données est un jeu d'enfant et ça te permet d'avoir tout ton Javascript dans le script externe.



var slide = $('slide:first');



slide.attr('data-current-step') // Retourne "0".

// Encore mieux, tu peux changer ces valeurs en cours de route !

slide.attr('data-current-step', '24');

Je pense que cette technique est la meilleur chose à faire.
En revanche, pour être certain d'avoir un code robuste, je te conseiller d'utiliser une librairie comme Prototype, MooTools ou jQuery.

Sephi-Chan

Ps : De rien pour le titre, c'est pour utiliser le récent mécanisme de tag et être encore plus précis (mais le titre initial était largement convenable). Wink

php_addict · 07-03-2010, 12:18 AM

merci beaucoup pour vos reponses...

si je comprends bien (je n'en suis pas certain d'ailleurs); j'ai le choix entre:

- initialiser mes variables avant mon script
- utiliser un framework comme Jquery
- passer mes variables dans des <div> html ...(tiens ca s'appelle comment cette technique ???)

donc, et dites moi si je me trompe:

- le mieux est d'initialiser mes variables avant mon script. @ Allwise: c'est bien ce que tu veut dire en disant "une bonne pratique est de situer tes variables et fonctions dans un "espace de nom"

- ensuite vient la solution des <div> @ sephi: très astucieux, mais quand tu dis "C'est une fonctionnalité qu'officialise HTML5, mais ça fonctionne déjà partout", ca veut dire que ce n'etait pas le cas avant?

- puis dans un soucis de simplicité, un framework...

pas si simple que ca en fait mon probleme...

**Ter Rowan** · 07-03-2010, 12:23 AM

il n 'y a pas de lien entre le framework type jquery et les possibilités

tu n'as en fait que deux possibilités proposées (bon j'en vois pas d'autres, et j'aime bien celle de sephi, même si je n'osais pas l'utiliser, puisque pas encore valide) [initialiser] ou [attribut]

la question du framework est autre : utiliser un framework pour profiter des événements "unifiés" quelque soit les navigateurs, etc...

php_addict · 07-03-2010, 12:38 AM

merci

je vais essayer d'opter dans un 1er temps pour "l'initialisation des variables avant le chargement des script externe"

donc une solution serait (de haut en bas comme dans le html):

-1 j'initialise mes variables
-2 je charge mes .JS externe
-3 les evenements (genre onmouseover et compagnie)

ca parait logique, mais penible à réaliser...faut que je revois mon code php pour générer les variables JS avant le reste...

ceci dit, jusqu'à maintenant, je faisais n'importe quoi avec le javascript, et les navigateurs que j'ai testés semblent eux m'avoir bien compris Wink

. j'avais beau faire n'importe comment dans n'importe quel sens, ca fonctionnait toujours plus ou moins bien Wink

Allwise · 07-03-2010, 12:58 AM

Les attributs personnalisés commencent en effet à se répandre dans les librairies JS, j'en ai vu dans ExtJs ( utilisés depuis la version 2.2 ) et effectivement ça passe partout.

Sinon php_addict, si tu as ces petits désagréments de devoir revoir ton code PHP, c'est parce que tu fais tout dans un même fichier ( traitement des datas + affichage ) ? Si oui, tu peux peut-être en profiter pour séparer ces deux parties, voire te documenter sur le MVC, l'occasion s'y prêterait bien Wink

**Sephi-Chan** · 07-03-2010, 01:29 AM

L'utilisation d'une librairie Javascript n'est pas une obligation pour mettre en place ce genre de technique.
En revanche, c'est juste indispensable pour un développement de qualité : c'est bien trop chiant d'écrire du code cross-browser, et ce n'est vraiment pas à la portée de tout le monde. Smile

Concernant l'utilisation d'attributs personnalisés, c'est effectivement une technique courante est terriblement efficace puisqu'elle repose sur le langage lui même : XML est prévu pour être extensible, donc autant profiter de cette fonctionnalité et étendre nos possibilités, d'autant que ça n'a aucun défaut de poids (la non-validité au DTD n'a aucune importance : ça ne brise pas la sémantique et ça reste du XML bien formé). Smile

L'avantage de HTML5, c'est qu'il rend ça officiel, en faisant préfixer le nom de l'attribut par data- afin de le séparer des attributs courants d'un élément.

Pour ton problème de placement du code source Javascript, c'est encore un exemple en faveur des frameworks qui fournissent un contrôle du rendu. Comme d'habitude : d'autres personnes y ont déjà pensé et on proposé des solutions robustes. Smile

C'est tout ton fonctionnement qui est à revoir : il faudrait capturer le rendu de tes pages pour pouvoir le ressortir ensuite. La partie sur content_for des guides de Rails pourra te donner une idée d'implémentation, mais je doute que ton système soit prévu pour gérer ce genre de choses.

C'est sans doute la solution la plus difficile à implémenter quand on travaille sans outils.

Sephi-Chan

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	[SVG] Charger un SVG externe	Maz	2	2 439	30-08-2011, 07:35 PM Dernier message: Maz
	Utiliser des variables depuis un script distant	Sephi-Chan	12	4 321	14-01-2010, 06:04 PM Dernier message: Sephi-Chan