Frage Vorgehensweise Erstellung Javascript-Code

sebjel · 22 November 2016

Hallo,

ich lerne momentan Javascript. Soweit verstehe ich die einzelnen Befehle und Formeln, jedoch fehlt mir der Plan, wie ich wirklich ein komplettes Skript schreibe. Ein Beispiel:

In meinem Lehrbuch gab es folgende Aufgabe:
Programmieren Sie ein weiteres Lauflicht. Dieses mal soll das Lauflicht weiterspringen, wenn der
Benutzer irgendwo auf den Bildschirm klickt.
Auch hier gilt: Nach der letzten Lampe fängt das Licht wieder von vorne an zu laufen.

Die HTML dazu sieht folgendermaßen aus:

Code:

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Beispiel</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />      
  <script src="running_light2.js" defer="defer"></script>  
  <script src="../../../lib/dom_helper.js"></script>
</head>

<body>
  <img src="light_on.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" />
  <img src="light_off.png" alt="lightbulb" /> 
</body>
</html>

Die richtige Lösung sah so aus:

Code:

"use strict";

{
  const IMAGE_FILE_ON = "light_on.png";
  const IMAGE_FILE_OFF = "light_off.png";

  const init = () => document.on("click", () => {
    const currentLightNr= findFirstTurnedOnLightNr();
    turnOffByNr(currentLightNr);
    turnOnByNr(nextLightNr(currentLightNr));
  });

  const findFirstTurnedOnLightNr = () => lights().findIndex(isOn);
  const isOn = light => light.src.endsWith(IMAGE_FILE_ON);
  const nextLightNr = nr => isLast(nr) ? 0 : nr + 1;
  const isLast = nr => nr === lights().length - 1;
  const turnOnByNr = nr => turnOn(lights()[nr]);
  const turnOffByNr = nr => turnOff(lights()[nr]);
  const turnOn = light => light.src = IMAGE_FILE_ON;
  const turnOff = light => light.src = IMAGE_FILE_OFF;
  const lights = () => $$("img[alt=lightbulb]");

  init();
}

Ich kann nachvollziehen, wieso er die einzelnen Funktionen benutzt und verstehe auch handwerklich, wie diese Funktionen aufgebaut sind, allerdings wäre ich nie selbst auf die Idee gekommen, dieses Skript zu schreiben.

Welche Schritte würdet ihr also einem Einsteiger empfehlen, welche er bei der Erstellung eines Skripts durchlaufen soll? Habt ihr da einen Plan für mich?

Tronjer · 22 November 2016

Wenn du das Script so nie geschrieben hättest, hat das Buch definitiv seinen Zweck als Einsteigerlektüre verfehlt.

Eine einfacher zu lesende Variante wäre diese hier:

Code:

const images = document.querySelectorAll('img[alt=lightbulb]');
const on = 'light_on.png';
const off = 'light_off.png';
let index;

images.forEach(function(val, key) {
  if (val.src.search(on) > - 1 ) {
    index = key;
  }
});

document.addEventListener('click', function() {
  images.forEach(function(val, key) {
    val.src = off;
  });
  index = index < images.length - 1 ? index + 1 : 0;
  images[index].src = on;
});

Aber auch das ist kein guter Ansatz. JavaScript wird heutzutage für einfache DOM-Manipulationen wie oben, sowie client- und serverseitige Programmierung eingesetzt. Für all diese Anwendungszwecke gibt es entsprechende Frameworks, welche die Arbeit erleichtern.

Wenn du JS wirklich lernen willst, dann anhand dieser Frameworks, und an erster Stelle sollte da jQuery stehen.

Frage Vorgehensweise Erstellung Javascript-Code

sebjel

Neues Mitglied

Tronjer

Senior HTML'ler

Neueste Beiträge