הנך נמצא: גניבת קוד / שיעור 1 / דף 3
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: פתיחה
2: תוויות קוד JavaScript
3: פונקציות (וארגומנטים)
4: ארועים
5: הכל עובד יחד
|
|
|
|
|
|

גניבת קוד

דף 3: פונקציות (וארגומנטים).

האם אתה זוכר את קטע הקוד הבא (מהדוגמא הקודמת):

function setBackgroundColor(color1, color2, color3, color4)
{
  theColors = new Array(color1, color2, color3, color4);
  var whichColor = Math.round(Math.random()*1000) % 4;
  document.bgColor = theColors[whichColor];
}

קוד זה קרוי פונקציה, זהו למעשה אוסף של פקודות הקשורות לאותו הנושא ומאוגדות יחד על מנת להתבצע יחד. קל מאוד לזהות פונקציה, מכיוון שהיא תמיד מתחילה במילה (הפתעה!) Function, ומלווה בשם הפונקציה (במקרה זה "setBackgroundColor"). בסוגריים, שלאחר השם מופיעים הארגומנטים של הפונקציה. גוף הפונקציה תחום ע"י הסוגריים המסולסלים ({ ... }).

ארגומנטים, משתנים וטיפוסים (Arguments, Variables and Type)

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

<code>setBackgroundColor('red','green','blue','black');</code>

(בדוגמא זו ישנם ארבע ארגומנים, אחד לכל צבע).

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

var color1 = '#FF0000';
var color2 = 'red';
var color3 = 'green';
var color4 = 'blue';

function setBackgroundColor()
{
  theColors = new Array(color1, color2, color3, color4);
  var whichColor = Math.round(Math.random()*1000) % 4;
  document.bgColor = theColors[whichColor];
}

משתנים, מהווים דרך נוספת לאחסון מידע. ההצהרה var color1 = 'FF0000'; פירושה שלתוך המשתנה color1 יוכנס הערך 'FF0000'. מערך, הוא פשוט קבוצה של משתנים המסודרים בזה אחר זה.

theColors = new Array('#FF0000','red','green','blue');
function setBackgroundColor()
{
  var whichColor = Math.round(Math.random()*1000) % 4;
  document.bgColor = theColors[whichColor];
}

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

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

מחרוזת היא טקסט רגיל בעיקרה: "אני גונב קוד ג'אווה" או "I steal Java Script". מספרים הם, ובכן, מספרים: 2 או 4 או 2001. תמיד נכתוב מחרוזת בתוך מרחאות, בניגוד למספרים. למשל 2 הוא מספר אולם '2' היא מחרוזת (באופן דומה, 2+2 הוא המספר 4 בניגוד ל '2'+'2' שהיא המחרוזת '22').

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

<body onload="alert("this is bad")">
<body onload="alert('this is good')">

(אם אתה לא רואה את ההבדל, תן מבט שני במרחאות).

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

<body onload="alert(document.URL)">

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

כך נראה הקוד אשר יצר את הטופס:

<form name="myForm"
  onSubmit="alert('You entered: ' + document.myForm.myTextField.value);
  return false;">
  <input type="text" name="myTextField">
  <input type="submit" name="Submit" value="Submit">
</form>

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

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

var myLocation = document.URL;

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

קריאה לפונקציות

איך בכלל משתמשים בפונקציות? ובכן, ישנן שתי דרכים עקריות לקריאה לפונקציה. הדרך הישירה היא ע"י השמת שם הפונקציה בין תגיות <script> כמו כל פקודת JavaScript אחרת. למשל:

<script>
  <!-- remember to comment your script
  setBackgroundColor('#ff0000','#00ff00','#ffff00','#3333ff');
  // close the comment -->
</script>

שים לב כיצד המשתנים בין הסוגריים (ארבעת הצבעים) מתוארים.

הדרך השנייה בה ניתן לקרוא לפונקציה היא קצת יותר מעניינת. קוראים לה event handler, הדורשת הסבר נוסף.

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר