Yasin K Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

Cara Membuat JavaScript di HTML Sederhana

3 min read

Cara Membuat JavaScript di HTML-01

Di dalam website, JavaScript biasanya digunakan untuk menghubungkan antara skrip HTML dan CSS. Jadi, pada panduan ini akan coba kita bahas bagaimana cara membuat JavaScript di HTML menggunakan beberapa metode sederhana yang semoga saja mudah untuk dipahami. Namun sebelum itu kita akan membahas sedikit mengenai apa itu JavaScript dan kelebihannya.

JavaScript adalah bahasa pemrograman yang banyak digunakan dalam pengembangan website. Salah satu kegunaannya adalah membuat website yang interaktif. Bahasa ini juga dapat membantu HTML dalam proses pengelolaan file.

Saat bekerja dengan file di dalam sebuah website, JavaScript harus dimuat dan dijalankan dengan markup HTML. Ada beberapa metode yang bisa dilakukan, yaitu menggunakan teknik inline atau file terpisah yang ketika diakses browser akan mengunduhnya terlebih dahulu pada sebuah file yang berbeda.

Konten interaktif yang dihasilkan dari kombinasi antara HTML dan JavaScript membuat tampilan lebih menarik. Pada penerapannya, konten interaktif dapat membuat pengguna tidak hanya mengaksesnya  saja, tetapi juga dapat berinteraksi dengan website.

Selain dapat dikombinasikan dengan HTML untuk menghasilkan website yang interaktif, apa kelebihan JavaScript?

Kelebihan JavaScript

Ada beberapa kelebihan JavaScript yang perlu Anda tahu.

    1. Meringankan Beban Server: JavaScript menggunakan sistem client-side. Client-side Scripting adalah bahasa pemrograman web yang pengolahan datanya dilakukan oleh komputer pengguna/pengunjung. Alhasil, penggunaan sumber daya di server akan lebih ringan.
    2. Prosedural: JavaScript dapat mencakup semua kemampuan bahasa prosedural, seperti pembulatan, pemeriksaan kondisi, looping, dan beberapa kemampuan yang dapat dijalankan di halaman web.
    3. Multi Platform: JavaScript dapat dijalankan di berbagai platform, sehingga mudah untuk diintegrasikan dan dimodifikasi.
    4. Mudah Dipelajari: JavaScript mudah untuk dipelajari karena sintaks yang digunakan mirip dengan Bahasa Inggris. Bahasa pemrograman ini menggunakan model Document Object Model (DOM) yang menyediakan banyak fungsionalitas pada berbagai objek sehingga mudah untuk dikembangkan.
    5. Mudah Melakukan Debug dan Tes: Kemudahan membaca sintaks JavaScript membuat proses debug dan tes mudah untuk dilakukan. Apabila terjadi error, akan muncul pesan masalah yang terjadi.
    6. Tidak Membutuhkan Kompilasi: JavaScript tidak membutuhkan proses kompilasi sehingga tidak memerlukan kompiler. Pada saat dibaca saat pengembangan website, bahasa pemrograman ini dikenali sebagai tag HTML.

Agar lebih mudah untuk memahami bagaimana JavaScript dan HTML bekerja bersama, berikut cara membuat JavaScript di HTML.

Cara Membuat JavaScript di HTML

Ada dua cara yang bisa dilakukan untuk membuat JavaScript di HTML; cara pertama dengan memasukkan kode JavaScript langsung ke dalam skrip HTML, cara kedua dengan membuat JavaScript di dalam file yang terpisah.

Membuat JavaScript Langsung di HTML

Penambahan kode JavaScript langsung di dalam skrip HTML biasanya dimasukkan ke dalam tag <script> </script>. Hal ini bertujuan untuk memberikan sinyal bahwa kode yang ada di dalamnya adalah kode JavaScript. Tag yang digunakan untuk memanggil JavaScript biasanya ditambahkan di antara tag <head> atau di antara tag <body>.

index.html

<!DOCTYPE html>

<html lang=”en-US”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1″>

   <title>Niagahoster</title>

</head>

<body>

</body>

</html>

Kode di atas merupakan contoh dari kode HTML yang belum mengandung baris kode JavaScript. Agar terlihat contoh bagaimana JavaScript bekerja, tambahkan baris perintah berikut ke dalam kode di atas.

var txt1 = “Niagahoster “;

txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”;

alert(txt1)

Baris kode di atas digunakan untuk menampilkan kotak dialog yang berisi teks “txt1” pada halaman browser.

Agar HTML dapat membaca script JavaScript, maka langkah yang perlu dilakukan adalah dengan menambahkan kode di atas ke dalam tag <script>. Hasilnya kurang lebih seperti ini.

index.html

<!DOCTYPE html>

<html lang=”en-US”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1″>

   <title>Niagahoster</title>

<script>

var txt1 = “Niagahoster “;

txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”;

alert(txt1)    

</script>

</head>

<body>

</body>

</html>

Anda juga dapat menyesuaikan sesuai dengan kreatifitas masing-masing. Kurang lebih hasil dari skrip di atas akan memunculkan tampilan seperti ini.

cara membuat javascript di html - hasil javascript di head (1)
Ket: Hasil Inline JavaScript dengan HTML

Struktur skrip seperti di atas sudah jarang dipakai karena terkadang baris JavaScript digunakan berulang-ulang pada beberapa file. Di bawah ini adalah contoh cara membuat JavaScript di HTML menggunakan file yang terpisah.

2. Membuat JavaScript di File Berbeda

Ada beberapa keuntungan membuat JavaScript di HTML seperti kemudahan dalam melakukan maintenance, lebih mudah dibaca, dan mempercepat page load.

Keuntungan Membuat File JavaScript Terpisah

      1. Mudah Melakukan Maintenance: Sistem yang menggunakan kode program JavaScript terpisah lebih mudah untuk dilakukan maintenance. Hal ini dikarenakan developer cukup mencari file yang ingin diubah atau dimodifikasi jika terjadi perubahan atau masalah.
      2. Lebih Mudah Dibaca: File JavaScript yang terpisah memudahkan developer saat membaca sintaks daripada satu file yang berisi campuran bahasa pemrograman.
      3. Mempercepat Page Load: Page load akan lebih cepat, dikarenakan beberapa sistem menerapkan cached pada sistemnya. Sehingga sekali file JavaScript di-cache maka itu dapat meningkatkan kecepatan page load.

Cara Membuat JavaScript dan CSS dengan File Terpisah di HTML

Supaya lebih mudah untuk memahami bagaimana cara membuat JavaScript di HTML dengan file terpisah, kita akan membuat folder untuk menyimpan file JavaScript terlebih dahulu. Strukturnya akan menjadi “root/js/script.js”. Pada script.js akan diisi dengan skrip JavaScript.

index.html
<!DOCTYPE html>

<html lang=”en-US”>

<head>

   <meta charset=”UTF-8″>

   <meta name=”viewport” content=”width=device-width, initial-scale=1″>

   <title>Niagahoster</title>

</head>

<body>

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

</body>

</html>

Sedangkan di dalam file script.js isi skripnya seperti di bawah ini.

script.js

var txt1 = “Niagahoster “;

txt1 += “Cara Membuat JavaScript di HTML – Niagahoster”;

document.body.innerHTML = “<h1>” + txt1 + “</h1>”

Pada tabel dia atas, index.html akan memanggil file “../js/script.js” untuk mengambil beberapa skripnya. Kurang lebih tampilannya akan menjadi seperti ini.

cara membuat javascript di html - file terpisah
Ket: Hasil JavaScript Dengan File Terpisah

Kesimpulan

Demikianlah cara membuat JavaScript di HTML dengan contoh sederhana. Anda dapat mengembangkan sesuai dengan kreatifitas masing-masing. Tidak hanya memudahkan dalam pengembangan website, tetapi juga memaksimalkan kinerja website.

Anda juga dapat mengembangkan website menggunakan beberapa panduan di bawah ini.

6
Yasin K Yasin K is a Technical Content Writer for Niagahoster Blog. Other words are unimportant things you will never need to know. Let the content speak for itself :)

Leave a Reply

Your email address will not be published. Required fields are marked *

1 + 11 =