kurse:ef05a-2021:js:jsbasics

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		 Previous revision
kurse:ef05a-2021:js:jsbasics [2022/02/02 12:04] – created Ivo Blöchligerkurse:ef05a-2021:js:jsbasics [2022/02/10 07:40] (current) – [if, else] Ivo Blöchliger
Line 1: Line 1:
 +====== Variablen und Stringinterpolation ======
 +Variablennamen in JavaScript folgen den gleichen Regeln wie in Python. Vor der ersten Verwendung sollten die Variablen entweder mit ''const'' oder ''let'' deklariert werden. Ohne Deklaration handelt es sich immer um **globale** Variablen, was vermieden werden sollte. Die Variablen sind nur in dem Block gültig, in dem Sie deklariert wurden. Ein Block steht zwischen ''{'' und ''}'' und umschliesst z.B. den Funktionskörper, For-Schlaufe, If o.ä.
  
 +Achtung: Funktionen sind auch nur Variablen (wie in Python auch).
 +
 +<code javascript>
 +// beispiel ist eine globale Variable
 +function beispiel() {
 +  const pi=3.14;
 +  let d = 15;
 +  // Backticks, damit ${ausdruck} evaluiert wird
 +  console.log(`Ein Kreis mit Durchmesser ${d} hat den Umfang ${pi*d}`);
 +  d = 7;
 +  console.log(`Ein Kreis mit Durchmesser ${d} hat den Umfang ${pi*d}`);
 +  pi = 2; // Fehler
 +}
 +
 +// Das ist ein Kommentar
 +// Funktion aufrufen
 +beispiel();
 +</code>
 +
 +<WRAP todo>
 +  * Testen und verstehen Sie obiges Beispiel (inklusive einbinden in eine HTML-Datei).
 +</WRAP>
 +
 +====== for loop ======
 +Der for-loop besteht aus 3 Elementen in einer Klammer und einem zu wiederholenden Codeblock.
 +  * Das erste Element ist die Initialisierung, typischerweise ''let i=0''. Die mit ''let'' deklarierte Laufvariable existiert nur im Block. Danach folgt ein '';''. 
 +  * Das zweite Element ist die Bedingung, die **vor** der Wiederholung geprüft wird, z.B. ''i<10''. Danach folgt ein '';''. 
 +  * Das dritte Element ist eine Anweisung, die jeweils **nach** der Wiederholung ausgeführt wird, z.B. ''i++'', was für ''i=i+1'' steht.
 +<code javascript>
 +for (let i=0; i<10; i++) {
 +        console.log(`${i} im Quadrat ist ${i*i}`);
 +}
 +</code>
 +
 +====== if, else ======
 +  * Die Bedingung steht **immer** in Klammern.
 +  * Anstatt ''and'', ''or'' und ''not'' wird ''&&'', ''||'' und ''!'' verwendet. (Wie in vielen anderen Programmiersprachen.)
 +  * Ein ''elif'' gibt es nicht per se, kann aber einfach als ''else if'' geschrieben werden.
 +<code javascript>
 +for (let i=0; i<2; i++) {
 +        let a = (i==1);  // a will be true or false
 +        for (let j=0; j<2; j++) {
 +                b = (j==1); // b will be true or false
 +                console.log(`a=${a}, b=${b} (i=${i}, j=${j})`);
 +                if (a && b) {
 +                        console.log("a and b are both true");
 +                } else {
 +                        console.log("at least one of a and b is false");
 +                }       
 +                if (a || b) {
 +                        console.log("at least one of a or b is true");
 +                } 
 +        }
 +}
 +</code>
 +
 +====== Funktionen ======
 +
 +<code javascript>
 +function ausgabe(a,b) {
 +        console.log(`a=${a}, b=${a}`);
 +}
 +
 +// Der erste Parameter f soll eine Funktion sein.
 +function advanced(f,i) {
 +        console.log(`f(${i})=${f(i)}`);
 +}
 +
 +function makeAdder(add) {
 +        // Closure, the variable add is captured
 +        return x => x+add;
 +}
 +
 +function demo() {
 +        // Lokale Variable, existiert nur in der Funktion demo
 +        let quadrat = function(x) {
 +                return x*x;
 +        };  // Strichpunkt weil die ganze Anweisung eine Variablendeklaration ist.
 +        console.log("ausgabe(32, quadrat(32));");
 +        ausgabe(32, quadrat(32));
 +        console.log("advanced(quadrat, 32);");
 +        advanced(quadrat, 32);
 +        console.log("advanced(function(x) { return x*x*x;}, 10); // Anonyme Funktion als Parameter");
 +        advanced(function(x) { return x*x*x;}, 10); // Anonyme Funktion als Parameter
 +        console.log("advanced(x => x*x*x, 10);");
 +        advanced(x => x*x*x, 10);  // Alternative Notation für eine Anonyme Funktion
 +
 +        console.log("let add5 = makeAdder(5);");
 +        let add5 = makeAdder(5);
 +        console.log(`add5(50)=${add5(50)}`);
 +}
 +
 +demo();
 +
 +</code>