Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Galileo Computing
ISBN 3-89842-859-1
gp Kapitel 4 Programmieren mit JavaScript
  gp 4.1 Variablen
    gp 4.1.1 Namensgebung
    gp 4.1.2 Numerische Variablen
    gp 4.1.3 Zeichenketten
    gp 4.1.4 Boolesche Variablen
    gp 4.1.5 Variablendeklaration
  gp 4.2 Operatoren
    gp 4.2.1 Arithmetische Operatoren
    gp 4.2.2 Boolesche Operatoren
    gp 4.2.3 String-Operatoren
    gp 4.2.4 Umwandlung zwischen den Variablentypen
  gp 4.3 Kontrollstrukturen: Schleifen
    gp 4.3.1 For-Schleifen
    gp 4.3.2 Do-while-Schleife
    gp 4.3.3 While-Schleife
    gp 4.3.4 For-in-Schleife
    gp 4.3.5 Schleifensteuerung
  gp 4.4 Kontrollstrukturen: Fallunterscheidung
    gp 4.4.1 If-Anweisung
    gp 4.4.2 Switch-Anweisung
    gp 4.4.3 Try
  gp 4.5 Datenspeicherung
    gp 4.5.1 Die eval()-Funktion
    gp 4.5.2 Arrays
  gp 4.6 Funktionen
  gp 4.7 Objekte


Galileo Computing

4.6 Funktionen  toptop

In diesem Kapitel wird document.write() ziemlich oft eingesetzt. Oft enthält die auszugebende Zeichenkette noch HTML-Tags. Bei manchen davon (etwa <script>) kommen einige Browser durcheinander. Abhilfe schaffen Sie hier, indem Sie nicht das gesamte Tag verwenden, sondern zumindest die spitzen Klammern als einzelne Zeichenketten behandeln und diese dann mit dem Plus-Operator verketten (hier vereinfacht am Beispiel des <p>-Tags):

document.write("<"+"p"+">" + "Galileo Press" + "<"+"/p"+">")

Bei vielen Anweisungen ist das recht aufwändig; vor allem die Tipparbeit verlangt viel Zeit und Konzentration. Hier (und noch in vielen anderen Situationen) kann man sich mit Funktionen behelfen. Unter einer Funktion versteht man einen Programmblock, der nicht sofort ausgeführt wird, aber explizit auf- bzw. abgerufen werden kann. So eine Funktion führt entweder ein paar Befehle aus (dann nennt man sie mitunter auch eine Prozedur), oder es wird ein Wert zurückgegeben. Eine Prozedur ist mit document.write() vergleichbar, während eine Funktion beispielsweise Zeichenkette.length entspricht.

Eine Funktion hat folgende Syntax:

function Funktionsname(Parameter1, Parameter2) {
   //Programmblock
   return Wert;
}

Die Anzahl der Parameter ist beliebig. Es kann auch kein Parameter verwendet werden (dann ist die Klammer leer). Innerhalb der Funktion können die Parameter dann unter dem Namen angesprochen werden, unter dem sie im Funktionskopf eingeführt wurden.

Die Zeile mit dem return ist optional. Der Befehl return sorgt dafür, dass die Funktion sofort verlassen wird (wie break). Wird hinter dem return ein Wert angegeben, so ist dieser der Rückgabewert der Funktion.

TippAus optischen Gründen sollten Sie sich bemühen, return durchgängig zu verwenden (wenn Sie es denn einsetzen). Tritt also in einem Zweig einer if-Abfrage eine return-Anweisung auf, sollten möglichst auch alle anderen Zweige mit return verlassen werden:

function Funktionsname(Parameter1, Parameter2) {
   if (variable == "irgendetwas") {
      return true;
   } else {
      return false;
   }
}

Im Gegensatz zu manchen anderen Programmiersprachen muss die Funktion nicht vor ihrem ersten Aufruf deklariert werden. Erkennt der JavaScript-Interpreter, dass ein Funktionsaufruf vorliegt, so wird das Dokument nach einer Funktion dieses Namens durchsucht.

Diese theoretische Einleitung soll anhand von praktischen Beispielen verdeutlicht werden. Prinzipiell geht es darum, dass an eine Funktion der Name eines Tags übergeben wird (beispielsweise "p" oder "span") und die Funktion dann entweder das Tag ausgibt (mit den dazugehörigen spitzen Klammern) oder das Tag als Zeichenkette zurückgibt. Somit wird auch das oben genannte Problem mit den spitzen Klammern gelöst.

Die erste Variante gibt das entsprechende Tag direkt mittels document .write() aus:

function tag_ausgeben(s) {
   document.write("<" + s + ">");
}
//Test-Aufruf
tag_ausgeben("p");
document.write("Galileo Press");
tag_ausgeben("/p");

In der zweiten Variante wird der return-Befehl verwendet. Die Funktion gibt also nichts direkt aus, sondern liefert einen Wert zurück, der dann im eigentlichen Programm weiterverwendet werden kann.

function tag(s) {
   return "<" + s + ">";
}
document.write(tag("p") + "Galileo Press" + tag("/p"));

Es sind noch zwei Fälle möglich:

gp  Es werden weniger Parameter übergeben, als im Funktionsrumpf angegeben sind.
gp  Es werden mehr Parameter übergeben, als im Funktionsrumpf angegeben sind.

Der erste Fall lässt sich recht schnell abhandeln. In diesem Fall hat der entsprechende Parameter den Wert null. Die Funktion tag() kann also erweitert werden, so dass eine leere Zeichenkette zurückgegeben wird, wenn kein Parameter übergeben worden ist:

function tag(s) {
   if (s == null) {
      return "";
   } else {
      return "<" + s + ">";
   }
}

Der zweite Fall ist nicht ganz so einfach. Die gute Nachricht vorweg: Alle Parameter, die an eine Funktion übergeben werden, sind in einem Array gespeichert. Es ist jedoch noch nicht offensichtlich, wie auf dieses Array zugegriffen werden kann. Der entsprechende Bezeichner heißt Funktionsname.arguments – und hier sehen Sie direkt, dass Sie keine reservierten Begriffe (etwa document, write etc.) als JavaScript-Funktionsnamen verwenden dürfen.

Die folgende Funktion gibt gleich eine ganze Liste von Tags aus. In einer for-Schleife wird das Array arguments durchlaufen, und alle Werte werden mit spitzen Klammern ausgegeben. Wie bereits oben angemerkt wurde, kann mit Arrayname.length die Anzahl der Elemente des Arrays bestimmt werden; in obigem Fall also Funktionsname.arguments. length!

function tag() {
   var returnstring = "";
   for (var i=0; i<tag.arguments.length; i++) {
      returnstring += "<" + tag.arguments[i] + ">";
   }
   return returnstring;
}

Der Aufruf

tag("p id='p1'", "span style='color: black;'", "b")

würde also folgende Zeichenkette als Ergebnis erhalten:

"<p id='1'><span style='color: black;'><b>"

Natürlich gibt es sinnvollere Einsatzgebiete für eine Funktion, als Workarounds für Browser-Bugs bereitzustellen. Kommen wir noch einmal zu Schleifen zurück. Es war ja immer etwas umständlich, ein Zeichen durch ein anderes auszutauschen. Mit einer Funktion kann man das Ganze etwas übersichtlicher gestalten:

function ersetzeZeichen(Zeichenkette, Position, Neu) {
   //Zeichenkette ist die betrachtete Zeichenkette.
   //Position ist die Position des Zeichens, das ersetzt
   //wird.
   //Neu ist das neue Zeichen.
   var neueZ = Zeichenkette.substring(0, Position);
   neueZ += Neu;
   neueZ += Zeichenkette.substring(Position+1,
      Zeichenkette.length);
   return neueZ;
}

Bei der Wahl der Variablennamen muss man Vorsicht walten lassen. Existiert die Variable auch außerhalb der Funktion, so wird keine neue Variable erzeugt, sondern auf die alte Variable zugegriffen. Umgekehrt kann man auf Variablen, die nur innerhalb einer Funktion auftreten, nicht von außen zugreifen. Man unterscheidet hier globale (außerhalb und innerhalb einer Funktion gültige) und lokale (nur innerhalb von Funktionen gültige) Variablen. Will man innerhalb einer Funktion eine lokale Variable erzeugen, deren Name schon an eine globale Variable vergeben ist, muss man der ersten Verwendung ein var voranstellen.

Folgendes Beispiel verdeutlicht das eben Gesagte:

var a=0;
var b=0;
function test() {
   a++;  //Zugriff auf globale Variable a
   var b=1;  //Neue lokale Variable. Sie
             //hat mit der globalen Variablen b nichts
             //zu tun
   var c=0;  //Neue lokale Variable
}

Funktionen können auch wie folgt definiert werden:

var ersetzeZeichen = function(Zeichenkette, Position, Neu) {
   var neueZ = Zeichenkette.substring(0, Position);
   neueZ += Neu;
   neueZ += Zeichenkette.substring(Position+1,
      Zeichenkette.length);
   return neueZ;
}

Danach können Sie die Funktion wie gehabt mit ersetzeZeichen() verwenden. Man spricht hier auch von anonymen Funktionen, denn nach function folgt kein Funktionsname. Später in diesem Buch werden Sie anonyme Funktionen das ein oder andere Mal einsetzen. Sie werden aber im weiteren Verlauf dieses Buches viele Anwendungsmöglichkeiten für Funktionen vorfinden; da wir erst am Anfang unserer JavaScript-Künste stehen, sind die Beispiele in diesem Kapitel besonders einfach gehalten.

 <<   zurück
  
  Zum Katalog
Zum Katalog: JavaScript und AJAX
JavaScript und AJAX
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: JavaScript und AJAX - Das Video-Training






 JavaScript und AJAX -
 Das Video-Training


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten
 programmieren
 und gestalten


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


Zum Katalog: CSS-Praxis






 CSS-Praxis


Zum Katalog: AJAX






 AJAX


Zum Katalog: PHP 5 und MySQL 5






 PHP 5 und MySQL 5


Zum Katalog: TYPO3 4.0






 TYPO3 4.0


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de