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

FrageRunde59125

21.07.2023, 21:15

Mit Svelte. Das ergebnis ist 3 Datien HTML,JS,CSS, kleiner gehts nicht

paulFE

Beitragsersteller

21.07.2023, 21:29

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?

LocalFlow

21.07.2023, 21:36

@paulFE

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.

FrageRunde59125

21.07.2023, 21:54

@paulFE

Kannst ja deinen Code per Hand schreiben. Alles in einer Datei. Erwarte aber keine Wunder.

paulFE

Beitragsersteller

17.08.2023, 23:34

@FrageRunde59125

Wunder sind passiert :)

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

22.07.2023, 07:20

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.

guteantwort626

21.07.2023, 22:39

Kann man doch einfach von Hand machen: IDE öffnen, .html erstellen, 15min programmieren und fertig

Ähnliche Beiträge

javascript Fehler, wtf?

Hab in meinem ganzen 5 Jahren als js dev noch nie so einen Fehler gehabt.

Code:

<!DOCTYPE html>

<head>

</head>

<body>

<button id="login" onclick="save()">login</button>

var name = document.getElementById("name")

var password = document.getElementById("password")

function save() {

alert(name.value, password.value)

}

</script>

</body>

</html>

ich experimentiere in letzter Zeit wieder etwas mit firebase. Hab als test projekt mal zwei inputs mit login button erstellt. So und jetzt gibt diesen html code mal in eine html file ein und führt es aus. Aus irgendeinem Grund wird bei name undefined alerted und der value von password wird wie erwartet alerted. Warum funktioniert das bei password, aber nicht bei name?? Hab schon mehrere code editoren ausprobiert und überall das gleiche Problem. Weiß jmd wo der Fehler ist?

Mfg Weißbrot

...zum Beitrag

Wie lange braucht ihr für eine Webseite?

Die Fragen gehen an alle Webdesigner:

Wie lange braucht ihr für eine Webseite?
Wie ist die Art der Umsetzung? WordPress, HTML / CSS?
Wie ist der Umfang und Aufwand der Seite und wie viele Unterseiten sind enthalten?
Nutzt ihr Templates?
Wie viel verlangt ihr pro Seite?

Danke für Antworten.

...zum Beitrag

Schnell Geld mit Html und Css?

Hallo ich habe gute Html und css kenntnisse ich muss schnell an geld kommen was würdet ihr mir empfehlen ich rede nicht von tausenden euros sondern ein bisschen

...zum Beitrag

Formular JavaScript?

Hallo,

ich bräuchte Unterstützung bei Adobe PRO Formularen.

Ich habe ein Formular erstellt mit Drag and Drop Auswahl. Ich habe zwei Felder eins für Abteilung und eins für Mitarbeiternamen. Ich würde gerne ein Javaskript haben, sodass nur die Namen der jeweiligen Abteilung auftauchen. Ziel ist es wenn ich die Abteilung auswähle, kann ich die jeweiligen Namen in der Drag and Drop Liste auswählen.

Kann mir bitte jemand den Javaskript dazu nennen?

...zum Beitrag

Skript, um eine Taste beim gedrückt halten mehrfach zu drücken?

Guten Tag,

das hier ist ein JavaScript, welches dafür sorgt, dass ich, wenn ich eine Taste gedrückt halte, die Funktion mehrfach ausgeführt wird.

$(function () {
  const holdDelay = 82, // ms delay to start dropping after pressing
  dropDelay = 32 // ms delay between drops
  let keys = {};
  $(document).on("keydown", (e) => {
    // if (e.keyCode != $('#pellet').text().charCodeAt(0)) return;
    if (e.keyCode in keys) return;

    keys[e.keyCode] = setTimeout(() => {
      drop(e.keyCode);
    }, holdDelay);
  }).on("keyup", (e) => {
    clearTimeout(keys[e.keyCode]);
    delete keys[e.keyCode];
  });
  const drop = key => {
    if (keys[key] == null) return;

    window.onkeydown({ keyCode: key });
    window.onkeyup({ keyCode: key });
    setTimeout(drop, dropDelay, key);
  }
});

Weiß jemand, wie ich machen kann, dass das nur für eine Taste gilt?

...zum Beitrag

Erstellte website nicht aufrufbar?

Bin Anfänger im Thema Webseiten und programmieren und habe mir mal ein Tutorial angeschaut. In dem wurde mir erzählt, dass ich mit dem Editor und HTML eine Website erstellen kann. Wenn ich aber nach abspeichern des Editors etc. den Link, der in der Suchtleiste bei Chrome steht bei einem anderen Gerät eingebe, finde ich diese Seite nicht. Ich hatte auch nicht erwartet, dass das erstellen von einer Website auf diese Weise funktioniert, aber was fehlt mir, dass diese Seite, auch wenn es nur eine Testseite sein soll im Internet aufrufbar ist?

...zum Beitrag

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zum Beitrag

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zum Beitrag

Wird HTMX JavaScript nutzlos machen?

...zum Beitrag

wass Macht Dieser Code?

<!DOCTYPE html> <html> <head> <title>Zufällige Geschichte und Bananen-Animation</title> <style> .story { font-size: 20px; margin-bottom: 20px; } .banana { width: 100px; height: 200px; position: absolute; bottom: 0; left: 0; animation: eatCars 5s infinite linear; } .car { width: 50px; height: 30px; position: absolute; bottom: 0; animation: moveCar 5s infinite linear; } @keyframes eatCars { 0% { left: 0; } 100% { left: 100%; } } @keyframes moveCar { 0% { left: 0; } 100% { left: -50px; } } </style> </head> <body> <button onclick="getRandomStory()">Zufällige Geschichte</button> <button onclick="startBananaAnimation()">Banane füttern</button> <div class="story"></div> <div class="banana"></div> <div class="car"></div> <div class="car"></div> <div class="car"></div> <script> const stories = [ "Es war einmal...", "In einer weit entfernten Galaxie...", "Ein kleines Mädchen fand...", ]; function getRandomStory() { const storyElement = document.querySelector('.story'); const randomIndex = Math.floor(Math.random() * stories.length); storyElement.textContent = stories[randomIndex]; } function startBananaAnimation() { const banana = document.querySelector('.banana'); banana.style.display = 'block'; } </script> </body> </html>

...zum Beitrag

Python Fehler bei Multiprocessing?

Hallo,

Momentan schreibe ich eine kleine Anwendung die Text sprechen soll. Mein Code:

Voice.py

from loguru import logger
import pyttsx3
import multiprocessing


class Voice():


    def __init__(self):
        import YAML
        self.process = None
        logger.debug("[CONFIG] Reading Config Data")
        self.voiceId = YAML.config['assistant']['Voice']['VoiceID']
        logger.debug("[Start] Voice initialistion")
        self.engine = pyttsx3.init()
        self.engine.setProperty('voice', self.voiceId)
        logger.debug("[Finish] Voice initialistion")


    def __speak__(self, text):
        self.engine.say(text)
        self.engine.runAndWait()
    
    def say(self, text):
        if self.process:
            self.stop()
        logger.debug("[START] Say process")
        p = multiprocessing.Process(target=self.__speak__, args=(text, ))
        p.start()
        self.process = p


    def stop(self):
        if self.process:
            self.process.terminate()
            logger.info("[STOPP] Say process")

Main.py

from loguru import logger
import Voice
logger.info("[START] ...")
self.Voice = Voice.Voice()
logger.info("...")
self.Voice.say("Initalisierung abgeschloßen")

Bei der Ausführung wird mir aber folgender Fehler ausgegeben:

Traceback (most recent call last):
  File "C:\Users\toni-\Desktop\VoiceAssistant\main.py", line 15, in <module>
    Assistant = VoiceAssistant()
                ^^^^^^^^^^^^^^^^
  File "C:\Users\toni-\Desktop\VoiceAssistant\main.py", line 9, in __init__
    self.Voice.say("Initalisierung abgeschloßen")
  File "C:\Users\toni-\Desktop\VoiceAssistant\Voice.py", line 26, in say
    p.start()
  File "C:\Users\toni-\AppData\Local\Programs\Python\Python311\Lib\multiprocessing\process.py", line 121, in start
    self._popen = self._Popen(self)
                  ^^^^^^^^^^^^^^^^^
  File "C:\Users\toni-\AppData\Local\Programs\Python\Python311\Lib\multiprocessing\context.py", line 224, in _Popen
    return _default_context.get_context().Process._Popen(process_obj)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\toni-\AppData\Local\Programs\Python\Python311\Lib\multiprocessing\context.py", line 336, in _Popen
    return Popen(process_obj)
           ^^^^^^^^^^^^^^^^^^
  File "C:\Users\toni-\AppData\Local\Programs\Python\Python311\Lib\multiprocessing\popen_spawn_win32.py", line 94, in __init__
    reduction.dump(process_obj, to_child)
  File "C:\Users\toni-\AppData\Local\Programs\Python\Python311\Lib\multiprocessing\reduction.py", line 60, in dump
    ForkingPickler(file, protocol).dump(obj)
TypeError: cannot pickle 'module' object
PS C:\Users\toni-\Desktop\VoiceAssistant> Traceback (most recent call last):
  File "<string>", line 1, in <module>
  File "C:\Users\toni-\AppData\Local\Programs\Python\Python311\Lib\multiprocessing\spawn.py", line 106, in spawn_main
    source_process = _winapi.OpenProcess(
                     ^^^^^^^^^^^^^^^^^^^^
OSError: [WinError 87] Falscher Parameter

...zum Beitrag

html code popup fenster?

Hallo GuteFrage-Community,

kann mir jemand helfen? Früher hatte ich einen bestimmten Code auf meinen Webseiten, der dazu führte, dass beim Verlassen der Seite automatisch eine andere Seite geöffnet wurde. Ich glaube, es war ein Pop-up.

...zum Beitrag

Was ist von Desktop-Anwendungen, die in JavaScript geschrieben sind, zu halten?

JavaScript kennt man eigentlich aus dem Web. Es für die dynamische Gesaltung von Websites eingesetzt. Mit dem Framework Electorn können Desktop-Anwendungen in JavaScript entwickelt werden. Da läuft unter der Haube dann der Chromium-Browser und Node.js. Im Grunde ist eine Electron-Anwendung also eine lokale Website.

Das ganze hat dann ein paar kleine Nachteile: Wer schon einmal eine Electron-Anwendung genutzt hat, stellt schnell fest, dass die extrem viel Speicher verbrauchen und unheimlich langsam sind. Von den häufigen Sicherheitslücken, die entdeckt wurden, fange ich gar nicht erst an.

Ich finde es eine Seuche, dass diese komischen Hipster-Techniken aus dem Web den Desktop erobern wollen.

Gibt es also irgendwelche Vorteile, die Electron und hippe JavaScript Desktopanwendungen haben oder überwiegen die Nachteile.

...zum Beitrag

Blender Intro Template Text ändern

Hallihallo Ich habe mir ein Blender Intro Template heruntergeladen, aber ich finde nich raus, wie ich den Text ändern kann.... hier ein bild: https://docs.google.com/file/d/0B_k4k7fb9jt4QnV1Rk01MGVpZnc/edit?usp=sharing Bitte Antworten

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen