javascript propre

par **Chakra Spirit** » 04 févr. 2007, 02:25

Certes... C'était plus pour le principe...

Je ne me sers pas de Prototype, en effet, parce qu'avoir une page inaccessible d'entrée de jeu ne m'enchante guère... Les connexions à faible débit sont toujours nombreuses et la page que tu me montres pèse 144ko à elle seule alors que ça ne nécessite que 10-15ko maxi. Ces utilisateurs se retrouvent alors avec des temps de chargement énormes pour avoir un petit effet sur un conteneur.

peu de gens sont familiarisé avec ce framework

Il y a surtout peu de gens qui savent s'en servir à bon escient... 2-3% tout au plus...
La plupart des personnes s'en servent pour les effets visuels alors que si on prend le temps de refaire uniquement ceux dont on a réellement besoin, on peut diminuer le volume de script par 10 et on n'a plus aucun conflit.

Les conflits dûs à Prototype sont nombreux, et pour cause, l'auteur a une la bonne idée de redéfinir Object... sympa pour les autres...

Il aurait mieux fait de corriger les nombreux avertissements de son code, je trouve...
Bref, je suis un anti-Prototype, tu l'auras compris...

Si vraiment, je dois avoir recours à une bibliothèque, je n'en connais qu'une qui vaut le coup à l'heure actuelle : jQuery

Pour ce qui est du code que je t'ai proposé tout à l'heure, je l'aurais fait comme suit afin de protéger au mieux mon code et en vue d'annihiler le risque d'interactions qui pourrait en découler.

Code : Tout sélectionner

(function() {

// window.onload solution by Dean Edwards/Matthias Miller/John Resig

if(document.addEventListener)
    document.addEventListener("DOMContentLoaded", fnInit, false);

/*@cc_on @*/
/*@if (@_win32)
    document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
    var script = document.getElementById("__ie_onload");
    script.onreadystatechange = function()
	{
        if(this.readyState == "complete")
            fnInit();
    };
/*@end @*/

if (/WebKit/i.test(navigator.userAgent))
{
    var _timer = setInterval(function()
	{
        if(/loaded|complete/.test(document.readyState))
            fnInit();
    }, 10);
}

window.onload = fnInit;

//end

function fnConnect(oElem, sEvType, fn, bCapture)
{
	return oElem.addEventListener ?
		oElem.addEventListener(sEvType, fn, bCapture):
		oElem.attachEvent ?
			oElem.attachEvent('on' + sEvType, fn):
			false;
}

function fnCancelClick(e)
{
	if(e && e.stopPropagation && e.preventDefault)
	{
		e.stopPropagation();
		e.preventDefault();
	}
	else if(window.event)
	{
		window.event.cancelBubble = true;
		window.event.returnValue = false;
	}
	return false;
}

function fnInit()
{
    if(arguments.callee.done)
		return;

    arguments.callee.done = true;

    if(_timer)
		clearInterval(_timer);

	if(!document.getElementsByTagName)
		return;

	var oA = document.getElementsByTagName('a')[0];
	fnConnect(oA, 'click', fnGetEvent, false);
};

function fnGetEvent(e)
{
   alert(e.type);
   fnCancelClick(e);
}

})();

par **artotal** » 04 févr. 2007, 00:39

En faite dans mon cas ça ne fonctionne pas, parce que il y a un conflit :
Il est vrai que j'utilise prototype et peu de gens sont familiarisé avec ce framework, en faite donc sa fonctionne très bien si j'ai des paramètres statics
j'ai un timestamp qui s'affiche
http://creatif-web.be/developpeur/dossier_ajax4.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?php echo $titre ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="./css/imprimer.css" media="print" title="style 1" />
<script src="./js/scriptaculous/prototype.js" type="text/javascript"> </script>
<script src="./js/scriptaculous/scriptaculous.js?load=effects,dragdrop" type="text/javascript"> </script>
</head>
<body>
<?
include ("inc/connexion.php");
$query = "SELECT * FROM pages order by page";
 $result = mysql_query($query, $lien);
	while($ok = mysql_fetch_array($result))
	{
	echo '<p><a id="lien" href="dossier_ajax4.php">['.$ok['page'].']</a></p>';
	//echo "";
	}
?>
<script type="text/javascript">
function appel() 
{
$('lien').onclick = function () 
	{
		var lien= $('lien').innerHTML;
		alert(lien);
	}
}	
window.onload= function () {
	appel();
}

var ajax = new Ajax.Updater(
					    'datestr',        // DIV id (XXX: doesnt work?)
					    '/developpeur/salut_php.php',        // URL
					    {                // options
					    method:'get', parameters:'dossier=23&eeee=25', 
					    onComplete: showResponse, evalScripts:true
						});

function showResponse(req)
{
	$('datestr').innerHTML = req.responseText;
	new Effect.toggle('datestr', 'BLIND');
	new Effect.Highlight('datestr', { startcolor:'#3366FF', endcolor:'#33CCFF', restorecolor:'#fff', duration: 1});
}
</script>
<p>2/ <div id="datestr" style="display:none;">hahaha</div></p>
<?php include('./pied_page.php'); ?>

par **Chakra Spirit** » 03 févr. 2007, 22:38

Salut,

Pour récupérer une liste, tu peux te servir de getElementsByTagName ou getElementById et pour récupérer l'événement, tu crées un paramètre, e par exemple, à la fonction réceptrice.

Exemple :

Code : Tout sélectionner

function fnInit()
{
	if(!document.getElementsByTagName)
		return;

	var oA = document.getElementsByTagName('a')[0];
	oA.onclick = fnGetEvent;
}

function fnGetEvent(e)
{
	alert(e.type);
	return false;
}

window.onload = fnInit;

par **artotal** » 02 févr. 2007, 17:11

Je me pose la question, comment ferais-tu pour récupérer une liste de lien dynamique c'est à dire dont le nom et l'url sont variable mais en php .
Pour récupérer le click de l'utilisateur et le mettre dans une variable que l'on pourrai manipuler ?

par **artotal** » 02 févr. 2007, 16:46

Merci pour l'information.

par **Chakra Spirit** » 02 févr. 2007, 16:16

Sinon, il est préférable, lorsque tu définis un style via JS, d'affecter une classe CSS que tu retrouves dans le CSS justement. Ca te permet de bien définir le media comme je l'ai fait dans l'exemple précédent (@media screen) et de centraliser les informations de même type au même endroit. L'objet style de JS ne sert presque jamais en dehors de petites animations...

par **Chakra Spirit** » 02 févr. 2007, 16:11

Le soucis, c'est que ton script s'éxécute avant d'avoir parsé l'élément 'exemple'. Du coup, l'élément n'existe pas encore...

Si tu places ton script après l'élément, ça fonctionne.

C'est là qu'intervient l'événement window.onload qui indique d'éxécuter le code JS une fois la page html complètement parsée, ce qui te permet entre autres de mettre ton code JS dans un fichier externe...

Cela donne :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Document sans titre</title>
		<style type="text/css">/*<![CDATA[*/

@media screen
{
	html body{ padding:0px; margin: 0px; }
}

		/*]]>*/</style>
		<script type="text/javascript">//<![CDATA[

function init()
{
	var oEx = document.getElementById('exemple');

	oEx.onmouseover = highlight;
	oEx.onmouseout = normal;
}

function highlight()
{
	this.style.backgroundColor="black" ;
	this.style.color="white";
}

function normal()
{
	this.style.backgroundColor="yellow";
	this.style.color="black";
}

window.onload = init;

		//]]></script>
	</head>
	<body>
		<div>
			<span id="exemple" style="background-color:yellow;"> Exemple avec un événement souris.</span>
		</div>
	</body>
</html>

par **artotal** » 02 févr. 2007, 15:54

je lis celui-là, mais en faisant le premier exemple sa ne fonctionne pas :
http://gilles.chagnon.free.fr/cours/dht ... ments.html
j'ai fais un copier coller :
http://creatif-web.be/developpeur/test.php
Apperement sa ne passe pas parce que
document.getElementById('exemple').onmouseover = highlight ;
N'est pas une propriété.
Du coup c'est difficile à lire.

par **Chakra Spirit** » 02 févr. 2007, 10:30

Salut,

Pour faire plus propre, on peut se servir du gestionnaire d'événement DOM-2 addEventListener (attachEvent pour IE).

J'en parle un peu ici mais un cours plus complet se trouve là.

Ca permet tout simplement d'éviter de se servir du window.onload qui peut s'avérer problématique lorsque plusieurs scripts l'utilisent.

PS : Un très bon cours sur le JS non intrusif se trouve là aussi.

par **Ultim4T0m** » 31 janv. 2007, 01:46

Merci pour ces deux liens

par **artotal** » 31 janv. 2007, 01:16

j'ai oublié de répondre à ta question

http://developpeur.journaldunet.com/tut ... usif.shtml
justement le onload dans le body sa le fait pas.
L'idée est de séparer le javascript à la façon du CSS.
Un autre article sympas ou plutôt tuto :
http://www.babylon-design.com/site/inde ... dow-onload

par **artotal** » 31 janv. 2007, 00:44

c'est résolu :
j'ai d'ailleurs redéfinis le problème.

Code : Tout sélectionner

function attacherAction() 
{
	if (document.getElementById) 
	{
		if (document.getElementById('monAction')) 
		{
			leLien = document.getElementById('monAction');
			leLien.onclick = function() 
			{
				alert('fait le ;)');
			}
		}
	}
}

Ceci permet de charger plusieurs fonction, indispensable

Code : Tout sélectionner

// Execution des scripts au chargement de la page
window.onload = function() 
{
	attacherAction();
	enclanche()
}

par **Ultim4T0m** » 30 janv. 2007, 23:06

Bonsoir,

Qu'entends-tu par non intrusif ?

Si tu veux du javascript propre, commence déjà par l'indenter

function attacherAction() {
    if (document.getElementById)   {
        if (document.getElementById('monAction'))   {
            leLien = document.getElementById('monAction');
            leLien.onclick = function() {
                alert(attacherAction);
            }
        }
    }
}
window.onload=attacherAction();

Et il manque peut-être des parenthèses pour ton window.onload=attacherAction(); (je ne suis pas sûr, puisque j'utilise toujours le onLoad dans le <body> personnellement )

Et attacherAction action plutôt que this pour ton alert

par **artotal** » 30 janv. 2007, 23:03

Code : Tout sélectionner

alert(attacherAction);

c'était là l'erreur

par **artotal** » 30 janv. 2007, 22:58

Bonjour,
je cherche à faire du js non intrusif. Le soucis c'est que sa ne fonctionne pas.

Code : Tout sélectionner

function attacherAction() {
if (document.getElementById) {
if (document.getElementById('monAction')) {
leLien = document.getElementById('monAction');
leLien.onclick = function() {
alert(this);
}
}
}
}
window.onload=attacherAction;

Code : Tout sélectionner

<div id="monAction">aaaaaaaaaaaaaaaaaaaaaa</a>

Merci

javascript propre

Répondre

Étendre la vue Revue du sujet : javascript propre

javascript propre