Theorie zu den Übungsbeispiele JavaScript
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
http://train-the-trainer.fh-joanneum.at
Theorie zu den Übungsbeispiele JavaScript
Einführung
1. Erstellung eines Begüßungsfensters (alert)
2. Durchführung einer Berechnung (Variablen, Operatoren, write bzw. writeln)
3. Verwendung von Strings und die Prompt-Abfrage
4. Die If (Else)-Abfrage
5. Events und Erstellung eines Links mit Bestätigung
6. Password-Abfrage
7. Umgang mit Fenstern
8. Die For-Schleife
9. Umgang mit Frames
10. Bildertausch (DOM, Funktionen)
11. Arbeiten mit Forms: Grundlagen
12. Forms und Funktionen
13. Verschicken von Forms
14. Checken von Checkboxen
Ergänzungen zu den JavaScript-Übungen
Die Beschreibung der JavaScript-Methoden wurden der JS-Reference von Netscape
entnommen: http://developer.netscape.com/docs/manuals/communicator/jsref/index.htm
1http://train-the-trainer.fh-joanneum.at
Positionierung von JavaScript
JavaScript kann im Head oder im Body des HTML-Files positioniert werden.
...
...
Oder mittels EventHandlers direkt im HTML-Code.
Externe JavaScript-Files
Der JavaScript-Code kann in einen externen File gespeichert werden, dieser wird mittels des
-Tags in den HTML-File inkludiert.
...
...
Externer File extern.js
2http://train-the-trainer.fh-joanneum.at
1. Erstellung eines Begüßungsfensters (alert)
Mit der Methode alert kann bei Start des HTML-Programms eine kleine Box zur Begrüßung
erscheinen. JavaScriptCode, der im Head des HTML-Dokuments steht, wird automatisch zu
Beginn des Ladens abgearbeitet.
alert
Displays an Alert dialog box with a message and an OK button.
Syntax: alert("message")
Parameters: message = a string.
Use the alert method to display a message that does not require a user decision. The message
argument specifies a message that the dialog box contains.
You cannot specify a title for an alert dialog box
2. Durchführung einer Berechnung (Variablen, Operatoren, write bzw. writeln)
Mittels der Definition von Variablen (Anzahl von Sekunden/Minute sowie Minuten/Stunde und
Stunden/Tag) wird die Anzahl von Sekunden/Tag berechnet. Mit der Methode write oder writeln
wird das Ergebnis im HTML-File angezeigt.
Drei andere Variablen werden beliebige Zahlenwerte gegeben, dann werden mit den Zahlen
ein paar mathematische Operationen durchgeführt.
var
Declares a variable, optionally initializing it to a value.
Syntax: var varname [= value] [..., varname [= value] ]
Arguments
Varname Variable name. It can be any legal identifier.
Value Initial value of the variable and can be any legal expression.
The scope of a variable is the current function or, for variables declared outside a function, the
current application.
Using var outside a function is optional; you can declare a variable by simply assigning it a
value. However, it is good style to use var, and it is necessary in functions if a global variable of
the same name exists.
Assignment Operatoren
Siehe den Ausdruck: Operatoren
writeln (für document.writeln), write
Writes one or more HTML expressions to a document in the specified window and follows them
with a newline character.http://train-the-trainer.fh-joanneum.at
Parameters
expr1, ... exprN Any JavaScript expressions.
The writeln method displays any number of expressions in a document window. You can
specify any JavaScript expression, including numeric, string, or logical expressions.
The writeln method is the same as the write method, except the writeln method appends a
newline character to the end of theoutput.
3. Verwendung von Strings und die Prompt-Abfrage
Die prompt-Abfrage soll zur Eingabe des Benutzernamens verwendet werden. Dieser Name
wird dann in einen Satz gepackt und in das Dokument geschrieben.
Achtung: Strings müssen immer unter Hochkommata stehen (doppelte oder einfache)!
Unterschiedliche Methoden für Strings werden ausprobiert.
Der Url zu einer Homepage wird abgefragt und ein Link zu dieser Seite erstellt.
prompt
Displays a Prompt dialog box with a message and an input field.
Syntax: prompt(message, inputDefault)
Parameters: message: A string to be displayed as the message.
InputDefault (Optional) A string or integer representing the default value of the
input field.
Use the prompt method to display a dialog box that receives user input. If you do not specify an
initial value for inputDefault, the dialog box displays . You cannot specify a title for
a prompt dialog box.
Strings
Einige Methoden des Strings
blink
Causes a string to blink as if it were in a BLINK tag.
Syntax: blink()
bold
Causes a string to be displayed as bold as if it were in a B tag.
Syntax: bold()
fontcolor
Causes a string to be displayed in the specified color as if it were in a
tag.
Syntax: fontcolor(color)
4http://train-the-trainer.fh-joanneum.at
Parameters: color
A string expressing the color as a hexadecimal RGB triplet or as a string literal.
fontsize
Causes a string to be displayed in the specified font size as if it were in a
tag.
Syntax: fontsize(size)
Parameters: size
An integer between 1 and 7, a string representing a signed integer between 1 and 7.
italics
Causes a string to be italic, as if it were in an I tag.
Syntax: italics()
link
Creates an HTML hypertext link that requests another URL.
Syntax: link(hrefAttribute)
Parameters: hrefAttribute
Any string that specifies the HREF attribute of the A tag; it should be a valid URL (relative or
absolute).
toLowerCase
Returns the calling string value converted to lowercase.
Syntax: toLowerCase()
toUpperCase
Returns the calling string value converted to uppercase.
Syntax: toUpperCase()
4. Die If (Else)-Abfrage
Mit zwei Prompt-Abfragen wird nach zB dem Wetter sowie der Lieblingsfarbe gefragt. Dann
erscheint ein Satz passend zum Wetter in der angegebenen Lieblingsfarbe im HTML-
Dokument.
if...else
Executes a set of statements if a specified condition is true. If the condition is false, another set
of statements can be executed.
Syntax: if (condition) {
statements1}
5http://train-the-trainer.fh-joanneum.at
[else {
statements2}]
Arguments
Condition Can be any JavaScript expression that evaluates to true or false.
Parentheses are required around the condition. If condition
evaluates to true, the statements in statements1 are executed.
statements1 statements2 Can be any JavaScript statements, including further nested if
statements. Multiple statements must be enclosed in braces.
Comparison Operatoren
Siehe den Ausdruck: Operatoren
5. Events und Erstellung eines Links mit Bestätigung
Folgende Möglichkeiten von Events sollen eingebaut werden:
a. Das HTML-Dokument startet mit einem Event beim Laden des Dokuments (im BODY-Tag
Verwendung von onLoad).
b. Test von onClick in einem Link Los!, wobei js-Code
JavaScript-Befehle enthält, die ausgeführt werden, sobald der Link betätigt wird. HREF=#
bedeutet, daß dasselbe HTML-Dokument wieder geladen wird.
c. OnMouseOver bzw. onMouseOut werden genauso bei einem Link eingebaut, wie onClick.
In diesem Beispiel soll damit ein Image-Swap erzeugt werden.
d. Eine Link mit Bestätigung wird eingebaut. Dabei gibt confirm je nach Antwort des Benutzers
true oder false zurück, mittels return wird die Antwort zum Link gegeben, ist sie true, wird
zur neuen Seite gegangen, ist sie false, passiert nichts.
Link
Bemerkung: Auch beim Link von b. kann man am Ende des js-Codes den Befehl
return false;
eingeben, dann wird die gleiche Seite nicht noch einmal geladen!
onClick
Executes JavaScript code when a click event occurs; that is, when an object on a form is
clicked. (A Click event is a combination of the MouseDown and MouseUp events).
Event handler for Button, document, Checkbox, Link, Radio, Reset, Submit
Syntax: onClick="handlerText"
Parameters: handlerText, JavaScript code or a call to a JavaScript function.
6http://train-the-trainer.fh-joanneum.at
onLoad
Executes JavaScript code when a load event occurs; that is, when the browser finishes loading
a window or all frames within a FRAMESET tag.
Syntax: onLoad="handlerText"
Parameters: handlerText, JavaScript code or a call to a JavaScript function.
Use the onLoad event handler within either the BODY or the FRAMESET tag, for example,
.
onMouseOver
Executes JavaScript code when a MouseOver event occurs; that is, once each time the mouse
pointer moves over an object or area from outside that object or area.
Syntax: onMouseOver="handlerText"
Parameters: handlerText, JavaScript code or a call to a JavaScript function.
If the mouse moves from one area into another, you'll get onMouseOut for the first area, then
onMouseOver for the second (zB first area: außerhalb eines Image, second area: über dem
Image).
onMouseOut
Executes JavaScript code when a MouseOut event occurs; that is, each time the mouse pointer
leaves an area or link from inside that area or link.
Syntax: onMouseOut="handlerText"
Parameters: handlerText, JavaScript code or a call to a JavaScript function.
If the mouse moves from one area into another in a client-side image map, you'll get
onMouseOut for the first area, then onMouseOver for the second.
return
Specifies the value to be returned by a function.
Syntax: return expression
confirm
Displays a Confirm dialog box with the specified message and OK and Cancel buttons.
Syntax: confirm("message")
Parameters: message (a string)
A confirm dialog box is displayed. Use the confirm method to ask the user to make a decision
that requires either an OK or a Cancel. The message argument specifies a message that
prompts the user for the decision. The confirm method returns true if the user chooses OK and
false if the user chooses Cancel.
You cannot specify a title for a confirm dialog box.
7http://train-the-trainer.fh-joanneum.at
6. Password-Abfrage
Mithilfe von while und der Prompt-Eingabe wird ein Password abgefragt. Durch break wird ein
Endlosloop vermieden.
Vorgangsweise:
a. Mit Prompt frägt man ein Password ab. Dann wird in der while-Schleife die Bedingung
password == vorgegebenes_Password
überprüft. Stimmt das Password nicht, kommt wieder das Prompt-Fenster. Damit wird das
Password jedoch unendlich oft abgefragt.
b. Damit man nach einer Anzahl von Versuchen aussteigen kann, muß ein Zähler eingebaut
werden. Dieser Zähler wird bei jedem Versuch um 1 erhöht (zaehler++). Ist dieser größer
als eine vorgegebene Zahl, so kann man mit
break;
aus der Schleife aussteigen.
c. Als Zusatz kann die Anzahl der Versuche ausgeschrieben werden.
while
Creates a loop that evaluates an expression, and if it is true, executes a block of statements.
The loop then repeats, as long as the specified condition is true.
Syntax: while (condition) {
statements
}
Arguments
condition Evaluated before each pass through the loop. If this condition evaluates to true,
the statements in the succeeding block are performed. When condition
evaluates to false, execution continues with the statement following statements.
statements Block of statements that are executed as long as the condition evaluates to true.
Although not required, it is good practice to indent these statements from the
beginning of the statement.
break
Terminates the current while or for loop and transfers program control to the statement
following the terminated loop.
Syntax: break (break label)
Argument: label: Identifier associated with the label of the statement.
The break statement can now include an optional label that allows the program to break out of
a labeled statement. This type of break must be in a statement identified by the label used by
break.
The statements in a labeled statement can be of any type.
Bsp:
8http://train-the-trainer.fh-joanneum.at
var i=1;
while (zaehler < 6) {
if (i == 3)
break
i++
}
7. Umgang mit Fenstern
Thema: Von einem HTML-Dokument aus wird das Erscheinen, die Eigenschaften und das
Verschwinden anderer Fenster gesteuert.
Mittels JavaScript werden eigene Fenster mit unterschiedlichen Eigenschaften (zB. Größe,
Anzeige der Menübar, resizable,..) erstellt. Mit der write-Methode wird ein Text in ein Fenster
geschrieben. Die Methoden focus() und blur() werden zum Herzeigen und Verstecken des
Fensters benutzt.
Neue HTML-Seiten können mit dem location-Objekt geladen werden.
Vorgangsweise:
a. Mittels der Methode open können Fenster mit unterschiedlichen Eigenschaften erstellt
werden. Der erste Eintrag von window.open kann eine Url-Adresse enthalten, der zweite
Eintrag bestimmt den Namen des Fensters (für das TARGET-Tag), danach kommen die
Fenstereigenschaften (wie zB. Größe, Position, Anzeige der Menübar, Statusleiste,
scrollbars, resizable,..).
Achtung: bei den Fenstereigenschaften dürfen keine Leerzeichen eingefügt werden!!!!!
b. Erzeugung eines Fensters mit vorgegebenem Inhalt:
window_name1=window.open("...html","neu1","height=300,width=300");
c. Erzeugung eines leeren Fensters:
window_name2=window.open("","neu2","height=400,width=400,resizable,toolbar");
In dieses Fenster schreibt man dann mittels window_name2.document.write(“...“);
d. Laden einer HTML-Seite in das neue Fenster:
window_name2.location.href=“neue_seite.html“;
e. Die Statusleiste des neuen Fensters kann mittels
window_name2.status=“...“;
beeinflußt werden.
f. Mit den EventHandlern window_name1.focus(); und window_name1.blur(); wird das
Fenster in den Vordergrund bzw. Hintergrund gestellt.
g. window_name1.close(); schließt das Fenster.
open
Opens a new web browser window.
Syntax: open(URL, windowName, windowFeatures)
Parameters
URL A string specifying the URL to open in the new window. See the Location object
for a description of the URL components.
windowName
9http://train-the-trainer.fh-joanneum.at
A string specifying the window name to use in the TARGET attribute of a FORM or A
tag. windowName can contain only alphanumeric or underscore (_) characters.
windowFeatures
(Optional) A string containing a comma-separated list determining whether or not
to create various standard window features. These options are described below.
The open method opens a new Web browser window on the client, similar to choosing New
Navigator Window from the File menu of the browser. The URL argument specifies the URL
contained by the new window. If URL is an empty string, a new, empty window is created.
You can use open on an existing window, and if you pass the empty string for the URL, you will
get a reference to the existing window, but not load anything into it. You can, for example, then
look for properties in the window.
windowFeatures is an optional string containing a comma-separated list of options for the new
window (do not include any spaces (!!!) in this list). After a window is open, you cannot use
JavaScript to change the windowFeatures.
The features you can specify are:
Height: Specifies the height of the window in pixels.
Location: If yes, creates a Location entry field.
Menubar: If yes, creates the menu at the top of the window.
resizable
scrollbars: If yes, creates horizontal and vertical scrollbars when the Document grows larger
than the window dimensions.
Status: If yes, creates the status bar at the bottom of the window.
Titlebar: If yes, creates a window with a title bar. To set the titlebar to no, set this
feature in a signed script.
Toolbar: If yes, creates the standard browser toolbar, with buttons such as Back and
Forward.
Width: Specifies the width of the window in pixels.
Many of these features (as noted above) can either be yes or no. For these features, you can
use 1 instead of yes and 0 instead of no. If you want to turn a feature on, you can also simply
list the feature name in the windowFeatures string.
blur
Removes focus from the specified object.
Syntax: blur()
Use the blur method to remove focus from a specific window or frame. Removing focus from a
window sends the window to the background in most windowing systems.
focus
Gives focus to the specified object.
Syntax: focus()
10http://train-the-trainer.fh-joanneum.at
Use the focus method to navigate to a specific window or frame, and give it focus. Giving focus
to a window brings the window forward in most windowing systems.
Window-Hierarchie
8. Die For-Schleife
Verwenden Sie einen For-Loop, um eine beliebige Anzahl von x in einer Zeile darzustellen!
Mittels eines For-Loop werden maximal fünf Wörter eingegeben (prompt) und in ein Feld
(Array) gespeichert, bei der Ausgabe wird in einer neuen Schleife das letzte Wort als erstes
dargestellt, usw.
Vorgangsweise:
a. Syntax der For-Schleife:
for (i = 0 ; i < anzahl; i++) {
...
}
b. Innerhalb der For-Schleife wird auf eine Variable bei jedem Schleifendurchlauf ein x mehr
hinzugefügt. Nach Beendigung der Schleife wird diese Variable ausgeschrieben.
11http://train-the-trainer.fh-joanneum.at
c. Um fünf Wörter auf ein Feld zu speichern definiert man zuerst die Feldvariable mittels
var wort = new Array();
Nun können innerhalb der Schleife die einzelnen Wörter über prompt eingegeben werden:
wort[i] = prompt(...);
d. Die Ausgabe soll dann in umgedrehter Reihenfolge erfolgen. Dafür gibt es mehrere
Umsetzungsmöglichkeiten...
for
Creates a loop that consists of three optional expressions, enclosed in parentheses and
separated by semicolons, followed by a block of statements executed in the loop.
Syntax: for ([initial-expression;] [condition;] [increment-expression]) {
statements
}
Arguments:
initial-expression Statement or variable declaration. Typically used to initialize a
counter variable. This expression may optionally declare new
variables with the var keyword.
Condition Evaluated on each pass through the loop. If this condition
evaluates to true, the statements in statements are performed.
This conditional test is optional. If omitted, the condition always
evaluates to true.
increment-expression Generally used to update or increment the counter variable.
Statements Block of statements that are executed as long as condition
evaluates to true. This can be a single statement or multiple
statements. Although not required, it is good practice to indent
these statements from the beginning of the for statement.
Beispiel:
The following for statement starts by declaring the variable i and initializing it to 0. It checks that
i is less than nine, performs the two succeeding statements, and increments i by 1 after each
pass through the loop.
for (var i = 0; i < 9; i++) {
n += i;
alert(n);
}
Array
Represents an array of elements.
12http://train-the-trainer.fh-joanneum.at
The Array object constructor: new Array(arrayLength);
new Array(element0, element1, ..., elementN);
Parameters
ArrayLength (Optional) The initial length of the array. You can access this value using the l
ength property.
ElementN (Optional) A list of values for the array's elements. When this form is specified,
the array is initialized with the specified values as its elements, and the array's
length property is set to the number of arguments.
Achtung: Das erste Element eines Array ist array[0] !
An array's length increases if you assign a value to an element higher than the current length of
the array. The following code creates an array of length 0, then assigns a value to element 99.
This changes the length of the array to 100.
colors = new Array()
colors[99] = "midnightblue"
You can then refer to the 100 element of the array: colors[99] or colors["midnightblue"].
Mehrdimensionale Arrays müssen verschachtelt definiert werden:
var z=new Array(3); var i,j;
for (i = 0; i < 3; i++)
{ z[i] = new Array(3);
for (j = 0; j < 3; j++)
{ z[i][j] = i * j;
}
}
13http://train-the-trainer.fh-joanneum.at
9. Umgang mit Frames
Erstellen Sie ein Frameset mit zwei Frames und kontrollieren Sie den Inhalt und das Layout
des zweiten Frames vom Control-Frame aus!
In JavaScript werden Frames wie Windows behandelt. Dadurch kann der Inhalt eines Frame-
Fensters von einem anderen aus verändert werden.
Vorgangsweise:
a. Erstellung eines Windows mit zwei Frames (reiner HTML-Code)
b. Innerhalb des Control-Frames gibt es EventHandler, die Inhalt sowie Erscheinungsbild des
zweiten Frames verändern. Dabei kann auf das Nachbar-Frame mittels
parent.frame_name... zugegriffen werden.
Eine weitere Möglichkeit besteht in der Verwendung von
top.frame_name....
(sinnvoll bei mehreren Frames)
c. Neuer Text
e. Laden eines neuen HTML-Dokuments in das Frame:http://train-the-trainer.fh-joanneum.at
For a top-level window, setting the defaultStatus or status property sets the text appearing in
the browser status line. For a frame, setting these properties only sets the status line text when
the cursor is over the frame.
The close method is not useful for windows that are frames.
If a FRAME tag contains SRC and NAME attributes, you can refer to that frame from a sibling
frame by using parent.frameName or parent.frames[index]. For example, if the fourth frame in a
set has NAME="homeFrame", sibling frames can refer to that frame using parent.homeFrame
or parent.frames[3].
10. Bildertausch (DOM, Funktionen)
Drei Bilder werden im HTML-Dokument abgebildet und dann vertauscht, gelöscht, wieder
hergestellt. Dabei sollen die Bilder nicht über den Namen, sondern über die Position
angesprochen werden: document.images[2].src=“...“ (Änderung des dritten Bildes).
Zum Löschen und Wiederherstellen der Bilder soll eine Funktion verwendet werden.
DOM
Eine objekt-orientierte Programmiersprache wie JavaScript enthält Objekte (zB ein Window ist
ein Objekt). Dieses Objekt besitzt Eigenschaften (Erscheinungsbild des Fensters, das
Dokument im Fenster, ..). Mit Methoden können die Eigenschaften verändert werden (zB write).
Beispiel für eine Eigenschaft eines Window: window.status = “Testfenster“
Beispiel für eine Methode eines Fensters : window.blur();
Methoden können Parameter beinhalten und müssen daher immer () enthalten!
Die Eigenschaft eines Objekts kann selbst wieder ein Objekt sein (zB window.document).
Objekte können über ihre DOM-Nummer angesprochen werden (wie zB bei Frames,
top.frames[0] ist das erste Frame oder document.images[0] ist das erste Bild).
function
Declares a JavaScript function with the specified parameters. Acceptable parameters include
strings, numbers, and objects.
Syntax: function name([param] [, param] [..., param]) {
Statements
}
Arguments:
Name The function name.
Param The name of an argument to be passed to the function. A function can have up
to 255 arguments.
To return a value, the function must have a return statement that specifies the value to return.
You cannot nest a function statement in another statement or in itself.
15http://train-the-trainer.fh-joanneum.at
All parameters are passed to functions, by value. In other words, the value is passed to the
function, but if the function changes the value of the parameter, this change is not reflected
globally or in the calling function.
Funktionen ohne Parameter
Üblicherweise stehen die Funktionen im Head des HTML-Dokuments.
function loesche(){
...
}
Funktionen mit Parametern
function loescheBild(name){
...
document.images[“name“].src=“leer.gif“;
...
}
Funktionen mit Return Values
var neue_zahl, eingabe_zahl;
function positiveZahl(zahl) {
if (zahl < 0) {
zahl = -zahl;
}
return zahl;
}
10.a Funktionen mit Parametern
Eigenschaften des Date-Objekts werden verwendet, um Zeit und Datum anzugeben. Dabei
werden die Minuten- und Sekundenanzahl, sowie die Monatsangabe adjustiert.
Vorgangsweise:
a. Mit var the_date = new Date(); wird ein Date-Objekt erzeugt.
b. Stunden, Minuten und Sekunden bekommt man über
var the_hour = the_date.getHours();
var the_minute = the_date.getMinutes();
16http://train-the-trainer.fh-joanneum.at
var the_second = the_date.getSeconds();
c. Bei Minuten und Sekunden < 10 soll vor die Zahl eine 0 eingefügt werden. Damit wird die
Anzeige dann zB von 9:7:5 zu 9:07:05. Dies soll über eine Funktion gelöst werden, wobei der
zu ändernde Wert als Parameter übergeben wird, der veränderte Wert über return
function fixNumber(the_number) {
...
return the_number
}
the_minute = fixNumber(the_minute);
d. Weitere Eigenschaften des Date-Objekts können verwendet werden:
var the_day = the_date.getDate();
var the_month = the_date.getMonth();
var the_year = the_date.getYear();
17http://train-the-trainer.fh-joanneum.at
11. Arbeiten mit Forms: Grundlagen
Erstellen Sie eine Form mit Textinput und verändern Sie diesen Input mittels JavaScript.
Verwenden Sie die angegebenen Beispiele und fügen Sie auch die Möglichkeit einer
Verneinung hinzu. Löschen sie mit dem RESET-Button den Text!
Vorgangsweise:
a. Erstellung der Form, dabei müssen die Form und das Textfeld einen Namen besitzen,
damit mittels Javascript darauf zugegriffen werden kann.
b. Der Text wird durch ein Link-Eventhttp://train-the-trainer.fh-joanneum.at
werden die Namen in Klein- oder Großbuchstaben umgewandelt bzw. eine Reset-Möglichkeit
angeboten.
Vorgangsweise:
a. Eine Form mit zwei INPUT=text-Fenstern mit NAME=vorname, bzw. nachname werden
erstellt.
b. Dann werden zwei Buttons für die Umwandlung in Groß- und Kleinschreibung hinzugefügt.
Ein Klick auf den Button ruft eine Funktion zur Umwandlung des Textes auf. Dabei wird als
Parameter “gross“ (Umwandlung in Großbuchstaben) und “klein“ (Umwandlung in
Kleinbuchstaben) übergeben.
c. In der Funktion selbst wird je nach Parameter der Text geändert, der Zugriff auf den Inhalt
des Texfensters von vorname erfolgt über:
document.form_name.vorname.value =
document.form_name.vorname.value.toUpperCase();
13. Verschicken von Forms
Mithilfe der Attribute Method und Action des Form-Tags kann der Inhalt einer Form verschickt
werden. Um eine verwendbare Darstellung zu bekommen, empfiehlt es sich, als Attribut
ENCTYPE auf text/plain zu setzen.
In diesem Beispiel werden einige Benutzerdaten über einfache Textfelder, Checkboxes und
Radio-Buttons sowie einer Textarea erhoben. Über eine Mail werden diese Daten dann
verschickt.
Mittels des EventHandlers onSubmit kann eine Kontrollfunktion für die Daten eingebaut werden
(zB Überprüfung der E-Mail-Adresse auf das @ ).
Vorgangsweise:
a. Ein kleiner Fragebogen wird erstellt. Er enthält eine Form, die Textfelder, eineCheckbox,
Radiobuttons und eine Textarea erhält. Nur Teile der Form, die einen Namen haben,
werden via E-Mail verschickt!
b. Die FORM muß die oben genannte Methode post und ACTION beinhalten.
c. Am Ende des Fragebogens gibt es einen SUBMIT Button:
d. In einem nächsten Schritt kann eine Kontrolle (zB Überprüfung der E-Mail-Adresse auf das
@) eingebaut werden. Dabei wird bei FORM onSubmit hinzugefügt:
e. Die Funktion checkMail verwendet den regulären Ausdruck reg = /@/; mittels
reg.exec(eingabe);
wird überprüft, ob dieses Zeichen im String eingabe auftritt.
f. Damit bei positiver Überprüfung die Mail weggeschickt wird, muß die Funktion den Wert
true zurückgeben, bei einer fehlerhaften E-Mail-Adresse erscheint eine Fehlermeldung und
der Wert false wird zurückgegeben.
onSubmit
Executes JavaScript code when a submit event occurs; that is, when a user submits a form.
Syntax: onSubmit="handlerText"
Parameters: handlerText: JavaScript code or a call to a JavaScript function.
19http://train-the-trainer.fh-joanneum.at
You can use onSubmit to prevent a form from being submitted; to do so, put a return statement
that returns false in the event handler. Any other returned value lets the form submit. If you omit
the return statement, the form is submitted.
Bsp: Überprüfung des E-Mail-Adresse:
Im Head des HTML-Dokuments:
function checkEmail() {
var i, ok = false;
var reg = /@/;
if (reg.exec(document.form1.email.value)) {
ok = true;
}
else {
alert("Bitte ueberpruefen Sie noch einmal die E-Mail-Adresse!");
}
return ok;
}
Im Body:
14. Checken von Checkboxen
Bei einer Checkbox kann mittels
document.form_name.checkbox_name.checked
ermittelt werden, ob die Checkbox ausgewählt wurde (TRUE) oder nicht ausgeschaltet blieb
(FALSE).
Auf diese Art kann ein Lichtschalter programmiert werden (Checkbox aus= schwarzer
Hintergrund). Über einen Link kann eine Checkbox betätigt oder ausgeschalten werden, bzw.
Informationen über den Zustand einer Checkbox können ausgegeben werden.
Vorgangsweise:
a. Erstellung einer Checkbox mit den Wahlmöglichkeiten “Licht ein“ bzw. “aus“.
b. Je nach Wahl ändert die Funktion lichtschalter den Hintergrund des Fensters.
20http://train-the-trainer.fh-joanneum.at
Ergänzungen zu den JavaScript-Übungen
ad
3. Verwendung von Strings und die Prompt-Abfrage
prompt
Displays a Prompt dialog box with a message and an input field.
Syntax: prompt(message, inputDefault)
Parameters: message: A string to be displayed as the message.
InputDefault (Optional) A string or integer representing the default value of the
input field.
A prompt dialog box looks as follows:
Use the prompt method to display a dialog box that receives user input. If you do not specify an
initial value for inputDefault, the dialog box displays . You cannot specify a title for
a prompt dialog box.
Ad
6. Password-Abfrage
Mithilfe von while und der Prompt-Eingabe wird ein Password abgefragt. Durch break wird ein
Endlosloop vermieden.
break
Terminates the current while or for loop and transfers program control to the statement
following the terminated loop.
Syntax: break (break label)
Argument: label: Identifier associated with the label of the statement.
The break statement can now include an optional label that allows the program to break out of
a labeled statement. This type of break must be in a statement identified by the label used by
break.
The statements in a labeled statement can be of any type.
Bsp:
var i=1;
while (zaehler < 6) {
if (i == 3)
break
i++
}
21Sie können auch lesen
