Javascript: Variable in mehreren Funktionen bearbeiten

[-Alexander-]

Hi,
Ich habe 2 Funktionen, die eine Variable berechnen sollen. Hierbei gibt es allerdings das Problem, dass die Variable in der einzelnen Funktion gespeichert wird und ich deshalb mit der 2. Funktion nicht auf die Variable aus der 1. Funktion zugreifen kann. Wie lässt sich das Problem lösen?

Danke schonmal

 

[DKK007]

Wie sehen die Funktionen den genau aus, ich kann mir gerade nicht vorstellen, wie du das meinst.

Meist du das so:
y1 = f(x)
y2 = g(y1)

Oder so:
y1 =f(x)
y2 = g(x)
?????

 

[jackdanielswhiskey]

Was spricht gegen die Verwendung von globalen Variablen?

 

[-Alexander-]

Was spricht gegen die Verwendung von globalen Variablen?

Danke für die Antwort. Mit globalen Variablen habe ich mich noch nicht beschäftigt. Wie funktioniert das mit denen?

 

[jackdanielswhiskey]

Ich hoffe dieser LINK hilft dir weiter. Falls nicht meld dich einfach nochmal.

 

[DarkMo]

wollts grad sagen ^^ einfach global un feddich. global wäre die variable, wenn du sie ausserhalb der funktion deklarierst. musst sie dann natürlich den funktionen übergeben und warscheinlich wieder einen wert zurück geben (bei call by value). also der einfachheit halber wäre sowas denkbar:

int myGlobalVar;

int myFunc1(int myLocalVar) {
    return myLocalVar * 2;
}

int myFunc2(int myLocalVar) {
    return myLocalVar - 3;
}

void main() {
    myGlobalVar = 5;
    myGlobalVar = myFunc1(myGlobalVar);
    myGlobalVar = myFunc2(myGlobalVar);
}

kA ob das in js jetz so geschrieben wird, aber is im grunde ja auch ladde ^^ das prinzip würde so funktionieren. baust dir halt ne globale variable, übergibst die den funktionen und die funktionen machen dann irgendwas damit. das ergebnis wird zurück gegeben. und diesen wert fängt man ab, indem man es wieder einer variablen zuweist. das wäre wie gesagt die callByValue methode. dabei wird der wert der variablen (also der value) übergeben (eine kopie der variablen erzeugt). als alternative gibts noch die callByReference variante, da wird die variable direkt übergeben (also eben keine kopie erzeugt -> man übergibt eine referenz). in c zum bsp per pointer (zeiger). der pointer zeigt dann auf die speicheradresse der variablen und übergibt eben diese. damit wird direkt die variable geändert und man braucht keinen rückgabewert in der funktion mehr.

aber wie gesagt, wie und ob das bei js so alles funzt... hab mich damit noch nie so wirklich beschäftigt ^^

 

[-Alexander-]

Ich hoffe dieser LINK hilft dir weiter. Falls nicht meld dich einfach nochmal.

Danke!

Also müsste das so gehen?

<script type="text/javascript">
<!--
var berechnung = 0;

function rechnung1() { berechnung++; window.setTimeout("ergebnis()",0);}
function rechnung2() { berechnung++; window.setTimeout("ergebnis()",0);}
function ergebnis() {if(berechnung == 2) {...;}}
-->
</script>

Wenn jetzt beide Funktionen einmal ausgeführt wurden, wird ... ausgeführt?

 

[Rho]

Das sieht ja reichlich abenteuerlich aus. Vielleicht erklärst du einfach mal, was du konkret vorhast. Eventuell kann man dir dann ein paar Tipps geben, wie es am besten umgesetzt werden kann.

 

[Crysis nerd]

Was spricht gegen die Verwendung von globalen Variablen?

Reichlich.

Okay, als Hinweis: Das hier kann dir, Threadersteller, recht egal sein, wenn du gerade mit dem Programmieren anfängst. Aber ich möchte trotzdem einmal darauf aufmerksam machen, dass globale Variablen in fast allen Fällen ein schlechtes Programmdesign darstellen. Man sollte in den meisten Fällen also darauf verzichten und sich anders behelfen. Zusätzlich sind globale Variablen nicht nur selber ein schlechtes Design, sondern weisen sie auch darauf hin, dass auch an anderen Stellen das Programm nicht gut konzipiert wurde.
Wenn du also schön lernen möchtest und dein Projekt eventuell vergrößern möchtest, versuch direkt alles ohne globale Variablen zu machen.

 

[Rho]

Wobei die globale Variable in dem Code-Schnippsel das geringste Problem darstellt. ^^

Ich bin ja wirklich neugierig, was er denn eigentlich vorhat.

 

[-Alexander-]

Ich würde gerne in der einen Funktion die Variable alle 10 Sekunden um 1 erhöhen und wenn diese 4 erreicht hat wieder auf 1 setzten. Die zweite Funktion soll per Klick auf eine Grafik ausgeführt werden und die Variable um 1 erniedrigen. Die 3. Funktion nimmt die Variable und gibt entsprechend ein Bild aus. Soll also eine Slideshow werden.

 

[Rho]

Hier ist mal als Beispiel eine sehr, sehr, sehr einfache Slideshow. Falls du es testen willst, musst du neben der JS- und der HTML-Datei noch vier Bilder (0.jpg ... 3.jpg) im gleichen Verzeichnis haben oder das Array mit den Bildernamen entsprechend im Code anpassen. Den Code solltest du so aber keinesfalls produktiv einsetzen. Das soll lediglich einen möglichen Ansatz zeigen, wie man das Problem lösen könnte.

Für solche Allerweltsaufgaben ist es normalerweise das sinnvollste sich fertige JS-Bibliotheken zu besorgen anstatt das Rad immer wieder neu zu erfinden. Selbst wenn man so etwas wie die Slideshow komplett selbst entwickeln wollte, würde man in der Regel auf Helferlein wie jQuery zurückgreifen. In dem Beispiel habe ich aber mal bewust darauf verzichtet. jQuery solltest du dir übrigens unbedingt mal ansehen. Erspart einem eine menge Arbeit, vor allem wenn man mit dem DOM arbeitet.

slideshow.js

function Slideshow(target, images) {
    var index = 0,
        intervalInSeconds = 10,
        timer;

    var resetTimer = function () {
        clearInterval(timer);
        timer = setInterval(autoNext, intervalInSeconds * 1000);    
    };    

    var autoNext = function () {
        index = (index + 1) % images.length;
        showImage();
    };

    var showImage = function () {
        var currentImage = images[index];
        target.src = currentImage;
    };

    this.next = function () {
        autoNext();        
        resetTimer();
    };

    this.previous = function () {
        index = (index - 1 + images.length) % images.length;        
        showImage();
        resetTimer();
    };

    resetTimer();
}

slideshow.html

<!DOCTYPE html>
<html>
<head>
    <title>Demo Slideshow</title>
    <meta charset="utf-8">
    <script src="slideshow.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var slideshow = new Slideshow(
                document.getElementById("slideshow"),
                ["0.jpg", "1.jpg", "2.jpg", "3.jpg"]
            );

            document.getElementById("next").onclick = slideshow.next;
            document.getElementById("previous").onclick = slideshow.previous;
        });        
    </script>
</head>
<body>
    <img id="slideshow" src="0.jpg" alt="Slideshow">
    <p>
        <a id="previous" href="#previous"><< Previous</a> | 
        <a id="next" href="#next">Next >></a>
    </p>
</body>
</html>

Edit: Hier ist noch zum schnellen Ausprobieren eine Online-Demo: Simple Slideshow - JSFiddle

 

[-Alexander-]

Danke, das sieht doch schonmal gut aus. Ich würde aber auch gerne einen sanften Übergang zwischen den Bildern haben, also das ein Bild das andere überblendet. Kann man das dort noch einbauen?

 

[Rho]

Wie bereits gesagt, würde ich an deiner Stelle einfach eines der zigtrilliarden vorhandenen und erprobten Slideshow-Scripts verwenden. Es sei denn, es geht dir nicht um die Slideshow an sich, sondern um das Wissen, wie man so etwas programmiert. In dem Fall würde ich aber zumindest mal einen Blick auf jQuery werfen. Damit sind z.B. auch relativ leicht die von dir gewünschten Übergänge zwischen den Bildern machbar.

 

[-Alexander-]

Ich habe allerdings noch kein Skript gefunden, bei dem es eine Überblendung der Bilder sowie eine Möglichkeit jedes Bild einzelnt auszuwählen und ein Bild vor bzw. zurück auszuwählen gibt. Darf man denn ein fremdes Skript ohne weiteres nutzen?

 

[Rho]

Naja, nach "js slideshow" gesucht und unter den ersten Treffern war z.B.: SlidesJS Basic Code Example

Wegen der Nutzung irgendwelcher Scripts musst du dir keine Sorgen machen. In der Regel werden die schon unter entsprechenden Lizenzen veröffentlich, die Nutzung und auch Anpassung erlauben. Wenn du auf der sicheren Seite sein willst, siehe einfach nach unter welcher Lizenz etwas veröffentlich wurde und was die jeweilige Lizenz besagt. Aber wie schon erwähnt, daran sollte es wirklich nicht scheitern.

 

[-Alexander-]

Danke für den Link, aber irgentwie wechseln die Bilder da bei mir nur per Klick und nicht automatisch nach einer bestimmten Zeit.

 

[Rho]

Das war ja auch nur ein Beispiel. Gibt diverse Einstellungsmöglichkeiten. Unter anderem kann man das automatische Starten der Slideshow aktivieren. Steht alles in der kurzen und knappen Dokumentation.

Beispiel: Edit fiddle - JSFiddle

 

[-Alexander-]

Das war ja auch nur ein Beispiel. Gibt diverse Einstellungsmöglichkeiten. Unter anderem kann man das automatische Starten der Slideshow aktivieren. Steht alles in der kurzen und knappen Dokumentation.

Beispiel: Edit fiddle - JSFiddle

Danke! Könnte man jetzt noch hinzufügen, das der Link markiert wird, der momentan aktiv ist? Und darf man das Script von der Seite nutzen?

 

[Rho]

Danke! Könnte man jetzt noch hinzufügen, das der Link markiert wird, der momentan aktiv ist?

Edit fiddle - JSFiddle

Und darf man das Script von der Seite nutzen?

SlidesJS, a responsive slideshow plug-in for jQuery (1.7.1+) with features like touch and CSS3

Can I uses SlidesJS on my website?

Yes you can, that's what it's for, but you must keep the copyright and licensing information with the plugin.