Editing JavaScript 1 Document Objekt
Jump to navigation
Jump to search
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.
The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
Latest revision | Your text | ||
Line 28: | Line 28: | ||
/* | /* | ||
document.body => greift auf die Elemente im Body zu | document.body => greift auf die Elemente im Body zu | ||
firstElementChild => bezieht sich immer auf das erste Kind-Element (h1) | firstElementChild => bezieht sich immer auf das erste Kind-Element (h1) | ||
nextElementSibling => bezeichnet das nachfolgende Geschwister-Element (h2) | nextElementSibling => bezeichnet das nachfolgende Geschwister-Element (h2) | ||
innerHTML => greift auf Inhalt des angesprochenen Tags zu (Überschrift 2) | innerHTML => greift auf Inhalt des angesprochenen Tags zu (Überschrift 2) | ||
Beispiel um das <i>-Tag anzusprechen: | Beispiel um das <i>-Tag anzusprechen: | ||
document.body.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild | document.body.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild | ||
*/ | */ | ||
Line 64: | Line 59: | ||
innerHTML ohne alert vorangestellt ändert den Inhalt des ausgewählten Tags => | innerHTML ohne alert vorangestellt ändert den Inhalt des ausgewählten Tags => | ||
Überschrift 2 ändert sich zu neue Überschrift | Überschrift 2 ändert sich zu neue Überschrift | ||
in diesem Fall, da es nur Text ist, der geändert wird ginge auch innerText | |||
in diesem Fall, da es nur Text ist, | statt innerHTML | ||
*/ | */ | ||
</script> | </script> | ||
Line 80: | Line 75: | ||
</head> | </head> | ||
<body> | <body> | ||
<h1 id=" | <h1 id="ueberschrift1"></h1> | ||
<h2 id=" | <h2 id="ueberschrift2"></h2> | ||
<p id=" | <p id="absatz"></p> | ||
<script> | <script> | ||
/* | /* | ||
getElementById greift auf den Tag mit der entsprechenden ID zu | getElementById greift auf den Tag mit der entsprechenden ID zu | ||
*/ | */ | ||
document.getElementById(" | document.getElementById("ueberschrift1").innerText = "JavaScript ist cool"; | ||
document.getElementById(" | document.getElementById("ueberschrift2").innerText = "Seite mit generierten Inhalten"; | ||
document.getElementById(" | document.getElementById("absatz").innerHTML = "Hier steht ein Absatz mit einem" + | ||
" <strong>fett gedruckten</strong>Bereich."; | " <strong>fett gedruckten</strong>Bereich."; | ||
</script> | </script> | ||
Line 112: | Line 107: | ||
<title>Übungen</title> | <title>Übungen</title> | ||
</head> | </head> | ||
<body> <input id=" | <body> <input id="eingabefeld"> | ||
<script> | <script> | ||
// über value-Attribut lässt sich ein | // über value-Attribut lässt sich ein | ||
// beliebiger Text in das Feld einfügen | // beliebiger Text in das Feld einfügen | ||
document.getElementById(" | document.getElementById("eingabefeld").value = "JavaScript Kurs"; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 129: | Line 124: | ||
<title>Übungen</title> | <title>Übungen</title> | ||
</head> | </head> | ||
<body> <input id=" | <body> <input id="eingabefeld"> | ||
<!-- onclick-Funktion aktiviert die JS Funktion --> | <!-- onclick-Funktion aktiviert die JS Funktion --> | ||
<button type="button" onclick=" | <button type="button" onclick="auslesen()">Weiter</button> | ||
<script> | <script> | ||
function | function auslesen() { | ||
let inhalt = document.getElementById(" | let inhalt = document.getElementById("eingabefeld").value; | ||
alert( | alert(inhalt); | ||
} | } | ||
</script> | </script> | ||
Line 154: | Line 149: | ||
<script> | <script> | ||
// Programm fordert User auf einen Link einzugeben | // Programm fordert User auf einen Link einzugeben | ||
let | let adresse = prompt("Gib eine Linkadresse ein."); | ||
// eingegebener Link wird als href-Attribut in den <a> Tag geschrieben | // eingegebener Link wird als href-Attribut in den <a> Tag geschrieben | ||
document.getElementById("link").href = adresse; | document.getElementById("link").href = adresse; | ||
// eingegebener Link wird innerhalb der <a> Tags geschrieben | // eingegebener Link wird innerhalb der <a> Tags geschrieben | ||
document.getElementById("link").innerHTML = | document.getElementById("link").innerHTML = adresse; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 201: | Line 196: | ||
<body> | <body> | ||
<form name="formular"> | <form name="formular"> | ||
<select id=" | <select id="auswahl"> | ||
<option value=" | <option value="auswahl1">Wert 1</option> | ||
<option value=" | <option value="auswahl2">Wert 2</option> | ||
<option value=" | <option value="auswahl3">Wert 3</option> | ||
</select> | </select> | ||
</form> | </form> | ||
<script> | <script> | ||
// Möglichkeit 1 um entsprechendes Optionsfeld auszuwählen | // Möglichkeit 1 um entsprechendes Optionsfeld auszuwählen | ||
auswahl.selectedIndex = 2; | |||
// Möglichkeit 2 | // Möglichkeit 2 | ||
auswahl.options[2].selected = true; | |||
// Möglichkeit 3 | // Möglichkeit 3 | ||
auswahl.value = "auswahl3"; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 233: | Line 227: | ||
</head> | </head> | ||
<body> | <body> | ||
<form name=" | <form name="formular"> | ||
<input id=" | <input id="feld1" value="Formularfeld 1"> | ||
</form> | </form> | ||
<script> | <script> | ||
let | let angezeigt = false; | ||
function | function nachricht() { | ||
if (! | if (!angezeigt) { | ||
alert("Gib deinen Namen ein"); | alert("Gib deinen Namen ein"); | ||
angezeigt = true; | |||
} | } | ||
} | } | ||
Line 250: | Line 244: | ||
* Wenn Fokus entfernt wird, kommt es zum blur-Event | * Wenn Fokus entfernt wird, kommt es zum blur-Event | ||
*/ | */ | ||
feld1.onfocus = nachricht; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 266: | Line 260: | ||
</head> | </head> | ||
<body> | <body> | ||
<form name=" | <form name="formular"> <input id="feld1"> | ||
<button type="button">Eingabe</button> | <button type="button">Eingabe</button> | ||
</form> | </form> | ||
<script> | <script> | ||
function | function nachricht() { | ||
if ( | if (feld1.value == "") { | ||
alert("Gib deinen Namen ein"); | alert("Gib deinen Namen ein"); | ||
} | } | ||
Line 279: | Line 273: | ||
* tritt die Fehlermeldung auf | * tritt die Fehlermeldung auf | ||
*/ | */ | ||
feld1.onblur = nachricht; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 300: | Line 294: | ||
</head> | </head> | ||
<body> | <body> | ||
<form name=" | <form name="formular"> | ||
<input id=" | <input id="feld1"> | ||
<button type="button">Eingabe</button> | <button type="button">Eingabe</button> | ||
</form> | </form> | ||
<script> | <script> | ||
function | function nachricht() { | ||
alert("Buchstabe eingegeben: " + | alert("Buchstabe eingegeben: " + feld1.value); | ||
} | } | ||
/* | /* | ||
* reagiert auf Eingabe in das Input Feld | * reagiert auf Eingabe in das Input Feld | ||
*/ | */ | ||
feld1.oninput = nachricht; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 326: | Line 320: | ||
<body> | <body> | ||
<form name="formular"> | <form name="formular"> | ||
<p><input id=" | <p><input id="feld1" value="Formularfeld 1"> </p> | ||
<p><input id=" | <p><input id="feld2" value="Formularfeld 2"></p> | ||
<button id="btn1" type="button">Feld 1 Fokus</button> | <button id="btn1" type="button">Feld 1 Fokus</button> | ||
<button id="btn2" type="button">Feld 2 Fokus</button> | <button id="btn2" type="button">Feld 2 Fokus</button> | ||
Line 335: | Line 329: | ||
// leert zuerst das Input Feld und | // leert zuerst das Input Feld und | ||
//setzt dann den Fokus darauf | //setzt dann den Fokus darauf | ||
feld1.value = ""; | |||
feld1.focus(); | |||
} | } | ||
function fokus2() { | function fokus2() { | ||
feld2.value = ""; | |||
feld2.focus(); | |||
} | } | ||
btn1.onclick = fokus1; | btn1.onclick = fokus1; | ||
Line 352: | Line 346: | ||
<pre> | <pre> | ||
<body> | <body> | ||
<form id=" | <form id="formular" action="fertig.html" method="GET" onsubmit="return auswerten()"> | ||
<div class="form-row"> | <div class="form-row"> | ||
<label for="inputname">Name</label> | <label for="inputname">Name</label> | ||
Line 362: | Line 356: | ||
</div> | </div> | ||
<div class="form-row"> | <div class="form-row"> | ||
<label for=" | <label for="inputalter">Alter</label> | ||
<input id=" | <input id="inputalter" name="alter"> | ||
</div> | </div> | ||
<button type="submit">Absenden</button> | <button type="submit">Absenden</button> | ||
</form> | </form> | ||
<script> | <script> | ||
function | function auswerten() { | ||
if (inputname.value == "") { | if (inputname.value == "") { | ||
alert("Gib einen Namen ein"); | alert("Gib einen Namen ein"); | ||
Line 379: | Line 373: | ||
return false; | return false; | ||
} | } | ||
if ( | if (inputalter.value == "") { | ||
alert("Gib ein Alter ein"); | alert("Gib ein Alter ein"); | ||
inputalter.focus(); | |||
return false; | return false; | ||
} | } | ||
let | let zahl = true; | ||
console.log( | console.log(inputalter.value.length); | ||
for (let i = 0; i < | for (let i = 0; i < inputalter.value.length; ++i) { | ||
if ( | if (inputalter.value.charAt(i) < "0" || | ||
inputalter.value.charAt(i) > "9") { | |||
zahl = false; | |||
} | } | ||
} | } | ||
if (!zahl) { | if (!zahl) { | ||
alert("Gib eine Zahl ein"); | alert("Gib eine Zahl ein"); | ||
inputalter.focus(); | |||
return false; | return false; | ||
} | } | ||
Line 423: | Line 417: | ||
<button type="button" id="btn">Zur neuen Seite</button> | <button type="button" id="btn">Zur neuen Seite</button> | ||
<script> | <script> | ||
function | function laden() { | ||
// Adresse der Seite ist unter location.href verfügbar | // Adresse der Seite ist unter location.href verfügbar | ||
// hier wird der Besucher gleich auf die Seite | // hier wird der Besucher gleich auf die Seite | ||
Line 431: | Line 425: | ||
} | } | ||
document.getElementById("absatz").innerHTML = location.href; | document.getElementById("absatz").innerHTML = location.href; | ||
btn.onmouseover = | btn.onmouseover = laden; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 440: | Line 434: | ||
<body> | <body> | ||
<form method="GET" action="js.html"> | <form method="GET" action="js.html"> | ||
<input type="text" name=" | <input type="text" name="frage" placeholder="frag was"> | ||
<button type="submit">Abschicken</button> | <button type="submit">Abschicken</button> | ||
</form> | </form> | ||
<p id=" | <p id="absatz"></p> | ||
<script> | <script> | ||
"use strict"; | "use strict"; | ||
// für Formulare die mit GET-Methode abeschickt werden | // für Formulare die mit GET-Methode abeschickt werden | ||
// ruft mit search-Attribut Teil der URL | // ruft mit search-Attribut Teil der URL | ||
// mit Formularinhalten ab | // mit Formularinhalten ab | ||
let str = location.search; | let str = location.search; | ||
// dann wird mit substr() das Fragezeichen entfernt | // dann wird mit substr() das Fragezeichen entfernt | ||
Line 455: | Line 448: | ||
// das Fragezeichen steht immer an erster | // das Fragezeichen steht immer an erster | ||
// Stelle deshalb substr(1) | // Stelle deshalb substr(1) | ||
str = str.substr(1); | str = str.substr(1); | ||
// In der URL sind einzelne Suchwörter durch das &- | // In der URL sind einzelne Suchwörter durch das &- | ||
// Zeichen miteinander verbunden | // Zeichen miteinander verbunden | ||
// diese voneinander trennen => split()-Methode | // diese voneinander trennen => split()-Methode | ||
let arr = str.split('&'); | let arr = str.split('&'); | ||
for (let i = 0; i < arr.length; i++) { | for (let i = 0; i < arr.length; i++) { | ||
arr[i] = arr[i].split('='); | arr[i] = arr[i].split('='); | ||
} | } | ||
let | let inhalt = ""; | ||
for (let | for (let wert of arr) { | ||
inhalt += wert[0] + ": " + wert[1] + "<br>"; | |||
} | } | ||
document.getElementById(" | // decodeURIComponent wird benötigt um | ||
// zb das @ Zeichen richtig darzustellen | |||
document.getElementById("absatz").innerHTML = decodeURIComponent(inhalt); | |||
</script> | </script> | ||
</body> | </body> | ||
Line 488: | Line 481: | ||
"use strict"; | "use strict"; | ||
function | function tauschen() { | ||
document.images[0].src = "bild2.jpg"; | document.images[0].src = "bild2.jpg"; | ||
} | } | ||
btn.onclick = | btn.onclick = tauschen; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 502: | Line 495: | ||
<body> | <body> | ||
<div id="div"> | <div id="div"> | ||
<p id=" | <p id="absatz">Hier steht ein Absatz</p> | ||
</div> | </div> | ||
<button type="button" onclick=" | <button type="button" onclick="hintergrund()">Layout verändern</button> | ||
<script> | <script> | ||
function | function hintergrund() { | ||
document.getElementById(" | document.getElementById("absatz").style.background = "red"; | ||
document.getElementById(" | document.getElementById("absatz").style.fontSize = "30px"; | ||
document.getElementById(" | document.getElementById("absatz").style.color = "white"; | ||
document.getElementById(" | document.getElementById("absatz").style.width = "150px"; | ||
document.getElementById(" | document.getElementById("absatz").style.border = "3px solid blue"; | ||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</pre> | </pre> | ||
<blockquote> | |||
Quelle: JavaScript | |||
Programmieren für Einsteiger | |||
ISBN: 978-3-96645-016-4 | |||
</blockquote> |