Javascript Informatik Klassenarbeit?
Wir schreiben bald eine Informatik Arbeit und ich hab auch alles so weit verstanden, bis auf das mit dem Javascript zeug, also prompt befehle, kontrollstrukturen und so. Wir müssen halt so anzeigen lassen, dass man was eingibt, die webseite dann wieder was ausgibt. Kann mir jemand erklären wie man das macht?
2 Antworten
Wenn eine Webseite im Browser geladen wird, legt der Browser das DOM an. Dies ist im Prinzip eine Baumhierarchie aller HTML-Elemente und Textknoten. Auf Media Event oder MDN wird dies etwas ausführlicher erklärt.
Zu dieser Baumstruktur stellt der Browser zudem verschiedene Funktionen zur Verfügung, um Einfluss auf das DOM zu nehmen (schau auf MDN, dort gibt es eine komplette Referenz zu diesen Features). Mit JavaScript kannst du folgendermaßen Elemente auslesen und verändern.
Wir müssen halt so anzeigen lassen, dass man was eingibt, die webseite dann wieder was ausgibt.
Ein komplettes Minibeispiel:
<!doctype html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p id="output"></p>
<script>
const textForOutput = prompt("Enter some text");
if (textForOutput.length > 0) {
const outputElement = document.getElementById("output");
outputElement.innerText = textForOutput;
}
</script>
</body>
</html>
Du hast ein einfaches HTML-Dokument vorliegen, welches einen Paragraph beinhaltet. Diesem Paragraph habe ich eine ID zugeordnet, sodass er später leichter im DOM auffindbar ist. Das script-Element danach beinhaltet den JavaScript-Code, welcher mit dem Laden der Webseite ausgeführt wird.
Der Browser generiert zu diesem Dokument so eine Baumstruktur:
html
head
title
Text: "Example"
body
p#output
Text: ""
script
Text: "const textForOutput = ...."
Im Skript wird nun erst einmal eine Variable textForOutput angelegt, in der die Eingabe des Nutzers gespeichert werden soll. Da sich ihr Wert danach nicht noch einmal ändern soll, kann sie ruhig als konstant deklariert werden.
const textForOutput = prompt("Enter some text");
Die prompt-Funktion ist eine Funktion, die der Browser zur Verfügung stellt. Sie sorgt dafür, dass ein Dialog mit einem Eingabefeld geöffnet wird. Das übergebene Argument stellt die Beschriftung für dieses Feld.
Sobald der Nutzer den Dialog bestätigt, wird der Wert des Eingabefeldes von prompt zurückgegeben und der Variable zugewiesen.
Im nächsten Schritt prüfe ich den eingegebenen Wert auf seine Länge (length ist eine Eigenschaft, die zu jedem String aufgerufen werden kann):
if (textForOutput.length > 0) {
War die Eingabe nämlich leer, lohnt es sich nicht, diese auszugeben. Der Paragraph ist immerhin schon leer.
Wenn die Eingabe nicht leer war, wird eine weitere Variable erstellt. Sie zeigt wiederum auf das HTML-Element, in welchem die Eingabe ausgegeben werden soll. Wie schon geschrieben, soll der Paragraph diese Rolle erfüllen.
const outputElement = document.getElementById("output");
Die Variable document wird vom Browser gestellt. Sie zeigt auf das Dokument und ist damit eine der direkten Schnittstellen auf Funktionen, mit denen das DOM bearbeitet werden kann. Eine solcher Funktionen ist getElementById. Diese durchläuft die komplette Baumstruktur und sucht nach dem Element, welches die ID output hat.
Im letzten Schritt wird der Text in den Paragraph gesetzt:
outputElement.innerText = textForOutput;
Die Eigenschaft innerText steht jedem Element im DOM zur Verfügung, in welches ein Textknoten eingefügt werden kann. Das wären Elemente wie div, p, span, article, etc.. Beachte, dass bspw. input-Elemente dem nicht inbegriffen sind. Bei diesen müsstest du mit der value-Eigenschaft arbeiten.
Man kann über innerText entweder den Textknoten im Element auslesen oder aber überschreiben, indem man ihm wie oben einen neuen Wert zuordnet.
Hi!
Klar, geht eigentlich ganz einfach: (und unschön)
var eingabe = prompt("Gib einen Text ein", "Text");
alert(eingabe);
Wäre das simpelste.
Schwieriger ist:
var feld = document.createElement("input");
body = document.getElementsByTagname("body")[0];
body.appendChild(feld);
feld.id="eingabe";
button = docuement.createElement("button");
body.appendChild(button);
button.addEventListener("click", function() {
inhalt = document.getElementById("eingabe").value;
neu = document.createElement("div");
body.appendChild(neu);
neu.innerText=inhalt;
});
Müsste gehen & ich hoffe, ich konnte helfen!
LG,
NiZi112
Schau noch einmal über deine Snippets. Du hast mehrere Tippfehler eingebaut.
Bezüglich der Semikolons sollte eine einheitliche Linie gefahren werden (entweder immer setzen oder nicht) und bei den Variablen wäre es wünschenswert, mit let oder const zu arbeiten, statt var oder global.
Der Gebrauch von innerHTML ist unnötig, da ein Nutzer wohl kaum HTML in ein einzeiliges Eingabefeld eingeben wird. Das innerText-Property ist die bessere Wahl.