Tech-Ecke / Programmieren / JavaScript

 

Diese Seite hat weder dem Anspruch das Programmieren in JavaScript zu vermitteln noch eine Übersicht der grundlegenden Befehle und deren Syntax aufzuzeigen. Es handelt sich vielmehr um einen elektronische 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:


 

 
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>
<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 auch eine Variable mit Inhalt String durch einen Integer überschrieben werden. Segen und Fluch zugleich...
 
  <script language="javascript" type="text/javascript">
<!--
 x = "Hallo Welt"
 alert(x);

 ZahlA = 5; ZahlB = 6
 x = ZahlA + ZahlB
 alert(x);
-->
</script>
 
 
 
  Num = 1.2345
Num = Math.round(Num);   // Ergebnis wird 1 sein
 

Runden auf zwei Nachkommastellen.
 

  Num = 1.2345
Num = Num.toFixed(2);   // Ergebnis wird 1.23 sein
 


 

 
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>
<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>


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.

  <html>
<head>
             
<script language="javascript" type="text/javascript">
<!--
function MeinScript()
{
   alert("...Ich komme immer wieder...");
   setTimeout(MeinScript, 5000);
}
-->
</script>


<script language="javascript" type="text/javascript">
<!--
'use strict';
(function() { document.addEventListener('DOMContentLoaded',MeinScript) }());
-->
</script>
</head>
<body></body>
</html>


Aktuelle Uhrzeit und Datum ausgeben

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

  <html>
<head>

<script language="javascript" type="text/javascript">
<!--
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);}
-->
</script>

<script language="javascript" type="text/javascript">
<!--
function NullDran(zahl)
{zahl = (zahl < 10 ? '0' : '' )+ zahl; return zahl;}
-->
</script>

<script language="javascript" type="text/javascript">
<!--
'use strict';
(function() { document.addEventListener('DOMContentLoaded',DatumUhr) }());
-->
</script>

</head>
<body> <p id="Ausgabe"></p> </body>
</html>


 

 
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! 
 
  <html>
<head>

<script language="javascript" type="text/javascript">
<!--
function MeinScript()
{ document.rechner.ausgabe.value = document.rechner.eingabe.value*2; }
-->
</script>

</head>
<body>
 <form name="rechner">
  <p>Bitte Zahl eingeben:</p>
  <p><input type="text" name="eingabe" 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="ausgabe" size="20"></p>
 </form>
</body>
</html>

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

[letzte Aktualisierung 17.11.2020]