Belajar JavaScript Part 3 : Cara Input Kode JavaScript kedalam HTML


Belajar JavaScript Part 3 : Cara Input Kode JavaScript kedalam HTML 1

IRVAN GEN – Halo teman -teman salam jumpa kembali di pertemuan yang ke-tiga ini, masih di sesi belajar JavaScript. Sebelumnya kita pernah belajar Cara Menampilkan Pesan Error Pada JavaScript. Pada pertemuan yang ke-tiga ini saya akan mengulas tuntas tentang Input JavaScript kedalam HTML.

Tutorial Memasukan Kode JavaScript kedalam HTML

JavaScript adalah bahasa yang termasuk jenis script, yang digunakan didalam file HTML. Untuk memasukan atau mengimput kode JavaScript kedalam HTML ada 4 cara alternatif, yakni :

  • Menggunakan tag <script> (internal JavaScript)
  • Menggunakan tag <script scr=””> (external JavaScript)
  • Menggunakan Event Handler (Inline JavaScript)
  • Menggunakan URL (href:=”javascript:”)

Kali ini kita akan membahas tutorial JavaScript dengan ke-4 metode ini.

1. Memasukan Kode JavaScript Menggunakan Tag <script> (Internal JavaScript)

Cara pertama untuk memasukan kode JavaScript kedalam HTML adalah dgn menggunakan tag <script> secara internal. Internal artinya bahwa kode JavaScript ditulis pada halaman yang sama dengan HTML, atau didalam satu file HTML.

Cara ini adalah cara yang paling sering digunakan, jika kode javascript tidak terlalu panjang, hanya digunakan di satu halaman saja. Kode JavaScript yang akan dimasukan diletakan diantara tag pembuka <script> dan tag penutup </script> contohnya seperti dibawah ini.

Tag tersebut akan memberitahu web browser, bahwa kode diantara tag <script> bukan kode HTML, melainkan kode JavaScript.

Dalam beberapa buku atau tutorial JavaScript, mungkin teman – teman akan menjumpai penggunaan tag <script> seperti dibawah ini.

Penggunaan atribut type=”text/javascript” digunakan untuk membedakan JavaScript dengan bahasa script lainnya, seperti VBScript yang ditulis type=”text/vbscript” namun karna vbscript sudah jarang digunakan, karna hampir semua web browser modern javascript dijadikan sebagai bahasa default.

Sehingga tidak perlu menulisnya dengan type=”text/javascript” tapi tidak ada salahnya jika teman – teman ingin menegaskan penggunaan JavaScript dengan menulisnya secara langsung.

Pada suatu halaman web yang lama, terkadang juga teman – teman akan menemui penggunaan atribut languange sebagai pengganti atribut type. Contohnya seperti dibawah ini.

karna atribut languange sudah dianggap usang, dan disarankan untuk tidak digunakan lagi. Sebagai contoh cara pengimputan JavaScript dengan menggunakan tag <script></script>

Silahkan jalankan, maka hasilnya akan seperti ini.

Cara Input Kode JavaScript kedalam HTML_1
Cara Input Kode JavaScript kedalam HTML_1

Hasil contoh diatas adalah contoh pengimputan kode JavaScript didalam file HTML. Saya meletakan kode tersebut pada baris ke-7. Bisa teman – teman lihat diantara tag pembukan <script> dan tag penutup </script>. Saya ulangi kode JavaScript yang disisipkan didalam file HTML.

Kode tersebut berisi alert(“Hello World!!”); alert adalah sebuah fungsi JavaScript untuk menampilkan pesan didalam web browser, biasanya digunakan dalam pembuatan sebuah program untuk menampilkan output sederhana, fungsi alert membutuhkan satu inputan (argumen) bertype string.

2. Memasukan Kode JavaScript Menggunakan Tag <script scr=””> (external JavaScript)

Metode yang ke-dua ini akan membahas mengimput kode javascript kedalam halaman HTML dengan memindahkan kode JavaScript kedalam sebuah file terpisah, lalu memanggilnya dari HTML. Cara ini sangatlah disarankan karena akan memberi keuntungan dan fleksibilitas dalam membuat program JavaScript.

Sebuah file JavaScript disimpan dalam ekstensi .js seperti : register.js, kodemu.js, kode.js atau notif.js
Dari halaman HTML kita memanggilnya menggunakan tag <script> dengan atribut scr. Atribut scr adalah alamat file javascript, seperti dibawah ini.

Tag <script> tetap ditutup dengan tag </script> atau teman – teman juga bisa membuatnya jadi self closing tag.

Penamaan file dengan akhiran .js merupakan kesapakatan dikalangan programmer, teman – teman juga dapat membuat penamaan akhiran dengan apapun, contohnya seperti, javascript_kode.irvangen, atau javascript_kode.aku. Asalkan saat pemanggilan dalam tag <script> harus sesuai dengan nama file tersebut, contohnya seperti <script src=”javascript_kode.irvangen” />

Nah agar lebih nyaman dan tidak bingung, sebaiknya tetap mengikuti aturan yang disepakati, yaitu menggunakan akhiran .js

Untuk contoh program, saya akan menampilkan alert”Hello World!!” seperti kode program sebelumnya, namun kali ini saya akan membuatnya secara terpisah menjadi file sendiri. Kode JavaScript tersebut akan pindah ke dalam file javascript_kode.js dengan isi file berikut.

Save pada folder yang sama dengan tempat kode HTML akan dijalankan dengan nama file javascript.kode.js lalu pada kode program HTML, kita akan jalankan file JavaScript tersebut, berikut dibawah ini.

Lihat, bahwa didalam file javascript_kode.js saya langsung menulis perintah alert, dan di panggil oleh tag <script> dibagian baris ke-7 contoh file HTML diatas.

3. Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)

Cara yang ke-3 ini menjalankan JavaScript dengan memanggilnya menggunakan Event Handler dari dalam tag HTML. Konsep event handler akan kita pelajari khusus pada tutorial terpisah, namun sederhananya event handler adalah pemanggilan javascript ketika sesuatu terjadi dalam tag HTML.

sesuatu maksudnya ketika sebuah element dalam HTML di klik, klik kanan, diarahkan mouse, dan yang lainnya. Event handler dalam JavaScript ditulis dengan penambahan kata on. Sehingga jika sebuah tombol di klik, maka disebut dengan onclik, atau jika mouse berada diatas element maka disebut onmouseover.

Untuk contoh, ketika sebuah tombol di klik, maka akan menampilkan pesan alert”Hello World” dibawah ini adalah contohnya.

Jika dijalankan hasilnya akan seperti gambar dibawah ini.

Cara Input Kode JavaScript kedalam HTML_2
Sebelum di klik
Cara Input Kode JavaScript kedalam HTML_3
Sesudah di klik

Perhatikan kode program diatas, pada baris ke-13 saya menambahkan tag <button> kemudian didalam tag tersebut, saya menambahkan onclick=”alert(Hello World!!)” inilah yang disebut dengan metode Event Handler.

Meskipun praktis, namun untuk penggunaan event handler tidak disarankan, karna kita mencampurkan JavaScript dengan HTML. Jika kode JavaScript lumayan panjang, kita sendiri akan kesulitan untuk memisahkan kode HTML dan JavaScript.

4. Cara Memasukkan JavaScript Menggunakan URL (href:=”javascript:”)

Cara ke-4 ini adalah cara terakhir dari pembahasan. Dengan menyisipkan JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga dengan sebutan protocol javascript. Mengapa bisa? karna kita mengganti alamat link dari yang biasa menggunakan protocol https:// menjadi javascript.

Untuk contoh penggunaannya, lihat pada kode dibawah ini.

Hasilnya…

Cara Input Kode JavaScript kedalam HTML_4
Cara Input Kode JavaScript kedalam HTML_4

Jika teman – teman menjalankan kode diatas, dan klik Hallo Dunia… maka akan tampil Hello World!! yang berasal dari JavaScript. Disini kita telah menjalankan JavaScript dengan menggunakan protocol javascript.

Penutup

Nah mungkin itu saja penjelasan seputar Cara Memasukan Kode JavaScript kedalam HTML. Jika ada yang kurang atau salah dalam penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terima Kasih.

Income Search

  • kode javascript lengkap
  • how to show javascript code in html
  • cara memanggil javascript di html
  • how to write js in html
  • contoh javascript
  • javascript button code
  • cara menampilkan hasil form dengan javascript
  • bulb on off code in javascript

Nilai kualitas konten


Irvan Nurfazri
Fakir ilmu yang selalu berusaha memantaskan diri dihadapan-Nya.Menulis apa yang saya sukai dan berbagi apa yang saya ketahui.

0 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *