Kleiner JavaScript Kurs

Programm - Wiederholung über Timer

Programme lassen sich auch in Zeitabständen wiederholen. Unser Laufschrift_aktualisieren - Programm wird z.B. alle 100ms aufgerufen:
setTimeout("Laufschrift_aktualisieren()", 100);
Die Variablen meinLauftext1, Textfeld und pos sind als globale Variablen deklariert (ohne var), damit sie auch im Programm Laufschrift_aktualisieren verwendet werden können. So sieht dann das komplette Programm incl. html - Seite aus.

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>JavaScript Kurs; Laufschrift</title>

        <script type="text/javascript">
            function Laufschrift(){
                 meinLauftext1="Mein JavaScript Kurs ist jetzt online !";
                 Textfeld=document.getElementById('meinTextfeld');
                 pos=1;
                 Laufschrift_aktualisieren();
            }
            function Laufschrift_aktualisieren(){ 
                   var Textlaenge=meinLauftext1.length;
                   var Textfeldlaenge=Textfeld.innerHTML.length;
                   var meinLauftext2="-".repeat(Textfeldlaenge);
                   var Ausgabe=document.getElementById('Ausgabe');
                   
                   if(pos<=Textfeldlaenge){
                   Ausgabetext=meinLauftext2.substring(0,Textfeldlaenge-pos) + meinLauftext1.substring(0, pos);
                   }
                   if(pos>Textfeldlaenge){
                   Ausgabetext=meinLauftext1.substring(pos-Textfeldlaenge, pos) ;
                   }
                   if(pos>Textlaenge){
                   Ausgabetext=Ausgabetext + meinLauftext2.substring(0, pos-Textlaenge) ;
                   }
                   Textfeld.innerHTML=Ausgabetext;
                   Ausgabe.innerHTML=Ausgabetext.length;
                   pos=pos+1 ;
                   pos=pos%(Textlaenge+Textfeldlaenge);
            
            setTimeout("Laufschrift_aktualisieren()", 100);
            }
        </script>
</head>
<body  onLoad="Laufschrift();">
        <h1>JavaScript Kurs; Laufschrift</h1>
        <br>
        <font color="#008000"><h2 align="center" id="meinTextfeld">
            --------------------------</h2></font>
        <h3 id="Ausgabe"></h3>

</body>
</html>
So könnte es aussehen: JS_Kurs_B08.html

Übergabeparameter

Zur besseren Wiederverwendbarkeit des Programms würde man in der Praxis das Programm mit Übergabeparametern schreiben. Bei unserem Laufschriftprogramm könnte man den "Lauftext" und die id des Textfeldes übergeben.
Laufschrift("Aktuelle Meldung:","Ausgabe_id");
So sieht dann das komplette Programm incl. html - Seite aus.

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="utf-8">
        <title>JavaScript Kurs; Laufschrift</title>
        
        <script type="text/javascript">
            function Laufschrift(Lauftext, Ausgabe_id){
                 meinLauftext1=Lauftext;
                 Textfeld=document.getElementById(Ausgabe_id);
                 pos=1;
                 Laufschrift_aktualisieren();
                 }
            function Laufschrift_aktualisieren(){ 
                   var Textlaenge=meinLauftext1.length;
                   var Textfeldlaenge=Textfeld.innerHTML.length;
                   var meinLauftext2="-".repeat(Textfeldlaenge);
                   
                   if(pos<=Textfeldlaenge){
                   Ausgabetext=meinLauftext2.substring(0,Textfeldlaenge-pos) + meinLauftext1.substring(0, pos);
                   }
                   if(pos>Textfeldlaenge){
                   Ausgabetext=meinLauftext1.substring(pos-Textfeldlaenge, pos) ;
                   }
                   if(pos>Textlaenge){
                   Ausgabetext=Ausgabetext + meinLauftext2.substring(0, pos-Textlaenge) ;
                   }
                   Textfeld.innerHTML=Ausgabetext;
                   pos=pos+1 ;
                   pos=pos%(Textlaenge+Textfeldlaenge);

            setTimeout("Laufschrift_aktualisieren()", 100);
            }
        </script>
</head>
<body>
        <h1>JavaScript Kurs; Laufschrift mit Übergabeparametern</h1>
        <br>
        <label>id=meinTextfeld</label><font color="#008000"><h2 align="center" id="meinTextfeld">-------------------------</h2></font>
        <p><label>Bitte den Lauftext eingeben:</label> <input type="text" id="meinEingabefeld" />
        <input type="button" value="Laufschrift starten" onclick=
               "var a=document.getElementById('meinEingabefeld').value;
               Laufschrift(a, 'meinTextfeld');" /></p>

</body>
</html>
So könnte es aussehen: JS_Kurs_B08b.html