Discussion :

[sebhm]

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]

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]

merci beaucoup pour ces rapides explications

[sebhm]

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]

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__]

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