Javascript Alert Box erstellen und anzeigen und Erklärung

    Mal ein kleines Tutorial wie man eine Alert Box erstellt und auch auf der Seite benutzt.


    Als erstes erstellen wir uns eine Funktion die dann in den Head (1) unserer Seite kommt wo die Alert Box erscheinen soll. Im unten stehenden Code sind zwei Funktionen eingebunden.
    Einmal seitenaufruf und einmal seiteverlassen. Ohne einen Aufruf der Funktion passiert garnichts. Wie man die Funktion aufruft wird im Laufe dieses Tutorials beschrieben.


    [hs width=100 height=100]http://x5help.home-wiekau.de/v9screens/img/image_1b.jpg
    [/hs]



    Nun zur Erklärung der Zeichen die verwendet werden können:
    \n - ist ein Zeilenumbruch
    \\ - ist ein Backslash
    \r - ist ein Wagenrücklauf wie früher bei der Schreibmaschine
    \t - ist ein Tabulator
    \' - ist ein Apostroph
    \" - ist ein Anführungszeichen


    Wenn man eine breitere Box haben möchte muss man einfach mehr Leerzeichen einfügen.
    Damit man nicht den kompletten Text in eine fortlaufende Zeile tippen muss, kann man die Strings mit dem + Zeichen verknüpfen. Dies verschafft einen besseren Überlick über den Inhalt und der Sonderzeichen.


    [hr][/hr]


    Nun zum Funktionsaufruf. Es gibt verschiedene Wege eine Alertbox einzublenden. Die am weit verbreitet ist sicher die Anzeige beim Seitenaufruf bzw. Seite verlassen.


    Dazu gibt man einen EventHandler in den body ein.


    Code
    1. <body onLoad="seitenaufruf()" onUnload="seiteverlassen()">


    Dies kann man in Version 9 unter Eigenschaften der Seite (8) - Erweitert einstellen.
    Innerhalb des <BODY> Tag heißt diese Funktion in der Auswahlliste


    [hs width=100 height=100]http://x5help.home-wiekau.de/v9screens/img/image_2.jpg
    [/hs]


    Da der body Tag von X5 selbst erstellt wird müssen wir hier nur


    Code
    1. onLoad="seitenaufruf()" onUnload="seiteverlassen()"


    einfügen.


    So das war es auch schon zum Thema Seitenaufruf und Seite verlassen.


    [hr][/hr]


    Nun kann man aber auch einen Button in die Seite integrieren und die Funktion aufrufen.


    Code
    1. <input type="button" value="Test der Funktion in der Alert Box" onclick="seitenaufruf();">


    Da so ein einfacher Button nicht immer schön aussieht können wir das auch ein wenig mit Bild machen...


    Code
    1. <input type="image" src="bildname.jpg" alt="Test der Funktion in der Alert Box" value="Test der Funktion in der Alert Box" onclick="seitenaufruf();">


    [hr][/hr]


    Ich hoffe das war verständlich.


    [hr][/hr]


    Zum Abschluss noch ein kleines Gimmick


    Für den Head:


    Code
    1. <script type="text/javascript">
    2. function Schlaue_Frage () {
    3. var i = 1;
    4. var Eingabe = "";
    5. while (Eingabe != "UNOFFICIALWSX5" && i <= 3) {
    6. Eingabe = window.prompt("Wie heißt das bessere Forum?", "");
    7. i++;
    8. }
    9. }
    10. </script>


    für ein HTML Objekt:

    Code
    1. <a href="javascript:Schlaue_Frage()">wollen Sie mal eine Frage beantworten?</a>


    Viel Spaß beim nachbauen.


    Im Anhang das Beispielprojekt zum testen wer es nicht selbst hinbekommt.

    Kleine Alert-Ergänzung


    Die Alert-Box kann auch zur Begrüßung von Besuchern oder als Info-Box beim Start einer Seite in Kurzform genutzt werden.


    Unter Eigenschaften der Seite - Code innerhalb des <BODY> Tags:


    Code
    1. onload="window.alert('Herzlich willkommen!')"

    Mario


    Der einzige Lohn für Helfer ist ein Feedback.