Wikipedia Viewer für Free Code Camp

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Wikipedia Viewer für Free Code Camp

    Hallo! Muss für eine Aufgabe einen Wikipedia Viewer (für Free Code Camp) erstellen. Dabei bin ich so vorgegangen, dass ich vorhandenen Code eines anderen Entwicklers genommen habe und versucht habe diesen umzubauen. Ja ich weiß, man sollte möglichst alles selber erstellen, aber ich kann es nur dann verstehen, wenn ich fertige Beispiele, wie es ein anderer gemacht habe, schon zu sehen bekomme ^^

    Der Code des Entwicklers ist für mich jedoch nicht ganz schlüssig... HTML und CSS sind klar (ist ja auch nicht schwer ^^), jedoch verstehe ich zu großen Teilen die JQuery Zeilen nicht. Ich müsste, um die Aufgabe positiv abschließen zu können, noch einen Random-Button hinzufügen, der beim Klick einen zufälligen Wikipedia-Artikel auf meiner Seite ausgibt (genauso wie es der Entwickler beim gezielten Suchen eines Artikels gemacht hat). Den Random-Button habe ich erstellt, jetzt weiß ich jedoch nicht, wie ich es schaffen kann, diesem "Leben einzuhauchen"... eine simple click-function krieg ich hin, damit sich halt eine random-page neu öffnet, aber auf meiner Seite den Inhalt wiederzugeben, dass ist mir als Anfänger dann doch ein bissl zu heftig ^^

    Ich würde euch daher bitten, wenn jemand Zeit hat, mir Schritt für Schritt den JQuery-Code des Entwicklers zu erklären, vllt. sogar jede Zeile zu kommentieren und mir dann ebenso kommentiert einen Weg zu zeigen, wie ich den Random-Button die intendierte Funktionalität zukommen lassen kann.


    Ich will das endlich verstehen :D

    Der Link zum Pen: codepen.io/Kluki91/pen/jwKjRR


    Vielen Dank schon Mal.

  • Hey,
    ein Webexperte bin ich nicht und erst recht nicht für JavaScript.
    Auf dem Level auf dem ich bin, würde ich das wie folgt interpretieren:

    Das Item, dass deiner Funktion übergeben wird soll wohl den HTML Code der wiki Seite beinhalten. Mit item.title solltest so den Titel der Seite bekommen und mit item.snippet das HTML.
    Wenn deine Seite leer bleibt, bedeutet das, dass entweder diese Funktion nicht richtig ausgeführt wird (glaube ich weniger) oder das item eben nicht alle nötigen Informationen beinhaltet.

    Versuch mal

    Quellcode

    1. alert(item);
    2. alert(item.title);
    3. alert(item.snippet);

    in deine Funktion mit einzubauen.
    Keine dieser Meldungen sollte undefine ausgeben. Ist dies doch der Fall, liegt dein Problem an anderer Stelle.

    All diese Angaben sind ohne Gewähr.
    Für Korrekturen und auch Widersprüche wäre ich dankbar.

  • Frage 1: Möchtest du die normale Suche und die random Seite gleich anzeigen lassen? Falls Nein, wieso fügst du die dann aktuell in ein iFrame ein?
    Frage 2: Fragen ala "Erklärt mir mal bitte den Code" sind schwierig, weil dir offenbar noch das Grundverständnis für jQuery fehlt und dir die Erklärung dann entsprechend wenig hilft. Es gibt eine ziemlich gute Doku für die jQuery API. Die sollte immer deine erste Anlaufstelle sein.


    JavaScript-Quellcode

    1. function search(){
    3. // alles aus dem div löschen, sodass nur noch <div id="display"></div> im Quellcode steht
    4. $("#display").empty();
    6. // .val() holt den Wert des value-Attributs, sprich das was der Nutzer eingibt
    7. sq = $('#srch').val();
    9. // .getJSON() ruft eine URL auf und bearbeitet das zurückkommende Objekt als JSON mit Hilfe der Callback-Funktion (hier unbedingt die Doku lesen)
    10. $.getJSON("https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch="+sq+"&srnamespace=0&srwhat=text&titles=Main%20Page&callback=?", function(d) { // <-- die Callback-Funktion
    12. // .each() ist eine Schleife, die die Funktion für jedes Item d.query.search ausführt
    13. $.each(d.query.search, function(i, item) {
    14. //console.log(item.title);
    15. //console.log(item.snippet);
    17. // hier wird die gewünschte HTML-Struktur erzeugt und mit den Werten befüllt
    18. var wiki = '<div class="entry">'+
    19. '<div class="title">'+item.title+'</div>'+
    20. '<div class="snippet">'+item.snippet+'</div></div>';
    22. // und anschließend mit .append() in das div eingefügt
    23. $("#display").append(wiki);
    24. });
    25. });
    27. // zum Schluss wird noch der Suchbegriff zurückgesetzt
    28. $('#srch').val('');
    29. }
    Alles anzeigen
    Mal davon abgesehen, dass der Code nicht wirklich sauber geschrieben ist, solltest du beim Entwickeln von JavaScript immer die Entwickertools (und insbesondere die Konsole) offen haben, um überprüfen zu können, wo du welche Werte vorliegen hast (immer mit console.log(irgendwas) ausgeben lassen). Natürlich geht das auch mit Alerts, finde ich persönlich aber sehr unpraktisch.

    Ich hoffe meine Anmerkungen haben etwas Licht ins Dunkel gebracht und du kannst die random-Funktion selber schreiben. Kleiner Tipp: die sollte, bis auf die URL, genau gleich aussehen.

  • Hey Leute, vielen Dank für die Rückmeldungen. Bezüglich der letzten Antwort von @freeek, dass die random-Funktion bis auf die URL genau gleich aussehen sollte... so wie du das kommentiert hast und ich das verstanden habe, schaut das Ganze nun folgendermaßen aus :D Überraschung, es funktioniert nicht ^^ Da ich ja bei meiner function searchRandom einen zufälligen Artikel beim Klick auf den Random-Button kreieren will und kein value brauche, habe ich die Codezeilen rausgelöscht...


    Ja ich weiß, bin halt noch ein Anfänger - schau mir auf jeden Fall JQuery heute bzw. morgen genauer an.

    JavaScript-Quellcode

    1. function searchRandom(){
    2. $("#display").empty();
    4. $.getJSON("https://en.wikipedia.org/wiki/Special:Random="+"&srnamespace=0&srwhat=text&titles=Main%20Page&callback=?", function(data) {
    6. $.each(data.query.search, function(i, item){
    7. //console.log(item.title);
    8. //console.log(item.snippet);
    9. var wiki2 = '<div class="entry">'+
    10. '<div class="title">'+item.title+'</div>'+
    11. '<div class="snippet">'+item.snippet+'</div></div>';
    12. $("#display").append(wiki2);
    13. });
    14. });
    16. }
    Alles anzeigen

  • Okay, da muss ich mich entschuldigen. Das habe ich unglücklich formuliert. Deine URL ist schlicht falsch, über diesen Link erhälst du zwar eine zufällige Seite, diese ist aber für dich nicht (oder besser gesagt: nur sehr frickelig) nutzbar. Aber dafür gibts ja die API, genauso wie bei der search-Funktion. Die URL für eine zufällige Seite kannst du dir über die API-Doku raussuchen. Ganz unten findest du Beispiellinks, die dir helfen sollten den Aufbau zu verstehen. Ein möglicher Aufbau für deine URL wäre also z.B. https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=1&format=json&callback=?

    Das nächste Problem ist nun, dass die Antworten, die du bei den beiden Anfragen erhälst, nicht deckungsgleich sind. Das bedeutet, dass du deine Variablen anpassen musst.
    Vergleiche dazu mal die Ausgabe für die Suche mit der zugehörigen Funktion und anschließend mit der Ausgabe der zufälligen Seite. Dann wirst du feststellen, dass bspw. das Attribut data.query.search (Zeile 6) nicht gefunden werden kann, weil es kein query-Attribut gibt. Das muss durch random ersetzt werden und so weiter.

    Idee klar?

    PS:

    Kluki11 schrieb:

    Überraschung, es funktioniert nicht
    Das ist keine Hilfe ;) Versuch rauszufinden, wo dein Programm abschmiert. Füge an den wichtigen Stellen console.log(...) ein, um erkennen zu können, was genau nicht tut. Dann können wir dir auch einfacher helfen. Bei diesem Problem relativ egal, aber für die Zukunft.

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von freeek ()