document.createElement is dead

Version imprimable

Bonjours la communauté.
Je suis en train de devenir fou.
la fonction :document.createElement
je vais la maudire jusqu'à la fin de mes jours.
voici le contexte:

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
41
42
43
44
45
46
47
48
49
50
 
var activeDebugDiv=false;
(function(){
 div = document.createElement("div");
 div.setAttribute('style',"position:absolute;bottom:0px;width:100%;height:250px;background:#55B2B9;overflow:auto;");
 activeDebugDiv=div;
 document.body.appendChild(activeDebugDiv);
})();
var jDebug = function(className) { 
 this.debug = function (mes,arg) {
 	(function () {
 	if (!activeDebugDiv)
 		setTimeout(function() {debug(mes,arg);},1);
 	else {
  if (mes) {
   if (typeof console!="undefined" && typeof console.log!="undefined")
    console.log(mes+"\n",arg);
   //if (ajaxInclude.activeDebugIsEnabled) {
    var div = document.createElement("div");
    div.setAttribute('style',"background:#ABC2DE;margin:3px;padding:2px;");
    div.innerHTML=mes+"<br/>\n";
    var ser = document.createElement("div");
    ser.setAttribute('style',"background:#555A60;margin:3px;padding:2px;");
    div.appendChild(ser);
    activeDebugDiv.appendChild(div);
    if (arg) {
    	(function(){
    		//ici la fonction document.createELement n'existe plus????????????????????????
     div = document.createELement("div");
     div.setAttribute("style","margin:3px;padding:2px;");
     div.innerHTML="esssai<br/>\n";
     contener.appendChild(div);     
    	})();	
    }
   //}
  }
 	}
 	})();	
};
var debug=this.debug;
 this.create = function(newClassName) {
  return (new jDebug(className+"-"+newClassName)).debug;
 };
};
myDebuger = new jDebug("ajaxInclude");
var debug = myDebuger.create("test");
debug("un");
debug("deux");
debug("trois");
debug("quatre",jDebug);

j'execute est j'ai
un deux trois... quatre is dead.
qui peu me donnée une raison?
m'en fout d'une solution.
je précise le premier qui me parle de Jquery je prend
un object contondant et je lui cours après.
la ou je met mon commentaire de perte du
document.createElement est perdu.
je voulais utiliser a la base une méthode de jDebug.
qui elle aussi la perdais.
après des essais intempestifs, dans le plus grand désespoir
j'en suis arrivée a ses truc immonde que je vous présente.
voila merci pour votre aide
Nico

12/01/2013, 10h38
Bovino

Si ton code est du copier coller de ce que tu testes, alors rien de plus normal :

Code:

div = document.createELement("div");

JavaScript étant sensible à la casse, createELement != createElement ! :aie:
12/01/2013, 11h57
Auteur

Et donner à une variable le nom d'une balise html n'est pas recommandé. Tu peux avoir des surprises.

Aère également ton code, il est difficilement lisible.
12/01/2013, 12h09
NoSmoking

Bonjour,
j'ajouterai que

Code:

div.setAttribute('style',"position:absolute;bottom:0px;width:100%;height:250px;background:#55B2B9;overflow:auto;");

autant passer par le CSS en se servant des class.

Utilisation de la déclaration des variables via le mot clé var.
15/01/2013, 19h08
Nico_FrancComtois

Mea Culpa

J'avoue c’était pas mon jour.
merci pour toute ses critiques.
Je vais en prendre sérieusement note.
surtout pour le CSS.
Cordialement à toute la communauté.
17/01/2013, 14h28
sekaijin
Bonjour,
j'ajouterai que

Code:

div.setAttribute('style',"position:absolute;bottom:0px;width:100%;height:250px;background:#55B2B9;overflow:auto;");

le membre style est fait pour ça
Code:

1 2 3 4 5 6 div.style.position='absolute'; div.style.bottom='0px'; div.style.width='100%'; div.style.height='250px'; div.style.backgroundColor='#55B2B9'; div.style.overflow='auto';
sinon pour jouer avec les classes div.className='test'; on peut aussi cumuler les classes div.className += ' ' + 'test'; attention il faut une espace avant la classe

A+JYT
17/01/2013, 14h33
Bovino

Code:

div.style.cssText = "position:absolute;bottom:0px;width:100%;height:250px;background:#55B2B9;overflow:auto;";

;)
18/01/2013, 12h05
thelvin

C'est super moche et indebuggable à moins d'avoir un IDE JavaScript qui détecte que ceci est censé être du CSS -_-°.
18/01/2013, 13h50
Bovino

Ce qui est moche et indébuggable, c'est avant tout de mettre des styles CSS inline.
Ce qui revient à la fin de l'intervention de sekaijin : séparer les couches, utiliser des feuilles de style externes et utiliser des classes.

Pour autant, cette technique existe et est méconnue et je ne trouve pas plus moche d'utiliser la méthode la plus performante à la place de celle à laquelle la plupart sont habitués. ;)
18/01/2013, 15h05
arnogues

Citation:

Envoyé par Auteur

Et donner à une variable le nom d'une balise html n'est pas recommandé. Tu peux avoir des surprises.

Aère également ton code, il est difficilement lisible.

C'est COMPLETEMENT FAUX, tu n'as juste pas le droit d'utiliser les mots réservés du langage comme par exemple : if, then, else, for, while, do, etc...

Mais tu peux donner le nom que tu veux à ta variable, si ta variable est un <div> il peut très bien l'appeler div.

Il ne faut pas confondre DOM et javascript, le javascript vit très bien sans le DOM, le DOM n'est qu'un truc en plus fourni par le navigateur et avec le JS tu viens taper dessus.
18/01/2013, 15h55
sekaijin
la seule chose avec les variables auquel il faut faire attention dans un navigateur c'est qu'une variable globale est en fait un membre de l'objet window
Code:

1 2 a=45; echo (window.a);//affiche 45
du coup si on utilise des noms de variables au niveau global (et uniquement global) qui correspondent à des propriétés en lectures seules ça donne des résultats inattendus
Code:

1 2 3 4 5 6 a=45; echo (a);//affiche 45 echo (window.a);//affiche 45 is_ie=12; echo (is_ie);//affiche false echo (window.is_ie);//affiche false
A+JYT

Tout ce qu'Auteur a dit est vrai. Ce n'est pas recommandé. Il n'a pas utilisé le mot "interdit".

Donc, dans ta logique, si j'ai tu as l'élément audio suivant dans ton code :

Code:

<audio id="audio1" preload="auto"></audio>

Tu y accèdes ainsi en javascript ?

Code:

var Audio = document.getElementById('audio1');

Et bien ce n'est pas recommandé car si tu as besoin de faire un new Audio(); plus loin, cela génère une erreur. Exemple :
Code:

1 2 3 4 5 6 7 var a = new Audio(); console.log(a); //on a bien un [object HTMLAudioElement] // Plus loin, tu décides, par exemple, de récupérer ton élément audio1 var Audio = document.getElementById('audio1'); // Audio var a = new Audio(); // Erreur !! "Exception: Audio is not a function" dans Firefox
Ça marche aussi pour option, object qui sont à la fois des balises HTML et des objets natifs à Javascript mais que l'on peut écraser par inadvertance ou si on n'a pas été sensibilisé. D'où la remarque très pertinente d'Auteur. (Bon ok, tu n'utilises que des minuscules ... mais on n'est jamais trop prudent. Quid si dans la prochaine norme ECMAScript "div" (ou autre balise HTML) devient un mot clé réservé ? )

Pour finir ...

Citation:

Il ne faut pas confondre DOM et javascript, le javascript vit très bien sans le DOM, le DOM n'est qu'un truc en plus fourni par le navigateur et avec le JS tu viens taper dessus.

DOM n'est pas seulement un truc en plus fourni pas le navigateur ... c'est l'essence même de la page web telle qu'elle est affichée dans le navigateur.
- on demande une page HTML à un navigateur
- le navigateur la parcourt, construit un modèle à partir de l'imbrication des balises et affiche le tout à partir de ce modèle.
- à chaque fois que le modèle (DOM) change, la page change

Dire que c'est un truc en plus est très réducteur pour cet ensemble d'interfaces riches et complètes qui permet de lire, modifier, mettre à jour et supprimer des éléments du document examiné.

Par exemple, si une page web est l'ensemble des éléments composant un meuble, le DOM serait le schéma et les outils nécessaires pour le monter et Javascript les instructions dans la langue que tu comprends.
Il y a ensuite beaucoup de langues permettant de lire les schémas et utiliser les outils (DOM Scripting) pour monter ce meuble (page web), mais une seule nous suffira pour ce faire (Javascript, par exemple). Les deux sont donc intimement liés dès lors que tu choisis cette langue pour lire les instructions.

Dans le même genre, il y a l'emploi de with :
Code:

1 2 3 4 5 6 7 8 9 10 11 with(document) { // document est le nouveau scope // Attention de ne pas toucher les propriété habituelles de document. // ... } with(body) { // body est le nouveau scope // Attention de ne pas toucher les propriété habituelles de body. // ... }
Ce qui signifie simplement qu'il faut toujours éviter d'entrer en conflit avec les variables qui pourraient déjà exister, et donc qu'on ne crée jamais de variable avec maVariable = truc; mais avec var maVariable = truc;.

Pour les variables globales, on évite les noms génériques, non pas par risque de mot-clé réservé, mais par risque de nom de variable déjà utilisé.

Il faut éviter le mot clef with pour spécifier ses variables. Les conventions de codage des grands comptes (Google, Douglas Crockford un des mentors de JS, etc.) sont unanimes là dessus.

with rend le code pas clair du tout parce que son objet peut avoir des propriétés qui affectent les variables locales, de ce fait ça peut changer le sens même de ton algo.

la meilleure démarche à utiliser est "d'englober ton code" dans une fonction qui retourne un objet qui contient les fonctions/variables qui ont besoin d'être utilisés à l'extérieur de ce module. Un peu à la méthode des "modules pattern" qu'utilisent les librairies externes javascript (jquery etc)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var MON_MODULE = (function() { var ma_var_publique = 10; return { // une fonction qui peut accéder à ma_var_publique à l'extérieur du module get_var_publique: function() { return ma_var_publique; } }; })(); // Pour accéder à ma_var_publique à l'extérieur du module : alert(MON_MODULE.get_var_publique());

20/01/2013, 13h08
Auteur

Citation:

Envoyé par arnogues

C'est COMPLETEMENT FAUX, tu n'as juste pas le droit d'utiliser les mots réservés du langage comme par exemple : if, then, else, for, while, do, etc...

Mais tu peux donner le nom que tu veux à ta variable, si ta variable est un <div> il peut très bien l'appeler div.

Il ne faut pas confondre DOM et javascript, le javascript vit très bien sans le DOM, le DOM n'est qu'un truc en plus fourni par le navigateur et avec le JS tu viens taper dessus.

Pour répondre à Arnogues :
http://javascript.developpez.com/faq...arer-variables

Et comme les 2/3 des débutants oublient de déclarer leurs variables...