20 ASTUCES POUR PROGRAMMEURS JAVASCRIPT AVANCÉS

Commentaire de 007Julien le 03/03/2011 23:51:49

Quelques éléments intéressants, mais les informations géographiques (#15) semblent concerner le serveur du fournisseur d'accès plus que le poste client et seul le pays (et encore quid des délocalisations ?) semble pouvoir être exploité.

La fonction GET en javascript (#16) permettant de récupérer les variables de l'url est un peu laborieuse lorsque deux splits (l'un sur les &, l'autre les =) sur window.location.search.substring(1) suffisent pour disposer de tous les éléments.

Sinon les valeurs par défaut (#18) des champs de texte (textarea) s'appliquent aussi aux autres champs de texte (inputs de type texte) ce qui permet d'utiliser ces champs pour décrire leur contenu et de reprendre cette description lors de la perte de focus avec un champ vierge.    

Enfin, (last but not least) l'instruction document.elementFromPoint(Number x,Number y) semble a peu près acceptée par les navigateurs les plus courants encore que des incertitudes subsistent sur la nature des coordonnées à utiliser (voir la page http://www.quirksmode.org/dom/w3c_cssom.html#documentview).

Commentaire de 007Julien le 04/03/2011 00:04:43

#16 Ce serait bien de connaître les exceptions car depuis l'Île-de-France cela me localise en Normandie !  

Commentaire de 007Julien le 04/03/2011 11:40:18

Effectivement, il était tard hier soir...
Pour le get en javascript imitons le php jusqu'au tableau associatif, s'il existe !
<script type="text/javascript">
var jsc_get=new function(){var i,t=window.location.search.substring(1).split(/&/g),l=t.length,u,v={},w=0;
  for (i=0;i<l;i++) {u=t[i].split(/=/);v[u[0]]=u[1];w=1}
  return w?v:null;
}
// Avec un vrai tableau associatif
c='';for (i in jsc_get) c+=' '+i+':'+jsc_get[i];alert(c);
if (jsc_get && jsc_get['truc']) alert(jsc_get['truc']);
</script>

Commentaire de 007Julien le 04/03/2011 23:33:46

Indépendamment du location.href qui demanderait, semble-t-il, un document devant, la fonction initialement proposée retourne un grand vide à défaut d'argument... Seule une chaîne vide permet d'obtenir non pas un tableau mais une chaine des valeurs séparées par des virgules.
  
S'il convenait de répondre aux objectifs maintenant précisés, la fonction suivante paraîtrait plus adaptée tout en restant plus concise :  
<script type="text/javascript">
function j_g(n){var i,t=window.location.search.substring(1).split(/&/g),l=t.length,u,v=[];
  for (i=0;i<l;i++) {u=t[i].split(/=/);v[v.length]=u[1];if (n==u[0]) return u[1];}
  return v;
}
alert(j_g())
alert(j_g('truc'))
</script>
Maintenant si la compression consiste à réduire les noms des variables, je pense avoir convenablement préparé le terrain...
Cordialement.

Commentaire de Jormund le 07/03/2011 12:00:13

PS: Ton #1 ne prend en compte qu'une utilisation de eval qui est d'appeller une fonction.
J'utilise personnellement pour effectuer cela:
function callSomething(code)
{
var tempFunction = new Function(code);
return tempFunction();
}
Par contre je ne sais pas si il est compatible tous navigateurs, alors que c'est probablement le cas de ton code.

J'évoquais d'autres utilisation de eval qui ne fonctionnent pas avec ton code, il y a par exemple:
var a = eval("[1,2,3]");
ou encore
var a = eval("{test:'toto'}")

J'avoue aussi ne pas bien voir l'intérêt de ta fonction par rapport à:
function evalWithCatch(code)
{
try
{
return eval(code);
}
catch(e)
{
return undefined;
}
}

Commentaire de jdmcreator le 08/03/2011 02:50:49

@007Julien :

Ton code compressé manuellement puis beautifier (http://jsbeautifier.org/) devrait donner environ ceci :

function j_g(n) {
    var i, t = window.location.search.substring(1).split(/&/g),
        u, v = [];
    for (i in t) {
        u = t[i].split(/=/);
        v.push(u[1]);
        if (n == u[0]) return u[1];
    }
    return v;
}

Reste à savoir si cela fonctionne avec http://example.com?test=1&test2=2&test3&test4=4
Pourrais-je récupérer test3 ;) ?

@Jormund : En effet, il y a bel et bien deux coquilles et une erreur, mea culpa, je suis en train de corriger

@2e commentaire de 007Julien : En fait au départ, c'était de trouver différentes manières d'émuler "eval()" pour trouver la plus rapide, eval() me semblant un peu lente, je cherche encore, il me reste plusieurs tests à faire, mais j'ai décidé de la mettre comme première astuce pour voir si d'autres personnes, comme toi, avait des solutions différentes à me proposer ;)

@3e commentaire de 007Julien : c'est un fait ;)

Commentaire de 007Julien le 08/03/2011 09:50:33

Même s'il est vrai que la fonction push (introduite plus récemment en javascript donc a priori moins bien supportée) est plus élégante que le v[v.length]=u[1] et supprime la variable l, je ne vois pas l'intérêt de «beautifier» le code proposé sauf s'il s'agissait de l'afficher au dessus de mon lit !

Pour son efficacité en javascript, j'aurais plutôt tendance à compresser ma proposition (JSMin de Douglas Crockford http://jscompress.com/ ou Dean Edwards compressor http://javascriptcompressor.com/). Celle-ci passerait alors de 188 à 175 octets (gain de 7%) plutôt que de retenir celle proposée de 229 octets (perte de 23%).

Maintenant le test consistant à récupérer une variable non définie est facile à faire il donne sans surprise une valeur non renseignée dans le tableau et une valeur undefined sinon.  

Commentaire de Jormund le 08/03/2011 11:04:43

Je pense que tu as inversé ton test, il faut retourner v si il n'y a pas de paramètre, donc
return !n?v:'';

Commentaire de jdmcreator le 09/03/2011 00:41:10

@007Julien : Beautifier le code sert entre autre à le comprendre, un truc du genre :

function j_g(n){var i,t=window.location.search.substring(1).split(/&/g),u,v=[];for(i in t){u=t[i].split(/=/);v.push(u[1]);if(n==u[0])return u[1]}return v}

est assez difficile à lire ;) Évidemment, si tu veux le compresser pour le mettre sur ton site, aucun problème que tu le compresses, c'est plus rapide à charger. Si j'ai placer le code beautifier, il s'agissait plutôt pour qu'il puisse bien être affiché lorsque je le placerai dans le fichier d'astuces.

@Jordmund : Si c'est à moi que tu parles, alors pour moi le code n'est pas du tout illisible, je n'utilise que des moyens dits "de base". Oui, j'ai en effet supprimé quelques octets, sur un petit code comme celui-ci ce n'est pas très grave, sur un plus gros code comme JQuery.js , crois-moi que ces petits octets ici à gauche et à droite, finissent par faire beaucoup. Pourquoi nous empêcher de réduire notre code, ça n'a jamais été mauvais ;) ?

Commentaire de jdmcreator le 09/03/2011 02:15:53

Je pense que vous ne comprenez pas mon point :

Si j'ai beautifier le code, c'est pour que n'importe qui puisse le lire, n'oubliez que CodeS-SourceS est à la base pédagogique et le résultat ne compte pas plus que le code. Si vous voulez placer ce code sur votre site, compressez-le, c'est bien mieux ainsi. Mais le but de ma source est de présenter différentes astuces où le code est plus important que le résultat. Dans les boîtes destinés à contenir le code Source des astuces dans "index.html", tous les codes sont plus ou moins beautifier pour qu'on puisse les lire. C'est ainsi sur toutes les documentations ;)

Mais nous nous éloignons un peu du sujet et entrons dans un sujet peu important ;)

Commentaire de 007Julien le 13/03/2011 13:27:55

Merci. J'aurais au moins rencontré «beautifier», après bêtifier et béatifier (nous n'en sommes pas encore là !).

Je reste néanmoins convaincu que la meilleure expression du get, en javascript, consiste à créer un objet avec le code suivant (à insérer par exemple dans un script outils.js).

Get=new function(){var i,t=window.location.search.substring(1).split(/&/g),l=t.length,u;for(i=0;i<l;i++) {u=t[i].split(/=/);this[u[0]]=decodeURIComponent(u[1])}}

Ce script d'encombrement réduit met à disposition un objet permettant d'envisager le passage d'un nombre, il est vrai limité, de paramètres entre les pages d'un site sans recours au PHP.

Commentaire de 007Julien le 13/03/2011 21:09:16

Le new et le this sont indispensables pour créer un objet (voir par exemple http://jacques-guizol.developpez.com/javascript/Objets/Objets.php), ce qui avec l'adresse  http://mon.site.com/index.html?page=7 (le script fonctionne sur un serveur) permet les deux syntaxes suivantes : Get["page"] ou encore Get.page pour récupérer ce paramètre (page devient une propriété de l'objet Get grâce au this).

Il est alors possible d'adapter le contenu à la page à cet appel...

Commentaire de jdmcreator le 14/03/2011 01:51:42

@Kimjoa : Premièrement, le #5 permet de récupérer tous les enfants, à partir de n'importe quel élément et peut importe le type (donc aussi texte). element.document.getElementsByTagName n'est pas supporté par tous les navigateurs et getElementsByTagName("*") retourne tous les éléments HTML et non pas tous les éléments enfants ;)

#11 : C'est principalement pour faire des remplacements à la volée, il est très complexe de générer un RegExp en fonction de l'utilisateur. Petit exemple : dans l'exemple du code, si on met dans le champ TEXTE "a.b", si on génère un RegExp à la volée, cela donnera : new RegExp("a.b","gi") . Seulement, le . en RegExp signifie n'importe quel caractère. Même chose pour les symboles []$^\ etc...

Pour ta fonction du $GET, ça semble très bon, mais je ne savais pas que "instanceof" fonctionait avec tous les navigateurs. Maintenant que je sais, je vais l'utiliser ;)

Pour l'indentation, c'est évident, mais j'avoue que se sera très long, surtout que j'ai déjà plusieurs modifications à faire.

Merci de ton commentaire ;)

Commentaire de Kimjoa le 16/03/2011 14:22:58

Salut  007Julien! merci pour ces précisions. Tu aurais pu nous fournir une fonction toute propre ;).
Enfin bon je suis sur que jdmcreator va s'en occuper et mettre à jours ces astuces!
a+

Commentaire de 007Julien le 24/03/2011 10:13:45

Même si, comme pour la tour Eiffel, le beau n'est pas dans l'utilité, une fonction «toute propre» sera probablement inadaptée pour résoudre un problème particulier. L'essentiel, c'est de retenir les idées !