Ho, ho, ho, hello World!

So sieht meine Weihnachts-Webseite mit einem Tannenbaum aus Javascript aus!

HoHoHoHelloWorld.jpg

Und jetzt sind Sie dran. Besser machen!!

z.B. so ...
TannenbaumMitKerzen.png
Tipps:
  • Halten Sie sich nicht zu lange mit dem HTML-Anteil der Aufgabe auf. Sie sollten mit einer geeigneten Vorlage starten!
  • Weitere Verbesserungsmöglichkeiten:
    • Für den grünen Teil des Tannenbaums verschiedene Zeichen nutzen. Das sieht abwechslungsreicher aus.
    • Stamm, Kugeln und ggf. Lametta ergänzen. Vielleicht noch einen Weihnachtsengel on top und einen Ständer unten drunter?
    • Kerze jeweils in erster und letzter Spalte des Tannenbaumgrüns in der Folgezeile, z.B. in jeder 4. Zeile.
    • Ideen für schicke Tannenbäume in ASCII-Art recherchieren.
  • Der Stamm sollte proportional zur Größe des Baumes bleiben, wenn sich die Höhe ändert!
  • Kerzen sollten aus Brandschutzgründen nicht im Grünen angebracht werden. ;-)

<!DOCTYPE html>
 
<html>
 
<head>
 
  <title>JavaScript - Beispiel</title>
  <meta charset="utf-8">
 
  <style>
 
        body, table, tr, td
        {
          font-family:      verdana;
          font-size:        14px;
          color:            green;
          text-align:       center;
        }
 
        ul
        {
          text-align:       left;
          color:            black;
        }
 
  </style>
 
</head>
 
 
<body>
 
  <table>
    <tr>
      <td>
        <img src="http://confidence-ms.de/wp-content/uploads/2012/10/Weihnachtsmann-256x300.jpg"
             alt="Weihnachtsmann">
      </td>
      <td>
        <script>
            document.write("<h1>Ho ho ho, hello world!!!<\/h1>");
        </script>
      </td>
    </tr>
  </table>
 
  <ul>
    <li>Jetzt fehlen nur noch ein paar brennende Kerzen am Baum! ;-)</li>
    <li>und ein schicker Hintergrund! ;-) ;-)</li>
    <li>Und vielleicht könnte der Baum auch noch etwas natürlicher aussehen. ;-) ;-) ;-)</li>
  </ul>
 
</body>
 
 
</html>

Voraussetzungen - Was muss ich wissen?


Wichtige Variablen

// Variablen sinnvoll benennen!
var TannenbaumHoehe = 15;   // in Zeilen
 
var Flamme = "A";           // oder O oder ()?
var Wachs  = "H";           // oder N oder X ?
var Kugel  = "@";           // oder Q oder § ?

Kombination verschiedener Zeichen

var ausgabe = "H" + "O" + "@";

Ausgabe mehrerer Zeichen

for( i=0; i<10; i++ )
{
  document.write(zeichen);
}

Ausgabe mehrerer Zeilen

for( j=0; j<10; j++ )
{
  document.write("<p>");
}

Verschachtelte Schleifen

for(i=0; i<10; i++)
{
  for(j=0;j<10;j++)
  {
    document.write("1");
  }
  document.write("<p>");
}

Logische Operatoren

// B E D I N G U N G E N
 
// Prüfung auf gleich:
    (x == 5)
 
// Prüfung auf Ungleich:
    (x != 5)
 
// Prüfung grösser:
    (x > 5)
 
// Prüfung kleiner:
    (x < 5)
 
// Mehrere Bedingungen gleichzeitig prüfen
 
//    UND: beide müssen erfüllt sein, dann Ergebnis true
    (x < 5)  &&  ( x > 0 )
 
//    ODER: eine von beiden muss erfüllt sein, dann Ergebnis true
    (x < 5)  ||  ( x > 0 )

Erkennung der X-ten Zeile mit der Operation Modulo (%)

if( 0 == i%4 )
{
   document.write("das war jetzt die 4. Zeile");
}

Zu schwer? Nun gut. So könnte der Anfang aussehen

for(var i=1, x="@"; i<=15; x=x+"@",i++)
{
   document.write(x + "<br>");
 
}
 

oder so ...

     document.write("<h1>Ho ho ho, hello world!!!<\/h1>");
 
     var zeichen="@";
 
     for(var z=0; z<15; z=z+1)
     {
       for(var i=0; i<z; i++)
       {
         document.write(zeichen);
       }
       document.write("<br>");
     }
 
     for(var i=0; i<3; i++)
     {
       document.write(zeichen);
       document.write("<br>");
     }