Verwandte Themen

guschteusz
03.03.2020, 21:05
Mit Links
Wie csv Datei auslesen und in amCharts einfügen?

Hi,

ich habe amCharts ausprobiert mit ein paar statischen Werten. Das sieht ungefähr so aus:

  // Create chart instance
            var chart = am4core.create("chartdiv2", am4charts.XYChart);
            
            // Add data
            chart.data = [{
              "ax": 5,
              "ay": 20
            
            }, {
              "ax": 2,
              "ay": 1.3
             
            }, {
              "ax": 3,
              "ay": 2.3,
              "bx": 3,
              "by": 5.1
            }, {
              "ax": 4,
              "ay": 2.8,
              "bx": 4,
              "by": 5.3
            }, {
              "ax": 5,
              "ay": 3.5,
              "bx": 5,
              "by": 6.1
            }, {
              "ax": 6,
              "ay": 5.1,
              "bx": 6,
              "by": 8.3
            }, {
              "ax": 7,
              "ay": 6.7,
              "bx": 7,
              "by": 10.5
            }, {
              "ax": 8,
              "ay": 8,
              "bx": 8,
              "by": 12.3
            }, {
              "ax": 9,
              "ay": 8.9,
              "bx": 9,
              "by": 14.5
            }, {
              "ax": 10,
              "ay": 9.7,
              "bx": 10,
              "by": 15
            }, {
              "ax": 11,
              "ay": 10.4,
              "bx": 11,
              "by": 18.8
            }, {
              "ax": 12,
              "ay": 11.7,
              "bx": 12,
              "by": 19
            }];
           

Jetzt würde ich die Werte gerne aus einer csv Datei auslesen. Ich habe mir dieses Beispiel angeschaut, aber ich verstehe nicht ganz, wie das funktioniert. Die csv Datei ist lokal im selben Ordner wie mein HTML-File.

Wie spiel ich die CSV-Daten ein?

Computer, programmieren, JavaScript, csv
1 Antwort
CrystalTin
27.02.2020, 17:32
Frage wurde 1 Mal erneut gestellt
Programmieren für Anfänger mit einem Buch?

Hey! Ich würde diesmal gerne eine etwas "andere" Frage stellen. Ich will wissen was das beste Buch ist, um mit dem Programmieren von 0 auf "Profi Programmierer" anzufangen.

Meine Wenigkeit ist relativ jung (um genauer zu sein 14 - 15 Jahre alt) und deshalb hätte ich genug Zeit um damit anzufangen, ich will auch bald etwas Berufliches mit dem Thema Zutun zu haben von daher, das ich ältere Kollegen habe, bei denen ich zusehen konnte, wie sie ein Plugin für ein Spiel programmiert haben, es gibt da nur ein kleines Problem, sie können schlecht erklären (so wie ich) oder wollen es mir nicht erklären, und deshalb will ich mir selbst mithilfe von Büchern etc. für den Anfang sogar eine Relativ schwere bzw. mittelschwere Programmiersprache beibringen, um später nicht anfangen zu meckern das ich dies und das nicht gehabt hatte.

Am besten wäre es mir Java Script beibringen zu wollen mithilfe von einem Buch wo es mir nicht langweilig werden kann oder ich nicht sofort den Geist aufgebe, den ich bin ein sehr schwieriger Mensch, im Thema "Beibringung". Eine Motivation habe ich ja schon! Ich will besser sein als meine älteren Kollegen, um ihnen zu zeigen das ich es drauf Habe und besser bin als sie! Vor allem wegen einem Typen, der mich deswegen auslacht, dass ich in dem Thema eine niete bin, und… Ja! Ich bin eine Niete aber auch nur, weil ich damit nicht angefangen habe bzw. nicht anfangen konnte, weil ich nichts oder niemanden gefunden habe der mir des beibringen konnte und vor allem, weil ich ein echter Dickkopf bin und wie gesagt es schwer ist mir etwas beizubringen.

Ach ja! Ganz wichtig ist, dass ich vergessen habe zu erwähnen, dass ich schon paar Websites ausprobiert habe, die mir es aber nicht zeigen konnten, wie es wirklich geht und deshalb such ich jetzt nach einem Buch mit dem ich das Programmieren schnell und einfach erlernen kann, wie gesagt es auch um meine "Zukunft".

Ich hoffe man hat mich in diesem Text verstanden sowie hoffe ich auch das mir jemanden meine Frage beantworten kann mit etwas Erfahrung oder ähnlichem, und sogar wenn nicht dann will ich mich dennoch fürs Lesen Bedanken! Ansonsten… sayōnara :D!

Computer, Buch, Schule, programmieren, JavaScript, beibringen, Informatik, Programmiersprache
4 Antworten
Natriumcarbonat
30.01.2020, 15:36
Frage wurde 1 Mal erneut gestellt
Website Hintergrundbild interaktiv gestalten?

Guten Tag,

ich habe mich nun in html und css eingelesen, bin noch relativ neu und habe eine Design Idee.

Ich versuche einen "interaktiven" Hintergrund für eine Website zu entwickeln, ( Zahnräder die verrostet sind )
Wenn man runterscrolled sollen diese Zahnräder von einem Sonnenstrahl angeschienen werden.
- Wenn man nun weiter runterscrolled sollen diese Zahnräder nach dem Sonnenstrahl mit Moos bedeckt sein.

Die Idee war:
3 Bilder erschaffen;
1. Zahnräder mit Moos
2. Zahnräder werden angestrahlt.
3. Zahnräder sind mit Moos bedeckt.

Nun habe ich den ersten Maincontent der einen gewissen Platz auf der Website bedeckt.
Die Leute scrollen weiter runter zu den relevanten Sachen
Durch das scrollen wird das 2. Bild auf einem ganz schmalem Content eingeblendet.(überlagert das fixe Bild 1.)
Danach sieht man Bild 3.
Nun ist das Zahnrad vollständig mit Moos bedeckt.
Und das nur durch die 3 Bilder.

Es hat also den Anschein, dass dieses Hintergrund interaktiv ist.

Ich habs ein wenig kompliziert erklärt und die Beispielbilder mit denen ich das getestet habe sind leider verloren gegangen. Allerdings hat die Veränderung von Bild 1 auf Bild 3 schon sehr gut funktioniert. Bloß der Lichtstrahl erschien mir schwierig, da es eben nur ein weiteres fixes Bild ist und die Aktion der Strahlung dadurch nur sehr schwer umsetzbar schien.

Frage: Gibt es andere Möglichkeiten bzw. Kann das mit irgendwelchen Ideen von euch gut umsetzbar gemacht werden?

Beste Grüße und Danke im vorraus.

HTML, Webseite, CSS, JavaScript, Webentwicklung, Website Design
2 Antworten
BatmanTDK
18.01.2020, 01:41
Wie funktionieren die Zwischensequenzen/Cutscenes in Videospielen?

Guten Tag,

erst einmal muss ich gestehen, dass ich in dem Thema rund ums Programmieren 0 Ahnung habe. Also verzeiht mir bitte im Voraus. Okay:

Bei sehr vielen Games ist es ja so, dass zwischen des Spielgeschehens - in welches man aktiv eingreift - immer mal kurze Story-Filme kommen, um das Spiel besser zu vermitteln. Am öftesten kommen diese Sequenzen in Spielen, die eine Story haben, wie z. B. in GTA, the witcher und 1.000 anderen spielen vor (z. B. wenn man zu einem Quest-Typen geht, der einem was erklärt oder wenn bestimmte Nebeninfos vermittelt werden). Was ich mich nur frage: Sind diese Cutscenes einfach nur "mp4 Dateien", die abgespielt werden, oder handelt es sich um programmierte Inhalte, die während der Sequenz in der bestehenden programmierten Umgebung verarbeitet werden? Bis jetzt kann ich mir nur letzteres vorstellen, da ich in solchen Cutscenes schon oft Grafikbugs entdeckt habe, die in ner mp4 Datei logischerweise nicht möglich wären. Des Weiteren fiel mir z. B. in the Witcher auf, dass Gerald (der main character) in den Sequenzen die individuelle Kleidung trug, die man sich erspielt hatte. Außerdem blieb das Wetter auch gleich (was auch ausschließen würde, dass mehrere mp4 Filme existieren, da das wegen den 1.000 Kombinationsmöglichkeiten und mangeldem Speicher doch unrealistisch wäre!?). Aber dann denke ich mir, dass es doch in einigen Spielen mehr Sinn machen würde, erstellte Videodateien in das Spiel hinein zu fügen, da diese 1.000 mal realistischer und detailgetreuer sein könnten und nicht verbugt sind. Ich würde mich sehr freuen, wenn jemand in diesem Bereich Ahnung hat und mir sagen kann, was das jetzt mit den Sequenzen auf sich hat. Vielen Dank im Voraus! :)

PC, Computer, Games, Videospiele, Software, Technik, programmieren, JavaScript, Gaming, Anwendungsentwicklung, zocken, Spiele und Gaming
4 Antworten
iLovePizza161
11.01.2020, 11:50
Wie kann ich eine dynamische HTML-Tabelle persistent erweitern?

Hey liebe GuteFrageNet-Community,

ich bastle gerade an einer Website, in der man eine Tabelle per Knopfdruck erweitern kann. Dies funktioniert soweit auch sehr gut, aber es wird nicht gespeichert, bzw. nur im Cache bei demjenigen, der den Knopfdruck ausgeführt und etwas hineingeschrieben hat.

Gibt es eine Möglichkeit, diese Tabelle zu "speichern" und es zu übernehmen?

Und noch eine weitere kleine Frage: In der Tabelle kann man wie oben schon beschrieben, etwas hineinschreiben. Wie kann man die Schriftfarbe dynamisch ändern? Also klar, mit type="color". Aber wie genau?

Hier der HTML und Javascript-Code:

<form method='post' name='first'>
  <table id='tab' border=5 id="box">
    <colgroup>
      <col width="40%">
      <col height="50%">
    </colgroup>
    <tbody>
      <th>Datum <br> Uhrzeit</th>
      <th>Map</th>
      <th>Ergebnis</th>
      <th>Spieler</th>
    </tbody>
    <tr>
      <td>
        <input id="changetext" type='text' type="color" name='Date' placeholder='Datum/Uhrzeit'>
      </td>
      <td>
        <input id="changetext" type='text' name='Map' placeholder='Map'>
      </td>
      <td>
        <input id="changetext" type='text' name='Result' placeholder='Ergebnis'>
      </td>
      <td>
        <input id="changetext" type='text' name='Player' placeholder='Spieler'>
      </td>
    </tr>
  </table>
  <br>
  <input type='button' value='neue Zeile' onClick='clone_this()'>
  <input id="changetext" type="color">
</form>
<script>
  var input = document.getElementById("changetext");
  var text = document.getElementById("text");

  input.addEventListener('change', function () {
    text.style.color = this.value;
  });
</script>
Computer, HTML, JavaScript, Tabelle, dynamisch, TypeScript
2 Antworten
Zeakles1
02.01.2020, 00:53
Mit Links
JQuery Code wird in falscher Reihenfolge ausgeführt?

Guten Tag. Ich will einen Bar Chart generieren nachdem ich informationen bei einer API ausgelesen habe. Dies habe ich mir so vorgestellt, dass erstmal die daten ausgelesen werden, diese in ein array umgewandelt werden und dann der barchart generiert wird.

Gerade komme ich nicht weiter beim umwandeln zum Array. Die Funktion test() wird schon am direkt am anfang ausgeführt, obwohl noch nicht alle informationen zusammengestellt wurden. Was kann ich machen, damit test() erst nach dem start() vollständig ausgeführt wurde, ausgeführt wird?

Code:

var app = {};
			//a jQuery function that is directly called using jQuery is registered to be started after the page has finished loading
$(function() {
      start();
	  test();
});

        var arrayy = [];


        function start()
        {
            getLogDataKeys();   
        }
        
        //a function that retrieves a list of objects for owner logdata
        function getLogDataKeys()
        {
            $.getJSON("http://webtechlecture.appspot.com/cloudstore/listkeys?owner=logdata",
                    &nbsp;&nbsp;
                    &nbsp; function(data)//this function is called when the server answers its data
                    &nbsp; {
                        console.log(data)
                        if (data.length&gt;0)
                        {
                            $.each(data,
                                &nbsp; &nbsp;function(index,logEntry){//this function is called for each single object in the array named "data" (listobjects and listkeays answer an array, while get does not!)
                                        processLogEntry(logEntry);
                                    });
                        }
                    &nbsp; }
                        
                     );




        }
        
        //each logEntry is processed here
        //process &amp; aggregate the data here
        function processLogEntry(aEntry)
        {
            $.getJSON("http://webtechlecture.appspot.com/cloudstore/get?owner=logdata&amp;key="+aEntry.key,
                function(data)//this function is called when the server answers its data
                    &nbsp; {
                        var diena = data.app;
                        
                    &nbsp; &nbsp; if(app.hasOwnProperty(diena)){
                        var value= app[diena];
                        app[diena]= value+1;
                        }
                        if(!(app.hasOwnProperty(diena))){
                        app[diena] = 1;
                        }
                        console.log(aEntry);
                        
                    });
        }
    function test()
        {
                        Object.keys(app).forEach(function(key) { arrayy.push([key,app.key])});
                        console.log("HI");
        }
    google.charts.load('current', {packages: ['corechart', 'bar']});
    google.charts.setOnLoadCallback(drawBarColors);


function drawBarColors() {       var data = google.visualization.arrayToDataTable([         arrayy       ]);



      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        colors: ['#b0120a', '#ffab91'],
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    } </script>

programmieren, JavaScript, JQuery
1 Antwort
XentriX5526
25.11.2019, 10:16
Mit Bildern
Mit Links
JavaScript - Formularfelder dynamisch hinzufügen?

Ich habe ein HTML-Formular. Darin soll man in eine Datenbank eine Frage mit x Antworten speichern kann. Habe folgendes als Vorlage benutzt, komme aber nicht weiter:

https://werner-zenk.de/javascript/formularfelder_dynamisch_hinzufuegen.php

Ich benötige aber neben einem Input-Feld für eine Antwort nur die Möglichkeit zur Definition, ob diese Antwort Richtig oder Falsch ist.

Habe jetzt folgendes Versucht... (Auszug für function feld_plus())

<script>
function feld_plus() {
 if (feld <= 9) {
  feld++;
 document.getElementById('dynamic_input').innerHTML = "";
  for (var counter = 1; counter <= feld; counter++) {
   var label = "Antwort " + counter;
   var inhalt = document.getElementById("antwort" + counter).value;
   document.getElementById('dynamic_input').innerHTML += "<label style=\"float: left;\">" + label + ": <input type='text' name='n_" + feld + "' value='" + inhalt + "' onInput='antwort(this.value, \"" + feld + "\")'></label><fieldset><input type='radio' id='true" + counter + "' name='statuscode' value='11'><label for='true" + counter + "'>Richtig</label> <input type='radio' id='false" + counter + "' name='statuscode' value='12'><label for='false" + counter + "'>Falsch</label></fieldset><br>";
  }
 }
}

function antwort(inhalt, feld) { document.getElementById("antwort" + feld).value = inhalt; } </script>


<a href="question_add.php"><button>Frage erstellen</button></a> <hr> <h2>Fragestellung</h2> <p>Nachfolgend die Frage eintragen...</p> <form id="question_add" action="question_action.php" method="POST" onsubmit="return confirm('Frage speichern?');"> <textarea form="question_add" name="questionText" wrap="soft" rows="2" placeholder="Wie lautet ...?" required></textarea><br> <hr> <h2>Antworten</h2> <p>Nachfolgend die Antwortmöglichkeiten angeben.</p> <p>Antworten hinzufügen <input type="button" value="-" onClick="feld_minus();"><input type="button" value="+" onClick="feld_plus();"></p>


<div id="dynamic_input"></div>


<!-- Antworten --> <input type="hidden" id="antwort1"> <input type="hidden" id="antwort2"> <input type="hidden" id="antwort3"> <input type="hidden" id="antwort4"> <input type="hidden" id="antwort5"> <input type="hidden" id="antwort6"> <input type="hidden" id="antwort7"> <input type="hidden" id="antwort8"> <input type="hidden" id="antwort9"> <input type="hidden" id="antwort10">



<hr>
<input type="submit" value="Frage speichern" >
</form>

...optisch passt dass... allerdings sind die Radio-Buttons buggy...

Definiere ist Antwort1 als richtig, und dann Antwort2 als falsch, so ist bei Antwort1 nicht mehr ausgewählt... als wenn das Fieldset nicht korrekt abgeschlossen wird.

Kennt sich damit jemand aus?

Bild zum Beitrag
HTML, JavaScript, HTML5, Webprogrammierung, Webanwendung
1 Antwort
Ollig00
08.11.2019, 10:18
Mit Links
[jQuery AJAX] echo mit HTML Content von PHP Datei ausgeben?

Okay, die Frage ist evtl ein bisschen kompliziert. Deshalb beschreibe ich das anhand eines Beispiels. Zuerst meine Dateien:

PHP (submit.php)

<?php
 $mail = $_GET['mail']; if(filter_var($mail, FILTER_VALIDATE_EMAIL)) { echo "<div role=\"alert\">Ungültige E-Mail</div>"; } else { echo "<div role=\"alert\">Gültige E-Mail</div>"; }

?>

HTML (index.html)

<form id="myForm">
  <input type="email" name="mail" id="mail" placeholder="E-Mail Adresse"/>
  <input type="submit" name="check" id="check" value="Senden"/>
</form>
<script src="http://code.jquery.com/jquery-1.9.1.js"/> <script> $(function () { $('form').on('submit', function (e) { e.preventDefault(); $.ajax({ type: 'post', url: 'submit.php', data: $('form').serialize(),   success: function() {    //echo "Gültige E-Mail    } error: function() { //echo "Ungültige E-Mail" } }); }); }); </script>

Beschreibung:

Sobald das Formular abgesendet wurde, wird die E-Mail an die submit.php gesendet. In dieser wird überprüft, ob die E-Mail gültig ist und gibt dann das Ergebnis in Form von HTML-Code zurück.

Die Lösung mit alert will ich nicht. Es soll unterhalb der Form das Ergebnis stehen.

Wenn ich mit PHP

echo "<div role=\"alert\">Gültige E-Mail</div>";

ausgebe, dann steht das auch direkt in HTML dort (also nicht als PlainText).

Wie ist es also möglich, das Ergebnis der submit.php zu bekommen und in der index.html auszugeben?

Vielen Dank im Voraus!

Computer, Technik, HTML, Webseite, programmieren, JavaScript, AJAX, JQuery, PHP, Technologie
4 Antworten
Rolajamo
29.10.2019, 14:53
CSS Animation vor Redirect?

Hallo, ich hatte schonmal so eine ähnliche Frage gestellt aber bekomme es einfach nicht hin. Nun hab ich eine kleine Testumgebung gebaut, in der ich folgendes möchte:

Die Eingangsanimation spielt sich automatisch ab wenn die Seite geladen ist. Klicke ich auf den Go-Button in der Mitte (Später sollte das bei jedem Button passieren der eine bestimmte Klasse hat) dann soll der Klasse "intro" die Klasse "animation_out" hinzugefügt werden. Nach einer bestimmten Zeit (Am besten händisch per Ms änderbar) soll dann erst der Redirect erfolgen.

Gibt es da eine EINFACHE Lösung für Anfänger wie mich?

XXXXXXXX_____HTML_____XXXXXXXX

<div class="intro">
</div>

<a class="testbutton" href="#">GO</a>

XXXXXXXX_____CSS_____XXXXXXXX

body{
 margin: 0;
 padding: 0;
}

.intro{
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
padding: 0;
background-color: #000;
overflow: hidden;
pointer-events: none;
-webkit-animation: animation_in 1s 1; /* Safari 4.0 - 8.0 /
animation: animation_in 1s 1;
animation-fill-mode: forwards;
}

@keyframes animation_in {
0%  {height: 100%;}
100% {height: 20px;}
}

.animation_out{
-webkit-animation: animation_out 1s 1; /* Safari 4.0 - 8.0 /
animation: redirectanimationout 1s 1;
}

@keyframes redirectanimationout {
0%  {height: 20px;}
100% {height: 100%;}
}

.testbutton{
position: absolute;
background-color: #000;
color: #fff;
width: 50px;
padding: 5px 0;
text-align: center;
float: 0 auto;
margin-top: 50vh;
margin-left: calc(50% - 25px);
}
HTML, Webseite, CSS, JavaScript, Code, JQuery
3 Antworten
tom20032005
13.10.2019, 19:29
Node.js: Werte an HTML Datei übergeben?

Ich habe etwas mit Node.js angefangen und komme einfach nicht mehr weiter. Ich habe das Server erstellen usw. gut verstanden, aber jetzt komme ich nicht mehr weiter. Es kann sein, dass das total einfach ist.

Ich habe anfangs einen Server erstellt. Nun habe ich eine MySQL-Verbindung hergestellt (was auch funktioniert) und mit dem SELECT-Befehl Daten daraus bekommen. Nur stellt sich mir nun einfach die Frage, wie zum Teufel ich den Wert in meine HTML Datei bekomme, um sie auszugeben.

app.js:

var express = require("express");
var app = express();
var mysql = require("mysql");
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "test"
});

con.connect(function(err) {
  if (err) throw err;
  console.log("Connected to Database!");
});

app.listen(8080, function() {
  console.log("Server is running!");
});

con.query("SELECT id, Zahl FROM test", function(err, result, fields) {
  if (err) throw err;
  console.log(result);
});

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

Also, wie gesagt, bekomme ich in der Konsole "result" ausgegeben. Aber wie bekomme ich das jetzt z.B. in einen div in meiner index.html?

Und noch eine kleine Nebenfrage: Ist das so richtig, wenn ich einfach andere Seiten so

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.get("/test", function(req, res) {
  res.sendFile(__dirname + "/test.html");
});

erzeugen kann?

Also wenn ich einfach nur mehrere HTML Dateien haben möchte.

Und noch eine kleine Frage: Ich kenne es so, dass man in PHP eigentlich immer MySQL-Datenbanken verwendet. In Node.js geht das ja auch, aber gibt es da auch eine Art vorgesehene Datenbank?

Die kleinen Fragen sind nebensächlich, die erste Frage ist mir erst einmal am wichtigsten. Aber wer es weiß ...

MfG

Tom

Computer, HTML, programmieren, JavaScript, Webentwicklung, node.js
2 Antworten

Meistgelesene Fragen zum Thema JavaScript
Mehr meistgelesene Fragen zu JavaScript