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

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();