Seite 1 von 10 <!DOCTYPE HTML> <html> <head>

Transkript

1 HTML GUI 1 index.html <!DOCTYPE HTML> <html> <head> <meta charset = "UTF-8">  <meta name="author" content="christoph Bär Telefon "> <meta name="description" content="software für Spezialzwecke"> <meta name="keywords" content="programme für Spezialzwecke in Javascript. HTML und CSS"> <meta name="robots" content="all"> <meta name="robots" content="noarchive"> <link rel = "stylesheet" type = "text/css" href = "style_mischungsrechner.css"> <title> Mischungsrechner </title> </head> <body> <script src = "script_mischungsrechner.js"> </script> <noscript> <p>java-script läuft mit diesen Browsereinstellungen nicht.<br> Bitte lassen Sie die Ausführung von Java-Script zu!<br> Einstellung: "Geblockte Inhalte zulassen" wählen.</p> </noscript> <h1> Mischungsrechner zur Verdünnung von Säuren, Basen und anderen Lösungen </h1> <form name="f1"> <table> <tr> </tr> <tr> </tr> <tr> </tr> <td><input id = "ipt1" type = "Text" name = "z1" /></td> <td> <-- Ausgangskonzentration der Substanz A in %; z.b.salzsäure 35 % </td> <td><input id = "ipt2" type = "Text" name = "z2" /></td> <td> <-- Ausgangskonzentration der Substanz B in %; z.b. Salzsäure, Konzentration 15% </td> <td><input id = "ipt3" type = "Text" name = "z3" /></td> <td> <-- Zielkonzentration der Mischung in %; z.b. verdünnte Salzsäure 22% </td> Seite 1 von 10

2 <tr> </tr> </table> <td><input id = "ipt4" type = "Text" name = "z4" /></td> <td> <-- Zielmenge der Mischung [g, ml, l]; z.b g verdünnte Salzsäure 22% </td> <p> <q class="pull" cite="cédric Villani">Cédric Villani: Mathematics is about progress and adventure and emotion</q> </p> <br>nachkommastellen: <select id = "Auswahlliste1" name = "Nachkommastellen" onclick = " Genauigkeit_einstellen (); "> <option> 1 Nachkommastelle </option> <option> 2 Nachkommastellen </option> <option> 3 Nachkommastellen </option> <option> 4 Nachkommastellen </option> <option> 5 Nachkommastellen </option> <option> 6 Nachkommastellen </option> </select> <br><br> <input type = "button" value = " berechnen " onclick = " Start ()">... <input type = "button" value = "neu Laden" onclick = "laden ()"> </form> <h2>ergebnis der Operation</h2> <div id = "ausgabe1" > </div> <div id = "ausgabe2" > </div> <br>einheiten wie im Eingabefeld für die Zielmenge gewählt<br><br> <a href = "Anleitung_Mischungsrechner.html"> <img src = "Anleitung.jpg" height = "30" width = "110" alt = "Seite mit Anleitung" title = "Zur Anleitungsseite" border = "2" > </a> <hr>  </body> </html> <p> Erstellt am ; Christoph Bär, Bächliwis 12, CH-8184 Bachenbülach, Schweiz </p> <div id = "footer"> Für plattformübergreifenden Gebrauch programmiert in Javascript ( ECMAScript 5 Compliance), HTML5 und CSS3 -- Ver.01 </div> Seite 2 von 10

3 HTML GUI 2 Anleitung_Mischungsrechner.html <!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title> Anleitung Mischungsrechner </title> <link rel = "stylesheet" type = "text/css" href = "style_mischungsrechner.css"> </head> <body> <h1> Anleitung und Erläuterung zum Mischungsrechner </h1> <h2> Mathematische Grundlagen und Beispiele herunterladen; Wikipedia-Artikel einsehen </h2> <nav> <a href = "Erlaeuterung_Mischungsberechnung.pdf"> Download mathematische Grundlagen und Erläuterungen zur Mischungsberechnung </a> <br> <a href = "Source_Mischungsrechner.pdf"> Download Sourcecode des Mischungsrechners </a> <br> <a href = "Mischungskreuz.xlsx"> Download Excel-Berechnungsblatt des Mischungsrechners </a> <br> <a href = " Wikipedia; Beitrag zum Mischungskreuz </a> <br> <a href = "index.html"> Zurück zum Mischungsrechner </a> <br> </nav> <br> Beim Verdünnen von Säuren zu beachten: <strong><em>erst das Wasser, dann die Säure!</em></strong> Korrekte Wassermenge bereitstellen, langsam die abgemessene Säure hinzugiessen. <br><br> <li><img src = "Portrait.jpg" width = "196" height = "194" alt = "Bild des Produzenten" title = "Programmierer anrufen: "> Produzent </li> <br> <a href = "mailto: hcbaer@hotmail.com?subject=benutzerkommentar&body=besuch%20ihrer%20webseite"> an den Autor schreiben </a> <br> Funktioniert nur bei installiertem und richtig konfiguriertem Mail-Client!  <script src = "script.js"> </script> <noscript> <p>java-script läuft mit diesen Browsereinstellungen nicht.<br> Bitte lassen Sie die Ausführung von Java-Script zu!<br> Einstellung: "Geblockte Inhalte zulassen" wählen.</p> </noscript> <hr>  <p> Erstellt am ; Christoph Bär, Bächliwis 12, CH-8184 Bachenbülach, Schweiz </p> </body> </html> <div id = "footer"> Für plattformübergreifenden Gebrauch programmiert in Javascript ( ECMAScript 5 Compliance), HTML5 und CSS3 </div> Seite 3 von 10

4 Javascript-Programm script_mischungsrechner.js /* Mischungsrechner */ function Fehlerbehandlung (fehler, datei, zeile) alert ("Fehler: " + fehler + "\ndatei: " + datei + "\nzeile: " + zeile); document.write ("Mit diesen Browser-Einstellungen läuft Javascript einwandfrei.<\/br> "); /* Eingabekontrolle und Einlesen der eingegebenen Zahlenwerte */ window.onerror = Fehlerbehandlung; var e1 = new Error ("Fehler bei der Operation"); var e2 = new Error ("L E E R!"); var zahl1, zahl2, zahl3, zahl4, ergebnis1, ergebnis2; var nkst = 1; function Start () try if (document.f1.z1.value == "") throw e2; if (document.f1.z2.value == "") throw e2; if (document.f1.z3.value == "") throw e2; if (document.f1.z4.value == "") throw e2; // Werte einlesen zahl1 = parsefloat (document.f1.z1.value); zahl2 = parsefloat (document.f1.z2.value); zahl3 = parsefloat (document.f1.z3.value); zahl4 = parsefloat (document.f1.z4.value); Seite 4 von 10

5 // Mit den Werten eine Berechnung ausführen lassen und zurückgeben lassen ergebnis1 = Operation1 (zahl1, zahl2, zahl3, zahl4); ergebnis2 = Operation2 (zahl1, zahl2, zahl3, zahl4); if (isnan (ergebnis1)) throw e1; else document.getelementbyid("ausgabe1").innerhtml = ergebnis1; document.getelementbyid("ausgabe2").innerhtml = ergebnis2; catch (e1) document.f1.z1.focus(); document.getelementbyid("ausgabe1").innerhtml = e1.message; /* Auswahlliste "Nachkommastellen" auswerten */ function Genauigkeit_einstellen () var optmehrfach = document.getelementbyid ("Auswahlliste1").options; for (var i = 0; i < optmehrfach.length; i ++) if (optmehrfach [i].selected) switch (i) case 0: nkst = 1; break; case 1: nkst = 2; break; case 2: nkst = 3; break; case 3: nkst = 4; break; case 4: nkst = 5; break; case 5: nkst = 6; break; //alert (nkst); /* Rundungsfunktion */ function runde (x, n) if (n < 1 n > 14) return false; var e = Math.pow (10, n); var k = (Math.round (x * e) / e).tostring (); if (k.indexof ('.') == -1) k += '.'; k += e.tostring ().substring (1); Seite 5 von 10

6 return k.substring(0, k.indexof ('.') + n+1); /* Seite neu laden für Firefox zusätzlich Eingabefelder löschen */ function laden () document.getelementbyid ("ipt1").value = ""; document.getelementbyid ("ipt2").value = ""; document.getelementbyid ("ipt3").value = ""; document.getelementbyid ("ipt4").value = ""; window.location.reload(); /* Berechnungsteil */ function Operation1 () var erg1, AK1, AK2, ZK, ZM, TM1, TM2, f, VS1, VS2; AK1 = zahl1; AK2 = zahl2; ZK = zahl3; ZM = zahl4; TM1 = ZK - AK2; TM2 = AK1- ZK; f = ZM / (TM1 + TM2); VS1 = f * TM1; erg1 = VS1; erg1 = runde (erg1, nkst); return erg1; function Operation2 () var erg2, AK1, AK2, ZK, ZM, TM1, TM2, f, VS1, VS2; AK1 = zahl1; AK2 = zahl2; ZK = zahl3; Seite 6 von 10

7 ZM = zahl4; TM1 = ZK - AK2; TM2 = AK1- ZK; f = ZM / (TM1 + TM2); VS2 = f * TM2; erg2 = VS2; erg2 = runde (erg2, nkst); return erg2; /* , HCB */ /* Erklärung der Rundungsfunktion Wir übergeben der Funktion zwei Parameter: x ist der zu rundende Wert, n die Anzahl der gewünschten Nachkommastellen. Zunächst überprüfen wir n auf den sinnvollen Wertebereich 1..14: liegt n außerhalb, geben wir false zurück. Dann berechnen wir den Faktor e zu 10n (Zeile 3) - dies entspricht den in den beiden Beispielen oben. Die nun folgende Berechnung ist die gleiche wie in diesen beiden Beispielen - nur wandeln wir anschließend das Ergebnis in eine Zeichenkette um. War das Ergebnis ganzzahlig, fügen wir einen Dezimalpunkt an. Aus e können wir uns leicht eine Zeichenkette aus n Nullen erzeugen, diese hängen wir an unser bisheriges Ergebnis an. Alles das können wir zuletzt auf die gewünschte Länge, n Stellen hinter dem Dezimalpunkt, zuschneiden und zurückgeben. Quelle: */ Seite 7 von 10

8 CSS Stylesheet style_mischungsrechner.css /* CSS für Mischungsrechner */ h1 body p p.datum text-align:center; color: crimson; background-color: gold; padding: 10px; border: solid crimson 5px; border-radius: 10px 40px 0 30px; border-style: ridge; text-shadow: gray 2px 2px 6px; /*text-align: justify;*/ color: darkorange; background-color: seashell; font-size: 22px; font-family: Calibri; margin-left: 2.5cm; margin-right: 2.5cm; margin-top: 2cm; margin-bottom: 2cm; color: brown; text-decoration:underline; font-weight: lighter; font-size: 12px; color: darkmagenta; #ausgabe1, #ausgabe2 color: red; font-weight: bold; text-decoration: underline; letter-spacing: 0.1em; width: 5em; font-size: 1.1em; #footer Seite 8 von 10

9 font-size: 15px; color: green; background-color: yellow; text-align: center; border-style: solid; border-width: 2px; input /* Button "berechnen", "löschen" und Eingabefelder*/ font-size: 22px; font-family: Calibri; color: red; background: linen; padding: 6px; border: solid crimson 4px; border-radius: 2em; border-style: inset; #Auswahlliste1 font-size: 18px; height: 30px; /* Zitat */ q:lang(de):before content: "\00BB"; q:lang(de):after content: "\00AB";.pull width: 180px; margin: 0.3em; padding: 0.6em 1em; display: block; float: right; font-family: Georgia, serif; font-size:1.2em; text-align:center; background: #e0e0e0; line-height: 1.5; font-size: 1.2em; font-style: italic; border: 1px solid #aaa; transform: rotate3d(1, 1, 1, -8deg); a /* Interaktive Eigenschaften der Links */ color: darkorange; Seite 9 von 10

10 a:hover /* Cursor über einen Link führen */ background-color:lime; a:focus /* Gebrauchter Link wird vorübergehend grau */ color:lightgrey; /* Ergebnisse nebeneinander statt untereinander schreiben */ #ausgabe1,#ausgabe2 position: relative; float: left; white-space: nowrap; /* , HCB */ Seite 10 von 10