info-b

Tutorial Belajar JavaScript Part 5: Cara Memasukkan (input) kode JavaScript ke dalam HTML

Posted on

Seperti yang telah kita pelajari di panduan cara menjalankan kode JavaScript, sekilas sahabat telah melihat cara memasukkan kode JavaScript ke pada HTML. Di panduan kali ini kita akan membahas metoda-metoda atau cara-cara untuk meng-input kode JavaScript ke pada HTML.


Cara Memasukkan kode JavaScript ke pada HTML

JavaScript termasuk jenis bahasa script, yang digunakan di pada file HTML. Bagi menginput, atau memasukkan kode JavaScript ke pada 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:”)

Pada panduan javascript kali ini kita akan membahas ke-4 sistem ini.


Cara Memasukkan JavaScript menggunakan tag <script> (internal JavaScript)

Cara pertama-tama bagi menginput kode JavaScript ke pada halaman HTML yakni dengan menggunakan tag <script> secara internal. Internal disini berarti bahwa kode JavaScript ditulis di halaman yang sama dengan HTML, atau di pada satu file HTML.

Cara ini adalah sebuah cara yang sangat sering digunakan, bila kode JavaScript tak semacam itu 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:

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

Pada beberapa buku atau panduan JavaScript, mungkin sahabat akan menemukan pemakaian tag <script> seperti berikut ini:

Pemakaian atribut type=”text/javascript” digunakan bagi membedakan javascript dengan bahasa script lain seperti VBScript yang ditulis selaku type=”text/vbscript”. Namun karena VBScript telah jarang digunakan, hampir seluruh web browser modern menjadikan JavaScript selaku bahasa default, sehingga sahabat tak perlu menulis type=”text/javascript”. Tetapi pun tak salah bila sahabat ingin menegaskan pemakaian JavaScript dengan menuliskannya secara seketika.

Di halaman web yang lama, kadang sahabat pun akan menemukan pemakaian atribut language selaku pengganti atribut type seperti berikut ini:

Atribut language telah dianggap usang (deprecated), dan disarankan bagi tak digunakan lagi.

Selaku contoh cara penginputan JavaScript dengan tag <script>, berikut yakni kode HTMLnya:

Pada contoh diatas, saya meletakkan tag <script> di pada tag <head> dari HTML (di baris ke 7). Tag <script> tersebut berisi kode JavaScript: alert(“Hello World!!”);. alert() yakni manfaat pada JavaScript yang akan menampilkan pesan ke pada web browser. Kegunaan ini sering digunakan pada proses perancangan program JavaScript bagi menampilkan output sederhana. Kegunaan alert membutuhkan 1 inputan (argumen) bertipe String. Kita akan membahas cara penulisan manfaat dan tipe-tipe data JavaScript di tutorial-tutorial berikutnya.

Apabila sahabat menjalankan program diatas, karenanya di pada web browser akan tampil hasil seperti berikut ini:

Cara Memasukkan JavaScript Menggunakan tag <script src=” “> (external JavaScript)

Cara atau sistem kedua bagi menginput kode JavaScript ke pada halaman HTML yakni dengan memindahkan kode JavaScript ke pada sebuah file terpisah, lalu ‘memanggilnya’ dari HTML. Cara ini amat disarankan karena akan memberikan banyak keuntungan dan fleksibilitas pada merancang program JavaScript.

Sebuah file JavaScript disimpan pada ekstensi .js, seperti: kode.js, register.js, atau kodeku.js. Dari halaman HTML, kita memanggilnya menggunakan tag <script> dengan atribut src. Atribut src berisi tempat tinggal dari file javascrip
t
tersebut, seperti berikut ini:

Perhatikan bahwa tag <script> tetap ditutup dengan tag penutup </script>, atau sahabat dapat membuatnya menjadi self closing tag seperti berikut ini:

Penamaan file JavaScript dengan akhiran .js hanyalah sebuah kesepakatan di kalangan programmer. Sahabat dapat merancang akhiran atau extension apapun, seperti: kode_javascript.kami, atau kode_javascript.duniailkom, asal di dikala pemanggilan pada tag <script> mesti sesuai dengan nama file tersebut, seperti <script src=”kode_javascript.duniailkom”></script>

Namun agar lebih nyaman dan tak merancang bingung, sebaiknya tetap mengikuti kesepakatan dengan menggunakan akhiran .js.

Selaku 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 selaku berikut:

Ya, hanya 1 baris itu saja, dan savelah di folder yang sama dengan tempat kode HTML akan dijalankan dengan nama file kode_javascript.js. Lalu di kode program HTML, kita akan menjalankan file javascript tersebut selaku berikut:

Perhatikan bahwa di pada file kode_javascript.js saya seketika menuliskan petunjuk alert, dan dipanggil oleh tag <script> di baris ke 7 contoh file HTML diatas.

Tempat tinggal dari file javascript dapat berupa tempat tinggal relatif seperti contoh diatas, atau dapat pun tempat tinggal absolut seperti www.duniailkom.com/kode_javascript.js. Aturan penulisan tempat tinggal ini sama seperti atribut src HTML lainnya. Perbedaan antara tempat tinggal relatif dan absolut telah dibahas di Tutorial HTML cara membuat link HTML.


Cara Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)

Cara ketiga bagi menjalankan JavaScript yakni dengan memanggilnya menggunakan Event Handler dari pada tag HTML.

Konsep Event Handler akan kita pelajari secara khusus di panduan terpisah, namun secara sederhananya, event handler yakni pemanggilan kode javascript ketika ‘sesuatu’ terjadi pada tag HTML.

Sesuatu disini maksudnya ketika sebuah element pada HTML di klik, di klik kanan, di arahkan mouse, dan lain-lain. Event handler di pada JavaScript ditulis dengan penambahan kata on. Sehingga bila sebuah tombol di-klik, karenanya disebut selaku onclick, bila mouse berada diatas element disebut selaku onmouseover, dan lain-lain.

Selaku contoh, ketika sebuah tombol di-klik, karenanya kita dapat menampilkan alert(“Hello World!!”). Berikut yakni contoh kode programnya:

 Perhatikan di baris ke-13 dari contoh kode diatas, yaitu di penulisan tag <button>. Di pada tag tersebut, saya menambahkan onclick=”alert(‘Hello World!!’)”, ini yakni kode JavaScript yang diinput via sistem event handler.

Cara penginputan kode JavaScript dengan menggunakan Event Handler seperti ini, walaupun mudah namun tak disarankan, karena kita mencampurkan JavaScript dengan HTML. Dan bila kode JavaScript agak panjang, akan menyulitkan bagi memisahkan kode HTML dengan JavaScript.

Hasil yang didapat menggunakan event handl
er
diatas, sebaiknya dipindahkan ke pada tag <script>.

Di pada pemograman Javascript, ada istilah yang disebut Unobtrusive JavaScript. Unobtrusive JavaScript yakni filosofi atau paradigma pada pemograman yang berpendapat bahwa content (HTML) sedapat mungkin mesti terpisah dari behavior (JavaScript) agar gampang pada pemeliharaan dan lebih fleksibel. Konsep ini dapat dibaca di http://en.wikipedia.org/wiki/Unobtrusive_JavaScript.


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

Cara terakhir (dan pun sangat jarang digunakan dikala ini) yakni dengan menyisipkan JavaScript ke pada tempat tinggal href dari tag HTML. Cara ini disebut pun dengan protocol javascript. Disebut demikian, karena kita mengganti tempat tinggal link dari yang lazim menggunakan protocol http//: menjadi javascript:

Selaku contoh penggunaannya, perhatikan kode berikut ini:

Apabila sahabat menjalankan kode diatas, dan men-klik link Hallo Dunia… akan tampil alert Hello World!!, yang berasal dari JavaScript. Disini kita telah menjalankan JavaScript menggunakan protocol javascript.

 Cara menjalankan JavaScript seperti ini berasal dari awal kemunculan javascript, dan telah banyak ditinggalkan.

Sahabat pun dapat menggunakan konsep protocol javascript ini bagi menjalankan petunjuk JavaScript tanpa merancang halaman HTML. Caranya yakni dengan menuliskan petunjuk JavaScript seketika di bagian address bar dari web browser, seperti contoh berikut:

Konsep ini dapat digunakan bagi merancang sebuah program javascript yang dapat disimpan pada web browser, dan dieksekusi di dikala diperlukan, atau dikenal dengan istilah bookmarklet. Pembahasan mengenai bookmarklet akan kita bahas di panduan JavaScript lanjutan.


Best Practice JavaScript: gunakan tag <script src=””>

Dari ke-4 cara menginput kode JavaScript, memisahkan kode JavaScript kedalam sebuah file tersendiri (menggunakan sistem <script src=””>) yakni yang sangat disarankan. Beberapa keuntungan menggunakan metoda <script src> bila diperbandingkan dengan moteda cara memasukkan JavaScript lainnya yakni:

  • Menyederhanakan halaman HTML dengan memindahkan seluruh kode JavaScript, sehingga halaman HTML hanya berisi konten saja.
  • Sebuah file JavaScript external dapat digunakan bagi beberapa halaman HTML, sehingga bila diperlukan perubahan, kita hanya perlu mengedit sebuah file daripada mengubah secara satu persatu halaman HTML tempat JavaScript ditulis secara internal.
  • Apabila file JavaScript external digunakan oleh beberapa halaman, file tersebut hanya perlu di unduh oleh web browser di dikala pertama-tama kali saja. Di dikala loading halaman lainnya, web browser lumayan mengambilnya dari browser cache, sehingga mempercepat loading halaman.

Walaupun saya menyarankan bagi menggunakan javascript secara terpisah menggunakan metoda <script src>, namun bagi contoh-contoh di tutorial javascript di Source Code Aplikasi, saya akan menuliskan JavaScript di halaman yang sama dengan HTML semata-mata bagi menyederhanakan penulisan contoh program.


Pada panduan javascript kali ini kita telah mempelajari 4 cara menginput atau memasukkan javascript ke dalam HTML. Apabila sahabat perhatikan, dari contoh-contoh yang terdapat, saya ‘meletakkan’ kode javascript di bagian atas HTML (tepatnya di bagian tag <head>). Akan tetapi, JavaScript tak mesti diletakkan di bagian ini.

Pembahasan mengenai peletakkan posisi kode JavaScript pada halaman HTML, akan kita bahas di panduan berikutnya: Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML.


eBook JavaScript Uncover Duniailkom

JavaScript telah menjadi fitur wajib di setiap blog modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih komplit, mulai dari basic hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut dapat ke eBook JavaScript Uncover Duniailkom.


Sumber https://www.duniailkom.com/