Suche Anregung, Hilfestellung, Tips für ein Problem.

Schon festgestellt? Dem Forum sind gerade alle Interaktionsmöglichkeiten genommen. :(

Mehr dazu unter: Abstimmung über das Forum

  • Bitte entschuldigt den Titel, mir ist leider nichts sinnvolles eingefallen.


    Hallo Leute,


    was JS und PHP angeht bin ich sehr neu uns unerfahren. Daher suche ich ein paar Anregungen, Hilfestellungen und vielleicht paar nützliche Links und Tips.

    Also ich versuche mal das Problem zu beschreiben. Ich habe mehrere Websites mit vielen Webpages. Diese werden mit reinem HTML5, CSS oder auch mit JS, PHP und es werden auch, glaube Frameworks ist das richte Wort benutzt wie, Bootstrap, React,... benutzt. Jetzt habe ich eine Datenbank mit bestimmten Wörtern und zu diesen Wörtern gibt es auch eine Beschreibung. Wenn jetzt eine der Webpages eines dieser Wörter enthält möchte ich 1. dem Wort ein Icon hinzufügen und 2. ein Tooltip mit Beschreibung geben. Das Problem, das ganze soll nur durch ein hinzufügen eines Scriptes von Aussen geschehen. Das einzige was man dazu machen muss ist <script src="meinScript.js"></script> einzufügen. Und es soll für alle Webpages funktionieren, egal wie und womit diese erstellt wurden.

    Ich will eine Funktionalität bereitstellen für wen auch immer es nutzen will, ohne dass der Jenige den Code auf seiner Website einfügen muss. Ob es Sinnvoll ist oder nicht, ist eine andere Sache, es geht um ein Projekt an der Uni.

    Meine Frage, ist so etwas überhaupt möglich? Falls ja, wie ist der Ansatz? Gibt es ein JS, jQuery Event das z.B. ausgelöst wird wenn die Seite an sich fertig ist und bereit zu Darstellung ist und ich dann kurzerhand den Code manipulieren kann. Leider stehe ich wie der Ochs vor dem Berg und weiß gar nicht ob so etwas möglich ist und wenn ja, wie genau.


    Danke im Voraus,

    Oli

  • Ja, das ist grundsätzlich möglich. Gibt es auch bereits in Form von Browser Plugins.

    Gibt es ein JS, jQuery Event das z.B. ausgelöst wird wenn die Seite an sich fertig ist und bereit zu Darstellung ist und ich dann kurzerhand den Code manipulieren kann.

    Ja, und JQuery könnte das ganze allgemein einfach und schnell lösen. Neben dem Javascript brauchst du natürlich auch eine PHP Datei, die die Daten von der Dagtenbank abholt.


    Technisch würde das natürlich so verlaufen, dass sich Javascript guckt ob diese bestimmten Wörter auf der Website zu finden sind, sich alle notiert und diese dann nach Php rüberschickt, damit Php alle Infotexte der Wörter die abgefragt werden ranholen kann. Die Daten aus der Datenbank gehen wieder zurück nach Javascript, welches dann die Infotexte auf der Website platzieren kann.


    Ich weiß ja jetzt nur nicht, ob du überhaupt was damit anfangen kannst, wenn du es doch nicht programmieren kannst?

  • Gibt es ein JS, jQuery Event das z.B. ausgelöst wird wenn die Seite an sich fertig ist und bereit zu Darstellung ist und ich dann kurzerhand den Code manipulieren kann.

    Bevor für so eine Bagatelle zu jQuery gegriffen wird, werfe ich mal DOMContentLoaded in den Raum. Das ist das korrekte JavaScript-Event dafür.

  • Hallo DER,


    erst einmal vielen dank für die Antwort.

    Also wie ich auf die Daten zugreife ist gar kein Problem. Es geht eher nur darum wie ich den Tooltip und das Icon hinzufüge. Der Code dafür ist auch kein Problem. Das Problem ist wie ich diesen Code in eine bestehende Seite einfüge.

    Die Webpage muss erst mal erzeugt werden, dass ganze PHP, JS, Bootstrap,... muss erst mal laufen und wenn dass fertig, also wenn die original Seite fertig ist, will ich mit meinem Script kommen und meinen Code einfügen.

    Welches Event wäre das?

    Also noch mal ein Beispiel:

    Es gibt eine Seite die hat <h2>...</h2> Tag. Dann soll mein Script z.B. es zu <h3>...</h3> umändern. Wenn dann die Seite wieder neuaufgerufen wird, ist wieder der original <h2> drin bis es mein Script ändert.


    Sorry bin echt schlecht im Erklären.

    Wie würdest Du/Ihr da vorgehen. Welches Event nimmt man da?

  • Hallo Arne,


    da hast Du völlig recht, war auch nur ein dummes Beispiel :)

    Im Projekt geht es um Eigennamen, wenn diese sich in der Datenbank befindet, solle diese gekennzeichnet werden, z.B. mit einem Icon oder das Wort soll eine andere Farbe haben und zusätzlich soll noch ein Tooltip mit einer kurzen Erklärung angehängt werden. Das wichtige ist aber, dass man das ganze nur mit einem Script von Aussen bewerkstelligen soll. Man soll eben es nicht in der Datei ändern. Und wenn man das Script entfernt, dann soll alles so sein wie es war.

    Sagen wir mal das Script wird für dieses Forum im Header eingefügt, dann sollen die erkannten Eigennamen das Forumlogo als Icon bekommen. Hat man keine Lust mehr drauf, dann entfernt man einfach das Script und alles ist beim alten. Ob so etwas sinnvoll ist oder nicht, ist nicht wichtig. Nicht alles im Studium muss/ist sinnvoll :)

  • Ok, jetzt klingt das schon plausibler. Wie sieht denn Dein Versuch aus?


    Das JavaScript würde ich in eine eigene Datei auslagern und nur über das Script-Tag einbinden:

    HTML
    1. <script type="text\javascript" src="pfad/zu/deiner/datei.js"></script>

    Hinweis: Ja, ich weiß, dass das type-Attribut obsolet ist. Bei mir bleibt das aber drin.


    In der Datei solltest Du das bereits angesprochene Event verwenden:

    JavaScript
    1. document.addEventListener( 'DOMContentLoaded', function(event) {
    2.     // ...here code for dom manipulation
    3. });

    An der Stelle wäre jetzt aber wie gesagt Dein Versuch interessant.

  • type="text\javascript" ist bei mir auch drin :D


    Also dieses Event 'DOMContentLoaded' wir ausgelöst, wenn die Seite bereit zur Darstellung ist? D.h. es ist völlig egal wie eine Seite im Browser erstellt wird, egal ob mit reinem HTML oder mit PHP, wenn der Content geladen wird, löst es dieses Event aus. Und dann kann ich hergehen und was auch immer mit diesen Daten machen. Verstehe ich die Logik dahinter in etwa richtig? Also dann würde ich es so machen, wie ich es bis jetzt mit JS immer gemacht habe. Ich dachte es macht vielleicht einen Unterschied wie ein Seite/Webpage aufgebaut wird. Dann könnte es ja viel leichter sein als gedacht.

  • Wie eine Seite aufgebaut wird, spielt in dem Fall keine Rolle. Wenn Du schon PHP in den Raum wirfst, nehme ich das mal als Beispiel zur Erklärung. PHP wird auf dem Server ausgeführt. Und ganz egal, wie komplex Deine Anwendung wird, PHP sendet am Ende immer das Dokument als reines HTML an den Browser. Ob Bröckchenweise oder im Ganzen sei jetzt mal dahingestellt. Wichtig ist das Verständnis, dass der Browser ein HTML-Dokument erhält, das er rendern muss, nichts weiter. Es spielt also absolut keine Rolle, wie Du eine Website aufbaust.


    Das Event DOMContentLoaded ist exakt das Ereignis, das gefeuert wird, wenn der Browser das Dokument komplett geladen hat. Ab dem Punkt ist ein Zugriff auf jedes beliebige Element möglich.

  • Dank für die Erklärung Arne! Bin schon sehr gespannt wie es mit dem DOMContentLoaded Event funktioniert.