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

פרק 15: האובייקט Document

· הקדמה

· התכונות

· המתודות

· תרגילים

הקדמה

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

התכונות

התכונות שקיימות באובייקט כוללות תכונות שמכילות references לאובייקטים אחרים כגון forms[], מערך שמכיל references לכל האובייקטים מסוג form אשר מייצגים את מרכיבי ה-form שמופיעים במסמך. תכונות מסוג נוסף שקיימות באובייקט הן תכונות שמכילות ערכים שמאפיינים את אופן תצוגת המסמך, כגון, title, אשר כולל בתוכו את כותרת המסמך, ו-bgcolor אשר כולל בתוכו את צבע הרקע של המסמך. בחלק זה ייסקרו תכונותיו של האובייקט (שני הסוגים).

התכונות alinkColor, vlinkColor, bgColor, fgColor ו- linkColor

תכונות אלה מתארות את צבע הרקע של המסמך (bgColor), צבע הטקסט שמופיע בו(fgColor), ואת צבע הקישורים שהוספו אליו (linkColor לתיאור צבעו של קישור רגיל, vlinkColor לתיאור צבעו של קישור שכבר ביקרו בו ו- alinkColor לתיאור צבעו של קישור בעת הפעלתו). כל אחת מתכונות אלה מקבלות ערך שהוא מחרוזת תווים בגודל 7: התו הראשון הוא הסימן #, ויתר 6 הספרות מהוות 3 מספרים בבסיס 16 (כל מספר בן שתי ספרות) אשר מתארים את חוזק 3 צבעי היסוד: red, green ו- blue. ניתן גם לתת לתכונות אלה ערך שהוא מחרוזת תווים, שמהווה את שמו של הצבע, ובלבד שאותו שם צבע נתמך על ידי הדפדפן.

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

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

<HTML>

<HEAD>

<TITLE>documentColorsDemo.html</TITLE>

function setText()

{

var str = "alinkColor = " + document.alinkColor;

str += "\nvlinkColor = " + document.vlinkColor;

str += "\nbgColor = " + document.bgColor;

str += "\nfgColor = " + document.fgColor;

str += "\nlinkColor = " + document.linkColor;

document.myForm.ta.value = str;

}

function changeColor(str)

{

document.bgColor = str;

setText();

}

function changeColorFg(str)

{

document.fgColor = str;

setText();

}

function changeColorLnk(str)

{

document.linkColor = str;

setText();

}

function changeColorVl(str)

{

document.vlinkColor = str;

setText();

}

function changeColorAl(str)

{

document.alinkColor = str;

setText();

}

</SCRIPT>

</HEAD>

<BODY>

<H1>Demo of alinkColor, vlinkColor, bgColor, fgColor and linkColor</H1>

Notice that not all of the following options are possible.<BR>

This depends on the computer operation system and on the browser type.<BR>

Changing the background will be probably possible (is usually does).<BR>

background color:<BR>

forground color:<BR>

link color:<BR>

visited links color:<BR>

active links color:<BR>

<BR><A HREF="http://www.zindell.com">ZINDELL</A>

<BR><A HREF="http://www.yahoo.com">YAHOO</A>

</FORM>

</BODY>

</HTML>

התכונה anchors

תכונה זו היא מערך של כל מרכיבי ה-Anchor שמופיעים במסמך. תכונה זו נתמכת על ידיNetsacpe Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3. כיוון שהתכונה נחשבת למערך היא מכיל, למעשה, reference לאובייקט שהוא מערך, ובתור שכזה, יש בו את התכונה length אשר מכילה את מספר איבריו.

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

<HTML>

<HEAD>

<TITLE>documentAnchorsDemo.html</TITLE>

function setText()

{

var str = "The number of anchors in this document is : ";

str += document.anchors.length;

document.myForm.tf.value = str;

str = "Anchors list:\n";

for (i=0; i<document.anchors.length; i++)

{

str +="anchor num."+i+" : " + document.anchors[i].text + "\n";

}

document.myForm.ta.value = str;

}

</SCRIPT>

</HEAD>

<BODY>

<BR>

<BR>

<BR>

<BR><A HREF="http://www.zindell.com">ZINDELL</A>

<BR><A HREF="http://www.yahoo.com">YAHOO</A>

<BR><A HREF="http://www.macromedia.com">MACROMEDIA</A>

<BR><A NAME="kushkush">The kushkush area</A>

<BR><A NAME="bulbuliada">The bulbuliada area</A>

</FORM>

</BODY>

</HTML>

כדאי לשים לב לכך שהקישורים אינם נכללים במניין מרכיבי ה-Anchor.

התכונה applets

תכונה זו מהווה מערך (ליתר דיוק מכילה reference לאובייקט שנחשב למערך) אשר איבריו הם אובייקטים (references לאובייקטים – ליתר דיוק) אשר מייצגים את ה-applets שקיימים במסמך. תכונה זו איננה שימושית במיוחד, והיא נתמכת על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 4.

התכונה cookie

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

התכונה domain

באמצעות תכונה זו ניתן לשנות את ה-domain הספציפי שמזוהה עם מסמך נתון מבחינת הדפדפן. קיימים אובייקטים שהגישה לתכונותיהם אפשרית רק ממסמכים שה-domain הספציפי שלהם זהה ל-domain הספציפי שמזוהה עם המסמך שבו אותם אובייקטים נמצאים. מסיבה זו, לעתים לא ניתן לגשת לתכונותיהם של אובייקטים שנמצאים במסמכים אחרים שמוצגים באותה עת על ידי הדפדפן בחלון או ב-frame אחרים כאשר המסמכים האחרים מזוהים עם domain ספציפי אחר מזה שמזוהה עם המסמך שמתוכו נעשה ניסיון הגישה. כדי לאפשר גישה כגון זו ניתן לעשות שימוש בתכונה domain ולקבוע את ערכה כך שהגישה תתאפשר. הערך שאליו ניתן לשנות את ערכה של התכונה domain איננו יכול להיות כל ערך שנרצה. ניתן לשנות את ערכה של התכונה הזו לכל ערך אחר שאותו חלק מתוכו שמהווה את שמו של ה-domain נותר ללא שינוי. כך למשל, ניתן לשנות את ערכה של התכונה document.domain מ- search.zindell.com לערכים כגון zindell.com ו- cellular.zindell.com. התכונה נתמכת על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 4.

התכונה embeds

תכונה זו מכילה reference למערך אשר איבריו הם references לאובייקטים מסוג plug in אשר מתארים את אותם plugins אשר משמשים את מרכיבי ה-<embed> שמופיעים במסמך. מספר האיברים שיש במערך embeds הוא כמספר מרכיבי ה-EMBED שמופיעים במסמך. התכונה נתמכת על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 4.

התכונה forms

תכונה זו מכילה reference למערך אשר איבריו הם references לאובייקטים מסוג FORM אשר מייצגים את כל מרכיבי ה-FORM (הטפסים) שמופיעים במסמך. כאשר בתוך מסמך מופיע טופס (מרכיב ה-HTML: FORM) ואל תוך תגית ההתחלה שלו הוספה התכונה NAME, אז ניתן לפנות אל הטופס הזה באמצעות ציון השם שניתן לו באופן שבו נוהגים לפנות לתכונה שקיימת באובייקט.

לדוגמא:

אם במסמך ה-HTML מופיע מרכיב ה-FORM הבא:

…

</FORM>

ניתן להתייחס לאובייקט ה-FORM שמייצג אותו באופן הבא:

document.littleForm

ההתייחסות לאובייקט ה-FORM שמייצג טופס מסוים במסמך ה-HTML יכולה להיעשות גם באמצעות התכונה forms. התכונה forms מכילה reference לאובייקט שהוא מערך אשר מכיל בכל אחד מתאיו references לאובייקטים מסוג FORM אשר מייצגים את כל הטפסים במסמך. אם ידוע, למשל, שהטופס שאליו רוצים להתייחס הוא הטופס השני במסמך אז ניתן לפנות אליו באופן הבא:

document.forms[1]

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

התכונה images

תכונה זו מכילה reference למערך אשר מכיל בכל אחד מאיבריו reference לאובייקטים מסוג image אשר מתארים את התמונות שמופיעות במסמך. בדומה לתכונה forms, גם התכונה images מאפשרת לגשת לכל אחד מהאובייקטים שמייצגים את מרכיבי ה-IMG במסמך באמצעות התייחסות לאיבר המתאים ב-images. כך למשל, אם במסמך מופיע המרכיב IMG כשהוא מתאר תמונה, ולתוכו הוספה התכונה NAME, אז בהנחה ששמו pic והוא מופיע (למשל) בתור התמונה השניה במסמך, הגישה אליו אפשרית בכל אחד משתי הדרכים הבאות:

document.pic

או

document.images[1]

כדאי לציין שהתכונה הזו נתמכת על ידי Netscape Nevigator החל מגרסה 3, ועל ידי Internet Explorer החל מגרסה 4.

התכונה lastModified

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

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

<HTML>

<HEAD>

<TITLE>lastModifiedDemo.html</TITLE>

</HEAD>

<BODY>

updateDate = new Date(document.lastModified);

luMonth = updateDate.getMonth()+1;

luYear = updateDate.getYear();

document.write("<B>This document was updated at " + luMonth

+ "/" + luYear + "</B>");

</SCRIPT>

</BODY>

</HTML>

התכונה layers

תכונה זו איננה נתמכת ב-Internet Explorer, והיא נתמכת רק על ידי Netscape Nevigator. תכונה זו מכילה reference למערך שמכיל באיבריו references לכל אובייקטי ה-layers שקיימים במסמך.

התכונה links

תכונה זו מכילה reference למערך שאיבריו הם references לכל האובייקטים מסוג link שקיימים במסמך (האובייקטים שמתארים את כל הקישורים שמופיעים במסמך). התכונה נתמכת על ידי Netscape Nevigator החל מגרסה 2, ועל ידי Internet Explorer החל מגרסה 3.

בעוד שהתכונה anchors הכילה reference למערך שאיבריו היו references לאובייקטים מסוג ANCHOR אשר שימשו בתור מצייני מקום במסמך (לא שימשו בתור hyper links, קישורים), התכונה links מכילה reference למערך שאיבריו הם references לכל המרכיבים מסוג ANCHOR אשר משמשים במסמך בתור קישורים (hyper links).

התכונות location ו- URL

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

התכונה referrer

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

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

<HTML>

<HEAD>

<TITLE>referrerDemo.html</TITLE>

</HEAD>

<BODY>

<A HREF="referrerDemo2.html">referrerDemo2.html</A>

</BODY>

</HTML>

והמסמך השני,

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

<HTML>

<HEAD>

<TITLE>referrerDemo2.html</TITLE>

str = (document.referrer=="")?" nowhere ... ":document.referrer;

document.write("You have arrived from " + str);

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

התכונה title

תכונה זו מכילה את מחרוזת התווים שמהווה את כותרתו של מסמך. כותרתו של מסמך היא מה שמופיע בין התגיות <TITLE> ו- </TITLE> ובדרך כלל מופיע בשורת הכותרת של הדפדפן כאשר הוא מציג את המסמך. ניתן לקבל את ערכה של התכונה הזו אך לא ניתן לשנות אותו.

המתודות

המתודות שניתן להפעיל מתוך אובייקט document כוללות את המתודות הבאות:

המתודה captureEvents(eventTypeList)

מתודה זו נתמכת רק על ידי Netscape Nevigator והיא משמשת לעצירת ה-events מלעבור הלאה. ב-Netscape Nevigator ה-events נוצרים באובייקט window וממנו הם עוברים הלאה דרך האובייקט document אל האובייקט שמהווה את מקורם. כשם שמתודה בשם זה ניתנת להפעלה מתוך window כדי למנוע מ-events מסוג מסוים להמשיך הלאה ולהגיע אל האובייקט שאליו הם שייכים כך היא גם ניתנת להפעלה גם מתוך document. המתודה לא מחזירה אף ערך.

המתודה clear()

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

המתודה close()

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

המסמך הבא בצירוף שני המסמכים שאחריו מדגים את פעולתן של המתודות close ו-clear.

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

<HTML>

<HEAD>

<TITLE>documentClearCloseDemo.html</TITLE>

</HEAD>

</FRAMESET>

</HTML>

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

<HTML>

<HEAD>

<TITLE>documentClearCloseDemoControl.html</TITLE>

function writeTo()

{

parent.frames[1].document.write(document.myForm.tf.value);

}

function clearDoc()

{

parent.frames[1].document.clear();

}

function closeStrm()

{

parent.frames[1].document.close();

}

</SCRIPT>

</HEAD>

<BODY>

<BR>

<BR>

</FORM>

</BODY>

</HTML>

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

<HTML>

<HEAD>

<TITLE>documentClearCloseDemoView.html</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

המתודה getSelection

מתודה זו נתמכת רק על ידי Netscape Nevigator החל מגרסה 4. המתודה איננה מקבלת אף ערך בעת הפעלתה, והיא מחזירה את מחרוזת התווים שסומנה על ידי המשתמש באמצעות העכבר.

המתודה handleEvent(event)

מתודה זו נתמכת רק על ידי Netscape Nevigator החל מגרסה 4, ופעולתה באובייקט document דומה לפעולתה באובייקט window.

המתודה open

מתודה זו משמשת לפתיחתו של מסמך חדש כדי שניתן יהיה לכתוב אליו. יש לשים לב לכך שמתודה זו שונה מהמתודה open שמופעלת מתוך אובייקט window כדי לייצור window חדש. בפעולתה של המתודה open אשר מופעלת על document היא רק מאפשרת את פעולות הכתיבה ל-document נתון. ניתן לוותר על הפעלתה של המתודה הזו כיוון שהמתודות write ו- writeln מפעילות אותה באופן אוטומאטי לפי הצורך.

המתודה releaseEvents(eventList)

מתודה זו נתמכת רק על ידי Netscape Nevigator החל מגרסה 4 ומעלה. מבצעת את הפעולה ההפוכה לפעולה שמבצעת המתודה captureEvent.

המתודה routeEvent

מתודה זו נתמכת רק על ידי Netscape Nevigator החל מגרסה 4. פעולתה כאשר מפעילים אותה על אובייקט document דומה לפעולתה כאשר מפעילים אותה מתוך אובייקט window.

המתודות write ו- writeln

מתודות אלה גורמות לכתיבת מחרוזת התווים שהם קיבלו כארגומנט אל המסמך שממנו הן הופעלו. ההבדל בין שתי המתודות הללו הוא שהמתודה writeln גם מוסיפה לסוף מחרוזת התווים שהיא מדפיסה את סימן ה-carriage return. בפעולתה של writeln אין כדי לגרום לירידה לשורה חדשה, ולכן, כדי שבסוף פעולת הכתיבה יהיה מעבר לשורה חדשה יש להוסיף בסוף המחרוזת שמדפיסים את התגית <BR>. שתי המתודות מחזירות true או false בהתאם להצלחתן בפעולת הכתיבה. שתי המתודות נתמכות על ידי Internet Explorer החל מגרסה 3, ועל ידי Netscape Nevigator החל מגרסה 2.

תרגילים

1. כתוב/כתבי מסמך ב-HTML אשר יציג למשתמש את האפשרות להקליד את נתוניו האישיים ולצפות בהיווצרותו של חלון חדש אשר מציג home page על פי נתונים אלה.

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