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>



 

  JavaScript
 

 
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 language="javascript" type="text/javascript">
   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 language="javascript" type="text/javascript">
function MeinScript()
{
   alert("Hallo Welt!");
}
</script>

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

<a href='javascript:MeinScript()'>Drück mich</a>   <!-- über einen Link -->

 <form><input type="button" value=" Klick mich " onClick="javascript:MeinScript()"></form> <!-- ü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>
 

 
Variable müssen nicht deklariert werden, dabei kann sogar, wie im Beispiel gezeigt eine Variable, mit Inhalt String durch einen Integer Wert ü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 language="javascript" type="text/javascript">
 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 language="javascript" type="text/javascript">
 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)
}
 


 

 
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>
  <p><input type="text" name="EingabeFeld" size="20"></p>
  <p><input type="button" value="Berechnen" onClick="javascript:MeinScript()"></p>
  <p>Deine Zahl mal zwei ist:</p>
  <p><input type="text" name="AusgabeFeld" size="20"></p>
</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 im Direktzugriff

  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">
  <p><input type="text" name="FeldName1" id="FeldID1" size="20"></p>
</form>

<p><input type="text" name="FeldName2" id="FeldID2" size="20"></p>

<p><input type="text" name="FeldName3" id="FeldID3" size="20"></p>

<input type="button" value="Drück mich" onClick="javascript:MeinScript()">

</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 MeinScript(){
   document.getElementById('Btn').value = 'Ich wurde gedrückt';
}
</script>

 ...

<input id="Btn" type="button" value="Drück mich" onClick="javascript:MeinScript()">


 

 
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="javascript: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(){
   document.Speicherung.AusgabeFeld.value = localStorage.MeinWert
}
</script>


<form name="Speicherung">
  <p>Bitte etwas eingeben:</p>
  <p><input type="text" name="EingabeFeld" size="50"></p>
  <p><input type="button" value="Speichern" onClick="javascript:Speichern()"></p>
  <p>Wieder Abrufen:</p>
  <p><input type="text" name="AusgabeFeld" size="50"></p>
  <p><input type="button" value="Abrufen" onClick="javascript:Abrufen()"></p>
</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="javascript:window.location.href = 'Seite.htm'">
</form>

 

 
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
 

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

[letzte Aktualisierung 17.11.2020]