Anfänger-Verständnisfrage - Druckversion +- Javascript-forum (https://javascript-forum.de) +-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4) +--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6) +--- Thema: Anfänger-Verständnisfrage (/showthread.php?tid=2179) |
Anfänger-Verständnisfrage - sunlite - 25.02.2023 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) { 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 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 RE: Anfänger-Verständnisfrage - rzscout - 25.02.2023 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() { 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. RE: Anfänger-Verständnisfrage - sunlite - 25.02.2023 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 RE: Anfänger-Verständnisfrage - rzscout - 26.02.2023 (25.02.2023, 13:24)sunlite schrieb: Hallo @"rzscout", 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'); 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/schroedinger-lernt-html5-css-und-javascript/ https://www.thalia.de/shop/home/artikeldetails/A1044617774 Viele Grüße rzscout RE: Anfänger-Verständnisfrage - sunlite - 05.03.2023 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 Beste Grüße Sunny RE: Anfänger-Verständnisfrage - rzscout - 05.03.2023 (05.03.2023, 11:18)sunlite schrieb: Klasse @"rzscout", @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. |