Wie eine One-File-JavaScript Anwendung schreiben?
Hallo,
Ich würde gerne eine One-File-JavaScript Anwendung schreiben.
Die Idee ist, dass alles in einem HTML file ist, das ich überall ablegen und aufrufen kann. (Keine Node.js oder so)
Die Logik der soll auch sehr einfach sein:
Es gibt mehrere Formular eingaben: zwei text Felder, zwei Drop-Down Selektionen.
Basierend darauf wird in einem Ausgabebereich ein Formatierter Text ausgegeben.
(Im Pinzip wird es ein Template Look-up in einem 2 Dimensional Array (die zwei Drop-down) + bisschen Text ersetzten (Textfelder in Template einfügen))
Ich weiß das so-etwas theoretisch möglich ist.
Meine Fragen
- gibt es für so etwas eine Bezeichnung?
- gibt es dafür kleine Libraries (die man vollständig einbetten kann) um das arbeiten dafür zu vereinfachen, damit man nicht alles von scratch machen muss.
3 Antworten
Mit Svelte. Das ergebnis ist 3 Datien HTML,JS,CSS, kleiner gehts nicht
Klar, du kannst alles in einer HTML Datei schreiben. Ich wüsste aber kein Tool, das dir das ganze erleichtert. Node.js brauchst du bei Svelte (oder anderen Frameworks wie Angular, React, Vue, ...) nur zum Bauen deines Projekts; das Ergebnis sind dann eben die besagten Dateien, die auch ohne Node.js oder ähnliches genutzt werden können.
Kannst ja deinen Code per Hand schreiben. Alles in einer Datei. Erwarte aber keine Wunder.
gibt es für so etwas eine Bezeichnung?
Eine Webseite ohne Unterseiten kannst du als OnePager bezeichnen.
gibt es dafür kleine Libraries (die man vollständig einbetten kann) (...)
Du kannst JavaScript-Bibliotheken ziemlich leicht via script-Tag in dein HTML-Dokument (innerhalb des head- oder body-Bereichs) einbetten.
Entweder du kopierst den JavaScript-Code (im besten Fall den aus der min.js der jeweiligen Bibliothek) direkt zwischen solche Tags:
<script>
/* insert JavaScript code here ... */
</script>
oder du referenzierst auf eine externe Datei. Viele Bibliotheken sind auf zentralen Servern wie cdnjs gehostet.
Beispiel:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
Die Einschränkung hierbei ist natürlich, dass eine Internetverbindung existieren muss, damit deine Anwendung funktionstüchtig ist.
(...) um das arbeiten dafür zu vereinfachen, damit man nicht alles von scratch machen muss.
Die Anforderungen an deine Anwendung klingen derzeit nicht sonderlich komplex. Ich denke, du machst es dir nicht leichter, wenn du dafür nun noch eine extra Bibliothek suchen und einbinden willst.
Allein das Grundgerüst ist doch schnell zusammengestellt.
<!doctype html>
<head>
<title>Example</title>
<meta charset="utf-8">
<style>
/* your CSS code ... */
</style>
</head>
<body>
<form>
<label for="field1">Field 1:</label>
<input id="field1">
<label for="field2">Field 2:</label>
<input id="field2">
<label for="field3">Field 3:</label>
<select id="field3">
<!-- options ... -->
</select>
<label for="field4">Field 4:</label>
<select id="field4">
<!-- options ... -->
</select>
<p id="output"></p>
</form>
<script>
/* your JavaScript code ... */
</script>
</body>
So fehlt nur noch die Logikimplementation mit JavaScript. Kenntnisse über JavaScript sowie der DOM-API sollten vollkommen ausreichen.
Kann man doch einfach von Hand machen: IDE öffnen, .html erstellen, 15min programmieren und fertig
Wieso geht es nicht in einem File (man kann ja alles in HTML embedden) - auch wenn es ggf zuerst beim erstellen einfacher ist?
und geht das auch ohne npm & node?