Pages :
Modérateur
Salut,

Je propose de faire un tuto sur les bonnes pratiques dont il faut abuser dans les scripts JS.

Celà comportera entre autres :

- l'accessibilité des scripts
- la séparation structure / présentation / comportement
- les méthodes pour éviter les risques d'interaction avec d'autres scripts (modèle objet, etc...)
- quelques trucs pour faire des scripts plus courts
- l'évitement des bugs suivant les différents navigateurs
- la lisibilité de vos scripts
- l'amélioration de la maintenance
- etc... etc...

'oilà 'oilà... Cà manque je trouve alors je me lance. Smiley biggrin

C'est pour faire patienter parce que je galère comme un fou pour les menus déroulants. Smiley confused Merci Laurent d'avoir réhausser la barre des exigeances mais je n'arrive plus à l'attraper... Smiley lol
Modifié par koala64 (30 Sep 2006 - 23:23)
Modérateur
mmh... oui, je comprends. Smiley smile C'est vrai que ce tuto suppose d'avoir déjà des connaissances en JS/DOM. Le soucis, c'est qu'il est relativement long et que je ne peux pas réellement reprendre tout l'apprentissage du JS. Smiley cligne

Parmi les sites que je laisse en fin de document, en revanche, il y a de quoi se former suffisamment pour comprendre de quoi il retourne.
Modifié par koala64 (03 Sep 2006 - 21:58)
Bonjour,
Intéressant Smiley smile
Peux-tu expliquer en quoi une variable globale ou une fonction déclarée de façon classique peuvent être dangereuses à part un risque de confusion avec un autre script ?
Modifié par chmel (04 Sep 2006 - 00:46)
Modérateur
Salut,

Ce que j'appelle dangereux, c'est uniquement le fait qu'une variable globale est modifiable, rien de plus. Après, la manière dont çà arrive, c'est autre chose. Cà peut venir d'une variable commune entre vos propres fonctions, d'un script récupéré sur le net, d'un cookie, etc... etc... L'impact peut aussi dépendre du script. Quoiqu'il en soit, il vaut mieux éviter au maximum de laisser une variable en dehors d'une fonction et ne pas oublier de la déclarer lorsqu'elle s'y trouve. Smiley cligne
Modifié par koala64 (04 Sep 2006 - 15:47)
Salut Koala,

Je trouve que tes choix de couleurs pour la mise en page sont très bien : c'est reposant et hyper lisible, beaucoup mieux je pense qu'une page à fond blanc qui agresse finalement par sa luminosité.
Et pour la représentation du code le contraste élevé jaune / noir c'est top je trouve.

Je pense avoir tout juste le niveau requis pour pouvoir comprendre ton tutoriel, j'ai le sentiment que cela m'a fait avancé.

J'en serai convaincu quand j'aurai réussi à mettre en place l'exemple avec le <p> et l'alert du paragraphe:
"Séparez comportement, présentation et structure".
Il me tarde d'éssayer d'ailleurs...

Ah ! un petit lien pointant vers une définition de ce que sont "les littéraux" serait bien.

Voila, au vu de mon niveau le peu de critique que je peux t'apporter, mon avis personnel "c'est que j'ai bien aimé".

Et pourquoi cette mouche aux couleurs inversées au plafond ?
je me demande...
mais cela m'a fait me rendre compte qu'un peu de couleurs , une petite image, un minimum de présentation rendent un tutos qui pour certains peuvent être très dur voir incompréhensibles beaucoup moins ennuyants qu'un doc avec fond blanc et typo bleu.
Pas mal.
Moi non plus je ne vois pas en quoi les variables globales sont dangereuses mis à part une possible confusion entre plusieurs scripts.

Sinon, je trouve que c'est un peu lourd d'indiquer un titre "code javascript" avant chaque code : on sait que c'est du js non ? et le HTML on le reconnaît.
Modérateur
Salut,

Suite à certaines remarques ( plus particulièrement bzh, Hum et Olivier en privé ), je viens de procéder à quelques mises à jour. Smiley smile
Entre autres, j'ai revu tous les derniers codes puisque je n'exploitais pas pleinement ce que j'énonçais auparavant.
Il y a aussi quelques explications supplémentaires dont les littéraux ainsi que le pourquoi des méthodes d'initialisation ( dont je n'avais pas parlé ). Smiley cligne

Voilà, j'invite au moins ceux qui ont déjà lu ce tuto à y refaire un tour ( les autres aussi bien entendu ), je pense que c'est plus clair et cohérent.

Je ne cacherais pas que ce sujet me tiens particulièrement à coeur du fait que ce type d'article en français se fait bien trop rare. Va peut-être falloir qu'on le comble un jour ce fichu retard qu'on a pris par rapport à nos amis anglophones ! ( pour ne pas dire américains Smiley ravi )

En tout cas, je remercie déjà tous ceux qui ont participé à ce sujet. Smiley biggrin

@QuentinC :
J'ai supprimé ces titres et surtout, j'ai mis dangereuses entre guillemets ! Smiley biggol
J'ai bien précisé auparavant :
a écrit :
Ce que j'appelle dangereux, c'est uniquement le fait qu'une variable globale est modifiable, rien de plus.

Modifié par koala64 (04 Sep 2006 - 21:46)
Bonjour koala64,

Je trouve aussi le terme "dangereux" comme caractèristique d'une variable globale quelque peu étonnant (cependant, je comprend ce que tu entends par là ; comme le dit QuentinC risque de confusion etc ... mais cela ne repose finalement que sur l'expérience du développeur) car après tout l'intérêt de ces variables (les globales) c'est justement la possibilité d'être réutiliser (modifier et/ou utiliser pour les instructions itératives ...) dans différentes fonctions ... Terme qui, au final, risque de dérouter les éventuelles personnes qui souhaiteraient s'initier aux joies du JavaScript (c'est "dangereux" = je n'utilise pas).

En tout cas, je tiens à te féliciter pour cette bonne initiative !

Bonne continuation.
Romain
Modérateur
Bon, dac... Je capitule... Smiley rolleyes

J'ai mis çà :
a écrit :
Il est préférable de les éviter du fait qu'elles peuvent être modifiées.

Merci pour ton appréciation, Romain. (comme moi ! Smiley ravi )
Hello,

je m'étais abstenu de le dire en me disant que cela relevait du chipotage graphique, mais tu l'as fait de toi même:

La couleur du code présenté sur ligné est nettement mieux, je suis un pouille dalto. (chut c'est un secret...) et le gris , sur une longue portion me génait un peu : là c'est nickel.

Pour le reste je m'attelle a séparer comportement et Xhtml demain dans le cadre de ma formation en autodidacte que j'entreprends, alors je relirai tout, si des choses me viennent je t'en fais part Smiley smile
Modérateur
ok, merci. A ce sujet, n'hésite pas à suivre le lien vers Pompage. Smiley cligne
Et puis pour la bestiole en entête... ben... euh... Smiley idee2 çà doit être parce que j'ai des idées saugrenues ! Smiley lol
Lien vers pompage : J'y manquerai pas Smiley cligne merci.

J'ai jusqu'a présent lu et me suis entrainé sur celui de gilles.chagnon.free.fr.

Petit retour suite a la relecture du tutoriel et quelques heures de manipulations :

Attention, je suis bien conscient que certaines choses que je peux dire peuvent paraître aberrantes voir incompréhensible compte tenu de mon niveau, mais cela peut peut etre apporter une vision de comment un newbie de base peut comprendre ou interpréter certaines informations.

Je peux aussi faire des suggestions de rajouts explicatifs qui selon toi font partie des pré-requis pour ce tutos, je ne fais pas de tri je dis tout ce sur quoi j'ai accroché :

Au début dans "Ne misez pas tout sur Javascript":
a écrit :

"on évite l'ajout de contenu via un document.write(). Les méthodes d'écriture doivent être réservées aux contenus optionnels."

? rajouter entre parenthèses ce qu'est un contenu optionnel, ou dans un pop up css pour pas alourdir visuellement le doc..., pour ma part je ne me représente qu'a moitié ce que peut être un contenu optionnel)

Pour le modèle objet, montrer quelle portion de l'objet est un méthode, quelle portion est une propriété, qu'est ce qu'un argument et ou on le déclare...c'est confus tout ça pour un débutant.

Peut être colorier les arguments, les variables, les méthodes... différemment avec une légende.

Quel est l'avantage de cette méthode, sa particularité...?

Je pense qu'il doit être trop tôt pour moi pour attaquer le concept objet.

J'ai finis dans mes exos d'entraînement par virer les littéraux qui m'embrouillaient à cause du rajout de syntaxe même si je conscient que c'est utile à la lecture, je commence d'ailleurs à m'y faire.

Pourquoi le "p" dans la première alert() est en minuscule et les autres ensuite en majuscules ?

J'ai préféré mettre en Français tout ce qui peut être définis par moi, pour visuellement le différencier du reste.

Expliquer pourquoi à la fin d'une "déclaration" il y a un ; et d'autres fois une virgule.
Je pense que la virgule est pour séparer les fonctions (qui en l'occurrence sont des méthodes ?) au sein de l'objet ?

Je me retiens de poser trop de questions avant d'avoir lu les autres liens...

Pour ce qui est de cette phrase :
a écrit :

"Lorsque vous utilisez un gestionnaire d'événement ( tel que window.onload pour cet exemple ), vous devez nécessairement y affecter une constante. Une méthode qui ne dispose d'aucun argument est constante, ce pourquoi nous créons une méthode d'initialisation pour appeler la méthode __Alert."

Je comprend pas pourquoi : / . Approfondir un peu l'explication peut etre...Je comprend le cheminement dans l'objet mais c'est une complication dont l'interet ou le besoin m'echappe...

En testant j'ai fait 2 fonctions dans un objet, j'ai viré la fonction "constante" : ) et j'ai remarqué que je ne pouvais faire qu'un seul window.onload, hier ça fonctionnais, mais je pouvais en appeler qu'une des deux (fonctions) , j'ai pu ensuite regrouper les deux pour avoir tout les comportements, mais là ça coince sur la fermeture finale } d'après le débugger...

Je me doute que ça doit être du n'importe quoi : ) mais encore une fois si ça peut donner une idée de ce qu'un débutant peut faire : )

Je joint un fichier, c'est pas long, si quelqu'un peut regarder rapidement et m'éclairer un peu sur mon/mes erreurs.

Le fichier, faire un copié collé dans un éditeur car à l'écran les lignes de code se sont étalées...

Merci.
Modifié par Hum (06 Sep 2006 - 16:21)
Modérateur
Salut,

a écrit :
? rajouter entre parenthèses ce qu'est un contenu optionnel, ou dans un pop up css pour pas alourdir visuellement le doc..., pour ma part je ne me représente qu'a moitié ce que peut être un contenu optionnel)
Pour répondre à cette question, je te renvoie sur cette page. Comme tu peux le voir, si tu cliques sur le lien, une popup avec un bouton de fermeture apparaît. Désactive maintenant Javascript et regarde ce qu'il se passe... La page qui se trouvait dans la popup apparaît dans la page courante mais sans le bouton. C'est le bouton le contenu optionnel. Sans JS, il est inutile et c'est pourquoi il est généré via JS. Je disais donc de ne réserver les méthodes d'écriture qu'à cet usage.

a écrit :
Pour le modèle objet, montrer quelle portion de l'objet est un méthode, quelle portion est une propriété, qu'est ce qu'un argument et ou on le déclare...c'est confus tout ça pour un débutant.

Le schéma est le suivant :

var objet =
{
	label1 : type1,
	label2 : type2
};

En gros,

- on déclare chaque objet à l'aide de var
- toute instruction Javascript se finit par un point virgule.
- une propriété de l'objet est représentée par label1 : type1
- chaque propriété d'un objet est séparé par une virgule.

Dans le tuto, je précise à un moment :
a écrit :
(...)On y retrouve la propriété __Alert exprimée à l'aide d'un label puis de deux points suivi du type de la propriété. Cette propriété est une méthode de l'objet oK64.(...)
... car toute méthode est une propriété de l'objet. Une méthode est une suite d'instructions. Elle est inactive tant qu'on ne l'appelle pas (comme une fonction).

exemple de méthode:

var oTest =
{
	__Alert: function( argument )
	{
		alert( argument );
	}
};

Pour appeler ta méthode, tu dois la lancer sous forme d'instruction en renseignant l'argument (s'il y en a un) :

oTest.__Alert("coucou");

Généralement, tu appelles une méthode lorsque tu utilises un gestionnaire d'événement tel que onclick, onmouseover, etc...
Si on prend le code suivant :

var oK64 =
{
	__Alert : function(a)
	{
		var oP = document.getElementsByTagName('p')[0];
		oP.onclick = alert(a);
	}
};
window.onload = oK64.__Alert("coucou");

Tu charges la méthode __Alert au lancement de la page et tu t'attends à ce que çà lance une alerte "coucou" lorsque tu cliques sur le premier paragraphe. Et ben non ! Lorsque la page se charge, l'alerte arrive avant même que tu ais cliqué sur le paragraphe car la variable est automatiquement transmise. J'ai parlé de constante et il est vrai que c'est inadapté... (Je vais corriger) Disons que ce qu'il faut, c'est ne pas passer d'argument sur la méthode que tu envois.
Pour obtenir le résultat souhaité, tu dois donc initialiser ta méthode comme suit :

var oK64 =
{
	__Init : function()
	{
		var oP = document.getElementsByTagName('p')[0];
		oP.onclick = function()
		{
			oK64.__Alert("coucou");
		};
	},
	__Alert : function(a)
	{
		alert(a);
	}
};
window.onload = oK64.__Init;

Comme tu peux le voir, on envoit aucun argument sur le onload ni sur le onclick. Dans ce cas, çà marche correctement.
Disons que maintenant, tu souhaites lancer deux instructions sur le onclick, par exemple, deux alertes (çà pourrait être une autre méthode). Il te faut écrire ceci :

var oK64 =
{
	__Init : function()
	{
		var oP = document.getElementsByTagName('p')[0];
		oP.onclick = function()
		{
			oK64.__Alert("coucou");
			oK64.__Alert("salut");
		};
	},
	__Alert : function(a)
	{
		alert(a);
	}
};
window.onload = oK64.__Init;

Là, tu obtiens bien tes deux alertes dans l'ordre dans lequel sont passées les deux instructions. Tu peux bien sûr en mettre autant que tu veux. Smiley cligne
Si tu lances deux onclick sur le même objet, le second onclick écrase le premier. (principe de fonctionnement du DOM-0) Certes, il existe bien une méthode en DOM-2 pour que çà n'arrive pas (addEventListener) mais on rentre dans la gestion des événements, ce que j'ai souhaité éviter car là, çà devient plus hard à comprendre. IE, comme à son habitude, ne fait pas comme tout le monde ; il se sert de la méthode attachEvent qui n'est pas réellement équivalente à addEventListener) Si je mets çà dans le tuto, à coup sûr, la plupart décroche... C'est d'ailleurs pour çà que j'ai du mal sur le tuto des menus déroulants ! Smiley rolleyes Bref, essaye déjà de t'accomoder du DOM-0, le reste viendra plus tard...

a écrit :
Pourquoi le "p" dans la première alert() est en minuscule et les autres ensuite en majuscules ?
Erreur d'inattention ! Smiley cligne
Lorsque j'ai mis "p", c'était la valeur de l'argument. Dans la méthode, j'ai mis sP qui est l'argument. L'intérêt de créer des fonctions à argument(s), c'est qu'elles sont réutilisables. (Exemple : Les deux alertes du code ci-dessus, je peux mettre n'importe quelle valeur dans mes alertes)

J'espère que c'est un peu plus clair... Smiley rolleyes

C'est vrai que pour comprendre ce tuto, certaines connaissances sont préférables mais ce n'est qu'une question d'exercice. Pour tout dire, je n'ai jamais codé autrement qu'en suivant le modèle objet. Je l'ai suivi dès le départ sans rien connaître au JS donc j'ai toutes les raisons de croire que tu vas y arriver. Smiley cligne

En tout cas, je te remercie d'avoir bosser dessus... Cà me montre quelles sont les imprécisions. Smiley smile
a écrit :
En tout cas, je te remercie d'avoir bosser dessus...

C'est moi qui te remercie Koala, si mes retours te servent ça me fais d'autant plus plaisir.

Oui, tu m'a grandement ouvert les yeux là.

Demain, je continue et te détaille quelle explications m'ont apportés la clarté et ce qui reste (pas grand chose en fin de compte) mystérieux.

J'ai le sentiment d'avoir bien avancé aujourd'hui sur le concept objet grâce à toi.

Smiley smile Smiley clapclap
Modifié par Hum (06 Sep 2006 - 22:41)
Modérateur
De rien. Smiley cligne

J'ai fait les modifs du tuto en fonction de tes remarques, mis à part sur "contenus optionnels" puisque c'est ce dont je parle juste avant.
Juste en passant, je comprends pas réellement pourquoi tu te compliques la vie en utilisant des objets là où ce n'est, à mon avis, pas nécessaire.
Quel intérêt de créer un objet et une méthode d'initialisation ? window.onload = function () { ... } est plus direct, plus conventionnel et plus clair, je trouve. La déclaration d'objets littéraux n'est pas à la portée de tout le monde...

a écrit :
Si tu lances deux onclick sur le même objet, le second onclick écrase le premier.

Au passage, voici une petite astuce pour l'éviter tout en utilisant le DOM0. Ici je prends en exemple window.onload mais le principe est le même :


window.oldOnload = window.onload;
window.onload = function () {
window.oldOnload();
// Instructions à rajouter
};
Modérateur
a écrit :
Quel intérêt de créer un objet et une méthode d'initialisation ?

Je ne crée pas un objet supplémentaire. Il est déjà là. La seule différence réside dans le fait que tu mets function () { ... } là où je mets objet.méthode. Je ne fais que respecter la logique instaurée depuis le départ à savoir faire tourner mon script autour de cet objet ainsi qu'augmenter la lisibilité. Toute mon application se passe dans l'objet et non en dehors.

a écrit :
window.onload = function () { ... } est plus direct, plus conventionnel et plus clair, je trouve.
Rien de t'interdit de le faire, oui, mais de là à dire que c'est plus direct, plus conventionnel et plus clair, je dirais plutôt que c'est une question de goût. L'orientation objet et les littéraux sont là pour rendre le code plus "humain" et donc plus clair. Ici, je n'ai fait que déplacer la déclaration et l'identifier.

a écrit :
La déclaration d'objets littéraux n'est pas à la portée de tout le monde...
Ce n'est qu'un mythe. Mon premier objet fût un littéral. Ce n'est qu'une habitude à prendre. Les littéraux sont justement là pour simplifier l'écriture. C'est un peu comme dire que l'apprentissage de CSS est très difficile. Bizarrement, ceux qui disent çà sont souvent ceux qui ont codés pendant longtemps avec des tableaux. Celui qui commence avec CSS va trouver les tableaux compliqués et peu clairs (et il a raison).

edit : correction de l'orthographe et petit ajout. Smiley langue
Modifié par koala64 (07 Sep 2006 - 14:26)
Pages :