Basic Programming

Cara Membuat JavaScript di HTML Sederhana

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.

Apa Itu JavaScript?

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.

Baca Juga: Apa Itu React Native?

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.

Cara 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.

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.

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.

Baca juga: 19 Editor HTML Terbaik yang Bisa Anda Coba!

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.

Ket: Hasil JavaScript Dengan File Terpisah

Keuntungan Membuat File JavaScript Terpisah

  • 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.
  • Lebih Mudah Dibaca: File JavaScript yang terpisah memudahkan developer saat membaca sintaks daripada satu file yang berisi campuran bahasa pemrograman.
  • 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.

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.

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 :)

Share
Published by
Yasin K

Recent Posts

10 Website Buat CV Online Gratis, Bikin HR Jatuh Hati! [Bonus Tips]

Sudah sebar Curriculum Vitae (CV) ke banyak perusahaan, tapi tak pernah lolos? Jangan minder dulu. Belum tentu karena pengalaman Anda…

2 days ago

Cara Upload File Nuxt.js di Hosting

Nuxt.js adalah framework yang kian populer untuk membuat aplikasi website. Salah satu kelebihan framework ini adalah SEO Friendly.  Anda sedang…

3 days ago

Produk & Fitur Update September 2021

Setiap harinya kami terus melakukan perbaikan kualitas produk & layanan demi kemudahan para pelanggan Niagahoster. Nah, apa saja update selama…

4 days ago

Cara Membuat Website dengan PHP

Anda ingin membuat website sendiri, tapi bingung mulai dari mana? Tenang, ada cara membuat website dengan PHP dari awal yang…

4 days ago

Denny Triana: A Day in the Life of Engineering Manager

Belum banyak orang tahu kalau di balik website yang hebat, ada peran web engineer.  Web engineer lah yang bertanggungjawab atas…

5 days ago

Indikator Kepuasan Pelanggan: Pengertian dan Cara Mengukurnya

Kepuasan pelanggan bukan hanya dari produk, lho! Total ada enam indikator kepuasan pelanggan yang harus Anda ketahui. Yuk, simak selengkapnya.

6 days ago