HTML5-Tutorium: JavaScript: Hello World 03 - Versionsgeschichte

Kowa: /* Interaktion mittels JavaScript */

2025-04-01T09:18:27Z

Interaktion mittels JavaScript

← Nächstältere Version		Version vom 1. April 2025, 09:18 Uhr
Zeile 219:		Zeile 219:
	function sayHello()		function sayHello()
	{ const name = document.getElementById('input_name').value		{ const name = document.getElementById('input_name').value

	document.getElementById('heading_hello').innerHTML =		document.getElementById('heading_hello').innerHTML =
	`Hello, ${name ? name : 'Stranger'}!`;		`Hello, ${name ? name : 'Stranger'}!`;

Kowa: /* Single-Page-Web-Anwendung */

2025-04-01T08:28:56Z

Single-Page-Web-Anwendung

← Nächstältere Version		Version vom 1. April 2025, 08:28 Uhr
Zeile 45:		Zeile 45:
	<section id="section_hello" class="hidden">		<section id="section_hello" class="hidden">
	<h1 id="heading_hello">Hello, ...!</h1>		<h1 id="heading_hello">Hello, ...!</h1>
	<p>Welcome to Full Stack Web Development!</p>		<p>Welcome to Full-Stack Web Development!</p>
	</section>		</section>
	</body>		</body>

Kowa: /* Anwendungsfälle (Use Cases) */

2025-04-01T08:22:29Z

Anwendungsfälle (Use Cases)

← Nächstältere Version		Version vom 1. April 2025, 08:22 Uhr
Zeile 9:		Zeile 9:
	Welt begrüßt werden, sondern der Benutzer, der die Web-Anwendung gestartet hat.		Welt begrüßt werden, sondern der Benutzer, der die Web-Anwendung gestartet hat.
	Dazu muss er zunächst nach seinem Namen gefragt werden.		Dazu muss er zunächst nach seinem Namen gefragt werden.
	Anschließend wird das HTML-~~Dokumnt~~ mit Hilfe von [[JavaScript]] umgestaltet: Das Eingabeformular wird ausgeblendet		Anschließend wird das HTML-Dokument mit Hilfe von [[JavaScript]] umgestaltet: Das Eingabeformular wird ausgeblendet
	und stattdessen wird die Begrüßungsformel angezeigt.		und stattdessen wird die Begrüßungsformel angezeigt.

Kowa: /* Definition eines HTML5-Formulars */

2025-03-12T11:05:29Z

Definition eines HTML5-Formulars

← Nächstältere Version		Version vom 12. März 2025, 11:05 Uhr
Zeile 129:		Zeile 129:
	eingesetzt.		eingesetzt.

	Sie können und sollten das Formular auch noch per CSS stylen:		Sie können und sollten das Formular auch noch per CSS stylen, indem Sie den CSS-Code aus dem [[HTML5-Tutorium: JavaScript: Hello World 02\|zweiten Teil des Tutoriums]] geeignet erweitern:

	<source lang="css">		<source lang="css">

Kowa: /* Barrierefreiheit */

2025-03-12T10:35:07Z

Barrierefreiheit

← Nächstältere Version		Version vom 12. März 2025, 10:35 Uhr
Zeile 311:		Zeile 311:
	Gemäß den „Richtlinien für barrierefreie Webinhalte“<ref>{{Quelle\|W3C (2018)}}</ref>, Abschnitt 2.1 soll eine Web-Entwickler dafür Sorge tragen,		Gemäß den „Richtlinien für barrierefreie Webinhalte“<ref>{{Quelle\|W3C (2018)}}</ref>, Abschnitt 2.1 soll eine Web-Entwickler dafür Sorge tragen,
	dass „alle Funktionalitäten per Tastatur zugänglich“ sind ( “Make all functionality available from a keyboard. ”). Das ist bei unserer Web-Anwendung nicht in voller Schönheit der Fall. Der Cursor befindet sich wegen		dass „alle Funktionalitäten per Tastatur zugänglich“ sind ( “Make all functionality available from a keyboard. ”). Das ist bei unserer Web-Anwendung nicht in voller Schönheit der Fall. Der Cursor befindet sich wegen
	des Attributes „<code>autofocus</code>“ im Text-Input-Feld des HTML-Dokument bei Start der Anwendung automatisch an der richtigen Position. (Leider funktioniert der Autofokus in vielen Situationen nicht, wie gewünscht. Die anderen Situationen, in denen eine Autofocus-Aktion erfolgen soll, muss man mit Hilfe von JavaScript realisieren~~. Darauf wird in diesem Kurs verzichtet~~.)		des Attributes „<code>autofocus</code>“ im Text-Input-Feld des HTML-Dokument bei Start der Anwendung automatisch an der richtigen Position. (Leider funktioniert der Autofokus in vielen Situationen nicht, wie gewünscht. Die anderen Situationen, in denen eine Autofocus-Aktion erfolgen soll, muss man mit Hilfe von JavaScript realisieren: siehe [[HTML5-Tutorium: JavaScript: Hello World 04\|Teil 4 des Tutoriums]].)
	Man muss also den Cursor nicht erst mit Hilfe der Maus platzieren. Auch die Weiterschaltung mittels Tab-Taste funktioniert. Man kann zunächst seinen		Man muss also den Cursor nicht erst mit Hilfe der Maus platzieren. Auch die Weiterschaltung mittels Tab-Taste funktioniert. Man kann zunächst seinen
	Namen eingeben, dann zweimal die Tab-Taste betätigen, um den Submit-Button zu aktivieren und dann Return drücken, um ein Klick-Event für diesen Button		Namen eingeben, dann zweimal die Tab-Taste betätigen, um den Submit-Button zu aktivieren und dann Return drücken, um ein Klick-Event für diesen Button

Kowa: /* Definition eines HTML5-Formulars */

2025-03-11T15:10:10Z

Definition eines HTML5-Formulars

← Nächstältere Version		Version vom 11. März 2025, 15:10 Uhr
Zeile 97:		Zeile 97:
	<div>		<div>
	<label for="input_name">What's your name?</label>		<label for="input_name">What's your name?</label>
	<input id="input_name">		<input id="input_name" autofocus>
	</div>		</div>
	<div>		<div>

Kowa: /* Definition eines HTML5-Formulars */

2025-03-11T15:09:08Z

Definition eines HTML5-Formulars

← Nächstältere Version		Version vom 11. März 2025, 15:09 Uhr
Zeile 112:		Zeile 112:
	Jedes Div-Element steht in einer eigenen Zeile, die darin enthaltenen Elemente stehen jeweils hintereinander in einer Zeile.		Jedes Div-Element steht in einer eigenen Zeile, die darin enthaltenen Elemente stehen jeweils hintereinander in einer Zeile.
	Mittels CSS können die Elemente nun besser angeordnet werden: mehr Abstand von der Überschrift, mehr vertikaler Abstand		Mittels CSS können die Elemente nun besser angeordnet werden: mehr Abstand von der Überschrift, mehr vertikaler Abstand
	zwischen den Elementen, einheitliche Breite der Elemente etc. Wie sagt [[Captain Picard]] ganz richtig: ~~„Machen Sie es~~ so.“		zwischen den Elementen, einheitliche Breite der Elemente etc. Wie sagt [[Captain Picard]] ganz richtig: „[https://www.startrek.com/en-un/videos/make-it-so-captain-picard Make it so.]“

	Beachten Sie, dass zwei weitere <code>id</code>-Attribute eingeführt wurden: „<code>id="input_name"</code>“ und „<code>id="button_submit"</code>“.		Beachten Sie, dass zwei weitere <code>id</code>-Attribute eingeführt wurden: „<code>id="input_name"</code>“ und „<code>id="button_submit"</code>“.

Kowa: /* Interaktion mittels JavaScript */

2025-03-11T15:02:48Z

Interaktion mittels JavaScript

← Nächstältere Version		Version vom 11. März 2025, 15:02 Uhr
Zeile 297:		Zeile 297:
	</source>		</source>

	Der Schrägstrich am Ende des Tags ist auch (self closing tag) SGML/XML-, aber nicht HTML5-konform. Die ~~Brwoser~~ sind hinsichtlich der Einhaltung von ~~Konfotmitätsregel~~ allerdings nicht sonderlich pedantisch. Sie interpretieren ~~auc~~ nicht-konformen HTML-Code. Allerdings können dabei ~~versciedene Brwoser~~ durchaus zu verschiedenen Interpretationen kommen.		Der Schrägstrich am Ende des Tags ist auch (self closing tag) SGML/XML-, aber nicht HTML5-konform. Die Browser sind hinsichtlich der Einhaltung von Konformitätsregel allerdings nicht sonderlich pedantisch. Sie interpretieren auch nicht-konformen HTML-Code. Allerdings können dabei verschiedene Browser durchaus zu verschiedenen Interpretationen kommen.

	Die tieferen Gründe dafür werden sehr schön auf		Die tieferen Gründe dafür werden sehr schön auf
Zeile 305:		Zeile 305:
	Testen Sie Ihre Anwendung nochmals. Sie sollten jetzt Ihren Namen in das Textfeld		Testen Sie Ihre Anwendung nochmals. Sie sollten jetzt Ihren Namen in das Textfeld
	eingeben und dann „<code>Say hello</code>“ klicken können. Das Ergebnis sollte sein, dass Sie		eingeben und dann „<code>Say hello</code>“ klicken können. Das Ergebnis sollte sein, dass Sie
	von Ihrer Anwendung persönlich begrüßt werden. Wenn alles funktioniert, sollten Sie wieder committen.		von Ihrer Anwendung persönlich begrüßt werden. Wenn alles funktioniert, sollten Sie wieder committen.

	==Barrierefreiheit==		==Barrierefreiheit==

Kowa: /* Barrierefreiheit */

2025-03-11T14:59:02Z

Barrierefreiheit

← Nächstältere Version		Version vom 11. März 2025, 14:59 Uhr
Zeile 311:		Zeile 311:
	Gemäß den „Richtlinien für barrierefreie Webinhalte“<ref>{{Quelle\|W3C (2018)}}</ref>, Abschnitt 2.1 soll eine Web-Entwickler dafür Sorge tragen,		Gemäß den „Richtlinien für barrierefreie Webinhalte“<ref>{{Quelle\|W3C (2018)}}</ref>, Abschnitt 2.1 soll eine Web-Entwickler dafür Sorge tragen,
	dass „alle Funktionalitäten per Tastatur zugänglich“ sind ( “Make all functionality available from a keyboard. ”). Das ist bei unserer Web-Anwendung nicht in voller Schönheit der Fall. Der Cursor befindet sich wegen		dass „alle Funktionalitäten per Tastatur zugänglich“ sind ( “Make all functionality available from a keyboard. ”). Das ist bei unserer Web-Anwendung nicht in voller Schönheit der Fall. Der Cursor befindet sich wegen
	des Attributes „<code>autofocus</code>“ im Text-Input-Feld des HTML-Dokument bei Start der Anwendung automatisch an der richtigen Position. (Leider funktioniert der Autofokus in vielen Situationen nicht, wie gewünscht. Die anderen Situationen, in denen eine Autofocus-Aktion erfolgen soll, muss man mit Hilfe von JavaScript realisieren~~: siehe [[HTML5-Tutorium:_JavaScript:_Hello_World_04\|Teil 4 des Tutoriums]]~~)		des Attributes „<code>autofocus</code>“ im Text-Input-Feld des HTML-Dokument bei Start der Anwendung automatisch an der richtigen Position. (Leider funktioniert der Autofokus in vielen Situationen nicht, wie gewünscht. Die anderen Situationen, in denen eine Autofocus-Aktion erfolgen soll, muss man mit Hilfe von JavaScript realisieren. Darauf wird in diesem Kurs verzichtet.)
	Man muss also den Cursor nicht erst mit Hilfe der Maus platzieren. Auch die Weiterschaltung mittels Tab-Taste funktioniert. Man kann zunächst seinen		Man muss also den Cursor nicht erst mit Hilfe der Maus platzieren. Auch die Weiterschaltung mittels Tab-Taste funktioniert. Man kann zunächst seinen
	Namen eingeben, dann zweimal die Tab-Taste betätigen, um den Submit-Button zu aktivieren und dann Return drücken, um ein Klick-Event für diesen Button		Namen eingeben, dann zweimal die Tab-Taste betätigen, um den Submit-Button zu aktivieren und dann Return drücken, um ein Klick-Event für diesen Button

Kowa am 11. Mai 2024 um 14:15 Uhr

2024-05-11T14:15:10Z

Änderungen zeigen