Kommentar

// das ist ein Kommentar für eine Zeile

/*
     das ist ein Kommentar für einen Absatz
*/

length

length berechnet die Länge einer Zeichenkette

var Satz="Drei Chinesen mit dem Kontrabass";
laenge=Satz.length;

location

location ruft eine neue Seite auf, die im gleichen Browserfenster geöffnet wird.

<input type="button"  value="Quelltext" onClick="location='b_location_quelltext.htm'" />

Logische Operatoren

Ähnlich wie die Vergleichsoperatoren stellen die logischen Operatoren die Abhängigkeit zweier Bedingungen fest.

Math

Das Objekt Math stellt mathematische Methoden zur Verfügung:

• abs(Zahl) - rundet eine Zahl nach oben oder nach unten
• ceil(Zahl) - rundet eine Zahl immer nach oben
• floor(Zahl) - rundet eine Zahl immer nach unten
• max(Zahl1,Zahl2) - stellt die größere der beiden Zahlen fest
• min(Zahl1,Zahl2) - stellt die kleinere der beiden Zahlen fest
• random(Zahl) - ermittelt eine Zufallszahl zwischen 0 und 1
• round(Zahl) - rundet eine Zahl nach oben oder nach unten
• pow(Exponent,Basis) - berechnet Basis hoch Exponent

new

Mit dem Schlüsselwort new können neue Instanzen von Objekten erzeugt.
Bildlich gesehen ist das Objekt ein Zettelklotz, von dem ein Zettel (die Instanz) abgerissen wird. Beispiele

Datum=new Date();
Spruch = new Array();

Objekte

Javascript kennt für den Browser, die HTML-Seite und jedes Element (Tabelle, Button, Formen) ein Gegenstück (Objekt).

• window - das Browserfenster
• document - die angezeigte HTML-Seite
• location - die Adresse der HTML-Seite
• history - die History-Liste des Browsers
• Math - mathematische Funktionen
• elements - Bestandteile der HTML-Seite
• Date - Abfrage von Zeit und Datum
• String - Zeichenketten
• Array - Datenfelder
• forms - Auswertung von Formularelementen
  • Button:

    <form name="Button; action="">
       <input type="button" value="Ende!" onclick="window.close()" />
    </form>
    

  • Textfeld:

    <script>
    function auswertung()
    {
        document.write(document.Eingabe.Textfeld.value);
    }
    </script>
    

    <form name="Eingabe" action="">
        <input type="text" name="Textfeld" value="" />
        <input type="button" class="gelb" value=" Zeige" onClick="auswertung()" />
    </form>
    

    
  • Listenfeld:

    <form name="Bands" action="">
        <select name="Auswahl" onChange="CheckAuswahl()">
           <option value="Help!">Beatles</option>
           <option value="Brown Sugar">Rolling Stones</option>
           <option value="Fireball">Deep Purple</option>
           <option value="Whole Lotta Love">Led Zeppelin</option>
           <option value="School's Out">Alice Cooper</option>
           <option value="Der Kommissar">Falco</option>
        </select>
        Index: <textarea name="Index" rows="1" cols="3" readonly="readonly"></textarea>
        Text:  <textarea name="Anzeige" rows="1" cols="12" readonly="readonly"></textarea<
    </form>
    

    function CheckAuswahl()
    {
        document.Bands.Index.value=document.Bands.Auswahl.selectedIndex;
        document.Bands.Anzeige.value=document.Bands.Auswahl.value;
    }
    
    

    Beispiele:

    
  • Radiobuttons

    <form name="Auto" action="">
       <input type="radio" name="Marke" value="Opel" onClick="MarkeZeigen()()" />Opel
       <input type="radio" name="Marke" value="Ford" onClick="MarkeZeigen()()" />Ford
       <input type="radio" name="Marke" value="Mercedes" onClick="MarkeZeigen()()" />Mercedes
       <input type="radio" name="Marke" value="Ferrari" onClick="MarkeZeigen()()" />Ferrari
    </form>
    

    function MarkeZeigen()
    {
    
        // welcher Radiobutton wurde gedrückt?
        // Syntax -> Document.Name_der_Form_.Name_des_Elements
        for (i=0;i<document.Auto.Marke.length;i++)
        {
            if (document.Auto.Marke[i].checked)
            . . .
        }
    }
    

    
  • Checkboxen

    <script>
    var i; 
    var Text="";
    
    function MarkeZeigen()
    {
        var Text="";	
        
        // mit for-Schleife abfragen, welche checkbox gedrückt wurde
        for (i=0;i>document.Auto.Marke.length;i++)
        {
            if (document.Auto.Marke[i].checked)
            {
                Text=Text+document.Auto.Marke[i].value+"\n";
            }
        }
        document.Zeigen.Ergebnis.value=Text;
    }
    </script>
    

    <body>
    <h1>Welches Auto würdest du gerne fahren?</h1>
    <form name="Auto" action="" >
       <input type="checkbox" name="Marke" value="Opel" />Opel
       <input type="checkbox" name="Marke" value="Ford" />Ford
       <input type="checkbox" name="Marke" value="Mercedes" />Mercedes
       <input type="checkbox" name="Marke" value="Ferrari" />Ferrari
       <input type="checkbox" name="Marke" value="VW" />VW
       <input type="button" value=" Auswerten " onClick="MarkeZeigen()">
    </form>
    <form name="Zeigen" action="">
       <textarea  name="Ergebnis" rows="5"  cols="20" readonly="readonly"></textarea>
    </form>
    

    
• style - Änderungen von CSS-Eigenschaften
• screen - fragt die Eigenschaften des Bildschirms ab (Auflösung, Farbtiefe)

Diese Objekte können Eigenschaften haben.

document.bgColor="yellow"

Methoden verändern das Objekt:

document.write="Javascript"

schreibt "Javascript" in die HTML-Seite.

onChange()

onChange reagiert auf den Mausklick in einem Listenfeld:

<select name="Auswahl" size="7" onChange="CheckAuswahl()">

<option>Beatles</option>
<option>Rolling Stones</option>
<option>Deep Purple</option>

</select>

onClick()

onClick() fragt den einfachen Mausklick in einem Formularfeld vom Typ Button, Radiobutton oder Checkbox ab.

<form action="">
<input type="button" value="Ende!" onClick="window.close()">
<input type="button" value="Hier erf�rst du was!" onClick="alert('Nee, doch nicht!')">
</form>

onclick="alert('Nee, doch nicht!')"

onload()

Der Javascript-Code im head wird Zeile für Zeile abgearbeitet solange sich dort keine Funktion befindet.
Funktionen werden erst mit onload ausgeführt.

<script type="text/javascript" language="JavaScript">

<!--
   function Mitteilung()
   {
	  document.write("<h1>Willkommen auf meiner Homepage!</h1>");
   }
//-->

</SCRIPT>
<body onload="Mitteilung()">
</body>

onMouseover

onMouseover löst beim Überfahren eines Elements mit der Maus ein Ereignis aus.

Der Quelltext im Ausschnitt

<img alt="Beatles" src="../../gif/bands/beatles.jpg" height="150" width="200" 
onMouseover="document.Meldung.Anzeige.value='The Beatles'";
onMouseout="document.Meldung.Anzeige.value=''" />

<form name="Meldung" action="">
<textarea name="Anzeige" rows="1" cols="35" readonly="readonly"></textarea>
</form>

Ein weiteres Beispiel:

onMouseout

onMouseout löst beim Verlassen eines Elements mit der Maus ein Ereignis aus.

Der Quelltext im Ausschnitt

<img alt="Beatles" src="../../gif/bands/beatles.jpg" height="150" width="200" 
onMouseover="document.Meldung.Anzeige.value='The Beatles'";
onMouseout="document.Meldung.Anzeige.value=''" />

<form name="Meldung" action="">
<textarea name="Anzeige" rows="1" cols="35" readonly="readonly"></textarea>
</form>

oscpu

oscpu zeigt das Betriebssystem an.