HTML, CSS, PHP, MySQL

html-php.de

HTML & CSS Stylesheets Referenz JavaScript PHP MySQL Sonstiges Gästebuch Inhalt Impressum

[ Ein- und Ausgabe ] [ Meldefenster ] [ Ausgabe auf der Webseite ] [ Eingabefenster ]

Ein- und Ausgabe

Mit JavaScript können Meldefenster und Eingabefenster öffnen. Ebenfalls ist es möglich, Text in das Browserfenster zu schreiben.

Meldefenster

Mit alert wird ein Meldungsfenster ausgegeben. In den nächsten Beispiel wird beim starten der Webseite ein Meldungsfenster auszugeben. Der Code lautet wie folgt:

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
  </head>
  <body>
   <script>
    <!--
    alert("Herzlich Willkommen!");
    //-->
   </script>
  </head>
  <body>
  </body>
  </html>
Das ganze sieht so aus

Zusätzlich zum Meldefenster, dass nur ein Ok-Button besitzt, gibt es noch ein Fenter, dass zwei Buttons hat: OK und Abbrechen.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <script>
    <!--
    Ergebnis = confirm("Wollen Sie die Seite wirklich sehen!");
    if (Ergebnis == false)
      history.back();
    //-->
   </script>
  </head>
  <body>
   <p>Viel gibt es hier aber nicht zusehen</p>
  </body>
  </html>
Das ganze sieht so aus

Beim Aufrufen dieser Seite werden Sie gefragt, ob Sie diese Seite sehen wollen. Drücken Sie auf Abbrechen, ist das Ergebnis false. Der Befehl history.back() befördert Sie dann zur Ursprungsseite zurück. Das Ergebnis der OK-Taste ist true das wir in diesem Fall aber nicht abfragen brauchen.

Ausgabe auf der Webseite

Der Javascript-Bereich braucht nicht unbedingt im Head-Bereich stehen, sondern kann auch im Body-Bereich definiert werden. Im folgenden Beispiel wird mit var wird ein Wert einer Variablen zugewiesen und mit document.write auf die Webseite geschrieben. Werden HTML-Tags innerhalb von document.write benutzt, müssen vor dem schließenden Tags ein Backslash \ geschrieben werden z.B. <b>...<\/b>.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
  </head>
  <body>
   <h1>Ihr Browser</h1>
   <script>
    <!--
    var Name = navigator.appName;
    var Version = navigator.appVersion;
    document.write("<p>Sie verwenden den <b>" + Name + "<\/b>, 
    in der Version <b>" + Version + "<\/b><\/p>");
    //-->
   </script>
  </body>
  </html>
Das ganze sieht so aus

Auch möglich ist z.B. ein Link mit document.write auf die Homepage zu bringen. Im folgenden Beispiel wird per Zufall eine Zahl zwischen 0 und 2 gesucht, und dann ein Link angezeigt. Auch bei Verzeichnisangaben ein Backslash \ nicht vergessen.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
  </head>
  <body>
   <script>
    <!--
    var nr = Math.round(Math.random() * 2);
    if (nr == 0) 
     { document.write('<a href="..\/index.php">Startseite<\/a><br>'); }
    if (nr == 1) 
     { document.write('<a href="..\/kursh01.php">PHP<\/a><br>'); }
    if (nr == 2) 
     { document.write('<a href="..\/kursc01.php">JavaSript<\/a><br>'); }
    //-->
   </script>
  </body>
  </html>
Das ganze sieht so aus

Eingabefenster

Mit prompt wird ein Eingabefenster geƶffnet.

  <!DOCTYPE HTML>
  <html lang="de">
  <head>
   <title>Test</title>
   <meta charset="utf-8">
  </head>
  <body>
   <script>
    <!--
    Ausgabe = prompt("Gebe bitte Deinen Namen ein:","Name");
    document.write("<h3>Hallo " + Ausgabe + "!");
    document.write(" - Wie gehts!<\/h3>");
    //-->
   </script>
  </body>
  </html>
Das ganze sieht so aus

back top next