Ein und Ausgabe mit JavaScript und/oder HTML

Tätigkeiten werden in der Konsole geschrieben (F12)

console.log("Text %s %cText %i", varSring, CSS,varInt)
console alle Eigenschaften
Um die unterschiedlichen Arten der Logeinträge einzusehen: mit F12 die Entwicklertools aufrufen, danach die Funktion "Zeige die 3
Fensterchen" (nächster Abschnitt etwas weiter unten) aufrufen.
console.log, console.warn, console.error, console.info

Ganz einfach mit Popup-Fensterchen (alert, confirm, prompt)

Drei Mögliche Popup Boxen
Eingabe = prompt(Titel, Std-Text);
Bestätigung (Boolean) = confirm(Information); 2 Buttons
Hinweis: alert(Information); nur OK
(Die Funktion schreibt auch 'console' Einträge)

Hier noch einmal mit anderen Experimente

Mit [window.]alert(text) kann man dem User auf der Seite etwas Mitteilen.

<input type=button onclick="window.alert('Du hast mich angeklickt!');" value=window.alert />

Es gibt neben dem noch eine Bestätigungsanfrage und eine Eingabemöglichkeit , die beide aber mehr in einem Javascript Sinn machen.

Als Formular

Weitere Formular-Beispiele

Titel (input)

Notiz (textarea)

JS genügt     Erfordert PHP

IFrame dient der Ausgabe von externen Daten und kann mit JS nicht ausgelesen werden!

Als Feld mit 'getElementById'

Trage hier etwas ein:

Hier steht der Text, den du mit dem Text in der "Textarea" vertauschen wirst.

<DIALOG> Die praktische Überlagerung

Über Javascript:

Direkt mit command/commandfor(ohne JS). Eventuell im Dialog befindlicher Text wird wieder angezeigt.

Praktischer Gebrauch:

<dialog  id=dial open>
	<seo id=textImDisplay ></seo>
	<input type=button onclick='dialogSchliessen()'; value="Schliessen (JS)" /> 
	<button command="close" commandfor="dial" >Schliessen (Direkt)</button>
</dialog>

<button onclick='dialogAnzeigen("Anzeigengeblockt")';>Anzeigen geblockt</button>	
<button onclick='dialogAnzeigen("Anzeigengefrei")';>Anzeigen frei</button>	
<button command="show-modal" commandfor="dial">Anzeigen geblockt</button>

<script>
function dialogAnzeigen(was)
{
	if(was == "Anzeigengeblockt") 
	{
		// Unterbindet ein Programmabbruch wenn der Dialog schon als NON-Modal geöffnet ist.
		try
		{
			document.getElementById('dial').showModal();
		}
		catch(e)
		{
			document.getElementById('dial').close();
			document.getElementById('dial').showModal();
		}
		document.getElementById('textImDisplay').innerHTML = "Text ohne die Buttons zu beeinflussen.";
	}
	if(was == "Anzeigengefrei") 
		{
			document.getElementById('dial').show();
			document.getElementById('textImDisplay').innerHTML = "Text ohne die Buttons zu beeinflussen.";
		}
		if(was == "AnzeigenCode") 
		{
			document.getElementById('dial').show();
			document.getElementById('textImDisplay').innerHTML = "<pre>CODE</pre>";
		}
	}
	
	function dialogSchliessen()
	{
		document.getElementById('dial').close();
	}

</script>

<TAG title=TEXT>

In einem TAG bewirkt die Eigenschaft "title", dass ein Tooltip (nach etwa einer Sekunde) angezeigt wird.
Bleibe mit der Maus aud dem Titel dieses Abschnitts stehen.

Zuletzt aber nicht unwichtig 'document.write'

Der Text wird am Ort des Scripts ausgegeben ab hier: : bis hier

@Bearbeiten@