Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Anfänger-Verständnisfrage
#1
Exclamation 
Hallo liebe Community,

ich bin also gerade dabei, mir Javascript beizubringen und habe die ersten Schritte tatsächlich schon gemacht. Im Zuge einer meiner Übungen habe ich folgendes Script erstellt.

Code:
  if (window.attachEvent) {
    window.attachEvent('onresize', function() {
      if (window.innerWidth < 400)
        console.log("Less than 400");
      else if(window.innerWidth < 900)
        console.log("Less than 900");
      else{
        console.log("More than 900");
      }
    });
  }else if (window.addEventListener) {
  window.addEventListener('resize', function() {
    if (window.innerWidth < 400)
      console.log("Less than 400");
    else if(window.innerWidth < 900)
      console.log("Less than 900");
    else {
      console.log("More than 900");
    }
  }, true);
} else {
  //...
}


Dabei gehts es um Bildschirmgrößen. Das Script wird in der Console tadellos ausgegeben. Wenn ich also das Browser-Bild verkleinere/respektive vergrößere und über die Breiten 400 und 900 gehe, zeigt mir das Consolenfenster das entsprechend an. Super. Verstanden.

Nun dachte ich mir aber: Wenn die Console diese Werte ausspuckt, dann kann man das doch sicher auch im Bild machen. Ich habe mich also an den Anfang des Javascript-Lernens erinnert und eine Variable in das Script eingefügt.

Code:
var inhalt; // Das ist die Variable, habs auch mit let probiert gehabt
if (window.attachEvent) {
    window.attachEvent('onresize', function() {
      if (window.innerWidth < 400)
        console.log("Less than 400");
        inhalt='kleiner als 400'; // Variable mit Inhalt füllen
      else if(window.innerWidth < 900)
        console.log("Less than 900");
        inhalt='kleiner als 900'; // Variable mit Inhalt füllen
      else{
        console.log("More than 900");
        inhalt='größer als 900'; // Variable mit Inhalt füllen
      }
    });
  }else if (window.addEventListener) {
  window.addEventListener('resize', function() {
    if (window.innerWidth < 400)
      console.log("Less than 400");
      inhalt='kleiner als 400'; // Variable mit Inhalt füllen
    else if(window.innerWidth < 900)
      console.log("Less than 900");
      inhalt='kleiner als 900'; // Variable mit Inhalt füllen
    else {
      console.log("More than 900");
      inhalt='größer als 900'; // Variable mit Inhalt füllen
    }
  }, true);
} else {
  //...
}
// Und hier gebe ich diese Variable nun aus, zumindest war das der Plan
document.write(inhalt);

Hatte mich schon sehr darauf gefreut, etwas im Bild zu sehen. AAAAber ...

Uncaught SyntaxError: Unexpected token 'else' (at ... 

KONKRET geht es dabei um diese Zeile im (window.attachEvent)-Bereich.

Code:
else if(window.innerWidth < 900)

Das verstehe ich gerade nicht. Warum eine Variable mit einem einfachen und festgelegten String so etwas auslöst. 

Meine Frage nun: Warum passiert dieser Fehler? Sieht ja so aus, als wäre es ein Fehler in der If-Clause. Aber warum funktioniert das dann in der Console problemlos und sobald ich eine einfache Variable hinzupacke, gibt es diesen Fehler?


Vielen Dank
Beste Grüße
Sunny
Zitieren
#2
Hi sunlite,
es sind mir einige Sachen in deinem Code aufgefallen, die nicht man äbändern sollte. Als erstes verwende kein document.write mehr. Zwar ist das kein Fehler, aber eine veraltete Technologie die zu Problemen führt. Die Performance der Webseite kann dadurch beeinträchtigt werden. Zum Teil kann der erzeugte Inhalt nicht vom DOM erkannt werden etc. Hier wären moderne Methoden angebracht.

Die Methode 'window.attachEvent' funktioniert ausschließlich nur mit dem Microsoft Internet Explorer und sollte auch nicht mehr verwendet werden. Hier solltest du moderne und einheitliche Methoden aus JavaScript verwenden die auch Standards darstellen. Hier in diesem Fall die Methode 'addEventListener'. Diese kannst du zum Objekt window oder document anfügen.

Hier ein kleines Beispiel:

Code:
window.addEventListener('resize', function() {
// tue etwas
});

Zudem würde ich den Wert von 'window.innerWidth' in eine Variable zwichenspeichern und dann in den If-Abfragen anwenden. Ein Tipp zu zum Event 'resize'. Hier solltest du vorsichtig damit umgehen, da dieses Event durchgehend gefeurt wird, wenn du die Bildschirmgröße veränderst. Und jetzt die Frage wozu man diesen Event braucht wenn sowieso die meisten Seiten Responsive sind?

Wenn man Auf Tablets den Bildschirm splittet oder auf dem PC, dann können Elemente wie CANVAS fehlerhaft oder nur teilweise angezeigt werden. Hier kann mithilfe vom 'resize'-Event nachgeholfen und Maße abgeändert werden.
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#3
Hallo @"rzscout",

vielen Dank für das sehr nützliche Feedback. Mir war natürlich gar nicht bewusst, dass das veraltete Struktur ist. Ich versuche es einmal komplett mit Deinen Tipps umzusetzen und gangbar zu machen.

Aber was meinst Du genau mit "Hier solltest du vorsichtig damit umgehen"? Dieses Script ist zwar nur eine Übung, aber angenommen es würde irgendwo einen Einsatz finden. Wie genau kann ich damit vorsichtig umgehen? In dem ich es nicht oder nur sehr selten anspringen lasse? So, wie ich es in der Console gesehen habe, schießt das Event doch nur, wenn es eine Bildschirm-Veränderung gibt, richtig? Ändert sich der Bildschirm nicht, schiesst auch nicht das Event, oder?  


Ich versuche nun auf jeden Fall einmal, das Script nach Deinem Feedback umzusetzen.

Danke soweit für die Hilfe
Beste Grüße
Sunny
Zitieren
#4
(25.02.2023, 13:24)sunlite schrieb: Hallo @"rzscout",

vielen Dank für das sehr nützliche Feedback. Mir war natürlich gar nicht bewusst, dass das veraltete Struktur ist. Ich versuche es einmal komplett mit Deinen Tipps umzusetzen und gangbar zu machen.

Aber was meinst Du genau mit "Hier solltest du vorsichtig damit umgehen"? Dieses Script ist zwar nur eine Übung, aber angenommen es würde irgendwo einen Einsatz finden. Wie genau kann ich damit vorsichtig umgehen? In dem ich es nicht oder nur sehr selten anspringen lasse? So, wie ich es in der Console gesehen habe, schießt das Event doch nur, wenn es eine Bildschirm-Veränderung gibt, richtig? Ändert sich der Bildschirm nicht, schiesst auch nicht das Event, oder?  


Ich versuche nun auf jeden Fall einmal, das Script nach Deinem Feedback umzusetzen.

Danke soweit für die Hilfe
Beste Grüße
Sunny


Hi sunny,
die Methode 'write' die sowohl beim document-Objekt als auch beim window-Objekt verwendet werden kann solltest du vermeiden. Dafür gibt es einige Gründe:
Für die Methode 'write' gibt es moderne Methoden um Inhalt in die Seite einzufügen. Unter anderem die Methoden 'appendChild', 'createTextNode', 'innerHTML', 'textContent'. Die Verwendung von 'write' kann in einigen Fällen zu Problemen mit JavaScript führen und auch mit dem DOM. Zudem kommt es auch zu Performanceprobleme und es kann Inhalt überschrieben werden.

Es gibt viele Gründe moderne Methoden zu verwenden um den DOM zu manipulieren und eigene Inhalte bzw. Elemente einzufügen. Hier ein gutes Beispiel:
Code:
let newElem = document.createElement('p');
newElem.textContent = "Dein Inhalt";
document.body.appendChild(newElem);

Der Beispielcode fügt innerhalb des Body-Elements am Ende ein p-Element ein das den entsprechenden Inhalt enthält.

Gerne darfst du rund um JavaScript hier im Forum Fragen stellen. Ich würde dir empfehlen Fachliteratur zu JavaScript zu holen. Entweder über deine örtliche Bücherei oder Bücher kaufen.

Hier habe ich eine Sammlung spannender Fachbücher über JavaScript zusammen getragen:
https://www.rheinwerk-verlag.de/einstieg-in-javascript/
https://www.rheinwerk-verlag.de/schroedi...avascript/
https://www.thalia.de/shop/home/artikeld...1044617774

Viele Grüße
rzscout
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren
#5
Klasse @"rzscout",

danke für die Infos. Das ist für einen Anfänger überhaupt die Hauptaufgabe, herauszufinden, was nicht mehr gemacht bzw. durch neue Methoden ersetzt werden soll. Nicht jede Seite, die ich im Zuge meines Erlernens nutze, berichtet darüber. Und offizielle Seiten wie Mozilla erklären das zwar, aber generell ist deren Art, Dinge zu erklären eher für Fortgeschrittene gedacht – zumindest empfinde ich das so. Deshalb bin ich für solche nützlichen Tips immer sehr dankbar Smile

Beste Grüße
Sunny
Zitieren
#6
(05.03.2023, 11:18)sunlite schrieb: Klasse @"rzscout",

danke für die Infos. Das ist für einen Anfänger überhaupt die Hauptaufgabe, herauszufinden, was nicht mehr gemacht bzw. durch neue Methoden ersetzt werden soll. Nicht jede Seite, die ich im Zuge meines Erlernens nutze, berichtet darüber. Und offizielle Seiten wie Mozilla erklären das zwar, aber generell ist deren Art, Dinge zu erklären eher für Fortgeschrittene gedacht – zumindest empfinde ich das so. Deshalb bin ich für solche nützlichen Tips immer sehr dankbar Smile

Beste Grüße
Sunny

@sunlite Vielen Dank für dein Feedback, ich hoffe das du auch die Möglichkeit nutzt Lernvideos und Bücher für dein Wissen zu verwenden. JavaScript bietet einiges um eine gute bis hochwertige Webanwendung zu bauen.
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste