lifelong learner — urip iku urup, currently working on accenture.

Bab 2 Fungsi dan Kegunaan javascript – Tutorial pemrograman javascript pemula

0
Degananda.com -

Selayang pandang – definisi javascript

javascript secara harfiah adalah bahasa pemrograman yang berjalan pada browser. Kegunaan utamannya adalah untuk mengontrol interaksi antara website dengan interface pengguna (mouse tap/klik, keyboard press/tap, dan lain sebagainnya) maupun interaksi internal antara website(kode html) dengan browser. Selain itu, hal-hal interaktif seperti peta baik 3d maupun 2d juga dikontrol oleh javascript.

Beberapa API yang dapat diakses oleh javascript untuk interaksi antara website dan browser diantarannya adalah :

  1. DOM (Domain Access Model) digunakan untuk melakukan manipulasi content yang berada di website misalnya text, paragraph. Contohnya ketika user melakukan klik terhadap menu daftar makanan , maka text yang ditampilkan mengenai daftar makanan sedangkan ketika user melakukan klik mengenai menu daftar mobil maka text yang ditampilkan mengenai daftar jenis-jenis mobil
  2. HTTP API digunakan untuk mendapatkan data dari backend server. Contohnya disini website akan digunakan menampilkan cuaca maka dapat memanfaatkan HTTP/HTTPS API untuk mengakses openweathermap API. tidak hanya itu, berbagai macam api yang disedaikan 3rd party seperti google, azure, dan lain-lain dapat diakses menggunakan HTTP/HTTPS
  3. Canvas dan WebGL kedua api ini digunakan untuk membuat grafik 2d maupun 3d. Contohnya untuk membuat game seperti agar.io ataupun flappy bird versi browser.
  4. Video API – untuk menampilkan video
  5. dan lain sebagainnya.

Javascript untuk Frontend & Backend

javascript_frontend_backend.jpg

Seiring dengan berjalannya waktu, javascript tidak hanya dapat dijalankan pada browser (client-side/frontend) tetapi juga dapat berjalan di sisi server(backend) dengan bantuan nodejs runtime dan dapat terhubung dengan database, sistem operasi/VM, cloud component seperti azure/AWS/GCP dan lain sebagainnya.

Itulah mengapa saat ini javascript juga digunakan untuk membangun sistem backend mulai dari sistem backend, transaksi, client-queue dan task backend lainnya selayaknya seperti bahasa pemrograman object oriented lain seperti java, python atau .net karena satu bahasa pemrograman dapat mencakup frontend serta backend.

Peranan , Fungsi dan Kegunaan javascript secara frontend

Interaksi HTML , Javascript dan CSS

interaksi_css_html_javascript.jpg

Javascript merupakan scripting yang mengontrol interaksi website dengan pengguna dan interaksi internal website dengan browser seperti mengatur apa yang akan terjadi ketika user menuliskan text pada suatu form input.

Filter form input, Mengambil data dari server backend ke frontend menggunakan HTTP API dan Mengatur apa yang akan terjadi ketika user melakukan klik terhadap suatu tombol submit adalah tanggung jawab javascript karena merupakan bentuk interaksi antara browser dan website.

Sedangkan Untuk urusan desain website yang diantarannya meliputi :

  1. lebar layer website
  2. warna background website
  3. warna, ukuran dan jenis font / tulisan dari website
  4. jarak antara elemen yang ada pada website
  5. desain form
  6. dan lain – lain

kesemua hal diatas bukan merupakan tanggung jawab dari javascript melainkan terdapat satu komponen bernama HTML(Hypetext Markup Languange) dan cassading style sheet (CSS).

HTML merupakan baris kode yang mendeskripsikan bagian-bagian dari suatu website contohnya : header, body, table, list dan lain sebagainnya sedangkan CSS yang bertanggung jawab atas desain dari komponen tersebut. Contohnya css akan mengatur jenis ukuran(panjang x lebar, margin, padding) dan warna dari tabel.

Peranan CSS terhadap cara rendering website

RWD_.jpg

Selain dapat mengatur desain suatu website CSS juga dapat mengontrol bagaimana seharusnya website tersebut didesain atau dirender berdasarkan dari jenis device yang mengakses website tersebut menggunakan fitur yang bernama CSS media query.

Contohnya ketika ada user yang mengakses website melalui laptop ataupun pc maka website akan dirender dengan ukuran maksimal sedangkan ketika ada user yang mengakses dengan mobile phone maka website akan dirender dengan ukuran yang lebih kecil sehingga font dan komponen yang ditampilkan pada handphone memiliki ukuran proposional hal ini disebut dengan responsive web design (RWD).

Contoh kode javascript pada frontend

fe-helloworld-event-bind-click-javascript.jpg

Berikut ini adalah kode html dan javascript(embedded pada html code) untuk menampilkan button pada body html kemudian membuat event listener “klik” pada button tersebut. Sehingga pada saat user melakukan klik terhadap button tersebut akan menampilkan alert “hello dunia”

<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <button id="button_saya">Klik Saya!</button>
    </body>
    <script lang="javascript">
        var buttonKu = document.getElementById("button_saya");
        buttonKu.addEventListener('click', () => {
            alert("hello dunia");
        });
    </script>
</html>

Peranan , Fungsi dan Kegunaan javascript secara Backend

javascript_fungsi_dan_kegunaan_thumbnail

Pada sisi backend javascript dapat dimanfaatkan dalam membuat API yang akan dikonsumsi oleh frontend untuk mendapatkan data yang nantinnya akan ditampilkan pada frontend.

Saat ini berbagai penyedia cloud seperti azure, aws dan google cloud telah mensupport javascript untuk dapat berjalan pada infrastruktur serverless mereka seperti azure function dan google function

Selain dapat mengirimkan data dari server, javascript sebagai backend ini juga dapat memproses transaksi yang bersumber dari frontend atau input user pada website. Contohnya terdapat form registrasi maka javascript pada backend(NodeJS) akan memasukan data user tersebut kedalam database.

Backend API yang dibuat dapat menggunakan berbagai macam protokol yang disupport oleh NodeJS. Namun umumnya menggunakan HTTP Rest. Terdapat berbagai jenis framework yang dapat digunakan untuk membuat RESTful API seperti Hapi, Express dan lain sebagainnya.

Contoh kode javascript sebagai backend API

berikut ini adalah contoh sederhana javascript yang digunakan dalam membuat API untuk menampilkan daftar menu makanan dari server.

const express = require('express');
const app = express();

app.route('/makanan').get((req,res) => {
    const daftarMakanan = ["Ketroprak", "Bakso", "Gado-Gado"];
    let makanan = [];
    let indexMakanan = 1;
    daftarMakanan.map((val) => {
        makanan.push({
            id : indexMakanan++,
            namaMakanan : val
        });
    });
    let jsonReponse = {
        "transactionId":"test",
        "daftarMakanan":makanan
    };
    res.json(jsonReponse);

});

app.listen(3000, () =>{
    console.log("app running on port 3000");
})

kode diatas akan membuat api pada url berikut [GET] localhost:3000/makanan. Ketika api tersebut dengan menggunakan HTTP method GET makan akan memunculkan data daftar makanan dari server. Data yang ditampilkan dapat berupa static text maupund data dinamis yang berasal dari database.

javascript-be-get-rest-api-daftar-makanan.jpg

(Visited 6 times, 1 visits today)
Please follow and like us:

Leave a Reply