Anführungszeichen schachteln, 3 Ebenen

[Linuchs]

Moin,

wenn Javascript vorhanden, wird ein Text angezeigt, der auf eine Javascript-Funktion mit Parameter verlinkt (ohne Javascript macht der Link keinen Sinn). Angezeigt wird der JS-Fehler

SyntaxError: expected expression, got end of script

  document.write('<p class=hinweis>Mache <b class=cblau>Dornumersiel</b> zu deiner persönlichen „Hauptstadt” und setze <a href="javascript:setCookie(\"my_ORT\",13596)">HIER</a> ein Cookie. Ab sofort erscheint <b class=cblau>Dornumersiel</b> dann auf der <span class=remso>remso</span> Startseite. Mehr: <img id="my_ORT" class="help" src="img/icon_hilfe.gif" alt="?" title="Info" /></p>' );

Ebene 1: write('<p ...

Ebene 2: href="javascript ...

Ebene 3: javascript:setCookie("my_ORT ...

Maskierung auf Ebene 3 \" zeigt keine Wirkung.

Wie sieht die Lösung aus?

Zusatzfrage: Wann interpretiert Javascript einen String-Inhalt? Wie bei PHP, wenn der String in " statt ' eingeschlossen ist? Dann wäre hier </a> ebenso okay wie <\/a>, weil JS NICHT interpretiert?

Gruß, Linuchs

[dedlfix]

Tach!

Ebene 1: write('<p ...

Ebene 2: href="javascript ...

Ebene 3: javascript:setCookie("my_ORT ...

Maskierung auf Ebene 3 \" zeigt keine Wirkung.

In Ebene 1 beginnt mit ' ein String. Das " darin wird nicht weiter beachtet. Das \" hingegen wird zu " aufgelöst. Das write() schreibt das also beides als ".

Wie sieht die Lösung aus?

Zum Beispiel \' verwenden, dann wird das von Ebene 1 zu ' aufgelöst, womit du dann " und ' in der Ausgabe stehen hast.

Oder du maskiert sowohl das " als auch den \ davor, was dann zu \\\" wird.

Zusatzfrage: Wann interpretiert Javascript einen String-Inhalt? Wie bei PHP, wenn der String in " statt ' eingeschlossen ist?

Javascript unterscheidet nicht zwischen beiden Zeichen. Sie sind gleichwertig.

Dann wäre hier </a> ebenso okay wie <\/a>, weil JS NICHT interpretiert?

Das ist ein maskierter /, was problemlos ist, aber unnötig. Lediglich bei einem </script>, das literal in einem Javascript-String steht, muss man escapen, weil sonst der HTML-Parser an der Stelle den Script-Block beendet.

dedlfix.

[Matthias Apsel]

Hallo Linuchs,

das Zeichen zum Escapen ist in JavaScript der Backslash \.

Bis demnächst
Matthias

[pl]

Ich würde den ganzen Kram nicht in Anführungszeichen setzen sondern in einen <script id="kram" type="text/html">-Bereich. Da kannst Du auch mit Zeilenumbrüchen arbeiten und diesen Textbaustein mit den üblichen Mitteln by ID da auslesen und woanders wieder einsetzen.

MfG

[Gunnar Bittersmann]

@@pl

Ich würde den ganzen Kram nicht in Anführungszeichen setzen sondern in einen <script id="kram" type="text/html">-Bereich. Da kannst Du auch mit Zeilenumbrüchen arbeiten und diesen Textbaustein mit den üblichen Mitteln by ID da auslesen und woanders wieder einsetzen.

Dazu ist das template-Element da. [MDN]

LLAP 🖖

[Rolf B]

Hallo Linuchs,

zunächst mal ist dedlfix Antwort diejenige, in in deinem vorhandenen Konstrukt die zielführendste ist.

Der erzeugte Link muss so aussehen: <a href="javascript:setCookie('my_ORT',13596)">HIER</a>, um funktionieren zu können, daher ist dein escapetes " um my_ORT herum das Problem.

Mit Anführungszeichen bist Du übrigens auch an anderer Stelle nicht sauber. In der ausführlichen Liste fehlt der class-Angabe von h3 Orts-Kalender ein Anführungszeichen.

PL schlug vor, ein Template in einen script-Block zu setzen. Kann man machen - aber wenn Deine Zielgruppe es zulässt, könntest Du auch das <template> Tag von HTML5 verwenden.

ICH frage mich allerdings, warum Du HTML mit document.write im Browser erzeugst. Es ist doch viel einfacher, das Ziel-HTML direkt am Server zu erstellen. Welche fiese Rahmenbedingung zwingt Dich dazu? Du "versteckst" an einigen Stellen HTML in JavaScript-Strings. Hilft das gegen Script-Kiddies, die deine Seiten absaugen wollen? Mit direktem HTML hättest Du all die Probleme nicht.

Vom Design her würde ich Dir noch vorschlagen wollen, den Link "zur ausführlichen Liste" / "zur komprimierten Liste" in einer Zeile zu halten (mit span class="nowrap").

Die h1 Problematik ist schon anderswo diskutiert worden. Ich sehe bei Dir ein h1 bei "klingende Kalender für Europa" - finde ich korrekt - und dann eins beim Städtenamen. Ich empfinde diese beiden Dinge nicht als gleichrangig. Vor allem nicht, weil dem h1 des Städtenamens das <h3>Orts-Kalender</h3> übergeordnet ist. Es wäre vermutlich semantisch korrekter, hier kein h1 zu wählen. Allerdings bin ich überhaupt nicht sicher, was wirklich korrekt ist. Ich spreche das hier nur deshalb an, weil ich selbst was lernen möchte und dein Layout für eine interessante Fragestellung halte.

Rolf

[Linuchs]

Hallo Rolf,

ICH frage mich allerdings, warum Du HTML mit document.write im Browser erzeugst. Es ist doch viel einfacher, das Ziel-HTML direkt am Server zu erstellen.

Wie erfährt der Server davon, ob der Browser Javascript ausführt?

Du "versteckst" an einigen Stellen HTML in JavaScript-Strings.

Habe ich ja schon erwähnt. Wenn Javascript nicht greift, funktionieren gewisse Extras nicht. Warum sollte ich den Leser auf diese Extras klicken lassen und dann schadenfreudig "April, April" rufen? Das wäre Windoof-Verarsche: Wollen Sie diese Datei wirklich löschen? - Ja - Sie haben keine Berechtigung. Oder noch schlimmer, es passiert nichts.

Du kennst youtu.be? Wenn JS abgeschaltet ist, kommt eine leere Seite. Kein Hinweis von youtu.be - habe tagelang geglaubt, die wären gehackt worden und nicht mehr am Netz.

Ich hatte JS testweise ausgeschaltet, auf vielen Domains kein Problem, die funktionieren auch dann.

[Rolf B]

Hallo Linuchs,

wenn Javascript vorhanden, wird ein Text angezeigt…

ja, wer lesen kann - sorry.

Du könntest diese Teile aber trotzdem im normalen HTML einbauen (die Bandbreite dafür wird eh im Javascript verknuspert) und als hidden markieren (zusätzlich mit display:none, wenn Du Uralt-Browser unterstützen willst, die hidden nicht kennen). Per JavaScript am Seitenende (oder in einem DOMContentLoaded Handler) schaltest Du das hidden-Attribut aus, bzw. sorgst für ein display:block oder display:inline (je nachdem, was Du hast).

Die Folge: User mit aktivem JavaScript sehen nichts davon, und wer JS aktiv hat, bekommt es.

Besser als document.write ist das alle Male.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Der erzeugte Link muss so aussehen: <a href="javascript:setCookie('my_ORT',13596)">HIER</a>

Falsch. Du hättest es wissen sollen.

href="javascript: ist ein sicheres Indiz, dass da kein Link erzeugt werden soll, sondern ein Button.

LLAP 🖖

[Gunnar Bittersmann]

@@Linuchs

wenn Javascript vorhanden, wird ein Text angezeigt, der auf eine Javascript-Funktion mit Parameter verlinkt (ohne Javascript macht der Link keinen Sinn).

Mit JavaScript macht der Link auch keinen Sinn. Du hättest es besser wissen sollen.

Außerdem ist „HIER“ kein sinnvoller Link-Text; auch keine sinnvolle Button-Beschriftung.

Was du tun solltest: Den Absatz ganz normal als p-Element mit hidden-Attribut ins HTML schreiben und mit JavaScript das hidden-Attribut entfernen.

<p id="set-cookie-hinweis" class="hinweis" hidden>Mache <b class=cblau>Dornumersiel</b> zu deiner persönlichen „Hauptstadt” und <button onclick="setCookie('my_ORT',13596)">setze ein Cookie</button>. Ab sofort erscheint <b class=cblau>Dornumersiel</b> dann auf der <span class=remso>remso</span> Startseite. Mehr: <img id="my_ORT" class="help" src="img/icon_hilfe.gif" alt="?" title="Info" /></p>

document.querySelector('#set-cookie-hinweis').hidden = false;

Siehe auch mein Posting von vorhin.

Ich habe das HTML als bad markiert; da gibt’s noch einiges zu verbessern:

• „?“ ist kein sinnvoller Alternativtext. Welchen Bildinhalt hat img/icon_hilfe.gif?

• JavaScript-Code raus aus dem Markup, also weg mit onclick. Stattdessen: <button id="set-cookie-button"> und

  document.querySelector('#set-cookie-button').addEventListener('click', function ()
  {
  	setCookie('my_ORT',13596);
  }
  

• cblau ist vermutlich kein sinnvoller Klassenbezeichner. Wozu haben die b-Elemente eine Klasse?

• Das schließende Anführungszeichen ist im Deutschen “ (Doppel-6).

• „remso-Startseite“ nicht mit Deppenleerzeichen

LLAP 🖖