web-lecture
/
assignments
17
15
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update of exercises

master
Thomas Smits 2023-11-21 09:57:52 +01:00
parent 8c02bb4bc8
commit f61f40071c
4 changed files with 192 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Assignment_004/readme.md
View File

@ -1,6 +1,6 @@
# Interaktive Filmdatenbank # Interaktive Filmdatenbank
📆 **Fällig: 19.11.2023** 📆 📆 **Fällig: 19.11.2023** 📆 [Musterlösung](solution/)
Erstellen Sie eine einfache Filmdatenbank, in die man Filme per Formular hinzufügen kann. Erstellen Sie eine einfache Filmdatenbank, in die man Filme per Formular hinzufügen kann.
@ -32,7 +32,9 @@ Stylen Sie die Tabelle und die Seite mit CSS so, dass die Tabelle entsprechende
## Teil 2: JSON-Format ## Teil 2: JSON-Format
Überlegen Sie sich ein JSON-Format für die Speicherung von Filmen für die oben genannte Tabelle. Erzeugen Sie ein Array Ihrer Lieblingsfilme mit dem entsprechenden Format. Wenn Sie Ihre Lieblingsfilme nicht preisgeben wollen, verwenden Sie folgende Filme als Beispiel: Überlegen Sie sich ein JSON-Format (JavaScript-Objekt) für die Speicherung eines einzelnen Films. Die notwendigen Attribute finden Sie in den Beispielen der oben genannte Tabelle. Erzeugen Sie dann ein Array von diesen Objekten mit den Daten Ihrer Lieblingsfilme.
Wenn Sie Ihre Lieblingsfilme nicht preisgeben wollen, verwenden Sie folgende Filme als Beispiel:
| Titel | Regisseur | Jahr | Spielzeit | FSK | | Titel | Regisseur | Jahr | Spielzeit | FSK |
|----------------------|-------------------|------|-----------|-----| |----------------------|-------------------|------|-----------|-----|

52
Assignment_004/solution/index.html 100644
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<title>Filmdatenbank</title>
<style>
table, td, tr, th {
border: 1px solid;
border-color: #d3d3d3;
border-collapse: collapse;
}
</style>
<script src="js/filmdatenbank.js" defer="defer"></script>
</head>
<body>
<h1>Filmdatenbank</h1>
<form>
<table id="filmtable">
<tr>
<th data-type="string" data-field="titel">Titel</a></th>
<th data-type="string" data-field="regisseur">Regisseur</th>
<th data-type="int" data-field="jahr">Jahr</th>
<th data-type="int" data-field="spielzeit">Spielzeit</th>
<th data-type="int" data-field="fsk">FSK</th>
<th>&nbsp;</th>
</tr>
<tr id="eingabe">
<td>
<input type="text" id="title" required="required">
</td>
<td>
<input type="text" id="regisseur" required="required">
</td>
<td>
<input type="text" size="4" id="jahr" required="required" pattern="19[0-9][0-9]|20[012][0-9]" title="1900-2022">
</td>
<td>
<input type="text" size="4" id="spielzeit" required="required" pattern="[1-9][0-9]+">
</td>
<td>
<input type="text" size="2" id="fsk" required="required" pattern="0|6|12|16|18">
</td>
<td>
&nbsp;
</td>
</tr>
</table>
</form>
</body>
</html>

130
Assignment_004/solution/js/filmdatenbank.js 100644
View File

@ -0,0 +1,130 @@
// Class for storing the movie
class Film {
constructor(titel, regisseur, jahr, spielzeit, fsk) {
this.titel = titel;
this.regisseur = regisseur;
this.jahr = jahr;
this.spielzeit = spielzeit;
this.fsk = fsk;
}
}
(function() {
let num = 1;
let filme = [
new Film("Pulp Fiction", "Quentin Tarantino", 1994, 154, 16),
new Film("Inglourious Basterds", "Quentin Tarantino", 2009, 153, 16),
new Film("Reservoir Dogs", "Quentin Tarantino", 1992, 99, 18),
new Film("Blade Runner", "Ridley Scott", 1982, 117, 16)
];
function extractFilm() {
return new Film(
document.querySelector("#title").value,
document.querySelector("#regisseur").value,
parseInt(document.querySelector("#jahr").value),
parseInt(document.querySelector("#spielzeit").value),
parseInt(document.querySelector("#fsk").value));
}
function createTD(contents) {
let td = document.createElement("td");
td.appendChild(document.createTextNode(contents));
return td;
}
function deleteMovie(rowId) {
let row = document.getElementById(rowId);
row.parentNode.removeChild(row);
}
function createRow(id, film) {
let row = document.createElement("tr");
let button = document.createElement("button");
button.appendChild(document.createTextNode("X"));
button.onclick = () => deleteMovie(id);
row.setAttribute("id", id);
row.appendChild(createTD(film.titel));
row.appendChild(createTD(film.regisseur));
row.appendChild(createTD(film.jahr));
row.appendChild(createTD(film.spielzeit));
row.appendChild(createTD(film.fsk));
row.appendChild(button);
return row;
}
function appendFilm(film) {
let table = document.querySelector("#filmtable > tbody");
table.appendChild(createRow(num, film));
num++;
}
function checkSubmit(event) {
if (event.charCode === 13) {
// Do not submit the form by pressing enter
event.preventDefault();
// Let the form check for missing fields
let valid = document.querySelector('form').reportValidity();
if (!valid) {
return;
}
let film = extractFilm();
filme.push(film);
appendFilm(film);
for (let e of document.querySelectorAll('input')) {
e.value = "";
}
document.getElementById("title").focus();
}
}
function clear() {
for (num--; num > 0; num--) {
deleteMovie(num);
}
num = 1;
}
function sort(event) {
let column = event.target.getAttribute("data-field");
let type = event.target.getAttribute("data-type");
if (type == "string") {
filme.sort((a, b) => a[column].localeCompare(b[column]));
}
else {
filme.sort((a, b) => a[column] - b[column]);
}
clear();
init();
}
function init() {
for (let film of filme) {
appendFilm(film);
}
for (let e of document.querySelectorAll('input')) {
e.addEventListener('keypress', checkSubmit);
}
for (let e of document.querySelectorAll('th')) {
e.addEventListener('click', sort);
}
}
init();
})();

12
readme.md
View File

@ -10,9 +10,9 @@ Die Kursmaterialien finden Sie, wie immer, im [Moodle](https://moodle.hs-mannhei
Hier finden Sie die wöchentlichen Assignments für die Vorlesung Webbasierte Systeme (WEB). Die Assignments sind unten, zusammen mit dem Fälligkeitsdatum, aufgelistet. Hier finden Sie die wöchentlichen Assignments für die Vorlesung Webbasierte Systeme (WEB). Die Assignments sind unten, zusammen mit dem Fälligkeitsdatum, aufgelistet.
| # | Ausgabe | Thema | Fällig am 📆 | | # | Ausgabe | Thema | Fällig am 📆 | Musterlösung |
|----|------------|-----------------------------------------------------------|----------------| |----|------------|-----------------------------------------------------------|----------------|----------------|
| 1. | 09.10.2023 | [Fanseite ohne Styling](Assignment_001/readme.md) | **15.10.2023** | | 1. | 09.10.2023 | [Fanseite ohne Styling](Assignment_001/readme.md) | **15.10.2023** | |
| 2. | 16.10.2023 | [Styling der Fanseite mit CSS](Assignment_002/readme.md) | **22.10.2023** | | 2. | 16.10.2023 | [Styling der Fanseite mit CSS](Assignment_002/readme.md) | **22.10.2023** | |
| 3. | 23.10.2023 | [Fanseite responsive machen](Assignment_003/readme.md) | **05.11.2023** | | 3. | 23.10.2023 | [Fanseite responsive machen](Assignment_003/readme.md) | **05.11.2023** | |
| 4. | 06.11.2023 | [Interaktive Filmdatenbank](Assignment_004/readme.md) | **19.11.2023** | | 4. | 06.11.2023 | [Interaktive Filmdatenbank](Assignment_004/readme.md) | **19.11.2023** | [✅](Assignment_004/solution/readme.md) |