ג'אווהסקריפט עם פלאש

כללי - שיעור זה מסביר אך ורק כיצד ניתן לשלב קוד ג'אוהסקריפט בעמוד עם פלאש והוא מהווה אך ורק צעד כניסה לשפה המורכבת הזו על מנת שתדע/י כיצד להשתמש בשפה, בדגש על שיתוף הפעולה עם פלאש. ג'אווהסקריפט פותחה ע"י חברת "נטסקייפ" כשפת תכנות עבור הדפדפן, אשר תוכל לשלוט במאפייני הדפדפן ותעצים את חווית המשתמש באתר. שפת ג'אווהסקריפט תהיה מוכרת לכל מי שמכיר action-script מפלאש - שתיהן מבוססות על תקן EMCA-262 ופקודות רבות מפלאש (שלא מתייחסות לאובייקטים ייחודיים לפלאש) וגם צורת הכתיבה זהות לחלוטין. על מנת לשלב קוד ג'אווהסקריפט בעמוד עלינו להגדיר את המתחם שבו יכתב הסקריפט (ולא יוצג כטקסט רגיל בעמוד). דבר זה נעשה ע"י שימוש בתג Script תוך ציון השפה בה אנו משתמשים. על מנת שהקוד לא יוצג כטקסט רגיל בדפדפנים ישנים שלא תומכים בג'אווהסקירפט (אקספלורר 2 למשל) ולכן לא ידעו לפרש את התג script (ויציגו אותו כטקסט, כולל התוכן) אנחנו מקיפים את הקוד בהערת HTML. <script language=javascript> <!-- //--> </script> את התג הזה נהוג לרשום בין תגי ה - HEAD של המסמך, אך ניתן גם להשתמש בסקריפט גם בתוך חלק ה BODY. ניתן לרשום יותר מתג אחד במסמך, וניתן גם להשתמש בקישור לקובץ חיצוני עם הסקריפט בלבד. שפת ג'אווהסקריפט היא Case-Sensitive כלומר כל פקודה, משתנה או שם כלשהוא חייב להיכתב באותה צורה לכל אורך הסקריפט, מבחינת אותיות גדולות וקטנות באנגלית. המשתנה varName שונה מהמשתנה varname וכו' . היות ושיעור זה מתרכז בשיתוף הפעולה עם פלאש, נבחן את הקוד הרשום בעמוד כאשר אנחנו מייצאים סרטון פלאש עם תמיכה ב-fscommand (מספרי השורות הם תוספת שלי):

<SCRIPT LANGUAGE=JavaScript> <!-- 1. var InternetExplorer = navigator.appName.indexOf("Microsoft") != -1; 2. // Handle all the the FSCommand messages in a Flash movie 3.function myMovie_DoFSCommand(command, args) { 4. var myMovieObj = InternetExplorer ? myMovie : document.myMovie; // 5. // Place your code here... // 6. } 7. // Hook for Internet Explorer 8. if (navigator.appName && navigator.appName.indexOf("Microsoft") != -1 && 9. navigator.userAgent.indexOf("Windows") != -1 && navigator.userAgent.indexOf("Windows 3.1") == -1) { 10. document.write('<SCRIPT LANGUAGE=VBScript\> \n'); 11. document.write('on error resume next \n'); 12. document.write('Sub myMovie_FSCommand(ByVal command, ByVal args)\n'); 13. document.write(' call myMovie_DoFSCommand(command, args)\n'); 14. document.write('end sub\n'); 15. document.write('</SCRIPT\> \n'); 16.} //--> </SCRIPT> קוד זה מיוצר אוטומטית כשעושים publish , כאשר השמות משתנים בהתאם לשם הסרט שלנו (במקרה הזה, myMovie). הקוד נכתב בתחילת חלק ה - BODY של המסמך, ולא בחלק ה - HEAD שלו, על מנת לאפשר כתיבת תוספת לעמוד במידה ומדובר בדפדפן אקספלורר על גבי חלונות 95 ומעלה (הסבר בהמשך). בשורה מס' 1, מוגדר משתנה בשם internetExplorer שמקבל ערך true או false בהתאם לבדיקה שנעשית בהמשך השורה: האם הטקסט "microsoft" קיים בתוך המחרוזת שמחזיר הביטוי navigator.appName (שמחזיר "Microsoft Internet Explorer" אם מדובר בדפדפן אקספלורר). המספר שמוחזר יהיה שווה ל "1-" רק אם לא מדובר באקספלורר. סימן ה - "=!" שבהמשך משווה את התוצאה למספר 1-, ומחזיר true לתוך המשתנה InternetExplorr שהוגדר אם התוצאה לא שווה ( או false אם המספר שהוחזר שווה ל 1-). קיימת חשיבות לאבחנה בין אקספלורר לנטסקייפ (או כל דפדפן אחר) היות ושיטת הכתיבה שונה כאשר רוצים לגשת לאובייקט מסויים בדף (פירוט בהמשך). שורה מס' 2 היא שורת הערה - אין לה כל חשיבות מבחינת הקוד והיא כתובה רק לשם הסברים. הערה בג'אווהסקריפט מסומנת ע"י שני תווי "/" עוקבים ניתן גם לסמן קטע שלם כהערה ע"י כתיבת "*/" בתחילתו ו "/*" בסופו. שורה מס' 3 מגדירה פונקציה בשם myMovie_DOFScommand שמקבלת 2 פרמטרים: command ו args. אלו אותם השמות של פרמטרים אשר ניתן להעביר מתוך פלאש כאשר משתמשים בפקודת fscommand. שורה מס' 4 מגדירה משתנה נוסף (myMovieObj) אשר קובע את הדרך בה ניגש לאובייקט פלאש שבעמוד. בעזרת המשתנה שהוגדר קודם, InternetExplorer אנחנו יודעים אם מדובר באקספלורר או דפדפן אחר. בשורה זו יש שימוש בצורת כתיבה מקוצרת של משפט תנאי. (condition)?(return for true):(return for false) ; במקרה שלנו, התנאי הוא הערך של המשתנה InternetExplorer, שמכיל בתוכו ערך true או false. אין צורך להשוות אותו לביטוי אחר, היות ואם התוצאה היא true "התנאי" יתקיים ולהפך. במקרה ומדובר בדפדפן אקספלורר , הערך שיוחזר הוא האובייקט myMovie (ולא מחרוזת - אין שימוש בגרשיים, ולכן הכוונה היא לאובייקט myMovie שהוא סרטון הפלאש שלנו) הצורך בשורה זו הוא לחסוך בקוד - בדרך זו, גם אקספלורר וגם נטסקייפ מיוצגים ע"י משתנה אחד (שקיבל את הערך שלו בעקבות התנאי שבדק באיזה דפדפן מדובר) ואין צורך לרשום את כל הקוד פעמיים, היות וסרטון הפלאש מיוצג ע"י משתנה אחד שמהווה קיצור דרך ל"כתובת" האמיתית של האובייקט (שימוש בקידומת document או לא, כמו שנוכל לראות בחלק הימני של התנאי שבשורה). בשורה 6 מסתיימת הפונקציה (סוגריים מסולסלים אשר התחילו עם פתיחת הפונקציה) ובשורה 8 והלאה יש תנאי הבודק אם מדובר בדפדפן אקספלורר על גבי "חלונות" 95 ומעלה. כאשר אנחנו משתמשים בסרטון פלאש בעמוד וצופים בו בעזרת אקספלורר על "חלונות" אנחנו משתמשים בטכנולוגיה הקרויה activeX המצויה רק באקספלורר לחלונות, וזאת בשונה מנטסקייפ (אשר יש לו פלאגין שונה לצפייה). כאשר אנחנו רוצים לתקשר עם אובייקט הפלאש אנחנו צריכים "לעבור" דרך ה activeX וזה מתאפשר בעזרת פונקציה שנרשמת בעמוד במידה והתנאי מתקיים, בעזרת הפקודות document.write שכותבות סקריפט נוסף אשר מקבל את הפקודות מהפלאש ומעביר אותן הלאה לפונקציה המקבילה בגאוהסקריפט. כאשר אנחנו רוצים להפעיל פונקציות גאווהסקריפט מתוך פלאש, נכתוב את הקוד הפרטי שלנו במקום שורה 5 (כלומר בתוך הפונציה האחראית לקבלת הפקודות מפלאש) pre> if (command=="sayit"){ alert (args); }else if (command=="make_it_large"){ self.resizeTo(screen.availWidth,screen.availHeight); }else{ self.resizeTo(500,args); } בדוגמא יש 3 אפשרויות - בלחיצה על הכפתור העליון, העברתי 2 פרמטרים (command וגם args), בתנאי אני בודק את הערך של command ובמידה והוא שווה לשם שכתבתי בפלאש, אני מוציא הודעת אזהרה למשתמש וכותב בה את תוכן המשתנה args שקיבלתי. במידה והתנאי לא מתקיים, אני בודק אם command שווה לפקודה שביקשתי בכפתור השני, שהו העברתי רק את הפרמטר command (ללא args). אין לי צורך בפרמטר נוסף, כי הגדלת המסך נעשית ללא פרמטרים מהפלאש (אלא בעזרת האובייקט screen שמחזיר נתונים על הרזולוציה במקרה הזה). בכפתור השלישי העברתי רק את הפרמטר args (שמכיל מספר). מומלץ להשתמש בשניהם למניעת טעויות, אבל לצורך הדוגמא, ניתן לעשות זאת גם כך. הערה חשובה - כאשר עושים publish, נוצר אוטומטית דף HTML חדש לגמרי, אשר משכתב את התוכן של הדף הקודם (אם היה כזה) ולכן כאשר בונים עמוד בשילוב עם ג'אווהסקריפט רצוי לשנות את השם של עמוד ה HTML שבו מוטבע הסרטון על מנת שלא תמחק כל העבודה שנעשתה בדף HTML על הגאווהסקריפט. להורדת דוגמא לחצו כאן

בהצלחה שיעור זה נכתב ע"י אופיר אברהמוב. להערות והצעות : ofir24@hotmail.com