[FRAGE] Code von Liveticker erläutern

Li_Za · 07. Sep. 2014

Liebes Forum,

ich wünschte ich wäre etwas JS-begabter, aber es soll wohl nicht so sein. :upset:

Wir sollen im Fernstudium den Code eines Liveticker erläutern:
a) Programmablauf
b) Welche Inhalte und Änderungen erhalten die Variablen?
c) Was passiert in der Funktion?

Zum Programmablauf: man hat die Möglichkeit vier Angaben zu machen, die dann im Liveticker im Sekunden Takt angezeigt werden. Jede Angabe ist durch ----- getrennt. Kann jemand von euch bei b) und c) helfen? Das wäre klasse! Wie genau muss ich die Zahlen im substring verstehen?

Vielen Dank im voraus!
Liz

HTML:

<html>
<head>

<title>Liveticker</title>
<script type="text/javascript">
<!--
var trennzeichen = " * - - - - * ";

var meldungen = new Array();
meldungen [0] = prompt ("bitte erste Meldung eingeben");
meldungen [1] = prompt ("bitte zweite Meldung eingeben");
meldungen [2] = prompt ("bitte dritte Meldung eingeben");
meldungen [3] = prompt ("bitte vierte Meldung eingeben");

var Tickertext = "";
for (var i=0; i<meldungen.length; i++)
	Tickertext += meldungen[i] + trennzeichen;
	
function Ticker(){
	document.forms[0].lauf.value = Tickertext;
	Tickertext = Tickertext.substring(1, Tickertext.length) + Tickertext.substring(0, 1)
	setTimeout ("Ticker()", 1000);	
}
	
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body onload="Ticker()">
<h3>Ticker mit Javascript</h3>
<form>
<font face="Arial, Courier New, Courier">
<input type="text" name="lauf" size="30">
</font>
</form>
</body>
</html>

dbarthel · 08. Sep. 2014

Hi Liz,

zu B)

als erstes wird eine Variable mit dem Trennzeichen initialisiert.
Dann wird Array mit dem Namen "meldungen" initialisiert (übrigens nicht ganz richtig, besser wäre meldungen = [] )
und mittels Eingabe-Aufforderung werden die Elemente 1 bis 4 mit Werten gefüllt.

Num wird die Variable "Tickertext" initialisiert und anschließend in der Schleife mit dem Wert von Trennzeichen und den Meldungen befüllt.

Zu C)

In der Funktion wird der Inhalt von Tickertext in ein Formulafeld ausgegeben und der Wert von Tickertext dann mittels der substring so beschnitten, das das Trennzeichen zwischen der letzten und der ersten Meldung nicht doppelt ist.

- - - Aktualisiert - - -

Eine Anmerkung zu B) noch: Es wäre besser das Array mittels .push zu füllen.

Code:

var meldungen = [];
meldungen.push( );

----------------

Ich persönlich würde die Eingabe auch so umbauen, das du beliebig viele Meldungen aufnehmen kannst.

j-l-n · 08. Sep. 2014

Einige Anmerkungen:

setTimeout sollte man eine Funktionsreferenz und keinen String übergeben: setTimeout(Ticker, 1000);
das Auskommentieren des script-Blocks ist heutzutage mehr als veraltet - es sei denn, du möchtest den Netscape Navigator noch unterstützen??
die meisten halten sich in JavaScript an die camelCase-Schreibweise (die auch im JS-Core verwendet wird), sprich, den Anfangsbuchstaben von Variablen und Funktionsnamen klein zu schreiben. Dadurch ist der Code einheitlicher und es fällt anderen leichter, damit zu arbeiten.
Hauptsache ist jedoch - egal für welche Schreibweise du dich entscheidest -, dass du diese konsistent verwendest und nicht vermischst.
das HTML ist invalide, es fehlt ein <!DOCTYPE>
es ärgert mich, wenn man JS neu lernt und dabei altes oder sogar veraltetes (wie das Auskommentieren der Script-Blöcke) beigebracht bekommt statt direkt mit dem neuesten Stand anfängt.
Hierzu gehört auch

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Zum Vergrößern anklicken....

, was aus zwei Gründen suboptimal ist: zum einen sollte man - wenn man ein Projekt neu anfängt - dabei imho HTML5 und den zugehörigen <meta charset="UTF-8">-Tag verwenden. Zum anderen sollte man Webseiten in UTF-8 erstellen und damit von vornherein Kodierungsprobleme vermeiden.
UTF-8: The Secret of Character Encoding - HTML Purifier
Desweiteren gelten auch die (zugegebenermaßen immer noch oft verwendeten) inline-Eventlistener als schlechter Stil. So kann beispielsweise <body onload="Ticker()"> leicht durch DOMContentLoaded oder onload ersetzt werden.

dbarthel schrieb:
Ich persönlich würde die Eingabe auch so umbauen, das du beliebig viele Meldungen aufnehmen kannst.

* Tatarata *

Code:

function addToTickerArray(){
  if(meldungen.length === 0){
    var promptText = "Geben Sie eine Meldung für den Ticker ein:";
    var firstInput = true;
  }
  else{
    var promptText = "Möchten Sie eine weitere Meldung zum Ticker hinzufügen?\nNein = Abbrechen";
    var firstInput = false;
  }
  var input = prompt(promptText, "");
  if(input === null){
    if(firstInput === true){
      addToTickerArray();
    }
    else{
      return;
    }
  }
  else if(input === ""){
    addToTickerArray();
  }
  else{
    meldungen.push(input);
    addToTickerArray();
  }
}

kkapsner · 10. Sep. 2014

j-l-n schrieb:
es ärgert mich, wenn man JS neu lernt und dabei altes oder sogar veraltetes (wie das Auskommentieren der Script-Blöcke) beigebracht bekommt statt direkt mit dem neuesten Stand anfängt.

Dem kann ich mich nur anschließen. So ist das <font> deprecated.

Auch ist das <form> komplett nutzlos, wenn man auf das <input> (das dringend ein readonly bräuchte) gescheit mit einer ID zugreift.

j-l-n · 11. Sep. 2014

kkapsner schrieb:
So ist das <font> deprecated.

Auch ist das <form> komplett nutzlos, wenn man auf das <input> (das dringend ein readonly bräuchte) gescheit mit einer ID zugreift.

Jetzt war ich so fixiert auf das Skript an sich, dass ich das auch noch übersehen hab...

[FRAGE] Code von Liveticker erläutern

Li_Za

New member

dbarthel

Lounge-Member

j-l-n

Guest

kkapsner

Super Moderator

j-l-n

Guest