Cara menggunakan javascript in html function

A JavaScript function is a block of code designed to perform a particular task.

Table of Contents Show

JavaScript Function Syntax
Function Invocation
Function Return
Why Functions?
The () Operator Invokes the Function
Functions Used as Variable Values
Local Variables
Test Yourself With Exercises
Sintaks Fungsi JavaScript
Cara Memanggil function
Memanggil Function Dari Hyperlink
Function dengan Parameter
Function yang Mengembalikan Nilai
Contoh Program function pada Javascript
Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?
Bagaimana Cara Membuat function di JS?
Di dalam elemen HTML manakah kita meletakkan JavaScript?
Apa yang dimaksud dengan function pada JavaScript?

A JavaScript function is executed when "something" invokes it (calls it).

Example

// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}

Try it Yourself »

JavaScript Function Syntax

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)

The code to be executed, by the function, is placed inside curly brackets: {}

function name(parameter1, parameter2, parameter3) {
// code to be executed
}

Function parameters are listed inside the parentheses () in the function definition.

Function arguments are the values received by the function when it is invoked.

Inside the function, the arguments (the parameters) behave as local variables.

Function Invocation

The code inside the function will execute when "something" invokes (calls) the function:

When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)

You will learn a lot more about function invocation later in this tutorial.

Function Return

When JavaScript reaches a return statement, the function will stop executing.

If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.

Functions often compute a return value. The return value is "returned" back to the "caller":

Example

Calculate the product of two numbers, and return the result:

let x = myFunction(4, 3); // Function is called, return value will end up in x

function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}

The result in x will be:

12

Try it Yourself »

Why Functions?

You can reuse code: Define the code once, and use it many times.

You can use the same code many times with different arguments, to produce different results.

Example

Convert Fahrenheit to Celsius:

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);

Try it Yourself »

The () Operator Invokes the Function

Using the example above, toCelsius refers to the function object, and toCelsius() refers to the function result.

Accessing a function without () will return the function object instead of the function result.

Example

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Try it Yourself »

Functions Used as Variable Values

Functions can be used the same way as you use variables, in all types of formulas, assignments, and calculations.

Example

Instead of using a variable to store the return value of a function:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

You can use the function directly, as a variable value:

let text = "The temperature is " + toCelsius(77) + " Celsius";

Try it Yourself »

You will learn a lot more about functions later in this tutorial.

Local Variables

Variables declared within a JavaScript function, become LOCAL to the function.

Local variables can only be accessed from within the function.

Example

// code here can NOT use carName

function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}

// code here can NOT use carName

Try it Yourself »

Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.

Local variables are created when a function starts, and deleted when the function is completed.

Test Yourself With Exercises

Exercise:

Execute the function named myFunction.

function myFunction() {
  alert("Hello World!");
}
;

Start the Exercise

Pada artikel kali ini, kita akan membahas tentang function di Javascript. Mulai dari cara membuat, memanggil, hingga membuat program CRUD sederhana.

Dalam pemrograman, function digunakan untuk membuat suatu perintah yang nantinya dapat digunakan secara berulang dengan memanggilnya, sehingga tidak perlu menulis ulang. Fungsi di dalam Javascript memiliki properti dan juga method, maka function juga bisa dibilang adalah sebuah objek.

Sintaks Fungsi JavaScript
Cara Membuat function di Javascript
Cara Memanggil function
Memanggil Function Dari Hyperlink
Function dengan Parameter
Function yang Mengembalikan Nilai
Contoh Program function pada Javascript

Sintaks Fungsi JavaScript

Function pada JavaScript didefinisikan dengan keyword function, diikuti dengan nama, dan tanda kurung (). Nama function dapat berisi huruf, angka, underscore, dan tanda dolar. Tanda kurung juga memungkinkan untuk menyertakan nama parameter yang dipisahkan dengan koma: (parameter1, parameter2, …) Kode yang akan dijalankan oleh fungsi ditempatkan di dalam tanda kurung kurawal: {}

function name(parameter1, parameter2, parameter3) 
{
  // kode untuk dieksekusi
}

Sebelum membuat function, pertama kita pahami terlebih dahulu cara membuat function di JavaScript, yakni sebagai berikut.

Ada 4 cara yang bisa kita lakukan untuk membuat function yaitu :

1. Membuat function di Javascript dengan Cara Biasa

Cara pertama ini paling sering digunakan, terutama buat kita yang masih baru belajar Javascript.

function namaFungsi()
{
console.log("Hello World!");
}

2. Membuat function dengan Ekspresi

Pada cara kedua ini, kita menggunakan variabel, setelah itu diisi dengan function. function ini sebenarnya adalah fungsi anonim (anonymous function) atau fungsi tanpa nama.

var namaFungsi = function()
{
console.log("Hello World!");
}

3. Membuat function di Javascript dengan Tanda Panah

Function ini mulai muncul pada standar ES6. Cara membuat function ini hampir sama dengan yang menggunakan ekspresi. Bedanya, kita menggunakan tanda panah (=>) sebagai ganti function.

var namaFungsi = () => 
{
console.log("Hello World!");
}

4. Membuat function dengan Konstruktor

Pada cara ini kurang direkomendasikan, karena body function nya dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine javascript. Selain itu, cara ini juga tidak disarankan oleh Developer Mozilla. Jadi bagi kita yang baru belajar, sebaiknya gunakan cara yang pertama terlebih dahulu.

var namaFungsi = new Function('console.log("Hello World!");');

Cara Memanggil function

Kita bisa memanggil function di dalam kode Javascript dengan menuliskan nama fungsinya seperti ini:

Contoh :

//Membuat Fungsi dengan Cara Biasa
function namaFungsi()
{
console.log("Hello World!");
}
// memanggil fungsi
namaFungsi() // maka akan menghasilkan -> Hello World!

Hasilnya :

Memanggil Function Dari Hyperlink

Selain dengan cara di atas, function juga dapat dipanggil dari hyperlink melalui atribut href pada HTML. Perhatikan contoh dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <script>
    // membuat fungsi
    var sayHello = () => alert("selamat datang di praktekotodidak.com");
    </script>
</head>
<body>
    <!-- Memanggil fungsi saat link diklik -->
    <a href="#" onclick="sayHello()">Klik Disini</a>
</body>
</html>

Hasilnya :

Kita bisa memanggil function dari link lewat atribut href dengan nilai ‘Javascript:nama_fungsi()’ penggunaan ini dapat bisa di terapkan saat ingin membuat sebuah aksi saat pengguna mengklik link. Dapat dilihat pada contoh diatas function sayHello() dipanggil melalui event onclick, ketika pengguna mengklik link tersebut maka akan memicu event ini terjadi.

Function dengan Parameter

Parameter adalah variabel yang menyimpan nilai untuk diproses di dalam function. Di javascript pelewatan parameter bisa dilakukan dengan nilai (value)

Contoh :

function kali(a, b)
{
 hasilKali = a * b;
 console.log("Hasil kali a*b = " + hasilKali);
}
kali(5, 2); // -> Hasil kali a*b = 10

Ketika function tersebut dipanggil maka, harus kita sematkan nilai (value) untuk masing-masing parameter dalam fungsi tersebut.

Pada contoh di atas, a dan b adalah sebuah parameter. Lalu kita memberikan 5 untuk parameter a dan 2 untuk parameter b.

Function yang Mengembalikan Nilai

Agar hasil pengolahan nilai di dalam function dapat digunakan untuk proses berikutnya, maka function 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 = 10;
var nilai2 = 2;
var hasilPembagian = bagi(nilai1, nilai2);
console.log(hasilPembagian); //-> 5

Hasilnya :

Contoh Program function pada Javascript

Setelah kita memahami dasar-dasar dalam pembuatan function, sekarang kita akan mencoba membuat program sederhana yaitu CRUD (Crete, Read, Update, Delete). Program ini berisi data barang yang tersimpan dalam sebuah array. Pada contoh program ini kita akan menggunakan cara yang pertama, karena lebih mudah dibuat.

Langkah pertama buat dua file baru :

Keterangan :

File index.html adalah file yang menampilkan halaman web.
file fungsi.js adalah programnya.

Setelah itu isi file index.html dengan kode berikut :

<!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>Masukkan Nama Barang</legend>
        <input type="text" name="barang" placeholder="tulis disini..." />
        <input type="button" onclick="addBarang()" value="Tambah" />
    </fieldset>
    <div>
        <ul id="list-barang">
        </ul>
    </div>
    <script src="fungsi.js"></script>
</body>
</html>

Lalu isi file fungsi.js dengan kode berikut :

var dataBarang = [
    "Komputer",
    "Laptop",
    "Monitor",
    "AC Split",
    "TV 32Inch"
];

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.splice(id, 1);
    showBarang();
}
showBarang();

Maka hasilnya akan terlihat seperti gambar dibawah ini :

Begitulah cara membuat, memanggil, hingga membuat program CRUD sederhana menggunakan function pada javascript. Baca juga artikel selanjutnya yaitu Belajar Javascript #10 Membuat objek di Javascript

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

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>

Bagaimana Cara Membuat function di JS?

Berikut ini contoh cara membuat function di javascript dalam bentu pseudo-code..

function namaFungsi(parameter1, parameter2) { // Kode yang ingin dieksekusi } ... .

<html> <head> <script type="text/javascript"> function hitung(p1, p2) { return p1+p2; } console.log(hitung(5,5)); </script> </head> </html>.

Di dalam elemen HTML manakah kita meletakkan JavaScript?

Elemen Script atau Tag <script> pada Html digunakan untuk menampung Script pada sisi client, artinya Anda bisa menulis dan memasukkan kode javascript didalam Tag <script> tersebut.

Apa yang dimaksud dengan function pada JavaScript?

Fungsi pada JavaScript adalah sekumpulan kode yang dirancang untuk melakukan tugas tertentu. Sebuah fungsi JavaScript dijalankan ketika ada yang memanggilnya.