# JAVA SCRIPT -- EINSTEIGER GUIDE

## LINKS
### Examples
* https://www.w3schools.com/js/js_examples.asp

:::info
***Linksammlung für viele Verschiedene Anwendungen von javascript.***
:::

## GENRERAL

:::warning
++**Did You Know?**++
JavaScript and Java are completely different languages, both in concept and design.

JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997.
ECMA-262 is the official name of the standard. ECMAScript is the official name of the language.
:::

## WICHTIG WICHTIG WICHTIG WICHTIG WICHTIG WICHTIG

> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==
> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==
> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==
> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==
> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==
> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==
> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==
> ==***GROSS UND KLEINSCHREIBUNG IST BEI DEN BEFEHLEN SEHR WICHTIG***==

### VARIABLEN

Um eine Variable anzulegen benutzt man den befehl ==var [Variablenname] = [Wert]==

var Vorname = "Thomas";

:::info
Hier erhält die Variable "Vorname" den Wert **"Thomas"**
:::

* ==Zahlen== gibt man ==ohne " "== an
* ==Strings== muss man ==in " "== setzen

:::warning
Wenn man **mehrere Variablen in einer Zeile** zuweisen möchte ==trennt man diese durch Komma (**,**)==
:::

var Vorname="Thomas", Nachname="Lehmann", Alter=33;

:::info
Hier erhält die Variable
"Vorname" den Wert **"Thomas"**,
"Nachname" den Wert **"Lehmann"**
"Alter" den Wert **33**.
:::

### OPERATOREN

#### Mathematische Operationen
* **Multiplikation:** x * y
* **Division:** x / y
* **Addition:** x + y
* **Subtraktion:** x - y
* **Rest:** x % y
Hier gibt man nur den Rest der Division von (x / y) an

#### Logische Operatoren (Comparision)
* **Größer als** >
* **Gleich** ==
* **Nicht** !=

#### Assignment Operator
Man kann auch über einen anderen Weg 2 Variablen mit einerander Verbinden.

var x = 3;
var y = 5;

(x += y);     -- andere Schreibweise für x = x + y
(x -= y);     -- andere Schreibweise für x = x - y
(x *= y);     -- andere Schreibweise für x = x * y
(x /= y);     -- andere Schreibweise für x = x / y

:::info
==Zeile 4== **x** = **8**
==Zeile 5== **x** = **-2**
==Zeile 6== **x** = **15**
==Zeile 7== **x** = **0,6**
:::

### DATA TYPES

var Alter = 16;                                       // Number
var Nachname = "Lehmann";                             // String
var x = {Vorname: "Thomas", Nachname: "Lehmann"};     // Object

:::info
* Datentyp für eine Zahl : **Number**
* Datentyp für Schrift: **String**
* Datentyp für eine Variable mit mehreren Inhalten: **Object**
:::

### FUNCTIONS

function myFunction() {
    alert("Hello World!");
    }

myFunction();

:::info
In Zeile 1-3 erstellen wir die Funktion "**myFunction()**"
Die Funktion beinhaltet den Befehl: "**alert("Hello World!")**"

In Zeile 5 wird die Funktion ausgeführt.
:::

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello";
    }

:::info
Hier gibt die Funktion im Inneren des HTML bei der ID "Demo" den Wert =="Hello"== aus.
:::

### OBJECTS

var person = {Vorname: "Thomas", Nachname: "Lehmann"}; 
alert(person.Vorname);

:::info
Ich extrahiere den Wert der Variable **Vorname** aus dem Object **person**
:::

var person = {name: "John", age: 50};
alert(person.name + " ist " + person.age);

:::info
Ich ==erstelle ein Object **person**== mit den Variablen **name** und **age**. Danach gebe ich mir auf dem Bildschrim aus: **John ist 50**.
:::

### EVENTS

<button onclick="alert('Hello')">Click me.</button>

:::info
Das Buttonelement macht etwas wenn man es anklickt.
Es ==öffnet sich ein Fenster== mit der Ausgabe **==Hello==**.
:::

<button onclick="myFunction()">Click me.</button>

:::info
Wenn der Button gedrückt wird, wird die ==Funktion **myFunction()** ausgeführt==.
:::

<div onmouseover="this.style.backgroundColor='red'">myDIV.</div>

:::info
Das DIV-Element ändert seine Hintergrundfarbe zu 'rot' wenn die Maus drüber fährt.
:::

### STRINGS

#### LÄNGE EINES STRINGS

var txt = "Hello World!";
var x = txt.length;
alert(x);

:::info
Hier benutze ich die **"x.lenght - property"** um die ==Länge des Wertes der Variable **txt** auszugeben==.
:::

#### STRINGS ZUSAMMENFÜHREN

var str1 = "Hello ";
var str2 = "World!";
alert(str1 + str2);

:::info
Die beiden ==Strings werden zusammen geführt== und es wird ausgegeben.
Man sieht: **"Hello World!"**
:::

#### INDEX EINES ZEICHEN EINES STRINGS

var txt = "abcdefghijklm";
var pos = txt.indexOf("h");
alert(txt);

:::info
Hier benutze ich die **"x.indexOf("[ZEICHEN]") - property"** um den ==Index des Wertes des Zeichens der Variable **txt** auszugeben==.
Ich suche hier im Beispiel also die Stelle, an der sich das Zeichen **h** im String **"abcdefghijklm"** befindet.
:::

:::warning
++**Achtung:**++ Der ==Index des Zeichens beginnt bei **0**== !
:::

#### ETWAS AUS STRINGS AUSSCHNEIDEN (***slicing***)

var txt = "I can eat bananas all day";
var x = txt.slice(10,17);

:::info
Hier ==schneide ich etwas aus dem String der Variable **txt** aus==. Ich schneide ==nach dem 10. bis nach dem 17. Zeichen== alles aus und ==speichere es in einer Neuen Variable **x**==.

**also:**
I can eat ==|bananas|== all day.
:::

#### ETWAS IN EINEM STRING AUSTAUSCHEN (***replace***)

var txt = "Hello World";
txt = txt.replace("Hello", "Welcome");

:::info
Hier wird das Wort =="**Hello**" durch das Wort "**Welcome**" ausgetauscht==.
:::

#### STRING IN GROß-/KlEINBUCHSTABEN UMWANDELN (***toUpperCase/toLowerCase***)

var txt = "Hello World";
txtUP = txt.toUpperCase();
txtLOW = txt.toLowerCase();

:::info
Hier wandle ich den ==Inhalt von der **Variable "txt"** in Großbuchstaben== um und speichert diesen in **txtUP**.
Und ich wandle den ==Inhalt von der **Variable "txt"** in Kleinbuchstaben== um und speichere diesen in **txtLOW**.
:::

### ARRAYS

#### Array Index auslesen

var cars = ["Saab", "Volvo", "BMW"];
var x = cars[1];

:::info
Hier ==erstelle ich ein Array== names **"cars"**.
Anschließend ==weise ich der Variable x den **[1]** ten Arrayeintrag zu==.
<br>
:::warning
**Achtung:** Arrays beginnen mit dem Index ==0==.
:::

#### Array Index überschreiben

cars[0] = "Ford";

:::info
Hier ==**überschreibe ich den ersten**(++lt. Programmiersprache den Nullten++) Arrayeintrag==.
:::

#### Array Länge bestimmen - Anzahl der Elemente (***length***)

var cars = ["Volvo", "Jeep", "Mercedes"];
alert(cars.length);

:::info
Gibt die ==Anzahl der Elemente(Länge) im Array **"cars"**== aus.
:::

#### Letzte Element im Array löschen (**pop()**)

var fruits = ["Banana", "Orange", "Apple"];
fruits.pop();

:::info
Es wird das ==letzte Element im Array "**fruits**" gelöscht==.
:::

#### Element am Ende des Arrays einfügen (**push()**)

var fruits = ["Banana", "Orange", "Apple"];
fruits.push("Kiwi");

:::info
Hier fügt man das ==Element "**Kiwi**" am Ende des Arrays "**fruits**"== ein.
:::

#### Elemente aus einem Array entfernen ( ***splice( , )*** )

var fruits = ["Banana", "Orange", "Apple", "Kiwi"];
fruits.splice(1,2);

:::info
Hier ==entferne ich "**Orange**" und "**Apple**" aus dem Array== "**fruits**".
<br>
:::danger
**Achtung:** Hier gibt man einen =="von-bis" Bereich== zum Ausschneiden an.
<br>
:::warning
***fruits.splice(1,3)*** würde also "Orange", "Apple" und "Kiwi" ausschneiden.
:::

#### Elemente in einem Array sortieren ( ***sort()*** )

var fruits = ["Banana", "Orange", "Apple", "Kiwi"];
fruits.sort();

:::info
Hier ==sortiere== ich das Array "fruits" ==alphabetisch==.
Neuer Ihnahlt: **fruits = ["Apple", "Banana", "Kiwi", "Orange"]**
:::

### DATE FUNKTIONEN

#### Aktuelles Datum ( ***new Date()*** )

var d =  new Date();

:::info
Die Variable "d" bekommt den Wert des aktuellen Datums.
<br>
:::warning
**Ausgabeformat:**
Thu Sep 19 2019 14:40:07 GMT+0200 (Mitteleuropäische Sommerzeit)
:::

#### 4-stellige Jahreszahl ausgeben ( ***getFullYear()*** )

var d = new Date();
year = d.getFullYear();

:::info
***Vierstellige Jahreszahl*** wird der Variable "year" zugewiesen.
:::

#### Monat auslesen ( ***getMonth()*** )

month = d.getMonth();

:::info
**Monatszahl** wird in Variable "month" gespeichert.
<br>
:::warning
Monatszahlen von **0 - 11**
:::

#### 4-stellige Jahreszahl ändern ( ***setFullYear(yyyy)*** )

d.setFullYear(2020);

:::info
Die ==Jahreszahl wird geändert== zu **2020**.
:::

### MATH METHODS

#### Zufällige Zahl erzeugen ( ***Math.random()*** )

var r = Math.random();

:::info
Ich erzeuge eine Zufällige Zahl.
<br>
:::warning
**Achtung:** Die erzeugte Zahle liegt zwischen **0......1**.
:::

#### Größte Zahl ausgeben lassen ( ***Math.max(x,y)*** )

var r = Math.max(10,20);

:::info
r = 20
:::

#### Abrunden einer Zahl ( ***Math.round(x.y)*** )

var x = Math.round(5.49999);
var y = Math.round(5.5);

:::info
x = 5
y = 6
<br>
:::warning
Sobald die zu rundende Zahl ==x >= x **.5**== ist wird zur nächst höheren Ganzen Zahl aufgerundet.
:::

#### Wurzel ziehen

var x = Math.sqrt(9);

:::info
x=3
:::

### COMPARISON

#### **Wenn A = X, dann B = Y, sonst B = Z**

var voteable = (age < 18) ? "Too young" : "Old enough";

:::info
Eigentlich ist diese Schreibweise nichts anderes als eine IF-Abfrage.
IF (age <18) --- hier als ==(age < 18) ?==
ELSE --- hier als ==:==
:::

### CONDITIONS
#### Aufbau einer IF

if (x > y) {
  alert("Hello World");
}

#### Aufbau einer IF - ELSE

if (x > y) {
    alert("Hello World");
} else {
  alert("Goodbye");
}

### SWITCH

switch(fruits) {
case
 "Banana":
    alert("Hello")
    break;
case
 "Apple":
    alert("Welcome")
    break;    
}

:::info
Es wird ==überprüft ob die Variable "**fruits**" einen Bestimmten Wert== hat.
Im Fall "Banana" wird Hallo ausgegeben.
Im Fall "Apple" wird Welcome ausgeben.
<br>
:::warning
Es kann immer ==nur ein Fall eintreten==. Und die zu prüfende ==Variable darf nur ein Element enthalten==.
:::

switch(fruits) {
  case "Banana":
    XXXXXX
  case "Apple":
    XXXXXX
  default:
    alert("Neither");
  }

:::info
Wenn ==***keiner der Fälle eintritt***, tritt ein ***Standartfall*** ein==:
In diesem Beispiel erscheint ein ***Fenster mit: "Neither"*** .
:::

### LOOP (VON 1 BIS 10)

var i;
for (i = 0; i < 10; i++) {
  console.log(i);
}

:::info
Ich erzeuge eine ==Schleife die **von i=0 bis i<10** (also 9) wiederholt==.
Die Schrittweite ist =**"i++"**==, das heisst i wird ==bei jeder wiederholung **um 1 erhöht**==.

==**console.log(i)** schreibt "**i**" in die Console im Debugger(F12)==
:::

### LOOP OVER ARRAY

var fruits = ["Apple", "Banana", "Orange"];
for (x in fruits) {
  console.log(x);
}

:::info
Ich erzeuge eine ==Schleife, die über alle Elemente eines Arrays wiederholt==.

==**console.log(x)** schreibt "**x**" in die Console im Debugger.==
<br>
:::warning
Man erwartet hier vielleicht, dass die Elemente selbst ausgegeben werden.
Die ==**tatsächliche Ausgabe** ist aber der **Index** des Elements==, also: **0,1,2**.

++Um die Elemente selbst auszugeben:++

for (x in fruits) {
  console.log(fruits[x]);
}

:::

### WHILE --- wiederhole solange bis

var i = 0;
while (i < 10) {
  console.log(i);
  i++
}

:::info
Solange i < 10 ist....
:::

### BREAK

for (i = 0; i < 10; i++) {
  console.log(i);
  if (i == 5) {
  break;    
  }
}

:::info
Wenn =="i" den Wert "5" erreicht, stopp== die Schleife.
:::

### JUMP / CONTINUE

for (i = 0; i < 10; i++) {
  if (i == 5) {
  console.log("dieses i fehlt");
  console.log("Es wird kein weiterer Quellcode ausgeführt.");
  continue; 
  }
  console.log("Hier könnte weiterer Quellcode stehen.");
  console.log("i ist ", i);
}

:::info
Wenn "i" den Wert "5" erreicht hat, schreibe: "dieses i fehlt" in die Console im Debugger und ==gehe sofort zum **nächsten "i"** ohne den weiteren Inhalt der Schleife auszuführen==.
:::
##### ESCAPE CARACTERS


:::warning
Manche Zeichen in den Programmiersprachen können nicht verwendet werden, weil sie zum Quelltext geören. Deswegen wurden bestimmte Zeichenfolgen eingeführt, die für diese speziellen Zeichen stehen und übersetzt werden.
:::

var txt = "We are \"Vikings\"";
alert(txt);

:::info
Es öffnet sich ein Fenster mit dem Inhalt **We are "Vikings"**.
:::

### getElementById

<p id="demo"></p>
<script>
    document.getElementById("demo").innerHTML = "Hello";
</script>

:::info
Im Javascript <script></script> wird nun ==nach der **ID = "demo"** gesucht==.
Wenn diese gefunden ist, wird alles was zwischen den < p> < /p> Tags steht ==mit dem Wert "**Hello**" überschrieben==.
**Das macht der Befehl:**
innerHTML="Hello"
:::

### getElementsByTagName

<p id="demo"></p>
<script>
    document.getElementsByTagName("p")[0].innerHTML = "Hello";
</script>

:::info
==Suche ersten Tag mit dem Namen: **"p"**== (**man fängt im Code immer bei 0 an zu zählen**)
Überschreibe alles zwischen den Tags mit "Hello".
:::

### ALERT

<script>
  alert('Hallo Welt!');
</script>

:::info
In diesem Script wird eine Warnmeldung (alert) mit dem Text ==Hallo Welt!== aufgerufen. Es wird ein POP UP Fenster erzeugt
:::
<br>

>Speichern Sie das Script in einer Datei mit der Endung .htm oder .html ab und laden Sie es im Browser (i. d. R. über Datei → Datei öffnen). Obwohl doctype und html-Tag am Anfang des Dokuments fehlen, erkennt der Browser an der Dateiendung, dass der Inhalt nicht als reiner Text, sondern als HTML-Code behandelt werden soll. ==Der ***script-Tag*** leitet einen ***Script-Bereich*** ein, in den Sie Javascript-Code notieren und ausführen lassen können.== Am Ende des Dokuments müssen Sie ihn wieder schließen. Der schließende html-Tag ist dagegen ebenfalls optional und kann weggelassen werden.
---

### Verwendung von Variablen

<script>
     var eingabe;
     eingabe = prompt('Bitte geben Sie Ihren Namen ein!','');
     alert('Hallo, ' + eingabe);
</script>

:::info
Dieses Programm fragt den Namen des Benutzers ab und begrüßt ihn dann persönlich.
:::
<br>

>Die Eingabe des Benutzers wollen wir zunächst in einer sogenannten Variablen abspeichern. Eine Variable ist sozusagen ein einfacher Behälter für Daten – man kann Daten hineinschreiben und sie zu einem späteren Zeitpunkt im Programm wieder auslesen und damit arbeiten. Sie müssen nicht festlegen, für welchen Datentyp (z. B. Zahlen oder Text) der Behälter bestimmt ist. Eine JavaScript Variable kann Werte aller Datentypen speichern und passt sich bei Bedarf an.

+ ***Empfehlung:***
Deklarieren Sie Variablen immer mit ==var==, da Sie sonst globale Variablen erzeugen, die später evtl. ungewollte Konsequenzen nach sich ziehen.
Geben Sie Variablen selbsterklärende, sogenannte sprechende Namen, damit Sie in ein paar Wochen wieder erkennen können, was diese Variable beinhalten soll.
Beachten Sie die Regeln für selbstvergebene Namen.

---