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

Tell-A-Friend

Schwierigkeit: für Fortgeschrittene

 

erlaubt Besuchern, eine Mail mit der Homepageadresse an Freunde zu senden:

Beschreibung:

Gerade in den werbefreudigen Staaten von Amerika sehr beliebt: "findest du diese Seite toll? Klick hier und mail es deinen Freunden."
Das können sie mit diesem Skript nun auch.

Eine clevere Lösung - denn solange der Besucher noch auf der Seite ist, hat der Webmaster die seltene Gelegenheit ausnahmsweise erwünschte Werbung zu machen.

Kommerzielle Anbieter, die eben solche Skripte anbieten (und bei dieser Gelegenheit gleich eine eigene Werbebotschaft anhängen) gibt es mehr als genug. Das Skript, welches dahinter steckt ist allerdings so simpel, dass sie getrost auf solche egoistischen Angebote verzichten können - und (Ehrenwort!) in 10 Minuten sich schon wieder um wichtigere Dinge kümmern können.

Schritt 1: Formular erstellen

Was wir brauchen ist ein Feld für den Namen des Freundes, ein zweites für seine Mailadresse und einen Button zum abschicken der Mail...

<form name="form" onSubmit="sendMail();">

Formulare werden mit dem Tag "FORM" umschlossen. Das Attribut "NAME" gibt eine beliebige Bezeichnung an.
Für diese Bezeichnung dürfen beliebige alphanumerische (= alle Ziffern und Buchstaben) Zeichenketten verwendet werden.
"onSubmit" ist ein so genannter "Eventhandler"

Gefällt dir diese Website?
Sag's deinen Freunden!
Name
<input type="text" name="name" size="20">

Steuerelemente haben den Tag "INPUT" und einen "TYPE", der angibt,
um ob es sich z.Bsp. um ein Textfeld ("text") oder Passwortfeld ("password") handelt.
Das Attribut "SIZE" gibt die Breite in Zeichen an (die Breite kann mit der gewählten
Schriftart variieren) 
Mail
<input type="text" name="mail" size="20">

<input type="submit" value="Abschicken">

Schaltflächen werden ebenfalls mit dem Tag "INPUT" bezeichnet.
Eine Schaltfl. vom "TYPE" "submit" löst den Eventhandler "onSubmit" des Formulars aus.
Das Attribut "VALUE" bezeichnet die Beschriftung des Buttons - bei Textfeldern wie oben
kann dieses Attribut auch einen Startwert angeben.

Hinweis:
Außerdem gibt es noch Schaltflächen vom "TYPE" "reset" und "button".
"reset" löscht alle eingegebenen Werte, für "button" kann eine beliebige Funktion
mit einem zusätzlichen Eventhandler ("onClick") spezifiziert werden.

</form>

Schritt 2: JavaScript

Es gibt mehrere Übertragungsprotokolle im Netz. Zum Beispiel "http://" oder "ftp://" für Dateitransfer, "file://" für Dateien auf ihrer Festplatte... und "mailto:" für Anweisungen an den Standardmailserver - für gewöhnlich Outlook oder ein anderes Mailprogramm.

Alles was wir mit JavaScript tun müssen, ist die Angaben, die im Formular gemacht wurden, "aufzusammeln" und zu einer Nachricht zusammenzustellen, die wir dem Mailprogramm übergeben können.

Die Zielsyntax sieht in unserem Fall so aus:

MAILTO:mailadresse?SUBJECT=betreff&BODY=nachricht

Jetzt werden wir eine Funktion schreiben, die das leistet.

Zunächst holen wir also die Eingaben aus dem Formular. Das Formular selbst und seine Eingabefelder können über ihre Namen angesprochen werden. Zum Beispiel das Feld, welches die Mailadresse enthält über "document.form.mail". "form" ist hier der Name den wir unserem Formular gegeben haben - welches unser Textfeld umschließt. Das Textfeld selbst wurde von uns ebenfalls über das Attribut "NAME" als "mail" bezeichnet.
Den eingegebenen Text - also den "Wert" - dieses Feldes erhalten wir über die Eigenschaft "value" des Objekts (in JavaScript sind alle HTML-Elemente Objekte).

<SCRIPT LANGUAGE="JavaScript">
 <!-- Autor: www.All-Community.de

function sendMail() {

  var name = document.form.name.value;
  var mail = document.form.mail.value;

Zunächst holen wir uns einfach die Werte aus dem Formular (oben).
Den Betreff und den Text der Mail können wir direkt vorgeben .... (unten)

  var betreff = "Schau mal rein!";
  var text = "Ich habe eine Website gefunden, die du dir unbedingt mal anschauen musst: ...\n";

Alle notwendigen Informationen haben wir jetzt - Alles was nun noch zu tun bleibt, ist das Ziel "zusammenzusetzen".
Dabei verwenden wir die "Syntax", die bereits oben beschrieben wurde...

var ziel = "mailto:" + mail; //Mailadresse
      ziel +="?SUBJECT=" + escape(betreff); //Betreffzeile
      ziel +="&BODY=" + escape("Hallo "+ name +"!\n" + text); //Nachricht

Hinweis:
Die Funktion "escape(text)" kodiert die Sonderzeichen innerhalb eines Text in so genannte "Escapesequenzen".
Dies ist notwendig, da diese in URLs nicht erlaubt sind. Die umgewandelten Symbole werden von ihrem Mailprogramm automatisch wieder in Klartext zurück übersetzt. In JavaScript können sie außerdem auch die Funktion "unescape(text)" verwenden, um die Kodierung rückgängig zu machen.

Abschließend müssen wir das Ziel nur "anwählen". Dazu übergeben wir es dem Browser als neue URL.
Um dass zu tun, überschreiben wir die aktuell geladene URL mit der Ziel-URL.
Die noch angezeigte HTML-Seite wird durch das Objekt "document" repräsentiert - ihre URL durch die Eigenschaft "location".

  document.location = ziel;

War alles erfolgreich? Dann können wir dem Besucher jetzt noch eine Bestätigungsseite anzeigen,
um uns z.Bsp. dafür zu bedanken, dass er für uns Werbung macht.

  document.location = "erfolg.html";

};

//-->
</SCRIPT>

That's it, Folks.

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: