הנך נמצא: מדריך בסיסי / שיעור 2 / דף 3
 


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


דפים בשיעור זה:
1: מדריך ה-Javascript
2: דוגמת המשתנים
3: הקסם שבמחרוזות
4: תרגול משתנים
5: סיעוף אם-אז
6: דוגמא פשוטה לסיעוף
7: תרגול אם-אז
8: מאורעות קישור
9: החלפת תמונות
10: תרגיל 2
11: סיכום
|
|
|
|
|
|
|
|
|
|
|
|

שיעור 2

דף 3: הקסם שבמחרוזות.

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

var nice_monkey = "The monkey smiles at you and recites Shakespeare.";
var bad_monkey = "The monkey scowls at you and burps.";

הדבקת הצהרות אלו לקוד Javascript מצהירה על המשתנים nice_monkey ו- bad_monkey וקובעת את ערכם להיות המחרוזות הרשומות. ברגע שעשית זאת תוכל לרשום: document.writeln(nice_monkey); בכל פעם שתרצה ש- Javascript ירשום את ההודעה הארוכה אודות מעשיהם של קופים נחמדים.

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

הקוד מתחיל בשורה חדשה:

var monkey = prompt("What's the monkey's name?", "The monkey");

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

נשים לב, כי מתודת prompt מקבלת שני פרמטרים, שניהם מחרוזות. האחד קובע מה יוצג למשתמש בתיבת הדיאלוג, במקרה זה: "What's the monkey's name?". והשני "The monkey" בדוגמא זו, קובע ערך ברירת מחדל של תיבת הקלט (הערך שיוחזר במידה והמשתמש לא יקליד דבר). אם אין ברצונך לקבוע ערך ברירת מחדל, פשוט העבר מחרוזת ריקה ("") כפרמטר השני, כך:

var monkey = prompt("What's the monkey's name?", "");

השורות אח"כ הן פשוט השמות למשתנים – כפי שאנו כבר מכירים. אח"כ אנו נתקלים בשורה חדשה:

var techy_monkey = monkey + demanding + tech;

שורה זו מציגה בפנינו פעולת מחרוזת חדשה: סימן חיבור. כאשר תו החיבור מופיע בין שתי מחרוזות או שני משתנים המכילים מחרוזות הכוונה היא לחיבור משורשר (האחד אחרי השני).כך ששורה זו יוצרת משתנה חדש בשם techy_monkey שמכיל מחרוזת שהיא עצמה מורכבת משרשור של שלושה משתנים (המכילים מחרוזות). במקרה זה: "The monkey" + "demands, no insists upon receiving" + "a computer that won't crash, and a homemade browser!". במילים אחרות, ניתן לומר שהפקודה:

var techy_monkey = monkey + demanding + tech;

במקרה זה, היא בדיוק כמו לרשום:

var techy_monkey = "The monkey demands, no, insists upon receiving a computer that won't crash, and a homemade browser!";

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

var italic_hippy = hippy_monkey.italics();
var shouting_hippy= hippy_monkey.toUpperCase();
var red_bold_tech = bold_tech.fontcolor('red');

הראשונה מבין שלושת השורות למעשה, לוקחת את המחרוזת שמכיל המשתנה hippy monkey והופכת אותו לפונט איטלקי (כתב נטוי). זה ממש כמו לרשום:

var italic_hippy = "<i>" + hippy_monkey + "</i>";

רק שנראה הרבה יותר טוב בקוד. בכל מקרה, כשתרשום אח"כ: (document.writeln (italic_hippy בקוד ה- Javascript, תקבל את המחרוזת ב- hippy_monkey בפונט איטלקי.

השורה השנייה בדוגמא, המצהירה על shouting_hippy, מראה טריק שלא תוכל לבצע באמצעות קוד HTML בלבד. היא לוקחת את מה שיש במשתנה hippy_monkey והופכת את כל האותיות לאותיות גדולות (באנגלית – uppercase letters).

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

string.fontcolor('new color');

תוכל גם לעשות זאת ע"י:

var red_bold_tech = "<font color='red'>" + bold_tech + "</font>";

אבל זה לא פשוט כמו:

var red_bold_tech = bold_tech.fontcolor('red');

ראית הכל בדוגמא זו פרט לשורה זו:

document.writeln(bold_tech + "<br>");

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

var broken_bold = bold_tech + "<br>";
document.writeln(broken_bold);

אבל אז נאלץ להגדיר משתנה נוסף, והוספת שורה חדשה כשהדבר באמת אינו הכרחי.

כעת, כשלמדת הכל אודות משתנים ומחרוזות, הגיע הזמן להתחיל לתרגל.

לחץ על כפתור הדף הבא, על מנת לראות את דוגמת המשתנים הראשונה שלך.

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

לדף הבא «--

 
       
       
   
 
 

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