JavaScript ( sering di singkat JS ) adalah bahasa pemrograman tingkat tinggi yang biasanya digunakan bersama dengan HTML dan CSS, JavaScript di gunakan untuk membuat halaman web interaktif. Sebagian besar situs web menggunakan JavaScript, dan semua web browser modern mendukung JavaScript tanpa memerlukan plug-in dengan menggunakan JavaScript engine default. Untuk Anda yang tertarik dengan JavaScript, pembahasan ini cocok sebagai langkah pertama.
Baca juga :
1. Menampilkan data pada kotak dialog menggunakan fungsi window.alert()
Fungsi window.alert() pada JavaScript berfungsi menampilkan data dalam bentuk “peringatan” (alert) berupa kotak dialog yang akan muncul pada web browser, tampilan kotak dialog biasanya berbeda pada tiap-tiap web browser, beberapa web browser juga secara default memblokir fungsi JavaScript karena berbagai alasan terutama alasan keamanan (misalnya web browser Internet Explorer).
Contoh penggunaan:
01. <!DOCTYPE html> 02. <html> 03. <body> 04. <script> 05. window.alert('Selamat Datang di DosenIT.'); 06. </script> 07. </body> 08. </html>
Baca juga :
2. Menampilkan data pada halaman web menggunakan fungsi document.write()
Fungsi document.write() pada JavaScript berfungsi menampilkan data langsung pada halaman web (bukan pada kotak dialog layaknya fungsi window.alert()), fungsi ini dapat di gunakan untuk menampilkan data langsung saat halaman web selesai di muat (loaded) atau di eksekusi pada event tertentu misalnya saat tombol di klik.
Contoh penggunaan:
01. <!DOCTYPE html> 02. <html> 03. <body> 04. <script> 05. document.write('Selamat Datang di DosenIT.'); 06. </script> 07. </body> 08. </html>
Kode di bawah ini akan menampilkan tombol dengan label “Selamat Datang”, ketika di klik maka akan tampil teks “Selamat Datang di DosenIT.”.
01. <!DOCTYPE html> 02. <html> 03. <body> 04. <button onclick="document.write('Selamat Datang di DosenIT.')">Selamat Datang</button> 05. </body> 06. </html>
Baca juga :
3. Menampilkan data pada elemen menggunakan fungsi innerHTML
Fungsi innerHTML pada JavaScript berfungsi untuk mendefinisikan konten HTML, untuk menampilkan data pada elemen tertentu berdasarkan “id” elemen terebut, innerHTML menggunakan (salah satunya) metode “document.getElementById(id)”, sehingga dapat dapat di tampilkan pada elemen berdasarkan “id” sebagai salah satu pengenalnya, JavaScript akan mencari elemen pada suatu dokumen atau suatu halaman web berdasarkan “id” sebagai parameter pencarian.
Contoh penggunaan:
01. <!DOCTYPE html> 02. <html> 03. <body> 04. <p id="demo"></p> 05. <script> 06. document.getElementById("demo").innerHTML = 'Selamat Datang di DosenIT.'; 07. </script> 08. </body> 09. </html>
Baca juga :
4. Menampilkan data pada console menggunakan fungsi console.log()
Fungsi console.log() pada JavaScript berfungsi untuk menampilkan data pada console, data tidak akan tampil pada kotak dialog, pada halaman web, atau pada elemen melainkan pada fitur console di web browser, console adalah salah satu developer tool yang terdapat pada semua web browser (kecuali web browser tertentu) yang di sediakan untuk tujuan debugging, tekan F12 untuk membuka fitur console pada web browser yang Anda gunakan.
Contoh penggunaan:
01. <!DOCTYPE html>
02. <html>
03. <body>
04. <script>
05. console.log('Selamat Datang di DosenIT.');
06. </script>
07. </body>
08. </html>Baca juga :
- Kelebihan dan Kekurangan Bahasa Pemrograman C
- Kelebihan dan Kekurangan Bahasa Pemrograman Generasi Ke 4
5. Mendeklarasikan variabel dalam JavaScript
Variabel adalah sebuah ‘wadah’ untuk menampung ‘nilai’ baik berupa nilai yang di masukkan oleh Pengguna atau nilai hasil pemrosesan, aturan pembuatan (pendeklarasian) variabel pada JavaScript sebenarnya hampir sama dengan aturan pembuatan variabel pada bahasa pemrograman lain, untuk lebih jelasnya berikut Saya sajikan aturan penulisan variabel pada JavaScript.
- Nama variabel bisa berupa huruf, angka, garis bawah ( underscore, _ ), dan tanda dollar ( $ ).
- Nama variabel harus di awali dengan huruf, tanda dollar atau garis bawah, tidak boleh diawali dengan angka.
- Nama variabel bersifat case sensitive ( variabel ‘DosenIT’ dengan ‘dosenit’ di anggap variabel yang berbeda ).
- Nama variabel tidak boleh sama dengan keyword ( salah satunya ‘break’, ‘continue’, ‘var’ dan lain sebagainya ).
Contoh penggunaan:
Kode di bawah ini memuat nilai dari variabel ‘harga1’ dan nilai dari variabel ‘harga2’ kemudian menjumlahkan kedua nilai tersebut ( dengan operator aritmatika ‘penambahan’ atau ‘penjumlahan’ + ) dan menyimpan nilai hasil penjumlahan tersebut ke dalam variabel ‘total’, terakhir menampilkan nilai dari variabel ‘total’ sebagai ‘alert’ (lihat penjelasan mengenai fungsi ‘window.alert()’).
01. <!DOCTYPE html> 02. <html> 03. <body> 04. <script> 05. var harga1 = 1000; 06. var harga2 = 2000; 07. var total = harga1 + harga2; 08. window.alert(total); 09. </script> 10. </body> 11. </html>
Baca juga :
6. Menentukan kapan JavaScript harus ‘bereaksi’ dengan event.
Pada bagian atas ( poin 2, penggunaan fungsi document.write() ) telah Saya berikan sedikit contoh penggunaan event ‘onClick’ pada elemen ‘button’, dengan begitu statement JavaScript baru akan di proses atau di eksekusi saat tombol di klik, perhatikan potongan kode berikut ( Saya ambil dari contoh penggunaan fungsi windows.write() pada poin 2 ).
<button onclick="document.write('Selamat Datang di DosenIT.')">Selamat Datang</button>onkeydown
Event JavaScript ‘onkeydown’ dapat di gunakan untuk menjalankan statement JavaScript saat pengguna menekan tombol (apapun) pada keyboard, cocok di terapkan pada element input teks pada form untuk validasi input, penggunaan event ‘onkeydown’ secara sederhana Saya contohkan dalam baris kode berikut.
01. <!DOCTYPE html>
02. <html>
03. <body>
04. <p id='teks_output'></p>
05. <input id='teks_input' type='text' onkeydown="document.getElementById('teks_output').innerHTML = document.getElementById('teks_input').value">
06. </body>
07. </html>Baca juga :
onload
Event JavaScript ‘onload’ dapat di gunakan untuk menjalankan statement JavaScript saat halaman web selesai di muat ( loaded ) oleh web browser, jadi apabila halaman web masih dalam kondisi memuat ( loading ) konten, statement JavaScript tidak akan di proses, contoh sederhananya adalah sebagai berikut.
01. <!DOCTYPE html>
02. <html>
03. <body onload="document.write('Selamat Datang di DosenIT.')">
04.
05. </body>
06. </html>Baca juga :
onclick
Event JavaScript ‘onclick’ dapat di gunakan untuk menjalankan statement JavaScript saat pengguna mengklik suatu elemen HTML, event ini cocok di implementasikan pada tombol untuk menjalankan statement tertentu, contoh penggunaan event ‘onclick’ pada elemen ‘button’ dapat di lihat pada poin 2 di atas ( bagian fungsi document.write() ).
Baca juga :
onchange
Event JavaScript ‘onchange’ dapat di gunakan untuk menjalankan statement JavaScript saat suatu elemen HTML berubah, event ini cocok di gunakan pada elemen ‘select – option’ yang memiliki banyak nilai ( ‘value’ ), contoh sederhana penggunaan event ‘onchange’ pada elemen ‘select – option’ adalah sebagai berikut.
01. <!DOCTYPE html>
02. <html>
03. <body>
04. <p id='teks_output'></p>
05. <select id='teks_input' onchange="document.getElementById('teks_output').innerHTML = document.getElementById('teks_input').value">
06. <option>Ahad</option>
07. <option>Senin</option>
08. <option>Selasa</option>
09. <option>Rabu</option>
10. <option>Kamis</option>
11. <option>Jumat</option>
12. <option>Sabtu</option>
13. </select>
14. </body>
15. </html>Baca juga :
7. Memanipulasi teks dengan variabel bertipe data string
Variabel dengan tipe data string di gunakan untuk menyimpan data berupa nilai teks, semua bahasa pemrograman mendukung tipe data string hanya saja aturan pendeklarasian variabel sedikit berbeda untuk beberapa bahasa pemrograman, pendeklarasian variabel dengan tipe data string pada JavaScript mengikuti aturan berikut.
- Nilai di tulis dengan di apit dengan tanda kutip ( ” ) atau tanpa petik ( ‘ )
- var domain = ” DosenIT “;
- var domain = ‘ DosenIT ‘;
- Sepasang tanda petik ( ‘…’ ) atau sepasang tanda kutip ( “…” ) dalam nilai string
- var hari = ” Hari Miggu disebut juga hari ‘Ahad’ “;
- var hari = ‘ Hari Miggu disebut juga hari “Ahad” ‘;
Penggunaan karakter khusus
Karena string harus di tulis di antara dua tanpa kutip ( atau petik ), maka penulisan string seperti di bawah ini akan salah di mengerti oleh JavaScript:
var hari = " Hari Miggu disebut juga hari "Ahad" ";
String di atas akan terpotong hanya sampai ” Hari Miggu disebut juga hari ” saja, untuk mengatasi hal tersebut maka JavaScript menyediakan kode yang mewakili karakter khusus tersebut, untuk contoh string di atas di konversi menjadi:
var hari = " Hari Miggu disebut juga hari \"Ahad\" ";
Untuk lebih lengkapnya, berikut adalah daftar kode JavaScript yang mewakili karakter khusus:
| Kode | Karakter yang di wakili |
| \’ | Tanda petik ( ‘ ) |
| \” | Tanda kutip ( ” ) |
| \\ | Garis miring terbalik ( \ ) |
| \n | Baris baru ( new line ) |
| \r | Carriage return |
| \t | Tab |
| \b | Backspace |
| \f | Form feed |
Memotong string dan mendapatkan bagian tertentu dengan metode slice()
Fungsi slice() dapat digunakan untuk mengekstrak bagian dari string dan mengembalikan bagian yang di ekstraksi tersebut ke dalam string baru. Metode ini mengambil 2 parameter yaitu indeks posisi awal dan index posisi akhir, berikut adalah baris kode sederhana penggunaan fungsi slice().
01. <!DOCTYPE html>
02. <html>
03. <body>
05. <button onclick="myFunction()">Klik</button>
06. <p id="demo"></p>
07. <script>
08. function myFunction() {
09. var str = "Jeruk, Pisang, Apel";
10. var res = str.slice(7,13);
11. document.getElementById("demo").innerHTML = res;
12. }
13. </script>
14. </body>
15. </html>Baris kode di atas akan menampilkan sebuah tombol dengan label “Klik”, tombol tersebut di atur agar menjalankan fungsi “myFunction()” saat di klik ( baris ke – 5 ), variabel “str” dan “res” di deklarasikan dalam fungsi “myFunction()” (baris ke – 9 dan ke – 10), variabel “res” berisi nilai yang di potong dari variabel “str” dari posisi indeks ke – 7 ( huruf “P” ) hingga posisi indeks ke – 13 ( karakter “,”, artinya hanya sampai huruf “g” ), sehingga akan muncul string “Pisang”.
Mengganti kata dalam string dengan metode replace()
Fungsi replace() dapat digunakan untuk mengganti kata dalam string dengan kata yang lain, fungsi ini cocok di gunakan untuk filter kata-kata yang di larang dengan menentukan kata yang akan di cari serta menentukan kata untuk mengganti kata tersebut, berikut adalah baris kode sederhana penggunaan fungsi replace().
01. <!DOCTYPE html>
02. <html>
03. <body>
04. <p>Mengganti kata "terlarang" dengan kata "***" pada paragraf di bawah:</p>
05. <button onclick="myFunction()">Klik</button>
06. <p id="demo">Paragraf ini berisi kata terlarang!</p>
07. <script>
08. function myFunction() {
09. var str = document.getElementById("demo").innerHTML;
10. var txt = str.replace("terlarang","***");
11. document.getElementById("demo").innerHTML = txt;
12. }
13. </script>
14. </body>
15. </html>Mengubah string menjadi huruf kapital atau huruf kecil dengan fungsi toUpperCase() atau toLowerCase().
Fungsi toUpperCase() dan toLowerCase() di gunakan untuk mengkonversi string menjadi huruf kapital semua atau huruf kecil semua, berguna untuk penyeragaman data, misalnya data ‘nama’ di konversi menjadi huruf kapital semua agar semua data yang di input seragam, hal tersebut guna mengantisipasi kecenderungan pengguna yang menginputkan string tanpa standar, contoh baris kode sederhananya adalah sebagai berikut.
01. <!DOCTYPE html>
02. <html>
03. <body>
04. <p>Mengubah string menjadi huruf kapital:</p>
05. <button onclick="myFunction()">Klik</button>
06. <p id="demo">Selamat Datang di DosenIT.</p>
07. <script>
08. function myFunction() {
09. var text = document.getElementById("demo").innerHTML;
10. document.getElementById("demo").innerHTML = text.toUpperCase();
11. }
12. </script>
13. </body>
14. </html>Baca juga :
Ya, Saya rasa cukup sekian pembahasan mengenai perintah dasar JavaScript, semoga bermanfaat untuk Anda yang membutuhkan terutama untuk Anda yang baru belajar JavaScript, langsung praktikan jika memungkinkan agar memudahkan pemahaman Anda, sampai jumpa di pembahasan selanjutnya.
