JavaScript



Inhalt

  1. Einleitung
  2. Sprachkonstrukte
  3. Beispiel






Einleitung

Dynamic HTML


Verwendung von JavaScript durch Einbettung in HTML Seiten.

      <SCRIPT LANGUAGE="JavaScript">
      <!-- to hide script contents from old browsers
      ... JavaScript ...
      // end hiding contents from old browsers -->
      </SCRIPT>

Benutzung von JavaScript Funktionen in HTML Tags.

      <INPUT TYPE=... VALUE=... onClick="jsfunc('arguments')">


Kurzes Beispiel:

Ausgabe von "Hallo ..." in einer HTML Seite.


      <HTML>
      <HEAD>
      <SCRIPT LANGUAGE="JavaScript">
      document.write("Hallo von JavaScript !")
      </SCRIPT>
      </HEAD>
      <BODY>
      Das war's auch schon. 
      </BODY>
      </HTML>

Das war's auch schon.


Sprachkonstrukte

Konversion von Zahlen in Strings falls ein Operand ein String.
Umkehrung nur mit speziellen Funktionen: parseInt, parseFloat, eval.

Keine Deklarationspflicht für Variablen. var x = "Hallo !\n"

Operatoren und Ausdrücke wie in C. y += x--


Kontrollstrukturen


Objekte

Verwenden von Objekten.
   objectName.propertyName
   this
   this.propertyName
Funktionen.
   function funktionsName ( param1 [,param2] ...[,paramN] ) {
            ...
            return( ... );
   }
Beispiel:
function show_props(obj, obj_name) { 
    var result = "" 
    for (var i in obj) 
        result += obj_name + "." + i + " = " + obj[i] + "\n" 
    return result; 
} 

Konstruktor für Objekte.

   function objectType ( param1 [,param2] ...[,paramN] ) {
            this.property1 = param1; 
            ...
            this.propertyN = paramN;
   }
Erzeugen von Objekten.
   objectName = new objectType ( param1 [,param2] ...[,paramN] )
Methoden und Funktionen.
   objectName.methodName = function_name
   objectName.methodName(params);
Beispiel:
   function alter() {
     var today = new Date();
     return( today.getYear() - this.baujahr  );
   }

   function Auto(modell, baujahr) {
     this.modell=modell;
     this.baujahr=baujahr;
     this.alter = alter;
   }

   ford = new Auto("Fiesta", 1995);
   document.write("Alter = ", ford.alter());

Es gibt diverse eingebaute Objekte und Funktionen. Öffnen und schließen von Windows, Alert Meldungen und Confirmations.

Event Handler.

Beispiel:
function validate(obj, lowval, hival) {
   if ((obj.value < lowval) || (obj.value > hival))
      alert("Value must be greater than " + lowval + " and less than " + hival + ".")
}
<INPUT TYPE = "text" NAME = "age" SIZE = 3 
       onChange="validate(this, 18, 99)">
Alter:


vordefinierte Objekte

Objekthierarchie
browser 

window 
  |
  +--parent, frames, self, top 
  |
  +--location 
  | 
  +--history
  |
  +--document
       |
       +--forms
       |    |
       |  elements (text fields, textarea, checkbox, password
       |            radio, select, button, submit, reset)   
       +--links
       |
       +--anchors

Beispiel für die Objekte eines Dokuments.

   <TITLE>A Simple Document</TITLE>
   <BODY>
   <FORM NAME="myform" ACTION="FormProc()" METHOD="get" >
   Enter a value: 
   <INPUT TYPE=text NAME="text1" VALUE="blahblah" SIZE=20 >
   Check if you want: 
   <INPUT TYPE="checkbox" NAME="Check1" CHECKED 
          onClick="update(this.form)"> Option #1
   <P>
   <INPUT TYPE="button" NAME="Button1" VALUE="Press Me" 
          onClick="update(this.form)">
   </FORM>
   </BODY>
Dann sind unter anderem folgende Objekte definiert.
   document.title = "A Simple Document" 

   document.myform 
   document.myform.Check1 
   document.myform.Button1 

   document.myform.Button1.value = "Press Me" 
   document.myform.Button1.name = Button1 


Beispiel

Feldinhaltsprüfungen in Formularen: <br>
<script language="JavaScript">
<!-- hide from strangers
function checkForm(frm) {
	if (frm.my_name.value.length > 0) return true
	else {
		alert("Please enter your name.")
		return false
	}
}
//-->
</script>

<form action="http://parallel.rz.uni-mannheim.de/cgi-bin/ex2.cgi" 
      onSubmit="return checkForm(this)">
Mein Name:
<input type="text" name="my_name" size=20>
<p>
Mein Status:
<input type="radio" name="my_status" value="student">Student
<input type="radio" name="my_status" value="employee" checked>Mitarbeiter
<input type="radio" name="my_status" value="professor">Professor
<p>
<input type="reset" value="Reset"> <input type="submit" value="Send">
</form>
<p>

In diesem Formular werden die Eingaben (hier nur vom Textfeld "my_text") auf Richtigkeit geprüft, bevor die Daten an das CGI-Script ".../ex2.cgi" geschickt werden.


[Previous] [Next] [Contents]