Skip to Content
Semester 5Web-Engineering (WEB)KlausurJavaScript

JavaScript

JavaScript ist eine Skriptsprache, welche zur Interaktion mit Webseiten genutzt wird.

Kurzgesagt: JavaScript ermöglicht interaktive Inhalte und dynamische Funktionen indem es das Verhalten der Webseite in Echtzeit verändert.

Browser können unterschiedliche JavaScript Engines verwenden.

BrowserEngine
ChromiumV8
FirefoxSpiderMonkey
SafariJavaScriptCore

Einbindung

JavaScript kann auf unterschiedliche Arten auf eine Webseite eingebunden werden.

  • Inline

    Bei der Inline Methode wird der JavaScript Code direkt in das HTML Dokument eingebunden.

    <script>
    document.getElementById("myElement").innerHTML = "Hello, World!";
</script>

  • Extern

    Bei der Externen Methode wird der JavaScript Code in eine separate Datei gespeichert und mit einem <script> Tag eingebunden.

    <script src="script.js"></script>
    ⚠️

    Wird fremder Code eingebunden, besteht die Möglichkeit, dass dieser Code Schadcode enthält. Es ist daher ratsam, die Quellen von fremden Code zu überprüfen.

Variablen

JavaScript ist keine typisierte Sprache. Das bedeutet, dass Variablen nicht an einen bestimmten Datentyp gebunden sind.

In JavaScript gibt es drei Arten von Variablen:

  • var - Veraltete Variante zur Deklaration von Variablen
  • let - Neue Syntax zur Deklaration von Variablen
  • const - Konstante deklaration von Variablen
var x = 10; // Veraltet
let y = 20; // Neue Syntax
const z = 30; // Konstante - Kann nicht verändert werden

Datentypen

Auch wenn JavaScript keine typisierte Sprache ist, gibt es doch verschiedene Datentypen.

  • String - Zeichenketten
  • Number - Zahlen
  • Boolean - Wahrheitswerte
  • null - Kein Wert
  • undefined - Nicht definiert

Dann gibt es noch Objekttypen:

  • Object - Objekte
  • Array - Arrays
  • Function - Funktionen
  • Symbol - Symbole

Mithilfe von typeof kann der Datentyp einer Variable ausgelesen werden.

typeof x; // "string"
typeof y; // "number"
typeof z; // "boolean"
typeof null; // "object"
typeof undefined; // "undefined"
typeof [1, 2, 3, 4]; // "object"

JavaScript verarbeitet die Werte in der Reihenfolge der Ausführung.

let x = 16 + 4 + "Web"; // "20Web"
let y = "Web" + 16 + 4; // "Web164"

Wird zuerst eine Addition ausgeführt, wird diese als erstes verarbeitet.

Wenn zuerst ein String aufgeführt wird, dann werden die folgenden Werte als String angehangen.

Array / Objekte

Arrays

Ein Array ist eine geordnete Liste von Werten auf die man über einen Index zugreifen kann.

let arr = [1, 2, 3, 4, 5];

  • Eigenschaften

    • Die Elemente haben eine feste Reihenfolge
    • Über einen Index kann auf ein Element zugegriffen werden
    • Die Länge des Arrays kann über die length Eigenschaft ermittelt werden

  • Methoden

    • push() - Fügt ein Element am Ende des Arrays hinzu
    • pop() - Entfernt das letzte Element des Arrays
    • map() - Wendet eine Funktion auf alle Elemente des Arrays an
    • filter() - Filtert die Elemente des Arrays

Arrays werden aber nicht direkt als Array ausgegeben, sondern als object.

Um zu prüfen, ob es sich um ein Array handelt, kann die Array.isArray() Funktion verwendet werden.

Array.isArray(arr); // true

Objekte

Ein Objekt ist eine ungeordnete Sammlung von Schlüssel-Wert-Paaren. Der Schlüssel ist ein String, der Wert kann ein beliebiger Datentyp sein.

let obj = { name: "John", age: 20 };

  • Eigenschaften

    • Die Schlüssel-Wert-Paare sind ungeordnet
    • Über einen Schlüssel kann auf den Wert zugegriffen werden
      • obj.name
      • obj["age"]

  • Methoden

    • keys() - Gibt alle Schlüssel des Objekts zurück
    • values() - Gibt alle Werte des Objekts zurück

DOM

Mit Hilfe von JavaScript kann auf das DOM Tree navigiert werden.

Damit man ein Element ansprechen kann, muss man es zuerst finden.

let target = document.getElementById("target");
let targetByClass = document.getElementsByClassName("target");
let targetByTag = document.getElementsByTagName("target");
let targetByQuery = document.querySelector("#target");
let targetByQueryAll = document.querySelectorAll("#target");

Anhand des target Elements kann dann auf andere Elemente im DOM Tree zugegriffen werden.

let targetParent = target.parentElement;
let targetChilds = target.childNodes; // Array
let targetSibling = target.nextSibling;

Um neue Elemente zu erstellen, alte Elemente zu entfernen oder etwas zu ändern kann man folgendes verwenden:

let newElement = document.createElement("div");
newElement.innerHTML = "Hello, World!";
let parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);
 
newElement.remove();
parentElement.replaceChild(newElement, oldElement);
parentElement.insertBefore(newElement, targetElement);

Attribute eines Elements lassen sich auch anpassen

target.setAttribute("class", "new-class");
target.getAttribute("class");
target.removeAttribute("class");

innerHTML / textContent

innerHTML

innerHTML ist eine Eigenschaft, welche den Inhalt eines Elements ausliest und verändert.

Der Inhalt wird als HTML-Code interpretiert und kann somit auch HTML-Tags enthalten. Somit lässt sich der DOM manipulieren.

Nachteile:

  • Es birgt ein Sicherheitsrisiko, da es möglich ist HTML-Tags zu injecten und somit XSS-Attacken (Cross-Site Scripting) ausführen zu können.
  • Größere Änderungen können langsamer sein, da der gesamte Inhalt neu gerendert wird.

textContent

textContent gibt nur den Text eines Elements zurück oder setzt ihn. Dadurch ist es nicht möglich HTML-Tags zu verwenden. Wenn ein HTML Tag enthalten ist, wird dieser als Text interpretiert und nicht als HTML-Tag.

Vorteile:

  • Es ist sicherer, da kein HTML-Code interpretiert wird.
  • Es ist schneller, da keine Anpassungen am DOM-Tree nötig sind.

AJAX

AJAX (Asynchronous JavaScript and XML) ist eine Technik, mit der man Daten von einem Server anfordern kann. Diese Daten werden asynchron angefragt und ohne das Neuladen der Seite verarbeitet.

Während der Anfrage wird die Seite nicht blockiert und kann vom Benutzer weiter genutzt werden. Es können auch mehrere Anfragen gleichzeitig ausgeführt werden.

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/data", true); // true = asynchron
xhr.onload = function() { // Callback wenn der Server antwortet
    if(xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.log("Error");
    }
};
xhr.send();

Backend

AJAX Anfragen verwenden die unterschiedlichen HTTP Requests um verschiedene Operationen auszuführen.

  • GET
    • Abrufen von Daten
    • Daten werden als Parameter in der URL angegeben
  • POST
    • Senden von Daten an einen Server
    • Erstellt neue Daten oder löst Prozesse aus
    • Daten werden im Body der Anfrage angegeben
  • PUT
    • Aktualisieren oder Ersetzen von Daten auf dem Server
    • Die gesamte Ressource wird mit den Daten ersetzt
  • DELETE
    • Löschen von Daten auf dem Server

Damit ein AJAX Request problemlos funktioniert, muss auf der Serverseite spezielle Header gesetzt werden.

HTTP/1.1 200 OK
Content-Type: application/json

Geht eine Anfrage an eine andere Domain, muss der Server passende CORS Header setzen.

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: https://example.com

Events

Event Handler

Ein Event Handler ist eine Funktion, die ausgeführt wird, sobald ein bestimmtes Ereignis eintritt. Diese Events können durch Mausklicks, Tastendrücke oder andere Ereignisse ausgelöst werden und nennen sich Event Listener.

Event Handler lassen sich als Attribute auf zwei Arten einbinden:

  • Inline

    <button onclick="alert('Button wurde angeklickt!');">Click me</button>

  • Extern

    <button onclick="myFunction()">Click me</button>
 
 
<script>
    function myFunction() {
        alert("Button wurde angeklickt!");
    }
</script>

Neben onclick gibt es noch weitere Events, die verwendet werden können.

<button onclick="myFunction()">Click me</button>
<button ondblclick="myFunction()">Click me</button>
<button onmouseover="myFunction()">Click me</button>
 
<input type="text" oninput="myFunction()">
<input type="text" onchange="myFunction()">
 
<input type="text" onkeydown="myFunction()">
<input type="text" onkeyup="myFunction()">
 
<body onload="myFunction()">
<body onunload="myFunction()">
 
<window onload="myFunction()">
<window onunload="myFunction()">

Event Listener

Event Listener sind Mechanismen, die bestimmte Events überwachen und beim Eintreten auf diese reagieren. Diese müssen nicht inline eingebunden werden, sondern können ausserhalb des HTML Dokumentes eingebunden werden.

Event Listener werden über .addEventListener() hinzugefügt. Sie benötigen zwei Parameter: Event Name und Funktion.

document.getElementById("myButton").addEventListener("click", myFunction);

Es gibt viele unterschiedliche Events, die überwacht werden können.

  • Maus Events
    • click
    • mouseover
    • mouseout
  • Tastatur Events
    • keydown
    • keyup
  • Form Events
    • submit
    • change
    • input
  • Dokument Events
    • load
    • resize

Window

Mit JavaScript kann man die Größe des Browserfensters auslesen und verändern.

window.innerWidth; // Gibt die Breite des Browserfensters an
window.innerHeight; // Gibt die Höhe des Browserfensters an
 
window.open("https://example.com", "_blank"); // Öffnet eine neue Seite in einem neuen Tab
window.close(); // Schließt den Browser
window.moveTo(100, 100); // Verschiebt das Browserfenster
window.resizeTo(1000, 1000); // Verändert die Größe des Browserfensters

Mit einem Event Listener kann man das Browserfenster überwachen und auf Änderungen reagieren.

window.addEventListener("resize", myFunction);

Tabellen

Mit JavaScript kann man Tabellen manipulieren.

// Tabelle erstellen
const table = document.createElement("table");
table.border = "1";
 
// Kopfzeile erstellen
const headerRow = document.createElement("tr");
const header1 = document.createElement("th");
header1.textContent = "Name";
const header2 = document.createElement("th");
header2.textContent = "Alter";
headerRow.appendChild(header1);
headerRow.appendChild(header2);
table.appendChild(headerRow);
 
// Datenzeile hinzufügen
const row = document.createElement("tr");
const cell1 = document.createElement("td");
cell1.textContent = "John";
const cell2 = document.createElement("td");
cell2.textContent = "30";
row.appendChild(cell1);
row.appendChild(cell2);
table.appendChild(row);
 
// Tabelle in den DOM einfügen
document.body.appendChild(table);
Last updated on
CSSFonts