Tutorial Dasar JavaScript: Cara Menjalankan Kode Program JavaScript

JavaScript adalah bahasa pemrograman yang kuat dan serbaguna yang banyak digunakan untuk mengembangkan aplikasi web interaktif. Dalam tutorial ini, kami akan membahas cara menjalankan kode program JavaScript di berbagai lingkungan, termasuk dalam halaman web dan melalui browser console.

1. Menjalankan Kode JavaScript Melalui Halaman Web

Cara yang paling umum untuk menjalankan kode JavaScript adalah dengan menyisipkannya langsung menggunakan tag <script> pada halaman HTML. Berikut ini beberapa langkah untuk menjalankan kode JavaScript dalam Halaman Web:

Langkah 1: Buatlah file HTML baru dengan teks editor favorit anda, anda dapat menggunakan Notepad, Visual Studio Code, atau Sublime Text.

Langkah 2: Sisipkan tag <script> di dalam bagian <head> atau <body> HTML. Itu adalah tempat di mana kode JavaScript akan dieksekusi.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Menjalankan Kode JavaScript</title>
</head>
<body>
  <h1>Selamat Datang, dan Selamat Belajar JavaScript</h1>
  
  <script>
    // Tempatkan kode JavaScript di sini
    var pesan = "Halo, dunia JS!";
    console.log(pesan);
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Contoh Menjalankan Kode JavaScript</title>

</head>

<body>

<h1>Selamat Datang, dan Selamat Belajar JavaScript</h1>

// Tempatkan kode JavaScript di sini

var pesan = "Halo, dunia JS!";

console.log(pesan);

</script>

</body>

</html>

Ketika file html yang berisi kode di atas kita jalankan, maka akan menampilkan teks seperti pada gambar berikut ini:

Dari contoh di atas, jika kita lihat di halaman webnya tidak ditampilkan apapun dengan kode javascript yang kita buat, namun jika kita lihat di Console, akan terlihat teks Halo, dunia JS, hal itu karena kita mengetikkan perintah console.log(pesan) yang artinya menampilkan pesan di console.

2. Menjalankan Kode JavaScript Langsung Dari Browser Console

Browser console adalah alat yang kuat untuk menjalankan dan menguji kode JavaScript secara interaktif. Setiap browser modern memiliki fitur ini. Kita dapat membuka konsol dengan menekan tombol F12 atau klik kanan di halaman dan pilih “Inspect” atau “Inspect Element,” lalu pilih tab “Console.”

Langkah 1: Buka halaman web yang berisi kode JavaScript.

Langkah 2: Buka konsol browser dengan tombol F12 atau melalui menu Inspect.

Langkah 3: Kita dapat langsung mengetikkan kode JavaScript di dalam konsol dan tekan tombol Enter untuk menjalankannya.

Contoh:

var pesan = "Halo bro aku dari konsol!";
console.log(pesan);

1 2	var pesan = "Halo bro aku dari konsol!"; console.log(pesan);

Tampilan pada browser console terlihat seperti gambar berikut ini:

Selain menggunakan console.log() untuk menampilkan hasil dari kode JavaScript, ada beberapa cara lain untuk menampilkan output atau interaksi dengan pengguna dalam lingkungan yang berbeda. Kita dapat mengubah konten HTML langsung menggunakan JavaScript untuk menampilkan output. Misalnya, kita dapat mengubah teks dalam elemen HTML atau menambahkan elemen baru untuk menampilkan hasil. Kita juga dapat menggunakan alert(), dimana fungsi alert() akan menampilkan kotak pesan modal yang mengharuskan pengguna untuk menekan tombol “OK” sebelum melanjutkan. Ini berguna untuk memberikan informasi atau peringatan kepada pengguna.

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Menampilkan Outpur JS di Laman Web</title>
</head>
<body>
  <h1>Silahkan Klik Tombol Untuk Melihat Hasilnya!</h1>
  
  <!-- Tombol untuk Menampilkan Teks -->
  <button id="tombolTeks">Tampilkan Teks</button>
  <p id="hasilTeks"></p>
  
  <!-- Tombol untuk Menampilkan Alert -->
  <button id="tombolAlert">Tampilkan Alert</button>

  <script>
    // Tombol Tampilkan Teks
    var tombolTeks = document.getElementById("tombolTeks");
    var hasilTeksElemen = document.getElementById("hasilTeks");
    
    tombolTeks.addEventListener("click", function() {
      hasilTeksElemen.textContent = "Aku Teks dibuat dengan Javascript!";
    });
    
    // Tombol Tampilkan Alert
    var tombolAlert = document.getElementById("tombolAlert");
    
    tombolAlert.addEventListener("click", function() {
      alert("Aku pesan dari alert Javascript!");
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Contoh Menampilkan Outpur JS di Laman Web</title>

</head>

<body>

<h1>Silahkan Klik Tombol Untuk Melihat Hasilnya!</h1>

<button id="tombolTeks">Tampilkan Teks</button>

<button id="tombolAlert">Tampilkan Alert</button>

// Tombol Tampilkan Teks

var tombolTeks = document.getElementById("tombolTeks");

var hasilTeksElemen = document.getElementById("hasilTeks");

tombolTeks.addEventListener("click", function() {

hasilTeksElemen.textContent = "Aku Teks dibuat dengan Javascript!";

});

// Tombol Tampilkan Alert

var tombolAlert = document.getElementById("tombolAlert");

tombolAlert.addEventListener("click", function() {

alert("Aku pesan dari alert Javascript!");

});

</script>

</body>

</html>

Hasilnya pada web browser akan terlihat seperti pada gambar berikut ini:

Ketika tombol Tampilkan Teks di klik akan tampil seperti pada gambar di bawah ini:

Ketika tombol Tampilkan Alert akan muncul alert seperti gambar berikut ini:

Menjalankan kode JavaScript adalah langkah pertama dalam memahami dan menguji logika dan fungsionalitas dari kode yang kita tulis. Kita dapat menggabungkan pengetahuan tentang cara menjalankan kode dalam halaman web dan browser console untuk mengembangkan dan menguji aplikasi web kita. Dengan berlatih dan eksperimen, kita akan semakin terampil dalam menggunakan JavaScript untuk menciptakan aplikasi yang interaktif dan dinamis.

Tutorial Lengkap Javascript Dari Dasar dapat dilihat pada Index Tutorial Javascript: Belajar Javascript dari Dasar.

1. Menjalankan Kode JavaScript Melalui Halaman Web

2. Menjalankan Kode JavaScript Langsung Dari Browser Console

Artikel Terkait

Tinggalkan Komentar Batalkan Balasan