So... weiter

Hier hat sich seit dem letzten Eintrag nicht viel getan da ich arbeitstechnisch viel zu tun hatte und zwischendurch auch aus gesundheitlichen Gründen meine Konzentrationsspanne etwas limitiert war.

Nichts desto trotz versuche ich hier einige Aufgaben der letzten Kapitel von Eloquent Javascript einzutragen.

Objects and Arrays

Im vierten Kapitel Data Structures: Objects and Arrays haben wir über Arrays und Objekts gelernt und welche Unterschiede und Anwendungsbereiche sie haben.

Hierzu habe ich folgende Aufgaben gemacht:

The sum of a range

Hier sollen prinzipiell zwei Funktionen geschrieben werden: Einmal soll mit range() ein Array gebildet werden und mit sum() einträge eines Arrays zusammenaddiert werden.

/**
 * Chapter 04
 * The sum of a range
 */

'use strict';

// range
function range(n, m, steps) {
  var output = [];

  if (typeof steps === 'undefined') {
    steps = 1;
  }

  if (n < m) {
    for (var i = n; i <= m; i+=steps) {
      output.push(i);
    }
  } else {
    for (var i = n; i >= m; i-=steps) {
      output.push(i);
    }
  }

  return output;
}

console.log(range(1, 10));
console.log(range(1, 10, 2));
console.log(range(5, 0, 2));



// sum
function sum(array) {
  var output = 0;

  for (var i = 0; i < array.length; i++) {
    output += array[i];
  }

  return output;
}

console.log(sum(range(1, 10)));
            

ej-ch04_the-sum-of-a-range.html

Reversing an array

Bei dieser Übung soll die Reihenfolge eines Arrays umgedreht werden. Es gibt mehrere Möglichkeiten dies zu tun und sogar eine in JS eingebaute Methode namens reverse (array.reverse();), welches wir jedoch in dieser Aufgabe nicht benutzen dürfen. Ich habe hier nur ein Funktion geschafft:

/**
 * Chapter 04
 * Reversing an array
 */

'use strict';

var arr = [0,1,2,3,4,5];

function reverseArray(array) {
  var output = [];

  for (var i = 0; i < array.length; i++) {
    output.unshift(array[i]);
  }

  return output;
}

console.log(reverseArray(arr));
            

ej-ch04_reversing-an-array.html

Build A Table

Zusätzlich kam noch hinzu Kapitel 13 über das DOM (Document Object Model) zu lesen und die erste Aufgabe Build A Table umzusetzen.

Um ehrlich zu sein habe ich meiner Meinung nach viel zu viel Zeit für diese Aufgabe gebraucht und bin auch nicht all zu zufrieden mit meiner Umsetzung; Das Kapitel hat vieles über DOM-Manipulation erklärt aber ich musste trotzdem viel nachrecherchieren und ausprobierren bis ich geschafft habe eine Tabelle zu generieren.

Ich verstehe auch jetzt warum es viele Javascript Bibliotheken wie jQuery und ähnliche existieren um diese fummelige Angelegenheit zu vereinfachen.

/**
 * Chapter 13
 * Build A Table
 */

// add event listener so that document.body isn't null
document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  var MOUNTAINS = [
    {name: "Kilimanjaro", height: 5895, country: "Tanzania"},
    {name: "Everest", height: 8848, country: "Nepal"},
    {name: "Mount Fuji", height: 3776, country: "Japan"},
    {name: "Mont Blanc", height: 4808, country: "Italy/France"},
    {name: "Vaalserberg", height: 323, country: "Netherlands"},
    {name: "Denali", height: 6168, country: "United States"},
    {name: "Popocatepetl", height: 5465, country: "Mexico"}
  ];



  function buildTable(array) {
    var table  = document.createElement('table');

    var names     = [],
        heights   = [],
        countries = [];

    var rowsAmount   = array.length;
    var thArray      = Object.keys(array[0]);
    var columnAmount = thArray.length;


    // create  for 
    var tr = document.createElement('tr');
    var tableTr0 = table.appendChild(tr);

      for (var t = 0; t < columnAmount; t++) {
        var th = document.createElement('th');
        var tableTrTh = tableTr0.appendChild(th);
            tableTrTh.textContent = thArray[t];
      }

    // create normal 
    for (var i = 0; i < rowsAmount; i++) {
      var tr = document.createElement('tr');
      var tableTr = table.appendChild(tr);

      // create 
      for (var j = 0; j < columnAmount; j++) {
        var td = document.createElement('td');
        var tableTrTd = tableTr.appendChild(td);
            tableTrTd.textContent = MOUNTAINS[i][thArray[j]];
      }

    }

    return table;
  }

  document.body.appendChild(buildTable(MOUNTAINS));
});
            

ej-ch13_build_a_table.html

OMG! JS!

Nach dem vielen Hin- und Hergeschiebe mit Snap! war es diese Woche an der Zeit uns an Javascript zu wagen. Hierfür haben wir das Buch Eloquent Javascript, welches man auch online lesen kann, zu Hilfe genommen und uns durch die ersten drei Kapitel durchgekämpft.

Käpt’n, die strukturelle Integrität des Schiffs liegt bei... 100 Prozent.

Ab dem zweiten Kapitel „Program Structure“ mussten wir dann zum Schluss verschiedene Übungsaufgaben bewältigen:

Looping a triangle

Hier war es die Aufgabe mit loops zu programmieren. Es sollte ein siebenstöckiges Dreieck, bestehend aus Rauten (#), in der Konsole ausgegeben werden. Hierfür habe ich diesen Code geschreiben:

<script type="text/javascript" charset="utf-8">

  var char = '#';
  while (char.length <= 7) {
    console.log(char);
    char += '#';
  }

</script>
            
  1. Während die Länge (hier: Anzahl der Ziffern) der Stringvariable char kleiner gleich 7 ist gib diese Variable in der Konsole aus und addiere daraufhin eine weitere Raute in dieselbe Variable.
  2. Wiederhole diesen Vorgang solange die Variablenlänge kleiner gleich 7 ist.

ej-ch02_looping-a-triangle.html

FizzBuzz

Bei der zweiten Aufgabe sollen die Zahlen 1 bis 100 in der Konsole ausgegeben werden.

Für Zahlen die jedoch durch 3 Teilbar sind soll stattdessen 'Fizz' und bei Zahlen die durch 5 Teilbar sind (und nicht 3) 'Buzz' ausgegeben werden.

Für Zahlen die wiederrum durch 3 UND 5 Teilbar sind soll 'FizzBuzz' ausgegeben werden.

<script type="text/javascript" charset="utf-8">

    var result;

    for (var i = 1; i <= 100; i++) {
      if (i % 3 === 0 && i % 5 === 0) {
        result = 'FizzBuzz';
      }
      else if (i % 3 === 0) {
        result = 'Fizz';
      }
      else if (i % 5 === 0) {
        result = 'Buzz';
      }
      else {
        result = i;
      }
      console.log(result);
    }

</script>
            
  1. Ich erstelle eine leere Variable und nenne es result.
  2. Mit einer for-Schleife wiederhole ich hier die if-Abfragen 100 mal: Ich fange bei 1 an (var i = 1;), definiere, dass die Wiederholung solange fortgeführt wird wenn i kleiner gleich 100 ist (i <= 100;), und erhöhe nach jeder Wiederholung mit i++ die Variable i den Wert um 1:
    1. In der ersten if-Abfrage prüfe ich ob i durch 3 ohne Restbetrag UND 5 ohne Restbetrag teilbar sind. Falls dem so ist, wird 'FizzBuzz' in result gespeichert.
    2. Falls die davorige Abfrage nicht stattfindet, prüfe ob i durch 3 ohne Restbetrag teilbar ist um dementsprechend 'Fizz' in result zu speichern.
    3. Falls die davorige Abfrage nicht stattfindet, prüfe ob i durch 5 ohne Restbetrag teilbar ist um dementsprechend 'Buzz' in result zu speichern.
    4. Falls alle davorigen Abfragen nicht stattfinden, wird die Zahl aus i in result gespeichern.
    5. Gib den Wert von result in der Konsole aus.

ej-ch02_fizzbuzz.html

Chess board

Die dritte und letzte Übung des zweiten Kapitels besteht darin ein Schachbrettmuster aus Rauten in der Konsole auszugeben:

<script type="text/javascript" charset="utf-8">

    var result = '';
    var size = 8;

    for (var i = 1; i <= size; i++) {
      // row B
      if (i % 2 === 0) {
        for (var j = 1; j <= size; j++) {
          if (j % 2 === 0) {
            result += ' ';
          }
          else {
            result += '#';
          }
        }
        // new line
        result += '\n';
      }

      // row A
      else {
        for (var j = 1; j <= size; j++) {
          if (j % 2 === 0) {
            result += '#';
          }
          else {
            result += ' ';
          }
        }
        // new line
        result += '\n';
      }
    } // END for

    console.log(result);

</script>
            
  1. Erstelle eine leere Stringvariable result und eine Variable size mit einer Zahl für die Rastergröße des Schachbretts. Bei der Zahl 8 soll ein 8×8 Raster entstehen.
  2. Erstelle die Reihen:
    Mit einer for-Schleife wird so oft wie size angibt (also 8) eine if-Afrage, welche überprüft ob i eine gerade Zahl ist (i % 2 === 0), iniziiert.
    1. Falls i gerade ist, speichere die Zeichen für das Raster (in dieser Reihe) mit einer weiteren for-Schleife und if/else-Abfrage in result. Hier soll zuerst ein Leerzeichen (' ') und dann eine Raute ('#') ausgegeben werden.
    2. Andernfalls, speichere die Zeichen für das Raster (in dieser Reihe) mit einer weiteren for-Schleife und if/else-Abfrage in result. Hier soll zuerst eine Raute ('#') und dann ein Leerzeichen (' ') ausgegeben werden.
  3. Gib result in der Konsole aus.

ej-ch02_chess-board.html

Funktionen machen das Leben um einiges einfacher

Das dritte Kapitel „Functions“ beschäftigt sich mit dem einsetzen von Funktionen in Javascript. Drei Übungsaufgaben dazu sahen dementsprechend so aus:

Minimum

Hier soll mit Hilfe einer Funktion die kleinste von zwei Zahlen in der Konsole ausgegeben werden:

<script type="text/javascript" charset="utf-8">

    function min(x, y) {
      if (x > y) {
        return y;
      } else {
        return x;
      }
    }

    console.log(min(6, -2));

</script>
            

ej-ch03_minimum.html

Recursion

Bei dieser Übung soll rekursiv mit einer Funktion ermittelt werden ob eine Zahl gerade ist oder nicht. Die Funktion soll auch zusätzlich mit negativen Zahlen umgehen können:

<script type="text/javascript" charset="utf-8">

  function isEven(n) {
    // Nur absolute (positive) Zahlen mit Math.abs(n)
    n = Math.abs(n);

    if (n === 0) {
      return true;
    } else if (n === 1) {
      return false;
    } else {
      return isEven(n % 2);
    }
  }

  console.log(isEven(-75));

</script>
            

ej-ch03_recursion.html

Bean counting

Hierfür sollen zwei Funktionen programmiert werden. Einmal soll mit der Funktion countBs(string) ermittelt werden wie oft der Buchstabe B in einem String auftaucht.

Die andere Funktion countChar(string, char) soll dann das selbe tun mit dem kleinen Unterschied, dass man selbst den Buchstaben aussuchen kann.

<script type="text/javascript" charset="utf-8">

  function countBs(string) {
    var counter = 0;

    for (var i = 0; i < string.length; i++) {
      if (string.charAt(i) === 'B') {
        counter++;
      }
    }

    return counter;
  }


  function countChar(string, char) {
    var counter = 0;

    for (var i = 0; i < string.length; i++) {
      if (string.charAt(i) === char) {
        counter++;
      }
    }

    return counter;
  }


  console.log(countBs('BBC'));

  console.log(countChar('kakkerlak', 'k'));

</script>
            

ej-ch03_bean-counting.html

But wait. There's more!

Zusätzlich kam noch hinzu die mathematische Funktion Fakultät als Funktion in Javascript rekursiv und iterativ umzusetzen. Dabei kam dieser Code raus:

<script type="text/javascript" charset="utf-8">

  // Iterativ
  function fakIt(n) {
    if (n < 2) {
      return 1;
    }
    else {
      var limit = n;

      for (var k = 1; k <= (limit-1); k++) {
        n *= k;
      }

      return n;
    }
  }

  // Rekursiv
  function fakRek(n) {
    if (n < 2) {
      return 1;
    } else {
      return n * fakRek(n-1);
    }
  }


  console.log(fakIt(6));
  console.log(fakRek(6));

</script>
            

fakultaet.html