Javascript #3 : Javascript di HTML ~ This Is About ME !!

Bagaimana Cara Menulis Kode Javascript di HTML?
Pada artikel sebelumnya kita sudah menulis javascript di dalam HTML. Cara tersebut merupakan cara penulisan embeded (ditempel).
Masih ada beberapa cara lagi yang perlu kita ketahui:

Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang tadi)
Inline (kode Javascript ditulis pada atribut HTML)
Eksternal (Kode Javascript ditulis terpisah dengan file HTML)

1. Penulisan Kode javascript dengan Embed

Pada cara ini, kita menggunakan tag <script> untuk menempelkan (embed) kode Javascript pada HTML. Tag ini dapat ditulis di dalam tag <head> dan <body>.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>

2. Penulisan Kode javascript Inline

Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini biasanya digunakan untuk memanggil suatu fungsi pada event tertentu.

Misal: saat link diklik.

Contoh:

<a href="#" onclick="alert('Yey!')">Klik aku!</a>

atau bisa juga seperti ini:

<a href="javascript:alert('Yey!')">Klik aku!</a>

Hasilnya:

Pada atribut onclick dan href kita menuliskan fungsi javascript di sana. Atribut onclick merupakan atribut HTML untuk menyatakan fungsi yang akan dieksekusi saat elemen itu diklik. Pada contoh di atas, kita menjalankan fungsi alert(). Fungsi ini merupakan fungsi untuk menampilkan dialog. Lalu pada atribut href, kita juga memanggil fungsi alert() dengan didahului javascript:. Atribut href sebenarnya digunakan untuk mengisi alamat link atau URL. Karena kita ingin memanggil kode javascript di sana, maka alamat link tersebut kita ubah menjadi javascript: lalu diikuti dengan fungsi yang akan dipanggil.

3. Penulisan Kode javascript Eksternal

Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file HTML.

Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—dengan cara ini—dapat lebih mudah mengelola kode project.

Kita buat dua file, yaitu: file HTML dan Javascript.

belajar-js/
├── kode-program.js
└── index.html

Isi dari file kode-program.js:

alert("Hello, ini adalah program JS eksternal!");

Isi dari file index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>

        <!-- Menyisipkan kode js eksternal -->
        <script src="kode-program.js"></script>
    </body>
</html>

Hasilnya:

Bagaimana kalau file javascriptnya berada di folder yang berbeda?

Contoh:

Misal kita punya struktur folder seperti ini:

belajar-js/
├── js/
|   └── kode-program.js
└── index.html

Maka untuk menyisipkan file kode-program.js ke dalam HTML, kita bisa menuliskannya seperti ini:

<script src="js/kode-program.js"></script>

Karena file kode-program.js berada di dalam direktori js.

Kita juga bisa menyisipkan javascript yang ada di internet dengan memberikan alamat URL lengkapnya.

Contoh:

<script src="https://www.radosimarmata.com/js/kode.js"></script>

Sabtu, 20 Februari 2021