JavaScript

DRY oder: Warum wir überhaupt programmieren

Bernhard Janetzki && Christian Müller

JavaScript:
Wie diese Nummer begann …

• 1995 - Netscape Navigator. Noch irgend jemand?
• 1996 – Aus Gründen des Marketings wird aus LiveScript JavaScript. (Nein. Nicht Java.)

FooBar: Erste Schritte im Programmieren

Programme, Daten und ihre elektronische Verarbeitung

1. Programme und ihre Anweisungen
2. Was sind Daten? – Daten und ihre Abbildung
3. Arbeiten mit Daten. – Operatoren, Kontrollstrukturen, Bedingungen

Anweisungen

Anweisungen
Ablauf eines Programms

Ein Programm besteht aus einer Reihe von Anweisungen, die nacheinander abgearbeitet werden. Eine Anweisung wird in JavaScript durch ein Semikolon ; abgeschlossen:

var foo = "Bar";

Variablen
Container für Werte

Variablen werden durch das Schlüsselwort var deklariert. Wir deklarieren eine Variable mit dem Namen meine_erste_variable

var first_var;

und weisen ihr durch = einen Wert zu:

first_var = "Der Werte meiner Variable";

Datentypen

Number

var numberOne = 2;
var numberTwo = -1.5;

console.log(numberOne + numberTwo);
0.5

String

Zeichenketten werden von einem " eingeschlossen initialisiert

var begin = "Call me Ishmael!";
var who = "FELD M!";

console.log(text);
Hallo

und können mit + verkettet werden:

console.log(text + who);
Hallo FELD M!

Boolscher Wert

true or false

var fact = true;
var lie = false;

Liste bzw. Array

Mit Listen, auch Arrays genannt, werden Variablen und Werte in einem Container zusammengefasst

var s = "String, diesen Typ kennen wir schon";
var my_list = [40, s, true, "Hello!", 2];

Zugriff auf die Elemente einer Liste erhalten wir über eckige Klammern [ ] und dem Index des Elements. Das erste Element hat den Index 0

console.log(my_list[0]);
40

console.log(my_list[1]);
"String, diesen Typ kennen wir schon"

console.log(my_list[0] + my_list[4]);
42

Objekte

var obj = {
    text: "Hello FELD M",
    count: 14,
    foo: ["Bar", 3],
    a: (42 && true)
};

Objekte

Zugriff auf die Eigenschaften eines Objekts durch den .

console.log(obj.text);
"Hallo FELD M"

console.log(obj.foo);
Array [ "Bar", 3 ]

console.log(obj.foo[0]);
Bar

console.log(obj.foo[1] * obj.count);
42

console.log(obj.foo[1].length);
2

Operatoren

+ - / *

console.log(1 + 3);
4

console.log(23 - 3);
20

console.log(70/10);
7

console.log(12 - 2 * 2);
8

% Modulo

„9 durch 4 ist 2 Rest 1“

console.log(9 % 4)
1

9 % 4 ergibt 1, weil 9 nicht ganzzahlig durch 4 teilbar ist: 4 passt 2 mal in 9. Es bleibt ein Rest von 1

console.log(5 % 3);
2

console.log(10 % 5);
0

console.log(5 % 5);
0

console.log(5 % 1);
0

== und !=

var player = 'Steph Curry';
var second = 'Dirk Nowitzki';

player == "Steph Curry";
true

second == 'Steph Curry';
false

second != player;
true

(logisches) Und

A && B
A und zugleich B

Ist A und zugleich B true, ist der Ausdruck A && B true, anonsten ist er false.

var fact = true;
var lie = false;

console.log(fact && lie);
false

console.log(fact && true);
true

console.log(fact && 42);
true

console.log(fact && 42 && true);
true

(logisches) Oder

A || B
A oder B

Ist A oder B true, ist der Ausdruck A || B true, ansonsten ist er false.

console.log(fact || lie);
true

console.log(lie || false);
false

console.log(lie || true);
true

console.log(lie || 42);
true

Kontroll-strukturen

Täglich grüßt das Murmeltier.

console.log("Tag 1: Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?");
console.log("Tag 2: Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?");
console.log("Tag 3: Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?");
...
console.log("Tag 10: Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?");

DRY?

Täglich grüßt das Murmeltier.

for (var counter = 1; counter <= 10; counter = counter + 1) {
    console.log("Tag " + counter + ": Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?");
}  

Tag 1: Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?
Tag 2: Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?
...
Tag 10: Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?

Täglich grüßt das Murmeltier.

for (var counter = 1; counter <= 10; counter = counter + 1) {
    console.log("Tag " + counter + ": Haben Sie manchmal Deja-Vus, Mrs. Lancaster ?");
}

• var counter = 1: Bei welchem Wert soll die Schleife beginnen?
• counter <= 4: Bis wohin soll die Schleife durchlaufen werden?
• Um wie viel soll counter am Ende jeder Runde erhöht werden

Fallunterscheidungen

var my_condition = true;
if (my_condition) {
    console.log("Bedingung ist wahr!");
}

var text = "hallo";
// Text vergleich, prüfen aus Gleichheit
if (text == "hallo") {
    console.log("Text ist hallo");
}
// Text vergleich, prüfen auf Ungleichheit
if (text != "hallo welt") {
    console.log("Text ist nicht hallo welt");
} else {
    console.log("Text ist hallo welt");
}

Fallunterscheidungen

Gebe alle Zahlen aus. Ist die Zahl durch zwei teilbar, soll die Zahl und der Text "linke Tasche" ausgegeben werden. Sonst gebe die Zahl mit dem Text "rechte Tasche" aus.

var to_distribute = [10, 12, 23, 27, 42];

for (var counter = 0; counter < to_distribute.length; counter = counter + 1) {
    if (to_distribute[counter] % 2 == 0) {
        console.log(to_distribute[counter] + " left Pocket");
    } else {
        console.log(to_distribute[counter] + " right Pocket");
    }
}

Ende erster Teil