[DOM] innerhtml remplacé par le DOM : oui mais comprendre

**sebhm** · 05/06/2009, 11h03

Bonjour,

j'ai besoin sur un petit projet de créer un formulaire dynamique :
c'est un formulaire de recherche, dans lequel on saisit des critères.
Au départ, il y a un critère modifiable; si on veut en ajouter un autre, on clique sur un joli bouton 'ajouter' et une autre ligne apparait (magie) ... etc ...

je me suis donc penché sur ce problème et j'ai 2 solutions :
- soit je recharge la page (c'est du PHP) et j'ajoute ma ligne lors du rechargement (mais ça fait recharger pour rien)
- soit je fais ça en Javascript

Javascript semble la bonne solution.
J'arrive vite au célèbre 'innerHTML' et tout aussi vite à ses limitations.

Un post tres interessant (celui la) (devenu un article, ça c'est la classe) nous explique comment gérer à peu près tous les cas d'insertion grâce au rêve de SpaceFrog.

Le hic (j'y arrive!), c'est que je ne comprends à peu près rien à ce bout de code

(Certes, je n'ai pas encore le niveau en Javascript mais je m'y attèle !)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$Close=function(Closing){

Cette syntaxe là, moi pas comprendre
(mais bon, en fouinant du coté des tutoriels, on s'en sort...)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Array.prototype.ArrayPos=function(quoi){

j'avais jamais entendu parler de 'prototype' avant.

Si c'est bien le Framework Prototype qui est utilisé, où est-ce qu'on fait appel à ce framework dans le code de SpaceFrog ??
parce que eux font ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="/js/prototype.js"></script>

on y parle également beaucoup de 'HasH'... c'est quoi ??

Le format JSON est a priori utilisé. je connaissais pas mais voir ceci

...etc...

voila!

Est-il possible d'avoir un peu d'explication là dessus (ou alors quelques bons liens pour mieux comprendre).
Comment intégrer ce code à un dev existant ? (qui fait quoi, que faut il inclure ...?)
Est-ce que ce code qui a un peu plus d'un an a changé depuis ?

je sais, j'abuse

mais ca me ferait tellement plaisir

merci

**bigboomshakala** · 05/06/2009, 11h28

Salut,

j'ai pas beaucoup de temps donc je vais faire court. Peut-être que d'autres auront le temps de développer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$Close = function(Closing) { ... }

variable $Close (un nom de variable peut contenir un $) à laquelle on affecte une fonction anonyme (une fonction qui n'a pas de nom) qui accepte un paramètre nommé Closing ici.
Par la suite tu peux utiliser ta variable comme une fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$Close(param); // appel de fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Array.prototype.ArrayPos=function(quoi){

ce prototype là n'a rien à voir avec le framework Prototype (d'ailleurs tu vois bien qu'il y a en a un qui a une majuscule et pas l'autre). Prototype est un framework qui doit son nom au fait qu'il utilise les prototypes JavaScript abondamment pour faire de l'objet avec JavaScript

Array est une classe. Pour généraliser je vais remplacer Array par UneClasse.
Quand tu as une classe en JavaScript, cette classe a un prototype.
UneClasse.prototype est un objet dont les propriétés se retrouveront dans toutes les instances de la classe (attributs et fonctions membres de la classe)

Si tu as une classe comme Array et que tu veux ajouter une nouvelle fonction à cette classe (i.e. à toutes les instances de cette classe, même celles déjà définies. En gros tu modifies la classe exhibée de base par le JavaScript) tu passes par le prototype.

Si tu te contentes de faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Array.ArrayPos

alors la fonction ArrayPos ne sera pas disponible dans les instances d'Array. Ce sera une fonction statique de la classe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var instance = new Array();
instance.ArrayPos(...); // possible si ArrayPos est dans le prototype
Array.ArrayPos(...); // possible si ArrayPos est statique

Pour JSON

C'est tout simplement une notation très pratique pour définir des objets en JavaScript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var obj = {} // création d'un objet
var obj2 = { "x" : 10, "y" : 15 }; // création d'un objet avec les propriétés x et y;
alert(obj2.x); // renvoie 1
alert(obj2["x"]); // renvoie 10 aussi
var obj3 = { "x": 42, "display":function(){ alert(this.x); }}; // encore un objet
obj3.display(); // renvoie 42

**sebhm** · 05/06/2009, 11h45

merci beaucoup pour ces rapides explications

**sebhm** · 05/06/2009, 14h27

variable $Close (un nom de variable peut contenir un $) à laquelle on affecte une fonction anonyme (une fonction qui n'a pas de nom) qui accepte un paramètre nommé Closing ici.
Par la suite tu peux utiliser ta variable comme une fonction

OK mais quel est alors l'interet de passer par une variable qui contient une fonction plutot que d'utiliser la fonction elle meme ?

**franculo_caoulene** · 05/06/2009, 16h21

Affecter une fonction à une variable permet à la fonction d'agir comme une variable, étonnant hein!

C'est à dire que cette fonction peut être passée en argument dans une autre fonction et qu'elle aura la même portée. C'est le début de la programmation orientée objet, disons. De plus, cela permet aussi l'auto-invocation qui permet de retourner un type.

Illustration (attention, il y a beaucoup d'alertes) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!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>fonctions en tant que variables</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <script type="text/javascript">
  /**** A exécuter en deux temps ****/
  /** passage d'une fonction déclarée en tant que variable en argument **/
  var f1 = function(){alert("f1");};
  var f2 = function(){return "f2";}();    // auto-invocation : impossible à faire avec la syntaxe "function f2(){}"
  var f3 = function(a){
    if(typeof a == "string"){alert(a +" je suis un string");}
    else{
      a;
      alert(typeof a);  // n'est plus de type "function"
    }
  }
  alert(typeof f1 +" - "+ typeof f2);
  f3(f1());   // fonctions passées en argument
  f3(f2);  
 
  /** portée d'une fonction déclarée en tant que variable **/
  var o = function(){
    f4 = function(){alert("f4");}
    var f5 = function(){alert("f5");}
    return {
      f5public:function(){f5();}
    }
  }();
  f4();   // réagit bel et bien comme une variable global... c'est mal!
  alert(typeof o);    // o est un objet grâce à l'auto-invocation
  o.f5public();   // affiche f6 car il plante à la ligne suivante
  o.f5();   // f5 est bel et bien une variable n'ayant pour portée que l'objet où il est déclaré et provoque une erreur
  </script>
</body>
</html>

**nod__** · 05/06/2009, 19h19

objection votre honneur,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  var f2 = function(){return "f2";}();    // auto-invocation : impossible à faire avec la syntaxe "function f2(){}"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  var f2 = function maFonction (){return "f2";}();    // auto-invocation

La syntaxe est un peu «étrange» mais logique quand on assigne pas la fonction à une variable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  (function maFonction (){return "f2";})();    // auto-invocation

Le seul petit problème est IE (comme par hasard) qui crée une variable locale ayant le nom de la fonction alors que FF/WebKit/Opera non.
La bonne nouvelle c'est que ce n'est qu'une variable locale, donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function () {
    (function maFonction (){return "f2";})();    // auto-invocation 
})();

résoud le problème. Vu comme ça on peut se demander le but… Perso la globalité de mon code est executé dans une closure pour ne pas polluer window (donc ie est automatiquement pris en compte, pas besoin d'en faire plus exprès) et ça permet d'avoir une indication sur ce que fait le contenu de la closure… sans avoir besoin de lire de la documentation.

Pour les questions de portée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function fonctionLocale () {}
// même portée que 
var fonctionAnonymeLocale = function () {};

Puis vu que tout est objet en JS, une variable ou une fonction ça change pas grand chose au final, mais c'est marrant

**sebhm** · 05/06/2009, 21h23

EDIT : j'ai vu que nod__ a répondu.
je continue tout de meme le post que j'étais en train d'écrire (depuis un bon moment maintenant) en réponse à franculo_caoulene
---------------------------------------

C'est tres gentil d'avoir pris le temps de m'expliquer...
mais j'ai rien compris !

Voilà le resultat du code ! (les citations correspondent aux alertes affichées)

**ALERT**
function - string
**********

f1 est de type fonction
f2 est de type string

l'auto-invocation n'y est pour rien hein ?? c'est juste parce que la fonction renvoit la chaine de caractere "f2" ?? là, suis sûr de rien

**ALERT**
f1
**********

'f1()' est passé en parametre à f3, donc s'execute, d'où l'affichage.

on va passer alors dans le 'else' de f3 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
else{
      a;
      alert(typeof a);  // n'est plus de type "function"
    }

à quoi sert la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a;

??
si je l'enleve, j'ai exactement le meme comportement...

**ALERT**
undefined
**********

le type n'est pas reconnu

**ALERT**
f2 je suis un string
**********

f2 est un string car la variable f2 a récupéré "f2" grace à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return "f2";

?? (j'ai bon là ?)

**ALERT**
f4
**********

f4 s'execute alors qu'elle a été déclarée dans 'var o'.
je sais pas pourquoi...

**ALERT**
object
**********

o est un objet grace à l'auto-invocation
d'accord, mais pourquoi f2 était un string plus haut ?? simplement parce qu'il était passé en parametre, et donc s'executait ??

**ALERT**
f5
**********

c'est le dernier affichage que j'ai...

alors qu'est-ce qu'il fait entre ces 2 lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  o.f5public();   // affiche f6 car il plante à la ligne suivante
  o.f5();   // f5 est bel et bien une variable n'ayant pour portée que l'objet où il est déclaré et provoque une erreur

??? comprends pas
---------------------------------------

Nod__ ,
je crains n'avoir pas plus compris ce que tu as voulu dire...

Puis vu que tout est objet en JS, une variable ou une fonction ça change pas grand chose au final, mais c'est marrant

c'est sûr !!! on se marre !

**sebhm** · 05/06/2009, 21h28

encore quelques remarques par rapport au code de franculo_caoulene :

si je fait

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var f2="f2";

à la place de la déclaration en auto-invocation, j'ai le meme resultat à l'affichage.
je comprends pas à quoi m'a servi l'auto-invocation.

si on enleve les '()' à la fin de la ligne de déclaration de f2, f3 me dit alors que f2 est une fonction...

voilà je tenais à signaler ces remarques qui ne feront certainement avancer personne, et surtout pas moi !

**nod__** · 05/06/2009, 21h42

Envoyé par sebhm

f1 est de type fonction
f2 est de type string

l'auto-invocation n'y est pour rien hein ?? c'est juste parce que la fonction renvoit la chaine de caractere "f2" ?? là, suis sûr de rien

yep. C'est ça.

Envoyé par sebhm

on va passer alors dans le 'else' de f3 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
else{
      a;
      alert(typeof a);  // n'est plus de type "function"
    }

à quoi sert la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a;

??
si je l'enleve, j'ai exactement le meme comportement...

J'avoue que j'ai pas saisi non plus.

Envoyé par sebhm

f2 est un string car la variable f2 a récupéré "f2" grace à

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

return "f2";

?? (j'ai bon là ?)

yep.

Envoyé par sebhm

f4 s'execute alors qu'elle a été déclarée dans 'var o'.
je sais pas pourquoi...

Justement, illustration d'un gros piège en javascript. quand on ne déclare pas les variables avec "var" elles sont globales par défaut. Donc on peut l'executer en dehors de "o" !

Envoyé par sebhm

o est un objet grace à l'auto-invocation
d'accord, mais pourquoi f2 était un string plus haut ?? simplement parce qu'il était passé en parametre, et donc s'executait ??

Nope, il faut faire attention à ce que la fonction que l'on a executé renvoie. pour "f2" elle renvoyais une chaine, pour "o" elle renvoie quelque chose du genre "{}" qui est la notation d'un objet.

Envoyé par sebhm

alors qu'est-ce qu'il fait entre ces 2 lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  o.f5public();   // affiche f6 car il plante à la ligne suivante
  o.f5();   // f5 est bel et bien une variable n'ayant pour portée que l'objet où il est déclaré et provoque une erreur

??? comprends pas

La première ligne affiche "f5", normal. La seconde, tu essaie d'executer une fonction qui n'est pas membre de l'objet, donc ça plante. Y'a une explication plus subtile, mais ça deviens compliqué.

à la place de la déclaration en auto-invocation, j'ai le meme resultat à l'affichage.
je comprends pas à quoi m'a servi l'auto-invocation.

Ici à rien ou pas grand chose, c'est pour te montrer que ça existe je suppose ?

Envoyé par sebhm

Nod__ ,
je crains n'avoir pas plus compris ce que tu as voulu dire...

c'est sûr !!! on se marre !

Pas grave

**sebhm** · 05/06/2009, 23h08

Merci pour ces explications.

Envoyé par nod__

Nope, il faut faire attention à ce que la fonction que l'on a executé renvoie. pour "f2" elle renvoyais une chaine, pour "o" elle renvoie quelque chose du genre "{}" qui est la notation d'un objet.

pourquoi "o" renvoie un truc du genre "{}" ?
pourquoi c'est un objet et pas une 'function' comme pour f1 ?

Envoyé par nod__

La première ligne affiche "f5", normal. La seconde, tu essaie d'executer une fonction qui n'est pas membre de l'objet, donc ça plante. Y'a une explication plus subtile, mais ça deviens compliqué.

la syntaxe "f5public:function()" la rend publique ?

Envoyé par nod__

Ici à rien ou pas grand chose, c'est pour te montrer que ça existe je suppose ?

Oui, bien sur, pour me montrer c'est cool mais le hic, c'est que je ne comprend pas en quoi ca peut etre utile autre part. Quelle est la finalité d'utiliser l'auto-invocation ?

merci

**sebhm** · 05/06/2009, 23h55

Et sinon, avez vous réussi à faire fonctionner le code de SpaceFrog dans l'article cité plus haut

je comprends (je crois) le principe mais pour le mettre en application...

je vais abuser encore :
quelqu'un a-t-il un exemple complet ?
(où par exemple on aurait une page quasi-vierge et on y insérerait un petit <DIV> grâce à ça)

**sebhm** · 06/06/2009, 00h02

ah ben merde !
j'ai réussi tout seul. Je m'épate là.

ou alors j'étais vraiment nul de pas avoir réussi avant

**franculo_caoulene** · 08/06/2009, 11h10

Envoyé par nod__

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  var f2 = function(){return "f2";}();    // auto-invocation : impossible à faire avec la syntaxe "function f2(){}"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  var f2 = function maFonction (){return "f2";}();    // auto-invocation

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  (function maFonction (){return "f2";})();    // auto-invocation

Explique moi en quoi ma syntaxe est mauvaise, ou encore mieux illustre le moi (je trouve ça plus efficace, même si on dirait pas d'après mon message)

Envoyé par sebhm

f1 est de type fonction
f2 est de type string

l'auto-invocation n'y est pour rien hein ?? c'est juste parce que la fonction renvoit la chaine de caractere "f2" ?? là, suis sûr de rien

En effet, c'est grâce à ce qui est retourné qu'on peut récupérer un type. J'utilise l'auto-invocation surtout pour la syntaxe on va dire. Un objet est composé de propriétés et de méthodes. Les méthodes sont suivies de parenthèses contrairement au propriétés. J'utilise donc l'auto-invocation dans l'objet pour transformer ces fonctions en propriété

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>une utilisation de l'auto-invocation</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
  <script type="text/javascript">
  var o = function (a, b){
    var i = a;
    var j = b;
    var f1 = function(){return i+j}();
    return {
      f1p : function(){return f1;}()
    }
  };
  var o1 = o(4, 5);
  var o2 = o(9, 8);
  alert(o1.f1p + " - "+ o2.f1p);
  </script>
</body>
</html>

Envoyé par sebhm

on va passer alors dans le 'else' de f3 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
else{
      a;
      alert(typeof a);  // n'est plus de type "function"
    }

à quoi sert la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

a;

??
si je l'enleve, j'ai exactement le meme comportement...

A priori à rien, je ne me souviens plus, j'ai du la laisser en testant.

Envoyé par sebhm

alors qu'est-ce qu'il fait entre ces 2 lignes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
  o.f5public();   // affiche f6 car il plante à la ligne suivante
  o.f5();   // f5 est bel et bien une variable n'ayant pour portée que l'objet où il est déclaré et provoque une erreur

??? comprends pas

cf. la réponse de nod__. Et en effet, j'ai parlé de l'auto-invocation pour montrer que c'était possible avec l'affectation d'une fonction à une variable.

**nod__** · 08/06/2009, 11h23

Envoyé par franculo_caoulene

Explique moi en quoi ma syntaxe est mauvaise, ou encore mieux illustre le moi (je trouve ça plus efficace, même si on dirait pas d'après mon message)

Loin de moi l'idée de dire ça. Je relevais juste que l'affirmation «auto-invocation : impossible à faire avec la syntaxe "function f2(){}"» n'était pas exacte puisque c'est effectivement possible. Je n'ai pas fait de jugement de valeur sur l'une ou l'autre. Juste dit que je préférais la mienne dans certaines circonstances

**franculo_caoulene** · 08/06/2009, 11h28

J'avais compris que ma syntaxe était fausse, pas mauvaise dans le sens de "nulle". Puis j'illustrais ce qu'on peut faire en affectant une fonction à une variable, donc ce que je disais est vrai.

En lisant la citation, je m'aperçois que le ton est plutôt sec, désolé mon week-end a été trop court.

[DOM] innerhtml remplacé par le DOM : oui mais comprendre

JavaScript

Discussions similaires

Partager

Partager