Discussion :

[Nico_FrancComtois]

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 :

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

[Bovino]

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

Code :

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

div = document.createELement("div");

JavaScript étant sensible à la casse, createELement != createElement !

[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.

[NoSmoking]

Bonjour,
j'ajouterai que

Code :

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

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.

[Nico_FrancComtois]

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é.

[sekaijin]

Bonjour,
j'ajouterai que

Code :

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

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

le membre style est fait pour ça

Code :

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

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

[Bovino]

Code :

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

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

[thelvin]

C'est super moche et indebuggable à moins d'avoir un IDE JavaScript qui détecte que ceci est censé être du CSS -_-°.

[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.

[arnogues]

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.

[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 :

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

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 :

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

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

[Kaamo]

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 html :

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

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

Tu y accèdes ainsi en javascript ?

Code javascript :

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

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 "javascript :

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

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 ...

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.

[thelvin]

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

Code :

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

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é.

[Kaamo]

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 javascript :

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

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());

[Auteur]

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...