Break: Übungsaufgaben
Die folgenden Übungen wurden gemeinsam im Kurs gelöst und greifen hauptsächlich bereits besprochene Themen auf, um diese zu üben. Wenige neue Dinge, werden hier jedoch ebenfalls erläutert.
Übung 1: Zutreffende Listeneinträge highlighten
Ein Eingabefeld führt zum Highlighten von Listeneinträgen die diese Eingabe-String mit enthalten.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Helden</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>
<body>
<main>
<h1>Helden</h1>
<ul id="helden">
<li>Jessica Jones</li>
<li>Luke Cage</li>
<li>Daredevil</li>
<li>Thor</li>
<li>Odin</li>
<li>Loki</li>
<li>Heimdall</li>
<li>Nebula</li>
</ul>
<div id="heldenSuche">
<input type="text" placeholder="Held finden..."/>
</div>
</div>
</main>
<script src="heldenscript.js"></script>
</body>
</html>
"use_strict";
/*
wenn Eingabe getan wird, sollen matches gehilighted werden
*/
const heroItems = document.querySelectorAll("#helden li");
// const SEARCH_STR = "one";
// for (let i = 0; i < heroItems.length; i++) {
// let item = heroItems[i];
// if (item.textContent.includes(SEARCH_STR)) {
// item.className = "found";
// }
// }
const searchField = document.querySelector("#heldenSuche input");
function checkHeroList() {
const SEARCH_STR = searchField.value.trim().toLowerCase();
for (let i = 0; i < heroItems.length; i++) {
let item = heroItems[i];
if (SEARCH_STR && item.textContent.toLowerCase().includes(SEARCH_STR)) {
item.className = "found";
} else {
item.className = "";
}
}
}
searchField.oninput = checkHeroList;
Übung 2: E-Book Darstellung
Ein Darstellung für ein E-Book, mit Sprung-Buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>E-Book</title>
<link rel="stylesheet" type="text/css" href="css/eBook.css" media="screen" />
</head>
<body>
<div class="eBook_wrapper">
<div class="eBook">
<div class="eBook_content"></div>
<div class="pagination">
<span class="goes_left">
<button title="first">«</button>
<button title="prev">‹</button>
</span>
<span class="goes_right">
<button title="next">›</button>
<button title="last">»</button>
</span>
<span class="progressbar">
<progress max="3" value="1" id="site_progress"></progress>
</span>
<span class="bookSite">0</span>
</div>
</div>
</div>
<script src="./js/bookscript.js"></script>
</body>
</html>
"use strict";
const BOOK_SITES = [
"<h1>2.1 Einführung JavaScript und Webentwicklung</h1>" +
"<h2>2.1.1 Der Zusammenhang zwischen HTML, CSS und JavaScript</h2>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
"<h1>2.1 Einführung JavaScript und Webentwicklung</h1>" +
"<h2>2.1.2 Das richtige Werkzeug für die Entwicklung</h2>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
"<h1>Webseiten dynamisch verändern</h1>" +
"<h2>5.1 Aufbau einer Webseite</h2>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
"<h1>Webseiten dynamisch verändern</h1>" +
"<h2>5.1.1 Document Object Model</h2>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>",
"<h1>Webseiten dynamisch verändern</h1>" +
"<h2>5.1.2 Die verschiedenen Knotentypen</h2>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>" +
"<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>"
];
// Elemente im DOM referenzieren
const content = document.querySelector(".eBook_content");
const buttons = document.querySelectorAll(".pagination button");
const bar = document.querySelector("#site_progress");
const page = document.querySelector(".bookSite");
// Zählvariable anlegen bzw. aus localStorage ermitteln (Lesezeichen)
let current = localStorage.getItem("current") ?? 1;
current = Number(current); // in Number überführen
// alternativ:
// -----------
// current = +current;
// current *= 1;
// max-Attribut der progress-bar auf BOOK_SITES.length
bar.max = BOOK_SITES.length;
// output-Funktion
function showSite() {
// neue Buchseite ausgeben
content.innerHTML = BOOK_SITES[current - 1];
// Anzeige der Seitennummer ändern & Anzeige im Progress Element ändern
bar.value = page.innerText = current;
updateButtonState();
addToStorage();
}
// Funktion für Event-Handler der Buttons erstellen
function changePage() {
// Button identifizieren (über this.title Attribut)
// Zählvariable ändern
// Möglichkeit: über switch statement
// ----------------------------------
// switch (this.title) {
// case "next":
// current += 1;
// break;
// case "prev":
// current -= 1;
// break;
// case "first":
// current = 1;
// break;
// case "last":
// current = BOOK_SITES.length;
// break;
// default:
// current = 1;
// }
// Besser: Über Objekt, welches Änderungen für current definiert
// und dies dann referenzieen
const siteChange = {
first: 1,
last: BOOK_SITES.length,
next: (current + 1),
prev: (current - 1)
}
current = siteChange[this.title];
// showSite aufrufen
showSite();
}
// click-Ergeignis für Buttons registrieren
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", changePage);
}
// Prüfung ob beim Klick aus dem Array herausgehen
function updateButtonState() {
// Möglichkeit: aud Buttons über index zugreifen
// for (let i = 0; i < buttons.length; i++) {
// buttons[i].disabled = false;
// }
// if (current == 1) {
// buttons[0].disabled = true;
// buttons[1].disabled = true;
// }
// if (current == BOOK_SITES.length) {
// buttons[2].disabled = true;
// buttons[3].disabled = true;
// }
// Besser: auf Buttons über title Attribut zugreifen
for (let i = 0; i < buttons.length; i++) {
const oneButton = buttons[i];
buttons[i].disabled = false;
if (oneButton.title == "next" || oneButton.title == "last") {
oneButton.disabled = (current == BOOK_SITES.length);
} else {
oneButton.disabled = (current == 1);
}
}
}
// Lesezeichen als Eintrag im localStorage setzen
function addToStorage() {
if (typeof Storage != "undefined") {
localStorage.setItem("current", current);
}
}
showSite();
Übung 3: Font-Size ändern
Aufgabe A: Über vier verschiedene Button soll ein Text in einer dem Button zugehörigen Schriftgröße auf einen Text angewandt werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Font-Size ändern</title>
<style>
#biggest {font-size: 36px}
#big {font-size: 24px}
#normal {font-size: 16px}
#small {font-size: 11px}
</style>
</head>
<body>
<button id="biggest">A</button>
<button id="big">A</button>
<button id="normal">A</button>
<button id="small">A</button>
<p>Hier steht der Text, dessen Schriftgröße verändert wird</p>
<script src="./font-size.js"></script>
</body>
</html>
"use_strict";
const para = document.querySelector("p");
// Inline-Style setzen
para.style.color = "blue";
para.style.fontWeight = "bold";
// Inline-Styles auslesen
console.log(para.style);
console.log(para.style.color);
// Möglichkeit: Einfache Definition von Event-Handlern
// ---------------------------------------------------
// const BIGGEST = "36px";
// const BIG = "24px";
// const NORMAL = "16px";
// const SMALL = "11px";
// document.querySelector("#biggest").onclick = function() {
// para.style.fontSize = BIGGEST;
// }
// document.querySelector("#big").onclick = function() {
// para.style.fontSize = BIG;
// }
// document.querySelector("#normal").onclick = function() {
// para.style.fontSize = NORMAL;
// }
// document.querySelector("#small").onclick = function() {
// para.style.fontSize = SMALL;
// }
// Besser: Über Button-Array (keine Wiederholung)
// ----------------------------------------------
// const buttons = document.querySelectorAll("button");
// const SIZES = [36,24,16,11];
// const UNIT = "px";
// for (let i = 0; i < buttons.length; i++) {
// // Annahme: gleiche index-Position in NodeList und Array
// buttons[i].onclick = function() {
// para.style.fontSize = SIZES[i] + UNIT;
// }
// }
// Am Besten: Über Objekt
// ----------------------
const buttons = document.querySelectorAll("button");
const UNIT = "px";
const SIZES = {
biggest: 36,
big: 24,
normal: 16,
small: 12
};
for (let i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
para.style.fontSize = SIZES[this.id] + UNIT;
}
}
Aufgabe B: Über zwei Button (Plus & Minus) soll ein Text verkleinert und vergrößert werden.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Font-Size schrittweise ändern</title>
<style>
p {font-size: 50px}
button {font-size: 24px; width: 32px; text-align: center}
</style>
</head>
<body>
<button id="small">-</button>
<button id="big">+</button>
<p>
Hier steht der Text, dessen Schriftgröße verändert werden soll
</p>
<script src="./font-size.js"></script>
</body>
</html>
"use_strict";
const STEP = 5;
const UNIT = "px";
const para = document.querySelector("p");
const small = document.querySelector("#small");
const big = document.querySelector("#big");
// Das geht nicht ...
console.log(para.style.fontSize); // "empty string", da fontSize kein Inline-Style
// .. daher
// Über getComputedStyle(element) werden alle anliegeneden Styles eines Elements
// ausgelesen. Reine Getter-Methode, nicht sehr performant, daher sollte es sparsam
// eingesetzt werden. Bei Weiterarbeit sollte der Wert als Inline-Style an das Objekt
// angehängt werden oder im Storage gespeichert werden (um erneuten Aufruf zu vermeiden)
let paraStyleObj = getComputedStyle(para);
// 369 Styles!!! -> Browser (Hauptteil) + CSS Style + Inline (letztes am ranghöchsten)
console.log(paraStyleObj);
console.log(paraStyleObj.fontSize); // "50px"
let storedSize = localStorage.getItem("fontSize") ?? getComputedStyle(para).fontSize;
setFontSize(parseInt(storedSize));
big.onclick = function() {
setFontSize(getFontSize() + STEP);
};
small.onclick = function() {
setFontSize(getFontSize() - STEP);
};
function getFontSize() {
return parseInt(para.style.fontSize);
}
function setFontSize(size) {
big.disabled = (size > 60);
small.disabled = (size < 15);
para.style.fontSize = size + UNIT;
if (window.Storage) localStorage.setItem("fontSize", size);
}
Über getComputedStyle(elem) werden alle anliegenden Styles eines Elements
zurückgegeben. Sie ist Read-Only und nicht sehr performant, sollte daher sparsam
eingesetzt werden.
const para = document.querySelector("p");
let paraStyleObj = getComputedStyle(para);
// Style auslesen
console.log(paraStyleObj.fontSize); // "50px"
Hint
Bei Weiterarbeit sollte ein Style-Wert als Inline-Style an das Objekt
angehängt werden oder im Storage gespeichert werden (um erneuten Aufruf
von getComputedStyle() zu vermeiden).