Begini Fungsi dan Cara Kerja JavaScript Pada HTML

Begini Fungsi dan Cara Kerja JavaScript Pada HTML

Bagi para programmer, data analyst, maupun web developer pasti sudah tidak asing lagi dengan bahasa pemrograman yang satu ini, yaitu JavaScript. Banyak perusahaan-perusahaan raksasa digital global yang menggunakan bahasa pemrograman ini.

JavaScript Pada HTML

Untuk membuat sebuah aplikasi online, game online, dan membuat suatu website agar lebih menarik, mempelajari JavaScript adalah wajib.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat konten-konten dinamis pada halaman-halaman web maupun aplikasi online. Dinamis yang seperti apa? Maksudnya adalah konten yang dapat berubah sewaktu-waktu tanpa harus melakukan reload secara manual.

Bahasa pemrograman ini biasa dikolaborasikan dengan HTML (Hypertext Markup Language) untuk membentuk, mengembangkan, mengelola suatu website atau aplikasi online.

Apa Itu HTML?

HTML adalah gabungan dari dua istilah, yaitu Hypertext dan Markup Language. Hypertext adalah dokumen-dokumen berisi tautan yang memungkinkan pengguna untuk terhubung pada satu halaman ke halaman lain dalam suatu web browser.

Sementara, Markup Language adalah bahasa komputer berisi sekumpulan kode untuk mengatur struktur dan juga menyajikan informasi pada suatu aplikasi maupun website.

Apa Saja Fungsi dari JavaScript?

Nah, dari penjelasan di atas, sudah bisa ditarik kesimpulan bahwa JavaScript dan HTML berkolaborasi untuk membuat website menjadi lebih menarik karena konten-konten yang dapat bergerak secara real time dan tanpa perlu reload secara manual.

Selain website, bahasa pemrograman ini juga bisa digunakan untuk membuat aplikasi mobile, seperti yang banyak muncul sekarang ini untuk Android maupun iOS serta mengembangkan game berbasis browser.

Bagaimana Cara Kerja JavaScript Pada HTML?

Sudah tahu bukan apa saja fungsi dari JavaScript atau yang biasa disingkat JS untuk membuat aplikasi atau website? Berikut adalah cara kerja JS pada HTML.

Inline

Cara yang pertama ini adalah menyisipkan kode JS secara langsung pada HTML. Berikut adalah langkah pembuatannya. Pastikan untuk memiliki code editor untuk praktik, seperti Visual Studio Code, Sublime Text, dan juga Notepad++.
  • Buat file baru dalam workspace
  • Tulislah html:5 untuk menampilkan struktur dasar dari HTML
  • Tulis <title>Javascript</title>
  • Buatlah satu paragraf di bawah tulisan </head> dan <body>. Paragraf ini bisa ditambahkan dengan ornamen lain, seperti button onclick dengan menambah kode JS di dalamnya sesuai dengan kebutuhan
  • Simpan dan cobalah untuk menjalankanya pada browser. Pastikan Anda memiliki code editor.

Internal

Cara kerja internal adalah pengembang dapat menempatkan kode JS di dalam tag<head> atau tag<body>. Hal yang disarankan pada cara kedua ini adalah menempatkan kode JavaScript di atas </body>dengan tujuan agar semua kode HTML diproses terlebih dahulu baru kode JS oleh web browser.
  • Pada tag <body> atau <head> tambahkan tag<script>,</script>
  • Buatlah satu function di antara tag tersebut untuk memunculkan document.getElementById dan inner HTML. Lalu, isi sesuai dengan kebutuhan.
  • Tulis tag <button onclick>,</button? yang memiliki fungsi untuk memanggil function yang dituliskan sebelumnya.
  • Simpan dan coba kembali pada web browser Anda

Eksternal

Menempatkan kode JS pada file tersendiri berekstensi .js yang terpisah dari file HTML kemudian dihubungkan nantinya.
  • Buatlah file baru untuk kode JS sehingga terpisah dengan kode HTML
  • Pada file JS, buatlah satu function
  • Tambahkan document.getElementById dan inner HTML
  • Hubungkan File JS ini ke dalam file HTML
  • Tulis <script src=””></script> sesuai dengan nama file JS yang dibuat sebelumnya. Fungsinya adalah untuk menghubungkan kedua file yang berbeda tersebut
  • Buatlah satu button untuk memanggil function yang sudah dibuat pada file JS
  • Simpan lalu coba dalam web browser yang tersedia

Ketiga cara kerja JavaScript pada HTML di atas adalah cara yang paling umum untuk mencoba bahasa pemrograman dalam HTML. Jika hanya dibaca, cara tersebut memang terlihat cukup rumit. Oleh karena itu sebaiknya lakukan learning by doing agar langsung memahami langkah-langkah di atas.

Pada era digital di mana perubahan begitu cepat dibutuhkan suatu kedinamisan, tidak hanya pada sistem, tetapi juga manusia yang perlu beradaptasi dengan segala zaman. Seperti halnya, JavaScript yang bisa berguna untuk membuat website dan aplikasi menjadi lebih menarik sehingga mengundang perhatian dari para pengguna internet.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel