Difference between revisions of "JavaScript 1 Document Objekt"

Revision as of 11:13, 16 May 2022

Das Document Objekt

Ist für die Erstellung von dynamischen Internetseiten enorm wichtig
Erlaubt es, auf alle einzelnen Bestandteile der Seite zuzugreifen
Erlaubt es, Funktionsweisen zu verändern bei Buttons oder Formulare
- Bsp.: document.write()

HTML-Struktur wird als DOM-Baum bezeichnet (Document Object Model -> Baumartige Struktur)
Ursprungselement = document-Element, enthält alle weiteren Bestandteile der Seite
Objekt document-Element = alle Bereiche, die innerhalb der <html> Tags stehen

<html>
  <head>
    <meta charset="UTF-8">
    <title>Übungen</title>
  </head>
  <body>
  <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <p>
      Absatz mit <i>einem kursiven Bereich</i>
      und einem <strong>fett</strong> gedruckten Wort
    </p>
    <script>
      "use strict";
      alert(document.body.firstElementChild.nextElementSibling.innerHTML);
      /*
      document.body => greift auf die Elemente im Body zu

      firstElementChild => bezieht sich immer auf das erste Kind-Element (h1)

      nextElementSibling => bezeichnet das nachfolgende Geschwister-Element (h2)

      innerHTML => greift auf Inhalt des angesprochenen Tags zu (Überschrift 2)

      Beispiel um das <i>-Tag anzusprechen:

      document.body.firstElementChild.nextElementSibling.nextElementSibling.firstElementChild
      */
    </script>
  </body>
</html>

Auf Inhalte des DOM-Baums zugreifen

<html>
  <head>
    <meta charset="UTF-8">
    <title>Übungen</title>
  </head>
  <body>
  <h1>Überschrift 1</h1>
    <h2>Überschrift 2</h2>
    <p>
      Absatz mit <i>einem kursiven Bereich</i>
      und einem <strong>fett</strong> gedruckten Wort
    </p>
    <script>
      "use strict";
      document.body.firstElementChild.nextElementSibling.innerHTML = "neue Überschrift";
      /*
      innerHTML ohne alert vorangestellt ändert den Inhalt des ausgewählten Tags =>
      Überschrift 2 ändert sich zu neue Überschrift

      in diesem Fall, da es nur Text ist, sollte man statt .innerHTML .innerText oder .textContent verwenden.
      */
    </script>
  </body>
</html>

Auf einzelne Elemente der Seite gezielt zugreifen

<html>
  <head>
    <meta charset="UTF-8">
    <title>Übungen</title>
  </head>
  <body>
  <h1 id="ueberschrift1"></h1>
    <h2 id="ueberschrift2"></h2>
    <p id="absatz"></p>
    <script>
      /*
      getElementById greift auf den Tag mit der entsprechenden ID zu
      */
      document.getElementById("ueberschrift1").innerText = "JavaScript ist cool";
      document.getElementById("ueberschrift2").innerText = "Seite mit generierten Inhalten";
      document.getElementById("absatz").innerHTML = "Hier steht ein Absatz mit einem" +
        " <strong>fett gedruckten</strong>Bereich.";
    </script>
  </body>
</html>

Weitere Gestaltungsmöglichkeiten

.getElementById(): Zugriff auf ein Element mit spezifischer ID
.getElementsByClassName(): Zugriff auf alle Elemente einer CSS Klasse (gibt ein Array-ähnliches Objekt zurück)
.getElementsByTagName(): Zugriff auf alle Elemente eines bestimmten HTML Tags (gibt ein Array-ähnliches Objekt zurück)
.querySelector(): kombiniert die Funktionalitäten von den oberen Methoden. Praktisch: bei Änderungen
- mit CSS-Klasse:.querySelector(".klassenName")
- mit ID:.querySelector("#idName")
- mit Tag:.querySelector("tagName")

Beispiel 1:

<html>
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body> <input id="eingabefeld">
  <script>
    // über value-Attribut lässt sich ein     
    // beliebiger Text in das Feld einfügen    
    document.getElementById("eingabefeld").value = "JavaScript Kurs";
  </script>
</body>
</html>

Beispiel 2:

<html>
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body> <input id="eingabefeld"> 
  <!-- onclick-Funktion aktiviert die JS Funktion --> 
  <button type="button" onclick="auslesen()">Weiter</button>
  <script>
    function auslesen() {
      let inhalt = document.getElementById("eingabefeld").value;
      alert(inhalt);
    }
  </script>
</body>
</html>

Beispiel 3:

<html>
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <p><a id="link"></a></p>
  <script>
    // Programm fordert User auf einen Link einzugeben    
    let adresse = prompt("Gib eine Linkadresse ein.");    
    // eingegebener Link wird als href-Attribut in den <a> Tag geschrieben    
    document.getElementById("link").href = adresse;   
    // eingegebener Link wird innerhalb der <a> Tags geschrieben   
    document.getElementById("link").innerHTML = adresse;
  </script>
</body>
</html>

Formulare mit JavaScript bearbeiten

Status einer Checkbox verändern

<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="formular"> 
    <input name="feld1" value="Formularfeld 1"> 
    <input name="feld2" value="Formularfeld 2"> 
    <input name="feld3" type="checkbox"> 
  </form>
  <script>
    // Navigation über DOM-Baum um die Checkbox zu aktivieren    
    // mit document.forms sind alle Formulare zugänglich, die auf der    
    // Seite enthalten sind    
    // .checked kann true oder false gesetzt werden    
    document.forms.formular.elements.feld3.checked = true; 
  </script>
</body>
</html>

Optionsfeld auswählen

<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="formular"> 
    <select id="auswahl">
      <option value="auswahl1">Wert 1</option>
      <option value="auswahl2">Wert 2</option>
      <option value="auswahl3">Wert 3</option>
    </select>
  </form>
  <script>
    // Möglichkeit 1 um entsprechendes Optionsfeld auszuwählen    
    auswahl.selectedIndex = 2;    
    // Möglichkeit 2    
    auswahl.options[2].selected = true;   
    // Möglichkeit 3    
    auswahl.value = "auswahl3";
  </script>
</body>
</html>

Events für Formulare

Wenn ein Formularfeld angesteuert wird, erhält es Fokus, dann tritt das focus-event ein.
Verliert das Formularfeld diesen Fokus (man wechselt zB. auf eine anders Feld), dann tritt das blur-event ein
Beide Events sind sehr wichtig für die Barrierefreiheit einer Website

Beispiel für focus

<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="formular"> 
    <input id="feld1" value="Formularfeld 1">
  </form>
  <script>
    let angezeigt = false;

    function nachricht() {
      if (!angezeigt) {
        alert("Gib deinen Namen ein");
        angezeigt = true;
      }
    }
    /*
    * Wenn ein Event auf Seite fokussiert wird, 
    * tritt das focus-Event ein    
    * Wenn Fokus entfernt wird, kommt es zum blur-Event    
    */
    feld1.onfocus = nachricht;
  </script>
</body>
</html>

Beispiel für blur

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="formular"> <input id="feld1"> 
    <button type="button">Eingabe</button>
  </form>
  <script>
    function nachricht() {
      if (feld1.value == "") {
        alert("Gib deinen Namen ein");
      }
    } 
    /*    
    * Wenn der Input verlassen wird    
    * tritt die Fehlermeldung auf    
    */
    feld1.onblur = nachricht;
  </script>
</body>
</html>

Weitere wichtige Events

cut
copy
paste
- Werden ausgelöst wenn Anwender Inhalt des Feldes ausschneiden, kopieren oder einfügen möchte
submit
- Wird ausgelöst, wenn submit-Button gedrückt wird um Formular abzuschicken
- Häufig im Einsatz um Formular zu validieren vor dem abschicken

<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="formular"> 
    <input id="feld1"> 
    <button type="button">Eingabe</button>
  </form>
  <script>
    function nachricht() {
      alert("Buchstabe eingegeben: " + feld1.value);
    } 
    /*    
    * reagiert auf Eingabe in das Input Feld    
    */
    feld1.oninput = nachricht;
  </script>
</body>
</html>

Spezielle Methoden für Formularelemente

<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="formular"> 
    <p><input id="feld1" value="Formularfeld 1"> </p>
    <p><input id="feld2" value="Formularfeld 2"></p> 
    <button id="btn1" type="button">Feld 1 Fokus</button> 
    <button id="btn2" type="button">Feld 2 Fokus</button>
  </form>
  <script>
    function fokus1() {
      // leert zuerst das Input Feld und 
      //setzt dann den Fokus darauf        
      feld1.value = "";        
      feld1.focus();    
    }    
    function fokus2() {        
      feld2.value = "";        
      feld2.focus();    
    }    
    btn1.onclick = fokus1;    
    btn2.onclick = fokus2;
  </script>
</body>
</html>

Eingaben der Formularfelder überprüfen – Anwendungsbeispiel

<body>
  <form id="formular" action="fertig.html" method="GET" onsubmit="return auswerten()">
    <div class="form-row"> 
      <label for="inputname">Name</label> 
      <input id="inputname" name="name"> 
    </div>
    <div class="form-row"> 
      <label for="inputmail">E-Mail</label> 
      <input id="inputmail" name="mail"> 
    </div>
    <div class="form-row"> 
      <label for="inputalter">Alter</label> 
      <input id="inputalter" name="alter"> 
    </div> 
    <button type="submit">Absenden</button>
  </form>
  <script>
    function auswerten() {
      if (inputname.value == "") {
        alert("Gib einen Namen ein");
        inputname.focus();
        return false;
      }
      if (!inputmail.value.includes('@')) {
        alert("Gib eine Mailadresse ein");
        inputmail.focus();
        return false;
      }
      if (inputalter.value == "") {
        alert("Gib ein Alter ein");
        inputalter.focus();
        return false;
      }
      let zahl = true;
      console.log(inputalter.value.length);
      for (let i = 0; i < inputalter.value.length; ++i) {
        if (inputalter.value.charAt(i) < "0" ||
          inputalter.value.charAt(i) > "9") {
          zahl = false;
        }
      }
      if (!zahl) {
        alert("Gib eine Zahl ein");
        inputalter.focus();
        return false;
      }
      return true;
    }
  </script>
</body>

Vollständige Liste an vordefinierten Objekten in JS

https://www.w3schools.com/jsref/

Location

Das location-Objekt ist vom document-Objekt abgeleitet
- vollständige Bezeichnung deshalb: window.document.location
- der Zusatz window ist aber nicht notwendig
Das Objekt nimmt die URL der Seite auf und ermöglicht es, sie zu beeinflussen
- Beispiele:
  - location.host => so lässt sich der Hostname abrufen
  - location.protocol => das verwendete Protokoll
  - reload() => lädt die Seite neu

location.href

<body>
  <p id="absatz"></p>
  <button type="button" id="btn">Zur neuen Seite</button>
  <script>
    function laden() { 
      // Adresse der Seite ist unter location.href verfügbar        
      // hier wird der Besucher gleich auf die Seite        
      // weitergeleitet ohne das dieser einen Link klickt        
      // es reicht mit der Maus über den Button zu fahren        
      location.href = "stop.html";    
    }    
    document.getElementById("absatz").innerHTML = location.href;    
    btn.onmouseover = laden;
  </script>
</body>

location

<body>
  <form method="GET" action="js.html"> 
    <input type="text" name="frage" placeholder="frag was"> 
    <button type="submit">Abschicken</button>
  </form>
  <p id="absatz"></p>
  <script>
    "use strict"; 
    // für Formulare die mit GET-Methode abeschickt werden    
    // ruft mit search-Attribut Teil der URL 
    // mit Formularinhalten ab    
    let str = location.search;    
    // dann wird mit substr() das Fragezeichen entfernt 
    // das zu beginn der Zeichenkette steht    
    // das Fragezeichen steht immer an erster 
    // Stelle deshalb substr(1) 
    str = str.substr(1); 
    // In der URL sind einzelne Suchwörter durch das &-
    // Zeichen miteinander verbunden
    // diese voneinander trennen => split()-Methode 
    let arr = str.split('&');
    for (let i = 0; i < arr.length; i++) {
      arr[i] = arr[i].split('=');
    }
    let inhalt = "";
    for (let wert of arr) {
      inhalt += wert[0] + ": " + wert[1] + "<br>";
    } 
    // decodeURIComponent wird benötigt um 
    // zb das @ Zeichen richtig darzustellen    
    document.getElementById("absatz").innerHTML = decodeURIComponent(inhalt);
  </script>
</body>

Images

Informationen über enthaltene Bilder abrufen oder verändern
document.images => enthält alle Bilder, die auf der Seite enthalten sind
document.images[0] => auf einzelne Bilder zugreifen (Position im Array angeben)
document.images.length => gibt an wie viele Bilder auf der Seite sind
Höhe und Breite auslesen mit: heigth und length

<body>
  <img src="beispiel.jpg">
  <button type="button" id="btn">Bild tauschen</button>
  <script>
    "use strict";

    function tauschen() {
      document.images[0].src = "bild2.jpg";
    }
    btn.onclick = tauschen;
  </script>
</body>

Style

CSS Styles verändern und setzen
Syntax: element.style.cssPropery(backGround, fontSize,..)

<body>
  <div id="div">
    <p id="absatz">Hier steht ein Absatz</p>
  </div>
  <button type="button" onclick="hintergrund()">Layout verändern</button>
  <script>
    function hintergrund() {
      document.getElementById("absatz").style.background = "red";
      document.getElementById("absatz").style.fontSize = "30px";
      document.getElementById("absatz").style.color = "white";
      document.getElementById("absatz").style.width = "150px";
      document.getElementById("absatz").style.border = "3px solid blue";
    }
  </script>
</body>

Quelle: JavaScript Programmieren für Einsteiger ISBN: 978-3-96645-016-4

Difference between revisions of "JavaScript 1 Document Objekt"

Revision as of 11:13, 16 May 2022

Contents

Das Document Objekt

Auf Inhalte des DOM-Baums zugreifen

Auf einzelne Elemente der Seite gezielt zugreifen

Weitere Gestaltungsmöglichkeiten

Beispiel 1:

Beispiel 2:

Beispiel 3:

Formulare mit JavaScript bearbeiten

Status einer Checkbox verändern

Optionsfeld auswählen

Events für Formulare

Beispiel für focus

Beispiel für blur

Weitere wichtige Events

Spezielle Methoden für Formularelemente

Eingaben der Formularfelder überprüfen – Anwendungsbeispiel

Vollständige Liste an vordefinierten Objekten in JS

Location

location.href

location

Images

Style

Navigation menu

Search