JavaScript 1 Document Objekt

From Coders.Bay Wiki
Jump to navigation Jump to search

Das Document Objekt[edit]

  • 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[edit]

<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[edit]

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

Weitere Gestaltungsmöglichkeiten[edit]

  • .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:[edit]

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

Beispiel 2:[edit]

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

Beispiel 3:[edit]

<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 adress = 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 = adress;
  </script>
</body>
</html>

Formulare mit JavaScript bearbeiten[edit]

Status einer Checkbox verändern[edit]

<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[edit]

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

Events für Formulare[edit]

  • 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[edit]

<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="form"> 
    <input id="field1" value="Form Field 1">
  </form>
  <script>
    let isVisible = false;

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

Beispiel für blur[edit]

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

Weitere wichtige Events[edit]

  • 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="form"> 
    <input id="field1"> 
    <button type="button">Eingabe</button>
  </form>
  <script>
    function message() {
      alert("Buchstabe eingegeben: " + field1.value);
    } 
    /*    
    * reagiert auf Eingabe in das Input Feld    
    */
    field1.oninput = message;
  </script>
</body>
</html>

Spezielle Methoden für Formularelemente[edit]

<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Übungen</title>
</head>
<body>
  <form name="formular"> 
    <p><input id="field1" value="Formularfeld 1"> </p>
    <p><input id="field2" 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        
      field1.value = "";        
      field1.focus();    
    }    
    function fokus2() {        
      field2.value = "";        
      field2.focus();    
    }    
    btn1.onclick = fokus1;    
    btn2.onclick = fokus2;
  </script>
</body>
</html>

Eingaben der Formularfelder überprüfen – Anwendungsbeispiel[edit]

<body>
  <form id="form" action="evalData.html" method="GET" onsubmit="return eval()">
    <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="inputage">Alter</label> 
      <input id="inputage" name="age"> 
    </div> 
    <button type="submit">Absenden</button>
  </form>
  <script>
    function eval() {
      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 (inputage.value == "") {
        alert("Gib ein Alter ein");
        inputage.focus();
        return false;
      }
      let number = true;
      console.log(inputage.value.length);
      for (let i = 0; i < inputage.value.length; ++i) {
        if (inputage.value.charAt(i) < "0" ||
          inputage.value.charAt(i) > "9") {
          number= false;
        }
      }
      if (!zahl) {
        alert("Gib eine Zahl ein");
        inputage.focus();
        return false;
      }
      return true;
    }
  </script>
</body>

Vollständige Liste an vordefinierten Objekten in JS[edit]

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

Location[edit]

  • 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[edit]

<body>
  <p id="absatz"></p>
  <button type="button" id="btn">Zur neuen Seite</button>
  <script>
    function loadPage() { 
      // 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 = loadPage;
  </script>
</body>

location[edit]

<body>
  <form method="GET" action="js.html"> 
    <input type="text" name="question" placeholder="frag was"> 
    <button type="submit">Abschicken</button>
  </form>
  <p id="paragraph"></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 content = "";
    for (let value of arr) {
      content += value[0] + ": " + value[1] + "<br>";
    }  
    document.getElementById("paragraph").innerHTML = content;
  </script>
</body>

Images[edit]

  • 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 changeImage() {
      document.images[0].src = "bild2.jpg";
    }
    btn.onclick = changeImage;
  </script>
</body>

Style[edit]

  • CSS Styles verändern und setzen
  • Syntax: element.style.cssPropery(backGround, fontSize,..)
<body>
  <div id="div">
    <p id="paragraph">Hier steht ein Absatz</p>
  </div>
  <button type="button" onclick="background()">Layout verändern</button>
  <script>
    function background() {
      document.getElementById("paragraph").style.background = "red";
      document.getElementById("paragraph").style.fontSize = "30px";
      document.getElementById("paragraph").style.color = "white";
      document.getElementById("paragraph").style.width = "150px";
      document.getElementById("paragraph").style.border = "3px solid blue";
    }
  </script>
</body>
Retrieved from "http://wiki.streampy.at/index.php?title=JavaScript_1_Document_Objekt&oldid=2249"