javascript propre

Mammouth du PHP | 601 Messages

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
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Mammouth du PHP | 601 Messages

30 janv. 2007, 23:03

Code : Tout sélectionner

alert(attacherAction);
c'était là l'erreur
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Eléphant du PHP | 445 Messages

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
LLDC
Ulti

Mammouth du PHP | 601 Messages

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() }
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Mammouth du PHP | 601 Messages

31 janv. 2007, 01:16

j'ai oublié de répondre à ta question :oops:
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
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Eléphant du PHP | 445 Messages

31 janv. 2007, 01:46

Merci pour ces deux liens ;)
LLDC
Ulti

Eléphant du PHP | 71 Messages

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 .

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

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

Mammouth du PHP | 601 Messages

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.
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Eléphant du PHP | 71 Messages

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... :wink:

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>

Eléphant du PHP | 71 Messages

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...

Mammouth du PHP | 601 Messages

02 févr. 2007, 16:46

Merci pour l'information.
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Mammouth du PHP | 601 Messages

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 ?
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Eléphant du PHP | 71 Messages

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;

Mammouth du PHP | 601 Messages

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'); ?>
http://xavier-artot.com
¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·²°'´¨'°-.,¸¸,.-·°'´¨
système d'exploitation "Ubuntu 7.10"

Eléphant du PHP | 71 Messages

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... :wink:

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); } })();