Die Interaktivität – JavaScript

Zuletzt bearbeitet am 5. August 2023 Gepostet am 20. Juli 2023

Sarah Gosch (sargosch@tsn.at)

Allgemein

Jetzt wenden wir uns dem letzten fehlenden Stück unserer Website zu – der Funktionalität unseres Buttons. Bisher reagiert dieser nicht auf unser Klicken, doch das wird sich jetzt ändern.

Um JavaScript in eine Webseite einzubinden, gibt es drei gängige Methoden:

Inline JavaScript: Hierbei wird JavaScript direkt in das entsprechende HTML-Element eingefügt, meistens über das „onclick“-Attribut. Diese Methode ist jedoch nicht empfohlen, da sie die Struktur des Codes unübersichtlich machen kann und die Wartung erschwert.
Interne JavaScript-Blöcke: Man kann den JavaScript-Code innerhalb von <script>-Elementen im HTML-Dokument platzieren, meistens im Kopfbereich (<head>) oder am Ende des Rumpfes (<body>). Dies ist sinnvoll, wenn der JavaScript-Code nur für diese spezielle Seite gedacht ist.
Externe JavaScript-Datei: Bei dieser Methode wird der JavaScript-Code in einer separaten .js-Datei geschrieben und dann mit einem Link in das HTML-Dokument eingefügt. Dies ist die gebräuchlichste Methode, besonders bei größeren Projekten, da sie die Wiederverwendbarkeit des Codes ermöglicht und die Übersichtlichkeit des HTML-Codes bewahrt.“

Für unser einfaches Beispiel werden wir den JavaScript-Code direkt in unseren HTML-Code einbinden. Doch denke daran, dass für umfangreichere Projekte das Auslagern des JavaScript-Codes in eine externe Datei oft am Besten ist.

Nun wieder zu unserem Beispiel. Die folgenden JavaScript-Komponenten werden wir in unseren Code einfügen:

<script>: Dieses Element ist vergleichbar mit einem Raum, den wir für JavaScript in unserer HTML-Datei schaffen. Durch dieses Element weiß der Browser, dass sich innerhalb kein HTML- oder CSS-Code mehr befindet.
function myFunction(): Dieser Teil definiert eine Funktion namens „myFunction“. Eine Funktion ist ein wieder verwendbarer Codeblock, der eine bestimmte Aktion ausführt. In diesem Fall definiert die Funktion namens myFunction das Verhalten des Buttons, wenn er angeklickt wird. Der Code für die Funktion wird dabei zwischen zwei geschwungene Klammern ({…}) geschrieben.
alert("Yay! Der Button funktioniert!"): Das ist die konkrete Anweisung in unserer Funktion. Wenn wir „myFunction“ ausführen, wird diese alert ausführen und es öffnet ein kleines Fenster mit der Nachricht „Yay! Der Button hat funktioniert!“.
onclick="myFunction()": Hier rufen wir unsere Funktion auf. Dieses Attribut in unserem HTML-Button sagt: „Wenn jemand auf mich klickt, führe die Anweisung innerhalb meiner ‚myFunction‘-Funktion“ aus.

Bauen wir das in unseren Code ein, sieht das folgendermaßen aus:

Nun haben wir das ‚onclick‘-Attribut zu unserem Button hinzugefügt. Gleichzeitig haben wir ein <script>-Element eingefügt, in dem wir die Funktion definiert haben, die beim Klick auf den Button ausgelöst wird. Diese Funktion öffnet ein sogenanntes Alert-Fenster, das unseren gewünschten Text anzeigt.

Versuche nun, diesen Code im Tryit Editor von W3Schools einzufügen und klicke auf „Run“. Öffnet sich das Fenster?

Herzlichen Glückwunsch, Du hast soeben Deine erste Website programmiert! Obwohl wir nur einen kurzen Einblick in die jeweiligen Technologien genommen haben, hast Du bereits einiges über die Webentwicklung gelernt. Alles weitere wird Dir während des Unterrichts am IT-Kolleg Imst beigebracht.