Difference between revisions of "JavaScript 1 Einführung"

Latest revision as of 10:17, 23 June 2023

Bitte macht das Scrimba Tutorial für JavaScript bis zur "Chrome-Extension" durch: https://scrimba.com/learn/learnjavascript.
Die Inhalte unterhalb sollen dann nur mehr als kurze Wiederholung nach dem Video dienen ;)

Allgemeines[edit]

Einsatzzweck: dynamische Internetseiten erstellen
Vielfältige Möglichkeiten um Aufbau, Layout und Inhalte zu verändern
Zählt mittlerweile zu den etablierten Web-Technologien
Aufgrund großer Beliebtheit hat sich Anwendungsbereich ausgeweitet
2009 erschien bspw Node.js => Plattform um mit JavaScript Serveranwendungen programmieren zu können
Später auch Entwicklungsumgebungen wie Electron oder NW.js => möglich, Desktop-Anwendungen zu erstellen
Browser-Anwendungen bleiben mit großem Abstand der häufigste Einsatzbereich von JS
Läuft innerhalb einer Sandbox, dadurch kein Zugriff auf Funktionen des Betriebssystems, Hardware oder zu Netzwerken möglich

Entstehung[edit]

Entstehung eng mit Entwicklung der Webbrowser verbunden
Erste Version erschien 1995 unter der Bezeichnung „LiveScript“ und wurde im Netscape Navigator 2.0 umgesetzt
Wenige Monate nach Ersterscheinung umbenannt in JavaScript (Marketingstrategie)

Erste Schritte[edit]

Früher musste innerhalb des script-Tags das Attribut type=“text/javascript“stehen => heute nicht mehr nötig
alert-Befehl erzeugt eine kleine Info-Box
Semikolon beendet JS Befehle

<script type="text/javascript">
</script>
<script>
alert("Hallo Welt!");
</script>

Kommentare in JS
<script>
//Ich bin ein einzeiliger Kommentar
/* Ich bin ein Kommentar
der über mehrere Zeilen
gehen kann */
</script>

JavaScript in einer eigenen Datei[edit]

HTML-Datei

<!DOCTYPE html>
    <html>
        <head>
          <meta charset=“UTF-8″>
          <title>JSSeite</title>
      </head>
      <body>
         <script src=“./meinScript.js“></script>
      </body>
    </html>

JavaScript Datei

alert("Hallo Welt!");

"use strict"[edit]

Fehler und schlecht implementierte Funktionen wurden nicht verbessert Grund: Entwickler legen viel Wert auf abwärtskompatible Programmiersprache (sonst kann es passieren, dass entsprechende Funktionen plötzlich nicht mehr funktionsfähig sind)
2009 neue JavaScript-Version die alle bekannten Schwachstellen entfernen sollte => ECMA SCRIPT 5 (ES5) wurde veröffentlicht => nicht mehr abwärtskompatibel
Mit „use strict“;wird dem Browser mitgeteilt, dass er die neue Version verwenden soll, ansonsten wird ES5 vom Browser nicht berücksichtigt
Befehl muss stets am Anfang eingefügt werden
Befehl kann nicht rückgängig gemacht werden
Empfehlenswert neue Programme in dieser moderneren Version zu verfasse

<script>
    „use strict“;
    alert("Hallo Welt!");
</script>

prompt() - Eine Eingabe eines Anwenders aufnehmen[edit]

Einfache Möglichkeit für Interaktion mit Nutzer ist der prompt-Befehl
Erzeugt ein neues Fenster, ähnlich dem alert-Befehl

"use strict";
prompt("Wie alt bist du?","Geben Sie das Alter an");

alert() - Einfache Ausgabe im Browserfenster[edit]

    "use strict";
    let text = "mein erster Text";
    alert(text);

Variablen in JavaScript[edit]

Können unterschiedliche Werte aufnehmen (am häufigsten sind es Zahlen)
- Buchstaben, Zeichen, Wörter, längeren Text, Wahrheitswerte, …
Jede Variable hat einen Typ
In JS nicht notwendig den Datentyp anzugeben
- Interpreter wählt während der Ausführung automatisch eine passende Möglichkeit aus
- auch möglich zuerst eine Zahl, und dann einen String in die gleiche Variable abzulegen
Einige Operationen lassen sich aber nur mit bestimmten Variablentypen durchführen (zB.: Division, Multiplikation)

// Variable deklarieren => Initialisierung
let myfirstVariable;

// Der Variable einen Wert zuweisen
myfirstVariable = 5;
/* oder */
myfirstVariable = "Ich bin ein Text";

/*
Mehrere Variablen mit Wert initialisieren 
Nicht empfehlenswert wegen Übersichtlichkeit im Code = schlechter Programmierstil
Wenn „use strict“ verwendet wird, ist diese Methode nicht möglich
*/
let myfirstVariable = 5, text = "Hallo du", number= 10;

Template Literals - Strings zusammenfügen leicht gemacht[edit]

let favNumber = 7;
let favColor = "blau";
let favAnimal = "Fuchs";

//normale Stringverkettung
console.log("Meine Lieblingszahl ist " + favNumber + " , meine Liebelingsfarbe ist " + favColor + " , mein Lieblingstier ist " + favAnimal);

//Verwendung von Template Literals
console.log(`Meine Lieblingszahl ist ${favNumber}, meine Lieblingsfarbe ist ${favColor}, mein Lieblingstier ist ${favAnimal}`);

statt den typischen " " Anführungszeichen werden Backticks ` ` (auf der Tastatur neben dem ß Zeichen) verwendet
Variablen, Berechnungen und logische Ausdrücke werden in ${} gesteckt
Template Strings erlauben mehrzeilige Strings
Mit Template Literals kann man noch mehr machen:

//innerhalb von Template Literals können Berechnungen erfolgen:
console.log(`4 mal 5 ist ${4 * 5}`);

let isFavouritePet = true;
console.log(`Meine Lieblingstiere sind ${isFavouritePet ? "Hunde" : "Katzen"}`);

isFavouritePet = false;
console.log(`Meine Lieblingstiere sind ${isFavouritePet ? "Hunde" : "Katzen"}`);

const - Konstanten verwenden[edit]

Variablen, von denen man möchte, dass sich im Wert im Programmablauf nicht verändern
Verwendung kann Performance eines Programms verbessern
Beispiele:
- Speichern von Farbenwerten für die Beeinflussung des Designs mit JavaScript
- Bezug zu einem Objekt im HTML herstellen
- uvm.

//Bezug zu einem Button mit der Id #btn
const btn = document.querySelector('btn');

//Bezug zu einem Container-Element im HTML
const mainContainer = document.querySelector('main');

//Elemente, die sich während des Programmablaufs nicht verändern
const productCategories = ["Cars", "Bicycles", "Bikes", "Accessories"];

Vorteile von Konstanten:

Es zeigt anderen, die deinen Code lesen, dass du nicht vorhast, den Wert einer Variablen zu ändern.
Side Effects können vermieden werden (es kann kein neuer Werte zugewiesen werden, den wir nicht beabsichtigen.)

Datentypen ermitteln[edit]

Mit typeof kann ausgegeben werden, um welchen Typ von Variable es sich handelt
Ganze Zahlen und Fließkommazahlen behandelt JS gleich als number
Typ einer Variable kann sich in JS im Laufe des Programms ändern

"use strict";
let integer = 3;
let double = 2.34;
let letter = "a";
let word = 'hallo';
let boolean = true;
let noInitialisation;
console.log("ganzeZahl: " + typeof integer);
console.log("kommazahl: " + typeof double);
console.log("buchstabe: " + typeof letter);
console.log("wort: " + typeof word);
console.log("wahrheitswert: " + typeof boolean);
console.log("ohneInitialisierung: " + typeof noInitialisation);

Datentypen verändern[edit]

Eingabeaufforderung durch prompt-Befehl
Ausgabe des Datentyp (string)
Ausgabe und versuch einen String mit einer Zahl zu addieren, es kommt zu einer Stringverkettung
Ausgabe von Zeilenumbrüchen
Umwandlung des Eingabewerts in eine Zahl
Ausgabe und Addition der Zahl mit 3 = richtiges Ergebnis

let userInput = prompt("Gib eine Zahl ein:");
console.log("Datentyp: " + typeof userInput);
console.log(userInput + 3);
userInput = Number(userInput);
console.log("Datentyp: " + typeof userInput);
console.log(userInput + 3);

Operationen mit Variablen durchführen[edit]

Zeichen	Beschreibung
"+"	Addition
"–"	Subtraktion
/	Division
*	Multiplikation
**	Potenz
%	Modulo
"+="	Erhöhung um den angegebenen Wert
"-="	Verringerung um den angegebenen Wert
"*="	Variable wird mit dem angegebenen Wert multipliziert
"/="	Variable wird durch den angegebenen Wert geteilt
"++"	Erhöhung um 1 (Kurzschreibweise für +1)
"--"	Verringerung um 1 (Kurzschreibweise für -1)

let myVariable= 3;
myVariable = myVariable * 2;
console.log(myVariable);
myVariable = 3;
myVariable *= 2;
console.log("Kurzschreibweise: " + myVariable);
myVariable = 3;
myVariable = myVariable + 5;
console.log(myVariable);
myVariable = 3;
myVariable += 5;
console.log("Kurzschreibweise: " + myVariable);

if-Abfrage[edit]

Vergleichsoperatoren in JavaScript[edit]

Zeichen	Beschreibung
===	gleich (Wert und Datentyp)
==	gleich (Wert)
!==	ungleich (Wert und Datentyp)
!=	ungleich (Wert)
>	größer als
<	kleiner als
>=	größer gleich oder gleich
<=	kleiner gleich oder gleich

// Beispiel 1
let condition = true;
if(condition) {
    alert("Die Bedingung trifft zu.");
}

// Beispiel 2
let userInput = Number(prompt("Was ist das Ergebnis aus 3 + 2?"));
if(userInput === 5) {
    console.log("Richtige Lösung!");
} 
if(userInput < 5) {
    console.log("Wert ist zu klein");
} else if(userInput > 5) {
    console.log("Wert ist zu groß");
}
if(userInput !== 5) {
    console.log("Wert ist falsch!");
}

// Beispiel 3
"use strict";
let userInput1 = Number(prompt("Ergebnis aus 2 + 3?"));
let userInput2 = Number(prompt("Ergebnis aus 2 * 3?"));
if(userInput1 === 5 || userInput2 === 6) {
    console.log("Mindestens eine Antwort ist richtig?");
} else {
    console.log("Beide Antworten sind falsch");
}

Arrays[edit]

Arrays sind spezielle Variablen, die mehrere Werte enthalten können
sind 0-indiziert (erste Position im Array ist 0, nicht 1)
Bei Arrays in JavaScript müssen Elemente nicht den gleichen Datentyp aufweisen

// Variante 1: Entspricht Vorgaben für objektorientierte Programmierung 
let myArray = new Array();


// Variante 2: Häufiger im Einsatz - Kann gleich befüllt werden
let newArray = [];
newArray = ["Hund", "Katze", "Maus"];
alert(newArray);


// Beispiel
// Produkt, Preis, Lieferbar
let newArray = ["Brot", 2.99, true];
alert(newArray);

Länge des Arrays: .length[edit]

.length enthält die Länge des Arrays(ist 1 Element enthalten, ist die Länge auch 1)

// Ausgabe bestimmte Stelle des Array
let newArray =  ["Hund", "Katze", "Maus"];
alert(newArray[0]);

// Wert an bestimmter Stelle ändern
newArray[0] = "Papagei";

// Wert hinzufügen
newArray[3] = "Hund";

// um an das Ende des Arrays einen Wert dynamisch hinzuzufügen, kann '''.length''' verwendet werden, leere Arraypositionen & Überschreibungen können so vermieden werden!
neuesArray[newArray.length] = "Hund";

Häufig genutzte Array-Methoden[edit]

.push() - fügt ein Element am Ende des Arrays hinzu
.pop() - entfernt das letzte Element im Array und returned es
.unshift() - fügt ein Element am Anfang des Arrays hinzu
.shift() - entfernt das erste Element im Array und returned es


let fruitBasket = ["🍌", "🍎", "🍊"];
console.log(fruitBasket);

//mit .push() fügen wir ein neues Element am Ende des Arrays hinzu
fruitBasket.push("🍇");
console.log(fruitBasket);

//mit .pop() entfernen wir das letzte Element im Array
fruitBasket.pop();
console.log(fruitBasket);

//mit .unshift() fügen wir ein Element am Anfang des Arrays hinzu
fruitBasket.unshift("🍇");
console.log(fruitBasket);

//mit .shift() entfernen wir das erste Element im Array
fruitBasket.shift();
console.log(fruitBasket);

Mehrdimensionale Arrays[edit]

let myArray = [];
myArray[0] = ["Brot", 1.99, true];
myArray[1] = ["Krapfen", 0.99, true];
myArray[2] = ["Reindling", 6.99, false];
myArray[3] = ["Linzer Torte", 13.99, true];
myArray[4] = ["Windbeutel", 0.80, false];
// An bestimmte Stelle zugreifen
console.log(myArray[0][1]);
console.log(myArray[2][2]);
console.log(myArray[4][0]);
console.log(myArray);

Schleifen[edit]

while-Schleife[edit]

"use strict";
let input = Number(prompt("Bis zu welchem Wert möchten sie zählen?"));
let i = 1;
while(i <= input) {
    console.log(i);
    i++;
}

// oder
let content = "Bis zu welchem Wert möchtest du zählen?";
let input = Number(prompt(content));

do-while-Schleife[edit]

Das do...while statement erstellt eine Schleife, die einen bestimmten Ausdruck ausführt, bis die zu überprüfende Aussage falsch wird

"use strict";
let input;
do {
    input = prompt("Ergebnis aus 3 + 2?");
} while(input != 5);
alert("Richtige Antwort!");

for-Schleife[edit]

"use strict";
let content = "Bis zu welchem Wert möchtest du zählen?";
let input = Number(prompt(inhalt));

for (let i = 1; i <= input; i++) {
    console.log(i);
}

Sonderform der for-Schleife[edit]

"use strict";
let arr = [2, 5, 9, 4, 2];

for (let value of arr) {
    console.log(value);
}

Funktionen definieren und aufrufen[edit]

Dient dazu, bestimmte Abfolge von Befehlen außerhalb des Hauptprogramms abzuspeichern
Macht es möglich, sie durch Nennung des Funktionsnamens an einer anderen Stelle aufzurufen

"use strict";
function greeting() {
    let name = prompt("Gib deinen Namen ein:");
    alert("Herzlich willkommen: " + name);
}

greeting();

Gültigkeitsbereich der Variablen[edit]

Variablen die innerhalb einer Funktion erstellt werden sind auch nur dort gültig
Variablen außerhalb einer Funktion ist im gesamten Bereich des Programms gültig = globale Variable
Achtung: Variable innerhalb der Funktion nicht noch einmal deklarieren
So wenig wie möglich globale Variablen nutzen => ua Fehleranfällig, Probleme bei der Wiederverwendung von Code können auftreten

"use strict";
function greeting() {
    name = prompt("Gib deinen Namen ein:");
    alert("Herzlich willkommen, " + name);
}
let name;
greeting();
console.log("Ihr Name: " + name);

Funktionen mit Übergabewerten[edit]

Übergabewert steht in den runden Klammern des Funktionsnamens und werden auch als Parameter der Funktion bezeichnet.
Sobald die Funktion mit den "tatsächlichen Werten" aufgerufen wird, heißen diese Argumente
Beliebiger Datentyp
Entweder direkt Wert übergeben oder eine Variable
Auch möglich mehrere Werte zu übergeben = mehrere Werte in der Funktionsklammer (durch einen Beistrich getrennt)

// Bsp 1
"use strict";
function greeting(name) {
    alert("Herzlich willkommen, " + name);
}
let user = prompt("Gib deinen Namen ein:");
greeting(user);


// Bsp 2
"use strict";
function greeting(name, age) {
    console.log("Name: " + name);
    console.log("Alter: " + age);
}
let user = prompt("Gib deinen Namen ein:");
let age = prompt("Gib dein Alter ein");
greeting(user, age);

Funktionen mit Rückgabewerten (return values)[edit]

Eine Funktion kann Werte an das Hauptprogramm übermitteln mit Hilfe eines Rückgabewert
Die Rückgabe erfolgt über das return Keyword
Jede Funktion darf nur einen einzigen Wert an das Programm zurück geben
Wenn mehrere Variablen übermittelt werden sollen => jeweils eine eigene Funktion erstellen oder Array erstellen und darin mehrere Werte aufnehmen

"use strict";
function sample(x) {
    let result= 2 * x * x + 5 * x + 7;
    return result;
}
let value = sample(3);
console.log(value);

Scope in JavaScript[edit]

Es gibt es drei Arten von Scope: Global Scope, Function Scope und Block Scope Der Scope definiert den Gültigkeitsbereich von Variablen.

"The Scope is a policy that manages the accessibility or visibility of variables."

Global Scope (var, let, const)[edit]

Jede Variable, die nicht in einer Funktion oder in einem Block (if-Statement, for-Schleife) deklariert wird. Ganz einfach gesagt, alle Variablen, die sich nicht in {} geschwungenen Klammern befinden. Auf Variablen, die im Global-Scope definiert werden, kann von überall aus dem Programm zugegriffen werden (und auch verändert werden). Ich kann auch innerhalb einer Funktion auf die “äußere” Variable zugreifen und sie verändern.

Beispiel Keksdose Part 1 🍪:
Probiert das Beispiel einfach selber aus, dann wird das Ganze schnell klar für euch!
Eine Keksdose für alle steht neben der Kaffeemaschine in unserem Büro, sie steht quasi global zur Verfügung.

let cookieJar = ["Oreos", " Prinzenrolle", " Chocolate-Chip-Cookie", " Karamellkekse"];

function cookiesForAll() {
    console.log(`Ich habe Zugriff auf die Keksdose mit: ${cookieJar}`);
    console.log(`Ich kann mir auch Kekse herausnehmen 😄, ich esse alle ${cookieJar.pop()}`);
}

cookiesForAll();

//Die Keksdose hat ist weniger voll, wir haben die globale Variable in der Funktion "cookiesForAll()" verändert
console.log(`Die Keksdose ist jetzt weniger voll: ${cookieJar}`);

Function Scope (var, let, const)[edit]

Trifft auf Variablen zu, die in einer Funktion definiert wurden. Man kann nur in dieser Funktion auf sie zugreifen und sie verändern.
Außerhalb der Funktion hat man keinen Zugriff darauf.

Beispiel Keksdose Part 2 🍪:
Die Keksdose gehört jetzt eurer Kollegin, die sie nicht mit euch teilen möchte. 😭
Deshalb sperrt sie sie in ihrer Schreibtischlade ein ...

function cookieDrawer() {
    //Die Kollegin kann innerhalb der Schreibtischlade auf die Keksdose zugreifen & auch etwas herausnehmen
    //Die Keksdose steht nur innerhalb der Funktion zur Verfügung

    let cookieJar = ["Oreos", " Prinzenrolle", " Chocolate-Chip-Cookie", " Karamelkekse"];
    console.log(`Innerhalb der Funktion hat sie Zugriff auf die Keksdose, in ihr befinden sich ${cookieJar}`);
    console.log(`Sie hat alle ${cookieJar.pop()} gegessen`);
    console.log(`In der Keksdose sind noch ${cookieJar}`);
}

cookieDrawer();

//Jetzt möchtet ihr einen Keks aus der Keksdose, leider könnt ihr nicht darauf zugreifen und auch nichts herausnehmen 😒,
//Hier bekommt ihr einen referenceError, da ihr keinen Zugriff auf die Variable von außerhalb der Funktion habt.
console.log(`Ich möchte etwas aus der Keksdose, darin befindet sich ${cookieJar}`);

Block Scope (let, const)[edit]

Auf Variablen im Block Scope, also let & const, kann nur in dem Block zugegriffen werden, indem sie definiert wurden (If-Statement, For-Loop, ...)

Beispiel Keksdose Part 3 🍪:
In der Firma wurde eine neue Regel eingeführt, dass nur mehr "brave" MitarbeiterInnen Zugriff zur Keksdose haben, die anderen nicht .. 🤔

let goodEmployee = true;

function goodOrBadEmployee() {
    if(goodEmployee){
        let cookieJar = ["Oreos", " Prinzenrolle", " Chocolate-Chip-Cookie", " Karamelkekse"];
        console.log(`Innerhalb dieses IF-Blocks habe ich Zugriff auf die Keksdose, in ihr befinden sich ${cookieJar}`);
        console.log(`Ich habe alle ${cookieJar.pop()} gegessen`);

    } else {
        console.log('Keine Kekse für dich');
        console.log(`Ich möchte aber Kekse aus der Keksdose 😭`);
    }
}

goodOrBadEmployee();

console.log(`Ich hätte gerne eine Keks, habe aber keinen Zugriff auf die ${cookieJar} 😢`);

let vs. var was ist der Unterschied?[edit]

Hier kommt wieder der Scope ins Spiel..
- der kleinste Gültigkeitsbereich von var liegt im Function Scope
- der kleinste Gültigkeitsbereich von let liegt im Block Scope
- verwendet man zum Beispiel für einen Schleifenzähler das var Keyword, kann man auch außerhalb der Schleife auf die Variable zugreifen.
- mit let ist das nicht möglich.

Ein Beispiel schadet sicher nicht, um das Ganze besser zu zeigen ;)

const arr = [ 1, 2, 3, 4, 5, 6 ,7, 8 ]

function processArray (arr) {
    //der Schleifenzähler wird mit dem var Keyword definiert
    for(var i = 0; i < arr.length; i++) {
        console.log('Element ', arr[i]);
    }
    //auch außerhalb der Schleife habe ich Zugriff auf die Variable i
    console.log(`How many times did my loop run? ${i} times`);
}

processArray(arr);

Wie sieht das Ganze mit let im Schleifenzähler aus?

const arr = [ 1, 2, 3, 4, 5, 6 ,7, 8 ]

function processArray (arr) {
    //der Schleifenzähler wird mit dem let Keyword definiert
    for(let i = 0; i < arr.length; i++) {
        console.log('Element ', arr[i]);
    }
    //Hier habe ich keine Zugriff mehr auf die Variable i
    console.log(`How many times did my loop run? ${i} times`);
}

processArray(arr);