JavaScript

r/g

Einleitung

Entwicklung

Überblick

Einbettung in HTML

Verwendung von JavaScript durch Einbettung in HTML Seiten.

   <script type="text/javascript" language="JavaScript">
   <!-- to hide script contents from old browsers
   ... JavaScript ...
   // end hiding contents from old browsers -->
   </script>
oder auch:
   <script type="text/javascript" language="JavaScript" src="vorles.js"></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>
   </HEAD>
   <BODY>
   <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
   document.write("Hallo von JavaScript !")
   </SCRIPT>
   Das war's auch schon. 
   </BODY>
   </HTML>
Das war's auch schon.

Sprachkonstrukte

Syntax ähnlich C++, Java,"objektbasiert"

Werte und Variablen

Kontrollstrukturen

Objekte

JavaScript Objekte

Verwenden von Objekten

   objectName.propertyName
   objectName[´property´]
   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; 
} 




Eingabe:

Konstruktor für Objekte.

   function objectType ( param1 [,param2] ...[,paramN] ) {
            this.property1 = param1; 
            ...
            this.propertyN = paramN;
   }

Erzeugen von Objekten.

   objectName = new objectType ( param1, ...[,paramN] )

Methoden und Funktionen.

   objectName.methodName = function_name
   objectName.methodName(params);

Prototypen.

   new ObjectName();

   ObjectName.prototype.pName = wert;

   objectName = new ObjectName();
   x = objectName.pName;

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:

Bitte Alter eintragen und Fenster anklicken.

vordefinierte Objekte

Objekthierarchie

Objekt-Hierarchie

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 

Methoden vordefinierter Objekte


Anwendungen

Feldprüfungen in Formularen

Feldinhaltsprüfungen in Formularen: <br>
<script type="text/javascript" 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://trumpf-2.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.

Debuging von JavaScript Programmen mit javascript:

Bestimmung von Unix Dateirechten

Stilmodifikationen mit Javascript

Animation mit HTML, CSS, JavaScript und DOM
Dateien: HTML, CSS, JavaScript.

Beispiele von Gamelan.


Ausblick


© Universität Mannheim, Rechenzentrum, 1998-2002.

Heinz Kredel
Last modified: Mon Oct 1 11:12:35 CEST 2001