Seperti yang telah kita pelajari pada tutorial cara menjalankan kode JavaScript, sekilas anda telah melihat cara memasukkan kode JavaScript ke dalam HTML. Pada tutorial kali ini kita akan membahas metoda-metoda atau cara-cara untuk meng-input kode JavaScript ke dalam HTML.
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.
<script type="text/javascript"> //kode javascript diletakkan disini </script>
Penggunaan atribut type=”text/javascript” digunakan untuk membedakan javascript dengan bahasa script lain seperti VBScript yang ditulis sebagai type=”text/vbscript”. Namun karena VBScript sudah jarang digunakan, hampir semua web browser modern menjadikan JavaScript sebagai bahasa default, sehingga anda tidak perlu menulis type=”text/javascript”. Tetapi juga tidak salah jika anda ingin menegaskan penggunaan JavaScript dengan menuliskannya secara langsung.
Pada halaman web yang lama, kadang anda juga akan menemukan penggunaan atribut language sebagai pengganti atribut type seperti berikut ini:
<script language=”text/javascript”> //kode javascript diletakkan disini </script>
Atribut language sudah dianggap usang (deprecated), dan disarankan untuk tidak digunakan lagi.
Sebagai contoh cara penginputan JavaScript dengan tag <script>, berikut adalah kode HTMLnya:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Belajar JavaScript di Duniailkom</title>
<script>
alert("Hello World!!");
</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>
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.
Jika anda menjalankan program diatas, maka di dalam web browser akan tampil hasil seperti berikut ini:
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:
<script src="kode_javascript.js" />
Namun agar lebih nyaman dan tidak membuat bingung, sebaiknya tetap mengikuti kesepakatan dengan menggunakan akhiran .js.
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:
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <title>Belajar JavaScript di Duniailkom</title> <script src="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.
Cara Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)
Cara ketiga untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan Event Handler dari dalam tag HTML.
Konsep Event Handler akan kita pelajari secara khusus pada tutorial terpisah, namun secara sederhananya, event handler adalah pemanggilan kode javascript ketika ‘sesuatu’ terjadi dalam tag HTML.
Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan, di arahkan mouse, dan lain-lain. Event handler di dalam JavaScript ditulis dengan penambahan kata on. Sehingga jika sebuah tombol di-klik, maka disebut sebagai onclick, jika mouse berada diatas element disebut sebagai onmouseover, dan lain-lain.
Sebagai contoh, ketika sebuah tombol di-klik, maka kita bisa menampilkan alert(“Hello World!!”). Berikut adalah contoh kode programnya:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Belajar JavaScript di Duniailkom</title>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript di duniailkom.com</p>
<p>Belajar Web Programming di Duniailkom.</p>
<button onclick="alert('Hello World!!')">Klik Saya
</body>
</html>
Perhatikan pada baris ke-13 dari contoh kode diatas, yaitu pada penulisan tag <button>. Di dalam tag tersebut, saya menambahkan onclick=”alert(‘Hello World!!’)”, ini adalah kode JavaScript yang diinput melalui metode event handler.
Hasil yang didapat menggunakan event handler diatas, sebaiknya dipindahkan ke dalam tag <script>.
Di dalam pemograman Javascript, ada istilah yang disebut Unobtrusive JavaScript. Unobtrusive JavaScript adalah filosofi atau paradigma dalam pemograman yang berpendapat bahwa content (HTML) sedapat mungkin harus terpisah dari behavior (JavaScript) agar mudah dalam pemeliharaan dan lebih fleksibel. Konsep ini dapat dibaca pada http://en.wikipedia.org/wiki/Unobtrusive_JavaScript.
Cara Memasukkan JavaScript Menggunakan URL (href:=”javascript:”)
Cara terakhir (dan juga paling jarang digunakan saat ini) adalah dengan menyisipkan JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga dengan protocol javascript. Disebut demikian, karena kita mengganti alamat link dari yang biasa menggunakan protocol http//: menjadi javascript:
Sebagai contoh penggunaannya, perhatikan kode berikut ini:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Belajar JavaScript di Duniailkom</title>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript di duniailkom.com</p>
<p>Belajar Web Programming di Duniailkom.</p>
<a href="javascript:alert('Hello World!!')">Hallo Dunia...</a>
</body>
</html>
Jika anda 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 sudah banyak ditinggalkan.
Konsep ini bisa digunakan untuk membuat sebuah aplikasi javascript yang bisa disimpan dalam web browser, dan dieksekusi pada saat diperlukan, atau dikenal dengan istilah bookmarklet. Pembahasan tentang bookmarklet akan kita bahas pada tutorial JavaScript lanjutan.
Best Practice JavaScript: gunakan tag <script src=””>
Dari ke-4 cara menginput kode JavaScript, memisahkan kode JavaScript kedalam sebuah file tersendiri (menggunakan metode <script src=””>) adalah yang paling disarankan. Beberapa keuntungan menggunakan metoda <script src> bila dibandingkan dengan moteda cara memasukkan JavaScript lainnya adalah:
- Menyederhanakan halaman HTML dengan memindahkan seluruh kode JavaScript, sehingga halaman HTML hanya berisi konten saja.
- Sebuah file JavaScript external bisa digunakan untuk beberapa halaman HTML, sehingga jika diperlukan perubahan, kita hanya perlu mengedit sebuah file daripada mengubah secara satu persatu halaman HTML tempat JavaScript ditulis secara internal.
- Jika file JavaScript external digunakan oleh beberapa halaman, file tersebut hanya perlu di download oleh web browser pada saat pertama kali saja. Pada saat loading halaman lainnya, web browser cukup mengambilnya dari browser cache, sehingga mempercepat loading halaman.
Dalam tutorial javascript kali ini kita telah mempelajari 4 cara menginput atau memasukkan javascript ke dalam HTML. Jika anda perhatikan, dari contoh-contoh yang ada, saya ‘meletakkan’ kode javascript pada bagian atas HTML (tepatnya pada bagian tag <head>). Akan tetapi, JavaScript tidak harus diletakkan di bagian ini.
Pembahasan tentang peletakkan posisi kode JavaScript dalam halaman HTML, akan kita bahas pada tutorial selanjutnya: Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML.
Langsung dipraktekkan,,
Terima kasih atas ilmunya,,
Terimakasih juga atas kunjungannya, semoga bisa bermanfaat…
mksh gan…semoga sukses + sehat selalu.., agar bisa update info + ilmunya…, Tuhan yang membalas segala kebaikan anda…, Amin
Amiiin… Terimakasih doanya gan,.. saya juga senang bisa berbagi… :)
trims gan,at ilmu y.semoga anda sehat sll
Cool Guys. . . . !
Makasih ……
Thanks infonya gan. Newtrick-azis
Makasih gan.. artikel sangat bermanfaat bagi anak sekolahan yang ingin belajar javascript…
Lanjut terus
Terimakasih juga atas kunjungannya gan.. semoga tutorial ini bisa menjadi dasar untuk mempelajari JavaScript :)
terima kasih banyak duniailkom… bermanfaat dan berkualitas sekali artikelnya, ganyesel belajar disini :D
Penamaan file JavaScript dengan akhiran .js hanyalah sebuah kesepakatan di kalangan programmer. Anda bisa membuat akhiran atau extension apapun, seperti: kode_javascript.aku, atau kode_javascript.duniailkom.
Hal baru buat ku … thz.
Iya gan, dicoba saja ganti extensionnya, kode JavaScript tetap jalan. Tapi ini memang sangat tidak lazim :)
Sama seperti extension .php juga bisa diganti dengan .aku, .kode_php, dll (dengan mengubah settingan web server apachenya).
artikel yang bermanfaat, trimakasih gan..
mantep,, kumplitt,,,,jozzz
Artikel mantap sesuai kebutuhan anak ilkom
Terimakasih infonya ..
Makasih gan bermanfaat banget
Makasih gan ilmunya bermanfaat bgt
kalau cara menginput dua code javascript sekaligus dengan satu tombol gimana y gan
Tinggal tambah saja kode programnya saja gan. Ini akan semakin jelas jika sudah paham tentang konsep event dan function di JavaScript.
terima kasih bang buat ilmunya, semoga berkah. good job!!
Amiin, semoga bisa bermanfaat :)
Tpi koq aku udah coba memasukan yang src="" gk bisa ya knpa ya mohon bantuannya newbie soalnya
Banyak kemungkinannya gan, bisa jadi kode JavaScriptnya ada yang salah (kurang 1 karakter misalnya), file JavaScriptnya tidak ditemukan, dll.
Tapi gan ane udah cek tuh tulisan udah bisa dan lengkap .. Terus file nya juga pas bnget di bawahnya knpa ya apa mungkin .js bisanya di lihat di pc
Buatnya g di PC y gan? Kalau di tablet / smartphone saya g rekomendasikan. Selain lebih ribet, bisa jadi ada kode program yang g jalan…
Ohh gitu ya gan .. Jadi bisa nya di pc ya biar jalan
gan gunanya yang di baris 3 itu apa ?
pas saya tes hapus gak ngaruh juga .
Yang kode ini ya?
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Itu tah meta charset, gunanya untuk menegaskan tampilan character set dari sebuah dokument HTML. Kalau di hapus memang g ada perubahan apa2. Tapi sebaiknya tetap ditulis, penjelasannya bisa kesini: https://www.duniailkom.com/tutorial-belajar-html5-pengertian-meta-tag-charset-utf-8-pada-html5/
Alamat dari file javascript bisa berupa alamat relatif seperti contoh diatas, atau bisa juga alamat absolut seperti www.duniailkom.com/kode_javascript.js. Aturan penulisan alamat ini sama seperti atribut scr HTML lainnya. Perbedaan antara alamat relatif dan absolut telah dibahas pada Tutorial HTML cara membuat link HTML.
"Aturan penulisan alamat ini sama seperti atribut scr HTML lainnya"…
mungkin yang dimaksud adalah "Aturan penulisan alamat ini sama seperti atribut src HTML lainnya"..
scr menjadi src..
begitu kurang lebih mas..???
Terimakasih koreksinya mas… mungkin lagi g konsen nih sewaktu buat artikelnya, hehe… Segera diperbaiki :)
Pas buat q yg baru pemula
Tapi kalo terlalu banyak kode java script di halaman blog, jadi blog dibuka agak lama loading ya bos…?
Tergantung seberapa banyak kodenya. Kalau masih ratusan / ribuan baris g ada masalah. Web2 aplikasi seperti gmail, google doc, dropbox itu isinya full javascript semua. Malah ukuran 1 gambar background bisa mencapai 500 kB, jauh lebih besar dibandingkan rata2 ukuran file JavaScript.
Gan kalau semupama saya ingin kode adsense bisa dipanggil dengan meletakkan kode
<–ads1–> <–ads2–>
Caranya gimana?
Model Shortcut gitu
mohon solusinnya
Cukup susah kalau mau buat sendiri dari nol. Jika menggunakan blogspot, kayaknya g bisa karena kita tidak punya akses ke bahasa pemrograman server di blogspot. Kalau di WordPress self-hosting tinggal pasang plugin saja seperti quick adsense.
Gan biar blog lebih ringan ada gak satu aja javascript dalam template tapi bisa jalanin beberapa script keluar? soalnya ada sugest dari gtmetrix kayak gitu katanya biar naikin Y slow blog. Bisa gak ya gan?
Salam blogger! Kamarsemut….
Yup bisa, terutama kalau websitenya kita yang buat sendiri.
Masalahnya jika menggunakan CMS seperti WordPress atau Blogger yang bikin banyak script JS itu adalah plugin atau fitur tambahan dari pihak ketiga.
kalau menggunakan amp site agar kode javascript bisa di konversi ke json bagaimana ya admin?
Mohon maaf nih, saya kurang paham dengan pertanyaannya. Setahu saya amp site itu tidak ada hubungannya dengan javascript dan json.
Siang mas andre, sepertinya saya butuh buku e-book buatan mas andre, tapi saya ingin tanya2 terlebih dahulu. Ada yang bisa saya hubungi?
Silahkan, bisa kontak via email ke duniailkom@gmail.com atau WA ke 083180285808.