| | |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Spezifität</h3> |
|---|
| | | <p>Regeln können andere Regeln überschreiben</p> |
|---|
| | | <pre> |
|---|
| | | <code class="html" data-trim data-line-numbers> |
|---|
| | | <script type="text/template"> |
|---|
| | | <div style="display: inline-block"></div> |
|---|
| | | </script> |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | <pre> |
|---|
| | | <code class="css" data-trim data-line-numbers> |
|---|
| | | #id:hover { display: none } |
|---|
| | | |
|---|
| | | #id { display: block } |
|---|
| | | |
|---|
| | | .class.clazz { display: inline } |
|---|
| | | |
|---|
| | | div { display: inline-block } |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <h3>Box Model</h3> |
|---|
| | | <p>Es gibt zwei Varianten des Modells:</p> |
|---|
| | | <p><code>content-box</code> (default)</p> |
|---|
| | |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <section> |
|---|
| | | <h2>JS</h2> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <ul> |
|---|
| | | <li>JavaScript stammt aus dem Jahr 1995 von Netscape</li> |
|---|
| | | <li>Syntaktisch an Java angelehnt</li> |
|---|
| | | <li>Ursprünglich nur optionale, verzichtbare Effekte (unobstrusive)</li> |
|---|
| | | <li>Mittlerweile von ECMA standardisiert</li> |
|---|
| | | </ul> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <table> |
|---|
| | | <tr><th>Version</th><th>ECMA Standard</th><th>Jahr</th></tr> |
|---|
| | | <tr><td>ES1</td><td>ECMAScript 1</td><td>1997</td></tr> |
|---|
| | | <tr><td>ES2</td><td>ECMAScript 2</td><td>1998</td></tr> |
|---|
| | | <tr><td><strong>ES3</strong></td><td><strong>ECMAScript 3</strong></td><td><strong>1999</strong></td></tr> |
|---|
| | | <tr><td><strong>ES5</strong></td><td><strong>ECMAScript 5</strong></td><td><strong>2009</strong></td></tr> |
|---|
| | | <tr><td>ES6</td><td>ECMAScript 2015</td><td>2015</td></tr> |
|---|
| | | <tr><td></td><td>...</td><td></td></tr> |
|---|
| | | <tr><td></td><td>ECMAScript 2020</td><td>2020</td></tr> |
|---|
| | | </table> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <pre> |
|---|
| | | <code class="html" data-trim data-line-numbers> |
|---|
| | | <script type="text/template"> |
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html lang="de"> |
|---|
| | | <head> |
|---|
| | | <meta charset="UTF-8"> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <!-- code --> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
| | | </script> |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>Code wird zwischen <code>script</code>-Tags geschrieben</p> |
|---|
| | | <pre> |
|---|
| | | <code class="html" data-trim data-line-numbers> |
|---|
| | | <script> |
|---|
| | | ... |
|---|
| | | </script> |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | <section> |
|---|
| | | <p>DOM-API</p> |
|---|
| | | <pre> |
|---|
| | | <code class="js" data-trim data-line-numbers> |
|---|
| | | // findet das erste Element |
|---|
| | | const parent = document.querySelector("#id"); |
|---|
| | | |
|---|
| | | // findet alle Elemente |
|---|
| | | const elements = document.querySelectorAll("#id"); |
|---|
| | | |
|---|
| | | // Element erstellen |
|---|
| | | const newElement = document.createElement("div"); |
|---|
| | | |
|---|
| | | newElement.addEventListener("click", (event) => { |
|---|
| | | // Click-Event |
|---|
| | | }); |
|---|
| | | |
|---|
| | | // Element anhängen |
|---|
| | | parent.appendChild(newElement); |
|---|
| | | |
|---|
| | | newElement.remove(); |
|---|
| | | </code> |
|---|
| | | </pre> |
|---|
| | | </section> |
|---|
| | | </section> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | |
|---|
