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-10-01 13:13:09 +02:00
parent 366a821a0e
commit af025ac50c
5 changed files with 256 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03_js-dom/unterricht/tag19/01_vorwort/vorwort.md
+22
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/>
03_js-dom/unterricht/tag19/02_document-query-selector/index.html
+27
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 World!</h1>
</div>
</main>
<script>
'use strict';
const h1El = document.querySelector('h1');
h1El.innerHTML = 'Hello <em>World</em>';
console.log(h1El);
console.log(typeof h1El); // => 'object' vom Type Node-Objekt, spezifisch ein HTMLHeadlineElement
</script>
</body>
</html>
03_js-dom/unterricht/tag19/03_css-selektoren/index.html
+73
View File
@@ -0,0 +1,73 @@
<!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 (HTML_ELEMENT) */
h1 {
color: tomato;
}
/* id selector (#) */
#image-main {
border: 10px solid #efefef;
border-radius: 12px;
margin: 1rem;
}
/* class selector (.) */
.box {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: tomato;
border: 5px solid #333;
margin: 1rem;
display: flex;
align-items: center;
justify-content: 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. Dolore beatae veritatis quo? Voluptatibus omnis
deserunt suscipit placeat. Quas doloribus consectetur minima, itaque tempore, ipsam architecto veritatis
corporis perspiciatis deserunt aliquam!
</p>
<div class="box">Box</div>
<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>
03_js-dom/unterricht/tag19/04_document-query-selector-all/index.html
+46
View File
@@ -0,0 +1,46 @@
<!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('h1El: ', h1El); // => <h1>document.querySelectorAll()</h1>
// https://developer.mozilla.org/de/docs/Web/API/NodeList
console.log('h2Els: ', h2Els); // => NodeList(4) [h2.news, h2.news, h2.news, h2.news]
console.log('h2Array: ', h2Array); // => [h2.news, h2.news, h2.news, h2.news]
const els = h2Array.map((el) => {
el.style.backgroundColor = 'tomato';
el.style.padding = '1rem';
el.style.color = 'white';
return el;
});
console.log(els);
</script>
</body>
</html>
03_js-dom/unterricht/tag19/05_css-attribut-selektoren/index.html
+88
View File
@@ -0,0 +1,88 @@
<!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 Formatierung */
/* 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*='#'] {
font-weight: bolder;
text-decoration: underline;
}
</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>