Einleitung
Sprachkonstrukte
Anwendungen
JavaScript
VBScript
ECMA-Script
LiveScript
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
(European Computer Manufacturer Association)
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
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');">
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.
Syntax ähnlich C++, Java,"objektbasiert"
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--
Verwendung in HTML: width="&{JSvar};"
Statements, Expressions,
{
Statement-Folge }
if-Statement
if (condition) { statements1 } [ else { statements2 } ]
for-Statement
for ([initial-expression]; [condition]; [increment-expression]) { statements }
while-Statement
while (condition) { statements }
for-in-Statement
for (variable in object) { statements }
Zum Beenden bzw. Abkürzen von Schleifen.
break
bzw. continue
Es gibt einen Datentyp Boolean.
toBoolean
JavaScript Objekte
Array
Boolean
Date
Function
Image
Math
Number
String
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; }
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.
Aufbau: event (elemente)
onabort (image)
onblur (window, frame, select, text, textarea)
onchange (select, text, textarea)
onclick (alles ausser: applet, base, basefont, bdo, br, font, frame, frameset, head, html, iframe, isindex, meta, param, script, style, title)
onerror (image, window)
onfocus (window, frame, select, text, textarea)
onload (image)
onmouseout (area, a)
onmouseover (area, a)
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)" />
Bitte Alter eintragen und Fenster anklicken.
Document Object Model, DOM
Browser Objekte
Objekthierarchie
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
w = window.open(url [,name,options])
w.close()
alert(mitteilung)
jein = confirm(frage)
antwort = prompt(frage)
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.
Beispiele von Gamelan.
Sicherheit
DOM
ECMA-Script Components
LiveConnect zu Java
LiveWire
JavaScript auf der Server Seite
© Universität Mannheim, Rechenzentrum, 1998-2003.
Heinz Kredel Last modified: Wed May 21 18:00:21 CEST 2003