[DOM] innerhtml remplacé par le DOM : oui mais comprendre
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 :oops:
(Certes, je n'ai pas encore le niveau en Javascript mais je m'y attèle !)
Code:
$Close=function(Closing){
Cette syntaxe là, moi pas comprendre
(mais bon, en fouinant du coté des tutoriels, on s'en sort...)
Code:
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:
<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 :aie:
mais ca me ferait tellement plaisir:mouarf:
merci
affecter une fonction à une variable
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:
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> |
