Hier lernen wir Plain Vanilla JS, ohne NodeJS oder externe Bibliotheken zu verwenden. Wir beginnen direkt mit einem Anwendungsfall, indem wir einige Google Sheet-Daten in JSON konvertieren, sie in einem AWS S3-Bucket speichern und sie dann mit einfachem JS abrufen. Die meisten Lektionen beginnen mit einem „Hallo Welt“-Programm und nicht viel mehr, aber hier haben wir tatsächlich sofort etwas zu programmieren, damit wir unsere Arrays und Schleifen üben können, die die Grundpfeiler jeder Programmiersprache sind. Außerdem können Sie hier einen Ausflug in die Welt der Datenwissenschaft machen und daraus vielleicht eine Karriere machen, so wie ich es getan habe.
Wenn wir zum ersten Mal Daten untersuchen, denken wir an SQL, aber es gibt viele Anwendungen, bei denen SQL übertrieben ist und nicht benötigt wird. In einem Dashboard mit ein paar Metriken können wir mit einer einfachen JSON-Flatfile als Datenquelle ohne Beziehungen zu anderen Daten auskommen. Dashboards können dieses NoSQL-Format verwenden und sind eine beliebte Wahl für die Berichtsanforderungen von Marketinggruppen.
Um unsere Umgebung einzurichten, benötigen wir eigentlich nur Google Chrome und die JSON-Chrome-Erweiterung zum Konvertieren von Tabellendaten in JSON. Dann benötigen wir kostenloses AWS und einen S3-Bucket als unsere generische Website. Für eine IDE verwenden wir nur einen Windows-Notizblock. Wir benötigen außerdem ein lokales Netzwerk, um unsere Daten abzurufen, da das Abrufen von Daten vom Laufwerk C nicht funktioniert, da die Javascript-Abruf-API das HTTP-Protokoll verwendet und daher ein Webserver erforderlich ist. Bevor wir das kostenlose AWS veröffentlichen, richten wir zunächst einen lokalen Webserver ein, um unsere Daten zu testen. Wir werden dafür einfaches Python verwenden.
Richten Sie die Umgebung ein
Schritte zum Einrichten eines lokalen Python-Servers und einer Indexdatei
Bevor wir einen AWS-Remote-Server erstellen, müssen wir zunächst einen lokalen Webserver mit Python einrichten. Hier erfahren Sie, wie das geht
Finden Sie zunächst heraus, ob Python installiert ist. Öffnen Sie eine Eingabeaufforderung, die standardmäßig Ihren Home-Ordner c:Usersyourname anzeigt, und geben Sie python ein. Wenn Versionsinformationen angezeigt werden, ist sie installiert und Sie können mit Schritt 6 unten fortfahren (stellen Sie jedoch sicher, dass zuerst eine Indexdatei in Ihrem Home-Ordner gespeichert wird)
Wenn Sie Python nicht installiert haben, befolgen Sie diese Anweisungen
Python-Server in Windows
1 Gehen Sie zum Suchbereich, geben Sie cmd ein und drücken Sie dann die Eingabeaufforderung. Es öffnet sich ein schwarzer Bildschirm mit dem Pfad zu Ihrem Home-Ordner (normalerweise C:BenutzerIhrName)
2 Geben Sie Python ein. Wenn es installiert ist, wird eine Versionsnummer angezeigt
3 Wenn nicht installiert, wird die Schaltfläche „Abrufen“ angezeigt. Drücken Sie diese und der Download wird innerhalb weniger Minuten installiert (oder laden Sie einfach Python von Chrome herunter)
4 Sobald die Installation vollständig abgeschlossen ist, öffnen Sie die cmd-Eingabeaufforderung erneut und geben Sie python erneut ein
5 Versionsinformationen werden angezeigt...hier beginnen wir, wenn Python bereits installiert ist
6 Geben Sie python -m http.server ein und dies startet den Server (lassen Sie dieses CMD-Fenster geöffnet)
7 Stellen Sie sicher, dass Sie eine Indexdatei im Home-Ordner gespeichert haben (klicken Sie im Datei-Explorer auf „c:“, dann „Benutzer“ und dann auf „IhrName“, um den Home-Ordner zu öffnen)
7a Lassen Sie cmd geöffnet, während Sie in Schritt 8 zu localhost gehen. Um cmd zu schließen, müssen Sie es erneut öffnen und von vorne beginnen
8 Gehen Sie zu Chrome und geben Sie „localhost:8000“ ein. Ihre Standardindexseite wird angezeigt. Informationen zum Erstellen einer Indexdatei finden Sie weiter unten.
Python-Server auf einem Mac
Öffnen Sie auf einem Mac ein Terminal und beginnen Sie mit Schritt 2 oben. Abhängig von der vorinstallierten Python-Version müssen Sie jedoch möglicherweise die drei oben genannten Optionen ausprobieren. Unser Home-Ordner sollte der Ordner sein, in dem Python installiert ist, und derselbe wie der Terminalordner, in dem wir den Server starten.
Probieren Sie es zuerst aus
So erstellen Sie eine Indexdatei (Homedatei) in unserem Python-Pfad. Speichern Sie sie im selben Ordner, in dem sich der Webserver befindet. Kopieren Sie diesen Code und speichern Sie ihn unter index.html
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
Bereiten Sie einige Daten vor
1 Kopieren Sie diese Daten und fügen Sie sie in ein leeres Google-Blatt ein
Dies ist unser fiktives Unternehmen mit einer Auftragsdatenbank
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
SEHR WICHTIG: Nachdem Sie die Daten eingefügt haben und diese noch hervorgehoben sind, drücken Sie in Google Sheets auf „Daten“ und teilen Sie den Text dann in Spalten auf
2 Holen Sie sich die JSON-Chrome-Erweiterung
Aktivieren Sie Chrome zum Speichern als JSON, bevor Sie das Blatt erstellen.
Ich habe diese einfache Verknüpfung gefunden, die der Google Sheet-Symbolleiste ein JSON-Symbol hinzufügt … das ist eine Chrome-Erweiterung
Gehen Sie zuerst zu diesem Link https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
Klicken Sie dann ganz rechts auf der Seite auf „Zu Chrome hinzufügen“
Öffnen Sie dann ein leeres Google Sheet und Sie sehen das JSON-Symbol als letztes Element in der Symbolleiste oben auf der Seite
3 Wandeln Sie Ihre Daten in JSON um
Fügen Sie die obigen Daten in das Blatt ein, geben Sie dann Text in die Spalten ein, drücken Sie dann auf das JSON-Symbol und gehen Sie zu „Downloads“, um Ihre JSON-Datei abzurufen
4 Speichern Sie diese JSON-Datei im selben Ordner, in dem sich Python und Ihre Indexdatei befinden ... Ich habe sie alsorders.json gespeichert
unser Programm ausführen
5 Rufen Sie Daten aus Ihrer Indexdatei ab ... testen Sie unsere Server- und Dateikonfiguration
Ändern Sie Ihre index.html-Datei so, dass sie den folgenden Code enthält, der sich von dem Code unterscheidet, den wir unten verwenden, um auf die Daten von einem öffentlichen Server zuzugreifen
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
6 Rufen Sie localhost:8000 auf und sehen Sie sich die Daten an
7 Nachdem wir mit JSON auf einem lokalen Server herumgespielt haben, können wir dann einen öffentlichen S3-Bucket in AWS erstellen
Konfigurieren eines AWS S3-Buckets als unseren öffentlichen Server
Der einfachste Weg, eine JSON-Datei remote zu speichern, ist in AWS S3. Indem wir kein Schema auf einem herkömmlichen Datenserver erstellen, werden wir serverlos. Wir sind mit S3 in der AWS-Cloud unterwegs, wo wir von überall aus eine Verbindung zu unserem Bucket-Link herstellen können. Wie bereits erwähnt, weist der noSQL-S3-Ansatz einige Einschränkungen auf. Aber es hat auch große Vorteile. Bei der Arbeit mit Daten tendiert die menschliche Natur dazu, nur eine Tabelle zu verwenden, ähnlich wie früher, als wir uns stark auf eine Excel-Tabelle verließen. Dieses flache Dateiformat kann einige Kennzahlen verarbeiten, sodass wir unser Publikum nicht mit Komplexität bombardieren. Ein idealer Anwendungsfall für eine Flatfile ist ein einfaches Dashboard.
Zuerst erstellen wir einen AWS s3-Bucket und laden dann die JSON-Datei hoch. So machen wir es:
1 Melden Sie sich für die kostenlose AWS-Stufe an, gehen Sie von der AWS-Konsole zu S3 und erstellen Sie einen eindeutigen Bucket-Namen
2 Machen Sie es öffentlich, indem Sie auf der Registerkarte „Bucket-Berechtigungen“ die Option „Öffentlichen Zugriff blockieren“ deaktivieren. Gehen Sie zum Abschnitt „Öffentlichen Zugriff blockieren“, bearbeiten Sie ihn, deaktivieren Sie ihn und speichern Sie ihn.
3 Bleiben Sie auf der Registerkarte „Berechtigungen“, bearbeiten Sie dann die Bucket-Richtlinie, löschen Sie den Inhalt und ersetzen Sie ihn durch Folgendes. Speichern Sie dann die Änderungen (denken Sie daran, Ihren Bucket-Namen unten durch den tatsächlichen Namen zu ersetzen)
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
4 Gehen Sie dann, während Sie sich noch auf der Registerkarte „Berechtigungen“ befinden, zu Cross Origin (Cors), bearbeiten Sie es, ersetzen Sie es durch das Folgende und speichern Sie es.
<!DOCTYPE html>
<body>
<div id="myData"></div> <!--data result displays in this html div-->
<script type="text/javascript">
convert(); //run the convert function..this converts json to html and displays to the front end in the myData div
// async is needed to run await which is the newest way to return a promise..await must be used inside a function
//When you then put await in front of a function you're instructing the program to wait until that operation is complete before moving on.
async function convert() {
//let response = await fetch('https://rickd.s3.us-east-2.amazonaws.com/orders4.json'); //get data from rickd s3 bucket in aws
//replace rickd with your bucket name
let response = await fetch('orders.json'); //get data locally instead of from s3..orders.json is in same folder where python is installed
let data = await response.json(); //getting data array in json format...waiting for all the data to come in
//then iterate over javascript array for as many times as there are js objects inside the array
for (var i = 0; i < data.length; i++) {
data[i].product1 = parseInt(data[i].product1); //this converts from string to int just the val for product1
} //end for loop
//we are rendering the array and not data in table format
myData.innerHTML = JSON.stringify(data, null, "\t"); //first stringify json object then render result inside html div tag
console.log(JSON.stringify(data, null, "\t")) //this is more readable, this is the pretty print..press ctrl-shift-J to view
//console.log(JSON.stringify(data)) //prints all as one line / a string, this is the record format
} //end function
</script>
</body>
<!-- next up..we need to return this data in table format-->
</html>
5 Gehen Sie zur Registerkarte „Eigenschaften“ und klicken Sie auf „Statisches Webhosting“, das letzte Element. Klicken Sie dann auf „Bearbeiten“, dann auf „Aktivieren“ und dann auf „Speichern“. Dadurch wird Ihr Bucket-Link in eine öffentliche Website umgewandelt.
6 Gehen Sie zurück zur Registerkarte „Objekte“ und klicken Sie auf „Hochladen“, gehen Sie dann zu dem Ort, an dem Sie Ihre neu erstellte JSON-Datei gespeichert haben, und schließen Sie diesen Vorgang ab. Ihre JSON-Datei befindet sich jetzt in s3.
7 Sobald die JSON-Datei erfolgreich hochgeladen wurde, wird sie im Abschnitt „Objekte“ Ihres S3-Buckets angezeigt. Doppelklicken Sie auf die JSON-Datei und Sie gelangen auf die Registerkarte „Eigenschaften“, wo Sie die Objektübersicht sehen. Klicken Sie auf die angegebene Objekt-URL und die JSON-Rohdaten werden angezeigt. Kopieren Sie diesen URL-Link und speichern Sie ihn irgendwo, da Sie ihn zum Abrufen von Daten aus Javascript benötigen. Dieser URL-Link bietet Zugriff auf die neu erstellte generische Website, einen öffentlich zugänglichen S3-Bucket, der als temporäre Website dient. Sie können Dateien in diesem Bucket speichern und sie jederzeit mit anderen teilen.
8 Der Zugriff auf unsere JSON-Datei von AWS erfordert eine andere Codierung als auf einem lokalen Server. Zuerst müssen wir dem Benutzer einen Link zu unserer Webseite bereitstellen. Mein öffentlicher Link zu unseren fiktiven Bestelldaten lautet
https://rickd.s3.us-east-2.amazonaws.com/orders4.json Dann sollte unser Code so aussehen, was sich von unserem ursprünglichen Code unterscheidet. Für diesen Code fügen wir, anstatt unser Array anzuzeigen, Tabellenelemente hinzu, sodass die Anzeige im Tabellenformat erfolgt
<!DOCTYPE html> <html lang="en-US"> <header> </header> <body> <p> hi there, this is our first html page </p> </body> </html>
Als nächstes ist hier derselbe Code, in dem wir Header und Stile hinzufügen
order_no,order_date,product_line,dollar_amt,product1,product2,product3 12340,01-03-22,prod1,400,400,0,0 12341,01-02-22,prod2,50,0,50,0 12342,1-16-22,prod3,50,0,0,50 12343,1-17-22,prod1,100,100,0,0 12344,1-15-22,prod2,50,0,50,0 12345,2-5-22,prod1,100,100,0,0 12346,2-6-22,prod3,20,0,0,20 12347,2-7-22,prod1,100,100,0,0 12348,3-23-22,prod2,200,0,200,0 12349,3-5-22,prod3,20,0,0,20 123410,3-29-22,prod1,100,100,0,0 123411,3-25-22,prod1,100,100,0,0 123412,4-23-22,prod1,500,500,0,0 123413,4-24-22,prod2,100,0,100,0 123414,5-10-22,prod3,50,0,0,50 123415,5-15-22,prod1,500,500,0,0 123416,5-25-22,prod2,50,0,50,0
Teil 2
Array – die wichtigste Datenstruktur
In Javascript sind unsere Daten als Schlüssel-Wert-Paare strukturiert, die von geschweiften Klammern umgeben und durch Kommas getrennt sind. Ein Array enthält mehrere Javascript-Objekte, wobei jedes Objekt eine Datenzeile darstellt. Dies wird als JSON-Format oder Javascript Object Notation bezeichnet.
Schleife / Iteration – die wichtigste Schleife ist die for-Schleife, aber Sie sollten sich über andere Arten von Schleifen informieren. Eine for-Schleife durchläuft ein Datenarray und führt bei jedem Durchgang eine Operation aus. In unserem Anwendungsfall werden die Daten lediglich über eine Abrufanforderung im Frontend angezeigt.
eine Funktion
Eine Funktion ist ein Codeblock, eine Reihe von Anweisungen, die als Reaktion auf ein Ereignis wie das Drücken einer Taste ausgeführt werden. In einigen Fällen sind Funktionen nicht erforderlich, in anderen Fällen ist jedoch eine Funktion erforderlich, damit Code ordnungsgemäß funktioniert. Funktionen haben entweder einen Namen oder sind anonym. Sie können aufgerufen werden oder selbstausführend sein. Die gefürchtete Pfeilnotation ist zunächst einschüchternd, wird aber häufig verwendet, also gewöhnen Sie sich daran.
Bedingte Logik Zu guter Letzt haben wir noch die if/else-Anweisung. if(condition) {dann mach das} else {mach das🎜>
Abschließend ist es notwendig, sich mit all diesen Themen auseinanderzusetzen, um mehr Wissen zu erlangen, da ich hier in dieser Lektion nur eine kleine Zusammenfassung gebe. Ich stelle nur eine Roadmap zur Verfügung, eine Art Einführung, und Sie als Programmierer müssen den Rest lernen.Viel Spaß beim Codieren!!
Nachtrag
Unser einfacher JS- und NoSQL-Anwendungsfall ist ein Balkendiagramm, dessen Code Sie hier finden können ... unter https://dev.to/rickdelpo1/stacked-bar-chart-using-a-json-data- source-plain-vanilla-javascript-plain-css-and-no-chart-libraries-2j29
über den Autor Rick Delpo. https://javasqlweb.org/about.html
Das obige ist der detaillierte Inhalt vonEinfache Javascript-Auffrischung für diejenigen, die sich im Stich gelassen fühlen oder nicht wissen, wo sie mit Funktionen, Arrays, Schleifen, JSON und NoSQL anfangen sollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
