Tutorial Belajar JavaScript Part 3: Cara Menjalankan Kode Program JavaScript

Dalam lanjutan tutorial belajar JavaScript di Duniailkom kali ini, akan dibahas tentang Cara Menjalankan Kode Program JavaScript.


Aplikasi Untuk Menjalankan JavaScript

Untuk menjalankan JavaScript, kita hanya butuh aplikasi text editor dan sebuah web browser.

Aplikasi text editor yang dipakai boleh bebas. Jika butuh yang ringan, bisa coba Notepad++. Atau jika ingin yang lebih modern, bisa ke Microsoft VS Code. Teks editor lain seperti Atom atau Sublime Text juga bisa jadi pilihan alternatif.

Untuk web browser, juga bebas ingin memakai aplikasi web browser apa saja. Rata-rata web browser modern sudah mendukung standar EcmaScript terbaru. Pilihan terbaik bisa ke Google Chrome, Mozilla Firefox, atau Microsoft Edge.

Dalam tutorial JavaScript di duniailkom ini saya akan banyak memakai web browser Google Chrome.


Cara Menjalankan kode JavaScript

Setelah aplikasi teks editor dan web browser tersedia, saatnya coba mulai 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 lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h1>Belajar JavaScript</h1>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  Klik tombol ini untuk menambahkan kalimat baru:
  <button id="tambah" onclick="tambahSemangat()">Semangaat..!!</button>
  <div id="div_semangat"></div>

  <script>
    function tambahSemangat() {
      let a = document.getElementById("div_semangat");
      a.innerHTML += "<p>Sedang belajar JavaScript, semangat...!!!</p>";
    }
  </script>

</body>
</html>

Save kode di atas dengan nama semangat.html. Folder tempat menyimpan file ini tidak jadi masalah, namun agar lebih rapi saya akan buat folder belajar_javascript di drive D, dengan demikian alamat file diatas ada di D:/belajar_javascript/semangat.html. Anda bisa membuat folder yang sama atau simpan ke folder lain.

Perhatikan nama file dari contoh kita berakhiran .html, karena ini hanya file HTML yang disisipkan kode JavaScript.

Untuk menjalankan file tersebut, sama seperti HTML biasa. Tinggal double klik semangat.html dan hasilnya akan tampil di web browser:

Cara Menjalankan Kode Program JavaScript - 1

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

Cara Menjalankan Kode Program JavaScript - 2

Selamat!!, kita telah berhasil menjalankan sebuah kode JavaScript.

Terlepas dari maksud kode yang ada, perintah JavaScript tersebut akan menambah sebuah kalimat ke dalam halaman web setelah halaman tampil di web browser.

Inilah yang membuat JavaScript menawarkan kelebihannya. Kita bisa memodifikasi apapun yang terdapat dalam halaman web tanpa proses reload. Bahkan dengan men-klik sebuah tombol, kita bisa mengganti seluruh tampilan halaman web.

Selanjutnya kita akan bahas Cara Melihat Pesan Error JavaScript.


Saat ini di Duniailkom tersedia eBook / buku JavaScript Uncover. Dengan total lebih dari 650 halaman A4, materi di buku jauh lebih banyak daripada tutorial di web Duniailkom. Penjelasan lebih lanjut bisa ke: JavaScript Uncover – Panduan Belajar JavaScript.

58 Comments

  1. andrimgt
    13 Nov 14
    • Andre
      16 Nov 14
      • By : ajifernanndes17
        30 Jul 22
    • Junior
      29 Jun 15
    • faiz
      12 Dec 16
      • Andre
        13 Dec 16
        • kevin
          13 Nov 17
        • Andre
          14 Nov 17
        • Rizliandi M
          26 Jun 19
    • 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
  24. pascal
    17 Dec 17
    • Andre
      18 Dec 17
  25. Arif
    04 Jan 18
    • Andre
      04 Jan 18
      • Arif
        04 Jan 18
  26. momok
    13 May 18
    • Andre
      13 May 18
  27. Yudi
    04 Jul 18

Add Comment