Rechnen mit Javascript

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • hmmm, dazu noch eine kleine Albernheit am Sonntag morgen gefällig?

    ... schon damit der Thread nicht zu kurz wird,
    verbinden wir doch mal das "Javascript-Rechnen" mit dem "Javascript 1mal1"

    Quelltext kopieren, als html abspeichern, angucken ...
    und sich zu weiteren eigenen Schandtaten inspiriert fühlen. ;)

    (ja, ich hab manchmal solche Anfälle...)

    HTML-Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. "http://www.w3.org/TR/html4/strict.dtd">
    3. <html>
    4. <head>
    5. <title>1mal1</title>
    6. <style type='text/css'>
    7. h1{
    8. margin: 1.5em;
    9. text-align: center;
    10. }
    11. table{
    12. border-collapse: collapse;
    13. margin-left: auto;
    14. margin-right: auto;
    15. width: 50%;
    16. border: 3px double gray;
    17. }
    18. td{
    19. padding: 10px;
    20. text-align: center;
    21. }
    22. .h_mark{
    23. background: #fea;
    24. }
    25. .v_mark{
    26. background: #bef;
    27. }
    28. .z_mark{
    29. background: #bbdeaa;
    30. }
    31. div{
    32. text-align: center;
    33. }
    34. </style>
    35. <script type='text/javascript'>
    36. var tds=document.getElementsByTagName('td');
    38. if (navigator.appName.indexOf("Explorer") != -1){
    39. var c='className';
    40. }else{
    41. var c='class';
    42. }
    44. function mark(i,j){
    45. document.getElementById('rechne').innerHTML=i+'*'+j+'='+i*j;
    46. for(x=0;x<10;x++){
    47. tds[j-1+x*10].setAttribute(c,'v_mark');
    48. tds[(i-1)*10+x].setAttribute(c,'h_mark');
    49. }
    50. tds[j-1+10*(i-1)].setAttribute(c,'z_mark');
    51. }
    52. function unmark(){
    53. for(x=0;x<100;x++){
    54. tds[x].removeAttribute(c);
    55. }
    56. }
    57. </script>
    58. </head>
    59. <body>
    60. <h1>Das kleine EinMalEins</h1>
    61. <div id='rechne'>Die Maus bitte &uuml;ber die Zahlen bewegen...</div>
    62. <script type='text/javascript'>
    63. document.write("<table>");
    64. for(i = 1; i <= 10; i++) {
    65. document.write ("<tr>");
    66. for(j = 1; j <= 10; j++) {
    67. document.write('<td onmouseover="mark('+i+','+j+')" '+
    68. 'onmouseout="unmark()">'+i*j+'</td>');
    69. }
    70. document.write("</tr>");
    71. }
    72. document.write("</table>");
    73. </script>
    74. </body>
    75. </html>
    Alles anzeigen

    ...und so sieht's aus:
    (bewegliches "Fadenkreuz" + jeweils aktuelle Berechnung nochmals oberhalb)
    Bilder

    • 1mal1.jpg

      27,12 kB, 471×434, 1.974 mal angesehen
    Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Jeder glaubt, er hätte genug davon.
    --------------------------------------------------(Rene Descartes)

  • aso, ja, du mußt zwischen den Datentypen unterscheiden.
    "4" ist nicht das Gleiche, wie 4
    wenn Du 4+4 ausgeben läßt, erhältst Du 8
    aber wenn Du "4"+"4" eintippst, erhältst Du 44
    und wenn Du "4+4" angibst, erhältst Du 4+4

    Probier mal: document.write("3+4="+(3+4));

    [EDIT]
    und es lief >garnicht<, weil Du nen Zeilenumbruch in die Ausgabe reingehauen hast.
    Das macht javascript nicht an jeder Stelle mit.
    Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Jeder glaubt, er hätte genug davon.
    --------------------------------------------------(Rene Descartes)

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von McSush ()

  • Vergleich mal:
    Falsch:
    document.write("<b>Die Summe von 3 und 4 ist gleich;</b>34<br><i>Es geht auch so</i> 3+4= (3+4)");
    Richtig:
    document.write("<b>Die Summe von 3 und 4 ist gleich;</b>"+(3+4)+"<br><i>Es geht auch so</i> 3+4= "+(3+4));
    Nichts auf der Welt ist so gerecht verteilt wie der Verstand. Jeder glaubt, er hätte genug davon.
    --------------------------------------------------(Rene Descartes)