Function Pada Javascript


Fungsi pada JavaScript

Fungsi merupakan blok kode yang akan di jalankan pada saat nama function itu jalankan oleh event tertentu atau pada saat function itu di panggil. Fungsi ini juga dapat di jalankan oleh browser pada saat loading sebuah halaman web.

Function juga bisa di panggil di halaman web mana saja dengan cara kita membuat file external berupa file .JS (extention file javascript). Yang berisi syntak javascript. File itu kita panggil pada halaman web yang yang mau sisipkan javacscript.

Function dapat di definisikan di bagian <head> dan bagian <body> dari halaman web. Jika kita menginginkan script itu di panggil pada saat halaman web di load maka kita tempatkan script itu di bagian <head>

Contoh:

 

<html>

<head>

<script type="text/javascript">

function displaymessage()

{

alert("Hello World!")

}

</script>

</head>

<body>

<form>

<input type="button" value="Click me!" onclick="displaymessage()" >

</form>

</body>

</html>

 

Output dari scrip di atas adalah akan muncul tombol yang harus di clik bila ingin menampilkan pesan nya.

 

Bagaimana cara mendefinisikan sebuah Fungsi

Sintak untuk membuat fungsi adalah:

function namafungsi (var1,var2,...,varX)

{

kode teks

}

Keterangan:

  • var1, var2, adalah variable atau nilai suatu fungsi.
  • Nilai fungsi harus di awali dan di akhiri dengan tanda kurung kurawal. { }
  • Bila variable, parameter atau nilai tidak ada maka tanda kurung harus tetap di gunakan.()
    
  • Di sarankan untuk tidak menggunakan huruf capital pada javascript lebih baik gunakan huruf kecil semua. Untuk nama fungsi, nama variable, parameter dan lainya di sarankan untuk menggunakan huruf kecil semua.
    

 

Contoh:

 

function prod(a,b)

{

x=a*b

return x

}

 

 

Jenis Fungsi:

Bahasa Javascript mempunyai beberapa type penulisan function. Di antaranya adalah:

  1. Function Basic
    How to call a function.
  2. Function with arguments
    How to pass a variable to a function, and use the variable in the function.
  3. Function with arguments 2
    How to pass variables to a function, and use these variables in the function.
  4. Function that returns a value
    How to let the function return a value.
  5. A function with arguments, that returns a value
    How to let the function find the product of two arguments and return the result.

Contoh Fungsi:

<html>

<head>

<script type=”text/javascript”>

function myfunction()

{

alert(“HELLO”)

}

</script>

</head>

<body>

<form>

<input type=”button” onclick=”myfunction()” value=”Call function”>

</form>

<p>Tekan tombol untuk memanggil Function.</p>

</body>

</html>

 

Contoh 1: Fungsi dengan argumen:

<html>

<head>

<script type=”text/javascript”>

function myfunction(txt)

{

alert(txt)

}

</script>

</head>

<body>

<form>

<input type=”button” onclick=”myfunction(‘Hello’)” value=”Call function”>

</form>

<p>Tekan tombol untuk memanggil function nya</p>

</body>

</html>

Output:

Contoh 2: Fungsi dengan argumen

<html>

<head>

<script type=”text/javascript”>

function myfunction(txt)

{

alert(txt)

}

</script>

</head>

<body>

<form>

<input type=”button” onclick=”myfunction(‘Good Morning!’)” value=”In the Morning”>

<input type=”button” onclick=”myfunction(‘Good Evening!’)” value=”In the Evening”>

</form>

<p>Pilih Tombol untuk memanggil Function nya.</p>

</body>

</html>

Output:


Contoh fungsi dengan nilai kembalian

<html>

<head>

<script type=”text/javascript”>

function myFunction()

{

return (“Hello, have a nice day!”)

}

</script>

</head>

<body>

<script type=”text/javascript”>

document.write(myFunction())

</script>

<p>The script in the body section calls a function.</p>

<p>The function returns a text.</p>

</body>

</html>

Contoh fungis dengan nilai kembalian

<html>

<head>

<script type=”text/javascript”>

function product(a,b)

{

return a*b

}

</script>

</head>

<body>

<script type=”text/javascript”>

document.write(product(4,3))

</script>

<p>Script dalam bagian body memanggil fungsi dengan 2 parameter (4 and 3).</p>

<p>fungsi akan memanggil kembali sesuai nilai parameter.</p>

</body>

</html>

 

Iklan

tulis comment nya...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s