# data[].attributes.body
im vorigen Abschnitt hast du die Zeitfunktionen in JavaScrpt kennengelernt.

Die Aufgabe besteht nun darin, die verstrichene Zeit seit dem Startzeitpunkt der Uhr anzuzeigen.

Die Startzeit ist:

startZeit = new Date();

Nach Ablauf einer bestimmten Zeit (aktuelleZeit) wird die abgelaufene Zeit durch:

abgelaufeneZeit = aktuelleZeit - startZeit;

berechnet.

# data[].attributes.body
Wir werden von jetzt an das JavaScript vom html-Teil trennen. Dadurch können wir die Programmierung in einer js-Datei durch führen und binden diese im script-Teil in unsere html-Datei ein:

(script src="grafik.js")

(/script)

Achtung! Ich habe im Befehl oben die Zeichen < und > durch runde Klammern ersetzt.

Für den html-Teil benutzt du das html-Gerüst.

# data[].attributes.body
JavaScript (kurz JS) wurde 1995 von Netscape Communications entwickelt. Netscape hatte 1994 den Netscape Webbrowser entwickelt und hatte im darauf folgenden Jahr mit LiveScript eine Umgebung in den Browser integriert, die den Benutzern mehr Interaktivität wie das Ausfüllen von Formularen bot.

1996 wurde der Name LiveScript in JavaScript aufgrund einer Kooperation von Netscape mit SUN Microsystems geändert, weil der Name Java einen höheren Bekanntheitsgrad hatte. Beide Sprachen sind jedoch voneinander unabhängig.

SUN ist ein Hersteller von Großrechnern und Workstations. SUN entwickelt Java und den Webbrowser Opera.

# data[].attributes.body
Zum Programmieren von JavaScript bietet sich die auch schon von der Programmierung von Python bekannte Programmierumgebung Visual Studio Code an. Diese Umgebung bietet auch Unterstützung für HTML und css Dateien.

# data[].attributes.attachment_link.title
Visual Studio Code - Code Editing. Redefined

# data[].attributes.attachment_link.description
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

# data[].attributes.body
Das Programm muss zunächst gespeichert werden. Dann wird es mit dem Pfeil an der linken Leiste ausgeführt.

# data[].attributes.body
Erzeuge eine neue html-Datei und speichere diese in deinem Ordner. Gib dann die folgenden Anweisungen ein:

(<)script(>)
var eingabe = window.prompt("Wer bist du?", "");

document.write("Hallo, " + eingabe + "! ");

(<)script(>)

Achtung: Entferne bitte die Klammern um das kleiner und das größer Zeichen. Der originale script-Befehl kann im Padlet nur mit den Klammern geschrieben werden.

Der Befehl var definiert eine Variable bzw. einen Speicher für Eingaben. Der Befehl window.prompt öffnet im Browser ein Fenster. Mit dem Befehl document.write kann in den Browser geschrieben werden.

# data[].attributes.body
Das erste Script wird jetzt um eine Antwort auf die Frage erweitert. Dazu wird die Variable antwort definiert;

var antwort = window.prompt(Hallo, " + eingabe + "! Und wie geht es dir?", "");
document.write("Dir geht es also " + antwort);

Erweitere den Teil 1 um diese beiden Zeilen, speichere das Prgramm und führe es aus.

# data[].attributes.body
Das Programm soll nun auf die Antwort mit einer sinnvollen Reaktion antworten. Dazu führen wir zur Unterscheidung der Auswahlmöglichkeiten eine if-Struktur ein:

if (antwort == "gut")
document.write("Das freut mich!");
if (antwort == "schlecht")
document.write("Das tut mir leid!");

Füge diese beiden if-Anweisungen in dein script unterhalb der letzten document.write Anweisung ein. Du kannst die alte Anweisung durch // herauskommentieren. Das "==" - Zeichen bedeutet "ist identisch" und wird benötigt, um festzustellen, dass zwei Ausdrücke identisch sind.

# data[].attributes.body
Führe das Script aus und gebe etwas anderes als "gut" oder "schlecht" ein. Du erhältst in diesem Fall keine Ausgabe, weil das Programm hierfür keine Anweisung hat. Das Script muss also für diesen Fall geändert werden.

Das geschieht mit der else und der else if  Anweisung.

Füge in das Script die folgenden Zeilen ein:

if (antwort == "gut")
document.write("Das freut mich!");
else
document.write("Ich versteh nicht ...";
if (antwort == "schlecht")
document.write("Das freut mich!");
else
document.write("Ich versteh nicht ...";

Jetzt gibt es in jedem Fall eine Ausgabe. Schaue dir die letzten Anweisungen an, der elese Teil ist in beiden Fällen identisch. Das kann mit der Anweisung else if vereinfacht werden:

if (antwort == "gut")
document.write("Das freut mich!");
else if (antwort == "schlecht")
docment.write("Das tut mir leide!");
else
document.write("Ich versteh nicht ...");

Ändere dein Script entsprechend.

# data[].attributes.body
Im zweiten JavaScript Programm testen wir einige mathematische Funktionen für die Grundrechenarten: +, -, /, *.

Die Tabelle zeigt die unterschiedlichen Symbole.

# data[].attributes.body
Füge die folgenden JavaScript Anweisungen zwischen den Script Marken ein:

//Mathe
"use strict";
var zahl1 = window.prompt("Gib die erste Zahl ein: ", "");
var zahl2 = window.prompt("Gib die zweite Zahl ein: ", "");
var operator = window.prompt("Und jetzt den Operator (+, -, /, *): ", "");
document.write("Ergebnis =");
if (operator == "+")
document.write(zahl1 + zahl2);
if (operator == "-")
document.write(zahl1 - zahl2);
if (operator == "/")
document.write(zahl1 / zahl2);
if (operator == "*")
document.write(zahl1 * zahl2);

Gib das Programm ein und teste es!

Du wirst feststellen, dass bei der Rechnung 4 + 7 als Ergebnis 47 statt 11 kommt. Erklärung: Bei der Eingabe werden die Zahlen als String gespeichert. Mit dem Befehl "+" werden zwei Strings verkettet, also 47.

Aus diesem Grunde muss die Eingabe mit Number in eine Zahl umgewandelt werden:

var zahl1 = Number(window.prompt("Gib die erste Zahl ein: ", "");
var zahl2 = Number(window.prompt("Gib die zweite Zahl ein: ", "");

Ändere das Programm entsprechend und führe es aus.

# data[].attributes.body
Zum Abschluss müssen wir noch eine Fehlermöglichkeit bei der Division durch Null abfangen. Wir prüfen dazu, ob die zweite Zahl eine Null ist:

if (operator == "/") {
if (zahl2 != 0)
document.write(zahl1 / zahl2);
else
document.write(" nicht möglich!");
}

Die geschweiften Klammern werden bei der if-Anweisung benötigt, wenn die Anweisung Verzweigungen enthält um die gesamte Anweisung zusammenzuklammern.

# data[].attributes.body
Aufgabe:

Erstelle ein Programm, das nach der Eingabe einer Zahl deren Kehrwert berechnet. Berücksichtige dabei auch die Eingabe 0.

# data[].attributes.headline
Simulation einer Ziehung der Lottozahlen - Teil 1

# data[].attributes.subject
Simulation einer Ziehung der Lottozahlen - Teil 1

# data[].attributes.body
Als Basis für die Ziehung der Lottozahlen programmieren wir das folgende kleine Programm und speichern dieses in lotto1.html. Denke daran diese Befehle in einen script-Berech zu schreiben.

//***********************
//Definition der Variablen
//***********************
var zufall;
//***********************
//Ziehung der Zahlen
//***********************
for (var nr = 0; nr < 6, nr++) {
zufall = Math.floor(Math.random()*49+1);
document.write("Nr. " + (nr + 1) + " => " + zufall + "<br>");
}

Die Funktion random() erzeugt eine Zufallszahl aus dem Bereich 1, die dann mit 49 multipliziert wird.

Programmiere diese Zeilen und teste sie aus. Was fällt dir auf?

# data[].attributes.body
HTML (Hyper Text Markup Language) ist die Programmiersprache von Internet Seiten. Wie beschrieben wurde JavaScript (der Life Script) entwickelt, um das Aussehen von Web-Seiten zu verändern. Bislang haben wir die JavaScript Befehle in einem eigenen Bereich innerhalb einer HTML Datei geschrieben. Das "Gerüst" einer HTML Datei sieht so aus:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Das ist HTML</title>
</head>
<body>
<p>Hallo</p>
</body>
</html>

Die HTML Seite besteht aus den Bereichen "head" und "body". Im "head" Bereich wird der Titel der Web-Seite und das benutzte Schriftzeichen Set angegeben, z.B. im Deutschen die Anzeige von Umlauten. Der Titel der Seite wird im Reiter angezeigt. (s. Bild oben).  Ein JavaScript wird im "body"-Teil eingebunden:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Das ist HTML</title>
</head>
<body>
<p>Hallo</p>
(<)script(>)
document.write("Hallo");
(<)/script(>)
</body>
</html>

Achtung: Entferne die (, ) Klammern um den script-Tag.

Programmiere auch dieses Grundgerüst und speichere es unter basis.html ab. Wir werden es für spätere Aufgaben verwenden.

# data[].attributes.body
Bei der "Ziehung" mit dem Zufallsgenerator kann es vorkommen, dass die gleiche Zahl mehrfach "gezogen" wird. Aus diesem Grunde speichern wir die gezogenen Zahlen in einem Feld und ermitteln bei jeder Ziehung, ob die Zahl (Kugel) schon gezogen worden ist. Dafür definieren ein Feld:

kugel[50],

in dem alle Kugeln von 0 bis 49 enthalten sind. Bei jeder Ziehung wird die Zahl der Kugel in dieses Feld geschrieben:

for (var nr = 0; nr < 49;  nr++) {
kugel[nr] = nr+1;
document.write(kugel[nr] + "  ");
}

Zunächst muss das Kugel-Feld initialisiert werden und alle Elemente auf Null gesetzt werden. Mit nr++ wird der Zähler nr um 1 erhöht.

//Kugel-Feld initialisieren
var kugel = [50];
var zufall;
//alles auf Null setzen
for (var nr = 0; nr < 49; nr++) kugel[nr] = 0;
//Zufallszahlen ermitteln
for (var nr = 0; nr < 6; nr++) {
zufall = Math.floor(Math.random()*49+1);
while (kugel[zufall] == 1)
zufall = Math.floor(Math.random()*49+1);
// Benutzte Zahl als gezogen markieren
kugel[zufall] = 1;
//Ziehung und Nummer anzeigen
document.write
("Nr.  " + (nr + 1) + " => " + zufall + "<br>");
}

Programmiere diese Zeilen und führe das Programm aus, überprüfe, ob Zahlen doppelt vorkommen. Speichere das Programm unter lotto2.html.

# data[].attributes.headline
Lottozahlen - Teil 2 - der Kehrwert mit !kugel

# data[].attributes.subject
Lottozahlen - Teil 2 - der Kehrwert mit !kugel

# data[].attributes.body
Durch das Ausrufezeichen wird der Kehrwert der Variablen gebildet. Probiere das Script:

var kugel = true;
document.write(kugel + " <br>");
kugel = !kugel;
document.write(kugel);

aus, um das Ergebnis von !kugel zu sehen.

# data[].attributes.body
Anstelle von "0" (nicht gezogen) und "1" (gezogen) können wir auch die boolschen Variablen false und true benutzen. Ändere das Programm lotto2 entsprechend und speichere dieses unter lotto3.html.

# data[].attributes.body
Die Lottozahlen sollen jetzt aufsteigend sortiert werden. Dazu definieren wir eine Funktion bubbleSort. Die einzelnen Zahlen steigen der Größe nach nach oben, bis sie sortiert sind. Du definierst globale Variablen:

//globale Variablen
var kugel = [];
var lotto = [0, 0, 0, 0, 0, 0];
var zufall;

Das Feld lotto wird gleich mit Nullen gefüllt. Jetzt wird die Funktion bubbleSort defginiert:

//Funktions-Definition
function bubbleSort(x, index) {
var tausch;
for (var i = 0; i < index; i++) {
for (var j = 0; j < index; j++) {
if (x[j] > x[j+1]) {
tausch = x[j];
x[j] = x[j+1];
x[j+1] = tausch;
}
}
}
}

Achte beim Programmieren auf die genaue Position der eingerückten geschweiften Klammern!

Füge diese Zeilen vor dem Hauptprogramm ein und speichere dieses unter lotto4.html.

Am Ende wir noch die sortierte Ausgabe programmiert:

document.write("<br>"Sortiert:<br>";
bubbleSort(lotto, 6);
for (var nr = 0; nr < 6; nr++)
document.write("Nr. " + (nr + 1) + " => " + lotto[nr] + "<br>");

Füge auch diese Zeilen ein und speichere das Programm.

# data[].attributes.body
Innerhalb des body-Tags programmieren wir jetzt einen button:

<button onClick="buttonClick()">
Drück mich!
</button>

Die Funktion des Buttons wird im script-Bereich als Methode programmiert:

function buttonClick() {
document.write("Autsch!");
}

Im body-Bereich wird die Schaltfläche programmiert und im script-Bereich die Funktion. Programmiere diese Anweisungen und führe das Programm im lokalen Broser aus.

Achtung: Dieses Programm hätte auch komplett in JavaScript programmiert werden können, jedoch mit etwas mehr Aufwand, z.B. hätte der button mit createElement("Button") erzeugt werden müssen. Die Mischung aus HTML und JavaScript bietet hier Vorteile.

# data[].attributes.body
Das Aussehen des Buttons wird innerhalb des body in einem style-Bereich festgelegt:

<style>
#BTN {
width: 150px; height: 30px;
top: 100px; left: 100px;
position: fixed;
}
</style>

Mit #Name wird der Name des Elementes ( die "id") festgelegt, es folgen die Eigenschaften.
Das Koordinatensytem der Seite beginnt oben links in der Ecke der Seite mit (0, 0). Die Längen nach unten sind positiv, d.h. top: 100px bedeutet, dass die Position 100px nach unten ist.

Du musst jetzt noch bei der Definition des Buttons die id des Elementes angeben um auf die Eigenschaften zu verweisen:

<button id="BTN";
onclick="buttonClick()">Drück mich!</button>

Programmiere den style-Bereich im body und verändere die Zahlen, um die Auswirkung auf die Position zu sehen.

# data[].attributes.body
Wir haben es hier mit fünf Elementen zu tun:

Label für die Frage "Wie geht es?",

Liste für die Antworten mit einer Auswahl,

Label für die Frage "Wie ist der Zustand?;

Checkbox (Mehrfachauswahl),

Button zur Betätigung.

Für Elemente wird im body Bereich zunächst im Bereich style die Größe und Position definiert.

Danach werden die beiden labels mit Inhalt definiert.

Die Liste wird über ein fieldset mit Inhalt definiert.

Die checkbox wird ebenfalls über ein fieldset definiert.

Der button wird über den Befehl button definiert.

Danach wird im script Bereich das JavaScript für die Funktion itemClick progarmmiert.

# data[].attributes.body
Im Style Bereich wird für die fünf Elemente die Position und die Größe definiert.

Der Style Bereich für das Label wird unter #LBL geschrieben, für die Liste unter #LST, für die Ckeckbox unter #CHK, für den Button unter #BTN und für das zweite Label unter #LBLX.

Programmiere den Style Bereich innerhalb des Tags (<)script(>)...(<)/script(>).

# data[].attributes.body
Die Eingangsfragen (id="LBL" und id="LBLX") werden über den label Befehl definiert:

<label id="LBL">Hallo, wie geht´s?</label>

<label id="LBLX">Wie ist der Zustand?/label>

Der ok-Button wird über den button-Befehl definiert:

<button id = "BTN" onclick="itemClick()">Ok</button>

Die Positionen sind im style-Bereich festgelegt worden.

# data[].attributes.body
Die Funktion itemClick wird im script-Bereich definiert. Hier erhält unser JavaScript Programm also die Funktionalität. Du programmierst, was mit den Antworten geschehen soll.

Im großen Kasten ist nur eine Antwort möglich. Die Variable antwort bleibt zunächst leer.

Im kleinen Kasten ist eine Mehrfachauswahl möglich. In der Variablen scope werden die Antworten addiert.

# data[].attributes.body
In diesem Abschnitt geht es um einfache grafische Elemente:

- Zeichenstift auf Koordinaten setzen,
- Bewegen des Zeichenstiftes,
- einen Kreis zeichnen,
- ein Rechteck zeichnen.

Für die Definition der Zeichenfläche wird die Methode canvas (Leinwand) im body Bereich benutzt.

# data[].attributes.body
Das Bild zeigt den Aufbau des Koordinatensystems, das JavaScript verwendet.
Der Ursprung (0, 0) ist oben links in der Ecke. Es gibt nur positive Zahlenwerte. Die x-Koordinaten wird nach rechts positiv gezählt, die y-Koordinate wird nach unten positiv gezählt. Der schwarze Punkt hat also die Koordinaten (4, 3).

# data[].attributes.body
Die Anweisungen zum Zeichnen dieser Linie werden im script Bereich geschrieben. Später  können wir diesen Bereich in ein JavaScript (.js) File schreiben, dieses wird dann innerhalb der html Datei aufgerufen.

Öffne zunächst dein basis.html File mit dem html Grundgerüst.

Der canvas (Leinwand) wird im body Bereich definiert:

<canvas id="PIX" width="600" height="400"></canvas>

Dann beginne einen script Bereich. Hier werden zunächst de Variablen definiert:

var canvas = document.getElementById("PIX");

var context = canvas.getContext("2d");

Für das Zeichnen werden die Befehle moveTo (entspricht goto aus Python Modul Turtle) und lineTo (entspricht forward)

Die Zeichnungsoperationen werden mit dem Befehl:

context.stroke();

abgeschlossen. Die Farbe der Linie kann mit dem Befehl:

context.strokeStyle("red");

festgelegt werden. Andere Farben sind ebenfalls möglich. Eine gezeichnete Figur kann mit Farbe ausgefüllt werden:

context.fillStyle("blue");

Das Ausfüllen wird mit:

context.fill();

ageschlossen.

Es bietet sich an, bei der Definition der Variablen "context" durch "c" zu ersetzen.

# data[].attributes.body
Zeichne das "Haus vom Nikolaus" in JavaScript mit den Befehlen moveTo und lineTo. Lege zunächst den Startpunkt fest. Die Länge soll mindestens 100px betragen.

Die Farbe kannst du mit dem Befehl:

_.strokeStyle("red");

festlegen.

# data[].attributes.body
Zunächst definierst du die Leinwand (canvas) und die Zeichnungsvariable (context als c).

Für die unterschiedlichen Farben definierst du dir ein Feld mit den Farben:

var Color = ["gray", "black", "blue", "cyan", "green", "yellow", "red", "magenta"];

Das Zeichnen der Linien erfolgt in einer for-Schleife. 105 Linien werden, wie oben gezeigt gezeichnet.

for (var nr = 0, nr<105, nr++)

Denke daran, dass der Bereich der for-Schleife mit geschweiften Klammern eingeschlossen wird.

Die einzelnen Linien werden unter Verwendung der Laufvariablen nr durch:

context.moveTo(0, nr*4);
context.lineTo(canvas.width, canvas.height-nr*4);

gezeichnet. Sie gehen also immer von der Mitte aus.

context.moveTo(nr*6, 0);

context.lineTo(canvas.width-nr*6, canvas.height);

Die Farbauswahl erfolgt durch einen Zufallsgenerator, der aus dem Feld Color die Farben auswählt:

context.strokeStyle = Color[Math.floor(Math.random()*Color.length)];

Die ganze Zeichnung wird über einen Pfad eingeschlossen:

context.beginPath();
context.closePath();

Am Ende wird die Zeichnung mit:

context.stroke();

geschlossen.

# data[].attributes.body
Die abgelaufene Zeit wird in einer Fuunktion programmiert:

function abgelaufeneZeit() {
};

In dieser Funktion wird die seit dem Startpunkt verstrichene Zeit mit:

zeit = new Date() - startZeit;

berechnet.

Zur Aktualisierung der Zeit wird die anonyme Funktion setTimeout(function, intervall) benutzt. Die Funktion, mit der die Zeit berechnet wird, wird beim Aufruf der Funktion übergeben, das Intervall bestimmt ist der Zeitpunkt in Millisekunden.

Im Hauptprogramm wird die Funktion dann durch

abgelaufeneZeit();

aufgerufen.

# data[].attributes.body
In dieser Aufgabe erstellst du ein JavaScript, mit dem du im Browser selbst schreiben und zeichnen kannst.
Hierzu benutzt du die bekannten Grafik Befehle lineTo und moveTo. Zusätzlich definierst du Funktionen für die Mouse Bewegung.

# data[].attributes.body
Bislang haben wir die gesamte Programmierung von JavaScript in eine einzige HTML Datei geschrieben. Das hat bislang auch funktioniert, weil unser Code "übersichtlich" war. Komplexe Webseiten können jedoch aus mehreren 1000 Zeilen Code bestehen. Da hilft dann auch nicht die Struktur durch Kommentare. Um dieses zu entflechten wurde eine Trennung der unterschiedlichen Programmierungen eingeführt:

HTML: beschreibt den Aufbau der Seite (Hyper Text Markup Language),

CSS: beschreibt das Aussehen der Elemente (Cascading Style Sheets),

JavaScript: beschreibt die Funktionalität.

Diese Dateien werden separat gespeichert. Im gleichen Ordner wie die html-Datei und werden in diese über den Source Befehl (src) eingebunden. Dadurch wird die HTML Datei kleiner und lädt schneller.

# data[].attributes.body
Schaue dir die erstellen JavaScript Programme an. Bislang haben wir html-Dateien erstellt.

1. Markiere den script-Bereich, ohne das öffnende und schließende Schlüsselwort, schneide diesen aus oder kopiere diesen,

2. füge ihn in eine neue Datei mit dem Namen meinScript.js ein,

3. in der html-Datei fügst dann im body den Befehl (<)script src="meinScript.js"(>)(<)/script(>) ein.

4. es ist wichtig, dass die .js Datei im gleichen Ordner liegt (am einfachsten), ansonsten musst du den Pfad angeben.

Du wirst feststellen, dass die Dateien übersichtlicher geworden sind.

# data[].attributes.body
Das Aussehen der html-Elemente, z.B. Abschnitte (<p>) wird in einer CSS Datei beschrieben. Dazu werden wir kommen, wenn wir HTML Seiten programmieren.

# data[].attributes.body
Über den Script Befehl "addEventListener" binden wir zum Zeichnen die Mouse ein. Die Events sind:

mouseup,

mousedown,

mousemove.

Wenn diese Events eintreten, sollen jeweils bestimmte Anweisungen ausgeführt werde, die in einer Funktion gespeichert werden.

# data[].attributes.body
Diese Funktion beschreibt das Zeichnen. Wenn du hier den path-Befehl deaktivierst kannst du einzelne Wörter schreiben.

# data[].attributes.body
Zur Integration in Webseiten soll ein Quiz erstellt werden.
Die HTML Datei enthält die Position der Steuerelemente und das Fieldset für die Fragen. Später sollen die Fragen über eine Text-Datei geladen werden können.
Das JavaScript enthält die Funktionen zur Bearbeitung der Fragen.
Wichtig: Im Verlauf des Projektes werden die Dateien erweitert, deshalb: vor dem Ändern die Datei mit dem neuen Namen abspeichern (z.B. ..._v1, ..._v2 u.s.w.) damit die "alte" Version erhalten bleibt.

# data[].attributes.body
Die HTML Datei besteht aus dem Style-Bereich für die Buttons, der Vorbereitung für das Fragen-Fieldset und den anklickbaren Buttons.

Das Fieldset wird mit den Befehlen:

<fieldset id="LBL">

<label></label>

</fieldset>

zunächst nur vorbereitet. Die drei anklickbaren Buttons werden über den Befehl:

<button id="BTN X"; onclick="button1Click()"></button>

definiert, wobei die entsprechenden id´s eingesetzt werden müssen.

Das JavaScript wird über den src-Befehl eingebunden (quiz1.js).

# data[].attributes.body
Die Funktionen für die Buttons werden nur angelegt:

function button1Click () {
}

Wiederhole diese Anweisung für alle drei Buttons.

Die Fragen und Antworten werden in Feldern vereinbart. Diese definieren wir über:

const max=3

max beschreibt als Konstante die Größe der Felder. Durch Ändern von max können wir dann die Feldgröße beliebig ändern.

Die Felder definieren wir dann über:

let question = [max];
let answer1 = [max];
let answer2 = [max];
let answer3 = [max];
let correct = [max];

Der letzte Eintrag ist dann die korrekte Antwort.

Danach definieren wir eine Klasse Quiz:

// Quiz-Klasse

class Quiz {

constructor(max) {

// Attribute

this.question = [max];

this.answer1  = [max];

this.answer2  = [max];

this.answer3  = [max];

this.correct  = [max];

}

Die Elemente der Felder sind zunächst leer.

# data[].attributes.body
Mit der Methode collectQuests() werden die soeben definierten Felder gefüllt. Bei späteren Version sollen die Fragen und Antworten aus einer .txt Datei eingelesen werden.

# data[].attributes.body
Zum Anzeigen der Fragen und Antworten definieren wir die Methode showQuests(nr):

document.getElementById("LBL").innerHTML = this.question[nr];

Wiederhole diese Anweisung auch für die Antworten.

# data[].attributes.body
Wir erzeugen mit unserer Klasse unser Quiz  Objekt durch:

myQuiz = new Quiz();

Mit dem Konstruktor constructor(max) erzeugen wir dann unser Quiz Objekt:

myQuiz = new Quiz(max);

myQuiz.collectQuests();

myQuiz.showQuest(Math.floor(Math.random()*max));

# data[].attributes.body
Aus der anzeigten Zeit in Millisekunden müssen noch die Stunden, Minuten, Sekunden und Millisekunden für die Stoppuhr berechnet werden (zeit = new Date()):

millisekunden = zeit % 1000;

sekunden = Math.floor(zeit / 1000) % 60;

minuten = Math.floor(zeit / 60000) % 60;

stunden = Math.floor(zeit / 3600000);

Die Methode Math.floor im Modul Math rundet den Wert auf den nächsten ganzen Integer Wert ab. Der Modulo Operator % gibt den Divisionsrest zurück.

# data[].attributes.body
in der zweiten Version sollen die Quizfragen aus einer Datei eingelesen werden. Dadurch kannst du die Anzahl und den Inhalt der der Fragen flexibel verändern. Um dieses zu erreichen muss in der html-Datei im body-Bereich der File-Reader eingerichtet werden.

<input id="INP" type="file" onchange="readFile(this)">

Mit der ngabe des Typs "file" erscheint ein Diaglogfeld, aus dem du die betreffende Datei auswählen kannst.

Zusätzlich muss im Style-Bereich der Button "INP" für das Einlesen der Datei eingerichtet werden:

#INP {

width: 400px; height: 30px; top: 250px; left: 50px;

position: fixed;

Erweitere die html-Datei um diese Befehle.

# data[].attributes.body
Mit onchange ist die Ereignis Methode readFile verbunden. Diese Funktion wird im JavaScript definiert.

Mit onchange ist die Ereignis Methode readFile verbunden. Diese Funktion wird im JavaScript definiert.  Die Funktion readFile() wird ausgelöst, sobald du die Datei ausgewählt hast. Es werden zwei Variablen benötigt:

let file = input.files[0];

für den Dateinamen und

let reader = new FileReader();

für die Erzeugung des Objektes (Organisation des Datentransfers).

Der FileReader liest mit der Methode

reader.readAsText(file);

die Textdatei ein.

Wir definieren für das Ereignis die Variable reader.onload und weisen diese direkt einer Funktion zu:

reader.onload = function() {
document.write(reader.result);
}

reader.result enthält den Inhalt der Textdatei mit dem Quiz.

# data[].attributes.body
Die Anzahl der Fragen ermitteln wir durch das Splitten des Textfiles:

let textFile = reader.result.split('/n');
let max = Math.floor(textFile.length/5);

Es gehören immer fünf Elemente zu einer Frage, aus diesem Grunde wird bei der Ermittlung von max durch fünf geteilt.

Danach werden alle Elemente an die Sammelfunktion von myQuiz übergeben:

myQuiz.collectQuests(textFile);

Dann wird die erste zufällige Aufgabe angezeigt:

myQuiz.showQuest(Math.floor(Math.random()*max));

Das Programm funktioniert jetzt noch nicht. Es muss noch der constructor und die Methode collectQuest angepasst werden.

# data[].attributes.body
Die Anzahl der Elemente steht erst nach dem Laden der Daten fest. Aus diesem Grunde bleiben die Felder zunächst leer. Die Felder werden nur angelegt.

# data[].attributes.body
Mit der Methode collectQuest(text) werden die definierten Felder jetzt aufgefüllt.

Das Attribut max enthält die Anzahl der Quizfragen (Antwortgruppen).

# data[].attributes.body
Diese Methode können wir unverändert aus Teil 1 übernehmen.

# data[].attributes.body
In der Klasse Quiz fügen wir dafür eine neue Methode ein mit der die angeklickte Antwort mit der richtigen Antwort verglichen werden kann:

showResult(choice) {

// Lösungs-Nr. mit Quiz-Nr. vergleichen

if (choice == Number(this.correct[this.current])) {

document.getElementById("LBL").innerHTML ="RICHTIG";

else

document.getElementById("LBL").innerHTML = "FALSCH";

Der Parameter choice übernimmt die Nummer der angeklickten Antwort.

Das Attribut current erhält den aktuellen Wert in der Methode showQuest(nr) durch:

this.current = nr;

Füge diese Anweisung der Methode showQuest hinzu.

# data[].attributes.body
Um die Methode showResult aufzurufen definieren wir eine neue Funktion, das Ergebnis soll direkt beim Anklicken der Antwort aufgerufen werden.

Nach dem Einfügen dieser Funktion kannst du eine zufällig gewählte Frage beantworten und erhälts das Ergebnis.

# data[].attributes.body
Um weitere Fragen aufzurufen erstellt du zunächst einen Botton "Neue Frage",, der im Style Bereich positioniert wird:

#NEW {

width: 150px; height: 30px; top: 200px; left: 50px;

position: fixed;

}

Im body-Bereich wird der Botton dann definiert:

<button id="NEW"; onclick="newClick()">Neue Frage</button>

Die Funktion für newClick erstellst du im JavaScript:

function newClick() {
myQuiz.showQuest
(Math.floor(Math.random()*myQuiz.max));

Füge newClick zu den Dateien hinzu und du erhälst eine Antwort, ob die Frage richtig beantwortet ist.

# data[].attributes.body
Hier ist ein Beispiel für eine Text Datei:

Wie heißt die Hauptstadt von China?
Peking
Shanghai
Singapur
0
Wie heißt die Hauptstadt von Australien?
Austria
Cangaroo
Canberra
2
Wie heißt die Hauptstadt von Rumänien?
Budapest
Bukarest
Beulenpest
1
Was ist die Flora?
Tierwelt
Pflanzenwelt
Fantasiewelt
1
Wie lang ist ein Marathonlauf etwa?
50 km
42 km
24 km
1
Aus was besteht Diamant?
Wasserstoff
Glas
Kohlenstoff
2
Wie hieß der erste Präsident der USA?
George Washington
Abraham Lincoln
Arnold Schwarzenegger
0
Was ist die tiefstmögliche Temperatur (ca.)?
0 Grad
-273 Grad
-1000 Grad
1

Jedes Element besteht aus fünf Einträgen. Die letzte Zahl gibt die Nummer der richtigen Antwort an.

# data[].attributes.body
Das Produkt Quiz besteht aus drei Komponenten:

HTMl Datei index.html

JavaScript Datei quiz.js

Textdatei quiz.txt

Es ist sinnvoll, dass sich diese drei Dateien im selben Ordner befinden. Achte darauf, dass die Namen im .html-File und .js File korrekt sind.

Falls sich die Dateien in unterschiedlichen Ordner befinden, müssen die jeweiligen Pfade angegeben werden.

# data[].attributes.body
Die index.html beinhaltet:

den style Bereich für die Felder und Buttons,

das fieldset für die Fragen und Antworten,

die Aktionen für die Buttons.

# data[].attributes.body
Die JavaScript Datei enthält die:

Funktion der Buttons für den Ablauf des Quiz,

für die Auswertung des Quiz,

für das Einlesen neuer Fragen.

# data[].attributes.body
Die Textdatei beinhaltet die Fragen und Antworten. Jeder Datensatz besteht aus 5 Elementen:

Frage,

drei Antwortmöglichkeiten,

richtige Antwort.

Die Dateistuktur ist einfach und kann auch für andere Themen eingesetzt werden, z.B. Vokabeln.

# data[].attributes.body
In diesem Projekt programmieren wir eine Stoppuhr, die als Webseite und auch als App für das Smartphone veröffentlicht werden soll. Für die App hat die HTML und die JavaScript Programmierung den Vorteil, dass die Stoppuhr auf allen Plattformen (IOS, Android) funktioniert.

Wir beginnen mit der Planung, programmieren dann die html-Seite und danach das JavaScript. Neu ist, dass wir den style-Bereich in einer eigenen Datei vom Typ css (cascade style sheet) auslagern werden, wodurch unsere html-Datei noch übersichtlicher wird.

# data[].attributes.body
Zur Programmierung der Stoppuhr benötigen wir das Datums Objekt Date() (wichtig: groß geschrieben).

Alle Computer beginnen die Zeit am 1.1.1970 um 0.00 Uhr GMT zu zählen.

Aufgabe:

Erstelle eine html-Datei, füge einen script Bereich ein und gebe das Datum in der Konsole mit: console.log(Date()); aus.

Definiere ein neues Datum mit let neuesDatum = new Date(2019, 3); und gebe dieses in der Konsole aus,

Definiere ein neues Datum mit let neuesDatum = new Date(2000000); und gebe dieses in der Konsole aus.

Betrachte die Ausgaben, welche Zahlenwerte werden ausgegeben? Welche Bedeutung hat die Zahl 2.000.000? Was passiert, wenn du an die Zahl -2.000.000 eingibst? Ändere dann noch einmal die Zahl auf -2.000.000.000, welches Ergebnis ergibt sich nun?

# data[].attributes.body
Für die Berechnung der Zeit in JavaScript nutzen wir aus dem Bereich "Browserobjekte nutzen" (https://padlet.com/jtmeyer/javascrpt-grundlagen-6tqiomkqoappzdly
die Befehle "setInterval" und "clearInterval".

Bei beiden Befehlen wird eine Funktion und ein Zeitintervall in Millisekunden übergeben. Die Funktion in setInterval wird so lange ausgeführt, bis sie durch clearInterval beendet wird.

# data[].attributes.body
Erstelle eine Funktion:

mit der die Sekunden hochgezählt werden,

führe die Funktion im Intervall 1000 Millisekunden aus,

gebe das Ergebnis über ein console.log in die Konsole aus.

# data[].attributes.body
Um die Uhrzeit auszugeben, nutzen wir die Funktion toLocaleTimeString() des Date() Objektes.

let uhrzeitAnzeige = setInterval(uhrzeitAusgabe, 1000);

Die Uhrzeit Ausgabe wird über eine function berechnet:

function uhrzeitAusgabe() {
let zeitpunkt = new Date();
let uhrzeit = zeitpunkt.toLocaleTimeString();
document.write(uhrzeit + "<br>");

# data[].attributes.body
Um die Uhrzeit auf der HTML Seite an einem bestimmten Ort auszugeben benutzen wir einen div-Container:

<div id="anzeigeUhrzeit">hier Uhrzeit anzeigen</div>

im body-Bereich. Die Position wird im style-Bereich über die id definiert.
Im script-Bereich wird die Zeitfunktion definiert:

window.addEventListener("load", function () {
--> Funktion Uhrzeitausgabe
});

In die Funktion Uhrzeitausgabe kommt jetzt noch die Ausgabe über innerHTML:

document.getElementById("anzeigeUhrzeit"). innerHTML = uhrzeit;

Jetzt wird die Uhrzeit im Browser sekündlich ausgegeben.

Aufgabe:

Gebe die Uhrzeit mit innerHtml aus,

Erstelle einen Rahmen im style Bereich (border-width, border-color, border-style),

Wähle als Schriftgröße font-size: 10em.

# data[].attributes.body
Das Objekt Date() hat mehrere Methoden, mit den die einzelnen Bestandteile der Zeitanzeige "herausgezogen werden können. Der Aufruf erfolgt immer mit Date.methode:

getFullYear(): Jahreszahl (yyyy),

getMonth(): Monat, beginnend mit 0,

getDate(): Tag als Nummer (1-31),

getHours(): Stunde (0-23),

getMinutes(): Minute(0-59),

getSeconds(): Sekunden(0-59),

getMilliseconds: Milliskunden(0-999),

getTime(): Millisekunden seit 1.1.1970,

getDay(): Wochentag (0-6),

Date.now(): Aktuelles Datum.

# data[].attributes.body
Benutze die Methoden von Date und gebe mit einem console.log() die aktuelle Zeit (Jahr, Monat, Datum, Stunde, Minute, Sekunde, Millisekunde) aus. (z.B. console.log("Jahr :", getFullYear();).

Gebe ebenfalls den Wochentag als Wort aus! (Hinweis: die Zahl des Wochentages kann mit einem if-Konstrukt umgewandelt werden).

# data[].attributes.body
Eine gute Übersicht zu Operatoren in JavaScript findest du auf der

# data[].attributes.attachment_link.readable_text
Consider an expression describable by the representation below, where both OP1 and OP2 are fill-in-the-blanks for OPerators.

The combination above has two possible interpretations:

(a OP1 b) OP2 c
a OP1 (b OP2 c)

Which one the language decides to adopt depends on the identity of OP1 and OP2.

If OP1 and OP2 have different precedence levels (see the table below), the operator with the higher precedence goes first and associativity does not matter. Observe how multiplication has higher precedence than addition and executed first, even though addition is written first in the code.

Within operators of the same precedence, the language groups them by associativity. Left-associativity (left-to-right) means that it is interpreted as (a OP1 b) OP2 c, while right-associativity (right-to-left) means it is interpreted as a OP1 (b OP2 c). Assignment operators are right-associative, so you can write:

with the expected result that a and b get the value 5. This is because the assignment operator returns the value that is assigned. First, b is set to 5. Then the a is also set to 5 - the return value of b = 5, a.k.a. right operand of the assignment.

As another example, the unique exponentiation operator has right-associativity, whereas other arithmetic operators have left-associativity.

Operators are first grouped by precedence, and then, for adjacent operators that have the same precedence, by associativity. So, when mixing division and exponentiation, the exponentiation always comes before the division. For example, 2 ** 3 / 3 ** 2 results in 0.8888888888888888 because it is the same as (2 ** 3) / (3 ** 2).

For prefix unary operators, suppose we have the following pattern:

where OP1 is a prefix unary operator and OP2 is a binary operator. If OP1 has higher precedence than OP2, then it would be grouped as (OP1 a) OP2 b; otherwise, it would be OP1 (a OP2 b).

If the unary operator is on the second operand:

Then the binary operator OP2 must have lower precedence than the unary operator OP1 for it to be grouped as a OP2 (OP1 b). For example, the following is invalid:

Because + has higher precedence than , this would become (a + yield) 1 - but because yield is a reserved word in generator functions, this would be a syntax error. Luckily, most unary operators have higher precedence than binary operators and do not suffer from this pitfall.

If we have two prefix unary operators:

Then the unary operator closer to the operand, OP2, must have higher precedence than OP1 for it to be grouped as OP1 (OP2 a). It's possible to get it the other way and end up with (OP1 OP2) a:

Because has higher precedence than , this would become (await yield) 1, which is awaiting an identifier called yield, and a syntax error. Similarly, if you have new !A;, because ! has lower precedence than new, this would become (new !) A, which is obviously invalid. (This code looks nonsensical to write anyway, since !A always produces a boolean, not a constructor function.)

For postfix unary operators (namely, ++ and --), the same rules apply. Luckily, both operators have higher precedence than any binary operator, so the grouping is always what you would expect. Moreover, because ++ evaluates to a value, not a reference, you can't chain multiple increments together either, as you may do in C.

Operator precedence will be handled recursively. For example, consider this expression:

First, we group operators with different precedence by decreasing levels of precedence.

1. The ** operator has the highest precedence, so it's grouped first.

2. Looking around the ** expression, it has * on the right and + on the left. * has higher precedence, so it's grouped first. * and / have the same precedence, so we group them together for now.

3. Looking around the *// expression grouped in 2, because + has higher precedence than >>, the former is grouped.

Within the *// group, because they are both left-associative, the left operand would be grouped.

Note that operator precedence and associativity only affect the order of evaluation of operators (the implicit grouping), but not the order of evaluation of operands. The operands are always evaluated from left-to-right. The higher-precedence expressions are always evaluated first, and their results are then composed according to the order of operator precedence.

If you are familiar with binary trees, think about it as a post-order traversal.

                /
       ┌────────┴────────┐
echo("left", 4)         **
                ┌────────┴────────┐
        echo("middle", 3)  echo("right", 2)

After all operators have been properly grouped, the binary operators would form a binary tree. Evaluation starts from the outermost group - which is the operator with the lowest precedence (/ in this case). The left operand of this operator is first evaluated, which may be composed of higher-precedence operators (such as a call expression echo("left", 4)). After the left operand has been evaluated, the right operand is evaluated in the same fashion. Therefore, all leaf nodes - the echo() calls - would be visited left-to-right, regardless of the precedence of operators joining them.

# data[].attributes.attachment_link.description
Consider an expression describable by the representation below, where both OP1 and OP2 are fill-in-the-blanks for OPerators. The combination above has two possible interpretations: (a OP1 b) OP2 c a OP1 (b OP2 c) Which one the language decides to adopt depends on the identity of OP1 and OP2.

# data[].attributes.headline
Abschluss Stoppuhr und Veröffentlichung als App für das Smartphone

# data[].attributes.subject
Abschluss Stoppuhr und Veröffentlichung als App für das Smartphone

# data[].attributes.body
Zum Abschluss müssen jetzt in der index.html und im stoppuhr.js noch die Buttons Start, Pause und Reset programmiert werden.

Wir werden den style-Bereich in einer css-Datei auslagern (cascade style sheet).

Dann wird mit einem Wep App Minifest Generator (suchen im Web, z.B. netlify.com) ein manifest.json file generiert. Alle 4 Files:

index.html

stoppuhr.js

stoppuhr.css

manifest.json

werden in einem Ordner gespeichert.

# data[].attributes.body
In der index.html Datei müssen die Container für die Zeitanzeige und die Buttons für Start, Pause und Reset definiert werden.

Zeitanzeige:
Im Container Zeitanzeige wird das Aussehen der Zeitanzeige definiert, diese wird bei der Ausführung der Datei durch den Inhalt von inner.HTML ersetzt.

<div id="zeitanzeige">00:00:00:00:000</div>

Die Darstellung der Zeitanzeige erfolgt im Style-Bereich, die Funktion wird im Script-Bereich definiert.

Buttons:
Die drei Buttons werden im Button Behälter definiert.

<div id="button-behaelter">
<button onClick="start()">Start</button>

<button
onClick="pause()">Pause
</button>

<button onClick="reset()">Reset</button>
</div>

Die Darstellung der Buttons (button- behaelter) erfolgt im Style-Bereich, die Funktion wird im Script-Bereich definiert.

# data[].attributes.body
In der stoppuhr.js werden die Funktionen für die Buttons und die Zeitanzeige definiert.

Buttons:
Die drei Buttons start, pause und reset werden über Funktionen definiert, die beim Aufruf ausgeführt werden.

function start() {

pausiert = false;

}

function pause() {

pausiert = true;

}

function reset() {

pausiert = true;

gestoppteZeit = 0;

aktualisiereAnzeige();

}

Die Steuerung der Uhr erfolgt über die boolsche Variable pausiert, die im JavaScript über let pausiert=false; definiert werden muss.

# data[].attributes.body
Zum Abschluss werden die bereits im vergangenen Abschnitt beschriebenen Funktionen:

aktualisiereZeit und

aktualisiereAnzeige

programmiert.

Bei der Funktion aktualisiereZeit wird die gestoppte Zeit, wenn der Button gedrückt wird berechnet. Der letzte Durchlauf wird auf die aktuelle Zeit gesetzt.

Die Anzeige wird mit setTimeout jede Millisekunde aktualisiert.

Im Hauptprogramm (JavaScript) wird die Funktion durch:

aktualisiereZeit();

aufgerufen.

# data[].attributes.body
Die style.css Datei wird in die HTML Datei durch

<link rel="stylesheet" href="styyle.css">

eingebunden.

# data[].attributes.body
Um die Stoppuhr als App für das Smartphone zu veröffentlichen, suchst du im Internet nach einem "Web App Manifest Generator".
Hier kannst du den Namen der App und Farbeinstellungen eintragen.
Dann kopierst du den angezeigten Code und erstellst eine neue Datei manifest.json. In diese Datei kopierst du den Code und speicherst die Datei.

Die manifest.json Datei wird durch

<link rel= "manifest" href="manifest.json">

in die HTML Datei im Head Bereich eingebunden. Aus diesem Grund müssen alle Dateien im gleichen Ordner sein.

# data[].attributes.body
Alle Dateien:

index.html

manifest.json

stoppuhr.js

stoppuhr.css

werden dann in einen Ordner Stoppuhr kopiert.

Im nächsten Schritt wird der Ordner auf die Web-Seite

app.netlify.com/drop

hochgeladen. Ohne Registrierung ist die App eine Stunde verfügbar, mit Registrierung (Name, e-mail) unbegrenzt. Es sind maximal 4 Apps frei.

# data[].attributes.body
Das Programm "Wie geht es dir?" wird jetzt mit weiteren Antwortmöglichkeiten unter Verwendung von Radio Buttons erweitert.

# data[].attributes.body
Die Eingangsfragen (id="LBL" und id="LBLX") werden über den label Befehl definiert:

<label id="LBL">Hallo, wie geht´s?</label>

<label id="LBLX">Wie ist der Zustand?/label>

Der ok-Button wird über den button-Befehl definiert:

<button id = "BTN" onclick="itemClick()">Ok</button>

Die Positionen sind im style-Bereich festgelegt worden.