Website – Klickereignisse#
Wie kann JavaScript in einer HTML-Seite integriert werden?
Die Website#
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>JS-Testseite</title>
6 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
7 <link href="styles/styles.css" rel="stylesheet" type="text/css">
8 </head>
9 <body>
10 <h1>Vanilla JavaScript im Browser</h1>
11 <img src="images/schild-warnung-kinder-1.webp"
12 alt="The Firefox logo: a flaming fox surrounding the Earth."
13 height="400px">
14
15 <p>Mit der DOM-API und Javscript können:</p>
16
17 <ul> <!-- changed to list in the tutorial -->
18 <li>Elemente erstell und gelöscht,</li>
19 <li>auf Ereignissse reagiert</li>
20 <li>und v.a. Aktivitäten realsisiert werden.</li>
21 </ul>
22
23 <p>Damit wird der Browser ein Betriebssystem, unabhängig vom verwendeten Betriebssystem.</p>
24
25 <p> Mehr zum Standard auf <a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-262/">ECMA-Seiten</a>...</p>
26 <button>Benutzer ändern</button>
27 <script src="js/mozilla-main.js"></script>
28 <p class="quelle"><b>Quelle: </b>https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics</p>
29 </body>
30</html>
Das JavaScript#
Die zusätzliche Funktionalität…
1// Image switcher code
2
3let myImage = document.querySelector('img');
4
5myImage.onclick = function() {
6 let mySrc = myImage.getAttribute('src');
7 if(mySrc === 'images/schild-warnung-kinder-2.webp') {
8 myImage.setAttribute ('src','images/schild-warnung-kinder-1.webp');
9 } else {
10 myImage.setAttribute ('src','images/schild-warnung-kinder-2.webp');
11 }
12}
13
14// Personalized welcome message code
15
16let myButton = document.querySelector('button');
17let myHeading = document.querySelector('h1');
18
19function setUserName() {
20 let myName = prompt('Ihr Name? ');
21 if(!myName) {
22 setUserName();
23 } else {
24 localStorage.setItem('name', myName);
25 myHeading.innerHTML = myName + ', JS ist mächtig!';
26 }
27}
28
29if(!localStorage.getItem('name')) {
30 setUserName();
31} else {
32 let storedName = localStorage.getItem('name');
33 myHeading.innerHTML = storedName + ', JS ist mächtig!';
34}
35
36myButton.onclick = function() {
37 setUserName();
38}
Die Styles#
Für die Präsentation und Darstellung
1html {
2 font-size: 10px;
3 font-family: 'Open Sans', sans-serif;
4 padding-top: 20px;
5 }
6
7
8 h1 {
9 font-size: 60px;
10 text-align: center;
11 }
12
13 p, li {
14 font-size: 16px;
15 line-height: 2;
16 letter-spacing: 1px;
17 }
18
19
20 html {
21 background-color: #00539F;
22 }
23
24 body {
25 width: 600px;
26 margin: 0 auto;
27 background-color: #FF9500;
28 padding: 0 20px 20px 20px;
29 border: 5px solid black;
30 }
31
32 h1 {
33 margin: 0;
34 padding: 20px 0;
35 color: #00539F;
36 text-shadow: 3px 3px 1px black;
37 }
38
39 img {
40 display: block;
41 margin: 0 auto;
42 }
43 .quelle {
44 font-size: .8em;
45 }
Die Bilder#
Sie können auch eigenen Bilder auswählen…
Bild 1 (Neu):
Bild 2 (zwei Jahre später):
