jqmath in javascript einbinden

simmmmmmmmmmmon

Neues Mitglied
Hallo, ich bin gerade dabei jqmath (von https://mathscribe.com/author/jqmath.html ) auf meiner website einzubinden wenn ich es in html normal einbinde funktioniert auch alles. Jetzt will ich es auch mit javascript benutzen also:
Code:
 <script type="module" src="code.js"></script>
Code:
import {parseMath, M} from 'jqmath'
let resultElm = document.getElementById("rechnungdargestellung");
    resultElm.innerHTML= "$$2+2/3$$";
 
    parseMath(resultElm)
aber es funktioniert nicht. Es kommt nur der fehlrecode "Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource" "Grund: CORS-Anfrage war nicht http " was bedeutet, das ich "parsemath" nicht von "jqmath" sondern von einem anderen document importieren muss. Weiß jemand hier wie man das problem beheben oder "parsemath" importieren kann?

Danke schonmal im vorraus
 

alinnert

Mitglied
Wie führst du den Code aus? Wenn ich das selbst ausprobier, bekomm ich einen anderen Fehler, was heißt, dass du irgendwas anders gemacht hast als ich. Laufen diese Dateien direkt im Browser, ohne Build-Step per npm/Node? Ist der untere Codeschnipsel die code.js, die du oben versuchst einzubinden?

Ich kann aktuell nicht sagen, was deinen Fehler überhaupt verursacht.
 

simmmmmmmmmmmon

Neues Mitglied
Ja das ganze läuft aktuell nur im browser, weil sich bei mir die eingabeaufforderung sofort schließt wennn ich damit eine datei öffnen will, ich habe gehofft das ich das auch anders einbinden kann weil ich da sonst noch mehr aufwand reinstecken muss. Geht das irgendwie auch ohne node.js/npm oder muss ich das darüber laufen lassen?

Danke schonmal im vorraus
 

alinnert

Mitglied
Es geht auch ohne Node, ja. Aber das import-Statement muss dann anders aussehen. Auf der Seite, die du verlinkt hast, ist ein Download-Link für jqMath. Die JS-Datei aus diesem ZIP sollte auf jeden Fall auf deinem Server liegen. Dann kannst du sie folgendermaßen in deinem JS importieren:

Javascript:
import { parseMath, M } from './jqMath.js'
Das ./ am Anfang sagt dem Browser, dass es ein Pfad relativ von der aktuellen JS-Datei aus ist. Die Schreibweise import ... from 'jqmath' ist nämlich nur im Node-Kontext gültig und verweist auf ein Node-Modul namens jqmath. Das gibt's bei dir dann natürlich nicht. Darum hab ich danach gefragt.

Ich weiß nur nicht, ob das die Fehlermeldung von dir behebt. Ich hab das Gefühl, die wird durch etwas anderes verursacht.
 

simmmmmmmmmmmon

Neues Mitglied
Das behebt die fehlermeldung nicht. Im prinzip war das auch zu erwarten ich habe nämlich am anfang vom code die jqmath dateien schon eingebunden und das funktioniert auch aber wenn ich dann jqmath auch in javascript verwenden will brauch ich scheinbar eine andere funktion die nicht in den beiden anderen ist aber ich weiß nicht voher ich diese datei bekommen kann weil das hier funktioniert ja nicht
Code:
<script src="jquery-1.4.3.min.js"></script>
    <script src="jqmath-etc-0.4.6.min.js" charset="utf-8"></script>
     <script type="module"  src="frontend.js"></script>
Code:
 import {parseMath, M} from './jqmath.js'
let resultElm = document.getElementById("rechnungdargestellung");
    resultElm.innerHTML= "$$2+2/3$$";
 
    parseMath(resultElm)
weißt du wie man die funktion dann irgendwie bekommen kann?
 

alinnert

Mitglied
Oh, Moment. Zweimal brauchst du dieselbe Datei nicht einbinden. Das ist unnötig. Wenn du jQuery und jqMath über <script> einbindest, brauchst du kein JS-Modul (type="module") und auch kein import .... Oder andersrum: Wenn du JS-Module verwenden willst, brauchst du JS-Dateien nicht per <script> einbinden. Die beiden Dinge schließen sich gegenseitig aus.

Welche der beiden Varianten du verwenden sollst, hängt davon ab, mit welcher du besser klarkommst und was von jqMath überhaupt unterstützt wird.

Wenn ich mir mir die Seite von jqMath aber so anschaue, bezweifel ich, dass das überhaupt unterstützt wird. Es gibt keine Anleitung/Dokumentation, wie man das von JS aus benutzt. Ich sehe nur Beispiele, wie es automatisch Code im HTML in Gleichungen umwandelt. Von daher: Bist du dir sicher, dass das geht, was du vorhast?
 

simmmmmmmmmmmon

Neues Mitglied
Ja, ich habe gemerkt dass das so nicht funktioniert deshalb habe ich jetzt das ganze mit npm installiert und alles darüber gestartet und es sollte jetzt auch funktionieren aber es kommen nur die fehlercodes " Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf file:///E:/Rechner/main.js. (Grund: CORS-Anfrage war nicht http). " und " Modul-Quell-URI ist in diesem Dokument nicht erlaubt: "file:///E:/Rechner/main.js". " also glaube ich das es nicht am einbinden direkt liegt sonderm daran das ich
Code:
 <script type="module" src="main.js"></script>
und nicht
Code:
 <script  src="main.js"></script>
schreibe aber wenn ich es ohne das type="module" tue kommt der fehlercode kommt nur dieser fehlercode:" SyntaxError: import declarations may only appear at top level of a module " weißt du was ich da tuen kannn?

Danke schonmal im vorraus

Ps: im prinzip funktioniert jqmath siehehier:https://luxp.github.io/jqmath/
 
Zuletzt bearbeitet:

alinnert

Mitglied
file:/// sagt mir, dass du das HTML wahrscheinlich einfach per Doppelklick im Browser öffnest. Da hast du natürlich Probleme mit externen Resourcen. Du solltest immer einen Server verwenden. Da du scheinbar schon Node installierst hast, ist es am einfachsten im Projektordner npx serve . auszuführen. Das startet einen simplen Server mithilfe des npm-Pakets serve. Die URL, die du im Browser aufrufen musst, siehst du auch gleich in der Konsole. Das behebt das CORS-Problem.

SyntaxError: import declarations may only appear at top level of a module kommt daher, weil du Module und Nicht-Module mischst. Ohne type="module" ist die JS-Datei kein Modul mehr. Und das bedeutet, dass du import und export nicht mehr verwenden kannst. Da du ja die Bibliothek schon im HTML einbindest, brauchst du das auch nicht. Daher reicht es, das import einfach rauszulöschen.

Ps: im prinzip funktioniert jqmath siehehier:https://luxp.github.io/jqmath/
Ja, soweit hab ich das verstanden. Es wandelt Latex-Formeln im HTML automatisch so um, dass eine lesbare Formel entsteht. Aber: ich sehe hier nirgendwo etwas, das mit JavaScript zu tun. In deinem Code verwendest du die Funktion parseMath(). Die wird nirgendwo erwähnt. Woher weißt du, dass es diese Funktion überhaupt gibt? Und was ist M?
 

simmmmmmmmmmmon

Neues Mitglied
Also das
parsemath() kommt von der Seite https://www.npmjs.com/package/jqmath unter usage und weil ich vorher schon viel dazu recherchiert habe weiß ich auch das ich das so einbinden soll. Du meinst jetzt praktisch dass das problem ist das ich die datei nicht über einen server laufen lasse wenn ich das richtig verstehe. Ich versuch das jetzt mit dem server heute noch und vielleicht funktioniert das ja dann.
 

simmmmmmmmmmmon

Neues Mitglied
Ich hab mich jetzt bissche ndamit beschäftigt und weiß nicht genau welchen server man da benutzen sollte kannst du mir einfach mal den link auf der npm seite schicken dann kann ich gleich den nehmen wenn das der beste server ist.

Danke jetzt schonmal
 

alinnert

Mitglied
Also das
parsemath() kommt von der Seite https://www.npmjs.com/package/jqmath unter usage
Ah, danke. Sowas bitte gleich am Anfang in deiner Frage erwähnen, damit wir wissen, was du nutzt und woher du es und die Infos dazu hast.


Hier im Repo von jqMath ist übrigens ein Beispiel. Daran kannst du dich auch orientieren und es ggf. kopieren und anpassen. Das bindet jqMath z. B. nicht über <script src="..."> ein. Versuch vielleicht mal, das an deine Bedürfnisse anzupassen.

weiß nicht genau welchen server man da benutzen sollte (...) kann ich gleich den nehmen wenn das der beste server ist
Ich hab in meiner Antwort oben bereits einen vorgeschlagen: serve

Welchen du wählst, ist letzten Endes aber egal. Um statische Dateien auszuliefern, ist jeder Server geeignet. Serve hat nur den Vorteil, dass du (wenn Node installiert ist) nur einen CLI-Befehl ausführen musst, um ihn zu nutzen (der Befehl steht auch oben). Keine Installation, keine Konfiguration notwendig.

kannst du mir einfach mal den link auf der npm seite schicken
Ist auch in meiner Antwort oben. Das Wort "serve" ist verlinkt.
 

simmmmmmmmmmmon

Neues Mitglied
Gut um das jetzt nochmal richtig zu verstehen: Damit ich dateien importieren kann und die auch funktionnieren muss ich sie auf einem lokalen server laden und das funktioniert dann auch wenn ich sie ins internet stelle. Ich könnte mir die Dateien von https://github.com/luxp/jqmath/tree/master/demo zwar runterladen müsste aber trotzdem noch einen server starten damit sie funktionieren.

Ok, dann noch 3 fragen: 1. läuft der server dann dauerhaft oder muss ich den jedesmal neustarten wenn ich damit arbeiten will?
2. Denn server muss ich immer direkt in dem ordener starten sonst funktioniert es nicht oder?
3. Was ist der befehl mit de mich den serve server starte we il
yarn global add serve
das funktioniert nicht oder musss ich da erst noch yarn installieren?

Danke schonmal im vorraus.
 

JR Cologne

Administrator
Teammitglied
1. läuft der server dann dauerhaft oder muss ich den jedesmal neustarten wenn ich damit arbeiten will?
So gesehen musst du ihn jedes Mal neu starten. Der Server läuft so lange du das entsprechende Konsolenfenster offen und du die Ausführung nicht unterbunden hast.
Er läuft also nicht dauerhaft im Hintergrund.

2. Denn server muss ich immer direkt in dem ordener starten sonst funktioniert es nicht oder?
Ja, im Prinzip schon.
Theoretisch könntest du den Server auch von woanders starten, dann müsstest du aber den Pfad zu deinem Projektordner angeben.

3. Was ist der befehl mit de mich den serve server starte we il
yarn global add serve
das funktioniert nicht oder musss ich da erst noch yarn installieren?
Die einfachste Variante wäre, wie schon oben genannt, npx serve ..
Dies sorgt dafür, dass ...

1. das npm-Package serve heruntergeladen wird,
2. der durch das npm-Package bereitgestellte Server ausgeführt wird
3. und dabei der entsprechende Ordner (. steht für den aktuellen Ordner, in dem du dich befindest) als Quelle für alles dient, was du (in diesem Ordner) über deinen Server aufrufen willst.
 

alinnert

Mitglied
Damit ich dateien importieren kann und die auch funktionnieren muss ich sie auf einem lokalen server laden
"laden" ist nicht unbedingt der passende Begriff hierfür. Ein Webserver kann den Inhalt eines beliebigen Ordners ausliefern. Das kann der Ordner sein, in dem du arbeitest. In dem Falle brauchst du sie nicht irgendwo hin"laden". Sie sind dann bereits an der richtigen Stelle.
Also: Damit du Dateien importieren kannst, muss der Browser deine Webseite von einem Webserver anfragen (also über http://), nicht aber direkt von der Festplatte (also file://). Das ist die einzige Bedingung.

und das funktioniert dann auch wenn ich sie ins internet stelle
"Im Internet" hast du keine Möglichkeit, etwas über das file://-Protokoll auszuliefern. Da läuft alles über http:// (oder https://).
Also: Ja, im Internet funktioniert das auf jeden Fall.

Ich könnte mir die Dateien von https://github.com/luxp/jqmath/tree/master/demo zwar runterladen müsste aber trotzdem noch einen server starten damit sie funktionieren.
Richtig.

Gut, die weiteren Fragen hat @JR Cologne schon beantwortet :D aber ein Zusatz zu Frage 1:

Wenn du einen Server willst, der sich automatisch startet, empfehle ich XAMPP. Der Apache (der Webserver, der in XAMPP enthalten ist) lässt sich so einrichten, dass er automatisch startet, ist generell aber schwieriger zu konfigurieren. Z. B. muss dein Projekt in einem speziellen Ordner liegen. Alternativ musst du die Apache-Konfigurations-Datei anpassen. Das ist allerdings eine Welt für sich und jedes Mal den Server zu starten ist definitiv weniger nervenaufreibend als das :D
 

simmmmmmmmmmmon

Neues Mitglied
Gut dann was muss ich machen um denn server zu laden? Aktuell versuche ich es so zu starten:
1.ordner auswählen also cd e:\meinordner
2.npm initialisien npm innit und dort alles ausfülen.
3. die dateien sownloaden mit npx serve

Aber so kommen nur fehler codes was mache ich da falsch? Oder wie soll ich denn sonst starten?

Danke schonmal im vorraus
 

alinnert

Mitglied
Schritt 2 brauchst du nicht. Es muss kein npm-Projekt hierfür initialisiert werden.

Bei npx serve . hast du den Punkt vergessen. Nach serve kommt ein Leerzeichen und ein Punkt. Das sagt serve, welcher Ordner an den Browser ausgeliefert werden soll. Der Punkt heißt so viel wie "der Ordner, in dem ich gerade bin".
 

simmmmmmmmmmmon

Neues Mitglied
1. ordner auswählen cd e:\meinordner
2. npx serve .

dannach bekomme ich diesen fehlercode
Error: EPERM: operation not permitted, mkdir 'C:\Users\Simon'
command not found: serve


was bbedeutet der und kommt der bei dir auch?
 

alinnert

Mitglied
Okay, das ist scheinbar ein Bug in npm. Du hast vermutlich ein Leerzeichen in deinem Benutzer-Ordner C:\Users\xy und enthält auch deinen Nachnamen oder so. Hier ist das Issue dazu: https://github.com/zkat/npx/issues/100

Der einfachste Workaround, den ich von da rausgelesen hab ist folgendes:

1. Lad serve herunter: npm i -g serve (brauchst du nur ein einziges mal tun)
2. Dann kannst du den Server ohne npx starten: serve . (Auch hier wieder: Punkt nicht vergessen)

Das ist interessant, darüber bin ich noch nicht gestolpert.
 

simmmmmmmmmmmon

Neues Mitglied
Ok das funktioniert jetzt und ich habe alles über den server gestartet. Jetzt habe ich folgenden code:
Code:
import {parseMath, M} from 'jqmath'

function test(params) {
    
 let resultElm = document.getElementById("rechnungdargestellung");
 resultElm.innerHTML= "$$2+2/3$$";

 parseMath(resultElm)
}
wenn ich es so schreibe kommt der fehlercode Uncaught SyntaxError: import declarations may only appear at top level of a module
und wenn ich es ohne das import {parseMath, M} from 'jqmath' schreibe dieser fehlercode Uncaught ReferenceError: parseMath is not defined
soweit ich weiß muss man bei variante 2 den code "bundeln" weil der browser den befehl nicht kennt gibt es dafür auch ein package oder bin ich da komplett falsch? wie kann ich das ganze jetzt zum laufen bringen?
 

alinnert

Mitglied
soweit ich weiß muss man bei variante 2 den code "bundeln" weil der browser den befehl nicht kennt
Genau andersherum. Variante 1 musst du ggf. bundlen, weil ältere Browser import und Module nicht kennen. Auch die Schreibweise from 'jqmath' gibt's im Browser nicht. Nur relative Pfade (from './jqmath.js'), absolute Pfade (from '/libs/jqmath.js') oder URLs (from 'https://......'). Also:

- import ... from 'jqmath' → bundlen!
- import ... from './jqmath.js' → bundlen nur notwendig, wenn das auch im Internet Explorer laufen muss.

Wenn du import verwendest, ist dein JS ein Modul. Das musst du beim Einbinden auch angeben: <script src="..." type="module"></script>. (gebundeltes JS ist in der Regel kein Modul, weil das beim bundlen umgeschrieben wird.)

Wenn du das import und type="module" weglässt, muss jqMath auf anderen Weg geladen werden. Eben über <script src="jqMath.js"></script>. Und nur dann! Dann weiß auch dein JS ohne import von jqMath.
 
Oben Unten