Dasar-dasar Javascript

Imam Ibnu Badri Pemrograman Web 21.02

DAFTAR ISI

Definisi JavaScript

JavaScript adalah bahasa pemograman yang sangat matang dan dapat dikolaborasikan dengan dokumen HTML dan digunakan untuk membuat website yang interaktif. JavaScript diciptakan oleh Brendan Eich yang juga co-founder dari Mozilla project, Mozilla Foundation dan Mozilla Corporation.

JavaScript adalah bahasa pemograman yang digunakan untuk membuat interaksi atau menambah fitur web dinamis kedalam sebuah web. Untuk membuat halaman web, anda tidak harus menggunakan JavaScript. Namun, saat ini JavaScript hadir dalam hampir setiap halaman web modern.

Sehingga JavaScript adalah salah satu bahasa pemograman web yang wajib di kuasai. Javascript merupakan bagian dari 3 teknologi penting yang harus dikuasai programmer web, yakni HTML untuk konten (isi dari website), CSS untuk tampilan (presentation), dan JavaScript untuk interaksi (behavior).

Hampir seluruh website modern saat ini menggunakan JavaScript untuk membuat berbagai aplikasi yang dapat berinteraksi dengan user, seperti validasi form HTML, games, kalkulator, fitur chatting, dll.

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

Bahasa pemrograman Client Side berbeda dengan bahasa pemrograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di Sisi server.

Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi texteditor dan web browser. JavaScript memiliki fitur: high-level programming language, client-side, looselytiped dan berorientasi objek.

Cara Menjalankan kode JavaScript

Cara penulisan JavaScript mirip dengan penulisan bahasa pemograman web lainnya seperti PHP dan CSS, yakni dengan menyisipkan kode JavaScript di dalam HTML. Ketik kode berikut:

<!DOCTYPE html>
<html>
    <head>
        <title>BeIajar JavaScript di Duniailkom</title>
        <script type="text/javascript">
            function tambah_semangat(){
                var a=document.getElementByld("div_semangat");
                a.innerHTML+="<p>Sedang Belajar JavaScript, Sernangat...!!!</p>";
            }
         </script>
    </head>    
    <body>
        <h1>BeIajar JavaScript</h1>
        <p>Saya sedang belajar JavaScript di duniailkom.com </p> 
        Klik tombol ini untuk menarnbahkan kalimat baru : 
        <button id="tambah " onclick="tambah semangat()">Semangaat..!!</button>
        <div id="div_semangat"></div>
    </body>
</html>

Satelah kode HTML diatas dengan nama: belajar_js.html. Folder tempat anda menyimpan file HTML ini tidak menjadi masalah, karena kita tidak perlu meletakkannya dalam folder web server seperti file PHP.

Saya membuat sebuah folder baru di D:\BelajarHTML\Javascript. Savelah di folder tersebut. Perhatikan bahwa nama file dari contoh JavaScript kita berakhiran .html, karena pada dasarnya kode tersebut adalah kode HTML yang 'disiipkan' dengan JavaScript. Berikut hasilnya:

Untuk menguji kode JavaScript yang telah dibuat, silahkan klik tombol "Semangaat..! beberapa kali, dan kalimat baru akan ditambahkan di akhir halaman web kita.

Bisa dilihat pada gambar tersebut bahwa perintah kode JavaScript sudah bisa dijalankan melalui tombol yang sudah dibuat.

Cara Membuat Tipe Data Angka

Karena di dalam JavaScript sebuah variabel tidak perlu di deklarasikan akan bertipe apa, maka jika sebuah variabel diberikan nilai angka, maka variabel tersebut telah menjadi variabel dengan tipe angka. Berikut adalah contohnya:

<script> 
 var a=12; // deklarasi dengan 
 var b=6; // deklarasi tanpa keyword var 
</script>

Operator Aritmatika dalam JavaScript

Berikut adalah contoh kode program cara penggunaan tipe data angka dan operasi matematis dalam JavaScript:

<!DOCTYPE html>
<html>
    <head>
        <title>BeIajar JavaScript</title>
        <script> 
            var a=12; 
            var b=4; 
            var c=2; 
            
            console.log(a); //hasil: 12 
            console.log(b); //hasil: 4
            console.log(c); //hasil: 2
            
            var d = a+b;
            console.log(d); //hasil: 16 
            var e = b*5;
            console.log(e); //hasil: 20 
            var f = a%5; 
            console.log(f); //hasil: 2 
            var g = 3+6*2; 
            console.log(g); //hasil : 15 
            var h = c+b*a%3;
            console.log(h); //hasil: 2
            var i = 3*4/5*5;
            console.log(i); //hasil: 12
            var j = (((3*4)/5)*5)
            console.log(j);  //hasil: 12
        </script >
    </head>    
    <body>
        <h1>Belajar JavaScript</h1>
        <p>Saya sedang bel ajar T ipe Data Angka JavaScript di duniailkom.com</p>
    </body>
</html>

Pada awal kode JavaScript diatas (yang dimulai dari baris ke-8), membuat 3 buah variabel, yakni variabel a, b dan c. Pada saat pendefenisian variabel ini, juga langsung memberikan nilai awal. Perintah console.log selanjutnya akan menampilkan isi dari ketiga variabel ini.

Perhitungan NaN dan Infinity

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>BeIajar JavaScript</title>
        <script>
            a = 5;
            b = 7;
            c = b/0;    
            console.log(c); // Hasil: Infinity (division by zero)
            d = 12 /0; 
            console.log(d ; // Hasil: Infinity (division by zero)
            e = 1 + Math.pow(10, 309); 
            console.log(e); // Hasil: Infinity (overflow)
            f = -Math.pow(10,309) -1; 
            console.log(f); // Hasil: -Infinity (negative infinity)
            g = b+e;
            console.log(g); // Hasil: Infinity (karena e dan b infinity)
            h = 0/0;
            console.log(h); // Hasil: NaN 
            i = Math.sqrt (-25); 
            console.log(i); // Hasil: NaN (akar kuadrat negatif)
            j = c/d;
            console.log(j); // Hasil : NaN (c dan d sama-sama bernilai infinity)
        </script >
    </head>    
    <body>
        <h1>Belajar JavaScript</h1>
        <p>Saya sedang belajar pengertian NaN dan Infinity JavaScript di duniailkom.com </p> 
    </body>
</html>

Hasil dari syntax:

Di dalam contoh kode JavaScript diatas, dilakukan beberapa perhitungan matematis yang akan menghasilkan nilai NaN dan Infinity. Untuk perhitungan variabel e dan i, menggunakan objek Math.

Struktur Logika IF ELSE dalam JavaScript

Struktur ELSE IF adalah bentuk lain dari penulisan struktur IF ELSE. Struktur ELSE IF terbentuk ketika kita menggunakan strukturIF ELSE secara berulang. Berikut contoh sederhananya:

<script>
    var angka=2;
    if(angka==1){
       console.log("angka satu");
    }
     else if(angka==2){
       console.log("angka dua");  
    }
    else if(angka==3){
       console.log("angka tiga");  
    }
    else if(angka==4){
       console.log("angka empat");  
    }
</script >

Struktur Logika SWİTCH dalam JavaScript

Agar lebih mudah dipahami, langsung saja kita maşuk ke dalam kode program SWITCH dalam JavaScript. Contoh program, yakni kita memeriksa nilai dari variabel angka dan menampilkan hasilnya dalam bentuk huruf. Jika menggunakan struktur SWITCH, berikut adalah cara penulisannya:

<script>
    var angka = 5;
    
    switch (angka){
        case 1:
        console.log("Angka Satu"); 
        break; 
        case 2:
        console.log(”Angka Dua"); 
        break; 
        case 3:
        console.log("Angka Tiga”); 
        break; 
        case 4:
        console.log("Angka Empat"); 
        break; 
        default:
        console.log("Bukan angka 1-4");
        break;        
    }
</script >

Struktur Perulangan FOR

Struktur perulangandi dalam bahasa pemograman di gunakan untuk mengulang perintah program. Terdapat beberapa struktur perulangan yang didukung oleh JavaScript, dan struktur perulangan pertama yang akan kita bahas adalah struktur perulangan FOR.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>BeIajar JavaScript</title>
        <script>
            var i; 
            for (i=1; i<=10; i++) 
            console.log(i +.Saya sedang bela jar JavaScript”); 
        </script >
    </head>    
    <body>
        <h1>Belajar JavaScript</h1>
        <p>Saya sedang belajar pengertian NaN dan Infinity JavaScript di duniailkom.com </p> 
    </body>
</html>

Baris for (i=l berarti: lakukan perulangan for, dimulai dari i=1, lalukan perulangan selama i<=10, dan naikkan nilai i sebanyak 1 angka pada tiap perulangan menggunakan operator increment (i++).

Struktur Perulangan Do While

Struktur perulangan DO WHILE sebenarnya adalah bentuk lain dari perulangan WHILE. Perbedaan keduanya terletak pada posisi pengecekan kondisi. Apabila dalam perulangan WHILEkondisi di cek pada awal perulangan, pada perulangan DO WHILE, kondisi perulangan di cek pada akhir perulangan.

<script> 
    var i=1; 
    do {console.log("Saya sedang belajar JavaScript"};
    i++;
    while(i<=10)
</script>

Dampak dari proses pemeriksaan kondisi di akhir perulangan ini adalah, perulangan akan dikerjakan setidaknya 1 kali, walaupun kondisi perulangan tidak dipenuhi atau menghasilkan nilai FALSE,

Latihan

1. Menampilkan hasil Form HTML dengan JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Tutoria1 Belajar JavaScript</title>
        <script> 
            function tampilkan(){ 
                var nama_kota=document.getElementById ("form1") select1.alue;
                var p_kontainer=documentc.getElementById("container");
                if (nama_kota== "jakarta"){
                    p_kontainer.innerHTML="Jakarta Ibu kota Republik Indonesia";
                }
                else if (nama_kota=="bandung"){
                    p_kontainer.innerHTML="Bandung kota kembang";
                }
                else if (nama_kota=="bogor"){
                    p_kontainer.innerHTML="Bogor kota hujan";
                }
        </script>
    </head>    
    <body>
        <h2>MenampiIkan Hasil Form HTML dengan JavaScript</h2>
        <form id="form1" name="form1" onsubmit="return false">
            <label for="select1">Pi1ih Kota: </label>
                <select id="select1" name="select1">
                    <option value="jakarta">Jakarta</option>
                    <option value="bandung">Bandung</option>
                    <option value="bogor">Bogor</option>
                </select> 
            <input type="submit" value="Tampilkan Keterangan" onclick="tampilkan()">
        </form>
        <p id="container"></p>
    </body>
</html>

Pada contoh diatas membuat sebuah form dengan atribut id="form1" dan name="form1". Form ini hanya memiliki 1 objek form,yakni select dan 1 buah tombol submit untuk mengirimkan hasil form.

Objek form <select> saya beri atribut id="select1" dan name="selectl " Setiap nilai dari select (tag <option>) memiliki value masing-masing, yakni 3 buah nama kota: Jakarta, Bandung, dan Bogor. Jika anda perhatikan, tag <form> memiliki atribut onsubmit="return false".

Atribut ini adalah kode JavaScript yang berfungsi untuk menghentikan fitur standar form yang ketika tombol submit ditekan, form akan pindah ke halaman tertentu untuk di proses (biasanya diproses menggunakan PHP).

Dengan kata lain, menambahkan atribut onsubmit="return false" pada tag form, akan mematikan fungsi submit. Hal ini di lakukan karena kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti biasanya, sehingga tidak butuh fungsi bawaan tersebut.

Sebagai gantinya, pada tag <submit>, ditambahkan atribut HTML yang berfungsi untuk 'mengaitkan' JavaScript, yakni onclick="tampilkan()". Atribut ini berfungsi sebagai event JavaScript yang akan dipanggil ketika tombol submit di klik.

Fungsi tampilkan() inilah yang akan kita buat programnya menggunakan JavaScript. Setelah kode HTML untuk membuat form, ditambahkan sebuah tag <p> yang akan digunakan sebagai penampung hasil form. Tag <p id="container"></p> ini tidak berisi text apapun. Kita akan mengeditnya menggunakan JavaScript.

Dari form HTML, dibuat sebuah fungsi tampilkan() yang akan dieksekusi ketika tombol submit di tekan. Kode JavaScript diatas diletakkan pada bagian <head>, dan hanya berisi 1 fungsi, yakni: tampilkan().

Pada baris pertama, dibuat variabel nama kota yang akan mengambil isi tag <select> dari form. Gunakan perintah document.getElementById untuk mendapatkan suatu objek HTML dengan menggunakan atribut id.

Sehingga document.getElementById("form1") akan menghasilkan objek HTML dengan id="forml Dalam hal ini tag HTML yang memiliki " adalah satu-satunya form di dalam kode HTML.
Selanjutnya, untuk mendapatkan nilai dari tag <select> dari forml, buat perintah: document.getElementById("form1").selectl.value. Perintah select1.value akan berisi nilai dari tag <select> yang saat ini sedang dipilih. Agar mempermudah penulisan nantinya, nilai ini disimpan dalam variabel nama_kota.

Variabel kedua adalah p_kontainer. Variabel ini berisi 'objek' dari kontainer dimana keterangan tentang kota akan kita tampilkan. Gunakan perintah document.getElementByIduntuk mendapatkan objek ini. Perhatikan bahwa id dari tag <p> dalam kode HTML kita adalah: container. Setelah mendapatkan nilai kota yang saat ini terpilih, berikutnya tinggal menyeleksi dan menampilkan hasil yang sesuai.

Karena membuat 3 buah nama kota, maka memerlukan 3 buah kondisi if untuk memeriksa dan menampilkan data yang sesuai. Jika variabel nama kota adalah Jakarta, maka tampilkan kata "Jakarta Ibu kota Republik Indonesia" di dalam "container".

Untuk mendapatkan hasil ini, gunakan property innerHTML dari sebuah objek HTML. Dengan demikian, untuk menampilkan kalimat di dalam tag <p> dengan id=container, kita bisa menggunakan perintah: document.getElementById("container").innerHTML="kalimat".

Tetapi sudah menampung nilai document.getElementById("container") pada variabel p_kontainer, sehingga tinggal menggunakan perintah p_kontainer.innerHTML="Jakarta Ibu kota Republik Indonesia". Untuk kota Bandung dan Bogor, tinggal mengulang kondisi IF agar hasilnya sesuai.

2. Mengambil nilai HTML dengan JavaScript

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Tutoria1 Belajar JavaScript</title>        
    </head>    
    <body>
        <h3>Contoh 1: Mengambil nilai tag span</h3>
        <p> Nama :  Andika Siswoyo, Nilai: <span id "nilai_andika">80</span><br>
            Nama :  Joko Susilo, Nilai: <span id "nilai joko">92</span></p>
            <button id="tombol_p">Tampilkan Nilai</button>
            <br>
            <br>
        <h3>Contoh 2: Mengambil nilai tag input</h3>
        <form onsubmit="return false">
            <label>Rika Pratiwi: </label>
            <input type="text" id="input_form" value="90" />
            <button id="tombol_form">TampiIkan Nilai</button>
        </form>
        <br>
        <br>
        <h2>HasiI: <span id="hasil"></span></h2>
        </body> 
        <script> 
            document.getElementById("tombol_p").addEventListener("click",tampilkan_nilai_p);
            document.getElementById("tombol_form").addEventListener("click",tampilkan_nilai_form);
             function tampilkan_nilai_p(){
                 var nilai_andika=document.getElementById("nilai_andika").innerHTML;
                 var nilai_joko=document.getElementById("nilai_joko").innerHTML; 
                 document.getElementById("hasil").innerHTML=nilai_andika+ " dan " + nilai_joko;
            } 
            function tampilkan_nilai_form() { 
                var nilai_form=document.getElementById("input_form").value;
                document.getElementById("hasil").innerHTML=nilai_form;
            }
        </script>
    </body>
</html>

Dalam kode HTML diatas, saya dibuat 2 buah contoh. Yang pertama adalah sebuah paragraf yang berisi nama dan nilai dari 2 orang siswa: Andika Siswoyo dan Joko Susilo (bukan nama sebenarnya :) ), kedua nama ini berada di dalam tag paragraf.

Namun yang paling penting, nilai dari masing-masing siswa berada di dalam tag <span> dengan atribut id=nilai_andika dan id=nilai_joko. Atribut id inilah yang akan kita gunakan untuk mengambilnya dengan JavaScript.

Di bawah nilai siswa ini ditambahkan sebuah tombol dengan tag <button id="tombol_p">. Tombol ini akan digunakan sebagai 'trigger' untuk pengambilan nilai. Untuk contoh kedua, dibuat sebuah form yang berisi tag <input type="text">.

Inputan ini bisa diganti-ganti nilainya pada saat halaman HTML telah tampil, dan kita akan mencoba mengambil nilai dari tag input ini. Sama seperti contoh diatasnya, digunakan tombol <button id="tombol form"> sebagai 'trigger' JavaScript, yakni ketika tomboi ini di-klik, ambil nilai form dengan JavaScript.

Jika anda perhatikan, tag <form> memiliki atribut onsubmit="return false". Atribut ini adalah kode JavaScript yang berfungsi untuk menghentikan fitur standar form yang ketika tombol submit ditekan, form akan pindah ke halaman tertentu untuk di proses (biasanya diproses menggunakan PHP).

Dengan kata lain, menambahkan atribut onsubmit="return false" pada tag form, akan mematikan fungsi submit. Hal ini di lakukan karena kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti biasanya, sehingga tidak butuh fungsi bawaan tersebut.

Kenapa harus meletakkannya kode diatas setelah tag <body>, dan bukan di <head>? Hal ini dilakukan karena kita akan menggunakan method khusus di dalam javascript, yakni addEventListener.

addEventListener adalah method (penyebutan untuk function di dalam pemrograman objek) yang digunakan untuk 'menempelkan' event kepada tag HTML. Jika biasanya kita menggunakan event JavaScript: onClick langsung pada HTML, seperti: <button onclick="tampilkan()">, maka kita bisa menggantinya dengan addEventListener("click", tampilkan).

Dengan menggunakan addEventListener, kode HTML bisa bebas dari JavaScript. Akan tetapi mentod addEventListener harus ditulis setelah kode HTML selesai dikirim ke web browser. Oleh karena itu, kita harus menempatkannya setelah kode HTML.

Dalam kode Javascript diatas, saya menggunakan 2 buah method addEventListener, untuk masing-masing tombol. Untuk mencari tombol ini di HTML, menggunakan method JavaScriptL getElementById(). Dengan demikian, kode:

document.getElementById("tombol_p").
addEventListener("click",tampilkan_nilai_p);

Berarti: cari sebuah tag HTML yang ber-id="tombol_p", lalu apabila di klik, jalankan fungsi tampilkan nilai_p. Selanjutnya, membuat fungsi tampilkan nilai_p dibawahnya.

Pada dasarnya, fungsi tampilkan nilai_p berguna untuk mengambil nilai dari tag <span> dengan id="nilai_andika" dan id="nilai_joko", kemudian menggabungkan keduanya, dan tampilkan hasilnya ke tag <span id="hasil">.