This commit is contained in:
Philippe Torrel
@@ -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/>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user