Javascript-Ausgaben-Beispiel2

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<pre>
...
<div id="a12er"><b>Hier ist der "div"-Container mit dem Namen <i>"a12er"</i></b></div>
...
</pre>

ergibt:

<div id="a12er"><b>Hier ist der "div"-Container mit dem Namen <i>"a12er"</i></b></div>

== Hinweis: ==
Die Lösung der folgenden Aufgabe wäre in einer Zeile sehr unübersichtlich. In diesem Fall wird der Wert der Variable ''inhalt'' durch Anfügen (Unterschied = und +=) "zusammengebaut". 

[[Bild:Rboettcher_RB_Bild_JS_Ausg_Bsp1.jpg|thumb|200px|rechts]]
== Aufgabe: ==
Gestalte die Ausgabe im div-Container wie in der nebenstehenden Abbildung ersichtlich. Verwende hierfür ausschließlich html-Tags (als Hilfsmittel könntest du selfhtml verwenden)! 
* Bearbeite den Wert der Variable ''<b>inhalt</b>'' (direkt unter dieser Aufgabe) und kontrolliere jeweils mit ''speichern & ausführen'' das Ergebnis!
* Füge z.B. als erstes Zeilenumbrüche hinzu!
* <b>Beachte</b> im vorgegebenen Beispiel in <b>Zeile 3 </b> die Verwendung von '...' statt "...". 
* Welches Problem würde sich ergeben, wenn man nicht "..." durch '...' ersetzen könnte? Du wirst das bei der rot-Färbung verwenden müssen!
<br>

<code id="54eb819630a7e">
inhalt="Das ist kursiver Text ";
inhalt+="mit fettem Text ";
inhalt+="mit rotem Text <font size='+3'>und </font> ";
inhalt+="unterstrichenem Text ";
inhalt+=" mit Zeilenumbrüchen ";
</code>

<run id="54ea3d920e0ae" readonly nooutput>
document.getElementById("a12er").innerHTML = inhalt;
</run>
[[Javascript-Ausgaben-Beispiel3]]