Javascript Problem (kompletter Anfänger)

Triggertrix · 07.02.2014

Hallo,

ich versuche gerade mit diesem Tutorial die ersten Gehversuche mit JavaScript und dem ganzen Gedöns dass ich noch nicht verstehe hin zu bekommen.
Ich habe also MAMP installiert, jQuery runtergeladen und in htdocs rein, zusammen mit meiner extrem aussagekräftigen index.html und einer test.txt
Soweit müsste noch alles richtig sein.
Inhalt der index.html ist:

Code:

<!DOCTYPE HTML>
<html>
<head>
<title>Testseite</title>
<script src="jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Hello</h1>

<p>Klick mich an!</p>
<p><a href=“#“>Lade die Datei hallo.txt</a></p>
<script type="text/javascript">
/* <![CDATA[ */ $(document).ready(function() { $("a").click(function(){
$.get("/test.txt", function(text){ $("p:first").fadeOut('fast',function(){ $("p:first").html(text).fadeIn('normal'); });
}); });
});
/* ]]> */
</script>
</body>
</html>

So und wenn ich das jetzt aufrufe, bekomme ich auch fein das H1 und die p Elemente angezeigt, wer hätte es gedacht… aber keinerlei JS Funktionalität… kann mir jemand sagen was ich falsch mache?

Dank und Gruß

d4y · 07.02.2014

Hab mir das Tut mal heruntergeladen...
... Daten über die GET-Methode übermittelt... das ist ein Server Befehl, geht also nur wenn du die Seite auf nem Server hast oder Serverumgebung simulierst.

Triggertrix · 07.02.2014

Soweit so klar, deswegen habe ich ja MAMP installiert, was einen Apache Server startet, worauf ich das dann ja alles laufen lasse… da ich glaube soweit alles richtig zu machen verstehe ich ja auch nicht was das Problem sein könnte…

lustig · 07.02.2014

Nimm mal den / vor test.txt weg und ersetze href=“#“ durch href="#"

Triggertrix · 07.02.2014

lustig schrieb:
Nimm mal den / vor test.txt weg und ersetze href=“#“ durch href="#"

Oh Mann… das war es… also ich habe einfach die Anführungszeichen gelöscht und neu geschrieben (bei beidem) und schwups schon ging es… das ist genau der Punkt den ich dermassen hasse wenn es ums programmieren und Code geht… ein kleiner Punkt der falsch sitzt, nix geht mehr und man kommt beim besten Willen nicht drauf…

Vielen lieben Dank!

hub · 08.02.2014

Moin,
das mit der Raute ist eine halbherzige Lösung, besser wäre es, die Verarbeitung des Events ab hier zu unterbinden:

HTML:

...
function(e) {
    e.preventDefault();
    ...

Gruß Ulli

Triggertrix · 08.02.2014

hub schrieb:
Moin,
das mit der Raute ist eine halbherzige Lösung, besser wäre es, die Verarbeitung des Events ab hier zu unterbinden:

HTML:

... function(e) { e.preventDefault(); ...

Gruß Ulli

Mag zwar nett gemeint sein, aber ich finde weder eine Raute, noch eine Funktion die die Variable E enthält… also wäre gut wenn Du das ein wenig ausführen würdest, damit auch ich das verstehen kann, sofern das an mich adressiert war… s. Überschrift des Threads

Dank und Gruß

hub · 08.02.2014

Triggertrix schrieb:
sofern das an mich adressiert war… s. Überschrift des Threads

Es würde sonst sicher nicht hier stehen ...
schau mal hier ) und dann hier
http://api.jquery.com/event.preventDefault/:

HTML:

// du
$("a").click(function(){
    ...
// geändert:
$("a").click(function(e){
    e.preventDefault();
    ...

Da du jQuery einsetzt, lohnt es durchaus, sich dort mal die Funktionen anzuschauen, sie sind gut dokumentiert und meist auch mit anschaulichen Beispielen versehen.

Gruß Ulli

Triggertrix · 08.02.2014

Ah, ok… jetzt verstehe ich schon mal was Du meinst… ich verhindere mit

hub schrieb:
e.preventDefault();

dass an dieser Stelle etwas anderes ausgelöst wird. Setze quasi ein Stoppschild…
Das mit der Raute habe ich immer noch nicht kapiert, weil ich im Code keine sehe, aber es geht wohl um etwas umgangssprachliches das ich so noch nicht kenne.

Die API Dokumentation finde ich super, allerdings fehlt mir noch (als kompletter Neueinsteiger) die gegenteilige Doku, wenn ich XY machen will, welchen Befehle/Funktion rufe ich am besten in jQuery auf, wie und mit welchen Parametern steht dann ja in der Doku… aber so etwas fehlt mir noch dringend…

Dank und Gruß

hub · 08.02.2014

Ok, manchmal sind die scheinbar einfachen Sachen deutlich komplexer, als es scheint. Der Vorgang der beim Anklicken ausgelöst wird und was dann alles passiert, ist dann doch etwas komplexer.
Mit der Raute im href ( href="#" ) sagst du dem Browser, er soll einen Hashtag (der hier aber nicht wirklich vorhanden ist) verarbeiten, aber keinen neuen Request auslösen - also Seite nicht neu laden, sondern was anderes machen.
Mit .preventDefault() teilt Javascript dem Browser mit, das die Verarbeitung des Events an dieser Stelle enden soll. Also wird nur dein dort geschriebener Code ausgeführt und nicht mehr.
Das ist mal so die Mini-Zusammenfassung deines Problems.
Was mir an deinem Code noch aufgefallen war, ist die Verwendung des Selectors:

HTML:

$("a")

Damit sagst du jedem Link, das er deinen Code verarbeiten soll. Das führt zur unnötigen Fehlersuche. Besser ist es, eine ID zu verwenden (oder, wenn mehrere betroffen sind, auch eine Klasse )

Code:

<a id="ich-bin-einmalig" ....
---
$('#ich-bin-einmalig').click ...

Die Verwendung der Selectoren ist auf der jQuery-Seite sehr ausführlich beschrieben.

Gruß Ulli

Triggertrix · 08.02.2014

Achso… jetzt verstehe ich, also das mit der Raute…
Dem Link eine ID (wie z.B. einem Div) zu geben, kapiere ich grundsätzlich auch.
Um das jetzt aber sinnvoll zu ändern, muss ich glaube ich noch ein paar Schritte laufen… ich kann ganz grundlegend mit Java umgehen, hatte und habe einen heidenrespekt vor allem was mit Programmieren zu tun und mein Hirn scheint da auch nicht das schnellste zu sein… :eek:

Aber ich hatte mir vor ein paar Tagen mal JavaScipt angeschaut und bemerkt dass das auch nicht soooo anders ist und nur in der Schreibweise (zu Java) grössere Unterschiede bestehen… if/else, for Schleifen und so kenne ich ja. Jetzt dachte ich (weil das mehrfach erwähnt wurde) ich schau mir dazu noch jQuery an, da man damit wohl am besten arbeitet. Also habe ich mir dazu o.g. Tutorial geladen… da ich dachte dass dort ein wenig mehr steht… worin ziemlich genau ein Beispiel kam, da das aber bei ums verrecken nicht laufen wollte, kam dieser Thread zu seinem Zombie-Leben.
Heisst ich stehe wirklich noch sehr am Anfang und weiß gar nicht wo ich am besten anfangen sollte um mich da rein zu fuchsen.
z.B. wofür steht das hier???

Code:

/* <![CDATA[ */

Es ist auskommentiert… aber wozu denn dann?

Bei Deinem Beispiel… der Link steht ja im "normalen" HTML, die Anweisung was JS mit dem Link tun soll, steht dann ja in der Funktion. Soweit ich das jetzt verstanden habe, würde ich die ID innerhalb der Funktion vergeben, wäre diese ähnlich einer Variablen nur innerhalb der Funktion -also lokal- gültig.
Ergibt das dann so Sinn? (Bitte nicht lachen)

Code:

<body>
<h1>Hello</h1>
<p>Klick mich an!</p>
<p><a id="icke"; href="#">Lade die Datei hallo.txt</a></p>
<script type="text/javascript">
    $(document).ready(function() {
    $("icke").click(function(){
    $.get("test.txt", function(text){
    $("p:first").fadeOut('fast',function(){
    $("p:first").html(text).fadeIn('normal'); });
}); });
});

</script>
</body>

hub · 08.02.2014

fast richtig. In jQuery verwendest du die Selectoren ähnlich wie in Css, also

HTML:

 $("icke").click(function(){

wäre richtig

Code:

 $("#icke").click(function(){

Die ID "icke" ist eine eindeutige, also in einem Dokument einmalige Kennzeichnung eines Elements.

Triggertrix schrieb:
<![CDATA[

sorgt für eine xhtml konforme Schreibweise. Zu deiner Frage: Ich kann mir über die Entwicklung der Schreibweise und der Möglichkeit, diese Sachen zu kombinieren, nur die Haare (sofern noch vorhanden

) raufen. Um ehrlich zu sein, ich versuche es soweit es geht, diese Geschichten zu umgehen und so weit es geht zu ignorieren. Das ganze hängt an den Interpretationen der verschiedenen Browser ... Auch für Css gibt es so genannte "Hacks" um es jedem recht zu machen. Und nein, nicht der IE alleine ist daran schuld.
Und mal so ganz subjecktiv: egal welcher Browser, man sollte es auf diesen einen reduzieren, das würde das Leben leichter machen - aber vielleicht auch langweiliger? Die Geschichte mit demStandard scheint eine Illusion

Um einen groben Überblick zu bekommen suche mal bei Wikipedia, soweit ich mich erinnern kann, gab es dort mal eine gute Übersicht über dieses Problem.

Duddle · 09.02.2014

Ich komme etwas spät in die Diskussion, aber greife nochmal kurz die Sache mit der Raute auf: Ein Link

HTML:

<a href="#">Foobar</a>

zeigt lediglich auf einen Anker. Vor dem # steht das gewünschte Dokument, nach dem # die gewünschte Position darin. Im gezeigten Link gibt es kein neues Dokument, es wird also das derzeitige behalten. Auch ist keine konkrete Position angegeben, also springt ein Browser standardmässig an den Anfang der Seite (weil er ja irgendwohin springen soll).

Dieses Verhalten wird von JS-Entwicklern benutzt, um mit einem Link eine Funktion aufzurufen, ohne die derzeitige Seite zu verlassen. Der Sprung nervt/verwirrt aber, deshalb wird das Standardverhalten des Browsers mit .preventDefault() unterbunden.

Die Raute im jQuery-Selektor für eine ID ist dann die Übertragung des Konzepts des Ankers, ein normaler Anker verweist ja auf eine ID im HTML. Die jQuery-Entwickler hätten auch "@foobar" als Selektor für eine ID nutzen können, die Raute ist aber intuitiver.

Duddle

Triggertrix · 09.02.2014

Ok, Danke Ihr beiden. Es wird langsam heller in meinem Kopf!

Zwei Fragen noch…
die erste kann ich mir fast schenken, will aber sicher gehen…
Die vergebene ID (z.B. "icke") kann ich wenn zwei Zeilen später wieder ein Link kommt theoretisch schon verwenden, hätte dann aber das Ergebnis das exakt derselbe Funktionsaufruf (?) stattfindet, nämlich den Text aus fest.txt aufzurufen. Stimmt?
Das hiesse ich müsste für jeden Link den ich setze, genau dieselbe Funktion wieder und wieder schreiben und nur jedes Mal das Dokument das aufgerufen wird ändern… das ist doch ein bisschen umständlich. kann man das nicht bündeln? (Also es geht ja nur um das Beispiel, nicht dass ich das konkret vorhätte)
zweite Frage: innerhalb der Funktion click (müsste doch der Funktionsname sein?), rufe ich eine weitere Funktion auf, nämlich e.preventDefault(); alle anderen sind an jQuery gekoppelt, durch das Dollarzeichen, ausser eben diese Funktion… wenn ich ein Dollarzeichen davor setze, geht das "Script" nimmer… nach meinem (offenbar falschen) Verständnis müsste aber doch eines hin, oder?

Dank und Gruß

Duddle · 09.02.2014

Erstens: vergib IDs nicht mehrfach, das ist eine sehr nützliche Konvention. Sollen mehrere Elemente in HTML gleich angezeigt werden, weist du ihnen eine Klasse zu und sprichst diese an. Das gleiche gilt für jQuery: vergib und selektiere eine Klasse, wenn du mehreren Elementen ein gleiches Verhalten zuweisen willst.

Algorithmen/Funktionen sollten wiederverwendbar sein, das merkst du ja selbst. Dafür musst du sie abstrahieren, also allgemeiner schreiben. Der direkteste Schritt dahin ist die Parametrisierung der Funktion, also das Nutzen von Funktionsparametern zur Steuerung des Algorithmus. Ein Beispiel davon hast du schon selbst in deinem Code:

HTML:

$.get("test.txt", function(text){
  $("p:first").fadeOut('fast',function(){
   $("p:first").html(text).fadeIn('normal'); }
  );
});

Hier gibst du der Callback-Funktion von $.get() den Parameter text mit, welcher dann als Variable im Funktionskörper vorhanden ist. Übergibst du anderen Text in text (der Inhalt kommt ja aus der geholten URL, bspw. "test.txt"), verhält sich der Rest der Funktion anders.

Um das jetzt konkreter zu machen, du möchtest genau die genannte Stelle verallgemeinern. Das heißt, du ersetzt "test.txt" durch eine Variable. Diese Variable füllst du vorher mit den notwendigen Informationen und schon ist dieser Teil der Funktion verallgemeinert und kann mehrfach verwendet werden. Jetzt musst du nur noch festlegen, woher diese notwendige Information kommt - irgendwo muss ja stehen, ob der Link für "test.txt" oder "foo.html" oder "bar.css" gilt.
Ein Weg wäre, es als href des Links zu setzen, diesen dann auszulesen und in der o.g. neuen Variable für $.get() zu speichern. Das würde dann auch bewirken, dass Nutzer ohne JS an die verlinkten Dokumente kommen.

Ein anderer Weg wird neuerdings häufiger in Form von "data-"-Attributen genommen. Diese geben dir die Möglichkeit, zusätzliche Informationen standardkonform in ein Element zu bringen. Diese eigenen Attribute kannst du dann ebenfalls mit jQuery via .data() auslesen und benutzen.

Triggertrix schrieb:
zweite Frage: innerhalb der Funktion click (müsste doch der Funktionsname sein?), rufe ich eine weitere Funktion auf, nämlich e.preventDefault(); alle anderen sind an jQuery gekoppelt, durch das Dollarzeichen, ausser eben diese Funktion… wenn ich ein Dollarzeichen davor setze, geht das "Script" nimmer… nach meinem (offenbar falschen) Verständnis müsste aber doch eines hin, oder?

Das $-Zeichen ist nur eine Variable für das jQuery-Objekt. Du kannst jedes $ problemlos mit jQuery ersetzen und das Script funktioniert. Dieses Objekt bietet die vielen Funktionen (bzw. "Methoden" im Kontext einer Klasse) an, die du benutzt.

Variablen selbst werden in jQuery-Scripten oft mit $ begonnen, wenn hinter der Variable ein jQuery-Objekt steckt. Machst du bspw.

HTML:

$("#foobar");

gibt diese Funktion ein jQuery-Objekt zurück. Würde ich dieses speichern wollen, würde ich

HTML:

var $myFoobar = $("#foobar");

schreiben, aber

HTML:

var myFoobar = $("#foobar");

funktioniert exakt gleich.

Dein e in der Funktion ist der Parameter (siehe oben) für die Funktion und wird automatisch mit dem auslösenden Event gefüllt. Wenn du e umbennen willst, muss das auch im Parameter passieren. Die .preventDefault()-Funktion kommt auch nicht ursprünglich von jQuery, sondern JavaScript selbst. Das e ist ein Event-Objekt, kann also bspw. kein .get(). Es hat aber andere Funktionen und Attribute.

Duddle

hub · 09.02.2014

Zur ersten Frage: wenn mehrere (aber nicht alle) Links die gleiche Funktion nutzen sollen, definierst du es über eine Klasse - eine Id sollte einmalig im Dokument sein.

HTML:

<a class="hole-text-a">link 1</a>
<a class="hole-text-a">link 2</a>
<a class="hole-text-a">link 3</a>
<a class="hole-text-b">link 4</a>
// im js
$('.hole-text-a').click(function(e) {// holt den text a};
$('.hole-text-b').click(function(e) {// holt den text b};

Mit einer zusätzlichen Id oder weiteren Klassen könntest du innerhalb der Funktion noch Einfluß auf den Ablauf nehmen.
Bei deiner zweiten Frage kann ich dir nicht ganz folgen, kannst du das mal als Beispielscript demonstrieren, was du meinst?

Ps: Duddle war schneller, nimm es als Ergänzung