\n\n\n
Kelebihan JavaScript<\/h2>
Pada awalnya, JavaScript dikenal dengan sebutan LiveScript. Seiring dengan berkembangnya bahasa, maka oleh Netscape, LiveScript diubah ke JavaScript. Kemunculan JavaScript pertama kali pada tahun 1995 dalam Netscape 2.0. Berikut beberapa keunggulan menggunakan JavaScript:<\/p>
Meminimalkan interaksi server<\/h3>
Salah satu cara terbaik untuk mengoptimalkan performa dan kecepatan website adalah dengan mengurangi komunikasi ke server. Dalam hal ini, JavaScript memvalidasi user input di client-side. Script ini hanya akan mengirimkan permintaan ke server setelah melakukan validasi awal. Alhasil, penggunaan resource dan jumlah permintaan ke server akan menurun secara signifikan.<\/p>
Antarmuka yang lengkap dan mudah digunakan<\/h3>
Dengan menggunakan JavaScript, Anda dapat membuat antarmuka client-side yang interaktif, misalnya menabahkan slider, slideshow, efek mouse roll-over, fitur drag-and-drop, dan lain sebagainya.<\/p>
Feedback yang cepat untuk user<\/h3>
Dengan menggunakan JavaScript, user akan dengan cepat memperoleh feedback. Misalkan ada seorang pengguna yang telah mengisi formulir dan tersisa satu kolom yang belum diisi atau kosong. Tanpa adanya validasi JavaScript, pengguna tersebut tidak akan sadar jika ada kolom yang belum diisi sampai halaman akhirnya reload. Adanya JavaScript, pengguna tidak harus menunggu karena akan langsung diberi warning.<\/p>
Debugging mudah<\/h3>
JavaScript merupakan bahasa yang ditafsirkan, berarti kode yang tertulis diuraikan baris demi baris. Apabila muncul error, Anda akan langsung melihat angka baris tempat terjadinya kesalahan tersebut.<\/p>
Cara Membuat JavaScript di HTML<\/h2>
Setelah membahas kelebihan yang ditawarkan JavaScript, kini saatnya mengetahui lebih dalam tentang cara memasukkan JavaScript ke HTML. Berikut dua cara yang bisa Anda lakukan:<\/p>
Cara membuat JavaScript di HTML secara langsung<\/h3>
Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script><\/script> <\/strong>yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan:<\/p> 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 <head> <\/strong> 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 <body> <\/strong>dan setelah itu JavaScript akan di-parse. Sebagai contoh, file HTML berikut ini akan menampilkan waktu saat ini:<\/p> Kode yang tertulis di atas belum menyertakan JavaScript sehingga waktu saat ini tidak dapat ditampilkan. Tambahkan kode di bawah ini agar waktu dapat ditampilkan dengan benar dan tepat.<\/p> Kode tersebut di-insert di antara tag <script> <\/strong>dan <\/script><\/strong> 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:<\/p> Apabila Anda ingin menampilkan waktu di antara badan halaman, maka Anda harus insert script di antara tag <body> halaman HTML. Berikut tampilan kode setelah script ditambahkan:<\/p> Begini tampilan akhirnya:<\/p> Kadang-kadang Anda mengalami kesulitan saat membuat JavaScript secara langsung di HTML. Hal tersebut dikarenakan beberapa JS script harus digunakan di berbagai halaman. Karena itulah, langkah terbaiknya adalah dengan menambahkan kode JavaScript ke file terpisah. Cara terbaik untuk membuat JavaScript di HTML adalah dengan mengimport file eksternal. File ini di-reference dari dalam dokumen HTML, sama seperti ketika Anda mereferensikan dokumen CSS. Beberapa kelebihan menambahkan kode JS pada file terpisah adalah:<\/p> Sekarang kita reference file JavaScript dalam HTML, seperti ini:<\/p> Konten file myscript.js akan terlihat seperti ini:<\/p> \n\n\n \n
<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<script>JAVASCRIPT IS USUALLY PLACED HERE<\/script>\n<title>Time right now is: <\/title>\n<\/head>\n<body>\n<script>JAVASCRIPT CAN ALSO GO HERE<\/script>\n<\/body>\n<\/html><\/pre>\n<\/div>
var time = new Date();\nconsole.log(time.getHours() + \":\" + time.getMinutes() + \":\" + time.getSeconds());<\/pre>
<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Time right now is: <\/title>\n<script>\nvar time = new Date();\nconsole.log(time.getHours() + \":\" + time.getMinutes() + \":\" + time.getSeconds());\n<\/script>\n<\/head>\n<body>\n<\/body>\n<\/html><\/pre>
<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Time right now is: <\/title>\n<\/head>\n<body>\n<script>\nlet d = new Date();\ndocument.body.innerHTML = \"<h1>Time right now is: \" + d.getHours() + \":\" + d.getMinutes() + \":\" + d.getSeconds()\n\"<\/h1>\"\n<\/script>\n<\/body>\n<\/html><\/pre>
![\"Contoh](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2018\/05\/membuat-javascript-di-html-1.png\/public\")
<\/figure>\n<\/div>Cara menambahkan kode JavaScript ke file terpisah<\/h3>
\n
<!DOCTYPE html>\n<html lang=\"en-US\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Time right now:<\/title>\n<\/head>\n<body>\n<\/body>\n<script src=\"js\/myscript.js\"><\/script>\n<\/html><\/pre>
let d = new Date();\ndocument.body.innerHTML = \"<h1>Time right now is: \" + d.getHours() + \":\" + d.getMinutes() + \":\" + d.getSeconds()<\/h1>\"<\/pre>