Abschnittsübersicht

  • Allgemeines

    Alles einklappen Alles aufklappen

    • JavaScript

  • Was ist JavaScript?

    • JavaScript ist eine Programmiersprache (Scriptsprache).
      Unter einem Skript wird eine Folge von Programmanweisungen verstanden.
    • JavaScripts werden z.B. innerhalb des HTML-Codes einer Webseite eingefügt.


    • JavaScript-Code kann in HTML-Dokumente mit dem <script> - Tag eingebunden werden.
      Die Anweisungen stehen immer zwischen
      <script>
      und
      </script>

      Die strenge Einhaltung der Syntax (Regeln) ist die Voraussetzung für das Funktionieren des Programms. Sonst: Syntax error

  • Interaktiver Button

    • Unser Button aus dem HTML-Kurs zeigt beim Anklicken (onclick) noch keine Reaktion.

      Nach einem Mausklick soll aber etwas passieren, z.B. eine Meldung erscheinen.

      Lösung:
      Ein Ereignis-Behandler (Event-Handler), der eine Verknüpfung zu einem JavaScript herstellt.

      Mit dem Event-Handler können wir eine JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und reagiert.

      In unserem Beispiel: function clickHandler()

    • Aufgabe 1

      Öffne deine letzte Version der Datei erste_webseite.rtf.

      Füge vor

      </body>

      </html>

      Folgendes ein:

      <script>

      document.getElementById("interaktiv").onclick = clickHandler;

      function clickHandler()

      {

      alert('Button wurde geklickt!');

      }

      </script>

    • Die Änderung speichern und die Datei im Browser öffnen.
      Überprüfe, was passiert, wenn du den Button anklickst!

  • Dialogfenster

    • Wenn du die erste Aufgabe richtig gelöst hast, erscheint beim Anklicken (onklick) des Buttons ein kleines Dialogfenster mit der Meldung "Button wurde geklickt!"

    • Unser Button ist ein Element des Dokuments (der Webseite).

      In der Anweisung document.getElementById("interaktiv").onclick = clickHandler; findest du den Namen unseres Buttons. Du erinnerst dich? <button id="interaktiv">

      onclick meint: beim Anklicken

      Dann kommt die Funktion clickHandler ins Spiel.

      Die Funktion alert(); gibt dann eine Meldung aus. In diesem Fall "Button wurde geklickt!"

      Zusammengefasst:
      Wenn das Ereignis Mausklick beim Element mit der ID "interaktiv" (Das ist unser Button.) eintritt, führt die Handler-Funktion die Ausgabe der Mitteilung "Button wurde geklickt!" über die Funktion alert durch.


  • Text-Eingabefeld

    • Dialogfenster sind kleine Mitteilungsboxen, die erscheinen, wenn das Programm zum Aufruf von alert kommt.

      Es gibt aber neben alert noch weitere Befehle, die ein Dialogfenster öffnen.


    • Aufgabe 2

      Erstelle ein Text-Eingabefeld mit der Anweisung prompt().

      Öffne deine letzte Version der Datei erste_webseite.

      Füge dieses JavaScript an einer passenden Stelle ein.

      <script>

        prompt("Wie heißt du?");

      </script>


    • Speichere als HTML-Datei und öffne diese.

      Dieses Mal erscheint ein kleines Dialog-Fenster mit der Frage "Wie heißt du?" und der Möglichkeit etwas hineinzuschreiben.


  • Autor

    • Zusammengestellt von Gabriele Plaschke, Mittelschule Bregenz-Stadt