Australopiticus: Grundsatzfrage

hi
ich versuch mich gerade an meiner ersten richtigen webseite und wollte fragen ob es möglich ist einen Bereich zu definieren in den man verschiedene Texte laden kann, je nachdem auf welchen link im menü man drückt.
Ich hätt es mit javascript versucht, aber immer wenn ich hier mit document.write() den text schreiben will wird gleich ein neues fenster geöffnet und der Text nicht im alten fenster an der richtigen position geschrieben. Gibt es da eine andere Funktion die besser geeignet ist? sollte man das überhaupt ganz anders machen?
wär echt lässig wenn ihr mir helfen könntet.

danke
australo

  1. 3 stark verkürzte Lösungsansätze meinerseits:

    innerHTML nennt sich die Eigenschaft, nach der du suchst.
    Container bzw. "Bereiche" für deinen Text gibt es viele: <span>, <div>, <li> ... es hängt vom -mir nicht weiter bekannten- Verwendungszweck ab, welchen du auswählen solltest.

    Mit document.write() schreibst du nicht in einen Container, sondern -wie es der Befehl schon ausdrückt- auf die unterste Ebene deines (Html-)Dokuments.

    1. Nimm einen Container mit eindeutiger ID <div id="deintext"></div>. Diesen kannst du nun mit
      document.getElementById('deintext').innerHTML = 'Mein Inhalt blabla';
      befüllen. Die ID dient dazu, dass Javascript weiß, auf welches Element du dich beziehst.

    Allerdings möcht ich von dieser Vorgehensweise abraten. So weit als möglich solltest du Inhalt (Html) von Funktionalität (Javascript) und Layout (CSS) trennen. Javascript ist nicht in erster Linie dazu da, deine Seite mit Inhalt zu füllen.

    1. Solange es sich um kleine Datenmengen handelt kannst du für jeden Link einen Container samt Inhalt erstellen und jene Container, die gerade nicht angeklickt sind mit CSS (display:none) ausblenden.
      Javascript verwendest du, um den diese Eigenschaft zu setzen.
      document.getElementById("deintext").style.display = "none";
      Verwende für jedes Element eine andere ID.

    2. Nur der Vollständigkeit halber: Es ist auch möglich dein Vorhaben ohne Javascript, nur mit CSS umzusetzen. Mit dem CSS-Selektor :target.

    1. @@mark:

      nuqneH

      Allerdings möcht ich von dieser Vorgehensweise abraten. So weit als möglich solltest du Inhalt (Html) von Funktionalität (Javascript) und Layout (CSS) trennen. Javascript ist nicht in erster Linie dazu da, deine Seite mit Inhalt zu füllen.

      Bei modernen Webapplikationen tut man das aber: Bei Interaktionen wird nicht eine neue Seite aufgerufen, sondern auf der bestehenden weren mit AJAX Inhalte geändert. Im besten Fall (lies: unbedingt) widerspiegelt sich der geänderte Zustand im URI, der Zustand der Seite kann als Lesezeichen gespeichert und an andere per Social Network oder Mail weitergegeben werden. Auch der Back-Button sollte so funktionieren, als hätte man die Seite gewechselt.

      1. Solange es sich um kleine Datenmengen handelt kannst du für jeden Link einen Container samt Inhalt erstellen und jene Container, die gerade nicht angeklickt sind mit CSS (display:none) ausblenden.
        Javascript verwendest du, um den diese Eigenschaft zu setzen.

      Damit wird der geänderte Inhalt zwar *sicht*bar, aber barrierefrei ist das nicht. Also mit JavaScript nicht die display-Eigenschaft ändern (man sollte in den allermeisten fällen sowieso mit JavaScript nicht direkt CSS-Eigenschaften ändern), sondern bspw. das hidden-Attribut: http://forum.de.selfhtml.org/archiv/2014/6/t217798/#m1497497 f.

      1. Nur der Vollständigkeit halber: Es ist auch möglich dein Vorhaben ohne Javascript, nur mit CSS umzusetzen. Mit dem CSS-Selektor :target.

      Das Unschöne daran ist der (oft unerwünschte) Sprung auf der Seite beim Anwählen eines Ankers.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Moin,

    Ich hätt es mit javascript versucht, aber immer wenn ich hier mit document.write() den text schreiben will wird gleich ein neues fenster geöffnet und der Text nicht im alten fenster an der richtigen position geschrieben. Gibt es da eine andere Funktion die besser geeignet ist? sollte man das überhaupt ganz anders machen?

    Wenn es Javascript sein soll, ist es oft sinnvoll ein Framework zu nutzen. _Ein_ Framework für Single-Page-Applications ist beispielsweise AngularJS.
    Für Einsteiger gibt es viele Videos, welche grundlegende Konzepte gut darstellen.

    Grüße Marco

    --
    Ich spreche Spaghetticode - fließend.