Javascript Dasar

PreviousPengenalan Javascript NextJavascript DOM

Last updated 1 year ago

Was this helpful?

Javascript Dasar

Pendahuluan

JavaScript adalah bahasa pemrograman tingkat tinggi yang pada awalnya dikembangkan untuk membuat website menjadi lebih “hidup”. Bersama dengan HTML dan CSS, JavaScript menjadi bahasa pemrograman paling populer untuk mengembangkan aplikasi berbasis web. Bahasa ini mampu memberikan logic ke dalam website, sehingga website tersebut memiliki fungsionalitas tambahan dan lebih interaktif [5].

Awalnya JavaScript dibuat supaya dapat berjalan di lingkungan browser dan membuat website menjadi lebih interaktif. Namun, saat ini Anda sebagai developer dapat menggunakan bahasa pemrograman JavaScript di berbagai lingkungan pengembangan. Sehingga, tidak hanya sebatas browser/client, namun JavaScript juga bisa berjalan di server menggunakan Node.js [5].

Apa itu bahasa pemrograman Javascript ?

JavaScript termasuk ke dalam kategori scripting language. Apa maksudnya? Salah satu ciri-ciri utama dari bahasa scripting adalah kode tidak perlu dikompilasi agar bisa dijalankan. Scripting language menggunakan interpreter untuk menerjemahkan kode atau perintah yang kita tulis supaya dimengerti oleh mesin.

Itulah kenapa bahasa scripting tidak membutuhkan banyak kode yang perlu ditulis agar sebuah program bisa dijalankan. Hanya dengan satu baris kode berikut Anda sudah bisa membuat program yang menampilkan teks “Hello, World!” ke layar.

console.log(“Hello, World!”);

Sederhana, bukan? Itulah salah satu ciri utama JavaScript sebagai scripting language.

Sejarah

Javascript yaitu bahasa pemrograman yang dikembangkan oleh Netscape. Proses desainnya memerlukan waktu selama sepuluh hari. Nama awal dari javascript yaitu Mocha, lalu Mona, Live script, baru kemudian javascript.[1]

Awalnya bahasa pemrograman Javascript yang dibuat pada bulan September 1995 oleh Brendan Eich ini hanya dipakai oleh kalangan Netscape, fungsinya pun terbatas tidak seperti saat ini. Kemudian Javascript diadopsi di luar Netscape dan distandarisasi oleh European Computer Manufacturer’s Association (ECMA), sehingga ada yang menyebutnya dengan nama ECMAScript.

Pada tahun 1996 javascript disebut sebagai ECMAScript. Hal tersebut berlanjut hingga tahun 1998. Di tahun 1998 dimunculkan ECMAScript 2 dan tahun 1999 muncul ECMAScript 3. Mulai tahun 2015, ECMAScript dinamai menurut tahun (ECMAScript 2015). ECMAScript terus dikembangkan hingga akhirnya menjadi JavaScript yang ada saat ini. [1]

Versi ECMAScript

Berikut versi ECMAScript sampai dengan saat ini

Apa yang bisa dilakukan Javascript ?

Dapat mengubah konten HTML
Dapat mengubah atribut value HTML
Dapat mengubah style HTML
Dapat menyembunyikan elemen HTML
Dapat menampilkan elemen HTML

Cara Penulisan Javascript

Penulisan sintaks javascript ada 3 cara antara lain: 1. inline : disisipkan langsung ke dalam tag html, 2. internal : diletakkan pada tag di dalam file HTML, bisa ditempatkan di antara tag head atau body 3. eksternal : menyimpan file javascript dengan ekstensi .js kemudian menghubungkannya dengan file HTML.

Inline

Berikut contoh penulisan sintaks javascript secara inline:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cara Penulisan JS</title>
</head>

<body>
    <button onclick="alert('halo')"> Tekan </button>
</body>

</html>

Hasil dari kode di atas, menampilkan button Tekan dengan atribut onclick, jika ditekan buttonya akan menampilkan alert halo.

Internal

Berikut contoh penulisan sintaks javascript secara internal:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cara Penulisan JS</title>
</head>

<body>
    <p id="nama"></p>

    <script>
        document.getElementById("nama").innerHTML = "Nama saya Ahmad";
    </script>
</body>

</html>

Kode di atas menyisipkan teks Nama saya Ahmad ke dalam tag <p id="nama"></p> menggunakan atribut innerHTML

External

Berikut contoh penulisan sintaks javascript secara external. Ada 2 file yang dibuat antara lain index.html dan script.js.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cara Penulisan JS</title>
</head>

<body>
    <p id="nama"></p>
    <button onclick="halo()">Tekan</button>
    
    <!-- memanggil file script.js -->
    <script src="script.js"></script>
</body>

</html>

script.js

// menyisipkan teks Nama saya Ahmad ke dalam tag <p id="nama"></p>
document.getElementById("nama").innerHTML = "Nama saya Ahmad";

// jika button ditekan, memanggil funtion halo() 
function halo() {
    alert('Halo semua');
}

Hasil dari kode di atas menampilkan teks Nama saya Ahmad, dan button Tekan. Jika button ditekan menampilkan alert Halo semua.

Cara Menampilkan Javascript

Menggunakan innerHTML

innerHTML merupakan sebuah atribut di dalam (objek) elemen HTML yang berisi string HTML. Dengan innerHTML, kita dapat menampilkan output ke elemen yang lebih spesifik.[3]

<!DOCTYPE html>
<html>

<body>

    <h2>Halaman pertama saya</h2>
    <p>Paragraf pertama saya</p>

    <p id="demo"></p>

    <script>
        document.getElementById("demo").innerHTML = "Paragraf kedua saya";
    </script>

</body>

</html>

Kode javascript di atas akan menempatkan teks "Paragraf kedua saya" ke dalam tag <p id="demo"></p>.

Berikut hasil dari kode di atas.

Menggunakan document.write()

Objek document adalah objek yang mewakili dokumen HTML di dalam Javascript. Dalam objek document, terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML. [3]

<!DOCTYPE html>
<html>

<body>

    <h2>Halaman pertama saya</h2>
    <p>Paragraf pertama saya</p>

    <script>
        document.write("Paragraf kedua saya");
    </script>

</body>

</html>

Kode javascript di atas akan menampilkan teks Paragraf kedua saya.

Jangan panggil document.write() setelah dokumen selesai dimuat. Ini akan menghapus semua HTML yang ada.

<!DOCTYPE html>
<html>

<body>

    <h2>Halaman pertama saya</h2>
    <p>Paragraf pertama saya</p>

    <button type="button" onclick="document.write('Halo MDP')">Coba</button>

</body>

</html>

Pada dokumen HTML di atas terdapat atribut onclick dengan value document.write('Halo MDP'). Jika button ditekan, yang hanya tampil teks "Halo MDP", sementara elemen yang lain akan dihapus dari tampilan browser.

Berikut tampilan jika tombol Coba ditekan.

Menggunakan window.alert()

Fungsi alert() merupakan fungsi untuk menampilkan jendela dialog. Fungsi sebenarnya berada pada objek window.[3]

Secara lengkap bisa ditulis seperti ini:

window.alert('Halo MDP');

Bisa juga ditulis alert() saja seperti ini:

alert('Halo MDP');

Contoh penggunaan fungsi alert():

<!DOCTYPE html>
<html>

<body>

    <h2>Halaman pertama saya</h2>
    <p>Paragraf pertama saya</p>

    <script>
        window.alert('Halo MDP');
    </script>

</body>

</html>

Hasil dari kode di atas

Menggunakan console.log()

Fungsi console.log() merupakan fungsi untuk menampilkan teks ke dalam console Javascript. Biasanya digunakan untuk debugging. Karena setiap pesan error di Javascript selalu ditampilkan di dalam Console.[3]

Contoh penggunaan:

<!DOCTYPE html>
<html>

<body>

    <script>
        console.log('Halo MDP');
    </script>

</body>

</html>

Hasil dari kode di atas ditampilkan di menu konsol browser.

Variabel

Variabel adalah tempat untuk menyimpan suatu nilai. Beberapa syarat penulisan variabel di javascript antara lain:

Dapat berisi huruf, angka, karakter garisbawah (_), dan karakter dolar ($)
Diawali dengan huruf, karakter _ atau karakter $
Bersifat case sensitive (huruf besar dan huruf kecil diartikan berbeda)

Berikut contoh penulisan variabel di javascript:

let nama = 'Ahmad';
let $ttl = 'Palembang, 8 Oktober 2000';
let jenis_kelamin = 'Laki-laki';
let programStudi = 'Teknik Informatika';
let _alamat = 'Jl Rajawali Palembang';

Beda var, let, dan const ?

Sebelum ES6 hanya ada satu cara untuk membuat variabel, yaitu menggunakan var.

var x; // declaration
x = 1; // assignment

// atau
var y = 1;

Sejak ES6, Javascript memperkenalkan let dan const untuk urusan variabel. var tetap di pertahankan untuk menjaga kompatibilitas ke versi sebelumnya. [4]

Disarankan menggunakan let daripada var
const digunakan untuk variabel yang nilainya statis atau tidak berubah const KEY = 123

Berikut tabel perbandingan var, let dan const

Masalah pada var

Redeclare

Masalah pada redeclare disini yaitu tidak ada pesan error sama sekali ketika terjadi duplikasi variabel. [4]

var nama ='nama1'
var nama ='nama2'
console.log(nama) //=> nama2

Sementara jika menggunakan let

let nama ='nama1'
let nama ='nama2' // SyntaxError: redeclaration of let foo

Hoisting

x=10
var x
console.log(x) //=> 10

Hasil kode di atas adalah 10. Karena Hoisting. Hoisting artinya mengangkat. Jadi di belakang layar sebenarnya mengangkat var x (baris kedua) di angkat keatas (dipindahkan ke baris pertama). Hal ini dapat membuat bingung.[4]

var x
x=10
console.log(x) //=> 10

Sementara jika menggunakan let

x=10
let x
console.log(x) // undefined

Hoisting tidak berlaku pada let dan variabel let harus didefenisikan terlebih dahulu sebelum di assign atau eksekusi [4]

Scope

Block scope dalam javascript ditandai dengan simbol { }. Scope artinya pembagian program, ini sering di temui pada if, for, switch, while dan sebagainya. Variabel dalam scope seharusnya menjadi private dan tidak bisa dibaca dari scope lain. [4]

var b=2
if (true){
  var b=3
}
console.log(b) //=> 3

Hasil dari kode di atas menampilkan angka 3, sementara var b = 3 berada di dalam scope.[4]

Sementara jika menggunakan let

let b=2
if (true){
  let b=3
}
console.log(b) //=> 2

let adalah block scope, sehingga kita tidak perlu harus berurusan lagi dengan function untuk membuat local variabel.

Tipe Data

Number Tipe data yang berbentuk bilangan bulat. Penulisan tipe data number tidak menggunakan tanda petik let umur = 17;
String Tipe data berbentuk kata atau kalimat. Penulisan tipe data string diawali dan diakhiri tanda petik. let prodi = “Manajemen Informatika”;
Boolean Tipe data yang memiliki dua value, yaitu true dan false. let status = true;
Array Tipe data yang dapat menyimpan banyak data dalam satu variabel. let hobi = [“baca”, “nonton”, “jalan”];
Object Tipe data yang dapat menyimpan banyak data dalam satu variabel. Tipe data object memiliki nama dan value. let mahasiswa = { npm : 1720110001, nama : “ahmad”, umur : 17, hobi : [“baca”, “nonton”, “jalan”] };

Berikut contoh penggunaan tipe data pada javascript:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tipe Data</title>
</head>

<body>
    <h2>Profil</h2>
    <p id="nama"></p>
    <p id="kota"></p>
    <p id="umur"></p>
    <p id="status"></p>
    <p id="hobi"></p>
    <p id="mahasiswa"></p>

    <script>
        // tipe data string
        let nama = "ahmad";
        let kota = 'palembang';
        document.getElementById('nama').innerHTML = nama;
        let tampilkota;
        tampilkota = document.getElementById('kota');
        tampilkota.innerHTML = kota;

        // tipe data number
        let umur;
        umur = 17;
        document.getElementById('umur').innerHTML = umur;

        // tipe data boolean
        let status;
        status = true;
        document.getElementById('status').innerHTML = status;

        // tipe data array (object)
        let hobi = ['baca', 'nonton', 'jalan'];
        document.getElementById('hobi').innerHTML = hobi[0] + ", " + hobi[1];

        // tipe data object
        let mahasiswa = {
            nama: "doe",
            kota: 'palembang',
            umur: 17,
            hobi: ['baca', 'nonton', 'jalan']
        };
        document.getElementById('mahasiswa').innerHTML = mahasiswa.nama + ", " + mahasiswa.hobi[2];
    </script>
</body>

</html>

Hasil dari kode di atas sebagai berikut

Perulangan

Perulangan pada javascript dapat menggunakan fungsi for atau while. Berikut contoh penggunaan perulangan for dan while di dalam javascript.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Perulangan</title>
</head>

<body>
    <h1>Perulangan </h1>
    <button onclick="perulangan()">Tekan Tombol</button>
    <h2>For</h2>
    <div id="hasil1"></div>
    <h2>While</h2>
    <div id="hasil2"></div>
    <script>
        function perulangan() {
            let teks1 = "";
            let a;
            for (a = 0; a <= 5; a++) {
                teks1 += "Nomor " + a + "<br>";
            }
            document.getElementById("hasil1").innerHTML = teks1;
            let teks2 = "";
            let b = 0;
            while (b <= 5) {
                teks2 += "Nomor " + b + "<br>";
                b++;
            }
            document.getElementById("hasil2").innerHTML = teks2;
        }
    </script>
</body>

</html>

Hasil dari kode di atas jika tombol ditekan, menampilkan hasil perulangan menggunakan for dan while.

If dan Switch Case

If dan switch case adalah fungsi yang dapat digunakan untuk pengecekan suatu nilai. Berikut contoh penulisan fungsi if dan switch case di dalam javascript.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>If dan switch</title>
</head>

<body>
    <script>
        document.write(new Date()); // new Date() : untuk mendapatkan tanggal dan jam
        document.write("<hr>");
        let kodeHari, ket;
        kodeHari = new Date().getDay(); // new Date().getDay() : untuk mendapatkan kode hari, output 1, 2,... 7
        document.write("Penggunaan If<br>");
        if (kodeHari == 1) {
            ket = "Senin";
        } else if (kodeHari == 2) {
            ket = "Selasa";
        } else {
            ket = "Bukan hari Senin dan Selasa";
        }
        document.write("Hari : " + ket);
        document.write("<hr>");
        document.write("Penggunaan Switch Case<br>");
        switch (kodeHari) {
            case 1:
                ket = "Senin";
                break;
            case 2:
                ket = "Selasa";
                break;
            default:
                ket = "Bukan hari Senin dan Selasa";
        }
        document.write("Hari : " + ket);
    </script>
</body>

</html>

Hasil dari kode di atas sebagai berikut

Function

alert() berfungsi untuk menampilkan pesan dalam bentuk dialog pop up. alert() merupakan fungsi javascript yang sudah tersedia pada browser.

alert("Halo");

Sementara perulangan() merupakan fungsi yang dibuat sendiri, dimana fungsi ini akan menampilkan perulangan dari angka 0 sd 5

function perulangan() {
    let teks1 = "";
    let a;
    for (a = 0; a <= 5; a++) {
        teks1 += "Nomor " + a + "<br>";
    }
    document.getElementById("hasil1").innerHTML = teks1;
    
    let teks2 = "";
    let b = 0;
    while (b <= 5) {
        teks2 += "Nomor " + b + "<br>";
        b++;
    }
    document.getElementById("hasil2").innerHTML = teks2;
}