Mehrere Variablen bündeln
bearbeitet von Gunnar Bittersmann@@borisbaer
> ~~~ JavaScript
> function filterTable( e ) {
> ~~~
Wofür steht `e`{:.language-js.bad}?
> ~~~ JavaScript
> let filter = e.target.value.toUpperCase();
> ~~~
Ah, vermutlich für ein Event. Dann sollte der Parameter auch so benannt sein: `event`.
`filter` taucht im Folgenden nirgendwo rechts vom Gleichheitszeichen auf, d.h. es wird kein neuer Wert zugewiesen; es ist ein Konstante. `let`{:.language-js.bad} ist falsch, `const`{:.language-js.good} ist richtig.
Gleiches gilt für `tr`, `td0`, `td1` und `td2`.
Argl, `tr`{:.language-js.bad}. Der Bezeichnung ist nicht anzusehen, dass in der Konstanten(!) mehrere Zeilen (ein Array) gespeichert wird. Nicht
> ~~~ JavaScript, bad
> let tr = document.querySelector( 'tbody' ).rows;
> ~~~
sondern
~~~ JavaScript, good
const rows = document.querySelector( 'tbody' ).rows;
~~~
---
> ~~~ JavaScript
> for ( let i = 0; i < tr.length; i++ ) {
>
> let td0 = tr[i].cells[0].textContent.toUpperCase();
> ⋮
> }
> ~~~
Die 2000er haben angerufen. Sie hätten gerne ihre Old-school-Schleifen zurück.
Mit der erwähnten Umbenennung in `rows`:
~~~ JavaScript
for ( let row of rows ) {
const td0 = row.cells[0].textContent.toUpperCase();
⋮
}
~~~
Wofür steht `td0`{:.language-js.bad}? Nicht für ein `td`-Element, sondern für dessen Textinhalt (transformiert in Großbuchstaben). Die Benennungen `td0`, `td1` und `td2` sind also ebenfalls schlecht.
Und warum nicht sowas wie (ungetestet)
~~~ JavaScript
for ( let row of rows ) {
const cellContents = row.cells.map(x => x.textContent.toUpperCase());
⋮
}
~~~
Statt `td0`, `td1` und `td2` dann `cellContents[0]`, `cellContents[1]` bzw. `cellContents[2]`.
---
> ~~~ JavaScript, bad
> tr[i].style.display =
> td0.indexOf( filter ) > -1 ||
> td1.indexOf( filter ) > -1 ||
> td2.indexOf( filter ) > -1
> ? "" : "none";
> ~~~
Nein!! Man sollte i.d.R. niemals mit JavaScript Werte von CSS-Eigenschaften setzen, sondern Änderungen im DOM machen. Zum Verstecken bietet HTML das `hidden`-Attribut:
~~~ JavaScript
tr[i].hidden =
td0.indexOf( filter ) > -1 ||
td1.indexOf( filter ) > -1 ||
td2.indexOf( filter ) > -1
? false : true;
~~~
Wobei man gleich den Booleschen Wert zuweisen kann:
~~~ JavaScript
tr[i].hidden = !(
td0.indexOf( filter ) > -1 ||
td1.indexOf( filter ) > -1 ||
td2.indexOf( filter ) > -1
);
~~~
Mit de Morgan kriegt man auch die Negation weg:
~~~ JavaScript
tr[i].hidden =
td0.indexOf( filter ) = -1 &&
td1.indexOf( filter ) = -1 &&
td2.indexOf( filter ) = -1;
~~~
(Ebenfalls ungetestet. Zu `tr[i]` und `td0`, `td1`, `td2` siehe oben.)
🖖 Живіть довго і процвітайте
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix
Mehrere Variablen bündeln
bearbeitet von Gunnar Bittersmann@@borisbaer
> ~~~ JavaScript
> function filterTable( e ) {
> ~~~
Wofür steht `e`{:.language-js.bad}?
> ~~~ JavaScript
> let filter = e.target.value.toUpperCase();
> ~~~
Ah, vermutlich für ein Event. Dann sollte der Parameter auch so benannt sein: `event`.
`filter` taucht im Folgenden nirgendwo rechts vom Gleichheitszeichen auf, d.h. es wird kein neuer Wert zugewiesen; es ist ein Konstante. `let`{:.language-js.bad} ist falsch, `const`{:.language-js.good} ist richtig.
Gleiches gilt für `tr`, `td0`, `td1` und `td2`.
Argl, `tr`{:.language-js.bad}. Der Bezeichnung ist nicht anzusehen, dass in der Konstanten(!) mehrere Zeilen (ein Array) gespeichert wird. Nicht
> ~~~ JavaScript, bad
> let tr = document.querySelector( 'tbody' ).rows;
> ~~~
sondern
~~~ JavaScript, good
const rows = document.querySelector( 'tbody' ).rows;
~~~
---
> ~~~ JavaScript
> for ( let i = 0; i < tr.length; i++ ) {
>
> let td0 = tr[i].cells[0].textContent.toUpperCase();
> ⋮
> }
> ~~~
Die 2000er haben angerufen. Sie hätten gerne ihre Old-school-Schleifen zurück.
Mit der erwähnten Umbenennung in `rows`:
~~~ JavaScript
for ( let row of rows ) {
const td0 = row.cells[0].textContent.toUpperCase();
⋮
}
~~~
Wofür steht `td0`{:.language-js.bad}? Nicht für ein `td`-Element, sondern für dessen Textinhalt (transformiert in Großbuchstaben). Die Benennungen `td0`, `td1` und `td2` sind also ebenfalls schlecht.
Und warum nicht sowas wie (ungetestet)
~~~ JavaScript
for ( let row of rows ) {
const cellContents = row.cells.map(x => x.textContent.toUpperCase());
⋮
}
~~~
Statt `td0`, `td1` und `td2` dann `cellContents[0]`, `cellContents[1]` bzw. `cellContents[2]`.
---
> ~~~ JavaScript, bad
> tr[i].style.display =
> td0.indexOf( filter ) > -1 ||
> td1.indexOf( filter ) > -1 ||
> td2.indexOf( filter ) > -1
> ? "" : "none";
> ~~~
Nein!! Man sollte i.d.R. niemals mit JavaScript Werte von CSS-Eigenschaften setzen, sondern Änderungen im DOM machen. Zum Verstecken bietet HTML das `hidden`-Attribut:
~~~ JavaScript
tr[i].hidden =
td0.indexOf( filter ) > -1 ||
td1.indexOf( filter ) > -1 ||
td2.indexOf( filter ) > -1
? false : true;
~~~
Wobei man gleich den Booleschen Wert zuweisen kann:
~~~ JavaScript
tr[i].hidden = !(
td0.indexOf( filter ) > -1 ||
td1.indexOf( filter ) > -1 ||
td2.indexOf( filter ) > -1
);
~~~
Mit de Morgan kriegt man auch die Negation weg:
~~~ JavaScript
tr[i].hidden =
td0.indexOf( filter ) = -1 &&
td1.indexOf( filter ) = -1 &&
td2.indexOf( filter ) = -1;
~~~
(Ebenfalls ungetestet. Zu `tr[i]` siehe oben.)
🖖 Живіть довго і процвітайте
{:@uk}
--
*When the power of love overcomes the love of power the world will know peace.*{:@en}
— Jimi Hendrix