Kali ini kami menulis tutorial yang berisi tentang cara membuat JavaScript di HTML. Pertama kita akan membahas pengertian JavaScript, dan setelah itu kita akan fokus pada berbagai cara memasukkan JavaScript ke dalam HTML
Dalam HTML, Anda dapat menampilkan konten statis, seperti gambar. Namun belakangan ini, konten statis tidak begitu populer lagi. Sebagian besar konten saat ini sangat interaktif dan berisi tayangan slide, formulir, dan menu dengan tampilan yang menarik
Konten-konten ini memberi kesempatan kepada pengguna untuk lebih ekspresif dalam mengelola dan mengembangkan situs web mereka. Jika ingin menampilkan konten seperti itu, maka salah satu cara yang bisa dilakukan adalah script bahasa pemrograman dan JavaScript yang paling populer diantara mereka.
Kehadiran JavaScript memungkinkan pengembang untuk membuat situs web yang dapat berinteraksi dengan pengguna dan sebaliknya. Meskipun ada banyak bahasa pemrograman yang bisa dipilih, tidak ada yang sepopuler JavaScript. Untuk memaksimalkan potensi dan keunggulannya, JavaScript harus digunakan bersama dengan HTML
Unduh Lembar Cheat HTML
Keuntungan JavaScript
Pada awalnya, JavaScript dikenal sebagai LiveScript. Seiring dengan perkembangan bahasa, maka oleh Netscape, LiveScript diubah menjadi JavaScript. JavaScript pertama kali muncul pada tahun 1995 di Netscape 2. 0. Berikut adalah beberapa keuntungan menggunakan JavaScript
Minimalkan interaksi server
Salah satu cara terbaik untuk mengoptimalkan kinerja dan kecepatan situs web adalah dengan mengurangi komunikasi ke server. Dalam hal ini, JavaScript memvalidasi input pengguna di sisi klien. Skrip ini hanya akan mengirimkan permintaan ke server setelah melakukan validasi awal. Akibatnya, penggunaan sumber daya dan jumlah permintaan ke server akan berkurang secara signifikan
Antarmuka yang lengkap dan mudah digunakan
Dengan menggunakan JavaScript, Anda dapat membuat antarmuka sisi klien yang interaktif, misalnya menambahkan penggeser, tayangan slide, efek mouse roll-over, fitur drag-and-drop, dll.
Umpan balik cepat untuk pengguna
Dengan menggunakan JavaScript, pengguna akan dengan cepat mendapatkan umpan balik. Misalkan ada user yang sudah mengisi form dan ada satu kolom yang belum terisi atau kosong. Tanpa validasi JavaScript, pengguna tidak akan sadar jika ada kolom yang belum diisi hingga halaman akhirnya dimuat ulang. Dengan JavaScript, pengguna tidak perlu menunggu karena akan langsung diberikan peringatan
Proses debug mudah
JavaScript adalah bahasa yang ditafsirkan, artinya kode tertulis ditafsirkan baris demi baris. Saat muncul error, Anda akan langsung melihat nomor baris tempat terjadinya error
Cara Membuat JavaScript di HTML
Setelah membahas kelebihan yang ditawarkan JavaScript, saatnya mempelajari lebih lanjut tentang cara menyematkan JavaScript ke dalam HTML. Berikut dua cara yang bisa Anda lakukan
Cara membuat JavaScript di HTML secara langsung
Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan:
- di antara tag
- di antara
Loading akan berbeda tergantung pada letak atau lokasi di mana Anda menambahkan kode JavaScript ke file HTML. Anda bisa mencobanya dengan menambahkan kode tersebut ke section sehingga kode yang dimaksudkan terpisah dari konten file HTML Anda. Hanya saja, kecepatan loading akan meningkat, dalam hal ini konten webiste juga akan terload lebih cepat, jika Anda memasukkan kode ke dan setelah itu JavaScript akan di-parse. Sebagai contoh, file HTML berikut ini akan menampilkan waktu saat ini:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script>JAVASCRIPT IS USUALLY PLACED HERE</script> <title>Time right now is: </title> </head> <body> <script>JAVASCRIPT CAN ALSO GO HERE</script> </body> </html>
Kode yang ditulis di atas tidak menyertakan JavaScript sehingga waktu saat ini tidak dapat ditampilkan. Tambahkan kode di bawah ini agar waktu dapat ditampilkan dengan benar dan akurat
var time = new Date(); console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());_Kode tersebut di-insert di antara tag dan dan diletakkan di bagian depan kode HTML agar setiap kali page loading, alert akan muncul untuk memberi tahu user tentang waktu saat ini. Berikut tampilan file HTML setelah kode ditambahkan:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Time right now is: </title> <script> var time = new Date(); console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds()); </script> </head> <body> </body> </html>Apabila Anda ingin menampilkan waktu di antara badan halaman, maka Anda harus insert script di antara tag halaman HTML. Berikut tampilan kode setelah script ditambahkan:
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Time right now is: </title> </head> <body> <script> let d = new Date(); document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() "</h1>" </script> </body> </html>Inilah yang terlihat pada akhirnya
Bagaimana cara menambahkan kode JavaScript ke file terpisah
Terkadang Anda mengalami kesulitan saat membuat JavaScript langsung di HTML. Ini karena beberapa skrip JS harus digunakan di berbagai halaman. Oleh karena itu, langkah terbaik adalah menambahkan kode JavaScript ke file terpisah. Cara terbaik untuk membuat JavaScript dalam HTML adalah dengan mengimpor file eksternal. File ini direferensikan dari dalam dokumen HTML, sama seperti saat Anda mereferensikan dokumen CSS. Beberapa keuntungan menambahkan kode JS ke file terpisah adalah:
- Ketika kode HTML dan kode JavaScript dipisahkan, maka segala sesuatu yang terkait lebih mudah untuk diandalkan dan digunakan
- Keterbacaan dan pemeliharaan kode akan lebih mudah
- File JavaScript yang di-cache meningkatkan kinerja situs web secara keseluruhan dengan mengurangi waktu yang diperlukan untuk memuat halaman
Sekarang kita mereferensikan file JavaScript dalam HTML, seperti ini
<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Time right now:</title> </head> <body> </body> <script src="js/myscript.js"></script> </html>_Isi dari file myscript. js akan terlihat seperti ini
let d = new Date(); document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"Catatan. Anggap saja file myscript. js disimpan di direktori yang sama dengan file HTML
Contoh JavaScript untuk memvalidasi alamat email
JavaScript mendukung aplikasi dengan memvalidasi input pengguna di sisi klien. Salah satu input pengguna terpenting yang memerlukan validasi adalah alamat email. Fungsi JavaScript berikut akan membantu Anda memvalidasi alamat email yang telah dimasukkan sebelum mengirimkannya ke server
function validateEmailAddress(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } function validate() { $("#result").text(""); var emailaddress = $("#email").val(); if (validateEmailAddress(emailaddress)) { $("#result").text(emailaddress + " is valid :)"); $("#result").css("color", "green"); } else { $("#result").text(emailaddress + " is not correct, please retry:("); $("#result").css("color", "red"); } return false; } $("#validate").bind("click", validate);_Untuk melampirkan fungsi ini ke formulir input, Anda dapat menggunakan kode berikut
<form> <p>Enter an email address:</p> <input id='email'> <button type='submit' id='validate'>Validate!</button> </form> <h2 id='result'></h2>Di bawah ini adalah hasil tampilan yang akan Anda dapatkan setelah menggabungkan semuanya menjadi file HTML
Jika validasi salah, maka tampilan akan berbeda
Sekarang Anda tahu cara membuat JavaScript dalam HTML dengan beberapa contoh dasar
Situs web anti-lambat ekstra cepat. Dapatkan domain gratis dengan langganan hosting web 1 tahun. Pilih Hosting Web
Kesimpulan
Pada artikel ini, kami menulis dua cara untuk memasukkan JavaScript ke dalam HTML. Jika Anda sudah menguasai kedua metode tersebut, maka Anda bisa melakukan apa saja dengan kedua bahasa pemrograman tersebut. JavaScript dapat dipadukan dengan HTML untuk mendukung aplikasi modern yang intuitif, interaktif, dan ramah pengguna sehingga Anda dapat dengan mudah mengembangkan situs web. Selain itu, dengan melakukan validasi sisi klien sederhana, lalu lintas ke server akan diturunkan dan kinerja situs web secara keseluruhan dapat ditingkatkan
Penulis
Ariata C
Ariata suka menulis dan menerjemahkan, dan saat ini bekerja sebagai penerjemah di Hostinger Indonesia. Melalui artikel dan tutorial yang dipublikasikan di blog Hostinger, Ariata ingin berbagi ilmu tentang website, WordPress, dan hal-hal terkait hosting lainnya kepada para pembaca.