KodeKodingan - Pada Belajar Javascript kita akan membahas metode-metode cara-cara memasukkan kode Javasript ke dalam HTML.
Dalam contoh diatas, saya meletakkan tag <script> di dalam tag <head> dari HTML (pada baris ke 7). Tag <script> tersebut berisi kode JavaScript: alert(“Hello World!!”);. alert() adalah fungsi dalam JavaScript yang akan menampilkan pesan ke dalam web browser. Fungsi ini sering digunakan dalam proses pembuatan program JavaScript untuk menampilkan output sederhana. Fungsi alert membutuhkan 1 inputan (argumen) bertipe String. Kita akan membahas cara penulisan fungsi dan tipe-tipe data JavaScript pada tutorial-tutorial selanjutnya.
Perhatikan bahwa di dalam file kode_javascript.js saya langsung menuliskan perintah alert, dan dipanggil oleh tag <script> pada baris ke 7 contoh file HTML diatas.
 |
| Belajar Javasript |
Cara Memasukkan kode JavaScript ke dalam HTML
JavaScript termasuk jenis bahasa script, yang digunakan di dalam file HTML. Untuk menginput, atau memasukkan kode JavaScript ke dalam HTML, JavaScript menyediakan 4 alternatif, yaitu:
- Menggunakan tag <script> (internal JavaScript)
- Menggunakan tag <script scr=””> (external JavaScript)
- Menggunakan Event Handler (Inline JavaScript)
- Menggunakan URL (href:=”javascript:”)
Dalam tutorial javascript kali ini kita akan membahas ke-4 metode ini.
Cara Memasukkan JavaScript menggunakan tag <script> (internal JavaScript)
Cara pertama untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan menggunakan tag <script> secara internal. Internal disini berarti bahwa kode JavaScript ditulis pada halaman yang sama dengan HTML, atau di dalam satu file HTML.
Cara ini merupakan cara yang paling sering digunakan, jika kode JavaScript tidak begitu panjang, dan hanya digunakan di 1 halaman saja. Kode JavaScript yang akan diinput diletakkan diantara tag pembuka <script> dan tag penutup </script> seperti berikut ini:
<script>//kode javascript diletakkan disini</script>
Tag <script> akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah HTML, tetapi JavaScript.
Sebagai contoh cara penginputan JavaScript dengan tag <script>, berikut adalah kode HTMLnya:
<!DOCTYPEhtml><html><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><head><title>Belajar JavaScript di KodeKodingan</title><script>alert("Hello World!!");</script></head><body><h1>Belajar JavaScript</h1><p>Saya sedang belajar JavaScript di kodekodingan.blogspot.com</p><p>Belajar Web Programming di KodeKodingan.</p></body></html>
Jika anda menjalankan program diatas, maka di dalam web browser akan tampil hasil seperti berikut ini:
 |
| Belajar Javascript |
Cara Memasukkan JavaScript Menggunakan tag <script src=” “> (external JavaScript)
Cara atau metode kedua untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan memindahkan kode JavaScript ke dalam sebuah file terpisah, lalu ‘memanggilnya’ dari HTML. Cara ini sangat disarankan karena akan memberikan banyak keuntungan dan fleksibilitas dalam membuat program JavaScript.
Sebuah file JavaScript disimpan dalam ekstensi .js, seperti: kode.js, register.js, atau kodeku.js. Dari halaman HTML, kita memanggilnya menggunakan tag <script> dengan atribut src. Atribut src berisi alamat dari file javascript tersebut, seperti berikut ini:
<script src="kode_javascript.js"></script> |
Perhatikan bahwa tag <script> tetap ditutup dengan tag penutup </script>, atau anda bisa membuatnya menjadi self closing tag seperti berikut ini:
Sebagai contoh program, saya akan menampilkan alert “Hello World!!” seperti kode program sebelumnya, namun kali ini saya akan memisahkannya menjadi sebuah file tersendiri. Kode JavaScript tersebut akan dipindahkan kedalam file kode_javascript.js dengan isi file sebagai berikut:
alert("Hello World!!")Ya, hanya 1 baris itu saja, dan savelah pada folder yang sama dengan tempat kode HTML akan dijalankan dengan nama file kode_javascript.js. Lalu pada kode program HTML, kita akan menjalankan file javascript tersebut sebagai berikut:
<!DOCTYPEhtml><html><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/><head><title>Belajar JavaScript di Duniailkom</title><scriptsrc="kode_javascript.js"></script></head><body><h1>Belajar JavaScript</h1><p>Saya sedang belajar JavaScript di duniailkom.com</p><p>Belajar Web Programming di Duniailkom.</p></body></html>
Perhatikan bahwa di dalam file kode_javascript.js saya langsung menuliskan perintah alert, dan dipanggil oleh tag <script> pada baris ke 7 contoh file HTML diatas.
EmoticonEmoticon