Agenda

Grundlagen

• HTML/CSS/JS
• JSON
• HTTP-Protokoll
• Debugger

Fortgeschrittenes

• NodeJS
• Responsive Design
• CSS-Animationen
• WebComponents / lit
• Canvas-Element
• Datenbank

Architektur & Paradigmen

• Funktionale Programmierung
• Objektorientierte Programmierung
• Entwurfsmuster (Singleton, Factory, Builder...)
• SOLID-Prinzipien
• Dependency Injection
• MVC
• Redux

Interessante Technologien

• WebSockets
• WebWorker
• ServiceWorker
• WebRTC
• WebGL
• Progressive Web Application
• CEF / Electron
• WebAssembly

Betrieb

• Server einrichten
• SSL- / TLS-Zertifikate

Workflows

• Git
• Test Driven Development
• Continuous Integration / Continuous Delivery

HTML

• HyperText Markup Language
• Erste Version 1993 von Tim Berners-Lee
• Dokumentationsmedium
• Ursprünglich rein akademische Verwendung
• Verlinkungen der Dokumente macht sie "hyper"

• Heute ein "lebender Standard" (Living Standard)
• Stetige inkrementelle Erweiterung

Grundgerüst

Beispiel

Beispiel

Aufbau eines Elements

CSS

• Cascading Style Sheet
• Nach größerer Verbreitung von HTML
• Webseiten ansprechend gestalten

Beispiel

							
								selector [, selector, selector, ...] {
									property: value;
								}
							
						

Beispiel

							
								html {
									background-color: red;
									font-size: 30px;
								}
							
						

Beispiel

Beispielhafte CSS-Eigenschaften

• background-color: red
• font-family: Georgia, serif, Arial
• text-decoration: line-through underline

Selektoren

• Umfangreiche Element-Selektoren zur Anwendung der Styles
• Kinder, Enkel...
• Geschwister, direkte Nachfolger
• Attribute
• Pseudoklassen

Selektoren

							
								#my-id /* ID */
								html, body /* Mehrfachselektion */
								div > p /* p die direkt unterhalb eines div sind */
								div  p /* p die irgendwo unterhalb eines div sind */
								a:visited /* besuchte Links */
								div:hover /* divs über die man mit der Maus fährt */
								span.important /* span mit der Klasse "important" */
							
						

Layout

Es gibt zwei grundlegende Blocktypen:

block

inline

Block

Beansprucht eine ganze Zeile und verursacht Zeilenumbrüche

							
								display: block;
							
						

Kann Breite und Höhe haben

							
								display: block;
								width: 20px;
								height: 20px;
							
						

Inline

Wie einfacher Text, der mit anderen in der gleichen Zeile stehen kann

							
								display: inline;
							
						

Festlegen von Breite und Höhe sind wirkungslos

							
								display: inline;
								width: 20px; /* kein Effekt */
								height: 20px; /* kein Effekt */
							
						

Inline-Block

Mischform von inline und block

							
								display: inline-block;
								width: 20px;
								height: 20px;
							
						

Spezifität

Regeln können andere Regeln überschreiben

							
								#id:hover { display: none }

								#id { display: block }

								.class.clazz { display: inline }

								div { display: inline-block }
							
						

Box Model

Es gibt zwei Varianten des Modells:

content-box (default)

border-box

							
								box-sizing: content-box;
								box-sizing: border-box;
							
						

Beispiel

							
								div {
									border: 3px solid red;
									padding: 10px;
									width: 100px;
								}

								.border-box {
									box-sizing: border-box;
								}

								.content-box {
									box-sizing: content-box;
								}
							
						

Beispiel

Positioning

							
								/* default, da wo es in der Seite steht */
								position: static;
								/* relativ zu seiner eigentlichen Position */
								position: relative;
								/* relativ zu seinem nächsten non-static parent o. window */
								position: absolute;
							
						

							
								position: relative;
								position: absolute;
							
						

erlauben Verschiebung mittels

							
								top: 10px;
								left: 10px;
								right: 10px;
								bottom: 10px;
							
						

Beispiel Menü

							
								.menu-item {
									display: inline-block;

									position: relative;
								}

								.menu-item .children {
									display: none;

									position: absolute;
								}

								.menu-item:hover .children {
									display: block;
								}
							
						

JS

• JavaScript stammt aus dem Jahr 1995 von Netscape
• Syntaktisch an Java angelehnt
• Ursprünglich nur optionale, verzichtbare Effekte (unobstrusive)
• Mittlerweile von ECMA standardisiert

Code wird zwischen script-Tags geschrieben

							
								<!DOCTYPE html>
								<html lang="de">
									<head>
										<meta charset="UTF-8">
									</head>
									<body>
										<script>// code</script>
									</body>
								</html>
							
						

DOM-API

							
								// findet das erste Element
								const parent = document.querySelector("#id");

								// findet alle Elemente
								const elements = document.querySelectorAll("#id");

								// Element erstellen
								const newElement = document.createElement("div");

								newElement.addEventListener("click", (event) => {
									// Click-Event
								});

								// Element anhängen
								parent.appendChild(newElement);

								newElement.remove();
							
						

Auslagern in verschiedene Dateien

							
								<!DOCTYPE html>
								<html>
									<head>
										
										
									</head>
									<body>
										
										<script src="index.js"></script>
									</body>
								</html>
							
						

Parsen eines HTML-Dokuments

Verschiedene Varianten, JavaScript erst am Ende auszuführen

Damals mit jQuery:

							
								<!DOCTYPE html>
								<html>
									<head>
										<script>
											$(document).ready((event) => {
												const element = document.querySelector("#hello");
											});
										</script>
									</head>
									<body>
										
Hello World!
									</body>
								</html>
							
						

script-Tag am Ende

							
								<!DOCTYPE html>
								<html>
									<head>
									</head>
									<body>
										
Hello World!
										...
										<script src="index.js"></script>
									</body>
								</html>
							
						

Event-basiert, z.B. per DOMContentLoaded

							
								<!DOCTYPE html>
								<html>
									<head>
										<script>
											document.addEventListener("DOMContentLoaded", (event) => {
												// wird ausgeführt, sobald das Dokument geparst wurde
												const element = document.querySelector("#hello");
											});
										</script>
									</head>
									<body>
										
Hello World!
									</body>
								</html>
							
						

Moderne Variante

							
								<script src="index.js" defer></script>
							
						

document-Operationen

							
								document.open();
								document.write("
Booo!
");
								document.close();
							
						

							
								<body>
									<script>document.write("
Dies ist ein Text.
")</script>
									Dunkle Magie
									<script>
										const button = document.querySelector("button");

										button.addEventListener("click", () => {
											document.write("Und pfutsch!");
										});
									</script>
								</body>
							
						

HTTP-Protokoll

• Befindet sich auf den OSI-Schichten 5, 6 und 7
• Basiert auf dem Anfrage-Antwort-Prinzip
• Basiert auf reinem Text

npm install http-server

npx http-server --port 3000