Discussion :

[Sinouhé87]

Bonjour tout le monde, j'ai du mal à comprendre à quel objet fait référence le mot clef «this» à la ligne 24 du code suivant :

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
const compare = function(ids, asc){
	return function(row1, row2){
		const tdValue = function(row, ids){
			return row.children[ids].textContent; 
		}  
		const tri = function(v1, v2){
			if (v1 !== '' && v2 !== ''&& !isNaN(v1) && !isNaN(v2)){
			return v1-v2;
			}
			else {
			return v1.toString().localeCompare(v2);
			}
			return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2); 
		};
		return tri(tdValue(asc ? row1 : row2, ids), tdValue(asc ? row2 : row1, ids));
	}
}
 
const tbody = document.querySelector('tbody');
const thx = document.querySelectorAll('th');
const trxb = tbody.querySelectorAll('tr');
thx.forEach(function(th){
	th.addEventListener('click', function(){
		let classe = Array.from(trxb).sort(compare(Array.from(thx).index0f(th), this.asc = !this.asc));
		classe.forEach(function(tr){
			tbody.appendChild(tr) 
		}); 
	}) 
});

Sur des exemples plus simples j'arrive à comprendre mais là j'ai du mal...

Est-ce que c'est le <th> sur lequel on clique ?

Merci pour votre aide.

[Beginner.]

Salut,

Oui.

[Sinouhé87]

D'accord merci. Et est-ce que th.asc =!th.asc fonctionnerait aussi ?

[Beginner.]

Tu veux dire d'un point de vu syntaxe ? Parce que avec ton code on ne sait pas ce que tu veux faire, on n'a pas toutes les infos...

[psychadelic]

D'accord merci. Et est-ce que th.asc =!th.asc fonctionnerait aussi ?

non, pour ça faudrait que tu utilise une fonction fléchée

[Sinouhé87]

Ah bon pourquoi ?

[NoSmoking]

Bonjour,

non, pour ça faudrait que tu utilise une fonction fléchée

ce n'est pas une question de type de fonction mais de scope et dans le cas présent l'utilisation de th fonctionnerait.
Pour s'en convaincre il suffit de tester

Code :

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

1
2
3
4
5
thx.forEach(function (th) {
  th.addEventListener('click', function () {
    console.log("th :", th, this, this === th);
  })
});

avec une « arrow function » on pourrait passer par le event.target mais th serait tout aussi valable.

Code :

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

1
2
3
4
5
6
thx.forEach(function (th) {
  th.addEventListener('click', (e) => {
    const o = e.target;
    console.log("th :", th, this, o === th);
  })
});

[Beginner.]

Perso je n'ai toujours pas compris la question, je parle de la deuxième (la réponse à la première étant oui)...

[psychadelic]

Perso je n'ai toujours pas compris la question, je parle de la deuxième (la réponse à la première étant oui)...

tu fais référence à

th.asc =!th.asc

j'imagine ?

ce genre de code sert à inverser une valeur booléenne

Code JAVASCRIPT :

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

1
2
let unTest = true;
testVal  = !testVal;  //  équivalent à  testVal <= not testVal

mais ce qui doit te déranger c'est qu'il à du au préalable écrire quelque chose du genre

Code JAVASCRIPT :

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

1
2
3
 
const thx = document.querySelectorAll('#maTable th')
thx.forEach(th=>th.asc = true)

pour assigner une nouvelle propriété booléenne (asc) sur chaque élément th qui visiblement lui permet d'indiquer si l'ordre de la colonne est ascendant ou non (hypothèse basée sur le nom de cette variable)

Pour s'en convaincre il suffit de tester

ah oui,.. puisqu'il s'agit d'une fonction anonyme...

En fait ce qui m'étonne, c'est qu'il n'a pas testé par lui-même ce truc qui ne demande pas grand chose pour se forger une idée.

[Beginner.]

ce genre de code sert à inverser une valeur booléenne

Oui effectivement ça j'avais compris...

mais ce qui doit te déranger c'est qu'il à du au préalable écrire quelque chose du genre

Code JAVASCRIPT :

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

1
2
3
 
const thx = document.querySelectorAll('#maTable th')
thx.forEach(th=>th.asc = true)

pour assigner une nouvelle propriété booléenne (asc) sur chaque élément th qui visiblement lui permet d'indiquer si l'ordre de la colonne est ascendant ou non (hypothèse basée sur le nom de cette variable)

Oui bien vu. Il n'a pas mis cela dans son code mais apparemment ça peut quand même marcher : au départ th.asc sera undefined (et l'inverse de undefined c'est true) ensuite l’assignation (th.asc = !undefined) "crée" la propriété asc et l'initialise à true.

Je crois que ton hypothèse concernant le sens de asc est bonne, cela semble logique...

[Sinouhé87]

Bonjour, dsl je n'ai pas été clair je reformule ma question :

Dans mon code initial, si je remplace « this.asc=!this.asc » par « th.asc =!th.asc », le nouveau code serait-il équivalent à l'ancien ?

D'après vos réponses, c'est oui si j'ai bien compris.

[Beginner.]

Ah ok j'ai compris cette fois... La réponse est oui effectivement...

Par rapport à la remarque de psychadelic tu devrais vérifier si il n'y a pas de problème car c'est seulement au premier clique que la propriété asc est "créée" et elle est initialisée à true.

Si donc au départ (avant le premier clique) elle est censée être à false alors tout va bien mais si au départ elle est censée être à true eh bien au premier clique au lieu de passer à false (comme tu l’espères après l’exécution de this.asc = !this.asc) eh bien elle sera initialisée à true (elle vaudra donc true alors qu'elle devrait valoir false).

[Sinouhé87]

Ok merci beaucoup !

[Sinouhé87]

Oh regardez ce qu'on m'a répondu ailleurs :

« Bonjour non il ne fonctionnerait pas si tu remplaçais :

Code :

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

1
2
3
this.asc = !this.asc
// par
th.asc = !th.asc

par ce que cette ligne et situé dans la fonction exécuté au click d'un th et qu'au moment de l'exécution de cette fonction tous les th on été parcourues et que la variable th fait référence au th actuel dans le parcours des th donc il serait toujours soit égal au derniers th et pas à celui qui et cliqué soit la donnée aurait été libéré et tu aurais un ReferenceError »

Mais alors normalement le code aurait dû être :

Code :

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

Array.from(thx).indexOf(this), this.asc = !this.asc

et pas :

Code :

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

Array.from(thx).indexOf(th), this.asc = !this.asc

car indexOf( ) permet normalement de récupérer l'indice de la colonne sur lequel se trouve le <th> cliqué et si j'ai bien compris, en mettant « indexOf(th) » on risquerait de récupérer l'indice de la dernière colonne du tableau...

[Beginner.]

Salut,

Ben il suffirait de tester pour trancher la question... As-tu testé ?
Perso j'ai fait une petit teste et cela confirme les réponses données...
Il y a aussi les codes de NoSmoking qui te permettent de constater cela...

[Sinouhé87]

Oui pardon je viens de tester, c'est l'autre personne qui se trompe du coup dsl.

[Beginner.]

Ton code fonctionne comme tu veux ?

PS : Chez moi il y avait une erreur notamment car tu as écrit index0f au lieu de indexOf...

[NoSmoking]

Ce qui important dans le code que tu écris est la cohérence du code, ou tu utilises th ou tu utilises this mais pas un mixe des deux.

Le deuxième point à souligné et que ta variable est dans un scope bien défini donc ce que l'on t'as expliqué est inexacte, chaque th ayant son gestionnaire d'événement click attaché il n'y aura pas de soucis.

[Sinouhé87]

Ok merci pour vos réponses !