¤ AJOUT TUTO ¤ Javascript : Tutoriel de bonnes pratiques

(reprise du message précédent)

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.
Modifié par koala64 (07 Sep 2006 - 14:26)

Salut Koala,

Si mes remarques/questions et cet échange se transforment en cours particulier et ne t'apportent plus grand chose, dis le moi, je comprendrai tout à fait.

J'ai compris pour le contenu optionnel, ta modification dans le tuto est bien mieux je trouve.

Pour ce qui est des propriétés et méthodes, c'est bien plus clair aussi, en effet ce qu'il y a dans le tutos suffisait.

Quand tu dis qu'on ne peut pas faire deux onclick dans un objet, même si c'est sur des éléments différents ?
Pour ce qui est du rajout d'infos sur addeventlistenner, je suis d'accord, ça fait beaucoup.

Cette phrase : "commenter vos scripts mais ni trop ni trop peu." serait plus clair avec "ni trop ni pas assez" : chipotage.

Des caractères en gras pour les portions importantes comme tu l'a fait dans ton post plus haut pour m'expliquer propriétés/méthodes pourrait être bien, au milieu d'un discours technique inhabituel, pointer l'info primordiale c'est bien je trouve.

Pour ton explication sur le fait que les fonctions à arguments sont réutilisables, c'est clair je trouve mais une autre chose m'échappe par rapport aux arguments, j'en parle plus bas.

Ton exemple en 3 phases dans le post ci dessus commençant par une alerte qui est transmise directement sans attendre le onclick : j'ai retenu, ne pas passer d'argument dans la méthode qu'on envoi, j'ai donc fait ça sur le modèle de la première phase :

var oK64 =

{

	__Alert : function()

	{

		var oP = document.getElementsByTagName('p')[0];

		oP.onclick = alert('coucou !');

	}

};

window.onload = oK64.__Alert();

Là, pour moi, la fonction __Alert envoyé n'a pas d'argument et le coucou ! dépend du onclick.
Ben non ça donne le même résultat, ma variable est transmise directement quand même, alors que dans ma logique elle est soumise à la condition d'un
onclick... il ne devrait donc, rien se passer tant qu'on a pas cliquer.

Aucun changements donc.

C'est arrivé à la seconde phase qu'un autre truc m'échappe :

var oK64 =
{
	__Init : function()

	{
		var oP = document.getElementsByTagName('p')[0];
		oP.onclick = function()
		{
			oK64.__Alert("coucou");
		};
	},

	__Alert : function(d)
	{
		alert(d);
	}

};

window.onload = oK64.__Init;

Je comprends qu'on "appel" __Alert : function(d) dans __Innit() avec oK64.__Alert("coucou");
la liaison entre les deux est donc là.

Ce que je ne comprend pas c'est comment alert(d) va chercher la string "coucou" ?

les arguments "a", je les ai remplacer par "d" et ça change rien, si je les enlève la console js me dit que la fonction en a besoin.

Ca c'est un grand mystère pour moi ! Comment le lien se fait il alors que l'argument "d" est absent de __Innit() ?

Cet exemple, m'a l'air très instructif et intérréssant, comme tu le vois ça m'échappe, si tu ne considères pas ces infos comme étant des pré-requis je pense qu'il faudrait l'ajouter au tutoriel.


Sans le rajout de la variable zen2, ce bout de code marche :

var monobjet = {      

   Bonjour : "Mouaips ! ! !",
	 
   __Init : function() {monobjet.__gethim('IMG');},
	 
   __gethim : function(IMG) {
	 
 if(!document.getElementsByTagName) return false;
                                        
var zen = document.getElementsByTagName(IMG)[0];
var zen2 = document.getElementsById(celuila)[0];   //rajout
													                             
zen.onmouseover= function()    {  this.src='../immg/fishlogo2.jpg'; };
                                        			
zen.onmouseout= function()  {     this.src='../immg/fishlogo.jpg'; };

zen2.onmouseover= function()    {  this.color='blue'; };//rajout
                                        			
                          }														
		 	}

window.onload =monobjet.__Init;  

Si je veux en meme temps agir sur autre chose qu'une image, disons un paragraphe, et que je rajoute un getElementbyId et d'autres instructions j'ai des problèmes de syntaxe selon la console.

J'arrête là mes questions et je vais potasser les liens donné dans ce tutos.


Modifié par Hum (07 Sep 2006 - 16:11)

Salut Hum,

a écrit :
Si mes remarques/questions et cet échange se transforment en cours particulier et ne t'apportent plus grand chose, dis le moi, je comprendrai tout à fait.

Bien au contraire. Tu m'obliges à être au plus précis et c'est exactement ce que je recherche. Tes questions m'aident beaucoup.

a écrit :
Quand tu dis qu'on ne peut pas faire deux onclick dans un objet, même si c'est sur des éléments différents ?

Si bien sûr. Chaque événement est attaché à un objet. Si tu changes d'objet, tu ne parles plus du même événement donc çà ne pose aucun problème.

a écrit :
Des caractères en gras pour les portions importantes comme tu l'a fait dans ton post plus haut pour m'expliquer propriétés/méthodes pourrait être bien, au milieu d'un discours technique inhabituel, pointer l'info primordiale c'est bien je trouve.

Je vais essayer de revoir çà... Le danger est d'en faire trop ce qui risque de tuer les infos que je chercherais à faire ressortir. Je vais tenter de trouver le juste milieu.

a écrit :
Ton exemple en 3 phases dans le post ci dessus commençant par une alerte qui est transmise directement sans attendre le onclick : j'ai retenu, ne pas passer d'argument dans la méthode qu'on envoi,(...)

mmh... C'est vrai que je n'ai pas été précis, je t'ai même induit en erreur... On oublie tout et je recommence. (Je rectifierais le tuto par la suite)


Tu dois tout voir en tant qu'objet auquel tu vas affecter des propriétés.

Par exemple, lorsque tu crées une fonction :

function Init() { ... }

Tu ne fais ni plus ni moins qu'affecter une propriété à l'objet global (la fenêtre du navigateur).

Lorsque tu écris ton code en suivant le modèle objet, tu affectes des propriétés aux objets que tu crées.
Lorsqu'un événement survient, tu lui affectes, là encore, une propriété. Celà veut dire que :

- tout ces codes sont bons :

window.onclick = function Init() { ... };



window.onclick = function Init(arg) { ... };



window.onclick = Init;



window.onclick = Init.__Test;

- et tout ceux là sont faux :

window.onclick = Init();



window.onclick = Init(arg);



window.onclick = Init.__Test();



window.onclick = Init.__Test(arg);

Tous les codes justes sont des propriétés.
Tous les codes faux sont des "éxécutables". (ils sont identifiables grâce aux parenthèses)

Pour éxécuter une méthode au clic (ou au lancement de la page), tu dois affecter une propriété à l'événement qui est de lancer l'éxécutable.

a écrit :
Ce que je ne comprend pas c'est comment alert(d) va chercher la string "coucou" ?

Ta méthode __Alert(d) a besoin d'avoir un argument pour fonctionner, de même pour alert(d);
Dans la propriété que tu affectes au clic sur l'élément p ( ou objet oP ) :

oP.onclick = function()
{
	oK64.__Alert("coucou");
};

Tu renseignes cet argument en lançant l'éxécutable oK64.__Alert(); qui lui même lance l'éxécutable alert();

a écrit :
Si je veux en meme temps agir sur autre chose qu'une image, disons un paragraphe, et que je rajoute un getElementbyId et d'autres instructions j'ai des problèmes de syntaxe selon la console.

var zen2 = document.getElementsById(celuila)[0];

Cà, çà n'existe pas.

Tu peux écrire ceci :

var zen2 = document.getElementById(celuila);

ou bien ceci :

var zen2 = document.getElementsByTagName(celuila)[0];

... mais pas ton code actuel. C'est donc bien une erreur de syntaxe.
Modifié par koala64 (07 Sep 2006 - 21:44)

Merci d'éviter les ascii-arts genre /*******/, c'est énervant.

Pour résumer ces longs posts d'explications signés Koala64 :
Il y a des parenthèses => appel immédiat de la fonction
il n'y en a pas => On utilise la fonction en tant que variable ou propriété, elle n'est pas exécutée.
Pour les habitués du C : On transfert un pointeur vers le contenu de la fonction lors d'une affectation du type window.onload = fonction; .C'est une simple affectation, au même titre que toto = "hello world";

re,

...très content d'etre utile.

a écrit :
... Si tu changes d'objet, tu ne parles plus du même événement donc çà ne pose aucun problème.

D'accord, pour ma compréhension la précision s'imposait.

a écrit :
Ton exemple en 3 phases ...C'est vrai que je n'ai pas été précis, je t'ai même induit en erreur... On oublie tout et je recommence. (Je rectifierais le tuto par la suite)

Je suis curieux de voir, cette histoire m'a bien intrigué...

Ceci m'a ouvert les yeux :

a écrit :
Tu dois tout voir en tant qu'objet auquel tu vas affecter des propriétés. Lorsque tu crées une fonction :
Tu ne fais ni plus ni moins qu'affecter une propriété à l'objet global (la fenêtre du navigateur).

a écrit :
Tous les codes justes sont des propriétés.
Tous les codes faux sont des "éxécutables". (ils sont identifiables grâce aux parenthèses)

Compris, c'est clair pour moi je crois.

Pour ce qui est de ma question sur les arguments, cela me semble plus clair, mais je dois continuer à m'entrainer pour etre sur que ça l'est vraiment...

var zen2 = document.getElementsById(celuila)[0];

" Cà, çà n'existe pas. "
Oui en effet

Bonne soirée...

edit :

a écrit :
Celui qui commence avec CSS va trouver les tableaux compliqués et peu clairs

Je suis pleinement d'accord avec ça, c'est précisemment mon cas.
Modifié par Hum (07 Sep 2006 - 21:43)

QuentinC a écrit :
Merci d'éviter les ascii-arts genre /*******/, c'est énervant.

désolé, je viens de les supprimer.

Il me semble que document.write n'est pas correct en XHTML.
Je n'ai pas trouvé d'info en Français à ce sujet, mais ceci.
Pourait-tu traduire koala64 ?
Modifié par chmel (10 Sep 2006 - 20:48)

a écrit :

Il me semble que document.write n'est pas correct en XHTML.

Rien à voir, document.write est du javascript.
Il faut juste encadrer son script de commentaires HTML ou de CDATA pour pas que le validateur hurle en essayant de décoder du HTML dans l'instruction.

oui, d'ailleurs, à ce propos, je te conseille de lire çà : http://openweb.apinc.org/articles/html_au_xhtml/#cdata

Pour compléter, ça veut dire que les commentaires, ce n'est pas génial non plus et qu'il vaut mieux tout placer dans un fichier externe.

edit : Je ne complète rien du tout... C'est dit dans le paragraphe... Désolé, je vais me recoucher...
Modifié par koala64 (10 Sep 2006 - 22:36)

Merci,
Je connaissais les "cdata" et le fait de mettre le js dans un fichier externe, mais il me semblais avoir lu qqpart que document.write tout comme innerHTML était déconseillé en XHTML au profit des instructions du DOM.
et bonne nuit
Modifié par chmel (10 Sep 2006 - 23:12)

oui oui... ce n'était pas un mirage...

Pour ma part j'abandonnerai définitiement innerHTML quand il existera un équivalent dans le DOM.
En attendant, trouve-moi une solution sans innerHTML pour récupérer le code contenu dans une div, avec des sous éléments. Pour le moment, tu es obligé de goûter aux joies du récursif... je me trompe ?
Document.write, c'est le même problème, à l'inverse.

Tu t'arranges pour que le conteneur soit un textarea
Modifié par chmel (11 Sep 2006 - 13:13)

Hello,

Pas forcémment non...

Exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css"><!--

			#conteneur { background-color: #F6D; border: 2px solid #907; }
			#origin { background-color: #6DF; border: 2px solid #079; }

		--></style>
		<script type="text/javascript"><!--

var o =
{
	_Replace: function()
	{
		if( !document.getElementById ) return false;

		var oOrig = document.getElementById('origin'),
		    oElem = oOrig.childNodes[0],
		    oCont = document.getElementById('conteneur');

		oCont.appendChild(oElem);
		return oOrig.parentNode.removeChild(oOrig);
	}
};
window.onload = o._Replace;

		//--></script>
	</head>
	<body>
		<div id="conteneur"></div>
		<div id="origin">
			<ul>
				<li>Riri</li>
				<li>Fifi</li>
				<li>Loulou</li>
			</ul>
		</div>
	</body>
</html>

... mais, à la base, innerHTML, tout comme innerText, sont des méthodes propriétaires d'IE. Néanmoins, innerHTML fonctionne sur IE, Mozilla, Safari et Opera... innerText ne fonctionne pas sur Mozilla.

Dans un soucis de portabilité, il est préférable d'utiliser la méthode DOM mais il est indéniable qu'innerHTML est bien plus clair et plus court. Tout dépend de ce que tu cherches... Quoiqu'il en soit, il faut, dans les deux cas, tester la méthode que tu utilises...

document.write n'a pas lieu d'être en DOM puisqu'un script DOM est chargé après que le code XHTML soit lu. On le remplace par une combinaison de méthodes telles que createElement, createTextNode et appendChild...

Je réponds plus tard pour l'autre sujet, je suis un peu blindé de taf...

Roulements de tambour...

paf ! Le tuto nouveau est arrivé !

Au programme :

* Changement de la structure du tuto
Plus logique et plus progressif... La première partie regroupe les notions essentielles et devraient être accessible à plus de monde.

* Il y a un exemple pour chaque notion abordée
... pour faire plaisir à Vero...

* Plus simple au premier abord mais çà va plus loin aussi...
Intégration de JSON et de la gestion des événements

* Suppression de la partie concernant le découpage en plusieurs fichiers
Tout compte fait, après de nombreux tests, ça manquait d'intérêt.

* Mise à jour des anciens exemples pour coller à la nouvelle structure

* Ajout d'une feuille de style d'impression pour ceux qui veulent le lire à tête reposée.

* ... et puis je crois que c'est tout...

Je pense que c'est déjà pas mal parce que ça a doublé de volume. J'ai tenté de tenir compte de toutes les remarques qui m'ont été faites.

Certaines parties nécessitent d'être un peu plus développées, plus particulièrement sur la fin, mais mon but, ici, était plus de montrer sur quoi s'orienter. A vous d'approfondir le sujet si celà vous intéresse. ( les liens en fin de document sont là pour çà )

Allez hop, je vais me coucher parce que j'en peux plus de ce tuto là tout de suite !
Modifié par koala64 (25 Sep 2006 - 01:37)

C'est quoi les symboles bizarroïdes intégrés dans les titres ?

Sur les petits titres en cours de texte, ça ne servait à rien; je les ai donc supprimé...

Au sein des grands titres, cela sert de séparateur pour le système de navigation.
Modifié par koala64 (26 Sep 2006 - 08:11)

Je ne comprends pas ce que tu veux dire par séparateur...

hé hé... Je vois où tu veux en venir...

En fait, mon soucis se situe plus d'un point de vue visuel qu'autre chose. Le premier séparateur sert à faire la transition entre le texte du titre et le système de navigation, le second, la séparation entre les liens, le troisième, idem et le quatrième sert à marquer la fin de cette zone. L'objectif était de créer des limites sans avoir recours à un nouveau bloc (en dehors du titre). Certes, j'aurais pu mettre des pipes ( | ) mais je n'aime pas faire comme tout le monde. Les caractères que j'utilise me semblent adaptés à ces séparations : le premier et le quatrième sont identiques pour marquer le début et la fin de cette zone, vu qu'ils sont dans un span; le deuxième et le troisième sont jumeaux pour marquer leur rôle commun de transition (la petite vague me semblait adaptée à cet emploi, visuellement parlant sans être réellement perturbant d'un point de vue auditif). Entre nous, est-ce réellement irritant ? Je ne pense pas car je ne les enchaîne pas à tout va.

Je conçois que si tu les entends à tout bout de champ, c'est énervant mais si ça ne se trouve que dans les titres, la clarté qui en émane me semble bénéfique. Il faut bien voir que ce n'est maintenant QUE dans les grands titres, rien de plus. J'ai choisi d'intégrer ce fameux système de navigation au sein de mes titres parce que c'est ce qui les relies entre eux, que je considère qu'ils sont aussi important que le texte de ces titres, qu'ils en font partie intégrante mais aussi que pour des raisons CSS techniques, ce procédé m'était plus simple; peut-être ai-je tort mais j'assume. Encore une fois, ça ne me semble pas critique. Il ne s'agit là que d'éléments de personnalisation que je souhaite rendre visibles sans feuille de style et qui servent de délimitation au sein des titres.

Koala64 a écrit :

Entre nous, est-ce réellement irritant ?

Non... c'est juste que quand j'entends des libellés de liens symbole inférieur tilde supérieur symbole dans un titre, je me demande ce que ça peut bien être.