Javascript

Wo wird JavaScript verwendet

Da JS - JavaScript eine Programmiersprache ist, welche in Html eingebettet ist,
läuft sie im Interpreter des Browsers.
Man kann also kleine Programme mitten im Text verwenden,
um etwas zu berechnen.
Hier, nach Aufruf dieser Seite, die aktuelle Uhrzeit des Browsers
nach ca. 10 Sekunden.
Danach wird Zeit im Intervall von 10 sec. automatisch aktualisiert.

Um im Firefox eine Console zu erhalten, kann man CTRL-Shift-J eingeben.
Über CTRL-Shift-K oder F12 erhalte ich verschieden Tools,
unter anderem auch eine Konsole. Um sie vernünftig benutzen zu können,
müssen unter Umständen Browser Add-Ons - Erweiterungen,
de-aktiviert werden.

Sorry, JS ist wohl blockiert oder 10.000 ms sind noch nicht um…

Der Code dafür sieht wie folgt aus:

<p id="zeit">
  Sorry, JS ist wohl blockiert oder 30.000 ms sind noch nicht um…
</p>
<script>
  function datumUhrzeit()
  { document.getElementById("zeit").innerText = new Date()
      .toLocaleString('de-DE',{weekday:"long",month:"long",
       day:"numeric",hour:"2-digit",minute:"2-digit"});
  }

  setInterval(datumUhrzeit, 10000);
</script>

Ich hoffe man kann gut sehen, das der Inhalt des Paragraphs mit der ID "zeit"
vollständig ersetzt wird, durch die Uhrzeit des Browsers.

Im obigen Beispiel habe ich die leichteste Methode verwendet.
Also den Inhalte eines  <p id="zeit"">Paragraphens</p>
via Java Script ausgetauscht.
Für eine leichte Identifikation habe ich dem Paragraphen eine eindeutige ID,
hier "zeit" gegeben.
Prinzipiell lässt sich so der Inhalt von jeden Objekt ändern.

Da es genug Tutorials gibt (siehe Quellen),
beschreibe ich nur ein paar Kleinigkeiten.

Zum Anfang

unterschiedliche Art Inhalte auszugeben

Statt das Tag <p> verwende ich bevorzugt <div>
Hier habe ich den Vorteil jeden Inhalt einzufügen.
Da es verschiedene Möglichkeiten der Ausgabe in <div> gibt,
habe ich mal die verschiedenen Möglichkeiten gegenüber gestellt.

Eine Style-Definition im Header-Bereich sieht wie folgt aus:

<style>
  div.inA  { white-space: pre; background-color: #e0e0e0; }
  div.inB  { background-color: #f0f0f0;}
</style>

Der unterschiedliche Grauton ist nur zum besseren Unterscheiden.

.innerHTML

Verwende ich .innerHTML und <div class="inA" id="out1">
kommt folgender Inhalt heraus.
Html wird offensichtlich interpretiert siehe   .
Nicht sichtbarer Steuerzeichen wie z.B. Return, Tab oder Space
werden ebenso angewendet.
Zeichenketten wie \n oder \x3a werden
in Steuerzeichen umgewandelt und angewendet.
\n\r wirkt nicht anders als \n.

Verwende ich .innerHTML und <div class="inB" id="out2">
fehlt z.B. der Umbruch, da \n oder ¶ ein nicht sichtbares Steuerzeichen ist.
Html Tags wie z.B. <br> oder   werden ausgeführt.
Also, Zeichenketten wie \n werden nicht angewendet, da sie nicht sichtbar sind.
Im Gegensatz zu \x3a, welches in ein sichtbares Zeichen umgewandelt wird.
Wie bei Html üblich, verschwindet Tab oder Space.

.innerText

Verwende ich .innerText und <div class="inA" id="out3"> kommt folgender Inhalt heraus.
Html-Tags werden nicht interpretiert und als Text angezeigt.
Zeichenketten wie \n oder \x3a werden umgewandelt und
wie nicht sichtbarer Steuerzeichen wie z.B. Return oder Tab angewendet.
\n\r wirkt wie zum nächsten Zeilanfang + nächste Zeile. Also anders als \n alleine.

Verwende ich .innerText und <div class="inB" id="out4">
wird Return, \n, \r oder \x3a.zwar angewendet,
aber unsichtbare Steuerzeichen wie z.B. Tab oder Space werden nicht angewendet.
Ebenso werden Html-Tags nicht interpretiert und als Text angezeigt.

.textContent

Verwende ich .textContent und <div class="inA" id="out5"> hat Tab offensichtlich eine Wirkung.
Das unsichtbare ¶ scheint allerdings nicht zu wirken.
Es wirkt aber \n oder \r\r, allerdings gleich.

Verwende ich .textContent und <div class="inB" id="out6"> wird z.B. \x3a angewendet,
aber alle unsichtbaren Zeichen werden entfernt,
sodass der Umbruch über die maximal erlaubte Breite stattfindet.

Der code sieht wie folgt aus:

<p>
  …
  <div class="inB" id="out6"></div>
</p>
<p>
  Der code sieht wie folgt aus:
</p>
<script>
  let text;
  text  = '<style> #bl { color: blue;} </style> \n';
  text += '  <span id="bl">x</span>  geht nach rechts ' + String.fromCharCode(13);
  text += '␣␣␣␣und &emsp;<span id="bl">y</span>&emsp; nach unten \n';
  text += '<br> und eine kleine Zeichnung\x3a';
  text += '␣<svg width="40" height="40" xmlns="http://supercalifragilis.de">\n\r';
  text += '␣␣<circle cx="20"  cy="20" r="18" fill="ivory" stroke="blue" />\n';
  text += '  <text x="20" y="24" font-size="12" text-anchor="middle" fill="black">rund</text>\n';
  text += '␣␣␣␣␣</svg>';
  document.getElementById("out1").innerHTML = text;
  document.getElementById("out2").innerHTML = text;
  document.getElementById("out3").innerText = text;
  document.getElementById("out4").innerText = text;
  document.getElementById("out5").textContent = text;
  document.getElementById("out6").textContent = text;
</script>

Zum Anfang

Aus einem Array etwas entfernen oder hinzufügen

Zunächst erzeuge ich ein Array von Objekten und gebe dieses aus.

Der Code dafür sieht wie folgt aus

  <label for="times"> Aktion mit welche Zeile:  </label> 
  <input type="number" id="times" name="times" min="0" max="10" value="0" style="width: 40px;"/>

  <input type="button" id="remove" value="entfernen"/>
  <input type="button" id="duplicate" value="duplizieren"/>

<p class="answer">
</p>

<script>
  let issues = [];
  const knob0 = document.querySelector("#times");
  const knob1 = document.querySelector("#remove");
  const knob2 = document.querySelector("#duplicate");   // # für eine ID
  const ans01 = document.querySelector(".answer");      // . für eine Klasse
  
  knob1.addEventListener("click", remRow );
  knob2.addEventListener("click", dupRow );
  init();
  display();

  function init() 
  {  let list = '{"set":['
  + '{"query":"3 Gunas",  "reply":[ "sattva",  "tamas", "rajas" ] },'
  + '{"query":"3 Körper", "reply":[ "physisch","astral","kausal"] },'
  …
  + '{"query":"8 Stufen des Raja Yogas", "reply":["Yama","Niyama","Asana","…"]}'
  + ']}';
     let data = JSON.parse( list ), x, row;
     issues = data.set;
     knob0.max = issues.length -1;
  }

  function display()
  {  let text = "", x;
     for ( x = 0; x < issues.length; x++) 
     {  text += x +": " + issues[x].query + " " + issues[x].reply + "\n";
     }
     text += '\nvalue:' + knob0.value + '  max:' + knob0.max;
     ans01.innerText = text;
  }

  function remRow()
  {  row = knob0.value;

     if (issues.length == 1)
     {  ans01.innerText = "fertig";
       return;
     }
     console.log( row + ' removed' );
     issues.splice( row, 1 );                    // remove one row only
     knob0.max = issues.length -1;

     if( row > issues.length -1 )
     {  knob0.value = issues.length -1;
     }

     display();
  }

  function dupRow()
  {  row = knob0.value;

     if (issues.length < 1)
     {  ans01.innerText = "fertig";
       return;
     }

     console.log("duplicate " + row );
     issues.push( issues[ row ] );               // append one line
     display();
  }
</script>

Zum Anfang

Statt Checkbox → Schiebeschalter

Eine Checkbox     ist relativ einfach.
Soll es jedoch ein Schiebeschalter     werden,
ist das erstaunlich aufwändig.
3. Checkbox

Zunächst muß im Style-Bereich etwas definiert werden.

.switch                 { position: relative;  display: inline-block;  width: 48px;  height: 22px; } 

.switch input           { opacity: 0;  width: 0;  height: 0; }   /* Hide default HTML checkbox */ 

.slider                 { position: absolute; cursor: pointer;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: #ccc;  -webkit-transition: .4s;  transition: .4s; } 

.slider:before          { position: absolute;  content: "";  height: 16px;  width: 16px;  left: 2px;  bottom: 3px;  background-color: white;  -webkit-transition: .4s;  transition: .4s; } 

input:checked + .slider { background-color: #2196F3; } 

input:focus + .slider   { box-shadow: 0 0 1px #2196F3; } 

input:checked + .slider:before {  -webkit-transform: translateX(26px);  -ms-transform: translateX(26px);  transform: translateX(26px); } 

.slider.round           { border-radius: 20px; }                 /* Rounded sliders */ 

.slider.round:before    { border-radius: 50%; } 

 

Im HTML-Bereich oder <body> kann dann folgendes geschrieben werden.

<p>
  Eine Checkbox 
  &nbsp; <input type="checkbox" id="chk1" checked /> &nbsp; 
  ist relativ einfach. <br>
  Soll es jedoch ein Schiebeschalter &nbsp;
    <label class="switch">
    <input type="checkbox" id="chk2"> <span class="slider round"></span> 
  </label>
  &nbsp; werden, <br>
  ist das erstaunlich aufwändig <br>
  <label>         <!-- style="display:none"  für box und Text ohne Platzverbrauch -->
    <input type="checkbox" id="chk3" hidden />
                  <!-- hidden  versteckt box und text, reserviert den Platz -->
    3. Checkbox
  </label>
</p>
<pre id="pre1"></pre>

<script>
  const ckBox1 = document.querySelector("#chk1");
  const ckBox2 = document.querySelector("#chk2");
  const ckBox3 = document.querySelector("#chk3");
  const text1  = document.querySelector("#pre1");

  ckBox1.addEventListener("click", box1 );
  ckBox2.addEventListener("click", box2 );

  function box1()
  { if ( true == ckBox1.checked ) 
    { ckBox2.checked = false;      // only 1 or 2 active
      ckBox3.indeterminate = true
      ckBox3.hidden = false;       // ckBox3.style.visibility = "visible"
    }
    else
    { ckBox3.indeterminate = false 
    }
    text1.innerText = '1:'+ ckBox1.checked +'  2:'+ ckBox2.checked +'  3:'
    + ckBox3.checked +' hidden:'+ ckBox3.hidden +'  indeterminate:'+ ckBox3.indeterminate;
  }

  function box2()
  { if ( true == ckBox2.checked ) 
    { ckBox1.checked = false; 
      ckBox3.indeterminate = true; 
      ckBox3.hidden = true;        // ckBox3.style.visibility = "hidden"
    }
     else
    { ckBox3.indeterminate = false 
    }
    text1.innerText = '1:'+ ckBox1.checked +'  2:'+ ckBox2.checked +'  3:'
    + ckBox3.checked +' hidden:'+ ckBox3.hidden +'  indeterminate:'+ ckBox3.indeterminate;
  }
</script>

Zum Anfang