World Wide Web
Mit welchen fachlichen Argumenten wurde das WWW-Proposal von Tim Burners Lee abgelehnt?
HTTP
Sie bekommen im Browser den HTTP Status Code 200. Was bedeutet das?
Der HTTP-Status Code 200 bedeutet "OK". Es zeigt an, dass die Anfrage erfolgreich war und der Server die gewünschte Ressource gefunden und zurückgegeben hat.
Sie bekommen im Browser den HTTP Status Code 301. Was hat das zu bedeuten?
HTTP-Status Code 301 ist eine Umleitung "Moved Permanently". Es bedeutet, dass Die angeforderte Ressource dauerhaft auf eine neue URL verschoben wurde.
Sie bekommen im Browser den HTTP Status Code 400. Was hat das zu bedeuten? Was können Sie dagegen tun?
HTTP-Status Code 400 bedeutet, dass es sich um eine "Bad Request" handelt. Zur vermeiden 400: Bad Request kann man folgende schritte unternehmen: URL überprüfen, Anfrageparameter überprüfen, löschen Browser-Cache, Anderen Browser benutzen usw.
Sie bekommen im Browser den HTTP Status Code 403. Was hat das zu bedeuten? Was können Sie dagegen tun?
HTTP-Statuscode 403 bedeutet "Forbidden". Es zeigt, dass der Server den Zugriff auf die angeforderte Ressource verweigert. Ich kann Folgendes tun, um den Fehler zu vermeiden: Berechtigungen überprüfen, Verfügbarkeit der Ressource überprüfen. Passwörter überprüfen (wenn die Ressource durch Passwörter geschützt ist ), Web-Admin kontaktieren usw.
Quiz zu HTML
Frage 1/6: Was ist HTML?
Frage 2/6: Wofür steht HTML?
Frage 3/6: Wofür wird HTML eingesetzt?
Frage 4/6: Wer hat HTML erfunden?
Frage 5/6: Zu welchem ursprünglichen Zweck wurde HTML erfunden?
Frage 6/6: Wer arbeitet alles an der Weiterentwicklung von HTML?
Quiz zu HTML-Tags
Frage 1/6: Was ist ein HTML-Tag?
Frage 2/6: Wofür nutzt man einen HTML-Tag?
Frage 3/6: Woraus besteht ein HTML-Tag und wie setzt man ihn ein?
Frage 4/6: Was ist ein HTML-Attribut?
Frage5/6: Wofür nutzt man ein HTML-Attribut?
Frage 6/6: Wie schreibt man einen Kommentar in HTML?
Lückentext zu HTML
<html>
<head>
<title>Titel der Webseite</title>
</head>
<body>
<h1>Anwendung von HTML-Tags</h1>
<h2>Motivation</h2>
<p>Dieser Lückentext unterstützt Sie dabei selbst einzuschätzen, ob Sie in der Lage sind das HTML-Grundgerüst und die HTML-Tags zum Markieren von Überschriften, Paragraphen und HTML-Kommentaren einzusetzen.</p>
<!--
<h2>Auskommentierung von HTML-Code</h2>
<p>Dieser Abschnitt wurde auskommentiert.</p>
-->
</body>
</html>
HTML-Literatur lesen und Fragen beantworten
Was ist HTML?
HTML: HTML ist die Standard-Auszeichnungssprache für Webseiten. Es verwendet Tags und Attribute, um Webinhalte zu strukturieren und Webbrowser verwenden HTML, um Benutzern Webseiten anzuzeigen.
Wie kann man eine geschachtelte geordnete Liste der Tiefe 3 erzeugen?
<ol>
<li>Kaffee</li>
<li>Tee
<ol>
<li>Schwarz tee</li>
<li>Grün tee
<ol>
<li>Spezial Grün Tee</li>
</ol>
</li>
</ol>
</li>
<li>Milch</li>
</ol>
Wie ist eine HTML-Tabelle aufgebaut?
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Wie baut man in HTML ein Menü?
<ul>
<li><a href="startseite.html">Startseite</a></li>
<li><a href="produkte.html">Produkte</a></li>
<li><a href="überuns.html">Über uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
Welche Attribute sollte man bei Bildern wie verwenden?
1. src – Gibt den Pfad zum Bild an
2. alt – Gibt einen alternativen Text für das Bild an
Zuordnung der Homepage
Repository-URL Meiner Homepage
CSS-Selektoren und CSS-Farben
RGB-Werte in HSL-Werte umrechnen:
CSS-Positionierung
Lösung zum 2. Video:
Wireframe mit HTML und CSS
HTML-Wireframe:
Responsiv mit Flexbox und Desktop-First
Desktop-First-Strategie:
Responsiv mit Grid und Mobile-First
Mobile-First:
Wireframe responsive mit Grid
Landing-Page responsiv mit Grid:
Funktionen
Objekte
Fibonacci
TopSort
Spread-Operator
/**
Mit dem Spread-Operator können wir die Elemente eines Arrays in ein anderes Array einfügen oder sie als Argumente für eine Funktion übergeben.
*/
//Zusammenfügen von Arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // Ausgabe: [1, 2, 3, 4, 5, 6]
// Verwendung in einer Funktion
const numbers = [10, 20, 30];
const sum = (a, b, c) => a + b + c;
console.log(sum(...numbers)); // Ausgabe: 60
/*
Der Spread-Operator kann auch verwendet werden, um Eigenschaften von einem Objekt in ein anderes zu kopieren.
*/
//Kopieren von Objekteigenschaften
const person = { name: 'John', age: 25 };
const details = {...person, email: 'john@beispiel.com'};
console.log(details);
// Ausgabe: {name: 'John', age: 25, email: 'john@beispiel.com'}
Dom Operation
Performanz-Messungen
Rednerliste
Rednerliste mit Zeitmessung
TopSort
TopSort als Web-App
Klammerpaare
Überprüfen Klammerpaare
Topologische Iterierbarkeit
Topologische Iterierbarkeit Mit ES6 Klasse
Topologische Iterierbarkeit
Topologische Iterierbarkeit mittels Generator
Proxy
DeepCopy
const deepCopy = (struct) =>
Array.isArray(struct)
? struct.map((item) => deepCopy(item))
: typeof struct === 'object' && struct !== null
? Object.fromEntries(
Object.entries(struct).map(([key, value]) => [key, deepCopy(value)])
)
: struct;
// Test
const originalArray = [1, [2, 3], { a: 4, b: { c: 5 } }];
const copiedArray = deepCopy(originalArray);
console.assert(JSON.stringify(originalArray) === JSON.stringify(copiedArray), 'Array test nicht bestanden');
const originalObject = { x: 1, y: { z: 2 }, arr: [3, 4] };
const copiedObject = deepCopy(originalObject);
console.assert(JSON.stringify(originalObject) === JSON.stringify(copiedObject), 'Object test nicht bestanden');
WWW-Navigator
Responsiv WWW-Navigator mit HTML, CSS, and JS
Balkendiagramm
Balkendiagramm mit HTML, Inline SVG, CSS
Interaktive SVG Grafik
Tic-Tac-Toe Spiel
SVG Transformations
SVG Transformationsl
Static
Static classes in TypeScript
// In TypeScript gibt es kein direktes Äquivalent zu statischen Klassen, da TypeScript in erster Linie den ECMAScript-Standards folgt und JavaScript selbst kein Konzept für statische Klassen hat.
// Mit TypeScript können Sie jedoch mithilfe statischer Eigenschaften und Methoden innerhalb einer Klasse eine ähnliche Funktionalität erreichen.
// Hier ist ein Beispiel für die Erstellung einer TypeScript-Klasse mit statischen Mitgliedern:
class StaticExample {
static staticProperty: number = 42;
static staticMethod(): void {
console.log("Static method called");
}
}
// Auf statische Mitglieder zugreifen:
console.log(StaticExample.staticProperty);
StaticExample.staticMethod();Fehler
Fehler finden mit TypeScript
const add = (x: number, y: number): number => x + y;
const equals = (x: any, y: any): boolean => x === y;
console.log(add(1, 2));
console.log(add(true, true)); // Dadurch wird ein TypeScript-Fehler generiert
console.log(add(true, false)); // Dadurch wird ein TypeScript-Fehler generiert
const x: number = 1;
const y: number = 1;
console.log(add(equals(x, y), equals(y, x)));
// Fehler tritt auf, weil „add“ Zahlenparameter erwartet, „equals(x, y)“ und „equals(y, x)“ jedoch einen booleschen Wert zurückgeben.
Webserver
Lokaler Webserver mit NodeJS