Kleiner JavaScript Kurs

Exkurs HTML Grundlagen

Mit der Seitenbeschreibungs-Sprache HTML (HyperText Markup Language) werden Internetseiten beschrieben. HTML wurde 1990 vom Web-Gründer Tim Berners-Lee entwickelt. Seitdem wird HTML stetig weiterentwickelt. Die aktuelle Version ist HTML 5.
HTML Seiten bestehen aus einem head (Kopf, mit Definitionen zur aktuellen Seite z.B. Titel, Metainformationen, usw.) und einem body ("Seitenkörper" mit den Elementen der Seite wie Text, Bilder, Links, Tabellen, usw.). Hier ein "Grundgerüst" einer HTML Seite:


<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Seitentitel</title>


    </head>
    <body>
        Inhalt der Seite z.B. Text, Bilder, Links, Tabellen, usw.


    </body>
</html>

Kommentare im html - Code:

<!-- dieser Kommentar wird vom Browser ignoriert -->

Die wichtigsten HTML-Tags im head


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>

Die wichtigsten HTML-Tags im body


Seitenkopf und -fuß

<header>
    <img src="images/banner.gif" alt="logo">
    <h1>Seiten - Überschrift</h1>
</header>

<footer>
     <hr>
     <a href="impressum.html">Kontakt</a>
     <p>© Ulrich Mingram</p>
</footer>

Navigation / Menü

<nav>
    <ul>
      <li><a href="#link_1.html">Menüpunkt 1</a></li>
      <li><a href="#link_2.html">Menüpunkt 2</a></li>
      <li><a href="#link_3.html">Menüpunkt 3</a></li>
    </ul>
  </nav>

Seiteninhalt

Vor HTML 5 wurden Intrernetseiten meist mit div - Elementen (div - Bereich) gegliedert, wobei die Elemente meist für die Formatierung eine id oder class bekamen: 
<div id="inhalt">
    <h1>Überschrift des Blocks</h1>
    <p>weiterer Inhalt</p>
</div>
Übersichtlicher ist es, die neuen HTML 5 Elemente main, article und section zu verwenden: 
<main>
  <article>
    <h1>Überschrift des Artikels</h1>
    <p>weitere Inhalt</p>
    ... mehr Inhalt
  </article>
  <section>
    <p>ein section - Bereich mit Inhalt</p>
  </section>
 </main>
Achtung: Da die Internetexplorer 10 und 11 das main-Element nicht kennen, benötigen sie die zusätzliche CSS-Angabe main {display: block;}, um es richtig darzustellen.
Weitere HTML Inhaltselemente (Aufzählungen, Links, Bilder, Tabellen, ...): 
<!-- Nummerierte Aufzählung (ordered list) -->
<ol>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
</ol>
<!-- Link-->
<a href="https://ulli.mingram.net">Ulli's Homepage</a>
<!-- Zeilenumbruch (neue Zeile)-->
<br>
<!-- Bilder-->
<img src="images/schatz.gif" width="100" height="100" alt="Schatz">
<!-- Linie-->
<hr>
<!-- Tabelle-->
<table>
  <tr>
    <th>Raum 11</th>
    <th>Raum NT2</th>
    <th>Tagungsraum</th>
  </tr>
  <tr>
    <td>28 Schüler</td>
    <td>18 Schüler</td>
    <td>8 Personen</td>
   </tr>
   <tr>
     <td>Tafel / Overheadprojektor</td>
     <td>Beamer / Pinwand</td>
     <td>Beamer / Flipchart</td>
   </tr>
</table>

Formular- / Steuerelemente (Button, Input, ...):

1. type="button"

<body>
  <input type="button" id="typeButton" value="Button, input-Tag">
  <button id="buttonTag" value="Button, button-Tag">Button, button-Tag</button>
  <p id="ausgabeButton"></p>
</body>
<script>
  var eingabeButton=document.getElementById("typeButton");
  var eingabeButton1=document.getElementById("buttonTag");
  var ausgabeButton=document.getElementById("ausgabeButton");
  eingabeButton.addEventListener("click", ausgabefeldButton);
  eingabeButton1.addEventListener("click", ausgabefeldButton);
  function ausgabefeldButton(event){
    ausgabeButton.innerHTML=event.currentTarget.value;
  }
</script>


Buttons können mit dem input-Tag
<input type="button">
oder mit dem button-Tag
<button></button>
erstellt werden.

Zum Ausprobieren mit eventListener "click"

2. type="text" 

<body>
  <input type="text" id="typeText" value="Name">
  <p id="ausgabeText"></p>
</body>
<script>
  var eingabe=document.getElementById("typeText");
  var ausgabe=document.getElementById("ausgabeText");
  eingabe.addEventListener("change", ausgabefeld);
  function ausgabefeld(){
    ausgabe.innerHTML=eingabe.value;
  }
</script>


Eingabefeld für Text- und Zahleneingaben; bei Zahl Umwandlung mit parseFloat() (Zahl mit Nachkommastellen) oder parseInt() (Ganzzahl).


Zum Ausprobieren mit eventListener "change"

3. type="email", type="password", type="url", type="tel" 

<body>
  <input type="email" id="typeEmail" placeholder="e-Mail eingeben">
  <input type="password" id="typePW" placeholder="Passwort eingeben">
  <input type="url" id="typeURL" placeholder="URL eingeben">
  <input type="tel" id="typeTel" placeholder="Telefonnummer eingeben">
  <p id="ausgabeEmail"></p>
</body>
<script>
  var eingabeEmail=document.getElementById("typeEmail");
  var eingabePW=document.getElementById("typePW");
  var eingabeURL=document.getElementById("typeURL");
  var eingabeTel=document.getElementById("typeTel");
  var ausgabeEmail=document.getElementById("ausgabeEmail");
  eingabeEmail.addEventListener("change", ausgabefeldEmail);
  eingabePW.addEventListener("change", ausgabefeldEmail);
  eingabeURL.addEventListener("change", ausgabefeldEmail);
  eingabeTel.addEventListener("change", ausgabefeldEmail);
  function ausgabefeldEmail(event){
    ausgabeEmail.innerHTML=event.currentTarget.value;
  }
</script>


Eingabefelder für eMail Adressen, Passwörter, Internet - Adressen und Telefonnummern. Ein eingebauter Plausibilitätscheck färbt die Eingabefelder bei falscher Eingabe rot. Bei Mobilgeräten (Smartphone / Tablet werden für die Eingabe die passenden Tastaturlayouts eingeblendet.


Zum Ausprobieren mit eventListener "change"

4. type="number" 

<body>
  <input type="number" id="typeNumber" value="20">
  <p id="ausgabeNumber"></p>
</body>
<script>
  var eingabeNumber=document.getElementById("typeNumber");
  var ausgabeNumber=document.getElementById("ausgabeNumber");
  eingabeNumber.addEventListener("change", ausgabefeldNumber);
  function ausgabefeldNumber(){
    ausgabeNumber.innerHTML=eingabeNumber.value;
  }
</script>


Eingabefeld für Zahlen; als Attribute können Minimal-, Maximalwert und Schrittweite z.B. min="5" max="100" step="2"eingegeben werden.


Zum Ausprobieren mit eventListener "change"

5. type="range" 

<body>
  <input type="range" id="typeRange" min="-10" max="10">
  <p id="ausgabeRange"></p>
</body>
<script>
  var eingabeRange=document.getElementById("typeRange");
  var ausgabeRange=document.getElementById("ausgabeRange");
  eingabeRange.addEventListener("change", ausgabefeldRange);
  function ausgabefeldRange(){
    ausgabeRange.innerHTML=eingabeRange.value;
  }
</script>


Schieberegler für Zahlen; als Attribute können Minimal-, Maximalwert und Schrittweite z.B. min="-10" max="10" step="2"eingegeben werden.


Zum Ausprobieren mit eventListener "change"

6. type="checkbox" 

<body>
  <input type="checkbox" id="typeCheck" checked="true">
  <p id="ausgabeCheck"></p>
</body>
<script>
  var eingabeCheck=document.getElementById("typeCheck");
  var ausgabeCheck=document.getElementById("ausgabeCheck");
  eingabeCheck.addEventListener("change", ausgabefeldCheck);
  function ausgabefeldCheck(){
    ausgabeCheck.innerHTML=eingabeCheck.checked;
  }
</script>


Checkbox für ja/nein Angaben; Voreinstellung z.B. checked="true".


Zum Ausprobieren mit eventListener "change"

7. type="radio" 

<body>
  <input type="radio" id="radio1" name="Zahlmethode" value="Mastercard">
  <label> Mastercard</label> 
  <input type="radio" id="radio2" name="Zahlmethode" value="Visa" checked="true">
  <label> Visa</label>
  <input type="radio" id="radio3" name="Zahlmethode" value="AmericanExpress">
  <label> American Express</label>
  <p id="ausgabeRadio"></p>
</body>
<script>
  var eingabeRadio=document.getElementsByName("Zahlmethode");
  var ausgabeRadio=document.getElementById("ausgabeRadio");
  for(var i=0; i<eingabeRadio.length; i++){
    eingabeRadio[i].addEventListener("change", ausgabefeldRadio);
  }
  function ausgabefeldRadio(){
    for(var j=0; j<eingabeRadio.length; j++){
      if(eingabeRadio[j].checked){
        ausgabeRadio.innerHTML=eingabeRadio[j].value;
      }
    }
  }
</script>


Nur ein Radiobutton aus der Gruppe name="Zahlmethode" kann markiert werden. Bei Verwendung von

document.getElementsByName("Zahlmethode")
entsteht ein Array, dass mit einer for-Schleife ausgelesen werden kann

Zum Ausprobieren mit eventListener "change"

8. type="color" 

<body>
  <input type="color" id="typeColor" value="#ff0000">
  <p id="ausgabeColor"></p>
</body>
<script>
  var eingabeColor=document.getElementById("typeColor");
  var ausgabeColor=document.getElementById("ausgabeColor");
  eingabeColor.addEventListener("change", ausgabefeldColor);
  function ausgabefeldColor(){
    ausgabeColor.innerHTML=eingabeColor.value;
  }
</script>


Colorpicker; Startwert mitvalue="#ff0000" (als Hexadezimalzahl / RGB - Wert). .value liefert den RGB - Hexwert der ausgewählten Farbe


Zum Ausprobieren mit eventListener "change"

9. type="date", type="time" 

<body>
      <input type="date" id="typeDate">
      <p id="ausgabeDate"></p>
    </body>
    <script>
      var eingabeDate=document.getElementById("typeDate");
      var ausgabeDate=document.getElementById("ausgabeDate");
      eingabeDate.addEventListener("change", ausgabefeldDate);
      function ausgabefeldDate(){
        ausgabeDate.innerHTML=eingabeDate.value;
      }
    </script>
Weitere type Angaben: type = "datetime-local" type = "week" type = "month"


Eingabe bzw. Auswahl von Datum und / oder Uhrzeit


Zum Ausprobieren mit eventListener "change"

10. type="file"

<body>
  <input type="file" id="typeFile" 
         multiple="true" accept=".html, .js">
  <p id="ausgabeFile"></p>
</body>
<script>
  var eingabeFile=document.getElementById("typeFile");
  var ausgabeFile=document.getElementById("ausgabeFile");
  eingabeFile.addEventListener("change", ausgabefeldFile);
  function ausgabefeldFile(){
    var dateien= eingabeFile.files;
    for(var i=0; i<dateien.length; i++){
      if(i==0) {ausgabeFile.innerHTML=dateien[i].name + "<br>";} 
      else{ausgabeFile.innerHTML+=dateien[i].name + "<br>";}
    }
  }
</script>


Auswahl einer oder mehrerer (multiple="true") Dateien z.B. zum Upload, oder zur Bearbeitung.
.files liefert ein Array mit den ausgewählten Dateien, .files[i].name die einzelnen Dateinamen.


Zum Ausprobieren mit eventListener "change"

Auswahllisten, DropDown Felder

<body>
  <select id="dropdown">
    <option value="Marke 1">VW</option>
    <option value="Marke 2">Opel</option>
    <option value="Marke 3">BMW</option>
    <option value="Marke 4">Mercedes</option>
  </select>
  <p id="ausgabeSelect"></p>
</body>
<script>
  var eingabeSelect=document.getElementById("dropdown");
  var ausgabeSelect=document.getElementById("ausgabeSelect");
  eingabeSelect.addEventListener("change", ausgabefeldSelect);
  function ausgabefeldSelect(){ 
    ausgabeSelect.innerHTML="value="+eingabeSelect.value+"<br>";
    var index=eingabeSelect.selectedIndex;
    ausgabeSelect.innerHTML+="Index="+index+"<br>";
    ausgabeSelect.innerHTML+="Text="+eingabeSelect.options[index].text+"<br>";
  }
</script>


DropDownListe zur Auswahl einer oder mehrerer (multiple=multiple") Einträge.


Zum Ausprobieren mit eventListener "change"