Webmaster & Internet
Dieser Code ist eine vollständige Website (HTML 4.1 Transitional und CSS level 2.1 valide) und dient dazu aus der Höhe und Breite eines rechtwinkligen Vierecks die Diagonale zu berechnen.
Für einen Codeschnippsel ist es also eigentlich zu viel.
Per Kommentarzeilen im Code habe ich die wesentlichen Dinge beschrieben, weshalb ich mir hier auch weitere Erklärungen erspare.
Der Code bzw. die Website ist also eher als "Service von mir für euch" anzusehen.
Die Eingabe ist auf 4 Zeichen begrenzt.
Es können für die Höhe und Breite also alle Werte von 0,01 bis 9999 angegeben werden.
Somit ergibt sich eine minimale Diagonale von 0,01 und eine maximale Diagonale von 14140,72.
Sollte also mehr als genug sein.
Da ich eigentlich nichts mit JavaScript zu tun habe, habe ich größtenteils Google und SelfHTML zu Rate ziehen müßen.
Aber auch das Forum hat mir geholfen, wenn ich nicht mehr weiter wußte (mein Dank geht hier besonders an Maik, Sven und Quaese).
Wie alles begann:
Dazu gibt es eine Vorgeschichte.
Mein alter Fernseher (Röhrengerät im 4:3 Format, Baujahr 1990 oder 1991) hat 2008 breits angekündigt den Geist aufzugeben (Bildverzerrung im linken Bildviertel und Grünstich beim einschalten).
Die Bildverzerrung viel nicht weiter auf, ausser im Teletext.
Der Grünstich verschwand, nach dem das Gerät warmgelaufen war.
Aber 2009 war es dann eines Abends so weit..... ein dumpfer Knall gefolgt von knistern und nichts ging mehr.
Heutige Fernseher haben fast nur noch ein 16:9 Bildformat.
Da stellte sich mir natürlich die Frage: "Welche Bildschirmdiagonale benötige ich um mindestens auf die gewohnte Bildhöhe zu kommen?".
Klar, ich hätte mir auch einen Zollstock (Gliedermaßstab) schnappen können und einfach mal die Bildhöhe meines alten Fernsehers mit den Bildhöhen div. Neugeräte im Elektonikfachhandel vergleichen können.
Aber hey, wir leben im Computerzeitalter.
Also hatte ich mir bereits 2008 ein Script in PHP geschrieben welches mir aus der Bildhöhe und dem Bildformat die notwendige Bildschirmdiagonale errechnet.
Warum dieses JavaScript?
Mittlerweile nutze ich das PHP-Script in abgeänderter Form (anstatt dem Bildformat und der Bildhöhe muss nun die Bildbreite und Bildhöhe eingegeben werden) um es z.B. für die Bildbearbeitung zu nutzen.
Nun aber habe ich mir gedacht dass andere Leute das Script als nützliches Helferlein gebrauchen könnten.
Damit diese es aber auch offline nutzen können und auch nicht erst einen lokalen Webserver einrichten müssen, habe ich nun eine Variante erstellt die JavaScript nutzt.
Der Vorteil an dieser Variante liegt also darin dass jeder, der einen JavaScript-fähigen Web-Browser hat, dieses Script ohne irgendwelche Server- und/oder Websitekenntnisse nutzen kann.
Welche Web-Browser werden unterstützt?
Nun, da es mir natürlich nicht möglich ist sämtliche Web-Browser zu testen und dabei auch noch die verschiedenen Betriebssysteme zu berücksichtigen, muss ich einfach mal den Angaben von SelfHTML vertrauen.
Dabei habe ich jedoch nur JavaScript berücksichtig.
Da ich aber nur einfachsten HTML-/CSS-Code verwendet habe, sollte es auch hierbei mit den genannten Browserversionen keine Probleme geben.
Microsoft Internet Explorer ab 5.5 (xx.07.2000)
Opera ab 7.0 (28.01.2003)
Mozialla Firefox ab 1.0 (09.11.2004)
Konqueror ab 3.3 (19.08.2004)
Safari ab 1.3 (Safari 1.2: 04.02.2004/Safari 1.3.1: 29.08.2005)
Apple nennt kein Erscheinungsdatum für Safari 1.3, aber das Erscheinungsdatum von Safari 1.2 und Safari 1.3.1 läßt vermuten daß Safari 1.3 irgendwann im 1. Halbjahr 2005 erschienen ist.
Da der Support für Netscape vor rund 2 Jahren eingestellt wurde, habe ich diesen nicht mehr berücksichtigt.
Weiterführende Links:
Satz des Pythagoras bei Wikipedia.
JavaScript/DOM bei SelfHTML.
HTML/XHTML bei SelfHTML.
Stylesheets (CSS) bei SelfHTML.
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-15"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="Thu, 01 Jan 1970 01:00:00 GMT"> <title>Diagonale berechnen</title> <style type="text/css"> <!-- /* Einwenig CSS um die Seite in den verschiedenen Browsern halbwegs gleichmäßig aussehen zu lassen. ;-) */ body, form, table, input, select { font-family: arial, verdana, sans-serif; font-size: 11pt; } table, td, tr { border: 0px solid #000000; margin: 0px; padding: 1px 0px 1px 0px; border-collapse: collapse; } .buttonstyle { width: 200px; } .JSwarning { color: #ff0000; font-size: 24pt; } --> </style> <script type="text/javascript"> /* Eine Funktion wird erstellt, an welche die Breite und die Höhe aus dem Formular übergeben werden. In der Funktion geben wir den Formulardaten einen Namen. */ function CheckInput(InputHeight, InputWidth) { /* Scriptsprachen "sprechen" Englisch und benötigen daher ein Punkt als Dezimaltrennzeichen, als Deutsche sind wir es aber gewohnt ein Komma zu schreiben/tippen. Darum wird zuerst mit replace() in den übergebenen Werten nach Kommata gesucht und ggf. gegen Punkte ersetzt sowie Variablennamen (var) vergeben. Normalerweise müßten die Dezimalzeichen noch gezählt werden. Da isNaN() aber nur EIN Dezimaltrennzeichen akzeptiert, wird bei mehr als einem Punkt und/oder einem Komma ohnehin die Fehlermeldung (siehe ErrorMessage) ausgegeben. isNaN() akzeptiert auch kein Tausendertrennzeichen (weder als Punkt, noch als Komma). */ var ReplacedDecimalSeparatorHeight = InputHeight.replace(/,/g, "."); var ReplacedDecimalSeparatorWidth = InputWidth.replace(/,/g, "."); /* Mit isNaN() (is not a Number) wird nun geprüft ob die eingegebenen Werte KEINE Zahlen sind. Wenn die Überprüfung "false" ergibt, dann sind es (gültige) Zahlen. */ if( (isNaN(ReplacedDecimalSeparatorHeight) == false) && (isNaN(ReplacedDecimalSeparatorWidth) == false) ) { // Es wird geprüft ob beide Werte nicht leer sind. if( (ReplacedDecimalSeparatorHeight != "") && (ReplacedDecimalSeparatorWidth != "") ) { /* Mit sqrt() wird die Quadratwurzel gezogen. Aber aus was? Na, aus "c" natürlich..... a-Quadrat plus b-Quadrat gleich c-Quadrat (Pythagoras läßt grüßen). ;-) Das Ergebnis wird mit toFixed() noch auf Zwei Dezimalstellen kaufmännisch gerundet und in einer Variable gespeichert. */ var Result = Math.sqrt( (ReplacedDecimalSeparatorHeight * ReplacedDecimalSeparatorHeight) + (ReplacedDecimalSeparatorWidth * ReplacedDecimalSeparatorWidth) ).toFixed(2); /* Da wir mit der Berechnung fertig sind und wir das Ergebnis in der deutschen Schreibweise haben möchten, ändern wir das Dezimaltrennzeichen wieder in ein Komma um und speichern das Ergebnis in einer neuen Variable. Der Punkt ist für die regulären Ausdrücke ein Platzhalter und muß daher hier nun mit einem Backslash maskiert werden. */ var ReplacedDecimalSeparatorOutput = Result.replace(/\./g, ","); // Hiermit wird der vorbereitete Text per CSS (display:block) unter dem Formular eingeblendet. document.getElementById("TextField").style.display = "block"; // Hiermit wird das Ergebnis in den vorbereiteten Text eingefügt. document.getElementById("InlineText").innerHTML = ReplacedDecimalSeparatorOutput; } // Liebes Script, mache ab hier bitte nicht weiter. ;-) return false; // Wenn isNaN() "true" ergibt..... } else { // .....dann wird eine Variable für die Fehlermeldung(en) vorbereitet und eine Überschrift definiert. var ErrorMessage = "Fehler bei der Eingabe!\n\n"; // Ist die Breite "not a Number"? if( isNaN(InputWidth) ) { /* Dann füge den Fehler zur zuvor erstellten Variable hinzu (+=). unescape() wandelt die Hexadezimalen Zeichen in ASCI Zeichen um ("%20" --> Leerzeichen, "%FC" --> ü). Mit "\n" wird ein Zeilenumbruch erwirkt. Anstatt der vielen Leerzeichen hätte ich auch Tabstops ("\t") verwenden können, dieses hat mir jedoch optisch nicht gefallen. */ ErrorMessage += unescape("Bildbreite:\n%20%20%20%20%20%20Der eingegebene Wert \"" + InputWidth + "\" ist keine g%FCltige Zahl!\n\n"); } // Ist die Höhe "not a Number"? if( isNaN(InputHeight) ) { //Das gleiche wie zuvor bei der Breite. ;-) ErrorMessage += unescape("Bildh%F6he:\n%20%20%20%20%20%20Der eingegebene Wert \"" + InputHeight + "\" ist keine g%FCltige Zahl!\n\n"); } // Zeige ein Hinweisfenster mit den zuvor erstellten Fehlermeldungen an. alert(ErrorMessage); // Liebes Script, mache ab hier bitte nicht weiter. ;-) return false; } } /* Hier wird eine Funktion erstellt die die Maßeinheit aus dem Formular entgegen nimmt und selbige in den vorbereiteten Text einfügt. Dieses hat keinerlei Auswirkung auf die Berechnung, sondern dient lediglich der Optik. ;-) */ function SelectMeasure(ValueMeasure) { document.getElementById("Measure").innerHTML = ValueMeasure; } // Hier wird eine Funktion erstellt die dann reagiert, wenn der "Formular zurücksetzen"-Button gedrückt wird. function ResetForm() { /* Es wird eine Variable angelegt. unescape() wandelt die hexadezimalen Zeichen in ASCI Zeichen um ("%20" --> Leerzeichen, "%FC" --> ü). confirm() zeigt ein Hinweisfenster mit einer Sicherheitsfrage an. Außerdem gibt confirm() zurück ob auf OK (true) oder auf Abbrechen (false) geklickt wurde. */ var Warning = confirm( unescape("Soll das Formular wirklich zur%FCckgesetzt werden?") ); // Wenn confirm() "true" zurück gibt..... if(Warning == true) { // .....dann lade die Seite neu. location.reload(true); } } /* Tests haben gezeigt daß die Seite immer wieder aus dem Browser-Chache geholt wurde und somit auch die zuletzt getätigten Eingaben angezeigt wurden. Daher diese Funktion, die beim Seitenaufruf ausgeführt wird..... */ window.onload = function() { // .....und das Formular auf die Default-Werte zurück setzt. document.Calculator.reset(); } </script> Diese Seite dient dazu die Diagonale eines rechtwinkligen Vierecks zu berechnen.<br> Um das Ergebnis in Zoll umzurechnen (z.B. für die Diagonale von Bildschirmen) muß dieses, in Zentimeter angegeben, durch 2,54 geteilt werden (1" = 2,54cm).<br> <br> <form name="Calculator" action="http://www.tutorials.de/"> <table> <!-- Eingabefelder für die Breite und die Höhe. onfocus() bewirkt beim reinklicken in die Formularfelder, daß deren vorgegebener/eingegebener Wert (value) im jeweiligen Formularfeld (this) gelöscht wird (=''). --> <tr><td>Höhe:*</td><td><input type="text" name="Height" value="24.0" size="2" maxlength="4" onfocus="this.value='';"></td></tr> <tr><td>Breite:*</td><td><input type="text" name="Width" value="36.0" size="2" maxlength="4" onfocus="this.value='';"></td></tr> <!-- Auswahlmenü für die Maßeinheit. Bei Auswahl (onchange) wird der gewählte (SelectedIndex) Wert (value) aus den <option>-Elementen (options) an die Funktion SelectMeasure() übergeben und, wie weiter oben beschrieben, verarbeitet. --> <tr><td>Maßeinheit:**</td><td><select size="1" onchange="SelectMeasure(options[selectedIndex].value)"> <option value="" selected="selected"></option> <option value="mm">mm</option> <option value="cm">cm</option> </select> (optionale Auswahl, hat keinen Einfluß auf die Berechnung)</td></tr> <!-- Der Button zur Berechnung der Diagonale. Beim anklicken (onclick) werden die Werte (value) aus diesem Formular (this.form) aus den Eingabefeldern für die Höhe/Breite (Height/Width) an die Funktion CheckInput() übergeben und, wie weiter oben beschrieben, verarbeitet. --> <tr><td>*</td><td><input class="buttonstyle" type="button" value="Bilddiagonale berechnen" onclick="CheckInput(this.form.Height.value, this.form.Width.value)"></td></tr> <!-- Der Button zum zurücksetzen des Formulars. Beim anklicken (onclick) wird die Funktion ResetForm() aufgerufen und, wie weiter oben beschrieben, ausgeführt. --> <tr><td>*</td><td><input class="buttonstyle" type="button" value="Formular zurücksetzen" onclick="ResetForm()"></td></tr> </table> </form> <!-- Das vorbereitete Textfeld in dem die Ausgabe erfolgt. Bei InlineText wird der errechnete Wert und bei Measure die gewählte Maßeinheit eingefügt. --> <p id="TextField" style="display:none;">Die Diagonale beträgt <b><span id="InlineText"></span><span id="Measure"></span></b>*(auf 2 Dezimalstellen kaufmännisch gerundet).</p> <!-- Falls JavaScript deaktiviert ist, wird dieser Abschnitt angezeigt. --> <noscript> <br><b class="JSwarning">JavaScript muß aktiviert sein!</b> </noscript> <div class="footer_morecopyright" style="margin-top: 0px;color:#FFFFFF;">Page Time: <b>0,18122</b> seconds *****Memory: <b>11,569</b> KB *****Queries: <b>96</b> *****Templates: <b>55</b> (<b>34</b> uncached)<br />Server Uptime: <b>21 days 5 hours 31 mins</b> *****Server Load: <b>0.91</b> : 1.17 : 1.24<br /><table cellspacing="0" cellpadding="0" border="0" style="margin-left: auto; margin-right: auto;"><tr><td style="color: #cccccc; text-align: left;"><b>ad_showthread_firstpost_sig</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>ad_showthread_firstpost_start</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>ad_thread_first_post_content</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>blog_postbit_blog_this_post</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_clientscript</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_jsoptions_font</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_jsoptions_size</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smilie</b></td><td style="padding-left: 10px;">(20)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smilie_category</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smilie_row</b></td><td style="padding-left: 10px;">(30)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_smiliebox</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_colors</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_fontname</b></td><td style="padding-left: 10px;">(42)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_fontsize</b></td><td style="padding-left: 10px;">(14)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>editor_toolbar_on</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>newpost_attachment</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>newpost_attachmentbit</b></td><td style="padding-left: 10px;">(4)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>newpost_disablesmiliesoption</b></td><td style="padding-left: 10px;">(2)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>postbit_ip</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>postbit_onlinestatus</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>postbit_reputation</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>postbit_wrapper</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>tagbit_wrapper</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_article_editor</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_comments_block</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_comments_detail</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_content_article_inline</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_content_edit_editbar</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_block</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_metadataeditor</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_page</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_edit_publisher</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_editor_toolbar_on</b></td><td style="padding-left: 10px;">(1)</td></tr><tr><td style="color: #cccccc; text-align: left;"><b>vbcms_postbit</b></td><td style="padding-left: 10px;">(1)</td></tr></table></div></body> </html>
Ganz vergessen, ich wollte ja noch einen Screenshot anhängen, damit ihr gleich sehen könnt wie die Website aussieht.
Zum vergrößern, einfach anklicken.
Und um euch die Arbeit mit Copy&Paste abzunehmen, habt ihr die Website hier auch noch als ZIP-Datei.
Bilddiagonale_berechnen.zip
Möglicherweise wird euch die ZIP-Datei beim entpacken als beschädigt gemeldet.
Dieses Problem ist in der Vergangenheit öfter bei ZIP-Dateien vorgekommen und ist bekannt (siehe z.B. hier).
Solltet ihr also Probleme haben, dann ladet die ZIP-Datei mit einem anderen Browser runter und/oder versucht sie mit einem anderen Packprogramm zu entpacken.
[/edit]
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
tutorials.de-Systemmitteilung