Javascript-Ausgaben-Beispiel1

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<pre>
...
<div id="div1"><b>Hier ist der "div"-Container mit dem Namen <i>"div1"</i></b></div>
<div id="div2"><b>Hier ist der "div"-Container mit dem Namen <i>"div2"</i></b></div>
<div id="div3"><b>Hier ist der "div"-Container mit dem Namen <i>"div3"</i></b></div>
...
</pre>
ergibt:
<div id="div1"><b>Hier ist der "div"-Container mit dem Namen <i>"div1"</i></b></div>
<div id="div2"><b>Hier ist der "div"-Container mit dem Namen <i>"div2"</i></b></div>
<div id="div3"><b>Hier ist der "div"-Container mit dem Namen <i>"div3"</i></b></div>

== Aufgabe: ==
Gestalte die Ausgabe der drei div-Container wie in der nebenstehenden Abbildung ersichtlich. Verwende hierfür ausschließlich html-Tags ([http://de.selfhtml.org/navigation/html.htm selfhtml])! 
* Beachte die Bezeichner ''div1, div2, div3'' und ''t1, t2, t3''! Kontrolliere jeweils mit ''speichern & ausführen'' das Ergebnis!

<code id="54ee13400b4e1">
t1="Text";
t2="Text";
t3="Text";
</code>

<run id="54ee13400b626" readonly nooutput>
document.getElementById("div2").innerHTML = t3;
document.getElementById("div1").innerHTML = t2;
document.getElementById("div3").innerHTML = t1;
</run>


<hr>
<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>

<br>
<br>
[[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 ([http://de.selfhtml.org/navigation/html.htm selfhtml])! 
* Bearbeite den Wert der Variable ''test'' (direkt unter dieser Aufgabe) und kontrolliere jeweils mit ''speichern & ausführen'' das Ergebnis!
* Beachte im vorgegebenen Beispiel (vorgegebener Wert der Variable ''text'') die Verwendung von '...' statt "...". 
* Welches Problem würde sich ergeben, wenn man nicht "..." durch '...' ersetzen könnte?

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

<run id="54ea3d920e0ae" readonly nooutput>
document.getElementById("a12er").innerHTML = text;
</run>

[[Javascript-Ausgaben-Beispiel2]]