Kleiner JavaScript Kurs

Programme starten

Programme können
  • über Ereignisse (Events) gestartet werden
    • z.B. beim laden der Internetseite - onload - (wie im ersten Programm)
    • beim klicken auf eine Schaltfläche - onclick -

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>JavaScript Kurs; Programme starten</title>

</head>
<body>
        <h1>JavaScript Kurs; Programme starten</h1>
        <!-- Schaltfläche auf HTML Seite; onclick Ereignis startet JavaScript  -->
        <input type="submit" value="Bitte anklicken" onclick="alert('das erste JavaScript Beispiel');" />
</body>
</html>

So könnte es aussehen: JS_Kurs_B02.html

    • weiter Ereignisse: - onmouseover -
    • - onkeypress - , usw.

  • über Aufruf
    • im head
    • im body

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>JavaScript Kurs; Programme starten</title>
        <!-- JavaScript im head  -->
        <script type="text/javascript">
          alert("JavaScript im head");
        </script>
</head>
<body>
        <h1>JavaScript Kurs; Programme starten</h1>
        <!-- JavaScript im body  -->
        <script type="text/javascript">
           document.write("<h2>JavaScript im body</h2>");
        </script>
</body>
</html>

So könnte es aussehen: JS_Kurs_B02a.html

Der Befehl 
alert("Text");
gibt den Text in einem eigenen Fenster aus.

Mit 
document.write("Text");
kann man einen Text (inkl. HTML-Tags) direkt auf der Internetseite ausgeben. Leider wird dabei immer die komplette Internetseite durch die neue Ausgabe überschrieben. Besser funktioniert die Ausgabe in eine dafür vorgesehenen Bereich, der mit einer id gekennzeichnet ist: 
<div id="ausgabe"></div>
Der div - Bereich lässt sich so mit JavaScript ansprechen: 
document.getElementById("ausgabe").innerHTML = ("Umfang=" + umfang + "<br />");
//Ausgabe nicht ersetzen (=), sondern Ausgabe "anhängen" (+=);
document.getElementById("ausgabe").innerHTML +=("Fläche=" + flaeche + "<br /><hr />");

Hier ein Programm zur Berechnung von Fläche und Umfang eines Quadrats, mit Eingabe über "prompt" und Ausgabe mit "innerHTML += "

<!DOCTYPE html>
<html lang=de>
  <head>
    <meta charset="utf-8">
    <title>Flächen- und Umfang-Berechnung</title>
  </head>
  <script>
    function quadrat(){
    var a=prompt("Bitte Seitenlänge eingeben");
    var umfang=4*a;
    var flaeche=a*a;
    document.getElementById("ausgabe").innerHTML +=("Quadrat: Seitenlänge=" + a + "<br />");  
    document.getElementById("ausgabe").innerHTML +=("Umfang=" + umfang + "<br />");
    document.getElementById("ausgabe").innerHTML +=("Fläche=" + flaeche + "<br /><hr />");
    }
  </script>
  <body>
    <h1>Berechnung von Flächen und Umfang</h1>
    <h4>Auf dieser Seite kann man die Flächen und Umfänge von <br />
      Quadraten, Rechtecken und Kreisen berechnen</h4>   
    <button onClick="quadrat();">Quadrat</button>
    <hr />
    <div id="ausgabe"></div>
  </body>
</html>

So könnte es aussehen: JS_Kurs_B02b.html