summaryrefslogtreecommitdiffstats
path: root/Bachelor/Entwicklung webbasierter Anwendungen/Praktikum5_6/12_ecmascriptdom1.htm
diff options
context:
space:
mode:
Diffstat (limited to 'Bachelor/Entwicklung webbasierter Anwendungen/Praktikum5_6/12_ecmascriptdom1.htm')
-rw-r--r--Bachelor/Entwicklung webbasierter Anwendungen/Praktikum5_6/12_ecmascriptdom1.htm332
1 files changed, 332 insertions, 0 deletions
diff --git a/Bachelor/Entwicklung webbasierter Anwendungen/Praktikum5_6/12_ecmascriptdom1.htm b/Bachelor/Entwicklung webbasierter Anwendungen/Praktikum5_6/12_ecmascriptdom1.htm
new file mode 100644
index 0000000..1be4e69
--- /dev/null
+++ b/Bachelor/Entwicklung webbasierter Anwendungen/Praktikum5_6/12_ecmascriptdom1.htm
@@ -0,0 +1,332 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+ <!-- Strict nicht möglich wegen target="_new" in form -->
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <title>Beispiele für ECMAScript und DOM</title>
+ <style type="text/css">
+ <!--
+
+
+/* allgemeine Styles */
+ td { font-size:0.8em; }
+ td.aussen { vertical-align:top; padding:0.8em; }
+ body { font-family:Arial, Helvetica, sans-serif; }
+ h1 { font-size:1.2em; }
+ h3 { font-size:1.0em; }
+ form td { white-space:nowrap; }
+
+
+/* Auf- und Zuklappen */
+ span.PlusMinus { background-color:rgb(192,192,192);
+ padding-left:0.2em; padding-right:0.2em; cursor:pointer;
+ font-family:monospace; }
+ ul.Unterpunkte { margin-top: 0.2em; margin-bottom: 0.2em; display:none; }
+
+
+/* Mouseover-Effekte */
+ div.ButtonNormal { background-color:rgb(192,192,192); cursor:pointer;
+ text-align:center; margin-bottom:0.1em; width:30%; }
+ div.ButtonOver { background-color:rgb(216,216,216); cursor:pointer;
+ text-align:center; margin-bottom:0.1em; width:30%; }
+ div.ButtonDown { background-color:rgb(242,242,216); cursor:pointer;
+ text-align:center; margin-bottom:0.1em; width:30%; }
+
+
+/* Formular */
+ td.Beschriftung { text-align:left; vertical-align:top; }
+ td.zentriert { text-align:center; }
+ .volleBreite { width:100%; }
+
+
+ -->
+ </style>
+ <script type="text/javascript">
+ <!--
+
+
+// allgemeine Funktionen
+
+ function Initialisierung()
+ {
+ BuchstabenZiffernUmschaltung();
+ Vorauswahl("Landwahl", "Inselwahl");
+ }
+ function zeigeAusnahme (Ausnahmeobjekt)
+ {
+ var Meldung = "Fehler: ";
+ if (typeof Ausnahmeobjekt == "object") {
+ // Browser werfen mitunter solche Ausnahmeobjekte aus
+ for (var Attribut in Ausnahmeobjekt) {
+ Meldung = Meldung + "\n" + Attribut + " = " + Ausnahmeobjekt[Attribut];
+ }
+ }
+ else
+ Meldung = Meldung + Ausnahmeobjekt;
+ alert (Meldung);
+ }
+
+
+
+// Auf- und Zuklappen
+
+ function AufZuKlappen (Kapitel)
+ {
+ try { // Beispiel zur Ausnahmebehandlung
+ var nPlusMinus = Kapitel.firstChild;
+ var nUnterliste = Kapitel.nextSibling.nextSibling;
+ var istZu = (nPlusMinus.nodeValue == "-");
+ if (istZu) {
+ nPlusMinus.nodeValue = "+";
+ nUnterliste.style.display = "none";
+ }
+ else {
+ nPlusMinus.nodeValue = "-";
+ nUnterliste.style.display = "block";
+ }
+ }
+ catch (Ausnahme) {
+ zeigeAusnahme (Ausnahme);
+ }
+ }
+
+
+
+// Auswahlhierarchie
+
+ var Inseln_Spanien = new Array ("Ibiza", "Mallorca", "Teneriffa");
+ var Inseln_Italien = new Array ("Elba", "Sardinien");
+ var Inseln_Griechenland = new Array ("Korfu", "Kreta", "Rhodos", "Samos");
+
+ function Vorauswahl(OberlisteID, UnterlisteID)
+ {
+ var Oberliste = document.getElementById(OberlisteID);
+ var Unterliste = document.getElementById(UnterlisteID);
+ var Auswahl = Oberliste.options[Oberliste.selectedIndex].text;
+ var Inseln = eval ("Inseln_" + Auswahl);
+
+ while (Unterliste.firstChild != null)
+ Unterliste.removeChild (Unterliste.firstChild);
+ for (i=0; i<Inseln.length; i++) {
+ var neuesElement = document.createElement ("option");
+ var neuerText = document.createTextNode (Inseln[i]);
+ neuesElement.appendChild (neuerText);
+ Unterliste.appendChild (neuesElement);
+ }
+ }
+
+
+
+// Mouseover-Effekte
+
+ function Mouseover (Schaltflaeche)
+ {
+ Schaltflaeche.className = "ButtonOver";
+ // Sonderfall, weil class ein reserviertes Wort ist
+ }
+ function Mouseout (Schaltflaeche)
+ {
+ Schaltflaeche.className = "ButtonNormal";
+ }
+ function Mousedown (Schaltflaeche)
+ {
+ Schaltflaeche.className = "ButtonDown";
+ }
+ var bgStyle = null;
+ var bgColor = null;
+ function Mouseup (Schaltflaeche)
+ {
+ if (Schaltflaeche.className=="ButtonDown") {
+ bgStyle = Schaltflaeche.parentNode.style;
+ if (bgColor==null) // gegen retriggern
+ bgColor = bgStyle.backgroundColor;
+ bgStyle.backgroundColor = "rgb(242,216,216)";
+ window.setTimeout("bgStyle.backgroundColor = bgColor;",500);
+ }
+ Mouseover (Schaltflaeche);
+ }
+
+
+
+// Überprüfung von Eingaben
+
+ function BuchstabenZiffernUmschaltung()
+ {
+ if (document.getElementsByName("Eingabetyp")[0].checked==true)
+ document.getElementById("FormBeschriftung").firstChild.nodeValue = "Buchstaben:";
+ else
+ document.getElementById("FormBeschriftung").firstChild.nodeValue = "Zahl:";
+ }
+ function isAlpha(Zeichen)
+ {
+ return (Zeichen>="a" && Zeichen<="z") || (Zeichen>="A" && Zeichen<="Z");
+ }
+ function OnAbschicken()
+ {
+ var Eingabe = document.getElementById("FormEingabe").value;
+ if (document.getElementsByName("Eingabetyp")[0].checked==true) {
+ // verlangt Buchstaben
+ for (i=0; i<Eingabe.length; i++)
+ if (!isAlpha(Eingabe.charAt(i))) {
+ alert ("Bitte geben Sie nur Buchstaben ein !");
+ return false; // nicht abschicken
+ }
+ }
+ else {
+ // verlangt Zahl
+ if (isNaN(parseInt(Eingabe))) {
+ alert ("Bitte geben Sie eine Zahl ein !");
+ return false; // nicht abschicken
+ }
+ else if (!isFinite(parseInt(Eingabe))) {
+ alert ("Diese Zahl ist außerhalb des möglichen Wertebereichs !");
+ return false; // nicht abschicken
+ }
+ }
+ return true; // abschicken
+ }
+
+
+
+ //-->
+ </script>
+</head>
+
+<body onload="Initialisierung();">
+<h1>Beispiele für ECMAScript und DOM</h1>
+
+<table border="1" cellspacing="0" cellpadding="3">
+<tr>
+
+
+
+ <td class="aussen">
+ <h3>
+
+Auf- und Zuklappen<br>von Unterpunkten
+
+ </h3>
+
+ <div>
+ <span class="PlusMinus" onclick="AufZuKlappen(this);">+</span> Fernweh
+ <ul class="Unterpunkte">
+ <li>in die Sonne</li>
+ <li>Winterfreuden</li>
+ <li>Kultur</li>
+ </ul>
+ </div>
+ <div>
+ <span class="PlusMinus" onclick="AufZuKlappen(this);">-</span> Kontakt
+ <ul class="Unterpunkte" style="display:block;">
+ <li>schreiben</li>
+ <li>mailen</li>
+ <li>Prospekte anfordern</li>
+ </ul>
+ </div>
+ <hr><img src="images/AufUndZuklappen.gif" alt="DOM-Teilbaum">
+ </td>
+</tr><tr>
+
+
+
+ <td class="aussen">
+ <h3>
+
+Auswahlhierarchie
+
+ </h3>
+ <form action="http://localhost/cgi-bin/echo.pl" method="POST">
+ <table border="0">
+ <tr>
+ <td class="Beschriftung">Wählen Sie erst das Land...<br>
+ <select name="Land" size="3" id="Landwahl"
+ onchange="Vorauswahl('Landwahl', 'Inselwahl');">
+ <option selected>Spanien</option>
+ <option>Italien</option>
+ <option>Griechenland</option>
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <td class="Beschriftung">...und dann die Insel:<br>
+ <select name="Insel" id="Inselwahl" size="4" style="width:100%">
+ <option>&nbsp;</option>
+ </select>
+ </td>
+ </tr>
+ </table>
+ </form>
+ <hr><img src="images/Auswahlhierarchie.gif" alt="DOM-Teilbaum">
+ </td>
+</tr><tr>
+
+
+
+ <td class="aussen">
+ <h3>
+
+Mouseover-Effekte
+
+ </h3>
+ <div class="ButtonNormal" onmouseover="Mouseover(this);" onmouseout="Mouseout(this);"
+ onmousedown="Mousedown(this);" onmouseup="Mouseup(this);">
+ Suchen
+ </div>
+ <div class="ButtonNormal" onmouseover="Mouseover(this);" onmouseout="Mouseout(this);"
+ onmousedown="Mousedown(this);" onmouseup="Mouseup(this);">
+ Buchen
+ </div>
+ <div class="ButtonNormal" onmouseover="Mouseover(this);" onmouseout="Mouseout(this);"
+ onmousedown="Mousedown(this);" onmouseup="Mouseup(this);">
+ Kontakt
+ </div>
+ <hr><img src="images/Mouseover.gif" alt="DOM-Teilbaum">
+ </td>
+</tr><tr>
+
+
+
+ <td class="aussen">
+ <h3>
+
+Überprüfung von Eingaben
+
+ </h3>
+ <form action="http://localhost/cgi-bin/echo.pl" method="POST" target="_new"
+ onsubmit="return OnAbschicken();" onreset="BuchstabenZiffernUmschaltung();">
+ <table border="0">
+ <tr>
+ <td id="Tab2Spalte1">nur Buchstaben</td>
+ <td>
+ <input type="radio" name="Eingabetyp" value="Buchstaben" checked
+ onclick="BuchstabenZiffernUmschaltung();">
+ </td>
+ </tr>
+ <tr>
+ <td>nur Zahlen</td>
+ <td>
+ <input type="radio" name="Eingabetyp" value="Ziffern"
+ onclick="BuchstabenZiffernUmschaltung();">
+ </td>
+ </tr>
+ <tr>
+ <td id="FormBeschriftung">???:</td>
+ <td><input type="text" class="volleBreite" size="27"
+ name="Eingabe" id="FormEingabe" value="">
+ </td>
+ </tr>
+ <tr>
+ <td></td>
+ <td>
+ <input type="submit" class="halbeBreite" name="B1" value="Abschicken">
+ </td>
+ </tr>
+ </table>
+ </form>
+ <hr><img src="images/Ueberpruefung.gif" alt="DOM-Teilbaum">
+ </td>
+</tr>
+</table>
+</body>
+</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-17 16:38:42 +0000