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; // createfor 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)); }); 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>
- 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.- 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>
- Ich erstelle eine leere Variable und nenne es
result
.- Mit einer
for
-Schleife wiederhole ich hier dieif
-Abfragen 100 mal: Ich fange bei 1 an (var i = 1;
), definiere, dass die Wiederholung solange fortgeführt wird wenni
kleiner gleich 100 ist (i <= 100;
), und erhöhe nach jeder Wiederholung miti++
die Variablei
den Wert um 1:
- In der ersten
if
-Abfrage prüfe ich obi
durch 3 ohne Restbetrag UND 5 ohne Restbetrag teilbar sind. Falls dem so ist, wird'FizzBuzz'
inresult
gespeichert.- Falls die davorige Abfrage nicht stattfindet, prüfe ob
i
durch 3 ohne Restbetrag teilbar ist um dementsprechend'Fizz'
inresult
zu speichern.- Falls die davorige Abfrage nicht stattfindet, prüfe ob
i
durch 5 ohne Restbetrag teilbar ist um dementsprechend'Buzz'
inresult
zu speichern.- Falls alle davorigen Abfragen nicht stattfinden, wird die Zahl aus
i
inresult
gespeichern.- Gib den Wert von
result
in der Konsole aus.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>
- Erstelle eine leere Stringvariable
result
und eine Variablesize
mit einer Zahl für die Rastergröße des Schachbretts. Bei der Zahl 8 soll ein 8×8 Raster entstehen.- Erstelle die Reihen:
Mit einerfor
-Schleife wird so oft wiesize
angibt (also 8) eineif
-Afrage, welche überprüft obi
eine gerade Zahl ist (i % 2 === 0
), iniziiert.
- Falls
i
gerade ist, speichere die Zeichen für das Raster (in dieser Reihe) mit einer weiterenfor
-Schleife undif/else
-Abfrage inresult
. Hier soll zuerst ein Leerzeichen (' '
) und dann eine Raute ('#'
) ausgegeben werden.- Andernfalls, speichere die Zeichen für das Raster (in dieser Reihe) mit einer weiteren
for
-Schleife undif/else
-Abfrage inresult
. Hier soll zuerst eine Raute ('#'
) und dann ein Leerzeichen (' '
) ausgegeben werden.- Gib
result
in der Konsole aus.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>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>Bean counting
Hierfür sollen zwei Funktionen programmiert werden. Einmal soll mit der Funktion
countBs(string)
ermittelt werden wie oft der BuchstabeB
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>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>