Javascript function

Oleh : Ilham Kusdi 5107100131 Mochammad Rizki I 5108100082 Sa’ad Ahyat Hasan 5108100146

Introduction Function atau fungsi merupakan salah satu unit kerja utama dalam Javascript. Karena itu cukup penting untuk memahami apa itu fungsi dan bagaimana cara kerjanya. Sebuah fungsi berisi kode yang nantinya akan dieksekusi dengan adanya suatu event atau pemanggilan fungsi tersebut.

Mendefinisikan Fungsi Fungsi pada Javascript didefinisikan menggunakan kata "function" diikuti dengan nama variable-variable yang digunakan seperti yang dapat dilihat pada sintax berikut ini: function fname(value1,value2, ...) { statement1 statement2 . } parameter value1, value2, dst. merupakan variabel atau nilai yang dikirim kedalam fungsi. Tanda { dan } mendefinisikan titik mulai dan berakhir pada fungsi tsb. Note: Sebuah fungsi tanpa parameter tetap harus menggunakan tanda kurung () setelah nama fungsi.

Contoh fungsi: function example(a,b) { number += a; alert('You have chosen: ' + b); }

Memanggil Fungsi Kita dapat memanggil suatu fungsi dari JavaScript. Untuk memanggil suatu fungsi, kita hanya perlu menulis nama fungsi yang ingin dipanggil beserta parameter yang mengikutinya pada script. Misalnya pada contoh sebelumnya, fungsi tsb dipanggil seperti ini : example(1,'house') Pada saat kita mendefinisikan suatu fungsi, sebenarnya kita membuat sebuah JavaSript command baru yang dapat dipanggil dari manapun pada halaman. Dan kapanpun kita memanggil fungsi tsb, maka JavaScript yang ada di dalam tanda {} dieksekusi.

Arguments Kita dapat mengirimkan argumen kedalam suatu fungsi. Argumen adalah variabel, baik berupa bilangan maupun, yang kemudian diolah di dalam fungsi sesuai dengan instruksi yang diberikan. Tentu saja output dari fungsi juga bergantung pada argumen yang dikirimkan. Misalkan pada contoh, disini dikirimkan dua argumen, yaitu bilangan 1 dan string ‘ house ’. example(1,'house');

Arguments Ketika argumen tsb masuk ke dalam fungsi, mereka akan disimpan ke dalam variabel seperti yang telah dideklarasikan pada header function sebelumnya. Misalnya pada contoh tadi, argumen yang dikirimkan akan disimpan ke dalam variabel a dan b. function example(a,b) { number += a; alert('You have chosen: ' + b); } Kemudian fungsi tsb kemudian nantinya akan mengolah variabel a dan b sesuai dengan script yang ditulis pada fungsi.

Arguments Kita dapat menggunakan banyak argumen sebanyak yang kita mau: function example(a,b,c,data,data2) { number += a; alert('You have chosen: ' + b); (do lots more with c, data and data2) } Atau kita juga dapat menulis suatu fungsi tanpa argumen: function example() { number += 1; alert('You have chosen: house'); }

Mengembalikan suatu nilai Kita juga dapat menggunakan suatu fungsi untuk mengembalikan suatu nilai dengan menggunakan return statement. Return statement digunakan untuk menentukan suatu nilai yang akan dikembalikan dari suatu fungsi. Misalnya dapat kita lihat pada contoh berikut: function calculate(a,b,c) { d = (a+b) * c; return d; }

Mengembalikan suatu nilai Seperti yang dapat kita lihat fungsi tsb mengembalikan suatu nilai integer yang disimpan pada variabel d. Fungsi tsb menghitung suatu bilangan sesuai dengan bilangan-bilangan yang dikirimkan pada fungsi tsb, kemudian mengembalikan nilai yang merupakan hasil dari perhitungannya. Ini merupakan kebalikan dari mengirimkan argumen yang mengirimkan suatu nilai ke dalam fungsi, fungsi tsb akan mengembalikan suatu nilai pada saat dipanggil. Fungsi tsb akan berhenti dieksekusi setelah menemui statement return . var x = calculate(4,5,9); maka var x = 81

Javascript Function Example: <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>

Javascript Function Example 2:

Function Outline 11.1 Introduction 11.2 Modul Program dalam JavaScript 11.3 Programmer-Defined Functions 11.4 Definisi Fungsi 11.5 Random Number Generation 11.6 Contoh: A Game of Chance 11.7 Durasi Identifier 11.8 Aturan Scope 11.9 Rekursi 11.10 Contoh Rekursi: The Fibonacci Series 11.11 Rekursi vs. Iterasi 11.12 JavaScript Global Functions

Mendefinisikan Fungsi Nama fungsi – harus menggunakan identifier yang valid Daftar Parameter - daftar yang dipisahkan oleh koma berisi nama-nama parameter yang diterima oleh fungsi pada saat fungsi tsb dipanggil. Jika fungsi tsb tidak menerima nilai apapun, maka daftar parameter dibiarkan kosong.

11.1 Introduction Program yang dapat memecahkan masalah dalam dunia nyata. - Program yang lebih kompleks daripada program pada chapter sebelumnya. Cara terbaik untuk membangun dan mengembangkan program yang besar: - Bangun dari program yang kecil, yaitu -dari bagian-bagian yang disebut modul - Dengan teknik yang disebut sebagai divide and conquer

11.2 Modul Program dalam JavaScript functions – JavaScript modules Program JavaScript ditulis dengan menggabungkan -Fungsi-fungsi yang ditulis oleh programmer -“prepackaged” functions dan objects dalam JavaScript - Fungsi-fungsi ini biasa disebut dengan methods - Implies function belongs to particular object JavaScript menyediakan beberapa objeks untuk melaksanakan : - Operasi Matematika umum - Manipulasi String - Manipulasi Tanggal dan Waktu - Manipulasi arrays

Mendefinisikan Fungsi - Function body atau block : berisi deklarasi dan statemen-statemen yang ditulis di dalam tanda kurung siku. - Control mengembalikan ke titik pada saat fungsi dipanggil. - Jika fungsi tsb tidak mengembalikan suatu hasil When right-brace is reached return statement is executed If function returns a result When return expression ; is executed Returns value of expressions to caller - One argument in function call for each parameter in function definition

Rules of “craps” Tiap Pemain 2 buah dadu Hitung jumlah dari kedua mata dadu Jika berjumlah 7 atau 11 – maka pemain menang  Jika berjumlah 2, 3, atau12 pada lemparan pertama (disebut “craps”) – pemain kalah  Jika berjumlah 4, 5, 6, 8, 9 atau 10 pada lemparan pertama – jumlah tersebut dijadikan “poin” dari pemain Jika permainan tidak selesai pada putaran pertama, Pemain melanjutkan permainan Jika kedua mata dadu berjumlah sama dengan “poin” – maka pemain menang  Jika kedua mata dadu berjumlah 7 sebelum sama dengan “poin” – maka pemain kalah  Pemain melanjutkan giliran sampai game over

Setiap identifier(pengenal) mempunyai durasi and scope Durasi(masa aktif) adalah periode selama identifier masih berada di memori. Beberapa identifier hanya eksis(berada di memori) dalam waktu singkat Beberapa identifier dibuat dan dihilangkan secara berulang kali Beberapa identifier eksis (berada di memori) selama program dieksekusi Identifier yang merepresentasikan local variables pada suatu fungsi mempunyai automatic duration Dibuat secara otomatis ketika kontrol program masuk ke dalam fungsi Eksis selama fungsi masih aktif Dihilangkan(dihapus) secara otomatis ketika keluar dari fungsi Ditunjuk (dianggap) sebagai local variables 11.7 Duration of Identifiers

Selain identifier yang telah dijelaskan diatas, JavaScript juga mempunyai identifier dengan static duration Biasanya didefinisikan pada <HEAD> section dari dokumen HTML Eksis mulai saat dideklarasikan sampai browsing session selesai Meskipun mereka tetap ada setelah <HEAD> section berakhir, belum tentu mereka dapat digunakan pada keseluruhan script Dianggap sebagai global variables atau script-level variables 11.7 Durasi Identifier (II)

Scope of identifier adalah bagian dari program dimana identifier dapat dirujuk Local variable yang dideklarasikan di dalam fungsi hanya dapat digunakan (diakses) dalam fungsi tersebut Identifier yang dideklarasikan di dalam sebuah fungsi mempunyai skop fungsi (or local scope ) Diawali dengan kurung buka ( { ) dari fungsi Diakhiri dengan kurung tetap( } ) dari fungsi Parameter fungsi juga memiliki local scope Jika local variable mempunyai nama yang sama dengan global variable, maka global “di-hidden” dari bagian fungsi. 11.8 Scope Rules

Fungsi rekursif sebuah fungsi yang memanggil dirinya sendiri secara langsung atau melalui fungsi lain Process Fungsi dipanggil untuk menyelesaikan sebuah problem Fungsi mengetahui bagaimana menyelesaikan kebanyakan simple case(base case) Jika dipanggil dengan base case, return result Jika dipanggil dengan case yang lebih complex

5. Fungsi membagi problem menjadi dua bagian concep: Bagian yang mengetahui bagaimana menyelesaikan Bagian yang tidak mengetahui bagaimana menyelesaikan(mirip dengan permasalahan awal, namun sedikit lebih simple atau lebih kecil) 6. Fungsi membuat recursive call melibatkan fress copy dari dirinya untuk bekerja dalam problem yang lebih kecil normalnya memasukkan keyword return Mengirim kembali hasil pada copy sebelumnya dari dirinya yang membuat recursive call

7. Langkah rekursi akan melakukan eksekusi ketika fungsi asal masih terbuka 8. Recursion termination: terjadi secepatnya sesuai dengan jumlah recursive call, fungsi dikenali sebagai base case Akan berlanjut hingga fungsi asal menghasilkan return value

1.1 Open HTML TABLE 2.1 Open for structure 2.2 Call factorial function 3.1 Define factorial function 3.2 Make recursive call statement

GUI Input Setup: Semua input user akan didefinisikan dengan HTML input Tag <INPUT NAME = “inputName” TYPE = “text”> Masukkan inputan sesuai keinginan dan berikan nama yang sesuai pada tiap input Componen form button dapat digunakan untuk mengirimkan inputan ke serve <INPUT TYPE = “button” VALUE = “buttonLabel” ONCLICK = “ javaScriptFunctionCall”> Fungsi yang dipanggil dalam ONCLICK element dieksekusi ketika event juga dieksekusi Fungsi yang dipanggil dalam GUI akan dieksekusi menggunakan FORM element sebagai parameternya

deret fibonacy: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89… Dimulai dengan 0 dan 1 Tiap angka merupakan penjumlahan dari dua angka sebelumnya Dapat didefinisikan secara rekursif dengan: fibonacy(0) = 0; fibonacy(1) = 1; fibonacy(n) = fibonacy(n-1) + fibonacy (n-2)

Outline 1.1 Define function: getFibonacciValue 1.2 Define variable from user input 1.3 Print results 2.1 Define function: fibonacci 2.2 Make recursive calls 2.3 Return result

Outline 1.1 Open <FORM> 1.2 Open <TABLE> 1.3 Insert <INPUT> elements with appropriate attributes 1.4 Close </FORM> and </TABLE>

Set of Recursive Calls to Function fibonacci

Common Aspect keduanya menggunaka control structur Rekursi menggunakan selection structur Iterasi menggunakan repetition structur Keduanya melibatkan perulangan Keduanya menggunakan pengecekan untuk termination Iteration dengan counter-controlled repetition dan rekursi keduanya secara berangsur-angsur mendekati termination Keduanya dapat terjadi tanpa batas

Negatives of recursion: Berulang kali melibatkan mechanism atau function call Membutuhkan waktu pemrosesan yang lama dan membutuhkan memory space yang besar Iteration pada umumnya terjadi dalam satu fungsi sehingga biaya atau ongkos dapat dihilangkan Kelebihan recursion dibanding iterasi Penting dalam software engineering yang baik Kepentingan kinerja yang tinggi Have to find the right mix between the two depending on the situation

global function adalah bagian dari Java Sript global object Berisi semua global variable di dalam script Beberapa programer menyebut fungsi ini sebagai methods Global functions and user-defined functions part of Global object Tidak perlu menggunakan Global object secara langsung Java script does it for you

Global Function: Escape Mengambil string argumen dan mengembalikan string dimana semua space, tanda baca, karakter accent dan semua non-ASCII character dikodekan ke bentuk hexadecimal Eval Mengambil argumen string yang merepresentasikan kode JavaScript untuk mengeksekusi. Mengevaluasi dan mengeksekusi kode ketika fungsi eval dipanggil Memungkinkan JavaScript kode untuk disimpan sebagai string dan dijalankan secara dinamis isFinite Mengambil numerik argument dan mengembalikan nilai true jika nilai tersebut tidak Nan Number.POSITIVE_INFINITY or Number.NEGATIVE_INFINITY Jika fungsi maka bernilai false Otherwise function returns false

Global Function: 4. isNaN Mengambil argumen numerik dan mengembalikan nilai true jika nilai bukan angka Selai itu return false Umumnya digunakan dengan nilai return parseInt dan parseFloat untuk menentukan apakah Hasilnya adalah nilai numerik 5. parseFloat Mengambil string argumen dan mengkonversi string awal dari string ke nilai floating-point Jika pengkonversian tidak berhasil, return NaN Jika tidak maka return nilai hasil pengkonversian

Global Function: 6. parseInteger Mengambil string argumen dan memulai untuk mengubah string ke nilai integer Jika konversi tidak berhasil maka return NaN, jika berhasil maka return hasil konversi 7. unscape Mengambil string dan mengembalikan string di mana semua karakter dikodekan dengan escape sebelumnya didekode

Javascript function

More Related Content

What's hot (17)

Viewers also liked (6)

Similar to Javascript function (20)

Recently uploaded (20)

Javascript function