Tutorial Javascript #2 : Menulis Kode JavaScript pada HTML

Agus Suratna

5 years ago

Untuk mempelajari materi bagian ke-2 kali ini, sebaiknya bagi yang belum membaca bagian yang ke-1, untuk membaca dahulu bagian ke-1 pada link berikut ini : https://agussuratna.net/2020/10/20/tutorial-javascript-pengenalan-javascript/ .

Peralatan yang harus disiapkan untuk Belajar Javascript :

Web Browser (Google Chrome, Firefox, Opera, dll)
Teks Editor (rekomendasi: VS Code)

Daftar Isi

Toggle

Console JavaScript

Console Javascript dapat kita buka melalui di browser yang kita gunakan saat membuka tampilan web apapun, pada contoh ini browser yang digunkan Mozila Firefox. Untuk membuka consolenya di browser klik kanan disembarang tempat ->Inspect Element -> Console.

Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan hasilnya akan langsung ditampilkan. Misalnya kita akan menuliskan kode seperti dibawah, sebelumnya kita bersihkan dulu consolenya dengan mengklik Clear the web Console output (gambar tong sampah sebelah kiri atas).

console.log("selamat Datang");
alert("Selamat Belajar JavaScript");

Maka hasilnya :

Setelah mencoba console Javascript, maka dapat kita simpulkan:

Console bisa digunakan untuk mengujicoba fungsi atau kode Javascript;
Console dapat kita gunakan untuk melihat pesan error saat debugging program.

Membuat Program Javascript Pertama

Silahkan buka teks editor, kemudian buat file baru bernama belajarjs1.html dan isi dengan kode berikut:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Hello World Javascript</title> 
    </head> 
    
    <body> 
        <script> 
            console.log("Saya belajar Javascript"); 
            document.write("Hello World!"); 
        </script> 
    </body> 
</html>

Simpan file tersebut dengan nama belajarjs1.html, kemudian buka file tersebut dengan web browser.

Maka hasilnya:

Pada browser yang ditampilkan hanya document.write("Hello World!"), sedangkan console.log("Saya belajar Javascript"); tidak ditampilkan, hal ini karena perintah atau fungsi console.log() akan menampilkan pesan ke dalam console javascript. Sedangkan perintah document.write() berfungsi untuk menulis ke dokumen HTML, maka dia akan ditampilkan kesana.

Sekarang coba saja buka console javascript, maka kita akan melihat pesan "Saya belajar Javascript":

Cara Menulis Kode Javascript di HTML

Pada contoh di atas, kita sudah menulis kode javascript di dalam HTML, cara tersebut merupakan cara penulisan embeded (ditempel).

Cara Menulis Kode Javascript di HTML :

Embed (Kode Javascript ditempel langsung pada HTML)
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</title> 
        <script> 
            // ini adalah penulisan kode javascript di dalam tag <head> 
            console.log("Hello JS dari Head"); 
        </script> 
    </head> 
    
    <body> 
        <p>Tutorial Belajar Javascript</p> 
        <script> 
            // ini adalah penulisan kode javascript di dalam tag <body> 
            console.log("Hello JS dari body"); 
        </script> 
    </body> 
</html>

Pada sintak di atas ada penulisan JavaScript di dalam <head> dan <body>. Banyak yang merekomendasikan menuliskannya di dalam <body>, karena akan membuat web di-load lebih cepat.

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('Horeeee')">Klik dong</a>

atau bisa juga seperti ini:

<a href="javascript:alert('Horeeee')">Klik dong</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, karenadengan cara ini kita dapat lebih mudah mengelola kode project.

Mari kita lihat contohnya…

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

belajarjs/
├── kodejavascript.js
└── index.html

Isi dari file kodejavascript.js:

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

Isi dari file index.html:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Belajar Javascript</title> 
    </head> 
    
    <body> 
        <p>Tutorial Belajar Javascript</p> 
        <!-- Menyisipkan kode js eksternal --> 
        <script src="kodejavascript.js"></script> 
    </body> 
</html>

Hasilnya:

Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML. Lalu, pada kode HTML kita menyisipkannya dengan memberikan atribut src pada tag <script>. Maka, apapun yang ada di dalam file kodejavascript.js akan dapat dibaca dari file index.html.

Bagaimana kalau file javascriptnya berada di folder yang berbeda? Kita bisa menuliskan alamat lengkap foldernya.

Contoh:

Misal kita punya struktur folder seperti ini:

belajarjs/
├── js/
|   └── kodejavascript.js └── index.html

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

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

Karena file kodejavascript.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.agussuratna.net/js/kode.js"></script>

Referensi :

https://www.petanikode.com/javascript-dasar/