הנך נמצא: מדריך בסיסי / שיעור 3 / דף 8
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: מהו ה- DOM?
2: מבוא לתפעול חלונות
3: תפעול חלונות
4: דוגמאות
5: מאפייני החלון
6: מודל אובייקט המסמך
7: תיבת הסטטוס
8: תיקשור בין חלונות
9: עוד אודות ה- DOM
10: מאפייני חלון נוספים
11: עוד אודות הררכיות
12: לכלך את הידיים
13: סיכום שיעור 3
|
|
|
|
|
|
|
|
|
|
|
|
|
|

שיעור 3

דף 8: תיקשור בין חלונות.

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

ישנם מספר עקרונות מנחים לקוד JavaScript זה. ראשית, אנו פותחים חלון חדש ושומרים את ההתייחסות אליו:

var new_window=window.open("hello.html","html_name","width=200,height=200");

פקודה זו פותחת חלון חדש והמשתנה new_window מתייחס אליו. ממש כשם שמשתנה יכול להכיל מספרים או מחרוזות, הוא יכול להכיל גם התייחסות לאובייקטים – בדוגמא זו, אובייקט חלון. המשתנה new_window יתנהג בדיוק כמו האובייקט Window. אתה יכול להפעיל את המתודות שלו כשם שיכולת להפעיל את המתודות של window.

בשורה הבאה, אפשר לראות דוגמא להפעלת מתודה ב- new_windows:

new_window.blur();

לא ממש מתוחכם, ממש כמו window.blur() מהדך הקודם. שתי שורות אלו מופיעות בראש דף ה- HTML. הבט בקוד אם ברצונך לראותן. כפי שציינתי, אני נוטה לכתוב את קוד ה- JavaScript שלי ב- head של דפי ה- HTML. כך, קל לי למצאו כשאני מחפשו. שורות אלו יכלו להופיע באותה המידה בגוף (body) דף ה- HTML.

כשנביט בתוכן הדף המוצג ע"י הדפדפן, נוכל לראות שני לינקים שגורמים לחלון החדש לזוז קדימה או אחורה:

<a href="#" onMouseOver="new_window.focus();return true;">Bring it forward</a>
<a href="#" onMouseOver="new_window.blur();return true;">Put it ackward</a>

הבנת? בוא נראה ... הגיע הזמן לתרגיל. נסה לקודד תוספת זו לדוגמא הקודמת. התרגיל הזה הוא קצת מתחכם; על מנת לגרום לו לפעול יהיה עליך להבין מספר דברים. אבל אל תציץ בקוד הפתרון לפני שלפחות תנסה מעט בעצמך.

אחרי שתסיים, חזור לכאן ונמשיך לדון אודות מודל האובייקטים של JavaScript.

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר