Framework in javascript coden wie?

Hi, ich code schon seit einigen Jahren web Games mit vanilla Javascript (canvas und oop). Das man mit vanilla Javascript nicht wenige Zeilen Code braucht ist da denke ich klar. Ich wollte also deswegen ein eigenes Framework coden, da ich nicht so der Fan bin von librarys etc von Fremden zu benutzen. Ich hab aber irgendwie null Ahnung wie ich das ganze machen und strukturieren soll. Wie geht das so? Verwendet man dabei modules? Wie fügt man alle librarys in eine main zusammen? Tutorialseiten oder youtubevideos währen auch hilfreich. Konnte online leider nicht so viel finden

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

VeryBestAnswers

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

07.09.2023, 19:20

Schaue dir mal Vite an: https://vitejs.dev/

Vite macht es sehr einfach, Websites zu bauen, die JavaScript-Bibliotheken enthalten. Falls du noch nie einen JavaScript-Bundler genutzt hast, musst du dich in das Thema etwas einarbeiten, aber es lohnt sich wirklich. Vite fügt alle JavaScript-Module zu einer einzigen Datei zusammen und komprimiert diese, was auch gut für Website-Performance ist. Vite unterstützt auch TypeScript, falls ich dich dafür begeistern kann.

Dein Framework kann dann ein NPM-Paket sein, das du lokal in einem Ordner oder in einem git-repository speicherst.

Woher ich das weiß:Studium / Ausbildung – Informatikstudium

WeissBrot965

Fragesteller

07.09.2023, 19:47

Ok müsste mir das ganze mit dem NPM nochmal anschauen, vielen Dank!

Also ich wollte ein framework coden und die files dann mit meinem Tool in eine frameworkname.js datei bundeln. Ich habe aber gar keine Ahnung wie ich das strukturiere. Arbeitet man mit modules, startet man die einzelnen librarys dann in einer main.js? Habe schonmal so eine ähnliche Frage gestellt, es ging aber um was anderes.

mfg

...zur Frage

Welches Programm zum programmieren?

Hallo zusammen,
ich wollte mich mal erkundigen, welches Programm ihr zum Code schreiben verwendet.
Derzeit nutze ich nur die Spielwiesen der Programme, mit welchen ich das coden lerne. Allerdings hätte ich ganz gerne auch schon einmal ein richtigen Code-Editior, mit welchem ich dann in der Zukunft arbeiten kann.
Ich suche einen gutes Tool, zum hauptsächlichen bearbeiten von HTML, CSS & JavaScript.
Wenn das Programm zeitgleich noch die Möglichkeit bietet, Python und Java zu programmieren, wäre das umso besser.
Ich freue mich auf eure Empfehlungen und wünsche allen einen schönen Sonntag!
Mfg
Luis

...zur Frage

**kwargs in __init__() Methode und "self" in Python?

Hey Leute,

ich habe heute begonnen, Kivy zu lernen. Kivy ist ein Python Framework, für plattformübergreifende Apps. Ich bin allerdings noch ein Anfänger in Python und da man für Kivy OOP beherrschen muss. Habe ich mir eben ein paar Tutorials angeschaut und das Konzept von Klassen auch verstanden und schon etwas geübt. Auch das "self" eine Referenz auf die aktuelle Instanz ist habe ich kapiert. Aber wieso kann man aus einer Methode auf die Instanzvariablen nur zugreifen, wenn vor diesen "self" steht?

Und meine zweite Frage ist, wozu bei der Initialisierung der __init__() Methode manchmal noch so ein **kwargs steht. Also hier mal ein Beispielcode:

class MyGrid(GridLayout):

  def __init__(self, **kwargs):

    super().__init__(**kwargs)

    self.word_list = ["python", "java", "ruby", "javascript"]

    self.guess_word = []

    self.secret_word = ""

    self.remaining_guesses = 6

    self.img_path = "img/hangman_{}.png"

    self.create_game_layout()

    self.new_game()

Das ist jetzt mal nur die __init__() Methode einer MyGrid Klasse die von GridLayout erbt.

Ach ja. Was dieses "super()" bedeutet habe ich auch nicht so ganz verstanden.

Ich wäre sehr sehr dankbar wenn mir jemand helfen könnte. Denn ich will für eine Projektarbeit im Informatikunterricht umbedingt eine Android Kivy App für Hangman programmieren. Aber dafür muss ich diese Themen erst einmal verstehen.

LG Code Snake

...zur Frage

JavaScript Variable mit Schieberegler anpassen?

Hallo,

ich programmiere zur Zeit mit Canvas ein kleines Spiel für die Schule. Allerdings gibt es da ein kleines Problem.

Ich möchte gerne die Geschwindigkeit des Spieler individuell mit Hilfe eines range input-Elements verändern. Allerdings bekomme ich es nicht hin, den Output erfolgreich der Variable zuzuordnen.

Hier der Code:

<body>
  <canvas id="canvas" width="600" height="400" tabindex="1"></canvas>
  <div class="slidecontainer">
    <input type="range" min="1" max="10" value="5" class="slider" id="gs" onchange="input(this.value);">
  </div>
  <script>
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var score = 0;

    // Spieler Werte
    var x = 50;
    var y = 100;
    var speed = 6;
    var sideLength = 50;
  </script>
</body>

...zur Frage

wie Code ich mit Javascript (,als 14 Jähriger)?

Hallo,

Ich hab vor kurzer Zeit endlich die Ressourcen gestellt bekommen, um Coden zu lernen. Nachdem ich mich ein wenig informiert habe, endschied ich mich mit Javascript anfangen zu wollen. Nun zu meinen Hirden:

1.Ich habe noch nie in meinem Leben gelernt zu coden und dies wäre mein erstes Mal

2.Kann ich kein extra Geld für verschiedene Programme ausgeben.(Das ich schon ein Laptop besitze ist ein Wunder für mich)

Und 3. Ich habe mich bei der Programmier Schule ,, Free code camp" angemeldet und verstehe gar nicht wie ich dort beginnen soll.

Also: Weiß einer von euch wo ich coden in Javascript lernen kann, vorzugsweise auf deutsch, gratis und KOPLETT für Anfänger? Sollte ich mir eurer Meinung nach auch eine andere Programmiersprache beibringen? Bitte, sagt nicht das ich es gar nicht versuchen soll zu lernen in meinem Alter. Wenn ihr mit schon das Programmieren ausreen wollt, dann nennt mir mindesten andere Sachen die ich auf dem Computer lernen könnte. ( Im Sinne von technologie). Ich freue mich über jede Antwort und danke im voraus.

...zur Frage

Muss ein javascript framework immer so aufgebaut sein?

Ich möchte ein eigenes js framework für Spieleentwicklung programmieren und habe mir auch ein paar andere wie bsw Phaser.js oder pixi.js etc angeschaut. Sie fangen aber alle irgendwie so in der Art an:

var game = new Frameworkname.zumBeispielGame( ... )

Frage 1: warum sind alle frameworks, bzw alle gamedev js frameworks die ich angeschaut habe so aufgebaut

Frage 2: Kann ich das bei meinem Framework dann anders machen, oder sollte man schon beachten dass es so wie bei bsw pixi ist. Und wenn man es so machen sollte dann warum?

Mfg Weißbrot :)

...zur Frage

NavBar auf jeder Unterseite einbauen (Webdevelopment)?

Hallo, es gibt auf so ziemlich jeder Website Elemente, die auf fast jeder Unterseite vorkommen. Ein Beispiel dafür wäre die NavBar. Diese ist bei den meisten Websites überall. Wie bringt man aber dieses Element auf jede Unterseite? Bei jeder Unterseite den ganzen HTML, CSS und JavaScript Code reinzukopieren wäre ja sehr mühsam.

Diese Aufgabe kann man mit Framworks lösen, wie z.B. VueJS wo man Komponenten verwendet. Welche Methoden gibt es sonst noch, vielleicht sogar ganz ohne Framework?

...zur Frage

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

Hilfe bei Vue.js Lernen?

Hallo zusammen,

Ich wollte euch fragen, ob mir jemand weiterhelfen kann.

Gerne möchte ich Vue.js lernen, jedoch weiss ich nicht, wo ich da anfangen soll. Kann mir jemand helfen, mit z. B. links zu gratis Kursen oder Videos welche einem etwas über Vue.js lernen? Falls, wenn da jemand ist, der sich sehr gut damit auskennt, möchte ich auch gerne fragen, was Vue.js überhaupt ist und wofür man dieses Framework gebrauchen kann.

Kurz zur Erklärung, ich habe den Auftrag bekommen, mit Vue.js zu arbeiten. Jedoch habe ich noch nie mit Vue.js gearbeitet und muss dies nun lernen. Ich habe bereits Kenntnisse in HTML, CSS, Bash-Scripting, PowerShell und JavaScript. Man muss auch dazu sagen, dass ich JavaScript noch nicht gut beherrsche.

...zur Frage

Nächste Schritte für Full Stack dev?

Hallo,

Ich bin auf der Suche nach einem genauen Weg oder Schritte die ich gehen kann nachdem ich mein ersten Full Stack Projekt mit Python Flask ( Backend) und Frontend ( plain HTML, CSS und JS) und Database mit MySQL fertig gecodet habe.

Was genau kann ich jetzt machen um weiter zu kommen. Mein Ziel ist es fähig zu sein komplette professionelle Websiten erstellen zu können die Industrie fähig sind, d.h. Für Firmen, restaurants etc. Oder halt einen job als Full Stack dev zu bekommen.

sollte ich anfangen ein CSS framework lernen, wie bootstrap oder tailwind, oder ist das nur für designer , pur Frontend devs wichtig.
Oder lieber Backend frameworks wie Node.js, oder frontend JS frameworks wir zb react.

Ich weiß einfach nicht genau wo ich weiter machen soll nachdem ich alle Grundlagen berherrsche.

...zur Frage

JavaScript: Wie kann ich ein Bild in mein Canvas einfügen?

Servus!

Ich möchte gerne ein Bild in mein Canvas einfügen. Es klappt aber nicht und die Konsole zeigt auch keine Fehlermeldungen an.

Ich habe folgenden Code:

var canvas = document.getElementById("gameScreen");
var context = canvas.getContext("2d");
var imgBall = document.getElementById('img_ball');

function make_ball() {
  imgBall = new Image();
  imgBall.onload = function() {
    context.drawImage(imgBall, 10, 10);
  }
}

make_ball();

In der HTML-Datei habe ich noch src und die id (img_ball) in das img-Tag geschrieben.

Vielleicht findet ja von euch jemand den Fehler.

Dankeschön.

...zur Frage

JavaScript Canvas Bilder werden Komisch angezeigt, Lösung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Nutz ihr Frameworks in JavaScript und warum?

Ich habe 2004 mit Frameworks in JavaScript angefangen und viele, viele Jahre mit unterschiedlichen Framework gearbeitet. Seite ca. 5 Jahren arbeite ich bevorzugt ohne Frameworks oder vermeide diese so gut es möglich ist.

Meine Frage an die Community, nutzt ihr JavaScript-Frameworks und wenn ja, welche Frameworks und in welchen Umfang?

Ich freue mich auf euren Antworten und bin gespannt wieviel von euch Frameworks in welchen Umfang ihr nutzt.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen