Agenda

Grundlagen

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

Fortgeschrittenes

• JavaScript
• 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

• OSI-Schichten 5, 6 und 7
• Anfrage-Antwort-Prinzip
• Basiert auf einfachem Text

Request an www.google.de

							
								GET / HTTP/1.1
								Host: www.google.de
								User-Agent: curl/7.88.1
								Accept: */*
							
						

Response von www.google.de

							
								HTTP/1.1 200 OK
								Date: Tue, 04 Apr 2023 15:45:26 GMT
								Expires: -1
								Cache-Control: private, max-age=0
								Content-Type: text/html; charset=ISO-8859-1
								Content-Security-Policy-Report-Only: [...]
								Server: gws
								X-XSS-Protection: 0
								X-Frame-Options: SAMEORIGIN
								Set-Cookie: [...]
								Accept-Ranges: none
								Vary: Accept-Encoding
								Transfer-Encoding: chunked
								
								<!doctype html><html>...</html>
							
						

Einfach mal testen:

							
								curl -v --http1.0 http://www.google.de
								curl -v --http1.1 http://www.google.de
								curl -v --http2 http://www.google.de
								curl -v --http2-prior-knowledge http://www.google.de
								curl -v --http3 http://www.google.de
							
						

Verschiedene "Verben" bzw. "Methoden"

• GET
• POST
• PUT
• PATCH
• DELETE
• ...

Beispiel:

							
								git clone https://git.furnco.de/r/public/web-development/examples.git
								cd examples/templates/005-http-rest
								node index.js
							
						

							
								curl -X GET -is http://localhost:3000/todo
								curl -X POST -H "Content-Type: application/json" -d '{"name": "Einkaufen"}' -is http://localhost:3000/todo
								curl -X POST -H "Content-Type: application/json" -d '{"name": "Putzen"}' -is http://localhost:3000/todo
								curl -X PUT -H "Content-Type: application/json" -d '{"name": "Schlafen"}' -is http://localhost:3000/todo/1
								curl -X DELETE -is http://localhost:3000/todo/0
							
						

							
								HTTP/1.1 200 OK
								X-Powered-By: Express
								Content-Type: application/json; charset=utf-8
								Content-Length: 13
								ETag: W/"d-KMmUcQ1kigqtwzZnU+jVDkYP3Co"
								Date: Wed, 05 Apr 2023 12:05:05 GMT
								Connection: keep-alive
								Keep-Alive: timeout=5
								
								["Einkaufen"]
							
						

							
								app.get("/todo", (req, res) => {
									return res.json(todos);
								});
								
								// [...]
								
								app.post("/todo", (req, res) => {
									// [...]
										return res.json(todos);
									// [...]
								});
							
						

GET und POST auf klassischen Webseiten

							
								

									add
								
							
						

Beispiel:

							
								cd examples/templates/006-http-web
								node index.js
							
						

JSON

• JavaScript Object Notation
• Basiert auf reinem Text
• Format zur strukturierten Speicherung von Daten
• Attribute müssen immer in doppelte Anführungsstriche (") gesetzt werden

Definition eines einfachen Objekts in JS

							
								const o = {
									x: 1,
									y: 2
								};
							
						

Entsprechung in JSON

							
								{
									"x": 1,
									"y": 2
								}
							
						

Mögliche Typen

• Number (bzw. Integer / Float)
• Boolean
• String
• Array
• Object

Der äußere Container kann ein Array oder ein Object sein

							
								{
									"key": "value",
								}
							
						

							
								[
									"foo",
									"bar"
								]