HEY HO! - let's go!

Snippet 1: alert(), prompt(), kleine Funktion mit Bildtausch

Das erste Beispiel zeigt ein virtuelles Haustier, das mit der Interaktion des Nutzers startet, sobald das Dokument geladen ist (onload als Eventhandler). Wir nutzen dazu alert() und prompt(), die in eine kleine Funktion eingebettet sind. Eine Nutzereingabe wird verarbeitet; ein Bild ausgetauscht.

<!DOCTYPE html>
<html>
<head>
<title>Dein virtueller Hund</title>

<script type="text/javascript">
    function begruessen() {
    var benutzer = prompt("Wie heißt du?", "Gib deinen Namen ein.");
    if (benutzer) {
          alert("Freut mich, Dich kennen zu lernen, " + benutzer + ".");
          document.getElementById("tierchen").src = "images/tier_gluecklich.png";
        }
      }
	if (window.opener)
	document.write("<a id='popup_close' href='#' onclick='self.close();'>
Demofenster schließen</a>");
	  
    </script>
  </head>

<body onload="alert('Gutsten Tag! Ich bin Dein neues Haustier!');">
	
<div style="margin-top:100px; text-align:center">
<img id="tierchen" src="images/tier_neutral.png" alt="Klick zum Kennenlernen" ↵
title="Klick zum Kennenlernen" style="cursor:pointer" ↵
onclick="begruessen();" />
</div>

</body>
</html>

Please note: der Pfeil ↵ meint, dass an dieser Stelle kein manueller Zeilenumbruch erfolgen sollte. Die Pfeilchen verursachen Fragezeichen beim Codekopieren, also aufs Entfernen achten! - Wichtig: die Zeile if(window.opener)... prüft auf modale Dialogbox und verhindert die selten gewünschte Browsernachfrage, ob wirklich geschlossen werden soll; sobald Dokumentinhalt nicht durch window.showModalDialog aufgerufen wird (wie hier zur Demonstration geschehen), auch diese if-Abfrage löschen!