Difference between revisions of "JavaScript 1 Einführung"

From Coders.Bay Wiki
Jump to navigation Jump to search
Line 231: Line 231:
</pre>
</pre>


Wie sieht das Ganze mit '''let''' im Schleifenzähler aus?
'''Wie sieht das Ganze mit '''let''' im Schleifenzähler aus?'''
<pre>
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);
</pre>


====const - Konstanten verwenden====
====const - Konstanten verwenden====

Revision as of 09:53, 5 May 2022

Allgemeines

  • 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 Electronoder 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

  • 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

  • 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

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"

  • 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

  • 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

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


Variablen in JavaScript

  • 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 meineErsteVariable;

// Der Variable einen Wert zuweisen
meineErsteVariable = 5;
/* oder */
meineErsteVariable = "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 meineVariable = 5, text = "Hallo du", zahl = 10;


Scope in JavaScript

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)

Jede Variable, die sich nicht in einer Funktion oder in einem Block (if-Statement, for-Schleife) deklariert wird. Ganz einfach gesagt, aller 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 keksDose = ["Oreos", " Prinzenrolle", " Chocolate-Chip-Cookie", " Karamellkekse"];

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

kekseFuerAlle()

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


Function Scope (var, let, const)

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 kekseInDerLade() {
    //Die Kollegin kann innerhalb der Schreibtischlade auf die Keksdose zugreifen & auch etwas herausnehmen
    //Die Keksdose steht nur innerhalb der Funktion zur Verfügung

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

kekseInDerLade();

//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 ${keksDose}`);


Block Scope (let, const)

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 employeeGood = true;

function goodOrBadEmployee() {
    if(employeeGood){
        let keksDose = ["Oreos", " Prinzenrolle", " Chocolate-Chip-Cookie", " Karamelkekse"];
        console.log(`Innerhalb dieses IF-Blocks habe ich Zugriff auf die Keksdose, in ihr befinden sich ${keksDose}`);
        console.log(`Ich habe alle ${keksDose.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 ${keksDose} 😢`);

let vs. var was ist der Unterschied?

  • 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 varKeyword, 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 verstehen ;)

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);

const - Konstanten verwenden

  • Variablen, von denen man möchte, dass sie sich im Programmablauf nicht verändern
  • Verwendung kann Performance eines Programms etwas verbessern
  • Beispiele:
    • Speichern von Farben 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 verwenden
const productCategories = ["Cars", "Bicycles", "Bikes", "Accessories"];

Datentypen ermitteln

  • Mit typeof kann ausgegeben werden, um welchen Typ von Variable es sich handelt
  • Befehl: document.write() schreibt Inhalte direkt in das Hauptfenster
  • 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 ganzeZahl = 3;
let kommazahl = 2.34;
let buchstabe = "a";
let wort = 'hallo';
let wahrheitswert = true;
let ohneInitialisierung;

document.write("ganzeZahl: " + typeof ganzeZahl + "<br>");
document.write("kommazahl: " + typeof kommazahl + "<br>");
document.write("buchstabe: " + typeof buchstabe + "<br>");
document.write("wort: " + typeof wort + "<br>");
document.write("wahrheitswert: " + typeof wahrheitswert + "<br>");
document.write("ohneInitialisierung: " + typeof ohneInitialisierung + "<br>");


Datentypen verändern

  • Eingabeaufforderung durch prompt-Befehl
  • Ausgabe des Datentyp (string)
  • Ausgabe und versuch einen String mit einer Zahl zu addieren, es kommt zu einer Konkatenaktion
  • Ausgabe von Zeilenumbrüchen
  • Umwandlung des Eingabewerts in eine Zahl
  • Ausgabe und Addition der Zahl mit 3 = richtiges Ergebnis
let eingabe = prompt("Gib eine Zahl ein:");
document.write("Datentyp: " + typeof eingabe + "<br>");
document.write(eingabe + 3);
document.write("<br><br>");
eingabe = Number(eingabe);
document.write("Datentyp: " + typeof eingabe + "<br>");
document.write(eingabe + 3);


Operationen mit Variablen durchführen

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 meineVariable = 3;
meineVariable = meineVariable * 2;
document.write(meineVariable + "<br>");
meineVariable = 3;
meineVariable *= 2;
document.write("Kurzschreibweise: " + meineVariable + "<br>");
meineVariable = 3;
meineVariable = meineVariable + 5;
document.write(meineVariable + "<br>");
meineVariable = 3;
meineVariable += 5;
document.write("Kurzschreibweise: " + meineVariable + "<br>");


if-Abfrage

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

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

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


Arrays

  • Arrays sind in JS Objekte mit besonderen Eigenschaften
  • können mehrere Werte enthalten
  • sind 0-indiziert (erste Position im Array ist 0, nicht 1)
  • Elemente müssen nicht den gleichen Datentyp aufweisen
// Variante 1: Entspricht Vorgaben für objektorientierte Programmierung 
let meinArray = new Array();


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


// Beispiel
// Produkt, Preis, Lieferbar
let neuesArray = ["Brot", 2.99, true];
alert(neuesArray);
Länge des Arrays: .length
  • .length enthält die Länge des Arrays(ist 1 Element enthalten, ist die Länge auch 1)
// Ausgabe bestimmte Stelle des Array
let neuesArray =  ["Hund", "Katze", "Maus"];
alert(neuesArray[0]);

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

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

// um an das Ende des Arrays einen Wert hinzuzufügen, kann '''.lenght''' verwendet werden, leere Felder & Überschreibungen können so vermieden werden!
neuesArray[neuesArray.length] = "Hund";
Mehrdimensionale Arrays
let meinArray = [];
meinArray[0] = ["Brot", 1.99, true];
meinArray[1] = ["Krapfen", 0.99, true];
meinArray[2] = ["Reindling", 6.99, false];
meinArray[3] = ["Linzer Torte", 13.99, true];
meinArray[4] = ["Windbeute", 0.80, false];
// An bestimmte Stelle zugreifen
document.write(meinArray[0][1] + "<br><br>");
document.write(meinArray[2][2] + "<br><br>");
document.write(meinArray[4][0] + "<br><br>");
document.write(meinArray);


Schleifen

while-Schleife

  • Befehl decodeURI
    • Notwendig, da der Text Umlaute enthält
    • Werden sonst im Feld nicht richtig angezeigt
"use strict";
let eingabe = Number(prompt(decodeURI("Bis zu welchem Wert m%C3%B6chten sie z%C3%A4hlen?")));
let i = 1;
while(i <= eingabe) {
    document.write(i + "<br>");
    i++;
}

// oder
let inhalt = encodeURI("Bis zu welchem Wert möchtest du zählen?")
let eingabe = Number(prompt(decodeURI(inhalt)));

do-while-Schleife

  • Das do...while statement erstellt eine Schleife, die einen bestimmten Ausdruck ausführt, bis die zu überprüfende Aussage falsch wird
"use strict";
let eingabe;
do {
    eingabe = prompt("Ergebnis aus 3 + 2?");
} while(eingabe != 5);
alert("Richtige Antwort!");

for-Schleife

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

for (let i = 1; i <= eingabe; i++) {
    document.write(i + "<br>");
}

Sonderform der for-Schleife

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

for (let wert of arr) {
    document.write(wert + "<br>");
}


Funktionen definieren und aufrufen

  • 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 begruessung() {
    let name = prompt("Gib deinen Namen ein:");
    alert("Herzlich willkommen: " + name);
}

begruessung();

Gültigkeitsbereich der Variablen

  • 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 begruessung() {
    name = prompt("Gib deinen Namen ein:");
    alert("Herzlich willkommen, " + name);
}
let name;
begruessung();
document.write("Ihr Name: " + name);

Funktionen mit Übergabewerten

  • Ü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 begruessung(name) {
    alert("Herzlich willkommen, " + name);
}
let anwender = prompt("Gib deinen Namen ein:");
begruessung(anwender);


// Bsp 2
"use strict";
function begruessung(name, alter) {
    document.write("Name: " + name + "<br>");
    document.write("Alter: " + alter);
}
let anwender = prompt("Gib deinen Namen ein:");
let alter = prompt("Gib dein Alter ein");
begruessung(anwender, alter);

Funktionen mit Rückgabewerten (return values)

  • 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 beispiel(x) {
    let ergebnis = 2 * x * x + 5 * x + 7;
    return ergebnis;
}
let wert = beispiel(3);
alert(wert);

Quelle: JavaScript programmieren für Einsteiger
ISBN: 978-3-96645-016-4