Lösungen zu den Javascript-Aufgaben von der Seite Highscore.de

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

  • Hey

    Grad nochmal zu deiner 9ten Aufgabe, da ist mir ein "Fehler" aufgefallen:
    In Zeile 8 legst du ein Array mit 92 Elementen an, fügst aber in Spalte 101 dass 93te ein (Achtung! Zero-Indexed!)
    In JavaScript ist das nicht soo ein Problem, da du beim anlegen des Arrays nicht sagen musst, wieviele Elemente es besitzen soll, aber bei anderen Sprachen (wie Java) wäre es das ;).

  • Hey SargTex.
    Danke, ich glaube das wäre mir in 100 Jahren nicht aufgefallen ;)

    So nun zu Aufgabe 12 + Lösung

    12. Überprüfen Sie die Eingabe des Anwenders auf einen gültigen Euro oder Dollar-Betrag. Die Eingabe ist dann gültig, wenn Sie mit mindestens einer Ziffer beginnt, gegebenenfalls genau zwei Nachkommastellen enthält, und dann durch mindestens ein Leerzeichen getrennt die Währungssymbole EUR oder $.

    Lösung:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. var input ;
    8. var expression = /^\d+\.\d{2}\s+\W{1}$/
    9. var result ;
    10. function Eingabe() {
    11. input = prompt("Bitte geben Sie ihren Geldbetrag ein, den sie abheben wollen! Erlaubte Währungen EUR( € ) und Dollar( $ )","");
    12. result = expression.test(input) ;
    13. if(result == true) {
    14. alert("Betrag wird ausgegeben");
    15. } else {
    16. alert("Ungültiger Betrag");
    17. }
    18. }
    19. </script>
    20. </head>
    21. <body onload="Eingabe()">
    22. </body>
    23. </html>
    Alles anzeigen

  • Guten Morgen an alle die wach sind :P
    Aufgabe 13 + Lösung kommt nun :

    Aufgabe 13. Erstellen Sie eine Webseite, die eine Grafik enthält. Bei Mausklick auf die Grafik soll eine entsprechende Meldung per alert() auf den Bildschirm ausgegeben werden.

    Lösung:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. function bild() {
    8. alert("Sie haben auf das Bild geklickt");
    9. }
    10. </script>
    11. </head>
    12. <body>
    13. <img src="Zivi.jpg" onclick="bild()" />
    14. </body>
    15. <html>
    Alles anzeigen


    Gruß Daniel

  • Aufgabe 14 + Lösung

    Aufgabe 14. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 13 dahingehend, dass die Meldung nicht bei Mausklick ausgegeben wird, sondern beim Überfahren der Grafik mit der Maus. Außerdem soll die Meldung nicht per alert() auf den Bildschirm ausgegeben werden, sondern in einem neuen Browserfenster mit document.write(). Geben Sie im ersten Parameter der Methode open() des Objekts window den String "about:blank" an, um ein neues Browserfenster ohne Webseite zu öffnen.

    Lösung:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. function bild() {
    8. window.open("about:blank");
    9. document.write("Sie sind mit der Maus auf dem Bild gewesen");
    10. }
    11. </script>
    12. </head>
    13. <body>
    14. <img src="Zivi.jpg" onmouseover="bild()" />
    15. </body>
    16. <html>
    Alles anzeigen

  • So Aufgabe 15. + Lösung. Ich glaubeich hab gerade einen Lauf ;D

    15. Schreiben Sie Ihr Javascript-Programm aus Aufgabe 13 derart um, dass beim Überfahren der Grafik mit der Maus ein anderes Bild angezeigt wird. Verläßt die Maus die Grafik, soll das ursprüngliche Bild wieder angezeigt werden.

    Lösung:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. function over() {
    8. document.bild1.src="Zivi.jpg" ;
    9. }
    10. function out() {
    11. document.bild1.src="Zivi2.jpg" ;
    12. }
    13. </script>
    14. </head>
    15. <body>
    16. <a href="#" onmouseover="over()" onmouseout="out()"><img src="Zivi2.jpg" name="bild1" /></a>
    17. </body>
    18. <html>
    Alles anzeigen

  • Aufgabe 16 + Lösung

    16. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 15 dahingehend, dass bei Mausklick ebenfalls eine andere Grafik eingeblendet wird.

    Lösung:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. function over() {
    8. document.bild1.src="Zivi.jpg" ;
    9. }
    10. function out() {
    11. document.bild1.src="Zivi2.jpg" ;
    12. }
    13. function anklicken() {
    14. document.bild1.src="Zivi3.jpg" ;
    15. }
    16. </script>
    17. </head>
    18. <body>
    19. <a href="#" onmouseover="over()" onmouseout="out()" onclick="anklicken()"><img src="Zivi2.jpg" name="bild1" /></a>
    20. </body>
    21. <html>
    Alles anzeigen


    Gruß Daniel

  • Moin Moin
    So hier Aufgabe 17 + Lösung. Ich denke, dass in dieser Aufgabe kein Javascript verlangt ist, wenn wohl verbessert mich. Denn die nachfolgenden Aufgaben greifen auf dieses Anfangsmuster zurück, wo dann JavaScript eingebetet werden soll.

    17. Erstellen Sie eine Webseite, die ein Eingabeformular für Vorname, Nachname, Email-Adresse und Kommentar enthält, das als Feedbackformular in Websites verwendet werden könnte. Das Kommentarfeld soll durch einen <textarea>-Tag dargestellt werden, die restlichen Felder durch <input>-Tags vom Typ text. Die Einträge für Vorname, Nachname und Email-Adresse dürfen maximal 40 Zeichen lang sein, der Kommentar maximal 250 Zeichen.

    Lösung.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. </head>
    7. <body>
    8. <form action="mailto:example@web.de" method="post">
    9. <p>Vorname:<br /><input name="Vorname" type="text" size="30" maxlength="40"></p>
    10. <p>Nachname:<br /><input name="Nachname" type="text" size="30" maxlength="40"></p>
    11. <p>Email-Adresse:<br /> <input name="Email" type="text" size"30" maxlength="40"></p>
    12. <p>Kommentar:<br /> <textarea name="Kommentar" type="text" cols="50" rows="10" maxlength="250"></textarea>
    13. <br />
    14. <table>
    15. <tr>
    16. <td>
    17. <input type="submit" name="button" value="Senden" />
    18. <input type="reset" name="Abbruch" value="Abbrechen" />
    19. </td>
    20. </tr>
    21. </table>
    22. </form>
    23. </body>
    24. <html>
    Alles anzeigen


    Gruß Daniel

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

  • Soo
    Nun kommt Aufgabe 18.
    Hier ist auch wieder JavaScript drin. Für die Email Überprüfung, wollte ich erst selber einen regulären Ausdruck machen, aber ich hab gemerkt, dass dies ein bisschen schwerer ist. Also hab ich den Ausdruck gegoogelt und dann COPY & PASTE, wie unser Herr zu Gutenberg, bloß das ich jetzt meine Quelle dazu angebe xP ( kleiner Spaß am Rande). Bei diesem Link ist sogar ne Erklärung dabei, aber auf Englisch ;D. Wer Lust hat kann sich das ja mal anschauen zparacha.com/validate-email-ad…cript-regular-expression/

    Aufgabe 18. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 17 dahingehend, dass beim Absenden des Formulars auf alle Eingaben geprüft werden muss.

    Lösung.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. function EingabePruefen() {
    8. if (document.Formular.Vorname.value == ""){
    9. alert("Bitte geben Sie einen Vornamen ein!");
    10. document.Formular.Vorname.focus();
    11. return false;
    12. }
    13. if (document.Formular.Nachname.value == "") {
    14. alert("Bitte geben Sie einen Vornamen ein!");
    15. document.Formular.Nachname.focus();
    16. return false;
    17. }
    18. var input
    19. var expression = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    20. var result ;
    21. input = document.Formular.Email.value
    22. result = expression.test(input)
    23. if ( result == false) {
    24. alert("Bitte geben Sie eine Email-Adresse ein!")
    25. document.Formular.Email.focus();
    26. return false;
    27. }
    28. if (document.Formular.Kommentar.value == "") {
    29. alert("Bitte geben Sie einen Kommentar ein!")
    30. document.Formular.Kommentar.focus();
    31. return false;
    32. }
    33. }
    34. </script>
    35. </head>
    36. <body>
    37. <form name="Formular" action="mailto:example@web.de" method="post" onsubmit="EingabePruefen()">
    38. <p>Vorname:<br /><input name="Vorname" type="text" size="30" maxlength="40"></p>
    39. <p>Nachname:<br /><input name="Nachname" type="text" size="30" maxlength="40"></p>
    40. <p>Email-Adresse:<br /> <input name="Email" type="text" size="30" maxlength="40"></p>
    41. <p>Kommentar:<br /> <textarea name="Kommentar" type="text" cols="50" rows="10" maxlength="250"></textarea>
    42. <br />
    43. <table>
    44. <tr>
    45. <td>
    46. <input type="submit" name="button" value="Senden" />
    47. <input type="reset" name="Abbruch" value="Abbrechen" />
    48. </td>
    49. </tr>
    50. </table>
    51. </form>
    52. </body>
    53. <html>
    Alles anzeigen

  • Guten Morgen :)
    Hier folgt nun Augabe 19 + Lösung. Dabei eine Anmerkung von mir. Ich hab 3 Funktionen gemacht, damit das Programm so läuft wie ich es haben will. Kann man das auch noch anders realisieren. Wenn ja, postet doch eure Vorschläge oder schreibt sie mir einfach. Eure Vorschläge würden mich nämlich sehr interessieren!

    Aufgabe 19. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 18 dahingehend, dass beim Absenden und beim Zurücksetzen des Formulars eine Sicherheitsfrage erscheint und der Anwender gefragt wird, ob er wirklich absenden oder zurücksetzen möchte.

    Lösung:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. function EingabePruefen() {
    8. if (document.Formular.Vorname.value == ""){
    9. alert("Bitte geben Sie einen Vornamen ein!");
    10. document.Formular.Vorname.focus();
    11. return false ;
    12. }
    13. if (document.Formular.Nachname.value == "") {
    14. alert("Bitte geben Sie einen Vornamen ein!");
    15. document.Formular.Nachname.focus();
    16. return false ;
    17. }
    18. var input
    19. var expression = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    20. var result ;
    21. input = document.Formular.Email.value
    22. result = expression.test(input)
    23. if ( result == false) {
    24. alert("Bitte geben Sie eine Email-Adresse ein!")
    25. document.Formular.Email.focus();
    26. return false ;
    27. }
    28. if (document.Formular.Kommentar.value == "") {
    29. alert("Bitte geben Sie einen Kommentar ein!")
    30. document.Formular.Kommentar.focus();
    31. return false ;
    32. }
    33. }
    34. function bestaetigung() {
    35. Check = confirm("Möchten Sie wirklich Ihre Daten senden?");
    36. if (Check == false) {
    37. return false ;
    38. } else {
    39. return true ;
    40. }
    41. }
    42. function bestaetigung2() {
    43. Check = confirm("Möchtens Sie ihre Eingaben wirklich löschen?");
    44. if (Check == false) {
    45. return false ;
    46. } else {
    47. return true ;
    48. }
    49. }
    50. </script>
    51. </head>
    52. <body>
    53. <form name="Formular" action="mailto:daniel.lienemann@web.de" method="post" onsubmit=" return EingabePruefen()">
    54. <p>Vorname:<br /><input name="Vorname" type="text" size="30" maxlength="40"></p>
    55. <p>Nachname:<br /><input name="Nachname" type="text" size="30" maxlength="40"></p>
    56. <p>Email-Adresse:<br /> <input name="Email" type="text" size="30" maxlength="40"></p>
    57. <p>Kommentar:<br /> <textarea name="Kommentar" type="text" cols="50" rows="10" maxlength="250"></textarea>
    58. <br />
    59. <table>
    60. <tr>
    61. <td>
    62. <input type="submit" name="Versand" value="Senden" onclick=" return bestaetigung()" />
    63. <input type="reset" name="Abbruch" value="Abbrechen" onclick=" return bestaetigung2()" />
    64. </td>
    65. </tr>
    66. </table>
    67. </form>
    68. </body>
    69. <html>
    Alles anzeigen


    Gruß Daniel

  • Hallo Daniel!

    Hmm also erstmal ein Lob hab länger nicht mehr reingeschaut... und sehe nun das du anscheinden meine ratschläge befolgst und die Regulären Ausdrücke nun auch schon sehr gut beherscht!
    Zu deiner lösung für aufgabe 19 die ist echt ok so also finde jetzt nichts dran was besser zu machen wäre bis auf einen kleinen schreibfehler bzw einen copy paste fehler :)

    Quellcode

    1. if (document.Formular.Nachname.value == "") {
    2. alert("Bitte geben Sie einen Vornamen ein!");
    3. document.Formular.Nachname.focus();
    4. return false ;


    du hast keinen Nachnamen eingegeben aber er mekert dich an das du doch bitte einen Vornamen eingeben solltst der schon lange drin steht :)

    joa zu deiner frage ob man das anders lösen kann mit weniger funktionen .... hmm also mir persöhnlich fällt jetzt auf die schnelle nichts ein !
    aber beim programmieren gillt grundsätzlich viele wege führen nach rom.... will heißen irgendwer wird sicher eine kürzere form findet oder villeicht auch eine längere aber solang es funktioniert und du nicht gezwungen bist auf Laufzeit zu achten ist es wurscht ob du nun 2 funktionen oder 3 funktionen benutzt

    in diesem sinne immer weiter so !

  • Hallo old-pirat
    Ich danke für dein Lob, aber ich geb ja auch 200% um alles so gut wie möglich zu machen. Dauz muss ich erwähnen, dass mir Firebug enorm hilft bei meinen Problemen :P Ja und danke für den Hinweis, das hab ich so überlese :P
    Nun zu Aufgabe 20
    Hab da eine ganze Weile zu gebraucht, weil ich nicht so genau wusste, wie ich das umsetzen solle, aber ich denke es ist mir gelungen, eine recht pasable Lösung zu posten. Denn ich hab die Fragestellung so interpretiert, wie ich es meinte. Ich beschreibe jetzt nochmal was ich hinzugefügt habe. Also 1. hab ich eine Grafik eingefügt die "hidden" wird wenn man die jeweiligen Felder ausfüllt, aber die auch wieder sichtbar wird wenn man alles wieder löscht. Dies soll eine Hilfe für den jeweiligen Benutzer sein, der dann durch die grafische Einblendung sieht, wo er noch nichts ausgefüllt hat. 2. Hab ich noch eine Grafik eingefügt, die erst eingeblendet wird, wenn alle Felder ausgefüllt sind und den Benutzer darauf hinweist, dass er jetzt das Formular absenden kann.

    Soviel dazu. Ihr könnt euch ja meinen Code angucken und schauen ob das wohl gut gelöst ist. Jedenfalls funktioniert es einwandfrei :)

    Aufgabe 20. Erweitern Sie Ihr Javascript-Programm aus Aufgabe 19 dahingehend, dass eine Grafik eingeblendet wird, die jeweils anzeigt, ob das Formular mit den momentanen Angaben abgesendet werden kann oder nicht. Sind die erforderlichen Eingaben vom Anwender vorgenommen worden, soll ihm durch eine andere Grafik gezeigt werden, dass er das Formular jetzt absenden könnte.

    Lösung.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Testseite</title>
    6. <script type="text/javascript">
    7. function Grafik() {
    8. if (document.Formular.Vorname.value == "" ) {
    9. document.getElementsByName("Bild")[0].style.visibility = "visible";
    10. } else {
    11. document.getElementsByName("Bild")[0].style.visibility = "hidden";
    12. }
    13. if (document.Formular.Nachname.value == "") {
    14. document.getElementsByName("Bild")[1].style.visibility = "visible";
    15. } else {
    16. document.getElementsByName("Bild")[1].style.visibility = "hidden";
    17. }
    18. if (document.Formular.Email.value == "") {
    19. document.getElementsByName("Bild")[2].style.visibility = "visible";
    20. } else {
    21. document.getElementsByName("Bild")[2].style.visibility = "hidden";
    22. }
    23. if (document.Formular.Kommentar.value == "") {
    24. document.getElementsByName("Bild")[3].style.visibility = "visible";
    25. } else {
    26. document.getElementsByName("Bild")[3].style.visibility = "hidden";
    27. }
    28. }
    29. function SendenOn() {
    30. if (document.Formular.Kommentar.value == "") {
    31. document.getElementById("Senden").style.visibility = "hidden";
    32. } else {
    33. document.getElementById("Senden").style.visibility = "visible";
    34. }
    35. }
    36. function EingabePruefen() {
    37. if (document.Formular.Vorname.value == ""){
    38. alert("Bitte geben Sie einen Vornamen ein!");
    39. document.Formular.Vorname.focus();
    40. return false ;
    41. }
    42. if (document.Formular.Nachname.value == "") {
    43. alert("Bitte geben Sie einen Nachnamen ein!");
    44. document.Formular.Nachname.focus();
    45. return false ;
    46. }
    47. var input
    48. var expression = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    49. var result ;
    50. input = document.Formular.Email.value
    51. result = expression.test(input)
    52. if ( result == false) {
    53. alert("Bitte geben Sie eine Email-Adresse ein!")
    54. document.Formular.Email.focus();
    55. return false ;
    56. }
    57. if (document.Formular.Kommentar.value == "") {
    58. alert("Bitte geben Sie einen Kommentar ein!")
    59. document.Formular.Kommentar.focus();
    60. return false ;
    61. }
    62. }
    63. function bestaetigung() {
    64. Check = confirm("Möchten Sie wirklich Ihre Daten senden?");
    65. if (Check == false) {
    66. return false ;
    67. } else {
    68. return true ;
    69. }
    70. }
    71. function bestaetigung2() {
    72. Check = confirm("Möchtens Sie ihre Eingaben wirklich löschen?");
    73. if (Check == false) {
    74. return false ;
    75. } else {
    76. return true ;
    77. }
    78. }
    79. </script>
    80. </head>
    81. <body>
    82. <form name="Formular" action="mailto:daniel.lienemann@web.de" method="post" onsubmit="return EingabePruefen()">
    83. <p>Vorname:<br /><input name="Vorname" type="text" size="30" maxlength="40" onkeydown="return Grafik()"><img src="KeineAngabe.jpg" name="Bild" hspace="10"></img></p>
    84. <p>Nachname:<br /><input name="Nachname" type="text" size="30" maxlength="40" onkeydown="Grafik()"><img src="KeineAngabe.jpg" name="Bild" hspace="10"></img></p>
    85. <p>Email-Adresse:<br /> <input name="Email" type="text" size="30" maxlength="40" onkeydown="Grafik()"><img src="KeineAngabe.jpg" name="Bild" hspace="10"></img></p>
    86. <p>Kommentar:<br /> <textarea name="Kommentar" type="text" cols="50" rows="10" maxlength="250" onkeydown="Grafik()" onkeyup="SendenOn()"></textarea><img src="KeineAngabe.jpg" name="Bild" hspace="10" vspace="70"></img>
    87. <br />
    88. <table>
    89. <tr>
    90. <td>
    91. <input type="submit" name="Versand" value="Senden" onclick="return bestaetigung()" />
    92. </td>
    93. <td>
    94. <img id="Senden" src="!Senden.jpg" style="visibility:hidden;"></img>
    95. </td>
    96. <td>
    97. <input type="reset" name="Abbruch" value="Zurücksetzen" onclick="return bestaetigung2()" />
    98. </td>
    99. </tr>
    100. </table>
    101. </form>
    102. </body>
    103. <html>
    Alles anzeigen


    Gruß Daniel

  • Huhu old_pirat

    Ja die "Bilder" hab ich selbst gemacht und sind nur kleiner Text. Das erste ist ein Bild wo steht, dass das Eingabefeld noch leer ist. Dieses Bild verschwindet aber wenn man was reinschreibt und taucht auch wieder auf wenn man alles löscht.
    Das 2 Bild ist halt auch ein kleiner Text, welches einem einen Hinweis gibt, wenn alle Felder ausgefüllt sind, dass der Benutzer nun auf "Senden" klciken kann.
    So ich mach dann mal Feierabend. :)

    Gruß Daniel

  • Guten Morgen,
    So ich scheiter gerade an der Aufgabenstellung und hoffe auf hilfreiche Hinweise. Hier erstmal die Aufgabenstellung:

    21. Erstellen Sie eine Webseite, die lediglich eine Schaltfläche besitzt, über die sich bei Mausklick ein neues Browser-Fenster öffnet. Im neuen Fenster sollen zwei Frames aufgebaut werden, wobei jeder Frame eine andere Hintergrundfarbe besitzen soll. Die gesamte Anwendung darf nur aus einer einzigen Webseite bestehen - nämlich der, in dem sich die Schaltfläche befindet. Geben Sie im ersten Parameter der Methode open() des Objekts window den String "about:blank" an, um ein neues Browserfenster ohne Webseite zu öffnen.

    Also den ersten Teil der Aufgabe habe ich. Ich hab nen Button erstellt die eine Funktion mit "onclick" aurfruft. Diese Funktion ruft dann das Fenster "about:blank" auf. Ich hab nun die Aufgabe so verstanden, dass dieses Fenster "about:blank" 2 Frames mit unterschiedlicher HIntergrundfarbe haben soll. Aber wie greife ich denn auf about:blank zu ? Ich steh gerade echt auf dem Schlauch.

    Danke für eure Hilfe

    Gruß Daniel

  • So. Ich hab die Aufgabe 21 gelöst, aber nur den ersten Teil. Das mit "about:blank" habe ich weggelassen, fand ich auch ehrlich gesagt nicht gut durchdacht.

    Dann kommt hier nun meine Lösung mit Frames :) Eine Frage an alle, werden Frames häufig genutzt oder eher selten ?

    Lösung.

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Test</title>
    6. </head>
    7. <script type="text/javascript">
    8. function NeuesFenster() {
    9. window.open("Aufgabe 21.html", "Neues Fenster")
    10. }
    11. </script>
    12. <body>
    13. <form>
    14. <input type="button" value="Neues Fenster" onclick="NeuesFenster()">
    15. </form>
    16. <body>
    17. </html>
    Alles anzeigen


    Nun kommt noch die HTML Datei:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Startseite</title>
    6. </head>
    7. <frameset cols="15%,*">
    8. <frame src="Navigation.html" name="Navigation" noresize="noresize">
    9. <frame src="Startseite.html" name="Startseite" marginwidth="30">
    10. <body>
    11. </body>
    12. </frameset>
    13. <html>
    Alles anzeigen


    Die anderen HTML Datein, also "Navigation" & "Startseite" poste ich nicht, da ich nur im body die Hintergrundfarbe geändert hab und ein wenig Text hinzugefügt hab.
    Soviel dazu.
    Ich poste dann heute oder morgen die nächsten Aufgaben und Lösungen und bedanke mich an alle, die mir helfen ;)

    Gruß Daniel

  • So ich poste dann mal Aufgabe 22. Dazu biete ich keine Lösung, da es schon viele Lösungen im Internet gibt. Ich zitiere meinen Chef " Man braucht das Rad ja nicht neu erfinden " :D
    Aber wenn jemand Lust und Zeit hat, kann er ja selber eine Lösung entwerfen.
    Indem Sinne, viel Spaß

    22. Erstellen Sie ein Javascript-Programm, das ein Kalenderblatt des aktuellen Monats in einer Tabelle anzeigt. Die erste Reihe der Tabelle enthält den Namen des Monats, die Reihe darunter die Kürzel Mo, Di, Mi, Do, Fr, Sa und So in genau dieser Reihenfolge. Darunter soll in mehreren Reihen der Kalendermonat aufgeschlüsselt werden. Wochenendtage sowie das aktuelle Datum sollen hierbei farblich hervorgehoben werden.

    Gruß Daniel

  • Huhu
    Ich bin gerade dabei ein "Pull-Down-Menu" zu erstellen mit Javascript. Also fertige ich ein HTML-Dokument an und mach dieses mit Javascript dynamisch. Ich bin jedoch bei google auch darauf gestoßen, dass man "Pull-Down-Menu" mit Listen und CSS erzielen kann. Mit Javascript mache ich das halt mit einer Tabelle und Funktionen. Welche Methode ist denn nun geläufiger bzw. die bessere?

    Gruß Daniel

  • So die Aufgabe war ein "Pull-Down-Menu" zu erstellen.Ich hab dies mit <table>, funktionen und ein bisschen CSS fürs Auge gemacht.
    Die bitte an euch, schaut es euch bitte an, ob ich das klug gelöst habe oder nicht ( hab mir die Haare fast rausgerissen:D)
    Ich poste morgen auch noch mal ein "Pull-Down-Menu" mit <ul> und CSS, aber ohne Javascript. Damit man 2 Beispiele hat, worüber man diskutieren könnte.

    Also hier die Lösung:

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:language="en">
    4. <head>
    5. <title>Pull-Down-Menu</title>
    6. <style type="text/css">
    7. #Menubar {
    8. position:absolute;
    9. top:40px;
    10. left:60px;
    11. z-index:2;
    12. background: #003366;
    13. font-family:Veranda;
    14. }
    15. #Menubar td:hover {
    16. color: #ff9224;
    17. background: #003366;
    18. text-decoration:none;
    19. text-align:center;
    20. font-weight:bold;
    21. border: 1px solid #ff9224;
    22. display:block;
    23. }
    24. #Menubar td {
    26. text-align:center;
    27. color:#000;
    28. background: #ff8000;
    29. }
    30. #Spalte1 {
    31. position:absolute;
    32. top:66px;
    33. left:105px;
    34. z-index:2;
    35. }
    36. #Spalte1 td {
    37. color:#000;
    38. background: #ff8000;
    39. text-align:center;
    40. border:2px solid #003366;
    41. }
    42. #Spalte1 a {
    43. color: #000;
    44. text-decoration:none;
    45. }
    46. #Spalte1 a:hover {
    47. color:#ff9224;
    48. background:#003366;
    49. text-decoration:none;
    50. display:block;
    51. }
    52. #Spalte2 {
    53. position:absolute;
    54. top:66px;
    55. left:310px;
    56. z-index:2;
    57. }
    58. #Spalte2 td {
    59. color:#000;
    60. background: #ff8000;
    61. text-align:center;
    62. border: 2px solid #003366;
    63. }
    64. #Spalte2 a {
    65. color:#000;
    66. text-decoration:none;
    67. }
    68. #Spalte2 a:hover {
    69. color: #ff9224;
    70. background: #003366;
    71. text-decoration:none;
    72. text-align:center;
    73. font-weight:bold;
    74. display:block;
    75. }
    76. </style>
    77. <script type="text/javascript">
    78. function Sichtbar1() {
    79. document.getElementById("Spalte2").style.visibility = "hidden";
    80. document.getElementById("Spalte1").style.visibility = "visible";
    81. }
    82. function Sichtbar2() {
    83. document.getElementById("Spalte1").style.visibility = "hidden";
    84. document.getElementById("Spalte2").style.visibility = "visible";
    85. }
    86. function loeschen() {
    87. document.getElementById("Spalte1").style.visibility = "hidden";
    88. document.getElementById("Spalte2").style.visibility = "hidden";
    89. }
    90. </script>
    91. <head>
    92. <body>
    93. <table>
    94. <tr>
    95. <td height="250" width="600" onmouseover="loeschen()"></td>
    96. </tr>
    97. </table>
    98. <div id="Menubar">
    99. <table>
    100. <tr>
    101. <td align="center" width="200" onmouseover="Sichtbar1()">Startseite</td>
    102. <td align="center" width="200" onmouseover="Sichtbar2()">Herrenabteilung</td>
    103. </tr>
    104. </table>
    105. </div>
    106. <div id="Spalte1" style="visibility:hidden">
    107. <table>
    108. <tr>
    109. <td align="center" width="100"><a href="http://www.ard.de">News</a></td>
    110. </tr>
    111. </table>
    112. </div>
    113. <div id="Spalte2" style="visibility:hidden">
    114. <table>
    115. <tr>
    116. <td align="center" width="100"><a href="http://www.ttc-wiesmoor.de/index.php?option=com_content&task=view&id=13&Itemid=59">1.Herren</a></td>
    117. </tr>
    118. <tr>
    119. <td align="center" width="100"><a href="http://www.ttc-wiesmoor.de/index.php?option=com_content&task=view&id=17&Itemid=62">2.Herren</a></td>
    120. </tr>
    121. <tr>
    122. <td align="center" width="100"><a href="http://www.ttc-wiesmoor.de/index.php?option=com_content&task=view&id=20&Itemid=65">3.Herren</a></td>
    123. </tr>
    124. </table>
    125. </div>
    128. </body>
    129. <html>
    Alles anzeigen