CSS-Hintergrundfarbe mit Javascript ändern

[Linuchs]

Moin,

per CSS markiere ich Text als selektiert:

.prio_3 {
  background-color: #fcc;
}

Per Javascript kann Text abwechselnd selektiert/deselektiert werden. Das desektieren klappt aber nur dann, wenn der Text vorher mit JS gefärbt wurde, die CCS Farbe kann ich nicht zurücksetzen:

var farbe_prio3 = "#faa";
...
    var arr = http.responseText.split("=");
    if ( arr[0] == 'prio_3' ) {
      if ( arr[1] == '0' ) obj_aendern.style.backgroundColor = "#fff";
      if ( arr[1] == '1' ) obj_aendern.style.backgroundColor = farbe_prio3;
    }

Ich habe es auch ohne Erfolg versucht mit "", "inherit" und "none". Auch den style prio_3 zurückzusetzen klappt nicht:

obj_aendern.style.prio_3 = "";

Linuchs

[Gunnar Bittersmann]

@@Linuchs

Per Javascript kann Text abwechselnd selektiert/deselektiert werden. Das desektieren klappt aber nur dann, wenn der Text vorher mit JS gefärbt wurde, die CCS Farbe kann ich nicht zurücksetzen:

Ein weiteres Beispiel in der Sammlung, dass es nie™ eine gute Idee ist, CSS-Eigenschaften mit JavaScript zu setzen.

Aber das ist „schwer in die Köpfe der Menschen zu bringen“.

Beschreibe doch mal, was du machst; dann kann man dir dabei helfen, es richtig™ zu machen.

LLAP 🖖

[Linuchs]

Beschreibe doch mal, was du machst; dann kann man dir dabei helfen, es richtig™ zu machen.

Fachmesse mit Ausstellern und Besuchern n:n

Aussteller wählt sich ein und sieht alle Besucher, kann beliebig viele anklicken, um Interesse am Kontakt zu signalisieren (dafür auch die Darstellung der Geräte-Anzahl aus dem anderen Faden). Für jeden Klick wird per Ajax ein Datensatz angelegt Aussteller:Besucher, der Besucher wird auf der Liste farbig markiert.

Der Aussteller kann per Klick auch seine Wahl stornieren, deshalb muss die Farbmarkierung wieder weg.

Bei der nächsten Sitzung sieht der Aussteller seine alten Klicks und kann sie stornieren. Das klappt optisch nicht.

Linuchs

[Auge]

Hallo

Aussteller wählt sich ein und […] kann beliebig viele anklicken, um Interesse am Kontakt zu signalisieren … der Besucher wird auf der Liste farbig markiert.

Der Aussteller kann per Klick auch seine Wahl stornieren, deshalb muss die Farbmarkierung wieder weg.

Setze statt der Inline-CSS-Regel die Klasse für einen angewählten Besucher und entferne sie wieder.

Bei der nächsten Sitzung sieht der Aussteller seine alten Klicks und kann sie stornieren. Das klappt optisch nicht.

Wenn die Auswahl aus der letzten Sitzung auf dem Webserver gespeichert ist, kannst du die Klasse bei der Generierung des Dokuments, z.B. per PHP, an passender Stelle setzen. Das Entfernen und erneute setzen der Klasse mit JS im Browser funktioniert dann wie beim erstmaligen auswählen eines Eintrags.

Tschö, Auge

[Linuchs]

Setze statt der Inline-CSS-Regel die Klasse für einen angewählten Besucher und entferne sie wieder.

Danke für den Hinweis, mich mit Klassen zu befassen. Bei der Änderung des JS-Codes habe ich den eigentlichen Fehler gefunden.

Geändert wurde die Farbe des Objekts <div>, darin verblieb aber unverändert das gefärbte <p>. Habe jetzt dem <div> die Farbe zugepordnet.

Jetzt klappt's wie gewünscht:

    var arr = http.responseText.split("=");
    if ( arr[0] == 'prio_3' ) {
      var JSclassName = obj_aendern.className;  // aktuelle Klasse kann prio_3 enthalten
alert( "tagName=[" +obj_aendern.tagName +"] className=[" +JSclassName +"]" );
//    if ( arr[1] == '0' ) obj_aendern.style.backgroundColor  = "inherit";
      if ( arr[1] == '0' ) obj_aendern.className  = JSclassName.replace( "prio_3", "" );
      if ( arr[1] == '1' ) obj_aendern.className  = JSclassName +" prio_3";
    }

inuchs

[Matthias Scharwies]

Servus!

Setze statt der Inline-CSS-Regel die Klasse für einen angewählten Besucher und entferne sie wieder.

Danke für den Hinweis, mich mit Klassen zu befassen.

Es steht alles im Wiki: JavaScript/Anwendung und Praxis/Datensatzauswahl aus Tabelle

inuchs

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Linuchs

Setze statt der Inline-CSS-Regel die Klasse für einen angewählten Besucher und entferne sie wieder.

Danke für den Hinweis, mich mit Klassen zu befassen.

Nur schade, dass du ihn nicht beachtest hast.

Bei der Änderung des JS-Codes habe ich den eigentlichen Fehler gefunden.

CSS-Eigenschaften mit JS zu ändern ist der eigentliche Fehler.

LLAP 🖖

[Linuchs]

CSS-Eigenschaften mit JS zu ändern ist der eigentliche Fehler.

Hinweis habe ich nicht verstanden. Am CSS drehe ich nichts. Ich füge dem Objekt <div> eine neue Klasse hinzu oder storniere diese Klasse wieder (von mehreren möglichen):

obj_aendern.className  = JSclassName +" prio_3";

Linuchs

[Gunnar Bittersmann]

@@Linuchs

CSS-Eigenschaften mit JS zu ändern ist der eigentliche Fehler.

Hinweis habe ich nicht verstanden.

Das kommt bei Orakeln vor. Cheatah war manchmal ein Orakel.

Ich füge dem Objekt <div> eine neue Klasse hinzu oder storniere diese Klasse wieder (von mehreren möglichen):

Ja, das meinte das Orakel.

obj_aendern.className  = JSclassName +" prio_3";

Und wie kriegst du die Klasse prio_3 wieder weg? obj_aendern.className = JSclassName;?

Besser dürfte sein, className gar nicht anzufassen, sondern die Methoden add, remove und toggle des classList-Objekts zu verwenden. Ab IE 10.

obj_aendern.classList.add('prio_3');
obj_aendern.classList.remove('prio_3');
obj_aendern.classList.toggle('prio_3');

LLAP 🖖

[Jörg Reinholz]

Moin!

Besser dürfte sein, className gar nicht anzufassen, sondern die Methoden add, remove und toggle des classList-Objekts zu verwenden. Ab IE 10.

obj_aendern.classList.add('prio_3');
obj_aendern.classList.remove('prio_3');
obj_aendern.classList.toggle('prio_3');

Ich denke, man sollte nach Möglichkeit (noch) darauf verzichten. Grund: IE < 10 (laut caniuse.com zusammen rund 2,5%) und Opera mini (knapp 5% der Nutzer). Das ist rund einer von zwölf Nutzern.

Der HTML-Elementstapel bietet genug Möglichkeiten, die Zeile mit genau einer Klasse zu versehen und diese zu ändern oder zu löschen. (obj.className)

Jörg Reinholz

[Jörg Reinholz]

Moin!

Wolltest Du sowas? (Test)

<! doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tabelle</title>
        <style type="text/css">
        .tiger tbody tr:nth-child(1n+1) { background-color:#eef; }
        .tiger tbody tr:nth-child(2n+2) { background-color:#eee; }
        .tiger tbody tr:hover { background-color:#efe; }

        .tiger tbody tr.gewaehlt:nth-child(1n+1) { background-color:#fbc; }
        .tiger tbody tr.gewaehlt:nth-child(2n+2) { background-color:#fbb; }
        .tiger tbody tr.gewaehlt:hover { background-color:#fcb; }
        </style>
    </head>
    <body>
        <table class="tiger" id="auswahl">
            <thead>
                <tr><th>Name</th><th>Vorname</th></tr>
            </thead>
            <tbody>
                <tr><td>Stein</td><td>Hein</td></tr>
                <tr><td>Dipus</td><td>Ö.</td></tr>
                <tr><td>Angne</td><td>Lars</td></tr>
            <tbody>
        </table>

        <script>
        var rows = document.getElementById('auswahl').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
        for (i = 0; i < rows.length; i++) {
            rows[i].addEventListener('click', function() {
                if (this.className=='gewaehlt') {
                    this.className='none';
                } else {
                    this.className='gewaehlt'
                }
            });
        }
        </script>
    <body>
</html>

Jörg Reinholz

[Linuchs]

Hallo Jörg,

so etwa sieht das bei mir auch aus (ohne rechten Haken).

Allerdings wird der Klick per Ajax zum Server geschickt, erzeugt oder ändert dort Daten, meldet den Erfolg zurück. Erst dann wrd die Position gefärbt bzw. entfärbt.

Dein Beispiel gefällt mir wegen der dezenten Farbgebung gut, da gucke ich mir noch was ab. Und das mit dem Event-Listener, das mus ich mal sacken lassen.

Linuchs

[Jörg Reinholz]

Moin!

Der Haken ist für die Benutzer durchaus wichtig:

• Erstens wegen derjenigen mit Störungen im Farbsehen.
• Zweitens wegen derjenigen, die in zu hellen Umgebungen arbeiten.
• Drittens wegen derjenigen, die das Anzeigegerät stark neigen (wodurch womöglich Farben stark verfälscht werden.)

Noch was zur Benutzbarkeit:

Setze nach dem Klicken ein Pending-Symbol (oder das berühmte wait.gif) an die Stelle, übergib der Funktion, die den Ajax Request ausführt, auch die Zelle (als Objekt) und wenn der Ajax-Request eine positive Rückmeldung gibt, dann setze den Haken bzw. (bei Abwahl) ein passendes Symbol dafür.

Jörg Reinholz

[Jörg Reinholz]

Moin!

Ich halte ja auch Javascript-Seminare. Also stellt Euch mal vor, ihr würdet in einem solchen als Teilnehmer sitzen.

Würdet ihr diese Tabelle (aber anfangs ohne Javascript!) als Ausgangspunkt für diverse Übungen/Demos akzeptieren?

Hintergrund: Ich selbst bin ja nicht "Der Designer". Und, da ich Teilnehmer "von bis" habe würde ich auch gerne wissen wollen, ob es euch vielleicht überfordern würde.

Jörg Reinholz

[1unitedpower]

Hintergrund: Ich selbst bin ja nicht "Der Designer". Und, da ich Teilnehmer "von bis" habe würde ich auch gerne wissen wollen, ob es euch vielleicht überfordern würde.

Ich glaube, dass hochwertig anmutende GUIs die Motivation der Seminarteilnehmer stark zum Positiven beeinflussen können. Auf der anderen Seite sollte UI-Design sich nicht unbeabsichtigt in den Vordergrund drängen und den Seminarleiter zu weiten Auschweifungen veranlassen. Für solche Fälle empfinde ich Bootstrap oder ein vergleichbares CSS-Framework als guten Kompromiss.

[Jörg Reinholz]

Moin!

Auf der anderen Seite sollte UI-Design sich nicht unbeabsichtigt in den Vordergrund drängen und den Seminarleiter zu weiten Auschweifungen veranlassen. Für solche Fälle empfinde ich Bootstrap oder ein vergleichbares CSS-Framework als guten Kompromiss.

Hm. Das könnte man ausblenden indem man das CSS in eine externe Datei? Wobei: Nicht bei diesem Beispiel. Ich brauche ja die Klasse.

Ich glaube, dass hochwertig anmutende GUIs die Motivation der Seminarteilnehmer stark zum Positiven beeinflussen können.

Ja. Darum geht mir bei der Frage auch. Aber ist das gezeigte (unter der Prämisse "Beispiel" bzw. "Übung" denn "hochwertig"?

Jörg Reinholz

[1unitedpower]

Moin!

Auf der anderen Seite sollte UI-Design sich nicht unbeabsichtigt in den Vordergrund drängen und den Seminarleiter zu weiten Auschweifungen veranlassen. Für solche Fälle empfinde ich Bootstrap oder ein vergleichbares CSS-Framework als guten Kompromiss.

Hm. Das könnte man ausblenden indem man das CSS in eine externe Datei? Wobei: Nicht bei diesem Beispiel. Ich brauche ja die Klasse.

Aber was interessiert es dich, bzw. deine Seminarteilnehmer wie genau die zur Klasse passenden CSS-Definitionen aussehen? Sag deinen Teilnehmern einfach, dass sie dir da Mal für eine Minute vertrauen müssen und dass passende CSS-Definitionen bereits vorhanden sind. Dann überrasche mit dem Ergebnis und zeige eine durchgestylte markierte Tabellenzeile.

Ich glaube, dass hochwertig anmutende GUIs die Motivation der Seminarteilnehmer stark zum Positiven beeinflussen können.

Ja. Darum geht mir bei der Frage auch. Aber ist das gezeigte (unter der Prämisse "Beispiel" bzw. "Übung" denn "hochwertig"?

Die Schriftart ist modern und webtauglich. Die Positionierung der Tabelle in der oberen, linken Bildschirmhälfte wirkt auf mich sehr lieblos. Wenn es sowieso keine anderen GUI-Elemente gibt, wieso die Tabelle dann nicht in den Mittelpunkt rücken? Die Farbgebung macht einen konfusen Eindruck, ich kann deine Intention dahinter leider nicht erkennen, teilweise beißen die Farben sich sogar. Kennst du http://www.colourlovers.com/ oder den Styleguide von Google? Die Ikonographie macht auch einen unbeholfenen Eindruck: ein gepunktetes Quadrat um eine nicht-gewählte Option zu symbolisieren? (An dieser Stelle sollte sich im HTML übrigens eine Checkbox wiederfinden)

Wie du selber sagst, bist du im Design-Bereich eher der Grobmotoriker. Meine Talente in diesem Gebiet sind selbst massiv unterentwickelt. Aber für Typen wie dich und mich gibt es Frameworks von Typen, die sind nicht wie du und ich, und die haben wirklich Ahnung von dem was da tun. Wieso sich nicht einfach an deren Erfahrungsschatz bereichern und in deinem Seminar darauf zurückgreifen?

[Jörg Reinholz]

Moin!

Ist klar, auf mich wirken die Farben natürlich logisch, weil ich die selbst vergeben habe. Das Farbkonzept überdenken, also vereinfachen, verschlanken.

(An dieser Stelle sollte sich im HTML übrigens eine Checkbox wiederfinden)

Ja, das klärt dann auch das von Gunnar gefundende Problem.

Aber für Typen wie dich und mich gibt es Frameworks

Nein. Keine Frameworks, sondern pures "Vanilla" - der Seiteneffekte wegen. Es geht im JS-Seminar um Variablen, Arrays, Funktionen, Objekte, DOM, Ereignisse, Abgrenzung zu anderen Technologien (HTML5, CSS, serverseitiges Skripting) - Basics also. Und ich habe immer nur maximal 3 Tage und zumeist Teilnehmer deren Vorkenntnisse in HTML und CSS manchmal ausbaubedürftiger als vorgesehen sind und muss wie die Hölle aufpassen, dass diese nicht innerlich aussteigen. Die verwendeten anonymen Funktionen sind eigentlich schon zu viel des Guten und sorgen (nachvollziehbar) dafür, dass mancher Teilnehmer seine Kopfschmerztabletten sucht - gehören jetzt aber (man muss ja moderne Inhalte haben) zur Ereignisbehandlung.

Jörg Reinholz

[1unitedpower]

Aber für Typen wie dich und mich gibt es Frameworks

Nein. Keine Frameworks, sondern pures "Vanilla" - der Seiteneffekte wegen. Es geht im JS-Seminar um Variablen, Arrays, Funktionen, Objekte, DOM, Ereignisse, Abgrenzung zu anderen Technologien (HTML5, CSS, serverseitiges Skripting) - Basics also. Und ich habe immer nur maximal 3 Tage und zumeist Teilnehmer deren Vorkenntnisse in HTML und CSS manchmal ausbaubedürftiger als vorgesehen sind und muss wie die Hölle aufpassen, dass diese nicht innerlich aussteigen.

Gerade dann erscheint es mir sinnvoll die Teilnehmer nicht zusätzlich mit peripheren Technologien kognitiv zu belasten. Ich habe dir nicht raten wollen Bootstrap als Lernziel anzustreben, sondern nur das Mittel zum Zweck wahrzunehmen. Stell deinen Teilnehmern eine funktionieren Bootstrap-Umgebung bereit, dann führe Klassen ein, wann du sie brauchst. Die notwendigen CSS-Grundlagen und gegebenenfalls Boilerplates erst selbst zu entwickeln sorgt imho. für vermeidbare Distraktion. Einen CSS-Exkurs, falls notwendig, würde ich in eine isolierte Unterrichtseinheit packen und nicht mit den JavaScript-Lektionen vermengen.

[Jörg Reinholz]

Moin!

So besser?

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

So besser?

Den Checkboxen fehlen die Labels, siehe mein erstes Beispiel.

Und vermutlich muss an das <td id="Summe">-Feld noch ein ARIA-Attribut ran, damit Screenreader-Nutzer die geänderte Summe mitgeteilt bekommen.

LLAP 🖖

[Jörg Reinholz]

Moin!

Den Checkboxen fehlen die Labels ... Und vermutlich muss an das <td id="Summe">-Feld noch ein ARIA-Attribut ran, damit Screenreader-Nutzer die geänderte Summe mitgeteilt bekommen.

Nein. Abgelehnt. Es mag DEINEN Vorstellungen nicht entsprechen, aber ich muss den Quelltext im Hinblick auf den Unterrichtszweck doch ein klein wenig begrenzen und einfach mal hinnehmen, dass hierbei eine paranoide Vollständigkeit und Richtigkeit nicht erreichbar ist.

Wenn ich alle diese Vorstellungen umsetze, dann sind die Teilnehmer schon weg bevor die erste Zeile Javascript geschrieben ist.

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Den Checkboxen fehlen die Labels ... Und vermutlich muss an das <td id="Summe">-Feld noch ein ARIA-Attribut ran, damit Screenreader-Nutzer die geänderte Summe mitgeteilt bekommen.

Nein. Abgelehnt. Es mag DEINEN Vorstellungen nicht entsprechen, aber ich muss den Quelltext im Hinblick auf den Unterrichtszweck doch ein klein wenig begrenzen und einfach mal hinnehmen, dass hierbei eine paranoide Vollständigkeit und Richtigkeit nicht erreichbar ist.

Es geht nicht um „paranoide Vollständigkeit und Richtigkeit“, sondern um Bedienbarkeit. Und zwar für alle!

Wenn ich alle diese Vorstellungen umsetze, dann sind die Teilnehmer schon weg bevor die erste Zeile Javascript geschrieben ist.

Ach, Unsinn. Niemand rennt weg, nur weil in td noch ein label steckt. Du erwähnst beiläufig, dass das so sein muss, damit die Auswahl auch per Tastatur funktioniert und alle sagen „Aha.“ Gegessen.

Ein ARIA-Attribut. „Aha.“ Gegessen.

Nichts Kompliziertes. Es geht einfach darum, den Teilnehmers die Augen zu öffnen. Und dem entgegenzuwirken, dass

Von Anfang an.

Du willst doch den Teilnehmen keine crap-ware™ vermitteln, oder?

LLAP 🖖

[Jörg Reinholz]

Moin!

Es geht nicht um „paranoide Vollständigkeit und Richtigkeit“, sondern um Bedienbarkeit. Und zwar für alle!

Es geht um ein Seminar. Und wie wir gerade sehr schön sehen sinkt die Aufmerksamkeit mit den Beilagen: Du kannst mit der Tastatur navigieren und brauchst auch nicht mit der Maus oder dicken Fingern auf die Checkbox zielen, weil es ja gerade darum geht, die Interaktion über Javascript bei einem Klick oder Tipp auf die Zeile auszulösen. Die Label gehören ins HTML-Fortgeschritten- Seminar. Da ist die Tabelle anders auszubauen: das Skript fliegt raus und die Labels kommen rein.

Jörg Reinholz

[Gunnar Bittersmann]

@@Jörg Reinholz

Du kannst mit der Tastatur navigieren

Hurra! Kaum verwendet man die passenden nativen HTML-Elemente, schon funktioniert’s! :-)

und brauchst auch nicht mit der Maus oder dicken Fingern auf die Checkbox zielen,

Weil mit JavaScript auf Clicks auf die ganze Tabellenzeile gelauscht wird. Das ist auch OK so. (Das Ohne-JavaScript-geht-gar-nicht-Fass will ich hier gar nicht aufmachen.)

Was noch nicht OK ist: Die Checkboxen haben keine Beschriftung.

Die Label gehören ins HTML-Fortgeschritten- Seminar.

Nei-en! Dass jedes Eingabeelement eine Beschriftung braucht, gehört ins HTML-Anfänger-Seminar. Das ist Grundlagenwissen.

In einem anderen Posting sagtest du: „Es geht um JAVASCRIPT GRUNDLAGEN.“ Was aber sind JavaScript-Grundlagen?

Wertzuweisungen, Schleifen (incl. if-Schleifen ;-))? Ja, auch.

Aber die absolute Grundlage von JavaScript ist: HTML!

Und wenn bei den Teilnehmern das HTML-Grundlagenwissen (wie bspw. dass jedes Eingabeelement eine Beschriftung braucht) nicht vorausgesetzt werden kann, muss es Aufgabe des JavaScript-Seminars sein, diese HTML-Grundlagen mitzuvermitteln.

Da ist die Tabelle anders auszubauen: das Skript fliegt raus und die Labels kommen rein.

Weder noch. Die Labels gehören von Anfang an rein. Bedienbarkeit für alle ist nichts, was erst später hinzugefügt werden sollte.

Warum sollte das Script rausfliegen? Es dient guter UX: Bei Änderung der Auswahl wird die geänderte Gesamtsumme sofort angezeigt – ohne dass Daten zu Server geschickt, auf die Antwort gewartet und die Seite neu gerendert werden muss. Das ist selbstverständlich ein sinnvoller Einsatz von JavaScript. Gut geeignet für ein Anfängerseminar.

LLAP 🖖

[Mitleser]

Aber die absolute Grundlage von JavaScript ist: HTML!

WTF!?

[Der Martin]

Hallo,

Aber die absolute Grundlage von JavaScript ist: HTML!

das ist in dieser allgemeinen Formulierung falsch. Der typische Anwendungsbereich von Javascript ist zwar ein Webbrowser, schon klar. Javascript kann aber auch in ganz andere Anwendungen integriert sein. Mir fällt spontan der Adobe Reader ein, der nichts mit HTML zu tun hat.

Weder noch. Die Labels gehören von Anfang an rein. Bedienbarkeit für alle ist nichts, was erst später hinzugefügt werden sollte.

Das ist der gleiche Fehler, wie ihn viele Elektroniker bei der Schaltungsentwicklung machen: Sie "basteln" zunächst auf dem Schmierzettel, dann am PC und schließlich auf dem Labortisch etwas, was unter kontrollierten Bedingungen funktioniert. Und dann fallen ihnen schließlich weitere Anforderungen des Marktes ein, wie zum Beispiel: "Jetzt muss das nur noch EMV-tauglich gemacht werden."
Und das nachträglich an einer fast fertigen Schaltung zu machen, ist oft sehr schwierig. Hätte man sich um derartige Dinge gleich von Anfang an Gedanken gemacht, würden viele Probleme später gar nicht erst auftreten.

So long,
 Martin

[Jörg Reinholz]

Moin!

Aber die absolute Grundlage von JavaScript ist: HTML!

das ist in dieser allgemeinen Formulierung falsch.

Ja. Node wird im F-Kurs gezeigt.

Jörg Reinholz

[Jörg Reinholz]

Moin!

Und wenn bei den Teilnehmern das HTML-Grundlagenwissen (wie bspw. dass jedes Eingabeelement eine Beschriftung braucht) nicht vorausgesetzt werden kann, muss es Aufgabe des JavaScript-Seminars sein, diese HTML-Grundlagen mitzuvermitteln.

Schöne Idee. Leider bin ich in der Überzahl der Fälle nicht der Veranstalter und schon gar nicht der Besteller (der sich regelmäßig auch noch vom Teilnehmer unterscheidet) sondern derjenige, dessen Name auf dem Bewertungszettel steht. Und mein "Wohl und Wehe" hängt davon ab, wo die Kreuze gemacht werden.

Ich muss also höllisch aufpassen, dass die Teilnehmer sich nicht überfordert fühlen und dass ich die Sache nicht zu schwierig mache - das bedeutet also, dass ich mich (aber nicht ganz so sehr wie manche Buchautoren) um gewisse Dinge einfach mal drücke.

Was aber sind JavaScript-Grundlagen? … Wertzuweisungen, Schleifen (incl. if-Schleifen ;-))? Ja, auch.

Einführungsgeblubber (Was ist Javascript... wozu soll das gut sein ...) Variablen, Funktionen, Methoden für String und Num, Sprachkonstrukte (Schleifen, Vergleiche) Objekte, spezielle Objekte wie (Math, Date), DOM, Herangehensweise bei Problemstellungen - das alles in 3 Tagen, mit einem Teilnehmer in 2 Tagen. (Diese Zeitvorgaben gelten in der Branche übrigens für sämtliche Programmiersprachen …) Erwartet werden Vorkenntnisse in HTML, CSS. Ob die Teilnehmer diese haben oder irgend eine andere Programmiersprache können erfahre ich am ersten Tag. Und die Teilnehmer sind weder Berufsschüler noch Leute, welche diese gerade abgeschlossen haben. Hausaufgaben kann ich auch keine stellen. Und AA-Kurse sind es auch nicht, da hätte man wohl mehr Zeit und könnte was von "Sie haben in HTML aber nicht aufgepasst! Lesen Sie das dort nach." bellen.

Es ist schon schwierig genug, den Teilnehmern die Umstände zu vermitteln, dass und warum das im Begleitbuch mit Beispiel aufgeführte Validieren von Formulareingaben a) nicht reicht, b) deshalb auf dem Server noch mal gemacht werden muss und c) auf Grund von HTML5 in der Mehrheit der Fälle auch noch hyperliquid geworden ist.

Jörg Reinholz

[1unitedpower]

So besser?

Der Anfangszustand des Beispiels ist inkonsistent. In der Liste sind zwei Einträge ausgewählt, die sich zu 2400 aufsummieren, es wird aber stattdessen 1600 angezeigt.

Für die Gestaltung der Tabelle würde ich dich als Seminarteilnehmer nicht lynchen. Lob und Begeisterung würdest du von mir allerdings auch nicht ernten. Es gibt kein Layout, die Tabelle baumelt nach wie vor verloren in ihrer Ecke rum. Es gibt keine visuellen Highlights, gerade mit Checkboxen ließe sich so viel machen. Keine visuelle Sprache. Als ich anfangs von Motivationssteigerung sprach, hatte ich etwas im Sinn, das mindestens einen Quantesprung von dem entfernt ist, was du jetzt hast. Bootrap, Foundation und Co. kommen für dich scheinbar weiterhin nicht in Frage, wie wärs wenn du dich zumindest ein wenig davon inspirieren lässt? Die Standardbeispiele spielen schon in einer anderen Liga.

[Jörg Reinholz]

Moin!

So besser?

Der Anfangszustand des Beispiels ist inkonsistent. In der Liste sind zwei Einträge ausgewählt, die sich zu 2400 aufsummieren, es wird aber stattdessen 1600 angezeigt.

So, die Ausgabe stimmt jetzt.

Bootrap, Foundation und Co. kommen für dich scheinbar weiterhin nicht in Frage

Nochmals: NEIN. Es geht um JAVASCRIPT GRUNDLAGEN. Also Vanilla. Es muss alles außen vor bleiben was ablenkt oder den Teilnehmer in eine Wüste unbekannten Quelltextes schickt.

So ein Spaß mit

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>

geht also nicht. Wenn ich das einbaue ist die erste Frage, was DAS denn mit den Seminarinhalten des gebuchten Javascript-Grundlagen-Seminars zu tun habe? Und die zweite Frage lautet dann: Wenn es nichts damit zu tun hat, wieso (WTF!) verwende ich es dann und verwirre die Teilnehmer, die Javascript-Grundlagen lernen sollen?

Jörg Reinholz

[1unitedpower]

Bootrap, Foundation und Co. kommen für dich scheinbar weiterhin nicht in Frage

Nochmals: NEIN. Es geht um JAVASCRIPT GRUNDLAGEN. Also Vanilla. Es muss alles außen vor bleiben was ablenkt oder den Teilnehmer in eine Wüste unbekannten Quelltextes schickt.

Da bin ich immer noch anderer Meinung, wie ich schon vorher sagte, ist unnötige kognitve Belastung die Wurzel allen Übels und nicht das Gegenteil davon. Aber Der Punkt hier war auch ein ganz anderer, nämlich, dass du dir dort Inspiration holen kannst.

So ein Spaß mit

<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-tour.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tour.min.js"></script>

Das minimale Setup fur Bootstrap braucht nur den Stylesheet, also reduziert sich Der Boilerplate Code auf:

<link href="bootstrap.css" rel="stylesheet">

Die minifizierte Version ist für die Entwicklung auch eher ungeeignet.

[Gunnar Bittersmann]

@@Jörg Reinholz

Würdet ihr diese Tabelle (aber anfangs ohne Javascript!) als Ausgangspunkt für diverse Übungen/Demos akzeptieren?

Nein. Mit dem Keyboard kann man nichts auswählen. Das Ding ist kaputt.

“Keyboard accessibility is not a feature. If an interactive widget is on The Web and not keyboard accessible, it is unfinished / broken. It is not ready for The Web’s diversity of users.” —Heydon Pickering

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nein. Mit dem Keyboard kann man nichts auswählen. Das Ding ist kaputt.

Lösung: In die Zellen der letzten Spalte Checkboxen einbauen:

<tr>
  <td><label for="1">1</label></td>
  <td><label for="1">Stein</label></td>
  <td><label for="1">Hein</label></td>
  <td><label for="1">100 €</label></td>
  <td><input type="checkbox" id="1"/></td>
</tr>

Dann ist auch gleich die Anzeige ausgewählt/nicht ausgewählt da. Kann man natürlich mit CSS auch aufhübschen.

Alternativ gingen auch Buttons:

<tr>
  <td>1</td>
  <td>Stein</td>
  <td>Hein</td>
  <td>100 €</td>
  <td><button>Hein Stein auswählen/abwählen</button></td>
</tr>

Den Button(text) kann man visuell verstecken.

Die Auswahl/Nichtauswahl sollte dann nicht nur visuell über ✓/⦙⦙⦙⦙ und Hintergrundfarbe, sondern auch textuell mitgeteilt werden.

LLAP 🖖

[Gunnar Bittersmann]

@@Jörg Reinholz

Würdet ihr diese Tabelle (aber anfangs ohne Javascript!) als Ausgangspunkt für diverse Übungen/Demos akzeptieren?

Ins DOM geschaut: Wozu das leere tbody-Element?

In den Quelltext geschaut: Ah, Schreibfehler. Du wolltest ein </tbody>-End-Tag.

Ins Stylesheet geschaut: * { font-family:'roboto',sans-serif; }

Nicht die beste Idee, jedem Element im DOM die font-family-Eigenschaft anzuhängen. Da die Eigenschaft vererbt wird, genügt es, sie einem übergeordneten Element zu geben. Das kann das table-Element sein oder auch das html-Element.

LLAP 🖖

[Linuchs]

Hallo Jörg,

Ich halte ja auch Javascript-Seminare.

Ich gehe davon aus, dass du (zahlende) Teilnehmer suchst?

Mein Veranstalungskalender für Kultur, Sport, Weiterbildung, ... ist ja von zahlreichen Ratschlägen aus der Self-Gemeinde begleitet worden.

Nun könntest du ernten. Gib doch mal deine Termine ein bei remso.eu - kostnix.

Linuchs