Penyegar Javascript Biasa untuk mereka yang berasa ketinggalan atau tidak tahu di mana hendak bermula dengan Fungsi, Tatasusunan, Gelung, JSON & NoSQL

Di sini kita akan mempelajari Plain Vanilla JS tanpa menggunakan NodeJS atau perpustakaan luaran. Kami akan bermula terus dari kotak dengan kes penggunaan dengan menukar beberapa data helaian Google kepada JSON dan menyimpannya dalam baldi AWS S3, kemudian mengambilnya menggunakan js biasa. Kebanyakan pelajaran bermula dengan program hello world dan tidak banyak lagi tetapi di sini kita sebenarnya mempunyai sesuatu untuk diprogramkan dengan segera supaya kita boleh mempraktikkan tatasusunan dan gelung kita yang merupakan tonggak utama dalam mana-mana bahasa pengaturcaraan. Selain itu, anda boleh menceburi dunia Sains Data di sini dan mungkin membuat kerjaya daripadanya seperti yang saya lakukan.

Apabila kami mula-mula mengkaji data, kami memikirkan SQL tetapi terdapat banyak apl yang SQL berlebihan dan tidak diperlukan. Dalam papan pemuka dengan beberapa metrik, kami boleh lari menggunakan fail rata JSON yang ringkas sebagai sumber data kami tanpa hubungan dengan data lain. Papan pemuka boleh menggunakan format NoSQL ini dan merupakan pilihan popular untuk keperluan pelaporan kumpulan Pemasaran.

Untuk menyediakan persekitaran kami, kami hanya memerlukan Google Chrome dan sambungan json chrome untuk menukar data hamparan kepada json. Kemudian kami memerlukan AWS percuma dan baldi S3 sebagai tapak web generik kami. Untuk IDE kami hanya akan menggunakan notepad windows. Kami juga memerlukan rangkaian tempatan untuk mengambil data kami kerana mengambil data daripada pemacu C tidak akan berfungsi kerana javascript fetch api menggunakan protokol http jadi pelayan web diperlukan untuk ini. Sebelum didedahkan kepada AWS percuma, kami akan menyediakan pelayan web tempatan terlebih dahulu untuk menguji data kami. Kami akan menggunakan Python mudah untuk ini.

sediakan persekitaran
langkah untuk menyediakan pelayan Python tempatan dan fail indeks

Sebelum mencipta pelayan jauh AWS, kami perlu menyediakan pelayan web tempatan menggunakan Python dahulu..berikut ialah cara untuk melakukannya

Mula-mula ketahui jika Python dipasang... buka command prompt yang akan lalai ke folder rumah anda c:Usersyourname dan taipkan python. Jika maklumat versi menunjukkan maka ia dipasang dan anda boleh pergi ke langkah 6 di bawah (tetapi pastikan bahawa fail indeks disimpan dalam folder rumah anda dahulu)
jika anda tidak memasang python ikut arahan ini

Pelayan Python dalam tingkap
1 pergi ke kawasan carian dan taip cmd kemudian tekan command prompt, skrin hitam akan dibuka dengan laluan ke folder rumah anda (biasanya C:UsersyourName)
2 taip python, jika dipasang ia akan menunjukkan nombor versi
3 jika tidak dipasang maka butang dapatkan muncul, tekan ini dan muat turun akan dipasang dalam beberapa minit (atau muat turun sahaja python dari chrome)
4 setelah dipasang sepenuhnya buka semula cmd prompt dan taip python sekali lagi
Maklumat versi 5 akan dipaparkan....di sinilah kita bermula jika python sudah dipasang
6 taipkan python -m http.server dan ini memulakan pelayan (pastikan tetingkap cmd ini terbuka)
7 pastikan anda menyimpan fail indeks dalam folder rumah (dalam fail explorer klik c: kemudian Pengguna kemudian nama anda untuk membuka folder rumah)
7a pastikan cmd terbuka semasa anda pergi ke localhost dalam langkah 8...menutup cmd memerlukan pembukaan semula dan mulakan semula
8 pergi ke chrome dan taip localhost:8000 dan halaman indeks lalai anda akan muncul....lihat di bawah untuk membuat fail indeks

Pelayan Python pada Mac
pada mac buka terminal dan mulakan dengan langkah 2 di atas ....kecuali mungkin perlu mencuba 3 pilihan berbeza di atas bergantung pada versi python yang telah dipasang. Folder rumah kita mestilah folder yang dipasang Python dan sama dengan folder terminal tempat kita memulakan pelayan.

cuba ini dahulu

1. taip python -m http.server atau
2. taip python3 -m http.server jika di atas tidak berfungsi Tekan kembali dan Python 3 akan serta-merta memulakan pelayan HTTP mudah dari direktori di mana arahan itu dilaksanakan..dir ini juga harus mempunyai fail indeks atau pilihan 3 jika yang lain tidak berfungsi
3. taip python -m SimpleHTTPServer 8000 untuk versi lama

Cara mencipta fail indeks (rumah) dalam laluan Python kami..simpan ke folder yang sama di mana pelayan web berada. Salin kod ini dan simpan sebagai index.html

     <!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
   <p> hi there, this is our first html page </p>
</body>
</html>

sediakan beberapa data

1 salin data ini dan tampalkannya ke dalam helaian google kosong
ini adalah syarikat rekaan kami dengan pangkalan data pesanan

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

SANGAT PENTING - selepas menampal data dan semasa ia masih diserlahkan, dalam helaian google, tekan data kemudian bahagikan teks kepada lajur

2 dapatkan sambungan krom json
dayakan chrome untuk menyimpan sebagai json sebelum membuat helaian.
Saya dapati pintasan mudah ini yang menambahkan ikon JSON pada bar alat helaian google...ini ialah sambungan krom
mula-mula pergi ke pautan ini https://chromewebstore.google.com/detail/sheets-to-json/enmkalgdnmcaljdfkojckdbhkjmffmoa
kemudian tekan tambah pada chrome, ke hujung sebelah kanan halaman
kemudian buka helaian google kosong dan anda akan melihat ikon JSON sebagai item terakhir dalam bar alat berhampiran bahagian atas halaman

3 mengubah data anda menjadi json
tampal data di atas ke dalam helaian, kemudian teks ke lajur, kemudian tekan ikon json dan pergi ke muat turun untuk mendapatkan fail json anda

4 simpan fail json ini dalam folder yang sama di mana python dan fail indeks anda berada...saya simpan sebagai orders.json

laksanakan program kami

5 ambil data daripada fail indeks anda...menguji konfigurasi pelayan dan fail kami

tukar fail index.html anda untuk mengandungi kod berikut yang berbeza daripada kod yang akan kami gunakan di bawah untuk mengakses data daripada pelayan awam

     <!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
   <p> hi there, this is our first html page </p>
</body>
</html>

6 hubungi localhost:8000 dan lihat data
7 selepas bermain-main dengan json pada pelayan tempatan, kami kemudian boleh mencipta baldi S3 awam dalam AWS

Mengkonfigurasi Baldi AWS S3 sebagai Pelayan Awam kami

Cara paling mudah untuk menyimpan fail JSON dari jauh ialah dalam AWS S3. Dengan tidak mencipta skema dalam pelayan data tradisional, kami menjadi tanpa pelayan. Kami berada di luar dalam awan AWS dengan S3 di mana kami boleh menyambung ke pautan baldi kami dari mana-mana sahaja. Seperti yang dikatakan sebelum ini pendekatan noSQL S3 mempunyai beberapa batasan. Tetapi ia juga mempunyai faedah yang besar. Apabila bekerja dengan data, sifat manusia cenderung hanya mahu menggunakan satu jadual yang serupa dengan hari ole di mana kita sangat bergantung pada satu jadual excel. Format fail rata yang satu ini boleh mengendalikan beberapa metrik supaya kami tidak membebankan khalayak kami dengan kerumitan. Kes penggunaan yang sesuai untuk fail rata ialah papan pemuka yang ringkas.

Mula-mula kami mencipta baldi AWS s3 kemudian kami memuat naik fail JSON. Begini cara kami melakukannya:

1 Daftar untuk AWS peringkat percuma, pergi ke S3 dari konsol AWS dan buat nama baldi yang unik

2 jadikan ia umum, dengan pergi ke tab kebenaran baldi untuk mematikan sekat akses awam - pergi ke sekat bahagian akses awam, edit, nyahtanda dan simpan

3 kekal dalam tab kebenaran kemudian edit dasar baldi, padamkan apa yang ada dan gantikan dengan berikut, kemudian simpan perubahan (ingat untuk menggantikan nama baldi anda di bawah dengan nama sebenar)

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 kemudian, semasa masih dalam tab kebenaran pergi ke asal silang (kor), edit dan ganti dengan di bawah dan simpan

<!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 Pergi ke tab sifat dan tekan pengehosan web statik, item terakhir. Kemudian klik edit kemudian dayakan kemudian simpan. Ini mengubah pautan baldi anda menjadi tapak web awam.

6 Kembali ke tab objek dan tekan Muat Naik, kemudian pergi ke tempat anda menyimpan fail JSON yang baru anda buat dan selesaikan operasi ini. Fail json anda kini akan berada dalam s3.

7 Setelah fail JSON berjaya dimuat naik, ia akan muncul dalam bahagian objek baldi s3 anda. Klik dua kali fail JSON dan anda akan berada dalam tab sifat tempat anda melihat gambaran keseluruhan Objek. Klik pada url objek yang disediakan dan data JSON mentah akan muncul. Salin dan simpan pautan url ini di suatu tempat kerana anda memerlukannya untuk mengambil data daripada Javascript. Pautan url ini menyediakan akses kepada tapak web generik yang baru dibuat, baldi S3 yang boleh diakses secara umum yang berfungsi sebagai tapak web sementara. Anda boleh menyimpan fail ke baldi ini dan mengongsinya dengan orang lain pada bila-bila masa.

8 mengakses fail json kami daripada AWS memerlukan pengekodan yang berbeza daripada yang digunakan dalam pelayan tempatan. Mula-mula kami perlu menyediakan pengguna dengan pautan ke halaman web kami. Pautan awam saya ke data pesanan rekaan kami ialah
https://rickd.s3.us-east-2.amazonaws.com/orders4.json Kemudian kod kami sepatutnya kelihatan seperti ini yang berbeza daripada kod asal kami. Untuk kod ini bukannya memaparkan tatasusunan kami, kami menambah elemen jadual supaya paparan adalah dalam format jadual

     <!DOCTYPE html>
<html lang="en-US">
<header>
</header>
<body>
   <p> hi there, this is our first html page </p>
</body>
</html>

seterusnya, berikut ialah kod yang sama di mana kami menambah pengepala dan penggayaan

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

Bahagian 2

Tatasusunan, Gelung dan Fungsi, beberapa blok binaan pengekodan, asas asas pengaturcaraan

Array - struktur data yang paling penting
Dalam javascript, data kami distrukturkan sebagai pasangan nilai kunci yang dikelilingi oleh pendakap kerinting dan dibataskan dengan koma, tatasusunan mengandungi berbilang objek javascript dengan setiap objek mewakili satu baris data. Ini dipanggil format JSON atau Notasi Objek Javascript.

Gelung / Lelaran - gelung yang paling penting ialah gelung for tetapi anda harus mengkaji jenis gelung lain. A untuk gelung berulang pada tatasusunan data dan melakukan operasi untuk setiap pas. Dalam kes penggunaan kami, ia hanya memaparkan data ke bahagian hadapan melalui permintaan pengambilan.

fungsi
Fungsi ialah blok kod, satu set arahan, yang dilaksanakan sebagai tindak balas kepada beberapa jenis acara seperti menekan butang. Dalam sesetengah kes fungsi tidak diperlukan tetapi dalam kes lain fungsi diperlukan untuk sesetengah kod berfungsi dengan baik. Fungsi sama ada mempunyai nama atau tanpa nama. Mereka boleh dipanggil atau boleh dilaksanakan sendiri. Notasi anak panah yang digeruni pada mulanya menakutkan tetapi ia digunakan secara meluas jadi biasakan diri anda.

logik bersyarat akhir sekali kita juga mempunyai pernyataan if / else. if(condition) {then do this} else {do ​​that}

kesimpulannya adalah perlu untuk mengkaji semua topik ini untuk mendapatkan lebih banyak pengetahuan kerana saya hanya menyediakan sinopsis kecil di sini dalam pelajaran ini. Saya hanya menyediakan peta jalan, jenis buku asas dan anda sebagai pengaturcara mesti mempelajari selebihnya.

Selamat pengekodan !!

tambahan

kes penggunaan js biasa, nosql kami ialah carta bar di mana anda boleh mencari kod di sini....di https://dev.to/rickdelpo1/stacked-bar-chart-using-a-json-data- source-plain-vanilla-javascript-plain-css-and-no-chart-libraries-2j29

tentang pengarang Rick Delpo.. https://javasqlweb.org/about.html

Atas ialah kandungan terperinci Penyegar Javascript Biasa untuk mereka yang berasa ketinggalan atau tidak tahu di mana hendak bermula dengan Fungsi, Tatasusunan, Gelung, JSON & NoSQL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!