JavaScript


Einleitung

JavaScript Beispiel

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" />

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 Klassen

Verwenden von Objekten

   objectName.propertyName
   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; 
} 




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="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 geschickt werden.

Debuging von JavaScript Programmen mit javascript:

Bestimmung von Unix Dateirechten

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


Ausblick


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

Heinz Kredel

Last modified: Sun Jan 20 18:19:39 CET 2008