Hallo,
wie ihr sicherlich schon bemerkt habt, bin ich nicht der Profi im Webprogrammieren.
Allerdings würde ich mir schon gerne die Grundkenntnisse aneignen.
deshalb würde ich gerne von ganz vorne anfangen
mein nächstes Projekt wird es sein
verschiedene Zahlen auf der Weboberfläche anzeigen zu lassen.
und zwar habe ich Bild er die von 1-100 gehen
das erste Bild heißt logischerweiße 1.png
das zweite Bild heißt 2.png
nun würde ich gerne einen Button einen Button programmieren wenn ich auf diesen Klick dann zählt er im Sekundentakt hoch.
auf meiner Weboberfläche sieht das dann wie folgt aus:
Ich drücke den Button 1 Sekunde = 1.png wird angezeigt
ich drücke den Button 2 Sekunden = 2.png wird angezeigt
usw.
dies soll natürlich alles in echtzeit geschehen.
also wenn ich den Button z.B 30 Sekunden drücken, dann will ich dass die Zahlen von 1-30 auf meiner Weboberfläche sichtbar waren
1.png
2.png
3.png
...
Kannn mir jemand sagen wie man sowas umsetzt?
vielen Dank im voraus
Ajax Grundlagen
-
- User
- Beiträge: 34
- Registriert: Donnerstag 6. August 2015, 19:23
das mit dem Zähler ist auch kein Problem.
Das Problem ist wie dies über Ajax anzeigen lassen kann.
damit ich nicht die ganze Seite neu laden muss, sondern nur den Teil der sich ändert
Das Problem ist wie dies über Ajax anzeigen lassen kann.
damit ich nicht die ganze Seite neu laden muss, sondern nur den Teil der sich ändert
Dafür brauchst du kein Ajax. Mit JavaScript kannst du das Aussehen der Seite doch schon beliebig umgestalten. Du könntest in diesem Fall einfach den Verweis auf das Bild austauschen.köttbullar hat geschrieben:Das Problem ist wie dies über Ajax anzeigen lassen kann.
-
- User
- Beiträge: 34
- Registriert: Donnerstag 6. August 2015, 19:23
und wie funktioniert dann sowas?
kann mir jemand ein Beispiel geben?
kann mir jemand ein Beispiel geben?
-
- User
- Beiträge: 34
- Registriert: Donnerstag 6. August 2015, 19:23
Das verstehe ich, kannst du mir ein paar gute quellen nennen, bei denen ich nachlesen kann wie Ajax funktioniert.
Am besten mit praktischen beispielen anhand von Django
Am besten mit praktischen beispielen anhand von Django
Code: Alles auswählen
<html>
<body>
<input type="button" min="0" max="100" value="0" step="5" onclick="showValue(this.value)" />
<span id="button">0</span>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("button").innerHTML=newValue;
}
</script>
</body>
</html>
@köttbullar: AJAX macht heutzutage praktisch niemand mehr, es müßte eigentlich AJAJ heißen, oder ganz allgemein asynchrone Datenabfrage mit Javascript. Und da steckt ja auch schon alles drin, was Du wissen mußt. Der Server liefert Daten, wie die abgefragt werden, ist mal egal und damit muß man auf Django-Seite gar nichts machen, außer, dass man statt HTML jetzt JSON zurückliefert. Interessanter ist die Browserseite. Dort setzt Du am besten jQuery ein, das vereinfacht Dir einiges.
Mal das mit dem Mausdrücken → 1 mal pro Sekunde Wert erhöhen bis Wert = 100 oder Maus losgelassen (oder Maus verlässt Schaltfläche) ganz grundsätzlich umgesetzt:
Code: Alles auswählen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<input type="button" id="button" name="button" value="0">
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var context = {};
var increaseCounter = function (context) {
console.log(context);
if (context.value < 100) {
context.value += 1;
context.element.value = context.value;
} else {
clearInterval(context.timerId);
}
};
var startCounter = function (event) {
var context = event.data;
context.element = this;
context.value = parseInt(this.value);
context.timerId = setInterval(increaseCounter, 1000, context)
console.log(context);
};
var stopCounter = function (event) {
clearInterval(event.data.timerId);
};
$(function () {
$('#button')
.mousedown(context, startCounter)
.mouseup(context, stopCounter)
.mouseleave(context, stopCounter);
});
</script>
</body>
</html>
- noisefloor
- User
- Beiträge: 4150
- Registriert: Mittwoch 17. Oktober 2007, 21:40
- Wohnort: WW
- Kontaktdaten:
Hallo,
https://de.wikipedia.org/wiki/Ajax_%28Programmierung%29
Und, wie oben schon erwähnt, macht der Einsatz von jQuery das ganze einfacher.
Hast du schon mal in JavaScript programmiert?
Gruß, noisefloor
https://de.wikipedia.org/wiki/Ajax_%28Programmierung%29
Und, wie oben schon erwähnt, macht der Einsatz von jQuery das ganze einfacher.
Hast du schon mal in JavaScript programmiert?
Gruß, noisefloor