פרק 19: האובייקטים Link ו- Anchor
·
הקדמה
·
התכונות
שקיימות באובייקט Link
·
הטיפול
באירועים באובייקט Link
·
התכונות
שקיימות באובייקט Anchor
·
תרגילים
הקדמה
כאשר
מוסיפים קישור אל תוך מסמך HTML, עושים זאת באמצעות הוספת התגית <A>
כשלתוכה מוסיפים את התכונה href כשערכה הוא ה-URL
שאליו הלחיצה על הקישור תוביל את הדפדפן. שימוש נוסף שיש לתגית <A> הוא סימונם של מקטעים במסמך. זאת נעשה באמצעות הוספת התכונה NAME אל
תוך התגית <A>
(אם נושא זה איננו מוכר לך, כדאי לך לפנות לספר מקיף בנושא HTML כגון: "המדריך הישראלי ל-HTML" אשר נכתב על ידי).
כאשר
עושים שימוש בתגית <A>
כדי לייצור קישור (hyperlink)
הדפדפן יוצר אובייקט מסוג Link אשר מייצג אותו. כאשר עושים שימוש בתגית <A>
כדי לסמן מיקום מסוים במסמך הדפדפן יוצר אובייקט מסוג Anchor כדי לייצג אותו.
בפרק
שסקר את האובייקט document הוצגה
התכונה links
אשר קיימת בכל document.
תכונה זו היא למעשה מערך שאיבריו הם references לאובייקטים מסוג Link.
התכונות שקיימות באובייקט Link
כמו
בכל אובייקט ב-javaScript גם
באובייקט Link
קיימות תכונות אשר ניתן לעשות בהן שימוש. בחלק זה אציג סקירה של תכונות אלה.
התכונה
target
תכונה
זו מכילה את הערך המחרוזתי שהושם אל תוך התכונה TARGET
, אשר ניתנת להוספה אל תוך התגית <A> (אם תפקידה של התכונה TARGET בקישור שיוצרים באמצעות HTML איננו זכור לך תוכל לקבל הסברים נוספים על תכונה זו בספרי: המדריך
הישראלי ל-HTML 4.0).
תכונה
זו נתמכת על ידי Internet Explorer החל מגרסה 3, ועל ידי Netscape
Nevigator החל מגרסה 2. כל
שינוי בערכה של תכונה זו אשר ייכתב ב-javaScript יישאר בתוקף כל עוד המסמך לא ייטען מחדש (חשוב לזכור זאת !).
התכונה
text
תכונה
מכילה את מחרוזת התווים אשר נכתבת בין שתי התגיות שיוצרות את הקישור במסמך ה-HTML: <A> ו- </A>. ערכה של תכונה זו הוא read only:
ניתן לקבלו אך לא לשנותו. תכונה זו
נתמכת על ידי Netscape Nevigaotr החל מגרסה 4 והיא איננה נתמכת על ידי Internet
Explorer.
התכונות
X ו-Y
תכונות
אלה מכילות את הקואורדינטות של פינתו השמאלית העליונה של השטח שמשמש את הקישור.
ערכן של שתי תכונות אלה הוא read only: ניתן לקבלו אך לא לשנותו. שתי תכונות אלה נתמכות על ידי Netscape Nevigator
החל מגרסה 4, והן אינן נתמכות על ידי Internet
Explorer.
הטיפול באירועים באובייקט Link
קיימים
מספר event handlers
אשר ניתן להוסיף אל תוך התגית שיוצרת קישור ובכך לטפל בevents- ממספר סוגים שונים. בחלק זה של הפרק אסקור את התכונות אשר ניתן
להוסיף אל תוך התגית <A>
אשר יוצרת קישור, ושבאמצעותן ניתן לקבוע שפקודות מסוימות (או functions)
תתבצענה כתגובה לאירועים השונים.
onClick ו- onDblClick
באמצעות
הוספת התכונה onClick אל
תוך התגית <A>
אשר יוצרת קישור ניתן לקבוע את ביצועה/ן של פקודות/מתודות מסוימות ב-javaScript
כתגובה ללחיצה על הקישור, וזאת לפני שהקישור יפעל. המתודה onDblClick דומה למתודה onClick אלא שהיא מתייחסת ללחיצה כפולה על מקש העכבר. הטיפול בשני events
אלה נתמך על ידי Internet Explorer החל מגרסה 3, ועל ידי Netscapr
Nevigator החל מגרסה 2.
onMouseDown ו- onMouseUp
באמצעות
שתי תכונות אלה ניתן לקבוע את ביצוען של פקודות כתגובה לאירוע שנוצר כאשר המשתמש
לוחץ על העכבר והעכבר מצביע על שטח שמשמש קישור, ולאירוע שנוצר כאשר המשתמש מרפה
מלחיצתו על העכבר כאשר הוא הצביע על קישור. שתי תכונות אלה (מוסיפים אותן אל תוך
התגית <A>)
נתמכות על ידי Internet Explorer החל מגרסה 4, ועל ידי Netscape
Nevigator החל מגרסה 4 (גם
כן).
onMouseOver ו- onMouseOut
באמצעות
הוספת שתי תכונות אלה אל תוך התגית <A>
ניתן לקבוע כי פקודות מסוימות תתבצענה כאשר המשתמש מעביר את העכבר מעל הקישור
(באמצעות התכונה onMouseOver) או
כאשר הוא מעביר את העכבר אל מחוץ לשטח שמשמש את הקישור(באמצעות התכונה onMouseOut).
כאשר
משתמשים בכל אחת משתי התכונות יש לקבוע את ערכן כך שיהיה מחרוזת תווים אשר כוללת
פקודה(או הפעלה של מתודה) אחת או יותר, ויש להקפיד על כך שהפקודה (או המתודה)
האחרונה שמתבצעת תחזיר את הערך true (או ערך אחר ששקול ל-true).
onMouseOver
נתמך על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet
Explorer החל מגרסה 3.
OnMouseOut
נתמך על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet
Explorer החל
מגרסה 4.
התכנית
הבאה מדגימה את אחד השימושים השכיחים ביותר שקיימים לארבעת התכונות שהוצגו: יצירת
קישור שמורכב מתמונה אשר משתנה כאשר המשתמש לוחץ על הקישור או מצביע עליו עם
העכבר.
<!-- file name : eventsDemo.html -->
<!-- 2000(c) Zindell Publishing House Ltd.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.0//EN">
<HTML>
<HEAD>
<TITLE>eventsDemo.html</TITLE>
<SCRIPT LANGUAGE="javaScript1.2">
function mousyDown()
{
document.home.src="homeDown.gif";
}
function mousyUp()
{
document.home.src="homeUp.gif";
}
function mousyOver()
{
document.home.src="homeOver.gif";
}
function mousyOut()
{
document.home.src="homeUp.gif";
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Demo of onMouseOver, onMouseOut, onMouseDown and
onMouseUp</H1>
<A HREF="http://www.zindell.com"
onMouseDown="mousyDown();return true"
onMouseUp="mousyUp();return true"
onMouseOver="mousyOver()"
onMouseOut="mousyOut()">
<IMG SRC="homeUp.gif" WIDTH="320"
HEIGHT="180" NAME="home"></A>
</BODY>
</HTML>
ניתן
לראות בדוגמא שימוש בתכונה SRC אשר קיימת באובייקט שמייצג תמונה. אובייקט ה-Image
(האובייקט שמייצג תמונה ב-javaScript) יוצג ויסבר בהמשכו של הספר.
התכונות שקיימות באובייקט Anchor
כאשר
מוסיפים אל תוך התגית <A> את
התכונה NAME
גורמים להפיכתו של המרכיב <A>
למרכיב אשר מסמן מיקום מסוים במסמך, וגורמים להיווצרותו של אובייקט ANCHOR
אשר מייצג את המרכיב האמור במסמך.
בחלק
זה אסקור את התכונות שקיימות באובייקט Anchor.
התכונה
name
ערכה
של תכונה זו הוא הערך המחרוזתי שניתן לתכונה NAME אשר הוספה אל תוך התגית <A>
כדי שהיא תשמש בתור סימון של מקטע במסמך. תכונה זו נחשבת ל-read
only, כלומר, ניתן לקרוא
את ערכה אך לא ניתן לשנותו. תכונה זו נתמכת על ידי Netscape
Nevigator החל מגרסה 4, ועל
ידי Internet Explorer החל מגרסה 4.
התכונה
text
ערכה
של תכונה זו הוא מחרוזת התווים אשר מופיעה בין התגיות: <A> ו-
</A>. תכונה זו היא read only, כלומר: ניתן לקרוא את ערכה אך לא ניתן לשנותו. התכונה נתמכת על
ידי Netscape Nevigator החל מגרסה 4, והיא איננה נתמכת על ידי Internet
Explorer.
התכונות
x ו-y
שתי
תכונות אלה מכילות את הקואורדינטות של פינתו השמאלית העליונה של מרכיב ה-Anchor
שמופיע במסמך. תכונות אל הן read only, והן פועלות בדומה לתכונות x ו- y אשר קיימות באובייקט Link. שתי תכונות אלה נתמכות על ידי Netscape
Nevigator החל מגרסה 4, והן
אינן נתמכות על ידי Internet Explorer.
תרגילים
1.
כתוב/כתבי
מסמך HTML
אשר מציג קישורים למסמכים אחרים. כל קישור יציג תמונה אשר תתחלף בתמונה אחרת כאשר
הגולש מצביע עם העכבר עליה, וכאשר הוא לוחץ עליה. כל קישור יוצג באמצעות שלוש
תמונות אשר תתחלפנה בהתאם. יש לשים לב לכך שכאשר העככר כבר לא מצביע על הקישור
התמונה חוזרת להיות התמונה אשר מוצגת כשהמשתמש לא מצביע עם העכבר על התמונה.
2000 © All the rights reserved to Haim Michael & Zindell Publishing
House Ltd.
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)
לנוחיותך, להלן תוכן
העניינים של הספר: