Ablaufplan

In der Sitzung wurden spezielle Methoden, Statements und Funktionen betrachtet, sowie bedingte Anweisungen, Schleifen und Arrays. Weiter ging es um die Erstellung und Handhabung von Objekten.

Die Methode „console.log()“ gibt Werte in der Konsole ausgibt, was bei der Überprüfung von Funktionen, Parametern und sonstige Ausgaben hilfreich ist. Der Vorteil gegenüber z.B. „alert()“ ist, dass die Werte bei späterer Nutzung auf der Seite nicht ersichtlich sind, falls die Prüfmethode nicht aus dem Script gelöscht wurde.

Weiter ging es mit dem Return-Statement, welches eine Funktion abbricht und einen Wert zurückgibt. Hiermit kann Code kurzgefasst werden und Funktionen müssen nicht weiterlaufen.

Anonyme Funktionen haben keinen Namen und werden direkt ausgeführt. Sie sind simpel und Variablen befinden sich ausschließlich in der Funktion. So können sie von einer Verwechslung mit weiteren gleichnamigen Variablen ausgeschlossen werden.

Operator	Bedeutung	Ergebnis der Operation
==	istgleich	true, wenn die Werte gleich sind, sonst false.
!=	ungleich	true, wenn die Werte ungleich sind, sonst false.
>	größer	true, wenn der linke Wert größer als der rechte ist, sonst false.
>=	größergleich	true, wenn der linke Wert größer oder gleich dem rechten ist, sonst false.
<	kleiner	true, wenn der linke Wert kleiner als der rechte ist , sonst false.
<=	kleinergleich	true, wenn der linke Wert kleiner oder gleich dem rechten ist, sonst false.

Folgendes Thema waren bedingte Anweisungen und Schleifen, wobei zunächst Vergleichsoperatoren betrachtet wurden. Das ist eine beispielhafte Liste der gängigen Operatoren, welche bei bedingten Anweisungen und Schleifen zu Einsatz kommen:

Dazu wurde eine Sitzungsaufgabe gestellt, bei der eine Alterabfrage über ein Script geschehen soll. Ausgangs war folgendes Script:

if (meinAlter >=21 && meinAlter <= 75 && !sehrAengstlich) {

alert('okay... Sie halten das aus!');

}

Überprüft wird, ob ein Wert größer als 20 ist und gleichzeitig kleiner als 76 und gleichzeitig der Parameter „sehrAengstlich“ mit falseübergeben wurde. Im Seminar sollte die Funktion dann mit einer Ausgabe überelse erweitert werden, falls die Parameter nicht den erstgenannten Bedingungen entsprechen.

Ein switch-case funktioniert ähnlich der if-else Logik, nur wird der Wert im Vorfeld evaluiert. Wenn ein Eingabewert dem Case-Wert entspricht, wird der jeweilige weiterführende Code des Statements ausgeführt. Alle weiteren Werte können unter dem default-case abgehandelt werden.

                       function Psycho() {

var Farbe = document.getElementById('lieblingsfarbe').value;

switch (Farbe) {

case "blau":

alert("Sie sind sehr bescheiden");

break;

case "rot":

alert("Sie sind sehr aktiv");

break;

case "gelb":

alert("Sie haben ein sonniges Gemüt");

break;

case "schwarz":

alert("Machen wir gleich noch einen Termin.");

location.href="terminvergabe.html";

break;

default:

alert("Das nennen Sie eine Farbe?");

break;

Arrays, Abfragen in Schleifen und Objekte

Einer Variable können mit Arrays mehrere Werte zugeteilt werden, die in eckigen Klammern [] stehen.

Bsp.: varcars = ["Saab", "Volvo","BMW"];

Um die Werte eines Arrays auszulesen bietet sich eine For-Schleifean, welche mit einer Laufvariable die Werte durch die jeweilige Stelle im Array iteriert und ausgibt, bis ein bestimmter Wert( i < cars.length) erreicht wird.

Bsp.: vari;
for(i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}

Weitere Schleifen sind die While- bzw. Do/while Schleife. Bei ersterer wird ein Code so lange wiederholt, bis die Bedingung nicht mehr gültig ist. Die Do/While-Schleife ist eine Variante der While-Schleife. Diese Schleife führt den Codeblock einmal aus, bevor sie prüft, ob die Bedingung wahr ist, und wiederholt dann die Schleife, solange die Bedingung wahr ist.

 Bsp.:       while (i < 10) {

       text += "The number is " + i;

       i++;

Mehrere Werte können Variablen auch in Form der Objekterstellung zugewiesen werden.

Bsp.: varcar = {name:"Fiat", model:"500", weight:500, colorolor:"blue"};

Die Werte werden in geschweifte Klammern gesetzt und durch den Zuweisungsoperator „:“ zugewiesen.

Mit dem Punktoperator können Properties des jeweiligen Objekts angesprochen werden und der Wert (value) verändert, hinzugefügt oder gelöscht werden. Bsp.: car.name = Fiat

Weiter können Aktionen mit dem Objekte über den Aufruf von Methoden durchgeführt werden. Bsp.: car.start()

Das Keyword thisbezieht sich auf das Objekt, welches eine Methode, bzw. bestimmte Funktion beinhaltet. So kann über this.nameZugriff auf die Eigenschaft namedes Objekts caraus dem vorangegangenen Bespiel ermöglicht werden.

Vielen Dank an Eliphas Grökel!

10./11.12.19

Workshop

17./18.12.19

Objekte, Arrays und JSON

Zugriff auf JSON Datei?

https://www.w3schools.com/js/js_whereto.asp

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/datenbasis/json/

•Zugriff auf Array, JSON
•Auslagerung JavaScript
•ScriptTag im head oder body, geöffnet
•HTML Struktur, CSS Layout, JavaScript Funktionalität
•var ergebnis = document.getElementById("demo-name").valueAsNumber;
•erg ++;
•Object Notation

→ reinen Text erhalten, ohne Interpretation
•Eigenschaften nicht in Anführungszeichen
•brauchen Text, String, deshalb Anführungszeichen
•String, number, null
•exponateJSON[x]
•Wertzuweisung
•CSV in JSON umformen

Dank an An Pham!

07./08.01.20

Vortrag zum Brandberg

XML

Vortrag und Diskussion mit Oliver Vogels und Eymard Fäder vom

lenssen.erz@uni-koeln.de
oliver.vogels@uni-koeln.de
faedere@uni-koeln.de

14./15.01.20

XML

https://www.w3schools.com/xml/xml_tree.asp

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/datenbasis/bsi-xml/

http://lehre.idh.uni-koeln.de/lehrveranstaltungen/wisem19/basissysteme-der-informationsverarbeitung-1-bsi-2/datenbasis/bsi-xml/die-basics/

Dank an Ronan Sungeelee!

21./22.01.20

Lesbare Datenformate und ihre Konvertierung

Ajax Datenbasis

AJAX und Konvertierungen 22.01.2020

-Nur textbasierte Dateien können über HTML verschickt werden

-Lokale Variable: Nur innerhalb einer Funktion verfügbar

-Globale Variable: Für alle Funktionen verfügbar

-Function open und send: send holt die Daten, die von open angefordert werden

-Function get: get übernimmt Suchworte in HTTP

-Table: definiert Informationen, die in die Tabelle geschrieben werden

-Array: ist die Struktur, in der man auf die Daten zugreift, wie in Ordner; wird mit Punkten statt Backslash getrennt

-Fetch: besteht aus thens, in denen functions ablaufen und catchs, die bei Fehlern in den functions diese ausgeben; kann mit vielen Datei Formaten verwendet werden (json, xml, text, etc.)

-DOMparser: erstellt Baumstruktur

-Parsefromstring: zieht benötigte Informationen aus Baumstruktur zur Darstellung

-Aufgabe: Auf der IDH Website unter lesbare Datenformate und ihre Konvertierung mit verschiedenen Konvertern die Brandberg Daten in JSON Dateien umformen und Stärken / Schwächen der verschiedenen Websites vergleichen

--> Probleme: Die Tennung innerhalb einer Datei mit Semikolons werden falsch erkannt; Umlaute werden nich erkannt und als Fehler dargestellt, Baumstrukturen sind bei XML unpassend bennant; leere Felder in der Excel-Datei verursachen auch Probleme

Arbeiten mit einer Datenbasis

3 Schritte zum sinnvollen Arbeiten mit einer Datenbank:

-Erstellen einer sinnvoll strukturierten und validen Datenbasis

-Anfrage der Datenan den Server via AJAX

-Ausgabeder angefragten Daten auf der Website

Hausaufgabe: Eine Suche in der HTML-Datei von Ilias aus der Stunde erstellen:

https://www.ilias.uni-koeln.de/ilias/goto.php?target=fold_3135617

Vielen Dank an JonathanVoss!

28./29.01.20 Seminararbeit

Vorherige Seite: Seminarbetreuung

Nächste Seite: Spezifikationen zu den Hausaufgaben

Ablaufplan

Veranstaltungsnavigation