4 Cara Untuk Menyisipkan Kode Javascript ke dalam HTML

Sebelum Anda menulis dan memasukkan kode Javascript ke dalam HTML, sebaiknya Anda mengenal terlebih dahulu tentang Html. Pengetahuan dasar Tentang Html perlu untuk dipahami karena javascript ditulis dan disisipkan ke dalam Html.

Daftar isi

1. Event Handler

Kontroller seperti mouse dan keyboard pada komputer sangat mempengaruhi aksi yang akan muncul pada halaman web. Anda bisa membuat program javascript yang dapat menampilkan dialog pada halaman web sepert popup, dan lain sebagainya.

Misal, ketika tombol kiri mouse diklik, maka akan muncul popup atau dialog pada halaman web. Nah, Event Handler di javascript berfungsi untuk mengatur penggunaan kontroller tersebut.

Event Handler dalam javascript merupakan bagian dari pemrograman yang digunakan untuk menghandel sebuah event dalam suatu halaman web. Event adalah sesuatu yang terjadi ketika user melakukan aksi seperti mengklik tombol mouse pada halaman web. berikut contoh kodenya.

contoh kode/program/sintaks javascript
<body>
    <h3> Silahkan Klik Tombol dibawah ini ! </h3>
    <button onclick="alert('Halo, Nama Saya Fizi.');"> Klik Saya </button>
</body>

2. Url pada Elemen Anchor

Elemen Anchor atau Tag <a> pada Html memiliki salah satu attribute yang bernama 'href'. Pada umumnya Attribute href tersebut berisi alamat URL, karena berfungsi untuk membuat link. Lalu, apa hubungannya Tag tersebut dengan javascript?

Javascript memiliki sebuah konsep yaitu 'protokol javascript' dimana konsep tersebut bekerja dengan cara merubah alamat url atau link menjadi kode javascript. jadi, alamat url pada Tag <a> bisa Anda rubah menjadi kode javascript. berikut contoh kodenya.

contoh kode/program/sintaks javascript
<body>
    <h3> Silahkan Klik Tombol dibawah ini ! </h3>
    <a href="javascript:alert('Halo, Nama Saya Fizi.');">Klik Saya</a>
</body>

3. Elemen Script

Elemen Script atau Tag <script> pada Html digunakan untuk menampung Script pada sisi client, artinya Anda bisa menulis dan memasukkan kode javascript didalam Tag <script> tersebut. Cara ini juga disebut dengan memasukkan kode javascript secara internal.

Tag <script> yang berisi kode javascript bisa anda masukkan pada elemen head, elemen body, atau di akhir html setelah elemen body. berikut contoh kodenya.

contoh kode/program/sintaks javascript
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh menggunakan elemen script </title>
        <script> alert("Selamat Datang"); </script>
    </head>

        <body>
            <script>
                document.write("Teks ini ditampilkan dengan kode Javascript");
            </script>
        </body>

</html>

dari contoh kode diatas bisa dilihat ada 2 cara untuk memasukkan javascript kedalam html, yang pertama adalah Tag <script> yang diletakkan didalam elemen head, dan yang kedua yaitu Tag <script> yang diletakkan didalam elemen body.

4. File Eksternal

Metode yang terakhir ini, kode javascript tidak ditulis secara langsung pada dokumen Html. Tetapi, kode javascript ditulis dan disimpan pada file sendiri secara terpisah dari dokumen Html. file yang digunakan untuk menyimpan kode javascript harus berekstensi .js, misal nama file adalah 'file.js'.

file.js yang berisi kode javascript tersebut kemudian dipanggil dengan menggunakan Elemen Script sengan attribute src. contoh <script src="file.js" />. Intinya anda menyiapkan dua buah file, file pertma adalah file yang berisi kode javascript dan yang kedua adalah file Html yang digunakan untuk memanggil file javascript.

berikut cara menggabungkan kedua file html dan javascript, Pertama tulis ulang atau copy paste kode javascript sederhana ini "alert("Halo Indonesia, Tekan 'Ok' untuk melanjutkan!");" kemudian simpan dengan nama 'file.js'.

Setelah anda menulis dan menyimpan kode sederhana diatas pada 'file.js'. selanjutnya, panggil file yang berisi kode javascript tersebut pada sebuah dokumen Html. dan berikut isi dari dokumen Html tersebut.

contoh kode/program/sintaks javascript
<!DOCTYPE html>
<html>

    <head>
        <title> Contoh menggunakan elemen script </title>
        <script src="file.js" />
    </head>

    <body>
        ...isi dokumen html...
    </body>

</html>