Tutorial Belajar JavaScript Part 3: Cara Menjalankan Kode Program JavaScript

Dalam tutorial kali ini, kita akan mempelajari cara menjalankan kode program JavaScript melalui web browser.


Aplikasi Untuk Menjalankan JavaScript

JavaScript merupakan bahasa script yang berjalan pada web browser, sehingga program yang dibutuhkan untuk menjalankan JavaScript hanyalah sebuah aplikasi text editor dan sebuah web browser seperti Google Chrome atau Mozilla Firefox.

Untuk aplikasi text editor, anda bisa menggunakan aplikasi notepad bawaan Windows, atau menggunakan aplikasi khusus text editor. Salah satu aplikasi text editor sederhana yang saya gunakan adalah Notepad++ yang ringan dan bersifat gratis. Untuk menginstall aplikasi Notepad++ ini pernah saya bahas pada tutorial Memilih Aplikasi Editor HTML.

Pilihan web browser bukan sesuatu yang mutlak. Anda bebas menggunakan aplikasi web browser kesukaan. Terdapat beberapa jenis aplikasi web browser populer yang bisa diinstall dengan gratis. Anda bahkan bisa menginstall seluruhnya, seperti yang pernah saya bahas pada tutorial Mengenal Fungsi Web Browser.

Pada sesi tutorial JavaScript di duniailkom, saya menggunakan web browser Google Chrome dan Mozilla Firefox.


Cara Menjalankan kode JavaScript

Jika aplikasi Notepad++ dan web browser telah tersedia, saatnya mencoba menjalankan aplikasi JavaScript pertama anda.

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

Silahkan buka aplikasi text editor, lalu ketikkan kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript di Duniailkom</title>

<script type="text/javascript">
function tambah_semangat()
{
   var a=document.getElementById("div_semangat");
   a.innerHTML+="<p>Sedang Belajar JavaScript, Semangat...!!!</p>";
}
</script>

</head>

<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com </p>
Klik tombol ini untuk menambahkan kalimat baru:

<button id="tambah" onclick="tambah_semangat()">Semangaat..!!</button>

<div id="div_semangat"></div>
</body>
</html>

Savelah 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.

Untuk menjalankan file tersebut, sama seperti HTML biasa, kita tinggal double klik belajar_js.html dan hasilnya akan tampil di dalam web browser.

Cara Menjalankan Kode Program JavaScript - Contoh Program

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

Cara Menjalankan Kode Program JavaScript - Contoh Program 2

Selamat!!, anda telah berhasil menjalankan kode JavaScript.

Terlepas dari kode JavaScript yang saya tulis diatas (kita akan mempelajarinya dalam tutorial-tutorial selanjutnya), kode tersebut pada dasarnya berfungsi untuk menambahkan sebuah kalimat kedalam halaman web setelah halaman web tampil di web browser.

Fitur inilah yang membuat JavaScript menawarkan kelebihannya, dimana kita bisa merubah apapun yang terdapat dalam halaman web saat web telah dikirim ke web browser. Bahkan dengan men-klik sebuah tombol, kita bisa mengganti seluruh isi halaman web tanpa harus berpindah halaman.

Berikut tampilan akhirnya (silahkan di coba):

See the Pen Cara Menjalankan Kode Program JavaScript by duniailkom (@duniailkom) on CodePen.10206

Sebelum memulai membuat kode JavaScript, dalam tutorial berikutnya saya akan membahas tentang cara menampilkan error dan proses debugging (pencarian kesalahan) untuk JavaScript. Selanjutnya dalam tutorial javascript: Cara Menampilkan Error JavaScript (Debugging) dengan Web Browser.


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Tutorial Terkait:

47 Comments

  1. andrimgt
    13 Nov 14
    • Andre
      16 Nov 14
    • Junior
      29 Jun 15
    • faiz
      12 Dec 16
      • Andre
        13 Dec 16
        • kevin
          13 Nov 17
        • Andre
          14 Nov 17
    • Ardian
      03 Dec 17
  2. Cecep
    14 Dec 14
    • Andre
      15 Dec 14
  3. Anonymous
    05 Feb 15
  4. ilalang
    07 Apr 15
    • Andre
      09 Apr 15
  5. Junior
    29 Jun 15
    • Andre
      30 Jun 15
  6. raymond
    14 Jul 15
    • Andre
      14 Jul 15
  7. Andri
    14 Oct 15
    • Andre
      15 Oct 15
  8. ardhika ryzha n
    19 Oct 15
  9. suherman
    04 Nov 15
    • Andre
      05 Nov 15
  10. nabil
    12 Nov 15
    • Andre
      12 Nov 15
      • nabil
        15 Nov 15
  11. Nurul Hidayat
    26 Nov 15
    • Andre
      27 Nov 15
  12. bayuajie
    13 Apr 16
    • Andre
      16 Apr 16
  13. NABIILA
    22 Apr 16
  14. Apik
    16 May 16
    • Andre
      16 May 16
  15. Anonymous
    05 Jun 16
  16. Nauval
    21 Jun 16
  17. sonny
    12 Sep 16
    • Andre
      13 Sep 16
  18. Irvan sulistio
    17 Oct 16
  19. fahmi
    27 Oct 16
    • Andre
      29 Oct 16
  20. deni
    17 Feb 17
    • Andre
      18 Feb 17
  21. Job Bradi Sibarani
    20 Feb 17
  22. Randy
    19 Sep 17
    • Andre
      19 Sep 17
  23. ansar
    05 Nov 17
    • Andre
      07 Nov 17

Add Comment