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

1. Geben Sie python -m http.server ein oder
2. Geben Sie python3 -m http.server ein, wenn das oben genannte nicht funktioniert Drücken Sie die Eingabetaste und Python 3 startet sofort einen einfachen HTTP-Server aus dem Verzeichnis, in dem der Befehl ausgeführt wurde. Dieses Verzeichnis sollte auch eine Indexdatei haben oder Option 3, wenn andere nicht funktionieren
3. Geben Sie python -m SimpleHTTPServer 8000 für ?ltere Versionen ein

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

Arrays, Schleifen und Funktionen, einige Bausteine ??der Codierung, die Grundlagen der Programmierung

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!