ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-13 14:42:35 +02:00
parent e0bd3930d9
commit 960451ae4a
63 changed files with 2974 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
03_dom/uebungen/u01_almost-quotes/assets/css/styles.css Normal file
View File

@@ -0,0 +1,368 @@
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
/* ---------------- CSS-Reset ------------------- */
html,
body,
a,
div,
h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
img,
strong,
ul,
li,
table,
th,
td,
tr {
margin: 0px;
padding: 0px;
border: 0px none;
font-weight: normal;
font-style: inherit;
font-family: inherit;
font-variant: inherit;
text-decoration: none;
table-layout: inherit;
}
/* ---------------- Body / HTML ------------------- */
html {
font-size: 100%;
background-color: #fffef7;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
color: black;
margin: 0rem auto 2rem auto;
}
/* ---------------- layout ------------------- */
header {
background: url(../img/js_header.png) left top no-repeat transparent;
background-size: cover;
height: 250px;
min-width: 850px;
}
header:after {
content: ' ';
display: block;
height: 250px;
background: rgba(255, 254, 247, 0);
background: -moz-linear-gradient(
top,
rgba(255, 254, 247, 0) 0%,
rgba(255, 254, 247, 0.55) 22%,
rgba(255, 254, 247, 0.7) 42%,
rgba(255, 254, 247, 0.71) 43%,
rgba(255, 254, 247, 0.78) 61%,
rgba(255, 254, 247, 0.92) 75%,
rgba(255, 254, 247, 1) 87%,
rgba(255, 254, 247, 1) 100%
);
background: -webkit-gradient(
left top,
left bottom,
color-stop(0%, rgba(255, 254, 247, 0)),
color-stop(22%, rgba(255, 254, 247, 0.55)),
color-stop(42%, rgba(255, 254, 247, 0.7)),
color-stop(43%, rgba(255, 254, 247, 0.71)),
color-stop(61%, rgba(255, 254, 247, 0.78)),
color-stop(75%, rgba(255, 254, 247, 0.92)),
color-stop(87%, rgba(255, 254, 247, 1)),
color-stop(100%, rgba(255, 254, 247, 1))
);
background: -webkit-linear-gradient(
top,
rgba(255, 254, 247, 0) 0%,
rgba(255, 254, 247, 0.55) 22%,
rgba(255, 254, 247, 0.7) 42%,
rgba(255, 254, 247, 0.71) 43%,
rgba(255, 254, 247, 0.78) 61%,
rgba(255, 254, 247, 0.92) 75%,
rgba(255, 254, 247, 1) 87%,
rgba(255, 254, 247, 1) 100%
);
background: -o-linear-gradient(
top,
rgba(255, 254, 247, 0) 0%,
rgba(255, 254, 247, 0.55) 22%,
rgba(255, 254, 247, 0.7) 42%,
rgba(255, 254, 247, 0.71) 43%,
rgba(255, 254, 247, 0.78) 61%,
rgba(255, 254, 247, 0.92) 75%,
rgba(255, 254, 247, 1) 87%,
rgba(255, 254, 247, 1) 100%
);
background: -ms-linear-gradient(
top,
rgba(255, 254, 247, 0) 0%,
rgba(255, 254, 247, 0.55) 22%,
rgba(255, 254, 247, 0.7) 42%,
rgba(255, 254, 247, 0.71) 43%,
rgba(255, 254, 247, 0.78) 61%,
rgba(255, 254, 247, 0.92) 75%,
rgba(255, 254, 247, 1) 87%,
rgba(255, 254, 247, 1) 100%
);
background: linear-gradient(
to bottom,
rgba(255, 254, 247, 0) 0%,
rgba(255, 254, 247, 0.55) 22%,
rgba(255, 254, 247, 0.7) 42%,
rgba(255, 254, 247, 0.71) 43%,
rgba(255, 254, 247, 0.78) 61%,
rgba(255, 254, 247, 0.92) 75%,
rgba(255, 254, 247, 1) 87%,
rgba(255, 254, 247, 1) 100%
);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
}
main,
footer {
width: 70%;
margin: 3rem auto;
min-width: 850px;
padding: 0 20px;
box-sizing: border-box;
}
/* ---------------- Content ------------------- */
h1 {
color: #93412b;
font-size: 3em;
margin-bottom: 20px;
font-weight: bold;
}
h2 {
color: #93412b;
font-size: 2.5em;
margin-bottom: 15px;
}
h3 {
color: #93412b;
font-size: 2em;
margin-bottom: 10px;
}
p {
line-height: 15px;
margin-bottom: 15px;
line-height: 1.7em;
}
.cited {
font-style: italic;
font-size: 0.8em;
}
.u {
text-decoration: underline;
}
.b {
font-weight: bold;
}
.i {
font-style: italic;
}
.align_right {
text-align: right;
}
.align_left {
text-align: left;
margin-right: 10px;
}
.align_center {
text-align: center;
}
.float_left {
float: left;
}
.float_right {
float: right;
}
.clear_both {
clear: both;
}
strong {
font-weight: bold;
}
.special {
color: #b7595b;
font-weight: bold;
}
.keyword {
color: #db6f50;
font-weight: bold;
font-style: italic;
}
.gray {
color: gray;
}
/* Links */
main a:link,
main a:visited {
color: #eb690b;
font-weight: bold;
}
main a:focus,
main a:hover,
main a:active {
color: #eb690b;
}
ul {
list-style-position: outside;
margin-bottom: 20px;
padding-left: 22px;
}
ol {
margin-bottom: 20px;
padding-left: 30px;
}
li {
line-height: 1.4em;
}
/* ------- Article ------- */
h1 {
color: #93412b;
font-size: 2.7em;
margin-bottom: 20px;
}
#buy_form input[type='button'] {
display: inline-block;
padding: 1px 20px 3px 20px;
background-color: #93412b;
color: white;
border: 1px solid white;
font-size: 1em;
height: 32px;
}
#buy_form input[type='button']:hover {
background-color: white;
color: #93412b;
border: 1px solid #93412b;
}
#buy_form select {
display: inline-block;
font-size: 1em;
background-color: white;
color: #93412b;
border: 1px solid #93412b;
height: 32px;
}
/* ------- Chat ------- */
#chat {
width: 100%;
background-color: white;
border: 1px solid #9c352f;
height: 20rem;
position: relative;
}
#chat_window {
background-color: white;
width: 85%;
float: left;
height: 95%;
}
#chat_history {
position: absolute;
bottom: 8%;
max-height: 92%;
padding: 0px 0px 5px 7px;
}
#chat_history p {
font-size: 0.6em;
margin: 0;
}
#chat_text {
height: 8%;
position: absolute;
bottom: 0;
width: 85%;
}
#chat_text input {
width: 98%;
display: block;
margin: auto;
}
#chat_members {
list-style-type: none;
height: 100%;
width: 15%;
margin-left: 85%;
border-left: 1px solid #9c352f;
text-align: right;
box-sizing: border-box;
min-width: 100px;
font-size: 0.8em;
padding-top: 5px;
}
#chat_members li {
line-height: 1.2em;
padding: 5px 10px 2px 15px;
}
#chat_members .highlighted {
background-color: #c14d45;
color: white;
}
.chat_member {
font-weight: bold;
}
.chat_member1 {
color: #3626c8;
}
.chat_member2 {
color: #e38d0b;
}
#member_search {
position: absolute;
right: 0;
bottom: 0;
width: 15%;
height: 8%;
}
#member_search input {
width: 88%;
display: block;
margin: auto;
text-align: right;
}

BIN
03_dom/uebungen/u01_almost-quotes/assets/img/favicon.icon Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
03_dom/uebungen/u01_almost-quotes/assets/img/js_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

35
03_dom/uebungen/u01_almost-quotes/index.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 1: Almost Famous Quotes 1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/styles.css" />
</head>
<body>
<header></header>
<main>
<h1>Famous Quotes</h1>
<blockquote></blockquote>
</main>
<script>
'use strict';
// 1
// Ändern Sie mit Hilfe von JS die Überschrift (h1) der HTML-Seite in Almost Famous Quotes.
// 2
// Die Seite enthält ein leeres blockquote-Element. Öffnen Sie die HTML-Seite in Chrome. Geben Sie in der Konsole eine Zeile JS-Code ein, die das Element mit folgendem Inhalt befüllt:
// <p>
// I have always wished for my computer to be as easy to use as my telephone;
// my wish has come true because I can no longer figure out how to use my
// telephone.
// </p>
// <footer>— <cite>Bjarne Stroustrup</cite></footer>
</script>
</body>
</html>

266
03_dom/uebungen/u02_tasse-01001/assets/css/styles.css Normal file
View File

@@ -0,0 +1,266 @@
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
/* ---------------- CSS-Reset ------------------- */
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
margin: 0px;
padding: 0px;
border: 0px none;
font-weight: normal;
font-style: inherit;
font-family: inherit;
font-variant: inherit;
text-decoration: none;
table-layout: inherit;
}
/* ---------------- Body / HTML ------------------- */
html {
font-size: 100%;
background-color: #fffef7;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
color: black;
margin: 0rem auto 2rem auto;
}
/* ---------------- layout ------------------- */
header {
background: url(../img/js_header.png) left top no-repeat transparent;
background-size: cover;
height: 250px;
min-width: 850px;
}
header:after {
content: ' ';
display: block;
height: 250px;
background: rgba(255,254,247,0);
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
}
main,
footer {
width: 70%;
margin: 3rem auto;
min-width: 850px;
padding: 0 20px;
box-sizing: border-box;
}
/* ---------------- Content ------------------- */
h1 {
color: #93412b;
font-size: 3em;
margin-bottom: 20px;
font-weight: bold;
}
h2 {
color: #93412b;
font-size: 2.5em;
margin-bottom: 15px;
}
h3 {
color: #93412b;
font-size: 2em;
margin-bottom: 10px;
}
p {
line-height: 15px;
margin-bottom: 15px;
line-height: 1.7em;
}
.cited {
font-style: italic;
font-size: .8em;
}
.u {text-decoration: underline;}
.b {font-weight: bold;}
.i {font-style: italic}
.align_right {text-align: right;}
.align_left {text-align: left; margin-right: 10px;}
.align_center {text-align: center;}
.float_left {float: left;}
.float_right {float: right;}
.clear_both {clear: both;}
strong {font-weight: bold;}
.special { color: #b7595b; font-weight: bold; }
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
.gray {color: gray;}
/* Links */
main a:link,
main a:visited {
color: #eb690b;
font-weight: bold;
}
main a:focus,
main a:hover,
main a:active {color: #eb690b;}
ul {
list-style-position: outside;
margin-bottom: 20px;
padding-left: 22px;
}
ol {
margin-bottom: 20px;
padding-left: 30px;
}
li {
line-height: 1.4em;
}
/* ------- Article ------- */
h1 {
color: #93412b;
font-size: 2.7em;
margin-bottom: 20px;
}
#buy_form input[type=button] {
display: inline-block;
padding: 1px 20px 3px 20px;
background-color: #93412b;
color: white;
border: 1px solid white;
font-size: 1em;
height: 32px;
}
#buy_form input[type=button]:hover {
background-color: white;
color: #93412b;
border: 1px solid #93412b;
}
#buy_form select {
display: inline-block;
font-size: 1em;
background-color: white;
color: #93412b;
border: 1px solid #93412b;
height: 32px;
}
/* ------- Chat ------- */
#chat {
width: 100%;
background-color: white;
border: 1px solid #9c352f;
height: 20rem;
position: relative;
}
#chat_window {
background-color: white;
width: 85%;
float: left;
height: 95%;
}
#chat_history {
position: absolute;
bottom: 8%;
max-height: 92%;
padding: 0px 0px 5px 7px;
}
#chat_history p {
font-size: .6em;
margin: 0;
}
#chat_text {
height: 8%;
position: absolute;
bottom: 0;
width: 85%;
}
#chat_text input {
width: 98%;
display: block;
margin: auto;
}
#chat_members {
list-style-type: none;
height: 100%;
width: 15%;
margin-left: 85%;
border-left: 1px solid #9c352f;
text-align: right;
box-sizing: border-box;
min-width: 100px;
font-size: .8em;
padding-top: 5px;
}
#chat_members li {
line-height: 1.2em;
padding: 5px 10px 2px 15px;
}
#chat_members .highlighted {
background-color: #c14d45;
color: white;
}
.chat_member {font-weight: bold;}
.chat_member1 { color: #3626c8;}
.chat_member2 { color: #e38d0b;}
#member_search {
position: absolute;
right: 0;
bottom: 0;
width: 15%;
height: 8%;
}
#member_search input {
width: 88%;
display: block;
margin: auto;
text-align: right;
}

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/js_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_paperclip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/newsboard_sheets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
03_dom/uebungen/u02_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

104
03_dom/uebungen/u02_tasse-01001/index.html Normal file
View File

@@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>010010000100111101010100</title>
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<header></header>
<main>
<h1 class="article">
Hot Binary Heat Changing Mug
<span class="keyword">"010010000100111101010100"</span>
</h1>
<img
alt="Hot Binary Heat Changing Mug"
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
class="float_left"
id="product_img" />
<h2>Description</h2>
<p>
Numbers make up
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
tells us which state our mug is in. In binary!
</p>
<p>
See, the
<span class="keyword">Hot Binary Heat Changing Mug</span>
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
your
<span class="keyword">Hot Binary Heat Changing Mug</span>
could just be paying you a compliment. Cheeky, mug.
</p>
<p>
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
</p>
<h2>Product Specifications</h2>
<ul id="product_specification">
<li class="keyword">Hot Binary Heat Changing Mug</li>
<li>
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
010010000100111101010100)
</li>
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
<li>
Care Instructions:
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
</li>
<li>Materials: Ceramic</li>
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
</ul>
<h3>You wanna buy it?</h3>
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
<ol class="model" data-model="LDV73C-X3">
<li>Select how many items do you want.</li>
<li>Press "buy".</li>
</ol>
<form id="buy_form">
<select>
<option>1 item</option>
<option>2 items</option>
<option>3 items</option>
<option>4 items</option>
</select>
<input type="button" value="buy" />
</form>
</main>
<footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
<script>
'use strict';
(() => {
// Tippen Sie eine Abfrage in die Konsole, die:
// 1. das h1-Element findet.
// 2.das Element mit der id buy_form findet.
// 3. das Element mit der id product_img findet.
})();
</script>
</body>
</html>

266
03_dom/uebungen/u03_tasse-01001/assets/css/styles.css Normal file
View File

@@ -0,0 +1,266 @@
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
/* ---------------- CSS-Reset ------------------- */
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
margin: 0px;
padding: 0px;
border: 0px none;
font-weight: normal;
font-style: inherit;
font-family: inherit;
font-variant: inherit;
text-decoration: none;
table-layout: inherit;
}
/* ---------------- Body / HTML ------------------- */
html {
font-size: 100%;
background-color: #fffef7;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
color: black;
margin: 0rem auto 2rem auto;
}
/* ---------------- layout ------------------- */
header {
background: url(../img/js_header.png) left top no-repeat transparent;
background-size: cover;
height: 250px;
min-width: 850px;
}
header:after {
content: ' ';
display: block;
height: 250px;
background: rgba(255,254,247,0);
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
}
main,
footer {
width: 70%;
margin: 3rem auto;
min-width: 850px;
padding: 0 20px;
box-sizing: border-box;
}
/* ---------------- Content ------------------- */
h1 {
color: #93412b;
font-size: 3em;
margin-bottom: 20px;
font-weight: bold;
}
h2 {
color: #93412b;
font-size: 2.5em;
margin-bottom: 15px;
}
h3 {
color: #93412b;
font-size: 2em;
margin-bottom: 10px;
}
p {
line-height: 15px;
margin-bottom: 15px;
line-height: 1.7em;
}
.cited {
font-style: italic;
font-size: .8em;
}
.u {text-decoration: underline;}
.b {font-weight: bold;}
.i {font-style: italic}
.align_right {text-align: right;}
.align_left {text-align: left; margin-right: 10px;}
.align_center {text-align: center;}
.float_left {float: left;}
.float_right {float: right;}
.clear_both {clear: both;}
strong {font-weight: bold;}
.special { color: #b7595b; font-weight: bold; }
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
.gray {color: gray;}
/* Links */
main a:link,
main a:visited {
color: #eb690b;
font-weight: bold;
}
main a:focus,
main a:hover,
main a:active {color: #eb690b;}
ul {
list-style-position: outside;
margin-bottom: 20px;
padding-left: 22px;
}
ol {
margin-bottom: 20px;
padding-left: 30px;
}
li {
line-height: 1.4em;
}
/* ------- Article ------- */
h1 {
color: #93412b;
font-size: 2.7em;
margin-bottom: 20px;
}
#buy_form input[type=button] {
display: inline-block;
padding: 1px 20px 3px 20px;
background-color: #93412b;
color: white;
border: 1px solid white;
font-size: 1em;
height: 32px;
}
#buy_form input[type=button]:hover {
background-color: white;
color: #93412b;
border: 1px solid #93412b;
}
#buy_form select {
display: inline-block;
font-size: 1em;
background-color: white;
color: #93412b;
border: 1px solid #93412b;
height: 32px;
}
/* ------- Chat ------- */
#chat {
width: 100%;
background-color: white;
border: 1px solid #9c352f;
height: 20rem;
position: relative;
}
#chat_window {
background-color: white;
width: 85%;
float: left;
height: 95%;
}
#chat_history {
position: absolute;
bottom: 8%;
max-height: 92%;
padding: 0px 0px 5px 7px;
}
#chat_history p {
font-size: .6em;
margin: 0;
}
#chat_text {
height: 8%;
position: absolute;
bottom: 0;
width: 85%;
}
#chat_text input {
width: 98%;
display: block;
margin: auto;
}
#chat_members {
list-style-type: none;
height: 100%;
width: 15%;
margin-left: 85%;
border-left: 1px solid #9c352f;
text-align: right;
box-sizing: border-box;
min-width: 100px;
font-size: .8em;
padding-top: 5px;
}
#chat_members li {
line-height: 1.2em;
padding: 5px 10px 2px 15px;
}
#chat_members .highlighted {
background-color: #c14d45;
color: white;
}
.chat_member {font-weight: bold;}
.chat_member1 { color: #3626c8;}
.chat_member2 { color: #e38d0b;}
#member_search {
position: absolute;
right: 0;
bottom: 0;
width: 15%;
height: 8%;
}
#member_search input {
width: 88%;
display: block;
margin: auto;
text-align: right;
}

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/js_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_paperclip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/newsboard_sheets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
03_dom/uebungen/u03_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

106
03_dom/uebungen/u03_tasse-01001/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>010010000100111101010100</title>
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<header></header>
<main>
<h1 class="article">
Hot Binary Heat Changing Mug
<span class="keyword">"010010000100111101010100"</span>
</h1>
<img
alt="Hot Binary Heat Changing Mug"
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
class="float_left"
id="product_img" />
<h2>Description</h2>
<p>
Numbers make up
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
tells us which state our mug is in. In binary!
</p>
<p>
See, the
<span class="keyword">Hot Binary Heat Changing Mug</span>
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
your
<span class="keyword">Hot Binary Heat Changing Mug</span>
could just be paying you a compliment. Cheeky, mug.
</p>
<p>
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
</p>
<h2>Product Specifications</h2>
<ul id="product_specification">
<li class="keyword">Hot Binary Heat Changing Mug</li>
<li>
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
010010000100111101010100)
</li>
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
<li>
Care Instructions:
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
</li>
<li>Materials: Ceramic</li>
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
</ul>
<h3>You wanna buy it?</h3>
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
<ol class="model" data-model="LDV73C-X3">
<li>Select how many items do you want.</li>
<li>Press "buy".</li>
</ol>
<form id="buy_form">
<select>
<option>1 item</option>
<option>2 items</option>
<option>3 items</option>
<option>4 items</option>
</select>
<input type="button" value="buy" />
</form>
</main>
<footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
<script>
'use strict';
(() => {
// alle li-Elemente findet.
// alle h2-Elemente findet.
// alle Elemente mit der Klasse special findet.
// alle li-Elemente mit der Klasse keyword findet.
// alle span-Elemente mit der Klasse special findet.
// alle Elemente findet, die die Klassen i UND b haben.
})();
</script>
</body>
</html>

266
03_dom/uebungen/u04_tasse-01001/assets/css/styles.css Normal file
View File

@@ -0,0 +1,266 @@
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
/* ---------------- CSS-Reset ------------------- */
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
margin: 0px;
padding: 0px;
border: 0px none;
font-weight: normal;
font-style: inherit;
font-family: inherit;
font-variant: inherit;
text-decoration: none;
table-layout: inherit;
}
/* ---------------- Body / HTML ------------------- */
html {
font-size: 100%;
background-color: #fffef7;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
color: black;
margin: 0rem auto 2rem auto;
}
/* ---------------- layout ------------------- */
header {
background: url(../img/js_header.png) left top no-repeat transparent;
background-size: cover;
height: 250px;
min-width: 850px;
}
header:after {
content: ' ';
display: block;
height: 250px;
background: rgba(255,254,247,0);
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
}
main,
footer {
width: 70%;
margin: 3rem auto;
min-width: 850px;
padding: 0 20px;
box-sizing: border-box;
}
/* ---------------- Content ------------------- */
h1 {
color: #93412b;
font-size: 3em;
margin-bottom: 20px;
font-weight: bold;
}
h2 {
color: #93412b;
font-size: 2.5em;
margin-bottom: 15px;
}
h3 {
color: #93412b;
font-size: 2em;
margin-bottom: 10px;
}
p {
line-height: 15px;
margin-bottom: 15px;
line-height: 1.7em;
}
.cited {
font-style: italic;
font-size: .8em;
}
.u {text-decoration: underline;}
.b {font-weight: bold;}
.i {font-style: italic}
.align_right {text-align: right;}
.align_left {text-align: left; margin-right: 10px;}
.align_center {text-align: center;}
.float_left {float: left;}
.float_right {float: right;}
.clear_both {clear: both;}
strong {font-weight: bold;}
.special { color: #b7595b; font-weight: bold; }
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
.gray {color: gray;}
/* Links */
main a:link,
main a:visited {
color: #eb690b;
font-weight: bold;
}
main a:focus,
main a:hover,
main a:active {color: #eb690b;}
ul {
list-style-position: outside;
margin-bottom: 20px;
padding-left: 22px;
}
ol {
margin-bottom: 20px;
padding-left: 30px;
}
li {
line-height: 1.4em;
}
/* ------- Article ------- */
h1 {
color: #93412b;
font-size: 2.7em;
margin-bottom: 20px;
}
#buy_form input[type=button] {
display: inline-block;
padding: 1px 20px 3px 20px;
background-color: #93412b;
color: white;
border: 1px solid white;
font-size: 1em;
height: 32px;
}
#buy_form input[type=button]:hover {
background-color: white;
color: #93412b;
border: 1px solid #93412b;
}
#buy_form select {
display: inline-block;
font-size: 1em;
background-color: white;
color: #93412b;
border: 1px solid #93412b;
height: 32px;
}
/* ------- Chat ------- */
#chat {
width: 100%;
background-color: white;
border: 1px solid #9c352f;
height: 20rem;
position: relative;
}
#chat_window {
background-color: white;
width: 85%;
float: left;
height: 95%;
}
#chat_history {
position: absolute;
bottom: 8%;
max-height: 92%;
padding: 0px 0px 5px 7px;
}
#chat_history p {
font-size: .6em;
margin: 0;
}
#chat_text {
height: 8%;
position: absolute;
bottom: 0;
width: 85%;
}
#chat_text input {
width: 98%;
display: block;
margin: auto;
}
#chat_members {
list-style-type: none;
height: 100%;
width: 15%;
margin-left: 85%;
border-left: 1px solid #9c352f;
text-align: right;
box-sizing: border-box;
min-width: 100px;
font-size: .8em;
padding-top: 5px;
}
#chat_members li {
line-height: 1.2em;
padding: 5px 10px 2px 15px;
}
#chat_members .highlighted {
background-color: #c14d45;
color: white;
}
.chat_member {font-weight: bold;}
.chat_member1 { color: #3626c8;}
.chat_member2 { color: #e38d0b;}
#member_search {
position: absolute;
right: 0;
bottom: 0;
width: 15%;
height: 8%;
}
#member_search input {
width: 88%;
display: block;
margin: auto;
text-align: right;
}

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/js_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_paperclip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/newsboard_sheets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
03_dom/uebungen/u04_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

106
03_dom/uebungen/u04_tasse-01001/index.html Normal file
View File

@@ -0,0 +1,106 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>010010000100111101010100</title>
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<header></header>
<main>
<h1 class="article">
Hot Binary Heat Changing Mug
<span class="keyword">"010010000100111101010100"</span>
</h1>
<img
alt="Hot Binary Heat Changing Mug"
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
class="float_left"
id="product_img" />
<h2>Description</h2>
<p>
Numbers make up
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
tells us which state our mug is in. In binary!
</p>
<p>
See, the
<span class="keyword">Hot Binary Heat Changing Mug</span>
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
your
<span class="keyword">Hot Binary Heat Changing Mug</span>
could just be paying you a compliment. Cheeky, mug.
</p>
<p>
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
</p>
<h2>Product Specifications</h2>
<ul id="product_specification">
<li class="keyword">Hot Binary Heat Changing Mug</li>
<li>
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
010010000100111101010100)
</li>
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
<li>
Care Instructions:
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
</li>
<li>Materials: Ceramic</li>
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
</ul>
<h3>You wanna buy it?</h3>
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
<ol class="model" data-model="LDV73C-X3">
<li>Select how many items do you want.</li>
<li>Press "buy".</li>
</ol>
<form id="buy_form">
<select>
<option>1 item</option>
<option>2 items</option>
<option>3 items</option>
<option>4 items</option>
</select>
<input type="button" value="buy" />
</form>
</main>
<footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
<script>
'use strict';
(() => {
// Übung 4: 010010000100111101010100 — Teil 3
// Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
// 1. das erste li zu finden, das sich innerhalb der ul mit der id product_specification befindet.
// 2. das erste span-Element zu finden, das sich innerhalb des ersten h1-Elements mit der CSS-Klasse article befindet.
// 3. alle Elemente mit der Klasse keyword innerhalb von p-Elementen zu finden.
// 4. alle li-Elemente innerhalb von ul-Elementen zu finden.
})();
</script>
</body>
</html>

266
03_dom/uebungen/u05_tasse-01001/assets/css/styles.css Normal file
View File

@@ -0,0 +1,266 @@
/* -------------------------------------------- Haupt CSS fuer alle Seiten -------------------------------------------- */
/* ---------------- CSS-Reset ------------------- */
html, body, a, div, h1, h2, h3, h4, h5, h6, span, p, img, strong, ul, li, table, th, td, tr {
margin: 0px;
padding: 0px;
border: 0px none;
font-weight: normal;
font-style: inherit;
font-family: inherit;
font-variant: inherit;
text-decoration: none;
table-layout: inherit;
}
/* ---------------- Body / HTML ------------------- */
html {
font-size: 100%;
background-color: #fffef7;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 1.2em;
font-weight: normal;
color: black;
margin: 0rem auto 2rem auto;
}
/* ---------------- layout ------------------- */
header {
background: url(../img/js_header.png) left top no-repeat transparent;
background-size: cover;
height: 250px;
min-width: 850px;
}
header:after {
content: ' ';
display: block;
height: 250px;
background: rgba(255,254,247,0);
background: -moz-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,254,247,0)), color-stop(22%, rgba(255,254,247,0.55)), color-stop(42%, rgba(255,254,247,0.7)), color-stop(43%, rgba(255,254,247,0.71)), color-stop(61%, rgba(255,254,247,0.78)), color-stop(75%, rgba(255,254,247,0.92)), color-stop(87%, rgba(255,254,247,1)), color-stop(100%, rgba(255,254,247,1)));
background: -webkit-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -o-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: -ms-linear-gradient(top, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
background: linear-gradient(to bottom, rgba(255,254,247,0) 0%, rgba(255,254,247,0.55) 22%, rgba(255,254,247,0.7) 42%, rgba(255,254,247,0.71) 43%, rgba(255,254,247,0.78) 61%, rgba(255,254,247,0.92) 75%, rgba(255,254,247,1) 87%, rgba(255,254,247,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffef7', endColorstr='#fffef7', GradientType=0 );
}
main,
footer {
width: 70%;
margin: 3rem auto;
min-width: 850px;
padding: 0 20px;
box-sizing: border-box;
}
/* ---------------- Content ------------------- */
h1 {
color: #93412b;
font-size: 3em;
margin-bottom: 20px;
font-weight: bold;
}
h2 {
color: #93412b;
font-size: 2.5em;
margin-bottom: 15px;
}
h3 {
color: #93412b;
font-size: 2em;
margin-bottom: 10px;
}
p {
line-height: 15px;
margin-bottom: 15px;
line-height: 1.7em;
}
.cited {
font-style: italic;
font-size: .8em;
}
.u {text-decoration: underline;}
.b {font-weight: bold;}
.i {font-style: italic}
.align_right {text-align: right;}
.align_left {text-align: left; margin-right: 10px;}
.align_center {text-align: center;}
.float_left {float: left;}
.float_right {float: right;}
.clear_both {clear: both;}
strong {font-weight: bold;}
.special { color: #b7595b; font-weight: bold; }
.keyword { color: #db6f50; font-weight: bold; font-style: italic;}
.gray {color: gray;}
/* Links */
main a:link,
main a:visited {
color: #eb690b;
font-weight: bold;
}
main a:focus,
main a:hover,
main a:active {color: #eb690b;}
ul {
list-style-position: outside;
margin-bottom: 20px;
padding-left: 22px;
}
ol {
margin-bottom: 20px;
padding-left: 30px;
}
li {
line-height: 1.4em;
}
/* ------- Article ------- */
h1 {
color: #93412b;
font-size: 2.7em;
margin-bottom: 20px;
}
#buy_form input[type=button] {
display: inline-block;
padding: 1px 20px 3px 20px;
background-color: #93412b;
color: white;
border: 1px solid white;
font-size: 1em;
height: 32px;
}
#buy_form input[type=button]:hover {
background-color: white;
color: #93412b;
border: 1px solid #93412b;
}
#buy_form select {
display: inline-block;
font-size: 1em;
background-color: white;
color: #93412b;
border: 1px solid #93412b;
height: 32px;
}
/* ------- Chat ------- */
#chat {
width: 100%;
background-color: white;
border: 1px solid #9c352f;
height: 20rem;
position: relative;
}
#chat_window {
background-color: white;
width: 85%;
float: left;
height: 95%;
}
#chat_history {
position: absolute;
bottom: 8%;
max-height: 92%;
padding: 0px 0px 5px 7px;
}
#chat_history p {
font-size: .6em;
margin: 0;
}
#chat_text {
height: 8%;
position: absolute;
bottom: 0;
width: 85%;
}
#chat_text input {
width: 98%;
display: block;
margin: auto;
}
#chat_members {
list-style-type: none;
height: 100%;
width: 15%;
margin-left: 85%;
border-left: 1px solid #9c352f;
text-align: right;
box-sizing: border-box;
min-width: 100px;
font-size: .8em;
padding-top: 5px;
}
#chat_members li {
line-height: 1.2em;
padding: 5px 10px 2px 15px;
}
#chat_members .highlighted {
background-color: #c14d45;
color: white;
}
.chat_member {font-weight: bold;}
.chat_member1 { color: #3626c8;}
.chat_member2 { color: #e38d0b;}
#member_search {
position: absolute;
right: 0;
bottom: 0;
width: 15%;
height: 8%;
}
#member_search input {
width: 88%;
display: block;
margin: auto;
text-align: right;
}

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/js_header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 KiB

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_paperclip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/newsboard_sheets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
03_dom/uebungen/u05_tasse-01001/assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

109
03_dom/uebungen/u05_tasse-01001/index.html Normal file
View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>010010000100111101010100</title>
<meta name="description" content="JavaScript. HTML mühelos manipuliert" />
<link rel="stylesheet" href="assets/css/styles.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<header></header>
<main>
<h1 class="article">
Hot Binary Heat Changing Mug
<span class="keyword">"010010000100111101010100"</span>
</h1>
<img
alt="Hot Binary Heat Changing Mug"
src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug.gif"
class="float_left"
id="product_img" />
<h2>Description</h2>
<p>
Numbers make up
<span class="special">everything</span> in our digital world. They flow around us, invisible like the Force or
the Matrix, controlling all our many computer-y devices. Two numbers, in particular:
<span class="special">0 and 1</span>. <span class="b i">Off and On</span>. Well, we can tell you this: when
there's no coffee in our cup, we're completely OFF our game. But when our mug is full of hot coffee, we're
totally ON. And now, with the <span class="keyword">Hot Binary Heat Changing Mug</span>, there's a mug that
tells us which state our mug is in. In binary!
</p>
<p>
See, the
<span class="keyword">Hot Binary Heat Changing Mug</span>
looks like just a dark mug with binary numbers all over it. That's its OFF or cold state. Add hot coffee (or any
liquid) and a series of digits will turn white. Read them continuously from left to right, and you'll read:
<span class="keyword">010010000100111101010100</span>. That's <span class="special">in binary</span>. Of course,
your
<span class="keyword">Hot Binary Heat Changing Mug</span>
could just be paying you a compliment. Cheeky, mug.
</p>
<p>
<img alt="010010000100111101010100" src="assets/img/thinkgeek_2024_hot_binary_heat_change_mug_grid_embed.jpg" />
</p>
<h2>Product Specifications</h2>
<ul id="product_specification">
<li class="keyword">Hot Binary Heat Changing Mug</li>
<li>
As you add hot liquids, the binary for "HOT" appears (read from left to right in one line, not two:
010010000100111101010100)
</li>
<li>A <span class="keyword">ThinkGeek</span> creation and exclusive!</li>
<li>
Care Instructions:
<span class="i b">Hand wash only. Not microwave or dishwasher safe.</span>
</li>
<li>Materials: Ceramic</li>
<li>Dimensions: approx. 3.15" diameter x 3.75" tall</li>
</ul>
<h3>You wanna buy it?</h3>
<p class="buy_info_text">If you like to buy this brilliant mug, just do the following steps:</p>
<ol class="model" data-model="LDV73C-X3">
<li>Select how many items do you want.</li>
<li>Press "buy".</li>
</ol>
<form id="buy_form">
<select>
<option>1 item</option>
<option>2 items</option>
<option>3 items</option>
<option>4 items</option>
</select>
<input type="button" value="buy" />
<!-- <button type="button">buy</button> -->
</form>
</main>
<footer>(C) by ThinkGeek &ndash; Produkttext mit freundlicher Genehmigung von ThinkGeek Inc.</footer>
<script>
'use strict';
(() => {
// Übung 5: 010010000100111101010100 — Teil 4
// Wenden Sie sich nochmal der 010010000100111101010100-Tasse zu. Benutzen Sie geeignete Selektoren, um
// 1. alle Bilder zu finden, deren Dateiname auf jpg endet.
// 2. alle input-Elemente vom Typ button zu finden, die sich innerhalb von Formularen befinden.
// 3. alle Elemente mit der Klasse model zu finden, die ein Attribut data-model haben, das den Wert V7 enthält.
// 4. alle Bilder zu finden, die nicht die Klasse float_left enthalten.
// 5. alle zweiten Listenpunkte zu finden.
// 6. alle Listen (ul) zu finden, die unmittelbar nach "einer Überschrift zweiter Ordnung" (h2) folgen.
})();
</script>
</body>
</html>

BIN
03_dom/uebungen/uebungen-1-5.zip Normal file
View File

Binary file not shown.

22
03_dom/unterricht/tag21/01_vorwort/vorwort.md Normal file
View File

@@ -0,0 +1,22 @@
| Bezeichnung | Abkürzung |
| ----------- | ------------------------------------- |
| DOM | Document Object Model |
| API | Application Programming Interface |
| ROCA | Resource-Oriented Client Architecture |
| SEO |  Search Engine Optimization |
| SEA | Search Engine Advertising |
| Vanilla JS | reines JavaScript ohne Framework |
## Links: Warum kein jQuery mehr?
- <http://youmightnotneedjquery.com>
- <http://blog.garstasio.com/you-dont-need-jquery>
- <https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery>
- <http://programmers.stackexchange.com/questions/166273/advantages-of-using-pure-javascript-over-jquery>
## Links: Warum jQuery yeah!
- <https://hackernoon.com/i-still-love-jquery-and-you-should-too-3114f33f249e>
- <https://remysharp.com/2017/12/15/is-jquery-still-relevant>
- <https://trends.builtwith.com/javascript/jQuery>
- <https://learn.onemonth.com/why-you-should-learn-jquery-before-javascript/>

27
03_dom/unterricht/tag21/02_document-query-selector/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document.querySelector() - Hello World</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>document.querySelector() - Hello <em>World</em></h1>
</div>
</main>
<script>
'use strict';
const h1El = document.querySelector('h1');
h1El.innerHTML = 'Hello <em>DOM</em>';
console.log(h1El); // => <h1>Hello <em>DOM</em></h1>
console.log(typeof h1El); //=> "object" vom Typ Node-Objekt, spezifisch ein HTMLHeadlineElement
</script>
</body>
</html>

70
03_dom/unterricht/tag21/03_css-selektoren/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Selektoren</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* universal Selektor (*) */
*,
html {
box-sizing: border-box;
}
/* type selector (HTMLElement) */
h1 {
color: tomato;
}
/* id selector (#) */
#image-main {
border: 10px solid #efefef;
border-radius: 12px;
margin: 1rem;
}
/* class selector (.) */
.box {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: tomato;
border: 3px solid #222;
padding: 1rem;
text-align: center;
}
/* Menge von Selektoren (,) */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>CSS Selektoren</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis iusto ea id quos dolor accusantium ipsum at
natus quidem commodi dolorem aspernatur a porro, vitae cumque. Soluta temporibus quis facilis?
</p>
<div class="box">Box</div>
<img src="https://picsum.photos/seed/picsum/900/400" alt="" id="image-main" />
<img src="https://dummyimage.com/900x400/000/f90.jpg" alt="image" />
</div>
</main>
<script>
'use strict';
// document.querySelector(/* CSS SELEKTOR AUSSER PSEUDOELEMENTE */)
console.log(document.querySelector('h1'));
</script>
</body>
</html>

41
03_dom/unterricht/tag21/04_document-query-selector-all/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document.querySelectorAll()</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>document.querySelectorAll()</h1>
<hr />
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
</div>
</main>
<script>
'use strict';
const h1El = document.querySelector('h1');
const h2Els = document.querySelectorAll('h2');
// const h2Array = [...document.querySelectorAll('h2')];
const h2Array = Array.from(document.querySelectorAll('h2'));
console.log(h2Els); // => NodeList(4) [h2.news, h2.news, h2.news, h2.news]
console.log(h2Array); // =>  [h2.news, h2.news, h2.news, h2.news]
h2Array.forEach((el) => {
el.style.backgroundColor = 'salmon';
el.style.color = 'white';
el.style.padding = '1rem';
});
</script>
</body>
</html>

87
03_dom/unterricht/tag21/05_css-attribut-selektoren/index.html Normal file
View File

@@ -0,0 +1,87 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Attribut Selektor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Allgemeine Formatierunge */
/* universal Selektor (*) */
*,
html {
box-sizing: border-box;
}
a {
color: tomato;
text-decoration: none;
}
/* attribut selector (ATTRIBUT_NAME="value") */
a[href='https://www.gfn.de'] {
color: blue;
}
/* attribut selector beginnend (ATTRIBUT_NAME^="value") */
a[href^='https'] {
background-color: aqua;
}
/* attribut selector abschließend (ATTRIBUT_NAME$="value") */
img[src$='.jpg'],
img[src$='.jpeg'] {
border: 10px solid #555;
}
/* attribut selector suchend (ATTRIBUT_NAME*="value") */
a[href*='#'] {
text-decoration: underline;
font-weight: bolder;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>CSS Attribut Selektor</h1>
<hr />
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
<nav class="menu-main">
<ul class="list">
<li><a href="https://www.google.com">Google </a></li>
<li><a href="https://netflix.com">Netflix</a></li>
<li>
<a href="#dropdown">Projects</a>
<ul class="sublist">
<li><a href="#">Project 01</a></li>
<li><a href="#">Project 02</a></li>
<li><a href="#">Project 03</a></li>
</ul>
</li>
<li><a href="http://www.gfn.de">GFN</a></li>
<li><a href="#text">Text</a></li>
</ul>
</nav>
<h2>Bilder</h2>
<p>Erstellte Bilder über Dummyimage.com</p>
<ul class="list">
<li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
<li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
<li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
<li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
</ul>
<p>
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
explicabo architecto numquam eaque in, qui possimus voluptatem?
</p>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

86
03_dom/unterricht/tag21/06_css-combinator-selektoren/index.html Normal file
View File

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Kombinator Selektor</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
/* Allgemeine Formatierunge */
/* universal Selektor (*) */
*,
html {
box-sizing: border-box;
}
a {
color: tomato;
text-decoration: none;
}
/* descendant combinator (' ') */
.menu-main ul {
padding: 0;
list-style: none;
}
/* child combinator (>) - direkte Kinderelemente selektieren */
.menu-main > ul > li > a {
color: green;
}
/* adjacent cominator (+) - direktes nachkommendes Geschwisterelement selektieren */
h2 + p {
color: #999;
}
/* general sibling combinator (~) - alle nachkommenden Geschwisterelemente selektieren */
ul.list li:nth-child(1) ~ li img {
width: 200px;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>CSS Kombinator Selektor</h1>
<hr />
<!-- nav.menu-main>ul.list>li*4>a[href="#"]{Link 0$} -->
<nav class="menu-main">
<ul class="list">
<li><a href="https://www.google.com">Google </a></li>
<li><a href="https://netflix.com">Netflix</a></li>
<li>
<a href="#dropdown">Projects</a>
<ul class="sublist">
<li><a href="#">Project 01</a></li>
<li><a href="#">Project 02</a></li>
<li><a href="#">Project 03</a></li>
</ul>
</li>
<li><a href="http://www.gfn.de">GFN</a></li>
<li><a href="#text">Text</a></li>
</ul>
</nav>
<h2>Bilder</h2>
<p>Erstellte Bilder über Dummyimage.com</p>
<ul class="list">
<li><img src="https://dummyimage.com/400x200/c00/fff.jpg" alt="" /></li>
<li><img src="https://dummyimage.com/400x200/f90/fff.png" alt="" /></li>
<li><img src="https://dummyimage.com/400x200/fd0/fff.jpg" alt="" /></li>
<li><img src="https://dummyimage.com/400x200/090/fff.png" alt="" /></li>
</ul>
<p>
Lorem, ipsum dolor sit amet consectetur <a href="https://www.gfn.de">Zur GFN Webseite</a> adipisicing elit.
Veniam quisquam quidem ut eos dolorem corrupti aut <a href="#">Link</a> sed rerum voluptate dolore quod unde
explicabo architecto numquam eaque in, qui possimus voluptatem?
</p>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

200
03_dom/unterricht/tag21/07_css-pseudoklassen/index.html Normal file
View File

@@ -0,0 +1,200 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Selektor - Pseudoklassen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
*,
html {
box-sizing: border-box;
}
a {
color: salmon;
}
/* normal Zustand */
/*
a:link {
color: salmon;
}
*/
/*
a:visited {
color: purple;
} */
a:hover,
a:focus {
color: #c00;
}
/* a:active {
color: steelblue;
} */
.menu-main {
background-color: steelblue;
}
.menu-main ul.list {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.menu-main ul.list li {
border-right: 2px solid #555;
}
/* :last-child | :first-child - letztes oder erstes Kindelement */
.menu-main ul.list li:last-child {
border-right: none;
}
.menu-main ul.list li a {
display: inline-block;
padding: 0.5rem 1rem;
color: white;
text-decoration: none;
text-transform: uppercase;
}
/* .menu-main ul.list li a:link {} */
/* .menu-main ul.list li a:visited {} */
.menu-main ul.list li a:hover,
.menu-main ul.list li a:focus {
color: #2a2a2a;
background-color: lightblue;
}
.menu-main ul.list li a:active {
color: white;
background-color: #2a2a2a;
}
/* :nth-child(nte + offset) */
/* table tbody tr:nth-child(2n + 3) td {
background-color: rgba(0, 0, 0, 0.1);
} */
/* :nth-child(odd | even) */
table tbody tr:nth-child(even) td {
background-color: rgba(0, 0, 0, 0.1);
}
/* :empty */
table tbody td:empty {
background-color: #333;
}
table tbody td:empty::after {
content: '(no content)';
color: white;
padding: 0.5rem;
}
/* :not() */
/* table tbody tr:not(.selected) td {
opacity: 0.5;
} */
/* :checked - ausgewählte Checkboxen | Radio-Buttons */
input:checked + label {
text-decoration: line-through;
}
</style>
</head>
<body>
<nav class="menu-main">
<ul class="list">
<li><a href="#">Pseudoklassen</a></li>
<li>
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Reference/Selectors/Pseudo-elements">Pseudoelemente</a>
</li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>CSS Selektor - Pseudoklassen</h1>
<hr />
<p>
Eine
<a href="https://developer.mozilla.org/de/docs/Web/CSS/Pseudo-classes">Pseudoklasse</a>
in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand
abzufragen. So steht beispielsweise <code>:hover</code> für Elemente, die gerade mit dem Mauszeiger berührt
werden.
</p>
<table class="table">
<thead class="table-dark">
<tr>
<th>Name</th>
<th>Beschreibung</th>
</tr>
</thead>
<tbody>
<tr class="current">
<td>:nth-child</td>
<td>
Die Pseudo-Klasse spricht das x-te Kind-Element an — im Beispiel das fünfte Element innerhalb von ul,
falls es vom Tag-Typ li ist.
</td>
</tr>
<tr>
<td>:first-child</td>
<td>Die Pseudo-Klasse selektiert das erste Kind-Element, sofern es vom richtigen Tag-Typ ist..</td>
</tr>
<tr>
<td>:last-child</td>
<td>
Äquivalent zu :first-child selektieren Sie hier das letzte Kind-Element, sofern es vom richtigen Tag-Typ
ist.
</td>
</tr>
<tr>
<td>:empty</td>
<td>
Mit dieser Pseudo-Klasse sprechen Sie nur Elemente an, die ohne Kind-Elemente sind. Inhalt in Form von
Text wird dabei ebenfalls als Kind-Element betrachtet.
</td>
</tr>
<tr class="selected">
<td>:not(selector)</td>
<td>
Negation. Wählt Elemente aus, wenn sie nicht dem in Klammern angegebenen Selektor entsprechen. Im
Beispiel würde alles außer span-Elementen ausgewählt.
</td>
</tr>
<tr>
<td>:only-child</td>
<td>
Diese Klasse selektiert ein Element nur, wenn es sich um das einzige Kind eines angegebenen
Eltern-Elementes handelt.
</td>
</tr>
<tr>
<td>:checked</td>
<td>Diese Klasse selektiert eine Checkbox oder ein Radio-button nur, wenn es ausgewählt wurde.</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
<div class="form-check">
<input type="checkbox" id="cb-todo" class="form-check-input" />
<label for="cb-todo">Todo: Checkbox verstehen </label>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

38
03_dom/unterricht/tag21/08_document-vs-element-selektion/index.html Normal file
View File

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document.querySelector() vs. element.querySelector()</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>document.querySelector() vs. element.querySelector()</h1>
<hr />
<ul>
<li>1</li>
<li>2</li>
</ul>
<ul id="second_list">
<li>3</li>
<li>4</li>
</ul>
</div>
</main>
<script>
'use strict';
// document.querySelectorAll()
const liEls = Array.from(document.querySelectorAll('ul li'));
console.log(liEls); // => (4) [li, li, li, li]
const secondListEl = document.querySelector('#second_list');
// element.querySelectorAll()
console.log(Array.from(secondListEl.querySelectorAll('li'))); // => [<li>3</li>,<li>4</li>]
</script>
</body>
</html>

45
03_dom/unterricht/tag21/09_$-$$-helper/index.html Normal file
View File

@@ -0,0 +1,45 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Helferfunktion $ und $$</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
</head>
<body>
<main>
<div class="container py-5">
<h1>Helferfunktion $ und $$</h1>
<hr />
<h2>Lorem ipsum dolor sit amet.</h2>
<h2 class="news">Quod eligendi saepe voluptates eveniet.</h2>
<h2 class="news">Architecto reiciendis magnam modi inventore.</h2>
<h2 class="news">Modi ipsum, velit rem ipsam.</h2>
<h2 class="news">Provident, officia quisquam aliquam deserunt!</h2>
</div>
</main>
<script>
'use strict';
// IIFE
((jq) => {
// Helferfunktion $ und $$
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
$('h1').style.color = 'orange';
$$('.news').forEach((el) => {
el.style.backgroundColor = 'salmon';
});
// $ von jQuery
jq('.news').css({
backgroundColor: 'yellow',
padding: '1rem',
});
})($); // $ von jQuery
</script>
</body>
</html>