Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Metatag-Generator

Schwierigkeit: für Anfänger

 

Metatag-Generator:

Beschreibung:

Recht praktisch, diese kleinen Helfer. Die Programmierung ist allerdings kinderleicht. Wir zeigen es ihnen hier dennoch noch einmal - schließlich bietet dieses Beispiel eine gute Einleitung zur Verwaltung von HTML-Objekten unter JavaScript und ganz nebenbei ist es eine nette Ergänzung für ihre eigenen Page (die sie selbstverständlich kostenlos herunterladen, verändern und einsetzen dürfen)

Beispiel:

Dieses Formular dürfte ihnen bekannt vorkommen. Das ist unser Ziel: ein funktionstüchtiger Generator.

Erstellen sie eigene Metatags

Titel der Seite
Beschreibung
Schlagwörter
(durch Leerzeichen getrennte Liste)
Autor
Emailverbindung
verfügbar bis:
(wenn nicht zutreffend freilassen)
Sprache
Anweisungen für Robots
Sucheintrag automatisch aktualisieren nach:

Quelltext:

Wir benötigen also 2 Dinge: erstens ein HTML-Formular, dass uns Eingaben vornehmen lässt und zweitens, ein kurzes Skript, dass diese Eingaben auswertet. Auf das Formular in HTML-Code will ich hierbei nicht näher eingehen und verweise (faul wie ich bin *g*) auf die Literatur. Bitte kopieren sie diesen Abschnitt ganz einfach an eine beliebige Stelle nachfolgend des "Body"-Tags.

<form name="test"><center>
<p>Erstellen sie eigene Metatags</p>

<table border="0"><tr>
 <td width="50%">
  Titel der Seite</td>
 <td width="50%">
  <input type="text" name="title" size="20" maxlength="80"></td>
</tr><tr>
 <td width="50%">
  Beschreibung</td>
 <td width="50%">
  <input type="text" name="description" size="20" maxlength="200"></td>
</tr><tr>
 <td width="50%">
  Schlagwörter<br>(durch Leerzeichen getrennte Liste)</td>
 <td width="50%">
  <input type="text" name="keywords" size="20" maxlength="240"></td>
</tr><tr>
 <td width="50%">
  Autor</td>
 <td width="50%">
  <input type="text" name="author" size="20"></td>
</tr><tr>

...

</tr></table>

<p><input type="button" onclick="erstellen()" value="erstellen!"></p>
<p><textarea name="code" rows="5" cols="40"></textarea>

</center></form>

Jetzt folgt das Skript. Ich werde mich darauf beschränken, den Zugriff auf die HTML-Objekte im Formular näher zu erläutern, der übrige Quellcode sollte ihnen geläufig sein. Fügen sie diesen einfach an beliebiger Stelle vor dem "Body"-Tag der Seite ein, auf der sie ihr Formular betreiben.

<script><!--

function erstellen(){

var txt='<META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1">';
if (document.test.title.value!='') {
  txt +='<META NAME="TITLE" CONTENT="'
 + document.test.title.value + '">'};
if (document.test.description.value!='') {
  txt +='<META NAME="DESCRIPTION" CONTENT="'
 + document.test.description.value + '">'};
if (document.test.keywords.value!='') {
  txt +='<META NAME="KEYWORDS" CONTENT="'
 + document.test.keywords.value + '">'};
if (document.test.author.value!='') {
  txt +='<META NAME="AUTHOR" CONTENT="'
 + document.test.author.value + '">'};

...

document.test.code.value=txt;

}

// --></script>

Der Name unseres Formulars ist "test" ein Textfeldes "textfeld" hätte also die 'Adresse': document.test.textfeld
"document" gibt hierbei das HTML-Dokument selbst an, welches hier ebenfalls ein Objekt (mit spezifischen Eigenschaften) ist. Das Formular "test" wird wie eine Eigenschaft des Objektes "document" behandelt. Innerhalb des Formulars wird das Textfeld wie eine Eigenschaft des Formularobjektes behandelt. Natürlich hat das Textfeld selbst weitere Eigenschaften. Zum Beispiel "value", ein Wert, welcher den Eintrag im Textfeld angibt.

Besonders interessant ist das Dropdownfeld. Dieses ist nicht nur selbst ein Objekt, vielmehr ist jede Option ebenfalls Objekt mit weiteren Eigenschaften. Angenommen unser Dropdownfeld heißt "drpdwn", dann wäre dies ein Verweis auf das momentan ausgewählte Objekt:
document.test.drpdwn.selectedIndex Der Rückgabewert ist eine Zahl welche die Nummer des gewählten Eintrages angibt.
Das Auslesen des Wertes oder Namens einer bestimmten Option dagegen, greift auf die Eigenschaft "options" des Dropdownfeldes zu. Diese ist ein Datenfeld, welches selbst die jeweiligen Optionen als Objekte enthält. Um also den der Wert, welcher der ersten Option im Dropdownmenü zugeordnet ist, auszulesen müssen wir folgenden Code verwenden: document.test.drpdwn.options[0].value
Statt dem Wert ("value") können wir natürlich auch den Text dieser Option auslesen. Dazu ersetzen wir "value" einfach durch "text".
Um also den Wert der aktuell gewählten Option auszulesen benötigen wir einen kleinen Kunstgriff.

    Zunächst finden wir heraus, welche Nummer die gewählte Option hat:

var hilfsvariable = document.test.drpdwn.selectedIndex

    Nun lesen wir den Wert aus.

document.test.drpdwn.options[hilfsvariable].value

dieser Code ist äquivalent zu:
document.test.drpdwn.options[document.test.drpdwn.selectedIndex].value

Ich denke, anhand dieser Beispiele ihnen den Umgang mit HTML-Objekten etwas näher gebracht zu haben. Eine genaue Erläuterung des Beispieles lohnt hier nicht, da dazu eine Beschreibung des HTML-Codes unumgänglich wäre - dies wollte ich allerdings gern vermeiden.
Bitte lesen sie dazu im Bereich HTML nähere Erläuterungen zu HTML-Formularen. Oder werfen sie einen Blick in die Literatur. Bei weiteren Fragen stehe ich ihnen selbstverständlich zur Verfügung.

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: