Editing JavaScript 1 Document Objekt

==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

<pre>
<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>
</pre>

===Auf Inhalte des DOM-Baums zugreifen===
<pre>
<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>
</pre>

===Auf einzelne Elemente der Seite gezielt zugreifen===
<pre>
<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>
</pre>

===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:====
<pre>
<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>
</pre>

====Beispiel 2:====
<pre>
<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>
</pre>

====Beispiel 3:====

<pre>
<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>
</pre>

==Formulare mit JavaScript bearbeiten==

===Status einer Checkbox verändern===

<pre>
<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>
</pre>

===Optionsfeld auswählen===

<pre>
<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>
</pre>

===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'''====
<pre>
<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    
    */
    field1.onfocus = message;
  </script>
</body>
</html>
</pre>

====Beispiel für '''blur'''====

<pre>
<!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    
    */
    field1.onblur = message;
  </script>
</body>
</html>
</pre>

====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
<pre>
<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>
</pre>

====Spezielle Methoden für Formularelemente====
<pre>
<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>
</pre>

====Eingaben der Formularfelder überprüfen – Anwendungsbeispiel====
<pre>
<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>
</pre>

===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====
<pre>
<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>
</pre>

====location====
<pre>
<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>
</pre>

===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

<pre>
<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>
</pre>

===Style===
*CSS Styles verändern und setzen
*'''Syntax:''' element.style.cssPropery(backGround, fontSize,..)
<pre>
<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>
</pre>

<blockquote>
Quelle: JavaScript
Programmieren für Einsteiger
ISBN: 978-3-96645-016-4
</blockquote>