Menambahkan javascript pada html

Question

Halo Dunia! Kembali lagi di Wempy Tech Blog. Pada postingan kali ini saya akan melanjutkan Seri Tutorial Javascript, yaitu tentang bagaimana cara menambahkan kode Javascript di HTML.

Table of Contents Show

Bagaimana cara menulis kode JavaScript di HTML?
Dalam elemen HTML apa kita meletakkan JavaScript?
Bagaimana cara menempatkan JavaScript secara internal?
Teknik apa yang digunakan untuk menyisipkan JavaScript dengan metode internal?

Di seri sebelumnya saya telah memperkenalkan apa itu javascript, nah disana juga sudah disinggung sedikit mengenai cara menambahkan kode Javascript di HTML.

Terdapat 4 cara yang dapat digunakan untuk menambahkan kode Javascript di HTML. Dari keempat cara tersebut akan saya jelaskan satu-persatu disini.

Oleh karena itu simak postingan ini baik-baik ya! Yuk langsung saja kita mulai....

Ini merupakan cara yang paling banyak digunakan. Penulisan kode Javascript secara internal adalah dengan menggunakan elemen/tag <script>.

Elemen <script> ini dapat kalian tulis di bagian dalam elemen <head> maupun <body>.

Contoh penggunaan :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Javascript</title>
    <script>
        console.log("Hello World!");
    </script>
</head>
<body>
    
    <script>
        document.write("Selamat Datang di Wempy Tech Blog")
    </script>
</body>
</html>

Jika kalian membukanya di browser lalu membuka Console, maka hasilnya seperti ini :

Pada contoh diatas telah dicontohkan untuk menulis kode Javascript di dalam elemen <head> dan <body>.

Lantas, manakah yang lebih baik? ditulis di dalam elemen <head> atau <body>?

Kalian memang dapat melakukan kedua cara tersebut, namun ada yang berpendapat bahwa "menulis Javascript di bagian akhir elemen <body> akan meningkatkan kecepatan website dalam menampilkan kontennya."

Karena, jika kode Javascript ditulis di bagian elemen <head>, kode tersebut akan dijalankan terlebih dahulu sebelum konten website ditampilkan. Sehingga hal tersebut akan membuat halaman website menjadi lebih lambat.

Jadi, menulis kode Javascript di bagian akhir elemen <body> adalah cara yang paling disarankan.

Cara yang kedua adalah dengan menuliskan kode Javascript secara terpisah dengan file HTML.

Kalian dapat menggunakan cara ini jika kalian tidak ingin mencampur kode Javascript dengan HTML di dalam satu file.

Yang harus kalian lakukan pertama kali adalah dengan membuat file berekstensi .js. Nah, pada file ini kita isi dengan kode Javascript.

Sebagai contoh, saya akan membuat file bernama script.js yang berisi kode Javascript dan index.html berisi kode HTML.

Lalu, kita isi file script.js dengan kode berikut

document.write("Ini adalah teks yang berasal dari file eksternal Javascript");
console.log("Wempy Tech Blog");

dan isi juga file index.html dengan kode berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Javascript</title>
</head>
<body>
    
    <script src="./script.js"></script>
</body>
</html>

Berikut Hasilnya :

Coba kalian perhatikan contoh di atas, pada file HTML kita tetap menggunakan elemen <script>. Akan tetapi elemen ini tidak kita isi dengan kode Javascript. Melainkan kita menggunakan atribut src untuk memanggil kode Javascript yang ada di file script.js.

Pada contoh di atas kita meletakkan file HTML dan file Javascript di dalam folder yang sama. Lalu, bagaimana jika kita meletakkan file HTML di folder yang berbeda ataupun di dalam subfolder?

Untuk file Javascript yang berada di folder yang berbeda, kita menuliskannya menurut alamat path foldernya. Semisal file script.js terletak di dalam folder bernama /js. Maka pemanggilan file Javsacript nya menjadi seperti ini :

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

Selanjutnya jika kita ingin menggunakan kode Javascript dari Internet, kita tinggal menuliskan alamat URL dari file Javascript tersebut. Misalnya :

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Yang selanjutnya adalah menulis kode Javascript secara Inline. Caranya adalah dengan menulis kode Javascript di dalam atribut event.

Berikut adalah contoh penggunaannya :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Javascript</title>
</head>
<body>
    <p>Silahkan klik tombol di bawah ini :</p>
    <button onclick="alert('Halo Dunia! Selamat datang di Wempy Tech Blog')">Klik di sini</button>
</body>
</html>

Hasilnya :

Jika kita menekan tombolnya maka kode Javascript di dalam atribut onclick akan dieksekusi dan akan keluar pop up alert seperti di bawah ini :

Apakah Javascript hanya bisa ditulis di atribut onclick saja?

Jawabannya adalah tidak, karena atribut onclick adalah salah satu atribut event yang ada di HTML. Kode Javascript dapat ditulis di semua atribut event.

Berikut adalah daftar atribut event :

source : https://www.w3schools.com/tags/ref_eventattributes.asp

Jika kalian ingin melihat semua atribut event silahkan kunjungi HTML Event Attributes.

Penulisan atribut event di HTML biasanya diawali dengan on, semisal untuk event click maka nama atributnya adalah onclick, lalu untuk event key press maka nama atributnya adalah onkeypress, dll.

Menurut saya ini merupakan cara yang aneh dalam penulisan kode Javascript. Karena cara ini jarang bahkan hampir tidak ada yang menggunakannya.

Walaupun begitu, cara ini tetap dapat digunakan dan berjalan dengan normal.

Cara ini bisa digunakan pada elemen <a>, lalu menuliskan kodenya di atribut href.

Contoh penggunaan :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutorial Javascript</title>
</head>
<body>
    <p>Silahkan klik link di bawah ini :</p>
    <a href="javascript:alert('Hello World! This is the power of Javascript')">Klik di sini</a>
</body>
</html>

Dan berikut adalah hasilnya :

Jadi, ketika link <a> ini diklik, maka dia akan membuka URL javascript: dan menjalankan kode Javascript yang ada di dalamnya.

Hal ini mirip seperti event onclick yang telah kita bahas di atas tadi.

Bagaimana, cukup mudah bukan? Itulah tadi 4 cara menulis kode Javascript di HTML, semoga kalian dapat memahaminya dengan baik.

Baiklah cukup sekian postingan kali ini, akan saya lanjutkan untuk seri tutorial Javascript di postingan berikutnya. Oleh karena itu stay tuned terus di Wempy Tech Blog. Jangan lupa share postingan ini ke teman-teman yang lainnya jika dirasa bermanfaat. Saya ucapkan Terima Kasih dan Salam Hello World!

Programming
Web Development
JavaScript

Bagaimana cara menulis kode JavaScript di HTML?

Cara membuat JavaScript di HTML secara langsung Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head> di antara <body>

Dalam elemen HTML apa kita meletakkan JavaScript?

Pada dasarnya, kita bebas ingin meletakkan kode JavaScript di bagian mana saja, selama berada di dalam tag <script>.

Bagaimana cara menempatkan JavaScript secara internal?

Cara pertama yang bisa dilakukan untuk memasukkan kode JavaScript ke dalam halaman HTML adalah menggunakan tag <script> secara internal. Maksud internal di sini adalah kode JavaScript ditulis pada halaman yang sama dengan HTML.