Einführung in HTML / JavaScript

 

 

Formulare

 

In einer HTML-Datei können auch Eingaben ( Eingabefelder ) und Schaltflächen verwendet werden. Dies ist vergleichbar mit Delphi oder Visual-Basic.

 

Die Syntax ist hier aber sehr einfach!

 

ein Formular beginnt mit <FORM> und endet mit </FORM>.

Es ist sinnvoll der Form einen Namen zu geben. Dies geht so: <FORM name="Eingabe">.

Prinzipiell kann man jedem TAG auf diese Weise einen Namen geben. Dies ist aber nur dann nötig, wenn man die Absicht hat, auf diesen TAG später noch einmal zuzugreifen. Bei Formularen ist dies aber stets der Fall.

 

In ein Formular können zahlreiche Elemente eingefügt werden.

 

<INPUT TYP="typ" name = "...">     [ Schließender TAG nicht erforderlich. ]

Man unterscheidet folgende Typen:

 

"text" ® Textfeld

"checkbox"

"radio"

und "button" (Schaltfläche).

 

Ferner gibt es noch "Pull-ups"

Z. B.:

<SELECT ...>

  <OPTION VALUE = "+"> + </OPTION>

  ..

  ..

</SELECT>

 

und ein Textfeld mit Scrollbalken:

<TEXTAREA name="ta" ROWS="5" COLS = "50"></TEXTAREA>

 

Einen BUTTON verbindet man in der Regel mit einem Klick-Ereignis:

onClick = "tuWas()"

In diesem Fall wird eine JavaScript - Funktion aufgerufen.

 

Will man auf (Form-)Elemente zugreifen, geschieht das folgendermaßen:

document.<Formname>.<Elementname>.Eigenschaft

 

Beispiel:  document.Form1.Ergebnis.value = "Hallo".

 

Dieses Beispiel setzt voraus, dass es eine Form mit Namen "Form1" gibt, die ein Textfeld mit Namen "Ergebnis" hat.

 

 

Siehe dazu die Beispiele in (1).

 

Hinweis:

Um den Quelltext der HTML-Dateien ein sehen zu können, klicke mit der rechten Maustaste auf den Link und wähle: Im neuen Fenster öffnen

Wenn die Datei geöffnet wurde, wähle im Hauptmenü Ansicht -> Quelltext.

 

- Button

- Button mit JacaScript

 

Die Datei button.htm ist sehr einfach und kommt ohne JavaScript aus.

Da die Angaben nach onClick in der Regel sehr lang werden, empfiehlt es sich, geeignete JavaScript – Funktionen zu definieren.

 

Diese werden im Head-Teil mit

    <SCRIPT LANGUAGE = "JavaScript">

    ...

    </SCRIPT>

eingeschlossen.

 

In JavaScript gibt es keine Prozeduren, sondern nur Funktionen. Außerdem müssen nach dem Namen stets Klammern geschrieben werden, auch wenn man keine Werte (Parameter)übergeben will.

Statt BEGIN ... END wird ein Block mit { ... } eingeschlossen.

 

Ferner gibt es Entscheidungen und Schleifen wie

if ( Bedingung ) ... ;  [ <, > wie in Pascal ungleich (<>) hier != und = hier ==  ]

else ... ;

 

for (i = 0; i < 100; i++) ...  [ i++ entspricht i = i  + 1,  :=  gibt es hier nicht! ]         und

 

while ( Bedingung ) ...

 

do {...}  while ( Bedingung )      [ Entspricht REPEAT ... UNTIL ]

 

Wegen der besseren Übersicht sollte man wie in Pascal einrücken.

 

Z. B. :

 

// Kommentar: Ein Beispiel

 

function beispiel( )

 {

     var n = eval(document.Form1.Zahl2.value);

     for ( i = 1; i < n; i++)        

      {

             document.write(i);

             document.Form1.Ergebnis.value = i*i;

       }

     

}

 

Eingabefelder enthalten immer nur Texte. Will man diese als Zahlen verwenden, benutzt man die Funktion eval( ).

 

Siehe die Beispiele in (2)  Beachte dazu den obigen Hinweis!

 

- Produkt

- Produkt mit JavaScript

 

Weitere Informationen:

 

- Übersicht

 

Aufgaben zu JavaScript


- Aufgaben

Worddateien:

- Einführung mit Aufgaben

- Übersicht


 

zurück

 

[Home] [Einführung in HTML / JavaScript] [Break Out]