המדריך הישראלי ל-JavaScript, פרק 16

פרק 16: האובייקט Location

· הקדמה

· התכונות

· המתודות

· תרגילים

הקדמה

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

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>locationSimpleDemoCtrl.html</TITLE>

function go(str)

{

window.location = str;

}

</SCRIPT>

</HEAD>

<BODY>

</FORM>

</BODY>

</HTML>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>simple5.html</TITLE>

</HEAD>

<BODY>

<H1>SIMPLE5 - AWSOM !</H1>

</BODY>

</HTML>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>simple4.html</TITLE>

</HEAD>

<BODY>

<H1>SIMPLE4 - AWSOM !</H1>

</BODY>

</HTML>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>simple3.html</TITLE>

</HEAD>

<BODY>

<H1>SIMPLE3 - AWSOM !</H1>

</BODY>

</HTML>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>simple2.html</TITLE>

</HEAD>

<BODY>

<H1>SIMPLE2 - AWSOM !</H1>

</BODY>

</HTML>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>simple1.html</TITLE>

</HEAD>

<BODY>

<H1>SIMPLE1 - AWSOM !</H1>

</BODY>

</HTML>

התכונות

באובייקט האמור מספר תכונות. חלקן נגישות ללא כל בעיה וחלקן נגישות אך ורק ל-signed scripts. בחלק זה אסקור את התכונות שקיימות באובייקט.

יש לציין כי הגישה מ-window (או frame) מסוים לערכי תכונותיו של האובייקט Location ב-window (או frame) אחר לא מתאפשרת כאשר ה-domain וה-server של כל אחד מהחלונות (או ה-frames) שונים. יוצא הדופן לכלל זה הוא כאשר מדובר ב-signed scripts.

התכונה hash

סימן ה-hash ב-URL הוא הסימן # אשר מציין כי על הדפדפן לעבור אל אותו חלק של המסמך אשר סומן באמצעות התגית <A> כשבתוכה הוספה התכונה NAME כשערכה מחרוזת טקסט מסוימת אשר מציינת את שמו של הסימון שנוצר. באמצעות קביעת ערכה של התכונה hash ניתן להורות לדפדפן לעבור לחלקים שונים של המסמך אשר סומנו באמצעות התגית <A> כשבתוכה הוספה התכונה NAME עם ערך מחרוזתי מסוים. התכונה hash נתמכת על ידי Internet Explorer החל מגרסה 3, ועל ידי Netscape Nevigator החל מגרסה 2. התכנית הבאה מדגימה את השימוש בתכונה זו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>locationHashDemo.html</TITLE>

function goTo(str)

{

window.location.hash = str;

}

</SCRIPT>

</HEAD>

<BODY>

simple seg1 text <BR> simple seg1 text <BR> simple seg1 text <BR>

<FORM>

<HR>

<HR>

</FORM>

simple seg2 text <BR> simple seg2 text <BR> simple seg2 text <BR>

<FORM>

<HR>

<HR>

</FORM>

simple seg3 text <BR> simple seg3 text <BR> simple seg3 text <BR>

<FORM>

<HR>

<HR>

</FORM>

</BODY>

</HTML>

התכונה host

תכונה זו מכילה מחרוזת תווים אשר מתארת גם את ה-hostname וגם את ה-port (אם קיים) של ה-URL של המסמך שמוצג בדפדפן. התכונה נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה hostname

תכונה זו מכילה מחרוזת תווים אשר מתארת את שם ה-server אשר מאחסן את המסמך. שם ה-server איננו כולל את מספר ה-port (גם אם הוא צוין כחלק מה-URL). תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה href

תכונה זו מכילה מחרוזת תווים אשר מתארת את ה-URL של המסמך שמוצג. כאשר מבצעים השמה של URL אל תוך האובייקט Location למעשה מבצעים את ההשמה אל תוך התכונה href אשר קיימת בו. מסיבה זו, כדי לגרום לדפדפן להציג מסמך אחר, שב-URL שלו הוא http://www.zindell.com, למשל, ניתן לעשות זאת בכל אחת משתי הדרכים הבאות:

window.location = "http://www.zindell.com"

או

window.location.href = "http://www.zindell.com"

התכונה נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה pathname

תכונה זו מכילה מחרוזת תווים אשר מתארת את ה-path שבו המסמך שמור בשרת. ה-path איננו כולל בתוכו את שם השרת. כך למשל, אם המסמך שמור בספריה הראשית של השרת אז הערך של התכונה location.pathname יהיה לוכסן אחד בודד: / כשאחריו השם של המסמך. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה port

תכונה זו מכילה מחרוזת תווים אשר מתארת את מספר ה-port של ה-URL של המסמך המוצג. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

התכונה protocol

תכונה זו מכילה מחרוזת תווים אשר מתארת את הפרוטוקול שלפיו הגיעו נתוני המסמך המוצג. הפרוטוקול השכיח ביותר הוא הפרוטוקול http. פרוטוקולים אחרים שקיימים כוללים בין היתר את הפרוטוקולים הבאים: ftp, file ו- mailto. תכונה זו נתמכת על ידי NetscapeNevigator החל מגרסה 2, ועל ידי InternetExplorer החל מגרסה 3.

התכונה search

כאשר מפעילים מנוע חיפוש ניתן לראות כי אל ה-URL מתווספים צירוף תווים מיוחד אשר מייצג את נתוני החיפוש המבוקש. צירוף התווים המיוחד עובר עיבוד על ידי תוכנית ה-CGI שמשמשת את מנוע החיפוש. התכונה הזו כוללת בתוכה את אוסף התווים המיוחד שנשלח אל מנוע החיפוש כדי שיעבור עיבוד על ידו. התכונה search כוללת בתוכה את כל התווים הנוספים שנרשמים בסופו של ה-URL ושמהווים, למעשה, ארגומנטים שנשלחים אל תוכנית CGI. תכונה זו נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

המתודות

בחלק זה ייסקרו המתודות שניתן להפעיל על האובייקט Location.

המתודה assign

מתודה זו מקבלת בעת הפעלתה מחרוזת תווים שמתארת URL וגורמת לדפדפן להציג את המסמך שזהו ה-URL שלו. הפעלת המתודה או, לחילופין, השמת הערך המתאים אל תוך התכונה href שקיימת באובייקט Location גורמת לתוצאה זהה. מתודה זו איננה מחזירה שום ערך. המתודה נתמכת על ידי Netscaep Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

המסמך הבא מדגים את השימוש במתודה זו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>locationAssignDemo.html</TITLE>

</HEAD>

<BODY>

</FORM>

</BODY>

</HTML>

המתודה reload

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

מתודה זו נתמכת על ידי Netscape Nevigator החל מגרסה 4, ועל ידי Internet Explorer החל מגרסה 3. המסמך הבא מדגים את ההבדלים שקיימים בין reload מלא (הפעלת המתודה reload על האובייקט location) לבין reload חלקי (לחיצה על המקש reload של הדפדפן). ביצוע reload חלקי אפשרי גם באמצעות הפעלת המתודה go מתוך האובייקט history ושליחת הערך 0 בעת הפעלתה.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>locationReloadDemo.html</TITLE>

</HEAD>

<BODY>

<H1>Demo of the location.reload() method</H1>

<BR><INPUT TYPE="checkbox"> I want to get a free access to the internet

<BR><INPUT TYPE="checkbox"> I want to get a free access to the zoo

<BR>

</FORM>

</BODY>

</HTML>

המתודה replace()

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

המסמך הבא מדגים את פעולתה של המתודה הזו.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN">

<HTML>

<HEAD>

<TITLE>locationReplaceDemo.html</TITLE>

</HEAD>

<BODY>

<H1>This is a demo of the location.replace() method</H1>

First, press the assign button and by that make the browser

to present simple1.html document. Later, try the back button

of the browser and see how the browser return to this document.

<BR>

Later, press the replace button and by that see how the browser

present the simple1.html document and how you can't return to this

document by pressing the back button. <BR>

</FORM>

</BODY>

</HTML>

תרגילים

1. כתוב/כתבי תכנית ב-javaScript אשר תציג בתוך חלון חדש שיווצר מצגת של תמונות אשר יתחלפו באופן עצמאי.

No parts of the contents of this paper may be reproduced or transmitted in any form by any means

without the written permission of the publisher ! This book can be used for personal use only !!!

Brought to you by Zindell

(http://www.zindell.com)

לנוחיותך, להלן תוכן העניינים של הספר:

פרק 1 : הבסיס
פרק 2 : ערכים בסיסיים
פרק 3 : אופרטורים
פרק 4 : משפטי בקרה ולולאות
פרק 5 : פונקציות
פרק 6 : אובייקטים
פרק 7 : אובייקטים מובנים בשפה
פרק 8 : אופן פעולת האובייקטים
פרק 9 : תבניות טקסט
פרק 10 : שילוב של JavaScript ו- HTML
פרק 11 : טיפול באירועים
פרק 12 : האובייקטים שנוצרים בדפדפן
פרק 13 : האובייקט Navigator
פרק 14 : האובייקט Window
פרק 15 : האובייקט Document
פרק 16 : האובייקט Location
פרק 17 : האובייקט History
פרק 18 : יצירת cookies
פרק 19 : האובייקטים Link ו- Anchor
פרק 20 : האובייקט Image
פרק 21 : יצירת Image Map
פרק 22 : האובייקט Form
פרק 23 : טכנולוגית ה- LiveConnect