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>

 
Variable müssen nicht deklariert werden, dabei kann, wie im Beispiel gezeigt eine Variable, mit Inhalt String durch einen Integer Wert überschrieben werden.
 
  <script language="javascript" type="text/javascript">
<!--
 x = "Hallo Welt"
 alert(x);

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

Aber: Da wir aber alle einen sauberen Programmierstiel anstreben, sollten wir auch immer brav deklarieren.
 
  var x
var t = "Hallo Welt"

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


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">
<!--
 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>
 
 
  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 auszulesen, so besitzt diese der Wert "undefined", dies lässt sich wie folg abfragen:

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

for Schleife
 
  for (i = 0; i <= 5; i++) {
   alert(i)
}
 


Runden
 
  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
 

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


 

 
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>


 

 
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>
 

HTML und Button Text ändern

  <script>
function MeinScript(){
   document.getElementById('Txt').innerHTML = 'Der Knopf wurde gedrückt';
   document.getElementById('Btn').value = 'Ich wurde gedrückt';
}
</script>


 <p id="Txt">ich warte</p>

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


 

 
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(){
   var jetzt = new Date(),
   d = jetzt.getDate(), o = jetzt.getMonth(),
   j = jetzt.getFullYear(), h = jetzt.getHours(),
   m = jetzt.getMinutes(), s = jetzt.getSeconds();
   d = NullDran(d); o = NullDran(o);
   h = NullDran(h); m = NullDran(m);
   s = NullDran(s);
   document.getElementById('Ausgabe').innerHTML = 'Zeit: ' + d +'.' +o +j +' ' +h + ':' + m + ':' + s;
   setTimeout(DatumUhr, 500);
}

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

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


<p id="Ausgabe"></p>

 

 
  <script>
function SekZuZeit(sek) {
   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]