JavaScript Basics

JavaScript

Interpretierte Sprache in Web Browsern
Syntax ähnlich C++, Java, "objektbasiert"
Programtext wird in HTML-Seiten eingebettet
Erweiterungen zur Interaktion mit dem Browser
Mouse-Clicks, Form-Input, Seitennavigation

Inhalt

Einleitung
Sprachkonstrukte
Beispiel

Einleitung

Version 1.0 zunächst in Netscape 2.0
jetzt auch in MS Internet-Explorer
JScript entspricht etwa Version 1.0
aktuelle Version 1.2
Standardisierung als ECMA-Script

Dynamic HTML

CSS, Cascading Style Sheets
DOM, Document Object Model
JavaScript

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

if (condition) {
   statements1 }
[elseif {
   statements2}]

for ([initial-expression]; [condition]; [increment-expression]) {
   statements
}

```
while (condition) {
   statements
}
```

for (variable in object) {
   statements }

Zum Beenden bzw. Abkürzen von Schleifen. break bzw. continue

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.

onAbort (Image)
onBlur (Window, Frame, Select, Text, Textarea)
onChange (Select, Text, Textarea)
onClick (fast überall)
onError (Image, Window)
onFocus (Window, Frame, Select, Text, Textarea)
onLoad (Image)
onMouseOut (Area, Link)
onMouseOver (Area, Link)
onReset (Form)
onSelect (Text, Textarea)
onSubmit (Form)
onUnload (Window)

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

vordefinierte Objekte

Document Object Model, DOM
Browser 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]