Tech-Ecke / Programmieren / JavaScript + HTML

 

Diese Seite hat weder dem Anspruch das Programmieren in JavaScript und HTML zu vermitteln, noch eine Übersicht aller grundlegenden Befehle und Syntax aufzuzeigen. Es handelt sich vielmehr um einen digitaler Schmierzettel, mit einigen Code-Beispielen für meinen persönlichen Gebrauch. Wer sich dennoch hier her verirrt hat und etwas davon gebrauchen kann darf sich natürlich gerne bedienen :-) 



Seiteninhalt:

HTML

JavaScript


 

  HTML

Aufbau einer HTML-Seite

Wie schon einleitend erwähnt ist diese Seite nur ein digitaler Schmierzettel für meine persönlichen und vor allem bescheidenen Zwecke. Ein der besten Anlaufstellen in Sachen HTML ist SelfHTML, bei der ich mich nunmehr schon seit fast 20 Jahren immer wieder gerne bediene.
 
  <html lang="de">
<head>
   <title>Mein Seitenname</title>
</head>
<body>
   <p>Hier steht dann halt en bissel Krams...</p>
</body>
</html>


 

Redirection - Weiter- bzw. Umleiten einer HTML-Seite

Die Anweisung hierzu wird im "Head" platziert und kann zu einer anderen Seite auf dem Server oder wie im Beispiel auf eine anderen Internetadresse zeigen.
Das Ganze lässt sich Zeitverzögert, in Sekunden definieren. Die "2;" im Beispiel veranlasst den Browser 2 Sekunden zu warten bevor weitergeleitet wird. Beim Setzen von "0;" wird unmittelbar, also ohne Zeitverzögerung weitergeleitet.
 
  <head>
   <meta http-equiv="refresh" content="2; URL=http://www.tech-eche.de/">
</head>
 

Indexierung bei Suchmaschinen unterbinden

Möchte man nicht dass eine Seite von Suchmaschinen erfasst wird, so trägt man im "Head" folgende Zeile ein.
 
  <head>
   <meta name="robots" content="noindex">
</head>

 

Formularelemente

<input type="text" id="TextFeld" size="10">
   
<input type="password" id="pwd" size="10">
   
<input type="number" id="zahl" value="20" size="7"> <!-- Chrome: style="width: 90px;") -->
   
<input type="button" value="Klick mich" onClick="MeinScript()">
   
<button type="button" onclick="MeinScript()">Klick mich</button>
   
Klick mich <p><input type="checkbox" OnClick="MeinScript()">Klick mich</p>
   
AB <p>
  <input type="radio" name="RG" value="a" checked>B
  <input type="radio" name="RG" value="b">B
</p>
   
<select id="Auswahl">
  <option value="a">A</option>
  <option value="b">B</option>
</select>
   

Werden Formularelemente in einem Formular <form></form> zusammengefasst, so können die Eingaben per Button mit type="submit" als URL-Parameter an den Server übergeben werden. siehe: URL-Parameter.
 


 

  JavaScript
 

Script-Aufbau uns Einbettung in HTML   Das Script kann im Head- oder Body-Bereich des HTML-Codes eingebettet werden, wobei Übersicht halber der Head-Bereich sinnvoller ist. das Script wird mit <script> eingeleitet und endet mit </script>. Alte Browser benötigen noch "language" und "type" sowie das auskommentieren des eigentlichen Codes mittels <!-- und --> Das Script wird direkt beim Laden der Seite ausgeführt.
 

eingebettet im HTML Code

  <html lang="de">
<head>
             
<script>
   alert("Hallo Welt!");
</script>

</head>
<body></body>
</html>

 
Wie oben bereits erwähnt wird das Script direkt beim Laden der Seite ausgeführt, es kann also sein dass die eigentlich HTML Seite und deren Inhalt noch nicht komplett geladen ist. Um das zu verhindern bzw. um das Script erst bei einem bestimmten Ereignis zu starten muss es in eine "Function" gepackt werden. Dann lässt sich das ganze bezielt starten z.B. über "onLoad", einen Link oder per Button starten.
 
  <html lang="de">
<head>
             
<script>
  function MeinScript(){
    alert("Hallo Welt!");
  }
</script>

</head>
<body onLoad='MeinScript()'>   <!-- beim Laden -->

<a href='MeinScript()'>Drück mich</a>   <!-- über einen Link -->
<button onclick="MeinScript()"> Klick mich </button> <!-- über einen Button -->
</body>
</html>


Beim Laden und verlassen der Seite

Wie oben im Beispiel gezeigt lässt sich ein Script beim Laden der Seite per Body-Tag "onLoad" ausführen, beim Verlassen der Seite wäre dies "onbeforeunload". Das geht auch im Scriptbereich:

  <script>
  window.onload = function () { alert("jetzt gehts los") }
  window.onbeforeunload = function () { x = 1 }
</script>

Hinweis: Beim Verlassen der Seite kann kein alert() mehr ausgegeben werden. Der Befehl return 'Möchten Sie die Seite wirklich verlassen?'; kann jedoch zu einer Abfrage, ob man die Seite wirklich verlassen möchte genutzt werden. Das kann bei Verwendung einer Form mit Eingabefeldern sinnvoll sein, da bei Verlassen auch deren Inhalte verloren gehen.


Immer wiederkehrender Aufruf eines Scripts

Ein Script mit definiertem Zeitintervall immer wieder ausführen. Im Beispiel wird alle 5 Sekunden der Alert von MeinScript gestartet.

  <script>
  function MeinScript(){
    alert("...Ich komme immer wieder...");
    setTimeout(MeinScript, 5000);
  }
'use strict';
(function() { document.addEventListener('DOMContentLoaded',MeinScript) }());
</script>


Script erst dann starten wenn Seite komplett geladen wurde

Möchte man per Script auf eine HTML-Komponente zugreifen und nutzt dabei keinen manuellen Trigger, so kann es passieren dass die HTML-Komponente noch gar nicht geladen ist, aber das Script schon darauf zugreifen möchte. Der Browser quittiert dies mit der Fehlermeldung "Cannot read properties of undefined" (oder ähnlich). Um das zu umgehen kann man "window.onload" nutzen.

  <script>
  window.onload = function MeinScript(){
    alert("...Ich mach erst dann was, wenn die Seite komplett geladen ist...");
  }
 </script>
 


Variablen

 
Variable müssen nicht deklariert werden. Es kann sogar eine Variablewert vom Typ String durch einen Integerwert überschrieben werden.
 
  <script>
 s = "Hallo Welt"
 alert(s);

 ZahlA = 5; ZahlB = 6
 s = ZahlA + ZahlB
 alert(s);
</script>
 

Aber um unerwünschten Effekten vorzubeugen sollten man seine Variablen immer deklarieren. Dabei steht einem let und const, aber auch noch var zur Verfügung. Eine mit var deklarierte Variable hat innerhalb einer Function überall Gültigkeit, egal wo sie deklariert wird. Eine mit let deklarierte jedoch nur innerhalb eines Blocks, also im Bereich innerhalb einer geschweiften Klammer { }. Wenn man sie also ganz zu Beginn, direkt nach function(){ deklariert, so hat sie natürlich auch in der kompletten Function ihre Gültigkeit.
const verwendet man für nicht veränderbare Variablen z.B. "const pi = 3.14".
 
  var x
var t = "Hallo Welt"

var w, y, z
var w = 1, y = 2, z = 3
 

Wird eine Variable außerhalb einer Function deklariert, so hat sie globale Gültigkeit, über alle Functions hinweg. Bei Verwendung von var sogar über mehrere Dateien hinweg.
Übrigens wurde let und const 2015 eingeführt, möchte man sein Script in einem Browser laufen lassen der vor 2015 das licht der Welt erblickte, so bleibt einem nur var.


Feldvariablen (Array)
 
  let a = ["eins", "zwei", "drei"];
let s =  a[1]
alert(i);  // Ausgabe wird "zwei" sein
 
siehe auch: String in Array suchen



 Stringoperationen

 
Ein Umwandeln von Float/Integer nach String ist nicht immer zwingend notwendig, aber gehört zu einem sauberen Programmierstiel. 
 
  let s = "10.12";

let f = parseFloat(s);   // String nach Float
let i = parseInt(s);   // String nach Integer

s = f.toString();   // Float bzw. Integer nach String
 


Länge eines String ermitteln
 
  <script>
 let s = "Hallo Welt";
 let i = s.length;  
 alert(i);
</script>
 

String abschneiden

String.slice(Anfang, Länge) - Alles was vor Anfang (Integer-Wert) und nach Länge (Integer-Wert)  steht wird abgeschnitten. Im Beispiel werden die ersten 6 Zeichen abgeschnitten und der Rest behalten.
 
  <script>
 let s = "Hallo Welt";
 s = s.slice(6, s.length);   // Ergebnis ist "Welt"
 s = s.slice(0, s.length -5);   // Ergebnis ist "Hallo"
 alert(s);
</script>
 

Teilstring in String suchen

Es kann entweder "indexOf" oder "search" verwendet werden.
 
   let s = "Kommt der Zug noch";
 let i = s.indexOf("Zug");
 alert(i);   // das Ergebnis wird 10 sein

 let i = s.search("Zug");
 alert(i);   // das Ergebnis wird 10 sein

  let i = s.search("nix");
 alert(i);   // das Ergebnis wird -1 sein
 

  let a = ["eins", "zwei", "drei"];

let b = a.includes("zwei"); // Rückgabewert ist Booelan
alert(b)

let i = a.indexOf("zwei") // Rückgabewert ist 1
alert(i)
 
 
  let s = "Hallo Test";
s = s.replace("Test", "Welt")
alert(s)   // Ergebnis wird "Hallo Welt"

s = "//tech-ecke.de/";
s = s.replace("/", "")
alert(s)   // Ergebnis wird "tech-ecke.de"
 


Mathematische Operationen

 
  let Num = 1.2345
Num = Math.round(Num);   // Ergebnis wird 1 sein
Num = Math.round(Num *100) /100;   // Ergebnis ist 1.23
 

Runden auf z.B. zwei Nachkommastellen. Das Ergebnis ist jedoch ein String
 

  let Num = 1.2345
let s = Num.toFixed(2);   // Ergebnis ist "1.23" vom Typ String !!!
 



if then

 
  x = 5;

if (x == 5){ alert("dem ist so") }

if (x != 3){ alert("x ist nicht 3") }

if (x > 10){ alert("x ist größer als 10") } else { alert("x ist nicht größer als 10") }
 


if "undefined"

Versucht man eine nicht nicht gesetzte localStorage-Variable, oder eine generell leere Variable auszulesen, so hat diese der Wert "undefined", dies lässt sich wie folg abfragen:

 
  let s = localStorage.Vari;
if (s == null){s = "irgendwas";}
 


for Schleife
 
  let i
for (i = 0; i <= 5; i++) {
   alert(i)
}
 
 
 
Datum und Zeit


Aktuelle Uhrzeit und Datum ausgeben

Hier auch mal ein sinnvollen Beispiel für den permanenten Aufruf eines Scripts - Ausgabe des aktuellen Datums und Uhrzeit.

  <script>
function DatumUhr(){
   let jetzt = new Date(),
   t = NullDran(jetzt.getDate()), m = NullDran(jetzt.getMonth() +1),
   j = jetzt.getFullYear(), hh = NullDran(jetzt.getHours()),
   mm = NullDran(jetzt.getMinutes()), ss = NullDran(jetzt.getSeconds());
   document.getElementById('Ausgabe').innerHTML = 'Zeit: ' + t +'.' +m +'.' +j +' ' +hh + ':' + mm + ':' + ss;
   setTimeout(DatumUhr, 500);
}

function NullDran(zahl) {
   let zahl = (zahl < 10 ? '0' : '' )+ zahl; return zahl;
}

'use strict';
(function() { document.addEventListener('DOMContentLoaded',DatumUhr) }());
</script>

// irgendwo im Body dann...
<p id="Ausgabe"></p>

 

 
  <script>
 function SekZuZeit(sek) {
   let sek = Math.abs(sek)
   return DoNull((sek/60/60)%24) + ":" +DoNull((sek/60)%60) + ":" + DoNull(sek%60);
}

function DoNull(wert) {
   if (wert < 10) return "0" + parseInt(wert);
   else return parseInt(wert);
}
</script>
 
Aufruf
 
  alert(SekZuZeit(84240)); // 23:24:00


 

 
Hier wird beim Klick auf den Button "Berechnen" die eingegebene Zahl vom ersten Feld (eingabe) mit 2 multipliziert und im zweiten Feld (ausgabe) wieder ausgegeben. Hinweis: die Objektbenennungen sind "case sensetive", also Groß/Kleinschreibung beachten! 
 
  <script>
  function MeinScript(){
    document.Rechner.AusgabeFeld.value = document.Rechner.EingabeFeld.value*2;
  }
</script>

...

<form name="Rechner">
  <p>Bitte Zahl eingeben:</p>
  <input type="text" name="EingabeFeld" size="20">
  <button type="button" onclick="MeinScript()">Berechnen</button>
  <p>Deine Zahl mal zwei ist:</p>
  <input type="text" name="AusgabeFeld" size="20">
</form>

Auffinden von Ein/Ausgabefeldern und Buttons (<intupt>)

Zum Auffinden von Textfeldern und Buttons gibt es mehrere Methoden. Zum einen, wie auch oben verwendet, das direkte Ansprechen über den Namen (FeldName1). Dazu muss das Input zwingend in eine Form eingebettet sein. Und dann gibt es noch die Möglichkeit Inputs über ihre ID anzusprechen (FeldID2 und 3).

Hinweis! Bei allen drei Methoden ist darauf zu achten, dass das Script aus dem Body heraus, oder eben bei "Body onLoad" ausgeführt wird, ansonsten wird das Input nicht gefunden.

  <html>
<head>

<script>
  function MeinScript() {
    document.MeineForm.FeldName1.value = "Hier bin ich, Input 1"; // über Name - Input muss in einer Form liegen
    document.getElementById("FeldID2").value = "Hier bin ich, Input 2"; // Suche über ID;
    document.querySelector("#FeldID3").value = "Hier bin ich, Input 3";
  }
</script>

</head>
<body>

<form name="MeineForm">
  <input type="text" name="FeldName1" id="FeldID1" size="20">
</form>

<input type="text" name="FeldName2" id="FeldID2" size="20">
<input type="text" name="FeldName3" id="FeldID3" size="20">
 <button onclick="MeinScript()">Klick mich</button>

</body>
</html>

HTML-Text ändern

Hier ein paar Beispiele zum Ändern von HTML-Text, mit und ohne Formatierung.

Hinweis! Es ist darauf zu achten, dass das Script aus dem Body heraus, oder eben bei "Body onLoad" ausgeführt wird, ansonsten wird der Text nicht gefunden.

  <script>
  function MeinScript(){
    document.getElementById('MeinText1').textContent = 'Das kommt rein';
    document.getElementById('MeinText2').textContent = 'etwas dazu';
    document.getElementById('MeinText3').innerHTML = 'oder so...';
  
    let Txt = document.getElementById("MeinText4")
    Txt.firstChild.nodeValue = "Mit Suppe, Salat und Kaffee";
    Txt.style.fontFamily = 'Arial';
    Txt.style.fontSize = '16px';

    document.getElementById('MeinText5').innerHTML = ' <font color="#00CC00">oder auch so...';
  }
</script>

 ...

<p id="MeinText1">---</p>
<p>und dann kommt noch <span id="MeinText2">---</span></p>
<p id="MeinText3">---</p>
<p id="MeinText4">---</p>
<p id="MeinText5">---</p>


Button Text ändern

  <script>
  function Btn1Click(){
    document.getElementById('Btn1').textContent = 'Ich wurde gedrückt';
  }

  function Btn2Click(){
    document.getElementById('Btn2').value = 'Ich wurde gedrückt';
  }
</script>

 ...

<input id="Btn1" type="button" value="Drück mich" onClick="Btn1Click()">
<button id="Btn2" onClick="Btn2Click()">Drück mich</button>


 

 
Zum Aus- und Einblenden von HTML-Elementen gibt es zwei Methoden.

 .style.visibility = 'hidden' ---> .style.visibility = 'visible'
 .style.display = 'none' ---> .style.display = ''
 
Bei "visibility" wird das betreffende Element ausgeblendet, aber die restlichen Elemente rücken nicht nach, der Platz bleibt quasi reserviert. Über "display" wird das HTML-Element komplett entfernt, andere Elemente rücken in ihrer Position nach.
 
Nachteil von "Visibility": Da der Bereich der ausgeblendeten Elemente reserviert bleibt und die übrigen Elemente nicht nachrücken, kann die Seite zum Teil recht zerfleddert wirken. Von daher ist "Display" oft die bessere Wahl.
 
Mittels display = '' kann man das Element wieder herbeizaubern, was in den aller meisten Fällen auch zum gewünschten Ergebnis führt. Wenn nicht, dann bietet das Neuladen der Seite eventuell eine Alternative. Hierbei muss jedoch die gerade gesetzten Option (sichtbar oder nicht) beim Neuladen der Seite zur Verfügung stehen, was über Local-Storage erledigt werden kann. Das Ausblenden sollte unmittelbar nach dem Laden geschehen, das geht per "window.onload".

Hier mal ein einfaches Beispiel dazu:
 
  <script>
 // Beim Laden der Seite nachsehen ob was ausgeblendet werden muss
window.onload = function () {
  let i = localStorage.Ausblenden;
  if (i == null){i = 0;}
  if (i == 1){
    document.getElementById('MeineCheckBox').checked = true;
    document.getElementById('MeinText').style.display = 'none';
 };
}

// Option sichtbar oder nicht setzen und Seite neu laden
function MeinScript() {
  let i = 0;
  if (document.getElementById('MeineCheckBox').checked == true ){  i = 1; };
  localStorage.Ausblenden = i;
  location.reload(false);
 };
}
</script>

...

// HTML-Bereich
<p id="MeinText">Hier mal etwas Text</p>

<p><input id="MeineCheckBox" type="checkbox" OnClick="MeinScript()">Ausblenden</p>

In der Vorschau gibt es noch Tabellen und ein Bild...

Möchte man ein HTML-Element z.B. einen Button bereits beim Laden ausblenden, so kann man im Scriptbereich hinter Window.OnLoad ein .style.visibility = 'hidden'  absetzen. Das hat aber zur Folge, dass der Button beim Laden für einen kurzen Augenblick zu sehen sein wird, bevor die Seite komplett geladen wurde und OnLoad aufgeführt wird. Um das zu verhindern kann man das Anzeigen des Buttons direkt im HTML-Code verhindern und später per Java-Script bei Bedarf einblenden.
 
  <script>
  function ShowBtn() {
    document.getElementById('MeineButton').removeAttribute('hidden');
  }
</script>

...

// HTML-Bereich
<button onClick="ShowBtn()">Zeige mein Kumpel</button>
<button id="MeinButton" hidden>Bin direkt mal weg</button>


 
Lokaler Browser Speicher nutzen

 
Durch einen Klick auf den Button "Speichern" wird der Inhalt des Eingabefeldes in den lokalen Browserspeicher, mit dem Speichernamen "MeinWert" abgelegt. Durch Klick auf den Button "Abrufen" wird der Inhalt wieder aus dem lokalem Speicher geholt und im Ausgabefeld ausgegeben.
 
  <script>
  function Speichern(){
    localStorage.MeinWert = document.Speicherung.EingabeFeld.value;
  }

  function Abrufen(){
    s = localStorage.MeinWert;
    if (s == null) { s = "war noch nicht gesetzt"; };
    document.Speicherung.AusgabeFeld.value = s;
  }
</script>


<form name="Speicherung">
  <p>Bitte etwas eingeben:</p>
  <input type="text" name="EingabeFeld" size="50">
  <button type="button" onclick="Speichern()">Speichern</button>
  <p>Wieder Abrufen:</p>
  <input type="text" name="AusgabeFeld" size="50"></p>
  <button type="button" onclick="Abrufen()">Abrufen</button>
</form>
 

Hinweis: Versucht man eine nicht gesetzte localStorage-Variable abzufragen, so wird "undefined" ausgegeben. Möchte man dies abfangen: siehe hier

 
 
 
Im Script...
 
  <script>
  window.location.href = "Seite.htm"
</script>
 
Per Button...
 
  <form name="Formular">
   <input type="button" name="weiter" value=" Weiter " onClick="window.location.href = 'Seite.htm'">
</form>


URL-Parameter

Über URL-Parameter können beim Aufruf einer Webseite zusätzliche Informationen in der URL mitgegeben werden. So lassen sich z. B. Werte von Variablen oder ganze JSON-Strukturen übergeben. Hier ein einfaches Beispiel:

 Empfangende HTML-Seite (empfaenger.htm):

  <html>
<body>
  <p id="ausgabe"></p>
  <p><input type="button" value=" Zurück " onClick="window.location.href='url_param_sender.htm'"></p>

  <script>
    let params = new URLSearchParams(window.location.search);
    let sName = params.get('name');
    let sAlter = params.get('alter');
    let oText = document.getElementById('ausgabe')
    oText.textContent = sName +' ist ' +sAlter +' Jahre alt';
  </script>

</body>
</html>

Übergebende HTML-Seite (sender.htm):

  <html>
<body>
  <p><a href="empfaenger.htm?name=Anna&alter=25">übergebe Anna und 25</a></font></p>
  <p>Name: <input type="text" id="name"></p>
  <p>Alter: <input type="text" id="alter"></p>
  <button onClick="ParamLink()">überge den Inhalt der Felder</button>

  <script>
    function ParamLink(){
      let sName = document.getElementById('name').value;
      let sAlter = document.getElementById('alter').value;
      window.location.href = 'empfaenger.htm?name=' +sName +'&alter=' +sAlter;
    }
  </script>
</body>
</html>

 

Die Option Drucken funktioniert erst ab Netscape V4.0 bzw. I-Explorer 5.0 !

[letzte Aktualisierung 17.11.2020]