Introduction

• 3 Schichten; HTML (semantisch), CSS (Layout), JavaScript (funktional)

• Über Konsole ist alles erreichbar -> sensible Daten gehören nicht ins Front-End

• Front-End JavaScript hat keinen Zugang zum Dateisystem, nur zur DOM

Geschichte von JavaScript

• 1995: Sprache schaffen zum Einbinden von JavaApplets in Netscape Navigator Mocca -> LiveScript -> JavaScript

• 1996 Internet Explorer: JScript -> doppelter Aufwand für Programmierer

• ECMA wollte einheitlichen Standard schaffen -> Wie soll was funktionieren? -> ECMA Script -> ES (derzeit ES6)

• Macromedia half bei Einführung von ES4 (ActionScript) -> wurde zu ES5

• 2015: ES5 -> ES6 war großer Schritt (Vereinfachung) -> “bestes ES seit ES3”

• erst seit IE tot war, war der Weg frei für ES6 (keine “Polyfills” mehr -> dem Browser Funktionalität beibringen, die es noch nicht kann) ES5 noch immer stark verbreitet (oft gemischt mit ES6)

• seitdem jährlicher ECMA Release, aber Änderungen nicht in jedem Browser verfügbar (nur Kern ist garantiert) -> JS stets auf unterschiedlichen Browsern testen: Chrome, Firefox, Safari, Opera, Edge

JavaScript mit VS Code

Note

VS Code ist in JavaScript mit Hilfe von Node.JS geschrieben (daher Einstellungen in JSON Format)

Empfohlene Extensions

• Auto Rename Tag

• ESLint

• German Language Pack for Visual Studio Code

• Live Server -> Ansicht im Browser (NodeJS Express Server), Änderungen im Browser ohne Reload, Ajax

Attention

Live Server benötigt für jedes Projekt einen eigenen Ordner

Jeden Tag * ein neues Projekt * Unterlagen werden vom Dozenten hochgeladen

Einbinden von JavaScript

HTML Grundgerüst über emets (bei VS Code): >>> html >>> !

JavaScript direkt ins HTML

-> gilt nur für diese eine Seite

<script>
    alert("Hi");
</script>

Verweis auf externe JS Datei in HTML

<script src="script.js">
    alert("Hi");
</script>

–> script.js wird hier eingelesen –> Datei überschreibt explizites JS falls hier zusätzlich (hier: alert) definiert –> Pfad stets relativ zur HTML Datei

Asynchrones Laden

Interpreter wartet nicht auf vollständiges Laden des Skripts

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

defer Skripte dürfen erst ausgeführt wenn DOM fertig geladen ist:

<script src="script.js" async defer></script>

• async bedeutet, dass das Skript parallel zum Parsen des Dokuments geladen wird

• defer bedeutet, dass das Script erst nachdem das Dokument geparst wurde, geladen wird

Beste Möglichkeit: Skript ans Ende des HTML packen

So erspart man sich async und defer oder es macht nichts, wenn man diese aus Versehen vergisst.

<html>
<body>
    // the entire body
    <script src="script.js"></script>
</body>
</html>

Dadurch sollten alle Elemente im DOM sein.

Mehrere Skript-Tags mit Dateien in ein HTML Seite einfügen:

<html>
<body>
    // the entire body
    <script src="script_1.js"></script>
    <script src="script_2.js"></script>
    <script src="script_3.js"></script>
</body>
</html>

Dabei werden in dieser Reihenfolge abgearbeitet -> darauf achten

Strict-Mode

Generell eine gute Idee, besonders zum Lernen.

• Teilmenge von JS

• performanter

• jeder (Syntax-)Fehler wird angezeigt

• wird z.B. bei JQuery immer angewandt (automatisch)

• jeder moderne Browser unterstützt diesem Modus

über

'use strict';

zu Beginn eines Dokuments.

Kommentare

// einzeiliger Kommentar
/*
    mehrzeiliger
    Kommentar
*/

Schreibregeln & Konventionen

Bei JavaScript

• gilt case sensitive (username != USERNAME)

• beginnt Zählung bei 0

• gilt englische Schreibweise (Dezimaltrennzeichen = . nicht ,)

Nicht relevant für Interpreter, aber Programmierer, dient der Lesbarkeit von Code

• ein Statement pro Zeile

• jede Zeile mit Semikolon beenden (obwohl nicht notwendig)

• Bezeichner sollten sprechend sein (keine Chiffren)

Regeln für Bezeichner

• beginnt mit einem Buchstaben, Underscore, Dollar-Zeichen oder Hashtag (jedoch haben diese oft andere Konventionen)

• danach sind auch Ziffern erlaubt

• sonst keine Sonderzeichen und Umlaute

• keine Leerzeichen

• keine reservierten Wörter verwenden (https://www.w3schools.com/Js/js_reserved.asp)

• keine Bezeichner von vordefinierten Funktionen oder Objekten verwenden

Konventionen für Bezeichner

• für Variablen, Konstanten und Funktionen: lower camel case (lowerCamelCase)

• für Konstruktor-Funktionen: upper camel case (UpperCamelCase)

• für Konstanten zur Konfiguration: screaming snake case (SCREAMING_SNAKE_CASE)

Anweisungsblöcke {} zum Gruppieren mehrerer Anweisungen:

if (true) {
  var x = 2;
  let y = 2;
}

-> Interpreter weiß, dass alle Anweisungen gemeinsam ausgeführt werden müssen

Vordefinierte Funktionen

// Basics
alert("Hi"); // pausiert das Skript, User muss Alert-Dialog bestätigen, um fortzusetzen
confirm("Bist du sicher?"); // pausiert das Skript, User kann mit 'OK' True zurückgeben oder mit 'Cancel' False
prompt("Wer bist du?", "Niemand"); // Zeigt Eingabefenster (mit Standardwert) -> gibt 'null' (Cancel) oder String mit Eingabe zurück (OK, falls leere Eingabe -> <empty string>)

console.log("Hello World!", "Wie geht's?"); // String auf der Konsole darstellen
console.log(42); // Logge Zahl -> grün
console.log({}); // Logge Objekt -> blau
console.warn("Warnung"); // Logge Warnung -> Symbol + gelber Hintergrund
Alert("Hilfe");  // Fehler, da 'Alert' Funktion nicht verfügbar -> Symbol + roter Hintergrund
console.table(["a", "b", "c", "d"]);  // Zeigt Array tabellarisch an

// Zeitmessung
console.time("Messung");
// ... do some other stuff
console.timeEnd("Messung");

// Konsolenausgaben löschen
console.clear();

Variablen

1. Deklaration -> Variable wird erzeugt

2. Initialisierung -> erfolgt durch Interpreter (erzeugt sie im Speicher)

3. Zuweisung -> Wert wird an Variable übergeben

Generell sollten möglichst wenig Variablen im globalen Scope definiert werden.

Hint

“Hoisting” bedeutet, dass in der Funktion alle Variablen im lokalen Gültigkeitsbereich der Funktion bereits alle Deklarationen zu Beginn der Funktion stattfinden (Variable ist undefined), jedoch die Initialisierung erst in der entsprechenden Zeile.

Alter Weg (ES5): mit var

// Variablen unterliegen dem "Hoisting"
// https://de.wikipedia.org/wiki/Hoisting
console.log(myVar); // undefined, da noch keine Zuweisung -> Fehlerquelle!

var myVar; // noch keine Zuweisung
var myNumber = 42;  // mit Zuweisung

Neuer Weg (ES6): mit let

// kein Hoisting (weil es häufig zu Fehlern führt)

// console.log(myLetVar); // Fehler: Variable hier noch nicht definiert

// global Scope
let myLetVar = 999;

// früher wurden viele Funktionen nur zum Kapseln von Variablen geschrieben
// (zu viele Variablen waren im globalen Scope)

// Neu: Block Scope (z.B. in Funktionen, If/Else Schleifen oder Blöcken)
{
    let blockScopedVar = 100;
    console.log(blockScopedVar);
    let myLetVar = 111;
}

// console.log(blockScopedVar); // error: not defined
console.log(myLetVar); // 999

// mehrere Variablen gleichzeitig erzeugen
// myCat hat Zuweisung, andere undefined
let myCat = "Fussel", myDog, myHome, myHero, myGhost;

myDog = "Moja";
console.log(myCat, myDog);

// Rückgabewerte in Variable speichern
// let confirmReturn = confirm("Korrekt?");

// Nutzerinput als Variable speichern
// let userName = prompt("Dein Name:");