Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag25.06.2008 um 20:30 (UTC)    
Titel: Wie erstelle ich einen Generator

EINLEITUNG
Zuerst sollte man sich fragen, was man generieren möchte.
In diesem Beispiel gehe ich davon aus, dass HTML-Quelltext generiert werden soll, was aber keine Bedingung ist, da grundsätzlich bspw. auch BBCode generiert werden kann.
Was brauchen wir zuerst?
Beispielsweise ein HTML-Tag, welches mit Inhalt generiert werden soll.
Nehmen wir als Beispiel die überschrift erster Ordnung.
Das Tag wird folgendermaßen angewendet:
Zitat:
<h1>irgend ein Text</h1>
Das Tag hat ein öffnendes Tag (<h1>) und ein schließendes Tag (</h1>). Den Text dazwischen soll der User per Formular selbst eingeben, deswegen steht er noch nicht fest. Das ist das was wir erst einmal wissen müssen.

TEIL I

Wir wissen jetzt, was wir generieren lassen wollen und könnten uns jetzt eigentlich an die Modifikation des Scriptes machen.

Zunächst aber brauchen wir ein Formular. Das Grundgerüst gebe ich hier vor.

Der obere Bereich des Formulars ist folgender:
Zitat:
<form action="#" method="post">
<!-- Beginn FELDERBEREICH -->
Anschließend folgt hier, bzw. folgen hier deine Textfelder. Und vor dem Textfeld kannst du noch einen Text schreiben, was vom User eigentlich eingegeben werden soll. Diesen gesamten Bereich werden wir jetzt FELDERBEREICH nennen. Wir werden uns diesem Bereich aber erst etwas später widmen.


Abgeschlossen wird dieses Formular mit dem unteren Bereich. Der untere Bereich beinhaltet den Button zum Generieren und das Textfeld mit dem generierten Code.
Zitat:
<!-- Ende FELDERBEREICH -->
<input type="button" style="width:130px;height:20px;visibility:visible;border:1px outset #000000;" value="&raquo; generieren &laquo;" onclick="javascript:generator(this.form);" />
Nach dem Generieren: HTML-Quelltext zum Kopieren.
<textarea title="Dreifachklick um den gesamten Code zu markieren" cols="1" rows="1" name="result" style="width:350px;height:60px;visibility:visible;border:1px inset #000000;" readonly="readonly"></textarea></form>
Wie man sehen kann, ist dort ein rotes Wort im unteren Bereich, namens "generator". Diesen Namen werden wir nachher allgemein noch erwähnen.

Wie wir in der Einleitung festgestellt haben, brauchen wir nur ein Textfeld, in dem der User seinen Text für die überschrift eintragen soll. Dazu benötigen wir ein Textfeld, das wir in unserem FELDERBEREICH platzieren werden. Das einzige, was wir uns hierbei selbst ausdenken müssen, ist ein Name. Das Grundgerüst für das Textfeld gebe ich auch vor:
Zitat:
<input name="NAME" type="text" value="" />
Wie wir erkennen, ist dort ein blau gekennzeichnetes Wort "NAME", das hier als Platzhalter dient und später von dir mit einem eigenen Namen versehen werden muss.

Für den Namen, gibt es aber ein paar Regeln, die wir einhalten werden.
Der Name darf nur aus englischen Buchstaben bestehen! Das bedeutet, keine Umlaute! Weiter ist es verboten Leerzeichen, oder Sonderzeichen zu verwenden. Auch dürfen keine Zahlen am Anfang stehen.
Als Beispiel wähle ich hier den Namen "ueberschrift".
Eingesetzt in meinem Textfeld sieht das ganze nun so aus:
Zitat:
<input name="ueberschrift" type="text" value="" />
Da wir unser Feld jetzt fertig haben, können wir es in den FELDERBEREICH einfügen.

Insgesamt sieht das ganze nun so aus:
Zitat:
<form action="#" method="post">
<!-- Beginn FELDERBEREICH -->



<input name="ueberschrift" type="text" value="" />



<!-- Ende FELDERBEREICH -->
<input type="button" style="width:130px;height:20px;visibility:visible;border:1px outset #000000;" value="&raquo; generieren &laquo;" onclick="javascript:generator(this.form);" />
Nach dem Generieren: HTML-Quelltext zum Kopieren.
<textarea title="Dreifachklick um den gesamten Code zu markieren" cols="1" rows="1" name="result" style="width:350px;height:60px;visibility:visible;border:1px inset #000000;" readonly="readonly"></textarea></form>
Das hätten wir geschafft und unser Formular ist fertig.



TEIL II

Widmen wir uns nun der Modifikation des JavaScripts. Ich habe dort einen Bereich vorgegeben, den wir ab jetzt MODIFIKATIONSBEREICH nennen werden. ähnlich wie bei unserem Formular, müssen wir in diesem Bereich selbst etwas tun.

Hier aber zunächst mal das allgemeine Grundgerüst.
Zitat:
<script type="text/javascript">
<!--// hiding this script from old browser
function generator(form)
{
if (confirm("Der Code wird jetzt generiert und kann aus dem unteren Textfeld kopiert werden."))
{
// Beginn MODIFIKATIONSBEREICH



form.result.value = form.NAME.value;



// Ende MODIFIKATIONSBEREICH
}
else
{
alert("Sie haben den Vorgang abgebrochen.")
}
}
//-->
</script>
Da dies ein einfach durchzuführendes Tutorium sein will, widmen wir uns nur dem Bereich zwischen "// Beginn MODIFIKATIONSBEREICH" und "// Ende MODIFIKATIONSBEREICH" , welchen wir MODIFIKATIONSBERECH genannt haben.

Auf den ersten Blick sieht es vielleicht etwas komisch aus, aber man gewöhnt sich mit der Zeit daran. Gemeint ist dieser Ausdruck:

Zitat:
form.result.value = form.NAME.value;
Was wir hier tun müssen ist zunächst einmal NAME durch unseren eigenen Namen (den wir auch für das Textfeld benutzt haben) zu ersetzen.


Da ich im Textfeld den Name "ueberschrift" verwendet habe, muss das bei mir nun so aussehen:
Zitat:
form.result.value = form.ueberschrift.value;

Puh, jetzt haben wir schon eine ganze Menge hinter uns und wollen uns eine kleine Pause gönnen und uns ein Zwischenergebnis anzeigen lassen. Dafür müssen wir den bisherigen Code zusammen fassen. Also Formular und darunter das Script.

Das ganze sieht bei mir nun so aus:

Zitat:
<form action="#" method="post">
<!-- Beginn FELDERBEREICH -->


<input name="ueberschrift" type="text" value="" />



<!-- Ende FELDERBEREICH -->
<input type="button" style="width:130px;height:20px;visibility:visible;border:1px outset #000000;" value="&raquo; generieren &laquo;" onclick="javascript:generator(this.form);" />
Nach dem Generieren: HTML-Quelltext zum Kopieren.
<textarea title="Dreifachklick um den gesamten Code zu markieren" cols="1" rows="1" name="result" style="width:350px;height:60px;visibility:visible;border:1px inset #000000;" readonly="readonly"></textarea></form>


<script type="text/javascript">
<!--// hiding this script from old browser
function generator(form)
{
if (confirm("Der Code wird jetzt generiert und kann aus dem unteren Textfeld kopiert werden."))
{
// Beginn MODIFIKATIONSBEREICH



form.result.value = form.ueberschrift.value;



// Ende MODIFIKATIONSBEREICH
}
else
{
alert("Sie haben den Vorgang abgebrochen.")
}
}
//-->
</script>
Also speichern wir die Seite und schauen sie uns im Browser an. Probiert dabei auch aus, was passiert, wenn ihr einen Text eingebt.

TEIL III

Wie wir beim Ausprobieren gemerkt haben, wird der Text, den wir eingegeben haben einfach nur wieder im unteren Textfeld angezeigt.
Was wir wollen, ist aber, dass vor unserem Text ein <h1> und dahinter </h1> steht.
Doch bevor wir uns jetzt darum kümmern, müssen wir etwas Grundlegendes lernen. Und zwar, wie man Ausdrücke, bzw. Zeichen und Wörter miteinander verbindet.
Stellen wir uns vor, wir haben drei Ausdrücke (hier: Wörter):

"Welt" , "komme" und "ich".

[
Hinweis: Wörter, Sätze und Zeichen, müssen in einfachen Hochkommata ( ' ), oder in doppelten Hochkommata ( " ) eingeschlossen werden. Sollte in einem Text das gleiche Hochkommata vorkommen mit denen der Text schon eingeschlossen ist, so muss das Hochkommata entwertet werden, damit der Browser nicht denkt, dass an dieser Stelle Schluss ist. Um ein Hochkommata zu entwerten, stellt man ihm einen backslash ( \ ) voran (Bsp.: 'Hallo , ich bin\'s nur' ).
]


In JavaScript sollen diese drei Wörter zu einem sinnvollen Text zusammengefasst werden. Zusammengefasst werden diese mit dem Pluszeichen (+).

Das geht so:

'Welt' + 'ich' + 'komme'

Wie wir sehen, verbinden wir Ausdrücke, mit einem Pluszeichen (+).

In unserem Beispiel würde jetzt aber stehen "Weltichkomme", da in den vorgegeben Ausdrücken keine Leerzeichen vorhanden waren.

Diese müssen wir extra hinzufügen:

'Welt ' + 'ich ' + 'komme'

Ob die Leerzeichen nach "Welt", oder vor und nach "ich" stehen, ist euch überlassen. Man kann sie sogar extra dazwischen stellen:

'Welt' + ' ' + 'ich' + ' ' + 'komme'

Anstatt dem Wort "ich", "Welt" oder "komme", könnte genauso gut etwas anderes stehen. Und zwar unser Ausdruck aus unserem JavaScript.
Erinnerst du dich noch daran? Ok, hier nochmal der ganze Ausdruck:
Zitat:
form.result.value = form.ueberschrift.value;
Das ist der gesamte Ausdruck, wovon wir NUR den Teil hinter dem Gleichheitszeichen (=), aber noch vor dem Semikolon (;) betrachten wollen:
Zitat:
form.ueberschrift.value
Diesen hinteren Ausdruck werden wir ab jetzt BOX nennen. In dieser BOX ist nämlich etwas enthalten. Und zwar das, was der User in das Textfeld eingegeben hat.
Und wenn wir wollen, dass vor unserer BOX etwas steht, dann können wir es in JavaScript allgemein so schreiben:

'Blabla ' + BOX

Unsere BOX wird nicht in Hochkommata gesetzt!
Wie wir sehen, ist auch hier das Pluszeichen (+) zum Verbinden mehrerer Ausdrücke(= Wörter und BOXEN) notwendig.
Da unsere BOX aber nicht einfach BOX heißt, sondern form.ueberschrift.value , müssen wir anstatt

'Blabla ' + BOX

folgendes schreiben:

'Blabla ' + form.ueberschrift.value

Damit das ganze verinnerlicht werden kann, werden wir an dieser Stelle wieder eine Pause machen und uns das ganze wieder im Browser ansehen. Dafür müssen wir ja nur unsere BOX im MODIFIKATIONSBEREICH erweitern.
Im MODIFIKATIONSBEREICH müsste dann nun folgendes stehen (Beachte bitte, dass die Zeile mit einem Semikolon ( ; ) abgeschlossen werden muss):
Zitat:
form.result.value = 'Balbla ' + form.ueberschrift.value;
Ok, nun speichert die Seite und probiert nochmal aus, was jetzt passiert, wenn ihr etwas eingebt.


TEIL IV

Eigentlich wissen wir jetzt alles, um unser Vorhaben komplett umzusetzen.
Wir müssen dazu nur vor und hinter unserer BOX die entsprechenden HTML-TAGS setzen, die für eine überschrift 1. Ordnung gelten.
Im MODIFIKATIONSBEREICH ändern wir also unser "Blabla " in "<h1>" um und hinter der BOX hängen wir mit dem bekannten Pluszeichen ( + ) das Ende-Tag "</h1>" an.
Das sieht dann so aus:
Zitat:
form.result.value = '<h1>' + form.ueberschrift.value + '</h1>';
Beachte bitte, dass das Semikolon ( ; ) die Zeile abschließt!
Speicher die Seite und probiere das Ganze jetzt noch einmal aus.

----------------

Nachdem wir unser Projekt jetzt abgeschlossen haben, stelle ich noch einmal den gesamten Code hier vor, falls jemand schreibfaul war, oder nicht alles mitbekommen hat. Wichtig ist dabei zu beachten, dass die Namen einer Farbe immer die gleichen sind. änderst du den Namen mit der roten Farbe, so musst du alle Namen mit roter Farbe ebenso ändern. In unserem Beispiel war das Wort "generator" rot markiert. Falls ihr mehrere Generatoren auf einer Seite haben möchtet, so müsst ihr den Generatoren unterschiedliche Namen geben!

Zitat:
<form action="#" method="post">
<!-- Beginn FELDERBEREICH -->



<input name="ueberschrift" type="text" value="" />



<!-- Ende FELDERBEREICH -->
<input type="button" style="width:130px;height:20px;visibility:visible;border:1px outset #000000;" value="&raquo; generieren &laquo;" onclick="javascript:generator(this.form);" />
Nach dem Generieren: HTML-Quelltext zum Kopieren.
<textarea title="Dreifachklick um den gesamten Code zu markieren" cols="1" rows="1" name="result" style="width:350px;height:60px;visibility:visible;border:1px inset #000000;" readonly="readonly"></textarea></form>


<script type="text/javascript">
<!--// hiding this script from old browser
function generator(form)
{
if (confirm("Der Code wird jetzt generiert und kann aus dem unteren Textfeld kopiert werden."))
{
// Beginn MODIFIKATIONSBEREICH



form.result.value = '<h1>' + form.ueberschrift.value + '</h1>';



// Ende MODIFIKATIONSBEREICH
}
else
{
alert("Sie haben den Vorgang abgebrochen.")
}
}
//-->
</script>



Zum Schluss noch ein Hinweis. Wenn ihr mehrere Eingaben braucht, als nur eine, dann fügt ihr (wie in TEIL I beschrieben wurde) einfach noch ein Textfeld im FELDERBEREICH hinzu. Hier müsst ihr aber einen anderen Namen wählen.
Wenn ihr also noch ein Textfeld mit bspw. den Namen "autor" hinzugefügt habt, so müsst ihr wie in und TEIL III und IV beschrieben, eine neue BOX mit dem Namen form.autor.value hinzufügen und mit dem Pluszeichen verbinden.

Beispielsweise könnte dann im MODIFIKATIONSBEREICH folgendes stehen:
Zitat:
form.result.value = '<h1>' + form.ueberschrift.value + '</h1>' + ' ein Text von ' + form.autor.value;


Ich hoffe, dieses Tutorium ist einigermaßen verständlich und kann den einen, oder anderen helfen.

Für Lob, Kritik, Fragen, Anregungen, oder bei Fehlern, bitte ich herzlich um Feedback

Post Scriptum:
Quellenangaben kann ich nicht machen, da sowohl das Script, als auch dieses Tutorium von mir sind.

Liebe Grüße
ronsn
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de