Javascript  Ulrich Hirschmann 4.98

Form

Der HTML-Tag <form></form> erstellt ein Formular in das Schalter und Textfelder eingefügt werden können. Die Objekte innerhalb des Formulares gehören dann zu diesem und können dann direkt über den Namen des Formulares angesprochen werden.
 
Form
<html><head> 
<title>Javascript</title> 
<script language="JavaScript"> 
<!-- 
function print(t) 

 document.rahmen.text1.value=t; 

//--></script> 
</head><body bgcolor=#ffffff> 
<h1>Form</h1> 

<form name="rahmen"> 
<input type="text" name="text1" size=10><p> 
<input type="button" name="schalter1" value="Anzeigen!" onclick="print('Hallo!')"> 
</form> 

</body></html>

 

Die Funktion print erhält den Übergabewert (Parameter) t

Dieser wird dann im Formular rahmen, im Objekt text1 der Eigenschaft value zugewiesen. 
 
 
 
 

Ein Formular wird erstellt und rahmen benannt. 
Ein Textfeld wird erstellt. Der Name ist text1, die Breite ist 10 Zeichen. 
Ein Schalter wird erstellt. Name ist schalter1, Anzeigewert (value) ist Anzeigen!. Beim Anklicken des Schalter wird die Funktion print() aufgerufen. 
Ende des Formulars. 
 

 

 
Beispiel
 
In der Zeile <input type="button" name="schalter1" value="Anzeigen!" onclick="print('Hallo!')"> wird durch onclick="print('Hallo!')" eine Funktion aufgerufen wenn ein Ereignis eintritt. Daher wird dieser Befehl als Event-Handler bezeichnet. Da "print('Hallo!')" bereits in Anführungszeichen steht, muß der als Parameter zu übergebende Text 'Hallo!' ersatzweise in Hochkammata geschrieben werden.

Da der Schalter in diesem Beispiel erst gedrückt wird wenn die Seite schon fertig dargestellt ist, kann nicht mehr mittles document.write ein Text ausgegeben werden. Deshalb verwendet man ein Textfeld welches jederzeit nachträglich beschrieben werden kann.
 

Event-Handler

Event = Ereignisse, Handler=Behandlung --> Tritt ein Ereignis ein, z.B. ein Mausklick, kann mittels eines Event-Handlers darauf reagiert, eine gewünschte Funktion aufgerufen werden.
 
Event-Handler
<html><head> 
<title>Javascript</title> 
<script language="JavaScript"> 
<!-- 
function print(t) 

 document.rahmen.text1.value=t; 

//--></script> 
</head> 
<body bgcolor=#ffffff> 
<h1>Event</h1> 

<form name="rahmen"> 
<input type="text" name="text1" size=10><p> 
<input type="button" name="schalter1" value="Löschen" onclick="document.rahmen.text1.value=' ' "> 
</form> 

<p> 
<a href="nirgendwohin" onmouseover="print('Hallo!')">Ein normaler Link!</a> 
</body></html>

 
 
 
 


 


 
 
 
 

Beim Anklicken des Schalters wird direkt ein Javascript-Befehl ausgeführt. Dieser dient nur zum Löschen des Textfeldes. ACHTUNG: Nach  = stehen 2 Hochkommata und dann ein Anführungszeichen. 
 
 
 

Dieser Link löst beim Überfahren mit der Maus die Funktion print aus. 
 

 
Beispiel
 

Arten von Event-Handlern

 
onBlur Tritt beim Verlassen eines Objektes auf.
onChange Ändert sich der Wert eines Eingabefeldes tritt dieses Ereignis ein.
onClick Ein Objekt wird angeklickt.
onFocus Objekt wird aktiviert. 
onLoad Nach dem Laden eines Objektes. Z.B.: <body...  onload="..."> startet eine Funktion beim Laden der Seite.
onMouseOver Objekt wird mit der Maus überfahren.
onSelect Text wird markiert.
onSubmit Ereignis tritt beim Absenden eines Formulares ein.
onUnload Ereignis beim Beenden einer Seite ein.
javascript: Trick um Javascript-Funktionen direkt von Links aus aufzurufen: 
<a href="javascript: fx()">Funktion</a>
 
 

Übung:

1) Erstelle ein Programm in das der Anwender seinen Namen eingeben soll. Mittels eines Schalters wird der Name dann samt Begrüßungstext "Hallo "+name angezeigt. Im obigen Beispiel ist z.B. durch eingabe=document.rahmen.text1.value; die Eingabe des Benutzer zu erhalten.

2) Ändere die Breite des Textfeldes.

3) Erstelle ein Programm mit 2 Textfeldern in das der Anwender seinen Namen und sein Passwort eingeben kann. Gebe dann Namen und Passwort aus.
 

Lösung1

Lösung 3
 
 

Form2

Formulare haben noch weitere Eigenschaften: <form name="rahmen" method="POST" action="/cgi-bin/tuwas.pl">.
 
Formulre zum Versenden von Daten
<form name="rahmen" method="POST" action="/cgi-bin/tuwas.pl"> 

<input type="text" size=20><p> 
<input type="submit" value="Senden"> 
</form>

method legt fest ob die Daten mittels GET oder POST versendet werden. 
action bestimmt die Datei die die Daten erhält. 
Eine Textbox für die Dateneingabe. 
Der Schalter submit zum Versenden der Daten. 
 
 
Javascript  Ulrich Hirschmann 4.98