'JavaScript yang Dipersonalisasi': Fungsi, objek, dan metode yang ditentukan pengguna

Sebagai bahasa pemrograman modern, JavaScript mendukung ekstensibilitas penuh dengan memungkinkan Anda menentukan fungsi Anda sendiri. Ini memungkinkan Anda untuk membuat rutinitas yang dapat Anda gunakan berulang kali. Anda menghemat waktu dalam menggunakan kembali "komponen" umum, dan dengan mendesain fungsi Anda sendiri, Anda dapat memperluas bahasa dasar JavaScript agar sesuai dengan kebutuhan Anda. Anggap saja sebagai "JavaScript yang dipersonalisasi".

Karena JavaScript didasarkan pada objek, fungsi JavaScript dapat dengan mudah diubah menjadi objek, dan metode untuk objek itu. Jadi, Anda tidak hanya dapat membuat objek buatan pengguna untuk melakukan penawaran, Anda juga dapat membuat objek sendiri yang berperilaku persis seperti yang Anda inginkan. Dan Anda dapat membuat metode yang bekerja pada objek tersebut. Meskipun ini terdengar kuat - dan memang begitu - proses pembuatan fungsi, objek, dan metode sangat mudah di JavaScript.

Memperkenalkan fungsi

Gunakan pernyataan fungsi untuk membuat fungsi JavaScript Anda sendiri. Sintaksnya adalah:

nama fungsi ( params ) { ... function stuff ... }
  • name adalah nama unik dari fungsi tersebut. Semua nama fungsi dalam skrip harus unik.
  • params adalah satu atau lebih variabel parameter yang Anda berikan ke fungsi.
  • barang fungsi adalah instruksi yang dilakukan oleh fungsi. Anda dapat meletakkan apa saja di sini.

Perhatikan karakter kurung {dan}; ini menentukan blok fungsi , dan mutlak diperlukan. Tanda kurung memberi tahu JavaScript di mana suatu fungsi dimulai dan diakhiri. Tanda kurung di sekitar parameter juga diperlukan. Sertakan tanda kurung meskipun fungsinya tidak menggunakan parameter (dan banyak yang tidak).

Nama untuk fungsi yang ditentukan pengguna terserah Anda, selama Anda hanya menggunakan karakter alfanumerik (karakter garis bawah _ juga diperbolehkan). Nama fungsi harus dimulai dengan karakter huruf, tetapi dapat menyertakan angka di tempat lain dalam nama.

Saya terjebak dengan gaya JavaScript dari kapitalisasi nama fungsi - yaitu, huruf kecil awal, kemudian karakter huruf besar jika nama fungsi terdiri dari kata gabungan. Sebagai contoh, myFuncName, yourFuncName, atau theirFuncName. Nama fungsi peka huruf besar / kecil; pastikan untuk menggunakan kapitalisasi yang sama saat Anda merujuk ke fungsi tersebut di tempat lain dalam skrip. JavaScript menganggapnya myFuncberbeda dari Myfunc.

Untuk membedakan antara fungsi dan variabel, saya lebih suka memberi variabel saya karakter huruf besar awal, seperti MyStuff. Ini segera membedakannya dari fungsi, yang akan menggunakan huruf besar myStuff. Tentu saja, Anda bebas menggunakan skema kapitalisasi apa pun yang Anda inginkan.

Mendefinisikan dan menggunakan suatu fungsi

Cara terbaik untuk mendeskripsikan bagaimana dan mengapa suatu fungsi adalah dengan menunjukkan cara kerja sederhana. Berikut adalah fungsi dasar yang menampilkan "Halo, JavaScripters!" dan merupakan peluncuran yang jelas dari "Hello World!" contoh yang Anda lihat untuk bahasa pemrograman baru.

function basicFunction () {alert ("Halo JavaScripters!"); }

Ini hanya mendefinisikan fungsinya. JavaScript tidak akan melakukan apa-apa kecuali fungsinya direferensikan di tempat lain dalam skrip. Anda harus memanggil fungsi tersebut untuk menggunakannya. Memanggil fungsi yang ditentukan pengguna sama dengan memanggil fungsi JavaScript built-in - Anda cukup memberikan nama fungsi di skrip Anda. Ini berfungsi sebagai panggilan fungsi. Saat JavaScript menemukan panggilan fungsi, JavaScript akan berhenti untuk menyelesaikan instruksi apa pun yang ada dalam fungsi itu. Saat fungsi selesai, JavaScript kembali ke titik segera setelah pemanggilan fungsi, dan memproses sisa skrip.

Untuk memanggil fungsi di atas, cukup sertakan teks basicFunction () - catat tanda kurung kosong, karena diperlukan. Berikut adalah contoh kerja program Hello JavaScripters.

Contoh Fungsi Dasar function basicFunction () {alert ("Hello JavaScripters!"); }

basicFunction ();

Halaman telah dimuat.

Browser memproses konten tag saat dokumen dimuat. Ketika menemukan basicFunction()panggilan fungsi, itu berhenti sejenak untuk memproses fungsi, dan kotak peringatan muncul. Klik OK dan sisa halaman selesai dimuat.

Memanggil fungsi dengan event handler

Cara umum untuk memanggil suatu fungsi adalah dengan menyertakan referensi ke fungsi tersebut dalam tombol formulir atau tautan hypertext. Memproses fungsi yang ditentukan pengguna saat pengguna mengklik tombol formulir mungkin adalah yang termudah dari semuanya. Anda menggunakan event handler onClick untuk memberi tahu JavaScript bahwa saat pengguna mengklik tombol, fungsi yang ditentukan harus diproses. Berikut adalah versi revisi dari contoh sebelumnya, yang menunjukkan bagaimana basicFunction dipanggil saat tombol formulir diklik.

Contoh Fungsi Dasar function basicFunction () {alert ("Hello JavaScripters!"); }

Fungsi klik untuk memanggil.

Perhatikan sintaks onClick di tag. Acara yang ingin Anda proses dengan sekali klik adalah panggilan ke basicFunction. Acara ini dikelilingi oleh tanda kutip ganda.

Meneruskan nilai ke suatu fungsi

Fungsi JavaScript mendukung penerusan nilai - atau parameter - ke mereka. Nilai-nilai ini dapat digunakan untuk diproses di dalam fungsi. Misalnya, daripada meminta kotak peringatan mengatakan "Halo JavaScripters!" kapan pun Anda menyebutnya, Anda dapat membuatnya mengatakan apa pun yang Anda suka. Teks yang akan ditampilkan dapat dikirimkan sebagai parameter ke fungsi.

Untuk meneruskan parameter ke suatu fungsi, berikan nama variabel sebagai parameter dalam definisi fungsi. Anda kemudian menggunakan nama variabel itu di tempat lain dalam fungsi. Sebagai contoh:

function basicExample (Teks) {alert (Text); }

Nama variabel adalah Text, dan didefinisikan sebagai parameter untuk fungsi tersebut. Variabel itu kemudian digunakan sebagai teks untuk ditampilkan di kotak peringatan. Saat memanggil fungsi, berikan teks yang ingin Anda tampilkan sebagai parameter pemanggilan fungsi:

basicExample ("Ini mengatakan apa pun yang saya inginkan"); 

Meneruskan beberapa nilai ke suatu fungsi

Anda dapat mengirimkan beberapa parameter ke suatu fungsi. Seperti halnya fungsi dan metode JavaScript bawaan, pisahkan parameter dengan koma:

multipleParams ("satu", "dua"); ... function multipleParams (Param1, Param2) {...

Saat Anda menentukan fungsi dengan beberapa parameter, pastikan parameter terdaftar dalam urutan yang sama dalam pemanggilan fungsi. Jika tidak, kode JavaScript Anda mungkin menerapkan parameter ke variabel yang salah, dan fungsi Anda tidak akan berfungsi dengan benar.

Here's a working example of a function with multiple parameters. It takes two parameters: an input string and a number value. The number value indicates how many characters on the left of the string you want to display in the alert box. When you run the following script, the alert box displays "This is" -- the first seven characters of the input string.

Global Variable Example lefty ("This is a test", 7);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); alert (OutString); }

Returning a value from a function

The functions described so far don't return a value; that is, they do whatever magic you want them to do, then end. No "output" value is provided by the function. In some other languages, such return-less functions are called subroutines. However, in JavaScript (like in C and C++), "functions are functions" whether or not they return a value.

It's easy to return a value from a function: use the return statement, along with the value you wish to return. This is handy when you want your function to churn through some data and return the processed result. Take the "lefty" function from above. Instead of displaying the chopped-off string, you can return it to the calling function, and use the return value any way you want.

Global Variable Example var Ret = lefty ("This is a test", 7); alert (Ret);

function lefty (InString, Num) { var OutString=InString.substring (InString, Num); return (OutString); }

This script does essentially the same one as the previous example, but instead of always displaying the chopped-off text, the function merely returns the processed value. The return value is captured in a variable, and you are free to use that variable in any way you wish. The above shows the Ret variable used with an alert box, but you can use it in other ways, too. For example, you can write the contents of the Ret variable using the document.write method:

document.write (Ret); 

Defining local variables within functions

By default all JavaScript variables are declared global for the document that created them. That means when you define a variable in a function, it is also "visible" to any other portion of the script on that document. For example, in the following global variable test, the variable test is visible to the showVar function, even though the variable is defined in the loadVar function.

Global Variable Example

function showVar () { alert (test) }

function loadVar () { test = "6" }

loadVar();

Click to call function.

Global variables aren't always what you want. Instead, you want variables that are local to the function. These variables exist only as long as JavaScript is processing the function. When it exits the function, the variables are lost. In addition, a local variable of a given name is treated as a separate entity from a global variable of the same name. In this way, you don't have to worry about reuse of variable names. The local variable in the function won't have any effect on the global variable used elsewhere in the script.

To declare a local variable, add the var keyword to the beginning of the variable name in the function. This tells JavaScript you want to make the variable local to that function. As a test, change the loadVar function above to the following, and re-load the script. When you click the button, JavaScript tells you the variable doesn't exist. This is because test is only local to the loadVar function, and does not exist outside the function.

function loadVar () { var test = "6" } 

Calling one function from another function

Code inside a function behaves just like code anywhere else. This means you can call one function from inside another function. This allows you to "nest" functions so that you can create separate functions, which each perform a specific task, and then run them together as a complete process, one right after the other. For example, here's a function that calls three other mythical functions, each one returning a string of text that has been altered in some way.

function run () { var Ret = changeText ("Change me"); alert (Ret); document.write (Ret); } function changeText (Text) { Text = makeBold (Text); Text = makeItalics (Text); Text = makeBig (Text); return (Text); } function makeBold (InString) { return (InString.bold()); } function makeItalics (InString) { return (InString.italics()); } function makeBig (InString) { return (InString.big()); } 

Creating objects with user-defined functions

JavaScript is based on objects: the window is an object, links are objects, forms are objects, even Netscape itself (or other browser) is an object. Using objects can help make programming easier and more streamlined. You can extend the use of objects in JavaScript by making your own. The process uses functions in a slightly modified way. In fact, you'll be surprised how easy it is to make your own JavaScript objects.

Making a new object entails two steps:

  • Define the object in a user-defined function.
  • Use the new keyword to create (or instantiate) the object with a call to the object function.

Here's an example of the world's simplest user-defined JavaScript object:

// this part creates a new object ret = new makeSimpleObject();

// this part defines the object function makeSimpleObject() {}

I've called the new object ret; use any valid variable name for the new object (I use lower-case letters for variables that contain objects, so it's easier to tell that the variable contains an object).

You can use the same object function to create any number of new objects. For instance, these lines create four new and separate objects: eenie, meenie, minie, and moe:

eenie = new makeSimpleObject(); meenie = new makeSimpleObject(); minie = new makeSimpleObject(); moe = new makeSimpleObject(); 

Sebenarnya, bahkan ada jalan pintas ke "objek JavaScript paling sederhana di dunia" di atas. Anda tidak perlu mendefinisikan fungsi objek untuk membuat objek tanpa tulang. JavaScript mendukung objek Object () generik, yang bisa Anda gunakan untuk membuat objek baru. Hal berikut ini melakukan hal yang sama seperti di atas, tanpa fungsi objek eksplisit:

eenie = Objek baru (); 

Mendefinisikan properti baru ke objek yang sudah dibuat