Wie finde ich heraus ob Javascript wirklich funktioniert?

ich habe ein paar dinge in javascript versucht aber bin mir sehr unsicher ob es wirklich und sicher funktioniert, wie könnte ich überprüfen ob es zu 100% funktioniert?

var timeInterval;

        function startUpdatingTime() {
              clearInterval(timeInterval);
            timeInterval = setInterval(updateTime, 120000);
              displayTimeSetting();
        }
        function stopUpdatingTime() {
            clearInterval(timeInterval);
              displayTimeSetting();
        }
        function doubleUpdateTime() {
            clearInterval(timeInterval);
            updateTime();
            timeInterval = setInterval(updateTime, 60000);
              displayTimeSetting();
        }
        function updateTime() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        var age = xhr.responseText;
                        document.getElementById("antwort").textContent = "Antwort: " + antwort;
                    } else {
                        console.error('Es gab ein Problem mit der Anfrage.');
                    }
                }
            };
            xhr.open("GET", "update_time.php", true);
        }
        startUpdatingTime();

Answer 1

[regex9]

In der Planungsphase (also noch vor dem Schreiben von Code) solltest du dir Gedanken darüber gemacht haben, was dein zu lösendes Problem ist und welche Anforderungen es stellt. Auf dieser Grundlage können Testfälle definiert werden.

Ein Beispiel: Ein Programm für die Berechnung des Quotient aus der Division zweier natürlicher Zahlen (inklusive 0) soll entwickelt werden.

Ein paar mögliche Testfälle:

• 4 / 2 = 2
• 5 / 2 = 2.5
• 5.1 / 2 = nicht erlaubt
• 2 / 5.1 = nicht erlaubt
• 5 / 0 = NaN / nicht erlaubt
• 0 / 5 = 0
• a / 2 = NaN / nicht erlaubt
• 2 / a = NaN / nicht erlaubt

Diese decken nicht nur die erwarteten, üblichen Anwendungsfälle ab, sondern ebenso Randfälle.

Sicherlich findet man nicht immer alle möglichen Fälle, aber man kann zumindest eine große Menge abdecken, wenn man sich etwas Zeit nimmt. Wenn du das zudem schon vor der konkreten Implementation machst, kann die einfacher und stabiler ausfallen, als wenn man erst im Nachhinein nochmals Änderungen hineinfrickelt.

Während der Implementationsphase kannst du Unittests implementieren, die einzelne Funktionen testen. Jest wäre ein Framework, welches man an der Stelle einsetzen kann.

Auch eine statische Codeanalyse wäre sinnvoll. Wenn ich mir nun nur einmal deinen Codesnippet anschaue, fallen mir direkt undefinierte Symbole auf: displayTimeSetting und antwort. Mit age wiederum machst du gar nichts.

Deine genutzten Sprachelemente sind übrigens nicht mehr zeitgemäß. Statt Variablen mit var zu erstellen, wären let/const sinnvoller. Den Request kannst du einfacher mit der Fetch API verschicken.

async function getAge() {
  const response = await fetch("update_time.php");

  if (!response.ok) {
    throw new Error("Request failed");
  }

  return await response.text();
}

async function updateTime() {
  const age = await getAge();
  // ...
}

Die Funktion habe ich in diesem Fall in zwei Funktionen aufgeteilt, da der Prozess aus getAge somit einfacher testbar ist. Ob der Funktionsname passt, müsstest du dir selbst überlegen.

Für eine Analyse des Laufzeitverhaltens der Anwendung würde ich dir empfehlen, einen Debugger zu verwenden. In all den bekannten Browsern (Brave, Chrome, Edge, Firefox, Opera, Safari, ...) ist in deren Webentwicklungstools ein solcher integriert.

Comments

[MaxiDerWolfi]

Danke, ich habe fetch mal ausprobiert aber ich bekomme damit immer wieder Fehler     

function updateTime() {

      fetch("update_time.php")

        .then(response => {

          if (!response.ok) {

            throw new Error('Network response was not ok');

          }

          return response.text();

        })

        .then(age => {

          document.getElementById("age").textContent = "Alter: " + age;

        })

        .catch(error => {

          console.error('There was a problem with the fetch operation:', error);

        });

    }

GET ... net::ERR_ABORTED 500 (Internal Server Error)

There was a problem with the fetch operation: Error: Network response was not ok at ...

Manchmal funktioniert es aber auch ohne Fehler

[regex9]

@MaxiDerWolfi

Der Statuscode 500 weist daraufhin, dass es sich um ein serverseitiges Problem handelt. Der Fetch-Request sieht ok aus.