Modul 294

Frontend einer interaktiven Webapplikation realisieren

Web Icon

01 - Einführung in JavaScript

Die Grundlagen

Web Icon

Lernziele dieser Lektion

  • Verstehen, was JS ist und welche Rolles es in der Webentwicklung spielt.
  • Verstehen der Grundlagen wie JavaScript mit einer Webseite interagiert.

Was ist JavaScript?

  • JavaScript ist die Programmiersprache des Webs.
  • Es berechnet, manipuliert und validiert Daten.
  • Es kann sowohl das HTML als auch das CSS der Webseite manipulieren.

Geschichte von JavaScript

  • Im Jahre 1995 von Brendan Eich in nur 10 Tagen entwickelt.
  • 99% aller Webseiten nutzen JavaScript auf Client-Seite.
  • Dank Node.js auch immer öfters Serverseitig genutzt.
  • Alle modernen Web-Frameworks (Angular, Nuxt, React...) bauen auf JavaScript auf.

Beispiel

                    
                        <button
                        onclick="document.getElementById('myId').src='happy.webp'">
                        Make happy
                        </button>

                        <img
                        id="myId"
                        src="happy.webp" style="width:100px"
                        />

                        <button
                        onclick="document.getElementById('myId').src='sad.webp'">
                        Make sad
                        </button>

Showroom

Einfacher Ray-Tracer
Evolutionsbasiertes Ökosystem
Metaballs
Dotify

Implementation

JavaScript wird in der Regel mit einer (oder mehreren) der folgenden Möglichkeiten in eine Webseite eingebunden.

  • Inline
  • Direkt im <head>
  • Als Skript in einer externen Datei

Inline

  • JavaScript kann inline direkt in einem HTML-Tag erfasst werden.
  • Einfach zu nutzen aber stark limitiert.
  • Kann nur bei bestimmten Events genutzt werden.
                    
                        <button onclick='alert("I got clicked!")'>Click me!</button>

Direkt im Head

  • Im <head> kann mithilfe eines Skript-Tags direkt JavaScript erfasst werden
  • Bietet (beinahe) das gesamte Arsenal von JavaScript
  • Für grosse Projekte schnell unübersichtlich
                    
                        <head>
                        <script>
                        const elements = document.querySelectorAll(".tile");
                        elements.forEach(e => {
                        e.addEventListener("click", event => {
                        e.classList.toggle("blink");
                        })
                        })
                        </script>
                        </head>

Externe Datei

  • Etwas aufändiger einzurichten
  • Bietet alle Features von JavaScript
  • Auch für grosse Projekte (oder die die es noch werden wollen) geeignet
  • Erlaubt das Im- und Exportieren von Code
                    
                        <script src="/path/to/my/file.js"></script>

TL;DR

  • JavaScript, die Programmiersprache des Webs, berechnet, manipuliert und validiert Daten.
  • Wurde innert 10 Tagen von Brendan Eich in 1995 entwickelt.
  • Integrationstypen:
    • Inline: Einfach, aber limitiert.
    • Direkt im Head: Alle JavaScript-Funktionalitäten, nicht gut skalierbar.
    • Externe Datei: Modular und skalierbar, ideal für grössere Projekte.