Cara menggunakan contoh coding javascript

Belajar JavaScript merupakan suatu kewajiban buat calon programmer front end. Pemrograman JavaScript adalah dasar untuk belajar framework pemrograman web lainnya seperti Node.js, Angular Js, React Js, Vue.js dan lain sebagainya. Bahkan framework untuk membuat aplikasi mobile juga banyak menggunakan JavaScript seperti React Native, Apache Cordova dan lain sebagainya.

Table of Contents

• Menjalankan Contoh Coding
• Seri Tutorial Belajar JavaScript
• Kelebihan JavaScript
• Meminimalkan interaksi server
• Antarmuka yang lengkap dan mudah digunakan
• Feedback yang cepat untuk user
• Debugging mudah
• Cara Membuat JavaScript di HTML
• Cara membuat JavaScript di HTML secara langsung
• Cara menambahkan kode JavaScript ke file terpisah
• Contoh JavaScript untuk memvalidasi alamat email
• Bagaimana cara memanggil fungsi di JavaScript?
• Apa cara yang benar untuk menulis array JavaScript?
• Apakah JavaScript cocok untuk pemula?
• Console log JavaScript untuk apa?

JavaScript adalah bahasa pemrograman tingkat menengah. Untuk belajar JavaScript kita dituntut untuk mengetahui cara penulisan atau sintak pemrograman JavaScript. Selain itu kita juga harus memahami algoritma pemrograman.

Menjalankan Contoh Coding

Artikel ini adalah daftar isi dari seri tutorial belajar JavaScript yang terdiri dari beberapa artikel. Di dalam setiap artikel terdapat banyak contoh coding JavaScript. Klik tombol Jalankan Contoh untuk menjalankan contoh coding JavaScript melalui web browser.

Kita juga perlu melihat source code dari contoh coding yang dijalankan pada web browser. Untuk melihat source code tekan tombol CTRL + U pada web browser. Untuk pengguna komputer Mac tekan tombol Option+Command+U pada web browser.

Seri Tutorial Belajar JavaScript

Berikut urutan topik yang akan dipelajari dalam seri tutorial belajar JavaScript.

1. Pengertian JavaScript
2. Cara Membuat JavaScript Di HTML
3. Output JavaScript
4. Contoh Coding JavaScript
5. Penulisan JavaScript
6. Komentar Pada JavaScript
7. Variabel JavaScript
8. Operator Pada JavaScript
9. Penjumlahan JavaScript
10. Operator Assignment
11. Tipe Data JavaScript
12. Fungsi Pada JavaScript
13. JavaScript Object
14. Event Pada JavaScript
15. JavaScript Text Atau String
16. Berbagai Fungsi Pada String
17. JavaScript Angka Atau Number
18. Berbagai Fungsi Pada Number
19. Array Pada JavaScript
20. Berbagai Fungsi Pada Array
21. Mengurutkan Array
22. Mengambil Nilai Array
23. JavaScript Tanggal
24. Format Date
25. Fungsi Get Pada Date
26. Fungsi Set Pada Date
27. JavaScript Boolean
28. Perbandingan Dengan JavaScript
29. Kondisi Dengan JavaScript
30. Kondisi Dengan Switch
31. Perulangan Pada JavaScript
32. Perulangan While JavaScript
33. JavaScript Break
34. Membuat Fungsi JavaScript
35. Parameter Pada Fungsi
36. Memanggil Fungsi JavaScript
37. Konsep Scope
38. Keyword This Pada JavaScript
39. Class Pada JavaScript
40. Membuat Object JavaScript
41. Properti Pada Object
42. Fungsi Pada Object
43. Mencetak Nilai Object
44. Mengakses Nilai Dalam Object
45. Constructor Pada Object

Silahkan akses tutorial pertama : Pengertian JavaScript

Jul 02, 2021

Ariata C.

4menit Dibaca

Kali ini kami menuliskan tutorial yang memuat tentang cara membuat JavaScript di HTML. Terlebih dulu kami akan membahas pengertian JavaScript, dan setelahnya berfokus pada berbagai cara memasukkan JavaScript ke HTML.

Di HTML, Anda bisa menampilkan konten yang bersifat statis, misalnya gambar. Namun, belakangan ini, konten statis sudah tidak begitu lagi digemari. Kebanyakan konten saat ini sangat interaktif dan memuat slideshow, formulir, dan menu dengan tampilan yang menarik.

Konten-konten tersebut memberi kesempatan pada pengguna untuk lebih berekspresi dalam mengelola dan mengembangkan websitenya. Jika Anda menginginkan tampilan konten yang demikian, maka salah satu cara yang bisa dilakukan adalah script bahasa pemrograman dan JavaScript adalah yang paling populer di antaranya.

Adanya JavaScript memampukan para developer untuk membuat website dapat berinteraksi dengan user dan sebaliknya. Meskipun ada banyak sekali bahasa pemrograman yang bisa dipilih, tak ada yang sepopuler JavaScript. Agar potensi dan keunggulannya dapat dimaksimalkan, JavaScript sebaiknya digunakan secara bersama-sama dengan HTML.

Kelebihan JavaScript

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:

Meminimalkan interaksi server

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.

Antarmuka yang lengkap dan mudah digunakan

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.

Feedback yang cepat untuk user

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.

Debugging mudah

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.

Cara Membuat JavaScript di HTML

Setelah membahas kelebihan yang ditawarkan JavaScript, kini saatnya mengetahui lebih dalam tentang cara memasukkan JavaScript ke 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 <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan:

• di antara tag <head>
• di antara <body>

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

var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());

Kode tersebut di-insert di antara tag <script> dan </script> 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 <body> 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 = "<h2>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h2>"
</script>
</body>
</html>

Begini tampilan akhirnya:

Cara menambahkan kode JavaScript ke file terpisah

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:

• Ketika kode HTML dan kode JavaScript terpisah, maka segalanya yang terkait lebih mudah diandalkan dan digunakan.
• Readability dan maintenance kode akan lebih mudah.
• File JavaScript yang di-cache menaikkan keseluruhan performa website dengan cara mengurangi waktu yang dibutuhkan halaman untuk loading.

Sekarang kita reference 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>

Konten file myscript.js akan terlihat seperti ini:

let d = new Date();
document.body.innerHTML = "<h2>Time right now is:  " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h2>"

Catatan: Anggap saja file myscript.js tersimpan di dalam direktori yang sama seperti file HTML.

Contoh JavaScript untuk memvalidasi alamat email

JavaScript mendukung aplikasi dengan cara memvalidasi input user di client side. Salah satu input user yang paling penting dan membutuhkan validasi adalah alamat email. Fungsi JavaScript berikut ini akan membantu Anda melakukan validasi terhadap alamat email yang telah dimasukkan sebelum mengirimkannya ke server:

function validateEmailAddress(email) {
var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[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 attach fungsi ini agar membentuk input form, Anda dapat menggunakan kode berikut ini:

<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 ke dalam file HTML:

Apabila validasi salah, maka tampilannya akan berbeda:

Kini Anda sudah mengetahui cara membuat JavaScript di HTML dengan dilengkapi beberapa contoh dasar.

Kesimpulan

Di artikel ini, kami menuliskan  dua cara memasukkan JavaScript ke HTML. Jika Anda sudah bisa menguasai kedua cara tersebut, maka Anda bisa melakukan apa pun dengan dua bahasa pemrograman tersebut. JavaScript dapat dikombinasikan dengan HTML untuk mendukung aplikasi modern yang intuitif, interaktif, dan user-friendly sehingga Anda bisa dengan mudah mengembangkan website. Di samping itu, dengan melakukan validasi simple client-side, traffic ke server akan diturunkan dan keseluruhan performa website dapat ditingkatkan.

Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca.

Bagaimana cara memanggil fungsi di JavaScript?

Cara Memanggil/Eksekusi Fungsi Kita bisa memanggil fungsi di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini: namaFungsi(); Contoh: // membuat fungsi function sayHello(){ console.log("Hello World!"); } // memanggil fungsi sayHello() // maka akan menghasilkan -> Hello World!

Apa cara yang benar untuk menulis array JavaScript?

Cara Membuat Array pada Javascript Pada javascript, array dapat kita buat dengan tanda kurung siku ( [...] ). Contoh: var products = []; Maka variabel products akan berisi sebuah array kosong.

Apakah JavaScript cocok untuk pemula?

JavaScript yaitu salah satu bahasa pemrograman yang populer dan memiliki keunggulan yang mudah dipelajari untuk pemula. JavaScript juga sangat cocok untuk dipelajari jika Anda berkeinginan membuat website.

Console log JavaScript untuk apa?

Fungsi console.log() adalah fungsi untuk menampilkan teks ke console Javascript. Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap pesaan error di Javascript selalu ditampilkan di dalam Console. Selain console.log() , terdapat juga beberapa fungsi untuk debugging seperti console.

Bagaimana cara menjalankan JavaScript?

Bagaimana cara menulis kode JavaScript di HTML?

Apakah JavaScript cocok untuk pemula?

JavaScript bisa digunakan untuk apa saja?