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 129: | Line 129: | ||
<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 154: | ||
<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 201: | ||
<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 232: | ||
</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 249: | ||
* 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 265: | ||
</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 278: | ||
* tritt die Fehlermeldung auf | * tritt die Fehlermeldung auf | ||
*/ | */ | ||
feld1.onblur = nachricht; | |||
</script> | </script> | ||
</body> | </body> | ||
Line 300: | Line 299: | ||
</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 325: | ||
<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 334: | ||
// 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 351: | ||
<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 361: | ||
</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 378: | ||
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 422: | ||
<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 430: | ||
} | } | ||
document.getElementById("absatz").innerHTML = location.href; | document.getElementById("absatz").innerHTML = location.href; | ||
btn.onmouseover = | btn.onmouseover = laden; | ||
</script> | </script> | ||
</body> | </body> | ||
Line 440: | Line 439: | ||
<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 453: | ||
// 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 486: | ||
"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 500: | ||
<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> |