Ein Link/Button soll zwei unterschiedliche Aktionen ausführen

[sunlite]

Hallo liebe Java-Community,

als blutiger Anfänger würde mich interessieren, ob es mit reinem Javascript (also nicht JQuery, Vanilla, etc.) möglich ist, einen Link oder Button so zu gestalten, dass er zwei Aktionen zu unterschiedlichen Zeitpunkten ausführen kann? Falls das geht, wie würde ich das anstellen?

Hier meine Idee:
Ich habe einen Link (alternativ auch <button>).

PHP-Code:

<?php 

<a href="/teil1.html" target="_self">Hier drücken</a> 

[bernd]

Jetzt mal so mein random Gedanke hierzu:
Du musst ja irgendeine Art Eventlistener mit dem Button verknüpfen.

Und bei dem müsste man vemrutlich einfahc gucken wie viel Zeit zwischen 2 hintereinander folgenden "MouseDown" und "MouseUp" Events vergeht.
Sind es bspw. weniger als 1 Sekunde, handelt es sich wohl um einen einfachen Klick.

Sind es 3 oder mehr Sekunden, dann handelt es sich wohl um eine gedrückt gehaltene Maustaste.

Nur so als grundsätzliche Anregung :-)

Vermutlich wird man direkt über das href Attribut da nichts machen können, da müsste der Javascript Code selbst vermutlich die Weiterleitung auf teil1.html bzw. teil2.html übernehmen :-)

[admin]

Moin, erstmal.
Ich muss da auch mal reinhacken und etwas sagen

Hallo liebe Java-Community,

Das macht aber jeder Anfänger falsch.
Das ist Javascript und nicht Java.
Java ist eine andere Programmiersprache.

ob es mit reinem Javascript (also nicht JQuery, Vanilla, etc.) möglich ist
Ist sowas mit purem Javascript möglich?

Reines Javascript , ohne irgendwelche extra Scheiße, ist Vanilla.

Hier mal ein Text von selfhtml (leider benutze ich ein Quote und keine Zitate , weil finde ich irgendwie nicht. Muss ich wohl noch ins Forum einbauen)

Mit Vanilla-JS bezeichnet man im Zeitalter der vielen JavaScript-Frameworks wie jQuery das eigentliche, reine JavaScript.
Obwohl jQuery als Quasi-Standard in vielen Webseiten eingesetzt wird, gibt es in den letzten Jahren vermehrt Bestrebungen, Anwendungen wieder in reinem JavaScript zu schreiben, da mittlerweile alle modernen Browser die DOM-Methoden kennen.

Also Javascript ist umgangssprachlich als Vanilla JS bekannt.



Mein Vorredner hat dir schon einige Anregungen gegeben.
Wie soll der Button den aussehen , wie ein Link oder Button?

Am einfachsten wäre ein Button, mit einen click Event (vielleicht auch mouse event).
In den click event musst du die Taste der Maus abfragen ob sie gedrückt ist und wenn ja ein Timer laufen lassen.

Sobald die Taste losgelassen wird, Stopps du die Zeit.
Die gestoppte Zeit kannst du dann mit if else dann vergleiche ( switch case ,oder Array vergleiche gehen auch).
Dann könntest du auch hundert Links mit einen Button öffnen.


Anstatt ein Button würde ein <a> Element auch gehen , dafür müsste man das Browser-Verhalten unterdrücken mit preventDefault , finde aber Button erstmal besser.

Hört sich erstmal schwer an ist es aber eigentlich nicht.
Als Anfänger vielleicht schon etwas schwer, aber machbar.

Wie weit bist du den in Javascript?
Willst du es wirklich lernen?
Dann begleiten wir dich, damit du es selber hinbekommst.

So würde ich anfange.
Erstelle ein Button mit clickevent , der eine Seite öffnet.

Den Button
Du brauchst https://www.mediaevent.de/javascript/events.html
den Seiten öffner
https://www.mediaevent.de/javascript/Jav...hoden.html

[sunlite]

hallo lieber bernd, hallo lieber admin,

ja. tatsächlich würde ich gerne javascript lernen. eure ideen sind sehr gut - die hatte ich tatsächlich auch. ich komme aus der php-programmierung, weshalb mir der wechsel hin zu javascript etwas schwer fällt. aber ich versuche aus meinem verständnis heraus mal ein javascript zu erstellen und wäre euch sehr dankbar, wenn ihr da mal einen blick drüber werft und mir sagt, was falsch und richtig ist und warum.

vielen dank soweit
beste grüße
sunny

[rzscout]

Man sollte HTML, CSS und JavaScript beherschen bevor man PHP lernt. Es bringt viel mehr in unserer heutigen Zeit In dieser Reihenfolge unterschiedliche Webtechnologien zu lernen.

[sunlite]

@rzscout:

Bei mir sind es HTML, CSS und PHP ... damit programmiere ich seit Jahren serverseitige Anwendungen. Das hat mir bisher auch immer gereicht. Nun bin ich aber an dem Punkt, an dem ich Web-Apps schreiben möchte, die clientseitige Funktionen haben wie z.B. das schnelle Klicken auf einen Button und das gedrückt Halten desselben Buttons für rund 3 Sekunden, damit dieser unterschiedliche Aktionen ausführt. Insofern bin ich nun an dem Punkt, an dem ich mich mit Javascript beschäftigen muss.

[rzscout]

@rzscout:

Bei mir sind es HTML, CSS und PHP ... damit programmiere ich seit Jahren serverseitige Anwendungen. Das hat mir bisher auch immer gereicht. Nun bin ich aber an dem Punkt, an dem ich Web-Apps schreiben möchte, die clientseitige Funktionen haben wie z.B. das schnelle Klicken auf einen Button und das gedrückt Halten desselben Buttons für rund 3 Sekunden, damit dieser unterschiedliche Aktionen ausführt. Insofern bin ich nun an dem Punkt, an dem ich mich mit Javascript beschäftigen muss.

Hi, ja es funktioniert natürlich auch ohne JavaScript. Man kann mit HTML, CSS und PHP vollwertige Webanwendungen schreiben. Der große Nachteil ist das die Seite nicht Asynchron ist und jedes mal neu laden muss wenn sich der Zustand der Seite ändert. Bei Asynchronen Webseiten werden jediglich Requests an den Server gesendet und empfangen. Zusätzlich können Streams aufgebaut werden. Das ermöglicht es Mit dem Server zu kommunizieren ohne jedes mal die Seite neuzuladen. Jede moderne Webapplikation ist auf JavaScript angewiesen und ist ein fester Bestandteil fast jeder Applikation. Schon seit 2005 ist es ohne Ajax bzw. Asynchrone Übertragung keine effiziente Umsetzung möglich.

Deswegen kann ich dir nur empfehlen JavaScript zu erlernen und dich mehr mit der Thematik zu beschaffen, da HTML, CSS und PHP ohne JavaScript sehr statisch und uneffektiv ist. Gerne darfst du Fragen zu JavaScript in das Forum schreiben und natürlich auch zu PHP und co.

Zu deiner Frage zu den Links oben:

Code:

document.querySelectorAll('a').forEach(function(elem){
    elem.addEventListener('click', function(event){
        event.preventDefault();
        ersteFunktion();
        zweiteFunktion();
    });
});

Hier noch Anmerkungen: Ich würde dir für das Ausführen von Funktionen eher andere HTML-Elemente empfehlen. Unter anderem auch Button oder DIV's etc. Da der Link eine Seite aufrufen soll würde der Funktionsaufruf nichtig werden. Dewegen wird das eigentliche Seitenwechsel oder das Ausführen eines Seitenwechsels mithilfe von der JavaScript-Methode 'preventDefault()' unterdrückt. Ohne diese Funktion wäre es die gleiche Logik als würdest du in einer Funktion nach dem return einige Zeilen Code schreiben - die dann nicht mehr ausgeführt werden würden.


Viele Grüße

rzscout

---

Hallo liebe Java-Community,

als blutiger Anfänger würde mich interessieren, ob es mit reinem Javascript (also nicht JQuery, Vanilla, etc.) möglich ist, einen Link oder Button so zu gestalten, dass er zwei Aktionen zu unterschiedlichen Zeitpunkten ausführen kann? Falls das geht, wie würde ich das anstellen?

Hier meine Idee:
Ich habe einen Link (alternativ auch <button>).

PHP-Code:

<?php 

<a href="/teil1.html" target="_self">Hier drücken</a> 

[sunlite]

Hallo @"rzscout",

das stimmt. Deshalb steht das Erlernen von Javascript nun ganz oben auf meiner Agenda. 
Danke auf für das Script. Ich denke, das ist ein guter Anfang für mich.

Beste Grüße
Sunny