'JavaScript מותאם אישית': פונקציות, אובייקטים ושיטות המוגדרים על ידי המשתמש

כשפת תכנות מודרנית, JavaScript תומך בהרחבה מלאה בכך שהוא מאפשר לך להגדיר את הפונקציות שלך. זה מאפשר לך ליצור רוטינות שבהן תוכל להשתמש שוב ושוב. אתה חוסך זמן בשימוש חוזר ב"רכיבים "נפוצים, ובעיצוב פונקציות משלך תוכל להרחיב את שפת הבסיס של JavaScript בהתאם לצרכים שלך. חשוב על זה כעל "JavaScript מותאם אישית".

מכיוון ש- JavaScript מבוסס על אובייקטים, ניתן להפוך פונקציית JavaScript בקלות לאובייקט, ולשיטה עבור אותו אובייקט. לכן, לא רק שאתה יכול ליצור אובייקטים המוגדרים על ידי המשתמש לצורך הצעת המחיר שלך, אתה יכול ליצור אובייקטים משלך המתנהגים בדיוק באופן הרצוי לך. ותוכל ליצור שיטות הפועלות על אובייקטים אלה. אמנם זה נשמע עוצמתי - וזהו - תהליך יצירת פונקציות, אובייקטים ושיטות קל מאוד ב- JavaScript.

הצגת פונקציות

השתמש בהצהרת הפונקציה כדי ליצור פונקציית JavaScript משלך. התחביר העצם הוא:

שם פונקציה ( פאראמים ) { ... דברים פונקציה ... }
  • שם הוא השם הייחודי של הפונקציה. כל שמות הפונקציות בסקריפט חייבים להיות ייחודיים.
  • params הוא משתנה פרמטר אחד או יותר שאתה מעביר לפונקציה.
  • דברים פונקציה הם ההוראות המבוצעות על ידי הפונקציה. אתה יכול לשים כאן כמעט כל דבר.

שימו לב לדמויות הסוגר {ו}; אלה מגדירים את בלוק הפונקציות , והם הכרחיים בהחלט. הפלטה מספרת JavaScript היכן פונקציה מתחילה ומסתיימת. הסוגריים סביב הפרמטרים נדרשים גם כן. כלול את הסוגריים גם אם הפונקציה אינה משתמשת בפרמטרים (ורבים לא).

שמות לפונקציות המוגדרות על ידי המשתמש תלוי בך, כל עוד אתה משתמש בתווים אלפאנומריים בלבד (גם התו תחתון _ מותר). שמות פונקציות חייבים להתחיל בתו אות, אך יכולים לכלול מספרים במקום אחר בשם.

דבקתי בסגנון ה- JavaScript של שימוש באותיות רישיות של הפונקציה - כלומר, אותיות קטנות ראשוניות ואז תווים באותיות רישיות אם שם הפונקציה מורכב ממילים מורכבות. לדוגמה, myFuncName, yourFuncName, או theirFuncName. שמות פונקציות רגישים לאותיות רישיות; הקפד להשתמש באותה אותיות רישיות כאשר אתה מתייחס לפונקציה במקום אחר בתסריט. JavaScript מחשיב myFuncשונה מ- Myfunc.

כדי להבדיל בין פונקציות ומשתנים, אני מעדיף לתת למשתנים שלי תווים ראשוניים ראשוניים, כגון MyStuff. זה מיד מבדיל אותו מפונקציה, שמשתמשת באותיות רישיות myStuff. כמובן, אתה חופשי לאמץ כל תכנית היוון שתרצה.

הגדרת פונקציה ושימוש בה

הדרך הטובה ביותר לתאר כיצד ומדוע פונקציה היא להראות פונקציה פשוטה בפעולה. הנה פונקציה בסיסית המציגה "שלום, JavaScripters!" והיא המראה ברורה על "שלום עולם!" דוגמה שאתה רואה עבור שפות תכנות חדשות.

function basicFunction () {alert ("שלום JavaScripters!"); }

זה רק מגדיר את הפונקציה. JavaScript לא יעשה עם זה כלום אלא אם כן מפנים את הפונקציה למקום אחר בסקריפט. עליך להתקשר לפונקציה כדי להשתמש בה. קריאה לפונקציה המוגדרת על ידי המשתמש זהה להתקשרות לפונקציית JavaScript מובנית - אתה רק מספק את שם הפונקציה בסקריפט שלך. זה משמש כשיחת הפונקציה. כאשר JavaScript נתקל בשיחת הפונקציה, הוא מתנתק כדי להשלים את כל ההוראות בפונקציה זו. לאחר סיום הפונקציה JavaScript חוזר לנקודה מיד לאחר קריאת הפונקציה ומעבד את שארית התסריט.

כדי להתקשר לפונקציה שלמעלה, כלול רק את הטקסט basicFunction () - שימו לב לסוגריים הריקים, כנדרש. הנה דוגמא לעבודה של תוכנית Hello JavaScripters.

פונקציה בסיסית פונקציה דוגמה basicFunction () {alert ("שלום JavaScripters!"); }

פונקציה בסיסית();

העמוד נטען.

הדפדפן מעבד את תוכן התג עם טעינת המסמך. כאשר הוא נתקל basicFunction()בשיחת הפונקציה, הוא מושהה לרגע כדי לעבד את הפונקציה, ותיבת התראה מופיעה. לחץ על אישור ושאר הדף מסתיים בטעינה.

מתקשר לפונקציה עם מטפל באירועים

דרך נפוצה להתקשר לפונקציה היא לכלול התייחסות אליה בכפתור טופס או בקישור היפר-טקסט. עיבוד פונקציה המוגדרת על ידי המשתמש כאשר המשתמש לוחץ על כפתור טופס הוא אולי הקל מכולם. אתה משתמש במטפל האירועים onClick כדי לומר ל- JavaScript שכאשר המשתמש לוחץ על הכפתור, יש לעבד את הפונקציה שצוינה. הנה גרסה מתוקנת של הדוגמה הקודמת, המראה כיצד קוראים ל- BasicFunction כאשר לוחצים על כפתור הטופס.

פונקציה בסיסית פונקציה דוגמה basicFunction () {alert ("שלום JavaScripters!"); }

לחץ להתקשרות.

שימו לב לתחביר onClick בתג. האירוע שברצונך לעבד בלחיצה הוא שיחה basicFunction. אירוע זה מוקף בציטוטים כפולים.

העברת ערך לפונקציה

פונקציות JavaScript תומכות בהעברת ערכים - או פרמטרים - אליהם. ניתן להשתמש בערכים אלה לעיבוד בתוך הפונקציה. למשל, במקום שתיבת ההתרעה תאמר "שלום JavaScripters!" בכל פעם שאתה קורא לזה, אתה יכול להגיד את זה כל מה שאתה אוהב. ניתן להעביר את הטקסט לתצוגה כפרמטר לפונקציה.

כדי להעביר פרמטר לפונקציה, ספק שם משתנה כפרמטר בהגדרת הפונקציה. לאחר מכן אתה משתמש בשם המשתנה הזה במקום אחר בפונקציה. לדוגמה:

פונקציה basicExample (טקסט) {התראה (טקסט); }

שם המשתנה הוא Text, ומוגדר כפרמטר לפונקציה. משתנה זה משמש אז כטקסט להצגה בתיבת ההתראה. בעת קריאה לפונקציה, ספק את הטקסט שברצונך להציג כפרמטר לשיחת הפונקציה:

basicExample ("זה אומר כל מה שאני רוצה"); 

העברת ערכים מרובים לפונקציה

אתה יכול להעביר מספר פרמטרים לפונקציה. כמו בפונקציות ושיטות JavaScript מובנות, הפרד את הפרמטרים בפסיקים:

multipleParams ("אחד", "שניים"); ... פונקציה multipleParams (Param1, Param2) {...

כאשר אתה מגדיר פונקציה עם מספר פרמטרים, ודא שהפרמטרים מופיעים באותו סדר בשיחת הפונקציה. אחרת, קוד ה- JavaScript שלך עשוי להחיל את הפרמטרים על המשתנים הלא נכונים, והפונקציה שלך לא תפעל כמו שצריך.

הנה דוגמא לעבודה לפונקציה עם מספר פרמטרים. נדרשים שני פרמטרים: מחרוזת קלט וערך מספר. ערך המספר מציין כמה תווים משמאל למחרוזת שברצונך להציג בתיבת ההתראה. כאשר אתה מריץ את הסקריפט הבא, תיבת ההתראה מציגה "זהו" - שבע התווים הראשונים של מחרוזת הקלט.

דוגמה משתנה גלובלית lefty ("זה מבחן", 7);

function lefty (InString, Num) {var OutString = InString.substring (InString, Num); התראה (OutString); }

החזרת ערך מפונקציה

הפונקציות שתוארו עד כה אינן מחזירות ערך; כלומר, הם עושים את כל הקסמים שאתה רוצה שיעשו ואז יגמרו. הפונקציה לא מספקת ערך "פלט". בכמה שפות אחרות, פונקציות חסרות החזרה כאלה נקראות תת-דרכים. עם זאת, ב- JavaScript (כמו ב- C ו- C ++), "פונקציות הן פונקציות" בין אם הן מחזירות ערך ובין אם לאו.

קל להחזיר ערך מפונקציה: השתמש בהצהרת ההחזרה יחד עם הערך שברצונך להחזיר. זה שימושי כאשר אתה רוצה שהפונקציה שלך תעבור נתונים מסוימים ותחזיר את התוצאה המעובדת. קח את הפונקציה "שמאלנית" מלמעלה. במקום להציג את המחרוזת הקצוצה, אתה יכול להחזיר אותה לפונקציית הקריאה, ולהשתמש בערך ההחזרה בכל דרך שתרצה.

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(); 

למעשה, יש אפילו קיצור דרך ל"אובייקט ה- JavaScript הפשוט ביותר בעולם ". אינך צריך להגדיר פונקציית אובייקט כדי ליצור אובייקט חשוף לעצמות. JavaScript תומך באובייקט גנרי () כללי, שבו אתה יכול להשתמש כדי ליצור אובייקטים חדשים. הדברים הבאים עושים את זה כמו לעיל, ללא פונקציית אובייקט מפורשת:

eenie = אובייקט חדש (); 

הגדרת מאפיינים חדשים לאובייקטים שכבר יוצרו