cara menggunakan javascript di html

Dalam pengembangan web, JavaScript dan HTML merupakan dua elemen penting yang saling melengkapi. Dalam artikel ini, kami akan fokus membahas tentang bagaimana menggunakan JavaScript di HTML.

Menambahkan JavaScript ke HTML

Ada beberapa cara untuk memasukkan JavaScript ke dalam kode HTML. Pertama, kamu bisa memasukkannya langsung ke dalam tag <script> di dalam dokumen HTML. Kedua, kamu bisa menulis kode JavaScript di file terpisah kemudian memasukkannya ke dalam HTML menggunakan tag <script>.

Cara Pertama: Menaruh Kode JavaScript Dalam Tag Script

Salah satu cara termudah untuk menambahkan JavaScript di HTML adalah dengan menjalankannya langsung di dalam tag <script>. Berikut contohnya:

<html>
<head>
  <title>Belajar JavaScript</title>
</head>
<body>
  <script>
    alert('Selamat Datang di Website Kami!');
  </script>
</body>
</html>

Dalam contoh di atas, kode JavaScript alert('Selamat Datang di Website Kami!'); ditempatkan di dalam tag <script>. Ketika halaman web ini dibuka, maka akan muncul pop-up alert dengan pesan ‘Selamat Datang di Website Kami!‘.

Cara Kedua: Menaruh Kode JavaScript dalam File Terpisah

Cara lainnya adalah dengan membuat file JavaScript (.js) terpisah. Tujuannya adalah untuk membuat kode lebih rapi dan mudah dikelola, terutama jika JavaScript yang digunakan cukup banyak atau rumit.

<html>
<head>
  <title>Belajar JavaScript</title>
</head>
<body>  
  <script src="script.js"></script>
</body>
</html>

Hasilnya akan sama dengan contoh sebelumnya jika dalam file script.js kamu menulis:

alert('Selamat Datang di Website Kami!');

Menggunakan JavaScript pada HTML

Setelah mengenal kedua cara memasukkan JavaScript ke HTML, selanjutnya adalah memahami bagaimana JavaScript bekerja di HTML. Dalam hal ini, JavaScript bisa berinteraksi dengan HTML menggunakan DOM (Document Object Model). DOM memungkinkan JavaScript untuk membaca dan mengubah isi dari halaman HTML.

Berikut adalah contoh dasarnya:

<html>
<body>
  <p id="paragraf">Halo, Selamat Datang!</p>
  <button onclick="ubahTeks()">Ubah Teks</button>
  <script>
   function ubahTeks() {
	   document.getElementById("paragraf").innerHTML = "Selamat Datang di Website Kami!";
   }
  </script>
</body>
</html>

Setelah mengetahui cara kerja dasar JavaScript di HTML, kamu bisa mencoba berbagai teknik lain yang lebih kompleks dan canggih.

Demikian cara menggunakan Javascript di dalam HTML. Semoga artikel ini bermanfaat dan dapat membantu pembelajaran kamu. Happy coding!

CARA MENGGUNAKAN JAVASCRIPT DI HTML

Artikel ini akan mengajarkan cara menggunakan JavaScript di HTML secara mudah dan sederhana.

Menambahkan JavaScript ke HTML

Cara Pertama: Menaruh Kode JavaScript Dalam Tag Script

Cara Kedua: Menaruh Kode JavaScript dalam File Terpisah

Menggunakan JavaScript pada HTML

Kelas membuat website dengan HTML dan CSS