פרק 17: האובייקט History

·                     הקדמה

·                     התכונות

·                     המתודות

·                     תרגילים

 

 

 

 



הקדמה

 

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

 

 

התכונות

 

בחלק זה אסקור את התכונות שקיימות באובייקט זה.

 

התכונות current, next ו- previous

שלושת תכונות אלה נתמכות רק על ידי Netscape Nevigator החל מגרסה 4 באופן מלא והחל מגרסה 3 באופן חלקי. הגישה לתכונות אלה, אשר כוללות את ה-URL של האתר שבו הגולש מבקר כעת (current), של האתר שלחיצה על back תחזירנו אליו (previous) ושל האתר שלחיצה על forward תחזירנו אליו (next). הגישה לתכונות אלה אפשרית אך ורק מ-signed scripts ובתנאי שהגולש נתן לכך אישור.

 

התכונה length (האובייקט history הוא, למעשה, מערך)

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

 

<!-- file name : historyLengthDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

<HTML>

 

  <HEAD>

    <TITLE>historyLengthDemo.html</TITLE>

    <SCRIPT LANGUAGE="javaScript1.2">

      function update()

      {

        var num = window.history.length;

        var i;

        str = "You have visited " + num + " URL's lately";

        document.myForm.ta.value = str;                             

      }

    </SCRIPT>       

  </HEAD>

 

  <BODY>

    <FORM NAME="myForm">

      <H1>Demo of the history.length property</H1>

      In order to see the number of items that the history object holds

      please press the following button

      <INPUT TYPE="button" VALUE="PRESS HERE" onClick="update()"><BR>

      <HR>

      <INPUT NAME="ta" SIZE="60">               

    </FORM>         

  </BODY> 

 

</HTML>

 

 

המתודות

 

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

 

המתודה back

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

ב-Netscape Nevigator מגרסה 4, הפעלת המתודה על מסמך שמוצג במסגרת מסוימת תגרום למעבר למסמך הקודם שהוצג במסגרת,  ואם המסמך שמוצג במסגרת (FRAME) הוא המסמך הראשון שהועלה אליה אז הפעלת המתודה לא תגרום לשום דבר להתרחש.

 

המתודה forward()

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

 

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

 

<!-- file name : historyForwardBackDemo.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

 

<HTML>

 

  <HEAD>

    <TITLE>historyForwardBackDemo.html</TITLE>

  </HEAD>

 

  <FRAMESET ROWS="25%,75%">

    <FRAME SRC="historyForwardBackCtrl.html">

    <FRAME SRC="historyForwardBackView.html">

  </FRAMESET>

 

</HTML>

 

 

<!-- file name : historyForwardBackCtrl.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

 

<HTML>

 

  <HEAD>

    <TITLE>historyForwardBackCtrl.html</TITLE>

    <SCRIPT LANGUAGE="javaScript1.2">

      function doForward()

      {

        parent.frames[1].history.forward();

      }         

      function doBackward()

      {

        parent.frames[1].history.back();

     }          

      function doGoTo()

      {

        parent.frames[1].location.href = document.myForm.place.value;

        document.myForm.place.value = parent.frames[1].location.href;

      }         

    </SCRIPT>       

  </HEAD>

 

  <BODY>

    <FORM NAME="myForm">

      <INPUT TYPE="button" VALUE="btBackward" onClick="doBackward()">   

      <INPUT TYPE="button" VALUE="btForward" onClick="doForward()">

      <BR>

      <INPUT TYPE="button" VALUE="goto" onClick="doGoTo()">

      <INPUT NAME="place" SIZE="80">         

    </FORM>         

  </BODY> 

</HTML>

 

 

<!-- file name : historyForwardBackView.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

 

<HTML>

 

  <HEAD>

    <TITLE>historyForwardBackView.html</TITLE>

  </HEAD>

 

  <BODY>

  </BODY> 

</HTML>

 

 

<!-- file name : simple1.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

<HTML>

 

  <HEAD>

    <TITLE>simple1.html</TITLE>

  </HEAD>

 

  <BODY>

    <H1>SIMPLE1 - AWSOM !</H1>

  </BODY> 

 

</HTML>

 

 

<!-- file name : simple2.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

<HTML>

 

  <HEAD>

    <TITLE>simple2.html</TITLE>

  </HEAD>

 

  <BODY>

    <H1>SIMPLE2 - AWSOM !</H1>

  </BODY> 

 

</HTML>

 

 

<!-- file name : simple3.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

<HTML>

 

  <HEAD>

    <TITLE>simple3.html</TITLE>

  </HEAD>

 

  <BODY>

    <H1>SIMPLE3 - AWSOM !</H1>

  </BODY> 

 

</HTML>

 

 

<!-- file name : simple4.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

<HTML>

 

  <HEAD>

    <TITLE>simple4.html</TITLE>

  </HEAD>

 

  <BODY>

    <H1>SIMPLE4 - AWSOM !</H1>

  </BODY> 

 

</HTML>

 

 

<!-- file name : simple5.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

<HTML>

 

  <HEAD>

    <TITLE>simple5.html</TITLE>

  </HEAD>

 

  <BODY>

    <H1>SIMPLE5 - AWSOM !</H1>

  </BODY> 

 

</HTML>

 

 

המתודה go

מתודה ו גורמת בפעולתה לכך שהדפדפן יציג את אחד המסמכים האחרים, אשר ה-URL שלהם שמור באובייקט history.קיימות שתי אפשרויות להפעלת המתודה:

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

2.       בעת הפעלתה של המתודה שולחים אליה את ה-URL שרוצים שיוצג. ה-URL חייב להופיע ברשימת ה-URL שקיימת בתוך האובייקט history.

 

את הדוגמא האחרונה ניתן היה לממש באמצעות המתודה go בתור תחליף להפעלת המתודות back ו- forward. להלן המסמכים שיוחלפו במקרה זה.

 

<!-- file name : historyForwardBackCtrl2.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

 

<HTML>

 

  <HEAD>

    <TITLE>historyForwardBackCtrl2.html</TITLE>

    <SCRIPT LANGUAGE="javaScript1.2">

      function doForward()

      {

        parent.frames[1].history.go(1);

      }         

      function doBackward()

      {

        parent.frames[1].history.go(-1);

      }         

      function doGoTo()

      {

        parent.frames[1].location.href = document.myForm.place.value;

      }         

    </SCRIPT>       

  </HEAD>

 

  <BODY>

    <FORM NAME="myForm">

      <INPUT TYPE="button" VALUE="btBackward" onClick="doBackward()">   

      <INPUT TYPE="button" VALUE="btForward" onClick="doForward()">

      <BR>

      <INPUT TYPE="button" VALUE="goto" onClick="doGoTo()">

      <INPUT NAME="place" SIZE="80">         

    </FORM>         

  </BODY> 

</HTML>

 

 

<!-- file name : historyForwardBackDemo2.html -->

<!-- 2000(c) Zindell Publishing House Ltd. -->

 

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

 

 

<HTML>

 

  <HEAD>

    <TITLE>historyForwardBackDemo2.html</TITLE>

  </HEAD>

 

  <FRAMESET ROWS="25%,75%">

    <FRAME SRC="historyForwardBackCtrl2.html">

    <FRAME SRC="historyForwardBackView.html">

  </FRAMESET>

 

</HTML>

 

 

תרגילים

 

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)

 

 

 

 

 

 

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

 

פרק 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