Cara Memasukan Javascript Ke Dalam HTML

Cara Memasukan Javascript Ke Dalam HTML

Pada kesempatan kali ini saya akan membahas seputar Tutorial Belajar Javascript,  pada tutorial sebelumnya saya menjelaskan Apa itu Javascript ? nah untuk sekarang kita akan mempelajari Cara Memasukan Javascript Ke Dalam HTML.

Cara Memasukan Javascript Ke Dalam HTML
Atribut Href
Sama halnya dengan Cara Memasukan Kode CSS, yaitu menggunakan cara Inline, Internal, eksternal tetapi untuk javascript itu memiliki 4 cara, antara lain :

  1. Internal JavaScript
  2. External JavaScript
  3. Inline JavaScript
  4. Atribut Href

1. Internal Javascript

Internal Javascript adalah cara memasukan javascript dengan cara menuliskan kode javascript langsung pada halaman yang sama dengan HTML. Menggunakan Cara Internal Javascript ini cara yang sering digunakan atau lebih tepatnya umum, itu juga jika kode javascriptnya tidak terlalu panjang, dan hanya untuk 1 halaman saja. Untuk menuliskan kode javacsript secara Internal itu harus di awali dengan tag pembuka <script> dan tag penutup </script>.


 <script>  
 //kode javascript diletakkan disini  
 </script>

Sedangkan berikut ini adalah contoh peletakan penggunaan metode Internal Javascript di dalam HTML.

<!DOCTYPE html>  
 <html>  
 <head>  
 <title>Belajar JavaScript</title>  
 <script>  
 alert("Hello World!!");  
 </script>   
 </head>  
 <body>  
 <h1>Belajar JavaScript</h1>  
 <p>Cara Memasukan Javascript Ke HTML</p>  
 </body>  
 </html>  

2. Eksternal Javascript

Eksternal Javascript adalah cara memasukan javascript dengan cara menyimpan javascript secara terpisah lalu memanggilnya. Sebuah file JavaScript disimpan dalam ekstensi .js, misalnya contoh.js. lalu kita akan memanggilnya menggunakan tag <script> dengan menggunakan atribut src, seperti berikut ini.

 <script src="kode_contoh.js"></script>  

Atau bisa juga tanpa tag penutup </script>, yang sering disebut dengan istilah self closing tag, seperti berikut ini.

 <script src="kode_contoh.js"/>  

3. Inline Javascript

Inline Javascript adalah cara untuk menjalankan javascript menggunakan Event Handler dari dalam element HTML. Event Handler secara sederhananya adalah pemanggilan kode javascript karena terjadi sesuatu atau lebih tepatnya karena suatu kejadian.

Maksud dari suatu kejadian disini misalnya adalah ketika kita klik sebuah tombol muncul sebuah notofikasi atau peringatan, maka kodenya adalah sebagai berikut.

 <button onclick="alert('Hello Broo!!')">Klik Disini  

4. Atribut Href

Sebelumnya kita pernah mengetahui di dalam Belajar HTML, biasanya nilai untuk atribut ini adalah sebuah URL, tetapi sebenarnya nilai untuk atribute href bisa kita gunakan untuk menyimpan javascript. Memang cara ini sangatlah jarang digunakan tetapi kita juga harus mengetahuinya.
Berikut ini adalah contoh kodenya.

 <a href="javascript:alert('Hello Broo!!')">Hallo !!</a>  
 
Semoga Bermanfaat....