17.5 HTML_Javascript 

Auch HTML_Javascript stellt eine gute Ergänzung zu HTML_Page2 dar. Das Paket gibt Ihnen die Möglichkeit, einfache Scripts automatisch generieren zu lassen. Zum jetzigen Zeitpunkt ist die Klasse noch nicht sehr leistungsfähig, aber sie kann doch einige Standardaufgaben deutlich vereinfachen. Zukünftige Versionen dieser Klasse sollen insbesondere das Einbinden externer JavaScript-Dateien ermöglichen, was zurzeit noch nicht vorgesehen ist.

Momentan unterstützt die Klasse die Nutzung der window-Methoden alert, prompt sowie confirm. Darüber hinaus werden auch PopUps und die Ausgabe mithilfe von write bzw. writeln unterstützt.

require_once 'HTML/Javascript.php'; 
 
$js = new HTML_Javascript(); 
echo $js->startScript(); 
echo $js->alert('Hallo Welt'); 
echo $js->endScript();

Listing 17.5 Generieren eines alert-Fensters

Der Code aus Listing 17.5 generiert die folgenden Zeilen:

<script type="text/javascript" defer="defer"> 
alert("Hallo Welt") 
</script>

Ein wenig gewöhnungsbedürftig bei dieser Klasse ist, dass jede Methode direkt den generierten Code zurückgibt, was dazu führt, dass in diesem Beispiel jede Zeile mit einem echo eingeleitet wird. Natürlich wäre es auch möglich, die Daten in einer Variable zu sammeln und später auszugeben.

Der Konstruktor instanziiert das benötigte Objekt, wobei er momentan keine Parameter akzeptiert. Die Methoden startScript() und endScript() generieren jeweils das öffnende und schließende <script>-Tag. Rufen Sie eine der beiden Methoden nicht auf, so fehlt das entsprechende Tag, was hilfreich sein kann, wenn Sie bereits JavaScript-Quellcode in der Datei haben, den Sie mit den Resultaten des Pakets kombinieren wollen. Das Folgende wäre denkbar und völlig korrekt:

// Einbinden der Klassendatei und Instanziierung 
echo $js->startScript(); 
echo $js->alert('Hallo Welt'); 
?> 
prompt ('Hier gehts in HTML weiter'); 
</script>

startScript() setzt standardmäßig das Attribut defer="defer", das dafür sorgt, dass das Script erst dann ausgeführt wird, wenn die ganze Seite geladen ist. Das kann störend sein, wenn Sie Teile der Darstellung aus JavaScript heraus generieren wollen. Um das Attribut zu unterdrücken, übergeben Sie der Methode die Konstante false.

Die Methode alert() generiert den Code, um ein JavaScript-alert-Fenster zu öffnen, und bekommt den Text übergeben, der in dem Fenster erscheinen soll. Übergeben Sie als zweiten Parameter ein true, wird der erste Parameter als Name einer JavaScript-Variable betrachtet. Dass diese Variable vorhanden ist und einen Wert enthält, müssen Sie dann allerdings selbst sicherstellen.

Um ein confirm-Fenster zu generieren, ist die Methode confirm() vorgesehen, die mindestens zwei Parameter erwartet. Der erste ist hierbei der Name der JavaScript-Variable, in der das Ergebnis zurückgegeben werden soll. Der zweite Parameter enthält den Text, der im Fenster erscheinen soll. Auch hier können Sie noch ein true übergeben, um zu definieren, dass es sich bei dem zweiten Parameter um den Namen einer JavaScript-Variable handeln soll und nicht um einen String, der direkt ausgegeben werden soll. Die beiden Zeilen

echo $js->confirm("erg1","Sind Sie sicher?"); 
echo $js->confirm("erg2","frage",true);

erzeugen also dieses Ergebnis:

erg1 = confirm("Sind Sie sicher?") 
erg2 = confirm(frage)

Das dritte »Standard-Fenster«, das das Paket unterstützt, ist prompt, mit dem ein Wert eingelesen werden kann. In diesem Fall ist der erste Parameter der Text, der im Fenster dargestellt werden soll, bzw. eine entsprechende Variable. Als zweiten Wert übergeben Sie den Namen der Variable, in der JavaScript den Rückgabewert des Fensters erhalten soll. Ein dritter, optionaler Parameter gibt Ihnen die Möglichkeit, den Vorgabe-Wert für die Eingabezeile festzulegen. Übergeben Sie ihn nicht, geht das Paket davon aus, dass die Eingabe-Zeile mit einem Leerstring initialisiert werden soll, um zu vermeiden, dass dort ein undifined oder null zu finden ist. Die Zeile

echo $js->prompt('Bitte Ihren Namen eingeben','name' 
                 'Hier schreiben');

generiert dieses Ergebnis:

name = prompt("Bitte Ihren Namen eingeben", "Hier schreiben")

Eine weitere Möglichkeit, in dieser Klasse mit Fenstern zu arbeiten, sind PopUp-Fenster, die in zwei Varianten unterstützt werden. Hierzu sind die Methoden popup() und popupWrite() vorgesehen. Die erste erzeugt ein PopUp-Fenster, in dem eine Datei geladen wird, und die zweite eines, in das direkt Code ausgegeben wird. Somit unterscheidet sich der Aufruf dieser beiden Methoden auch nur in einem Parameter.

Der erste Parameter ist in beiden Fällen die JavaScript-Variable, der das Fenster zugeordnet werden soll. Der zweite dient dazu, die URL der Seite zu übergeben, die im Fenster geladen werden soll, bzw. den Code der Seite zu übergeben, die im neuen Fenster angezeigt werden soll. Danach folgen der Name des Fensters sowie die Breite und die Höhe, in der es erscheinen soll. Die open-Methode von JavaScript kennt noch viele andere Attribute, die das Aussehen des Fensters beeinflussen können. Hierzu können Sie ein Array übergeben, das für jedes der folgenden Attribute einen Wert enthalten sollte. Die Werte werden hierbei der Reihe nach den folgenden Attributen zugeordnet: resizable, scrollbars, menubar, toolbar, status und location. Als Wert können Sie also yes oder no bzw. 1 oder 0 angeben. Wichtig ist aber, dass Sie für jedes Attribut einen Wert angeben. Ist Ihnen das zu aufwändig, können Sie auch einen booleschen Wert übergeben, um alle Attribute auf yes oder no zu setzen. Die letzen beiden Parameter definieren, wie viele Pixel das Fenster vom oberen bzw. vom linken Rand entfernt geöffnet werden soll. Diese beiden Werte sind optional und werden mit 300 Pixeln definiert, wenn Sie nichts angeben. [In der aktuellen Version liegt hier bei popup noch ein Fehler vor. Möchten Sie das Fenster positionieren, müssen die Koordination mithilfe des Arrays übergeben werden. ] In Listing 17.6 finden Sie ein Beispiel für die beiden Methoden.

require_once 'HTML/Javascript.php'; 
 
$js = new HTML_Javascript(); 
echo $js->startScript(); 
$options = array ("no", // Groesse darf nicht veraendert werden 
                  "no", // Keine Scrollbars 
                  "no", // Keine Menubar 
                  "no", // Keine Werkzeugleiste 
                  "no", // Keine Statuszeile 
                  "no"  // Keine Adresszeile 
           ); 
 
// Code, der mit popupWrite ausgegeben werden soll 
$content = ' 
   <html> 
      <head> 
         <title>Hallo Welt</title> 
      </head> 
      <body> 
         Das ber&uuml;hmte "Hallo-Welt-Fenster" ;-) 
      </body> 
   </html> 
'; 
echo $js->popup("var1", // Name der Variable 
                "http://www.example.com", // URL zum Laden 
                "Name1", // Name des Fensters 
                200, // Breite des Fensters 
                200, // Hoehe des Fensters 
                $options); // Optionen 
 
echo $js->popupWrite("var2",$content, 
                     "Name2",200,200,false); 
 
echo $js->endScript();

Listing 17.6 Code zum Generieren zweier PopUp-Fenster

Wichtig ist, dass Sie bei dem Inhalt, der mit popupWrite() ausgegeben werden soll, keine doppelten Anführungszeichen (") setzen, da der resultierende Code sonst fehlerhaft ist. Listing 17.6 generiert diesen Code:

<script type="text/javascript" defer="defer"> 
   var1= window.open("http://www.example.com", "Name1", 
   "width=200, height=200,resizable=no, scrollbars=no, 
    menubar=no, toolbar=no, status=no, location=no, top=, 
    left=") 
   var2= window.open("", "Name2", "width=200, height=200, 
    resizable=no, scrollbars=no, menubar=no, toolbar=no, 
    status=no, location=no, top=300, left=200") 
 
if (var2){ 
   var2.focus(); 
   var2.document.open(); 
   var2.document.write('\n   <html>\n      <head>\n 
               <title>Hallo Welt</title>\n      </head>\n 
               <body>\n         Das ber&uuml;hmte \"Hallo-Welt- 
               Fenster\" ;-)\n      </body>\n   </html>\n'); 
   var2.document.close(); 
   if (var2.opener == null) var2.opener = self; 
} 
</script>

Zusätzlich sieht das Paket die Möglichkeit vor, die JavaScript-Funktion writeln() zu nutzen. Diese kann hilfreich sein, wenn Sie eine Seite direkt auf dem Client generieren lassen wollen. Hierfür sind die Methoden write() und writeLine() vorgesehen. Beide bekommen einen Text übergeben, der mithilfe von writeln() beim Client ausgegeben werden soll. In beiden Fällen können Sie auch den Namen einer JavaScript-Variable angeben, wenn Sie als zweiten Parameter die Konstante true nutzen. Die beiden Befehle unterscheiden sich dadurch, dass writeLine() die Ausgabe zusätzlich um ein <br /> ergänzt.

Interessant an diesem Paket ist noch die Möglichkeit, Variablen und Arrays, die in PHP vorhanden sind, in JavaScript einzubinden. Dazu sind verschiedene statische Methoden in der Klasse HTML_Javascript_Convert vorgesehen. Um eine einfache Variable zu konvertieren, ist die Methode convertVar() bestens geeignet. Sie bekommt die PHP-Variable und den Namen der Variable übergeben, den das JavaScript-Pendant erhalten soll. Folgende Zeilen

$int=10; 
echo HTML_Javascript_Convert::convertVar($int,"intWert");

generieren clientseitig:

intWert = 10;

Die Methode erkennt die verschiedenen Datentypen, so dass Sie sich darüber keine Gedanken machen müssen. Sie können allerdings auch explizit auf die Methoden convertString() oder convertBoolean() zugreifen, wenn Sie einen entsprechenden Wert konvertieren wollen. Um keine Probleme mit Strings zu bekommen, die »problematische« Zeichen wie ' oder ein \n enthalten, können Sie diese Strings an die Methode convertValue() übergeben, die die Zeichen mithilfe von Backslashes entwertet.

Hilfreich ist auch die Methode convertVar(), die in der Lage ist, Arrays zu konvertieren:

require_once 'HTML/Javascript/Convert.php'; 
 
$arr   = array( 
               "hoehe"     => 400, 
               "breite"    => 400, 
               "kuenstler" => array ( 
                                 "vorname"  => "Peter", 
                                 "nachname" => "Sausewind" 
                             ) 
          ); 
 
echo HTML_Javascript_Convert::convertVar($arr,"arrDaten");

Generierter JavaScript-Code:

arrDaten = Array(3) 
arrDaten["hoehe"] = 400 
arrDaten["breite"] = 400 
tmp1 = Array(2) 
tmp1["vorname"] = "Peter" 
tmp1["nachname"] = "Sausewind" 
arrDaten["kuenstler"] = tmp1 
tmp1 = null

Die meisten Methoden in diesem Paket generieren einen PEAR_Error, wenn ein Fehler auftritt.