JavaScript - Einführung by Jens-Thomas Meyer

Hintergrund

jtmeyer — 2022-09-13 06:08:06 UTC

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.

Programmierumgebung

jtmeyer — 2022-09-13 06:10:12 UTC

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.

Programm ausführen in VisualStudioCode

jtmeyer — 2022-09-13 06:10:33 UTC

Das Programm muss zunächst gespeichert werden. Dann wird es mit dem Pfeil an der linken Leiste ausgeführt.

Wer bist du? - Teil 1

jtmeyer — 2022-09-13 06:15:34 UTC

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.

Wer bist du? - Teil 3

jtmeyer — 2022-09-16 08:20:47 UTC

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.

Wie geht es dir? - Teil 2

jtmeyer — 2022-09-16 08:28:40 UTC

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.

Wie geht es dir? Teil 4

jtmeyer — 2022-09-16 08:56:34 UTC

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.

Ein bisschen Grundrechnen

jtmeyer — 2022-09-16 09:27:37 UTC

Im zweiten JavaScript Programm testen wir einige mathematische Funktionen für die Grundrechenarten: +, -, /, *.

Die Tabelle zeigt die unterschiedlichen Symbole.

Rechnen - Teil 1

jtmeyer — 2022-09-16 09:40:34 UTC

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.

Rechnen - Teil 2

jtmeyer — 2022-09-16 16:12:07 UTC

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.

Rechnen - Teil 3

jtmeyer — 2022-09-16 16:16:21 UTC

Aufgabe:

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

Simulation einer Ziehung der Lottozahlen - Teil 1

jtmeyer — 2022-09-16 16:35:46 UTC

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 + "
");
}

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?

Lottozahlen - Teil 2

jtmeyer — 2022-09-17 09:09:52 UTC

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 + "
");
}

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

Lottozahlen - Teil 2 - der Kehrwert mit !kugel

jtmeyer — 2022-09-17 09:20:05 UTC

Durch das Ausrufezeichen wird der Kehrwert der Variablen gebildet. Probiere das Script:

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

aus, um das Ergebnis von !kugel zu sehen.

Lottozahlen - Teil 3

jtmeyer — 2022-09-18 09:45:50 UTC

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.

Lottzahlen - Teil 4

jtmeyer — 2022-09-18 10:31:42 UTC

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("
"Sortiert:
";
bubbleSort(lotto, 6);
for (var nr = 0; nr < 6; nr++)
document.write("Nr. " + (nr + 1) + " => " + lotto[nr] + "
");

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

JavaScript Einbettung in HTML

jtmeyer — 2022-09-19 06:35:08 UTC

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:

Das ist HTML

Hallo

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:

Das ist HTML

Hallo

(<)script(>)
document.write("Hallo");
(<)/script(>)

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.

Einen button mit Funktion programmieren

jtmeyer — 2022-09-19 06:56:06 UTC

Innerhalb des body-Tags programmieren wir jetzt einen 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.

Stylen des Buttons

jtmeyer — 2022-09-19 07:30:26 UTC

Das Aussehen des Buttons wird innerhalb des body in einem style-Bereich festgelegt:

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:

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

Struktur des Programms

jtmeyer — 2022-10-04 06:37:48 UTC

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.

Der Style Bereich

jtmeyer — 2022-10-04 07:00:30 UTC

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(>).

Label und o.k. Button

jtmeyer — 2022-10-28 06:55:04 UTC

Die Eingangsfragen (id="LBL" und id="LBLX") werden über den label Befehl definiert:

Hallo, wie geht´s?

Wie ist der Zustand?/label>

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

Die Positionen sind im style-Bereich festgelegt worden.

Chatbot script-Bereich

jtmeyer — 2022-10-28 07:08:21 UTC

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.

Einfache grafische Elemente

jtmeyer — 2022-10-29 08:20:54 UTC

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.

Einfache Linie

jtmeyer — 2022-10-29 17:09:16 UTC

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:

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.

Koordinatensystem JavaScript

jtmeyer — 2022-10-31 08:55:11 UTC

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).

Das Haus vom Nikolaus - Aufgabe

jtmeyer — 2022-10-31 09:07:28 UTC

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.

Bunte Linien

jtmeyer — 2022-11-01 07:41:33 UTC

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.

Zeichnen mit Grundformen

jtmeyer — 2022-11-01 08:13:33 UTC

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.

HTML Grundstruktur

jtmeyer — 2022-11-01 11:06:12 UTC

Selber Zeichnen

jtmeyer — 2023-01-08 09:46:22 UTC

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.

Aufbau der WebAnwendung

jtmeyer — 2023-01-08 10:09:24 UTC

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.

Vorgehensweise

jtmeyer — 2023-01-08 10:33:04 UTC

Schaue dir die erstellen JavaScript Programme an. Bislang haben wir html-Dateien erstellt.

Markiere den script-Bereich, ohne das öffnende und schließende Schlüsselwort, schneide diesen aus oder kopiere diesen,
füge ihn in eine neue Datei mit dem Namen meinScript.js ein,
in der html-Datei fügst dann im body den Befehl (<)script src="meinScript.js"(>)(<)/script(>) ein.
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.

CSS Dateien

jtmeyer — 2023-01-08 10:37:38 UTC

Das Aussehen der html-Elemente, z.B. Abschnitte (

) wird in einer CSS Datei beschrieben. Dazu werden wir kommen, wenn wir HTML Seiten programmieren.

addEventListener

jtmeyer — 2023-01-08 10:47:47 UTC

Ü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.

Funktionen mouseup / mousedown

jtmeyer — 2023-01-08 10:50:57 UTC

Funktion movemouse

jtmeyer — 2023-01-08 10:56:50 UTC

Diese Funktion beschreibt das Zeichnen. Wenn du hier den path-Befehl deaktivierst kannst du einzelne Wörter schreiben.

Quiz erstellen mit JavaScript

jtmeyer — 2023-01-16 07:41:47 UTC

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.

HTML Datei Quiz

jtmeyer — 2023-01-16 07:55:54 UTC

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:

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

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

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

JavaScript - Quiz -Teil1

jtmeyer — 2023-01-16 17:09:47 UTC

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.

Methode collectQuests()

jtmeyer — 2023-01-16 17:15:52 UTC

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.

Anzeige der Fragen und Antworten.

jtmeyer — 2023-01-16 17:22:54 UTC

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.

Hauptprogramm

jtmeyer — 2023-01-16 17:32:44 UTC

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));

Quiz Fragen einlesen aus Datei

jtmeyer — 2023-01-21 09:36:28 UTC

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.

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.

Ereignis Methode readFile

jtmeyer — 2023-01-21 10:44:19 UTC

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.

Ereignis Methode 2

jtmeyer — 2023-01-21 12:42:22 UTC

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.

Quiz constructor

jtmeyer — 2023-01-21 16:21:58 UTC

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.

Quiz Methode collectQuests

jtmeyer — 2023-01-21 16:27:53 UTC

Mit der Methode collectQuest(text) werden die definierten Felder jetzt aufgefüllt.

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

Methode showQuest

jtmeyer — 2023-01-21 16:30:46 UTC

Diese Methode können wir unverändert aus Teil 1 übernehmen.

Richtig oder Falsch

jtmeyer — 2023-01-21 16:59:19 UTC

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.

Aufruf von showResult

jtmeyer — 2023-01-21 17:07:13 UTC

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.

Neue Fragen

jtmeyer — 2023-01-21 17:20:37 UTC

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:

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.

Beispiel einer Text Datei für das Quiz

jtmeyer — 2023-01-21 17:36:52 UTC

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.

JavaScript Grundlagen

jtmeyer — 2023-02-03 17:34:13 UTC

Das fertige Produkt Quiz

jtmeyer — 2023-02-11 11:56:06 UTC

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.

index.html

jtmeyer — 2023-02-11 12:03:07 UTC

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.

quiz.js

jtmeyer — 2023-02-11 12:08:52 UTC

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.

Text Datei mit Fragen

jtmeyer — 2023-02-11 12:14:38 UTC

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.

Stoppuhr als Webseite und als App

jtmeyer — 2023-02-17 07:49:24 UTC

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.

Datums Objekt Date()

jtmeyer — 2023-02-18 12:16:30 UTC

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?

Berechnung der Zeit

jtmeyer — 2023-02-19 10:11:50 UTC

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.

Aufgabe: Sekundenanzeige

jtmeyer — 2023-02-19 10:21:05 UTC

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.

Uhrzeit ausgeben

jtmeyer — 2023-02-19 11:15:57 UTC

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 + "
");

Ausgabe der Uhrzeit auf der HTML Seite

jtmeyer — 2023-02-19 12:12:43 UTC

Um die Uhrzeit auf der HTML Seite an einem bestimmten Ort auszugeben benutzen wir einen div-Container:

hier Uhrzeit anzeigen

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.

Methoden von Date()

jtmeyer — 2023-02-27 15:54:06 UTC

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.

Aufgabe:

jtmeyer — 2023-02-27 16:05:40 UTC

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).

Operatoren in JavaScript

jtmeyer — 2023-03-04 18:04:25 UTC

Eine gute Übersicht zu Operatoren in JavaScript findest du auf der

Berechnung der gestoppten Zeit

jtmeyer — 2023-03-06 08:51:34 UTC

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.

Programmierung der abgelaufenen Zeit

jtmeyer — 2023-03-06 09:52:59 UTC

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.

Berechnung Stunden, Minuten, Sekunden, Millisekunden

jtmeyer — 2023-03-06 10:12:39 UTC

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.

Abschluss Stoppuhr und Veröffentlichung als App für das Smartphone

jtmeyer — 2023-03-11 17:54:52 UTC

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.

Erweiterungen in der index.html

jtmeyer — 2023-03-12 12:32:44 UTC

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.

00:00:00:00:000

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.

onClick="pause()">Pause

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

Erweiterungen in stoppuhr.js

jtmeyer — 2023-03-12 12:44:04 UTC

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.

Funktionen aktualisiereZeit u. aktualisiereAnzeige

jtmeyer — 2023-03-12 17:44:35 UTC

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.

Veröffentlichung als App

jtmeyer — 2023-03-12 17:55:14 UTC

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

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

Veröffentlichung als App II

jtmeyer — 2023-03-12 18:03:40 UTC

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.

Style Datei style.css

jtmeyer — 2023-03-12 18:08:08 UTC

Die style.css Datei wird in die HTML Datei durch

eingebunden.

Chatbot mit Radio Buttons

jtmeyer — 2024-05-22 06:53:28 UTC

Das Programm "Wie geht es dir?" wird jetzt mit weiteren Antwortmöglichkeiten unter Verwendung von Radio Buttons erweitert.

Label und o.k. Button

jtmeyer — 2024-05-22 06:54:01 UTC

Die Eingangsfragen (id="LBL" und id="LBLX") werden über den label Befehl definiert:

Hallo, wie geht´s?

Wie ist der Zustand?/label>

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

Die Positionen sind im style-Bereich festgelegt worden.