Web-Entwicklung
Agenda
Grundlagen
- HTML/CSS/JS
- HTTP-Protokoll
- JSON
Fortgeschrittenes
- JavaScript
- Responsive Design
- NodeJS
- WebComponents / lit
- Datenbank
Architektur & Paradigmen
- Funktionale Programmierung
- Objektorientierte Programmierung
- Entwurfsmuster (Singleton, Factory, Builder...)
- SOLID-Prinzipien
- Dependency Injection
- MVC
- Redux
Interessante Technologien
- Canvas-Element
- CSS-Animationen
- 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"
| Version | Erscheinung | Elemente ca. |
|---|---|---|
| HTML 1.0 | 1993 | 20 |
| HTML 2.0 | 1995 | 50 |
| HTML 3.2 | 1997 | 70 |
| HTML 4.01 | 1999 | 90 |
| HTML 5.0 | 2014 | 110 |
- 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
| Version | ECMA Standard | Jahr |
|---|---|---|
| ES1 | ECMAScript 1 | 1997 |
| ES2 | ECMAScript 2 | 1998 |
| ES3 | ECMAScript 3 | 1999 |
| ES5 | ECMAScript 5 | 2009 |
| ES6 | ECMAScript 2015 | 2015 |
| ... | ||
| ECMAScript 2020 | 2020 |
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>
<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
| Version | Jahr |
|---|---|
| 0.9 | 1991 |
| 1.0 | 1996 |
| 1.1 | 1999 |
| 2.0 | 2015 |
| 3.0 | 2022 |
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
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"
]
JavaScript
| c / c++ | Java | C# | JS | |
|---|---|---|---|---|
| Formale Spezifikation | ja | |||
| Übersetzung | Nativ kompiliert | Bytecode | Interpretiert / kompiliert (JIT) | |
| Typisierung | statisch | dynamisch | ||
| Speicher-Management | Manuell | Garbage Collector | ||
Begrifflichkeiten
function add(x, y) {
return x + y;
}
const a = 5;
const b = add(a, 6);
const c = [];
Operator, Aufruf (Call), Ausdruck (Expression), Parameter, Argument, Literal,
Zuweisung (Assignment), Linke Hand (Left hand), Rechte Hand (Right hand)
Ausführung
node index.js
Ausgaben
console.log("Hello World!");
Vorbereiten der Beispiele (bei Bedarf)
. hooks/post-checkout
Variablen
// < es6
var x = 1;
// >= es6
let y = 2;
const z = 3;
var yes = false;
if (yes) {
var a = 1;
}
console.log(a);
undefined
var yes = false;
if (yes) {
let a = 1;
}
console.log(a);
ReferenceError: a is not defined
function foo() {
var yes = false;
if (yes) {
var a = 1;
}
}
foo();
console.log(a);
ReferenceError: a is not defined
var
- hat
function-Scope - wird durch hoisting ("hochziehen") aus dem Block heraus an den Start der Funktion gezogen
var yes = false;
var a;
if (yes) {
a = 1;
}
console.log(a);
let, const
- haben intuitiven Block-Scope (wie viele andere Programmiersprachen auch)
- daher nur an Ort und Stelle gültig in der angegebenen Reihenfolge
Datentypen
let x = 5; // Number (Integer)
let f = 1.25; // Number (Float)
let b = true; // Boolean
let s = "hallo"; // String
let a = []; // Array
let o = {}; // Objekt
let nan = NaN; // Not a Number
let n = null; // Null
let u = undefined; // Undefiniert
Arrays
let a = [1, 2, 3];
a.push(4);
a.push(5);
a.pop();
console.log(a);
[1, 2, 3, 4]
Objekte
let o = {x: 1, y: 2};
console.log(o.z);
console.log(o);
o.z = 3;
console.log(o);
undefined
{ x: 1, y: 2 }
{ x: 1, y: 2, z: 3 }
Objekte funktionieren intern wie Hash-Maps
let o = {};
o.a = 1;
o["$ !"] = 2;
console.log(Object.keys(o));
['a', '$ !']
Funktionen
function foo() {
console.log("foo");
}
function bar(a) {
return a;
}
foo();
const a = bar(1);
console.log(a);
foo
1
let sum = function(a, b) {
return a + b;
}
let subtract = function() {
console.log(arguments);
return arguments[0] - arguments[1];
}
console.log(sum(1, 2));
console.log(subtract(1, 2));
Funktionen als Konstruktor
function Rectangle(a, b) {
this.a = a;
this.b = b;
}
const r = new Rectangle(2, 3);
console.log(r.a);
2
Objektorientierung
function Rectangle(a, b) {
this.a = a;
this.b = b;
}
Rectangle.prototype.getArea = function() {
return this.a * this.b;
}
const r1 = new Rectangle(2, 3);
const r2 = new Rectangle(4, 5);
console.log(r1.getArea());
console.log(r2.getArea());
Dynamische Änderung des Prototypen
function Rectangle(a, b) {
this.a = a;
this.b = b;
}
const r = new Rectangle(2, 3);
console.log(r.getArea);
Rectangle.prototype.getArea = function() {
return this.a * this.b;
}
console.log(r.getArea);
function Rectangle(a, b) {
this.a = a;
this.b = b;
this.getCircumference = function() {
return 2 * a + 2 * b;
};
}
Rectangle.prototype.getArea = function() {
return this.a * this.b;
}
const r = new Rectangle(2, 3);
console.log(Object.keys(r));