Argumente an Javascript

Programmierbare 'dynamische' Webseiten

Es ist möglich, an 'ganz gewöhnliche Webseiten' Daten (Argumente, Parameter) zu übergeben, und mit Javascript auszuwerten. Dieses Verfahren ist sehr praktisch, funktioniert einwandfrei mit allen gängigen Browsern, ist jedoch weitgehend unbekannt.
Javascript Javascript ECMAScript für HTML und XML
Live-Demo Argumente übergeben, mit Javascript empfangen
Senden mit HTML HTML-Formulare und -Hyperlinks
Senden mit Javascript Validierung und submit-Methode
Empfang mit Javascript Isolierung und Decodierung der Daten

Daten an HTML+Javascript - Webseiten übergeben
Daten als Argumente senden:
Text  (txt)
Zahl  (zal)
Eingabe von Zufalls-Daten.

▲ Geben sie in die Formular-Felder einen Text und ein Zahl ein.
• Der Text wird beim Absenden als Variable txt, die Zahl als zal an die Empfangs-Seite (rechts) gesendet.
• Dort werden die Daten decodiert und gefiltert.
Als einfaches Beispiel für eine 'Dynamische Reaktion' wird ihr Text in der Demo-Webseite so oft wiederholt, wie die Zahl<50 angibt.

Senden mit HTML

HTML-Formular:

Am einfachsten ist es, Argumente mit einem HTML-Formular einzugeben und abzusenden. Diese Methode wird in der Live-Demo (oben) verwendet.
• Als Methode wird get eingesetzt, als action der Datei-Name der Ziel-Seite.
• Wenn der Absenden-Button angeklickt wird, dann übernimmt der Browser die Codierung der eingegebenen Texte, deren Zusammenstellung zu einem 'URI'-String und das Übersenden der Anforderung an die Ziel-Webseite. 		HTML:
<form name="f1" method="get" action="demo.htm">
<input type="text" name="txt">
<input type="text" name="zal">
<input type="submit" name="Submit" value="Absenden">
</form>

Wenn nicht die eigene Webseite ausgetauscht werden soll, sondern der Inhalt eines Rahmens, dann wird der Name des Rahmens als zusätzliches Attribut target="ziel" in das <form>-Element eingetragen.

HTML-Hyperlink

• Alternativ oder zusätzlich können fix vor-programmierte Daten auch durch einen Hyperlink gesendet werden.
• Test: Die Daten werden korrekt übertragen, das Formular bleibt jedoch unverändert !
• In diesem Fall muss die URI-Befehlszeile selbst codiert werden. 		Hyperlink zum Übersenden vorprogrammierter Daten:
<a href="demo.htm?txt=abc&zal=12"> Klick </a>

In der href-Adresse folgt auf den Datei-Namen ein ? Zeichen, danach die Daten. Ein <a>-Element kann ein Attribut target="ziel" erhalten.

URI-Codierung

• Einige Zeichen sind für URI-Befehle reserviert und dürfen daher im Text nicht vorkommen. Um sie darzustellen, werden sie nach URI-Regeln codiert, z.B.
• Das Leerzeichen als +
• Sonderzeichen in der Form %HH (2-stellige Hexadezimalzahl), z.B. das ?-Zeichen als %3F oder das & als %26
♦ Details zum ASCII-Code und zur URI-Codierung
• Unicode-Zeichen >U+7F werden zuerst HTML-codiert, danach URI-codiert.
Beispiel: Das griechische α wird zuerst als &#945; codiert, danach als %26%23945%3B
• In der Live-Demo oben auf dieser Seite können sie verschiedene Texte absenden. Ihr Browser führt die URI-Codierung durch. Auf der Empfangs-Seite wird der erzeugte URI-Befehlstext angezeigt.

Senden mit Javascript

HTML-Formular:

Mit Javascript ist das Absenden von Formular-Daten wesentlich komfortabler.
• Der <input type="submit"> Button wird durch einen 'echten' <button> mit einem onclick-Attribut ersetzt.
• Bei Klick auf den neuen Button wird die angegebene Javascript-Funktion (hier my_submit ) gestartet. 		HTML-Formular
<form name="f1" method="get" action="demo.htm">
<input type="text" name="txt">
<input type="text" name="zal">
<!--<input type="submit" name="Submit" value="Absenden">-->
<button onclick="my_submit()"> Absenden </button>
</form>

Javascript - Formular senden

• Mit Methode submit wird das namentlich genannte Formular (hier f1 ) abgesendet.
• Im HTML-Quelltext dürfen keine Attribute name="submit" vorkommen, sonst tritt beim Anklicken einen schwer zu findenden Fehler auf   (name="Submit" ist hingegen erlaubt).
Vorteil durch die Verwendung von Javascript:
Zwischen dem Anklicken und dem eigentlichen Absenden können beliebige Javascript-Programme ausgeführt werden, z.B. eine sorgfältige Validierung. 		Javascript:
function my_submit() {
// Hier verarbeiten !
document.f1.submit();
}

Validierung vor dem Absenden

• Formular-Daten sollten vor dem Absenden immer validiert werden, d.h. auf Zulässigkeit geprüft. Damit wird verhindert, dass ungültige Daten (z.B. Tippfehler) überhaupt zur Verarbeitung gelangen.
• Hier ist der richtige Platz für Fehlermeldungen: Erklären sie möglichst präzise, welcher Fehler gemacht wurde, und machen sie Vorschläge zur Verbesserung.
• Im Beispiel rechts wird der eingetragene Wert des Feldes zal von Formular f1 gelesen und überprüft.
Funktion parseInt wandelt den erhaltenen Text in eine ganze Dezimalzahl. Danach wird der Werte-Bereich überprüft und - wenn notwendig - korrigiert. Zuletzt wird der Wert wieder in das Formular eingetragen.
• Nach erfolgreicher Validierung wird das Formular abgesendet. Bei Problemen sollte eine Fehlermeldung erfolgen (hier nicht gezeigt). 		Beispiel für Validierung: Nur ganze Zahlen 1..50 werden zugelassen:
t=document.f1.zal.value;
var z=1;
try{z=parseInt(t,10);}
catch(e) {}
if(z<1 || isNaN(z)) {z=1;}
else if(z>50) {z=50;}
document.f1.zal.value=z.toString();

Javascript URI-Befehlszeile senden

Alternativ kann ein Javascript-Programm auch eine URI-Befehlszeile senden. So umgeht man HTML-Formulare oder kommt überhaupt ohne Formular aus.
• Die URI-Befehlszeile muss vom Programm codiert werden (Beispiel rechts). 		Eigene Webseite ersetzen und dabei Daten an die neue Ziel-Seite übergeben::
document.href="neue_seite.htm?daten=xyz";
In dieser Demonstration ist die Ziel-Seite (oben rechts) in einen HTML-Innenrahmen eingebettet.
• Das <iframe>-Element wird mit Attributen id und name ausgestattet, die auf den gleichen Wert lauten. (hier if1 )
• Das Element wird mit DOM-Methoden adressiert und sein src-Attribut ausgetauscht.
♦ Details zu HTML-Innenrahmen 		HTML-Innenrahmen:
<iframe src="demo.htm" id="if1" name="if1">
</iframe>
Innenrahmen mit Javascript ersetzen und dabei Daten übergeben:
var n=document.getElementById("if1");
n.src="neue_seite.htm?daten=xyz";

Empfang mit Javascript

URI-Befehlszeile:

Das Javascript-Objekt location bietet die Eigenschaft href
Sie enthält die URI-Befehlszeile, mit welcher die Webseite aufgerufen wurde. 		Javascript: URI-Befehlszeile
var h = location.href;

GET-Argumente:

• Die Argument-Daten werden in der Browser-Befehlszeile (URI-Text) an die Ziel-Webseite übergeben. So wird z.B. nicht nur die Seite demo.htm angefordert, sondern demo.htm?txt=abc
• Die Argumente werden nach dem Datei-Namen eingefügt, getrennt durch ein ?-Zeichen.
• Beliebig viele Argumente können übergeben werden, sie werden voneinander durch &-Zeichen getrennt.
• Jedes einzelne Argument wird in der Form name=wert übergeben. 		Javascript:
Isolierung der GET-Argumente = gesamter Text nach dem ?-Zeichen.
var h=location.href;
h.match(/\?(.*)/);
var get = RegExp.$1;

Die GET-Argumente werden mit einem → Regulären Ausdruck vom Datei-Namen isoliert: Der gesamte String rechts vom ersten ? Zeichen wird isoliert.

Aufspaltung in Argumente

Nachdem die GET-Argumente isoliert sind, werden sie nach & Zeichen in die einzelnen Argumente aufgespalten.
Das Ergebnis ist ein → Array (hier args ), welches meist in einer Schleife verarbeitet wird.
var args = get.split("&");
for(i=0;i<args.length;i++) {
namval = args[i];
// ... verarbeiten
}

Decodierung der Argumente:

• Mit der gleichen Methode lässt sich jedes Argument in die beiden Teile name und wert trennen.
• Danach wird (nur) den gesuchten Variablen ihr Wert zugewiesen (in diesem Beispiel nur an txt ).
• Alle anderen evtl. enthaltenen Variablen (z.B. ein evtl. vorhandener Submit-Button) werden ignoriert.
namval = args[i].split("=");
name = namval[0];
wert = namval[1];
if(name=="txt") {mytxt=wert;}

Validierung der Daten:

Da es sehr leicht ist, den Text einer GET-Anforderung zu manipulieren, sollte immer überprüft werden, ob die decodierten Variablen einen zulässigen Wert enthalten. Falls nicht, sollte ein Standard-Wert (default value) eingesetzt werden.
if(txt.length<1) {txt="demo";}
zal = parseInt(zal);
if(isNaN(zal)) {zal=0;}
if(zal<0) {zal=0;}
if(zal>50) {zal=50;}

URI-Decodierung:

Wenn nicht nur → ASCII-Zeichen sondern auch Sonderzeichen und → Unicode-Zeichen übergeben werden sollen, dann muss der GET-String vor der Zuweisung an die Variablen URI-decodiert werden. Dazu kann man die Javascript Standard-Funktionen decodeURI oder decodeURIComponent oder unescape verwenden. Alle weisen verschiedene Nachteile auf, daher wird rechts eine eigene Funktion uri_to_html vorgestellt.

Alle Details des Demo-Beispiels lassen sich mit Rechtsklick in das ↑ Live-Beispiel aus dem Quelltext entnahmen.
function uri_to_html(txt) {
var td=""; var c="";
var mask=0; var cod=0;
for(var i=0;i<txt.length;i++) {
c=txt.charCodeAt(i);
if(mask>0) {
c-=0x30;
if(c>9) {c-=7;}
cod=0x10*cod+c;
mask++;
if(mask>=3) {td+=String.fromCharCode(cod); mask=0;}
}
else {
if(c==0x2B) {td+=" ";}
else if(c==0x25) {mask=1; cod=0;}
else {td+=String.fromCharCode(c); }
}
}
return td;
}

PHP / Perl oder Javascript ?

► Die meisten EntwicklerInnen kennen (nur) die Möglichkeit, dynamische Webseiten mit Server-basierten Programmiersprachen zu erstellen, wie z.B. → Perl oder → PHP.
▲ Javascript Webseiten können ebenso Argument-Daten übernehmen und dynamisch darauf reagieren - in typischen Fällen ca. 1000mal so schnell wie das Senden einer Anfrage, die Erzeugung einer Webseite am Server und die Übersendung zum Browser !
▼ Oft wird eingewendet, dass Javascript nicht sicher gegen Manipulation ist: Das trifft nicht zu, solange das Programm am eigenen PC läuft: Wer will schon die eigenen Ergebnisse manipulieren ?
▼ Der einzige für Javascript wirklich ausgeschlossene Bereich sind Daten, die nur auf einem entfernten Server vorliegen, z.B. Datenbanken.
▲ Javascript ist besonders für interaktive Webseiten geeignet:
In solchen Fällen wird eine Webseite von den BesucherInnen mehrfach hintereinander mit unterschiedlichen Daten aufgerufen.
▼ Mit Server-Programmen wird jedesmal der Webserver und das dortige Programm bemüht, das kostet wertvolle Server-Resourcen und auf BesucherInnen-Seite unangenehme Wartezeit bis zum Empfang der Webseite.
▲ Mit Javascript wird eine derartige Seite nur einmal gesendet, die gesamte weitere Arbeit erledigt der PC der/des BesucherIn wesentlich schneller.
Die Server-Leistung steigt für alle BesucherInnen, da der Server bedeutend entlastet wird.

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Entwicklung   >   Javascript