JavaScript: Einführung

Bevor man mit dem neuen Kapitel JavaScript beginnen kann, sollte man nochmals das Kapitel Node JS Installation durcharbeiten und sicherstellen das alles installiert ist.

Jetzt wird es Zeit, dass du auch Programm-Logik auf deiner Website einbauen kannst. Dafür lernst du gleich die Programmiersprache JavaScript kennen, die von praktisch allen bekannten Browsern unterstützt wird.

Damit du eine Übersicht über die Programmiersprache bekommst, kannst du z.B. dieses Video schauen, ohne dass du den ersten Satz verstehen musst.

Motivation für JavaScript

JavaScript hat sehr viele Verwendungen im Browser. Einerseits können Funktionen ähnlich wie mit Java programmiert werden, sodass z.B. Berechnungen ausgeführt werden können. Zudem kann aber auch direkt mit dem angezeigten Inhalt interagiert werden. So können Validierungen oder auch Animationen ausgeführt werden. Wenn du mal sehen willst, wie eine Website aussieht ohne JS kannst du dir hier eine Chrome extension herunterladen mit welcher du JS komplett ausschalten kannst.

Nun beginnen wir aber zuerst klein: Mit einem Button, der beim Klick eine MessageBox anzeigt.

1
2
3
4
5
6
7

<button onclick="onClickMeClick()" type="button">Klick mich</button>

<script>
    function onClickMeClick() {
        alert('Klick mich nicht an!!');
    }
</script>

Versuche zuerst, dieses Beispiel ohne Erläuterung zu verstehen.

JavaScript einbinden

Wie du im oberen Beispiel gesehen hast, wird Javascript via <script>-Tag eingebunden. Dein Code kann direkt im <script>-Tag geschrieben werden:

1
2
3

<script>
  console.log('my Js Code');
</script>

Du kannst aber dein Code auch in einem separatem .js File haben und via Script Tag referenzieren:

index.html

1
2

<script src="mycode.js"></script>

mycode.js

1

console.log('my Js Code');

Die zweite Variante ist meist sauberer, da Code und HTML sauber aufgeteilt wird. Bei unseren Übungen wirst du aber meist direkt im <script>-Tag arbeite können ohne separates JS File.