Belajar JAVASCRIPT Beserta Fungsi dan Contoh Programnya
Di dalam Artikel ini kita akan mulai untuk belajar dari cara membuat, memanggil dan membuat program sederhana beserta fungsinya.
Yuk kita mulai..
Fungsi dari JAVASCRIPT ?
Fungsi adalah sub-program yang bisa digunakan kembali baik di dalam program itu sendiri, maupun di program yang lain.
Fungsi di dalam Javascript adalah sebuah objek. Karena memiliki properti dan juga method.
Bagi pemula konsep ini cukup membingunkan. Apalagi yang belum mengenal konsep OOP
Jangan khawatir,
Pertama-tama kita akan pelajari dulu tentang fungsi, dan kita akan bahas untuk objek di artikel berikutnya.
Ada 4 Cara Membuat Fungsi di Javascript
4 cara tersebut yang bisa kita lakukan adalah:
- Menggunakan Ekspresi
- Menggunakan cara biasa
- Menggunakan tanda panah (=>)
- Menggunakan Constructor
Sekarang kita coba satu persatu ya untuk fungsinya
1 Menggunakan Ekspresi
Cara membuat fungsi dengan ekspresi
var namaFungsi = function(){
console.log("Hello World!");
}Kita menggunakan variabel, lalu diisi dengan fungsi. Fungsi ini sebenarnya adalah fungsi anonim (anonymous function) atau fungsi tanpa nama.
2 Menggunakan cara biasa
Cara ini paling banyak digunakan untuk para pemula yang baru belajar javascript
function namaFungsi(){
console.log("Hello World!");
}
3 Menggunakan tanda panah (=>)
Cara ini sering digunakan di kode Javascript masa kini, karena lebih sederhana. Akan tetapi sulit dipahami bagi pemula.
var namaFungsi = () => {
console.log("Hello World!");
}
// atau seperti ini (jika isi fungsi hanya satu baris):
var namaFungsi = () => console.log("Hello World!");
4 Menggunakan Constructor
Cara ini seperti ini tidak direkomendasikan oleh Developer Mozilla, karena terlihat kurang bagus. Soalnya body fungsinya dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine javascript.
var namaFungsi = new Function('console.log("Hello World!");');
Untuk yang masih pemula, saya rekomendasikan gunakan cara yang biasa lalu kalau sudah mulai terbiasa bisa coba menggunakan tanda panah dan ekspresi
Cara Memanggil/Eksekusi Fungsi
Kalau sudah tau cara membuat fungsi, sekarang adalah cara untuk memanggil. Bagaimanakah caranya?
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!
Ada cara lagi selain di atas, dengan cara memanggil melalui atribut event pada html
contoh:
<!DOCTYPE html>
<html>
<head>
<script>
// membuat fungsi
var sayHello = () => alert("Hello World!");
</script>
</head>
<body>
<!-- Memanggil fungsi saat link diklik -->
<a href="#" onclick="sayHello()">Klik Aku!</a>
</body>
</html>hasilnya adalah:
Fungsi dengan Parameter
Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam fungsi.
contoh:
function kali(a, b){
hasilKali = a * b;
console.log("Hasil kali a*b = " + hasilKali);
}Dari contoh diatas untuk a dan b adalah sebuah parameter, lalu cara memanggil fungsi yang memiliki parameter seperti diatas adalah seperti dibawah ini:
kali(3, 2); // -> Hasil kali a*b = 6Kita memberikan 3 untuk parameter a dan 2 untuk parameter b.
Fungsi yang Mengembalikan Nilai
Agar hasil pengolahan nilai di dalam fungsi dapat digunakan untuk proses berikutnya, maka fungsi harus mengembalikan nilai.
Pengembalian nilai pada fungsi menggunakan kata kunci return kemudian diikuti dengan nilai atau variabel yang akan dikembalikan.
contoh:
function bagi(a,b){
hasilBagi = a / b;
return hasilBagi;
}
// memanggil fungsi
var nilai1 = 20;
var nilai2 = 5;
var hasilPembagian = bagi(nilai1, nilai2);
console.log(hasilPembagian); //-> 4Contoh Program Javascript dengan Fungsi
Setelah kita paham untuk dasar-dasar pembuatan fungsi dan jenis-jenisnya, sekarang mari kita coba membuat program sederhana.
Program ini berisi CRUD (Create, Read, Update, Delete) data barang yang tersimpan dalam sebuah array.
Silahkan buat dua file baru:
js-fungsi/ ├── fungsi.js └── index.htmlFileindex.htmladalah file yang menampilkan halaman web. Sedangkan filefungsi.jsadalah programnya. Berikut ini isi fileindex.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Fungsi di Javascript</title>
</head>
<body>
<fieldset>
<legend>Input Form</legend>
<input type="text" name="barang" placeholder="input nama barang..." />
<input type="button" onclick="addBarang()" value="Tambah" />
</fieldset>
<div>
<ul id="list-barang">
</ul>
</div>
<script src="fungsi.js"></script>
</body>
</html>Berikutnya kita akan buat kode di file fungsi.js. Silahkan gunakan gaya pembuatan fungsi yang kamu sukai.
Pada contoh ini, kita akan menggunakan cara yang pertama. Karena lebih mudah.
Berikut ini isi file fungsi.js:
var dataBarang = [
"Buku Tulis",
"Pensil",
"Spidol"
];
function showBarang(){
var listBarang = document.getElementById("list-barang");
// clear list barang
listBarang.innerHTML = "";
// cetak semua barang
for(let i = 0; i < dataBarang.length; i++){
var btnEdit = "<a href='#' onclick='editBarang("+i+")'>Edit</a>";
var btnHapus = "<a href='#' onclick='deleteBarang("+i+")'>Hapus</a>";
listBarang.innerHTML += "<li>" + dataBarang[i] + " ["+btnEdit + " | "+ btnHapus +"]</li>";
}
}
function addBarang(){
var input = document.querySelector("input[name=barang]");
dataBarang.push(input.value);
showBarang();
}
function editBarang(id){
var newBarang = prompt("Nama baru", dataBarang[id]);
dataBarang[id] = newBarang;
showBarang();
}
function deleteBarang(id){
dataBarang.pop(id);
showBarang();
}
showBarang();Hasilnya akan seperti dibawah ini:
Demikian untuk belajar Javascript beserta fungsinya, Artikel ini hanya mengajarkan untuk dasar javascript saja.
Fungsi merupakan hal yang wajib dipahami di dalam Javascript, karena kedepan kita akan banyak bekerja dengan fungsi baik dalam membuat objek, manipulasi HTML, melakukan ajax dan sebagainya.
Salam Sukses
TOG Indonesia
Can provide IT professionals for temporary, fixed-period placement in your company!