±àдä¯ÀÀÆ÷½Å±¾ Navigator Scripting

 BACKWARD FORWARD



ÔÚ HTML ÖÐʹÓÃJavaScript

JavaScriptÄÜÒÔÁ½ÖÖ·½Ê½Ç¶ÈëHTML:

SCRIPT 񈬀


ʹÓÃSCRIPT±ê¼Ç°Ñ½Å±¾Ç¶ÈëÔÚHTMLÖÐ,¸ñʽÈçÏÏÂ:

<SCRIPT>
_ JavaScript Óï¾ä
</SCRIPT>
LANGUAGEÊôÐÔ×÷Ϊ¿ÉÑ¡Ïî,ÓÃÓÚÖ¸¶¨½Å±¾ÓïÑÔ,Ó÷¨ÈçÏÂ:

<SCRIPT LANGUAGE="JavaScript">
_JavaScript Óï¾ä
</SCRIPT>
</SCRIPT>ÊÇ<SCRIPT>µÄ½áÊø±êÖ¾,Ö®¼ä¿ÉÒÔ°üÀ¨ÈÎÒâ¶àµÄJavaScriptÓï¾ä.

JavaScriptÊÇÇø·Ö´óСдµµÄ

ÀýÒ»¸ö¼òµ¥µÄ½Å±¾


<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
document.write("Hello net.")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>

 Àý1ÖеÄÒ³ÃæÏÔʾ:

Hello net.That's all folks.



´úÂëÒþÄä


ÔÚ²»Ê¶±ðJavaScriptµÄ¾É°æ±¾ä¯ÀÀÆ÷ÉÏ,¿ÉÒ԰ѽű¾·ÅÖÃÔÚ×¢ÊÍÓòÖÐ,ÕâÑù
JavaScript´úÂë¾Í²»»á±»ÏÔʾ³öÀ´. °ÑÕû¸ö½Å±¾ÓÃHTMLµÄ×¢Êͱê¼ÇÀ¨ÆðÀ´:



<!-- ¿ªÊ¼ÒþÄäµÄ½Å±¾ÄÚÈÝ,²»±»¾É°æ±¾ä¯ÀÀÆ÷ÏÔʾ
// ÒþÄäÔڴ˽áÊø. -->

¶¨ÒåºÍµ÷Óú¯Êý



ÔÚÒ³(page)±»×°Ôغó,±»ÖÃÓÚSCRIPT±ê¼ÇÖ®¼äµÄ½Å±¾±»·ÖÎö.º¯Êý±»´æÖüÆðÀ´,
µ«²¢Î´Ö´ÐÐ. º¯ÊýÓÉÒ³ÄÚµÄʼþµ÷ÓÃÖ´ÐÐ.


ÕýÈ·Àí½â¶¨Ò庯ÊýÓëµ÷Óú¯ÊýÖ®¼äµÄÇø±ðÊǺÜÖØÒªµÄ,¶¨Ò庯Êý½ö½öÊÇÃüÃûÁËÕâ¸ö
º¯ÊýºÍ˵Ã÷µ±´Ëº¯Êý±»µ÷ÓÃʱ×öʲô,¶øµ÷Óú¯Êý²ÅÀûÓô«À´µÄ²ÎÊýÕæÕýÖ´ÐÐÖ¸¶¨
µÄ¶¯×÷.



Àý2 Ò»¸ö´øÓк¯ÊýºÍ×¢Ê͵Ľű¾



<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- ¿ªÊ¼ÒþÄäµÄ½Å±¾ÄÚÈÝ,²»±»¾É°æ±¾ä¯ÀÀÆ÷ÏÔʾ
_ function square(i)
_ document.write("The call passed ",i, " to the function.","&lt;BR&gt;")
_ document.write("The function returned ",square(5),".")
// ÒþÄäÔڴ˽áÊø. -->
</SCRIPT>
</HEAD>
_ <BODY>
_ All done.
_ </BODY>



Àý2ÖеÄÒ³ÃæÏÔʾ:



We passed 5 to the function.
_ The function returned 25.
_ All done.



HEAD񈬀



ͨ³£,Ó¦¸ÃÔÚÎĵµµÄHEAD²¿·Ö¶¨ÒåÒ³(page)µÄËùÓк¯Êý,ÒòΪHEAD±»
Ê×ÏÈ×°ÔØ,Õâ¾Í±£Ö¤ÁËÓû§×öÈκοÉÄܵ÷Óú¯ÊýµÄ¶¯×÷Ç°,º¯ÊýÒÑÈ«²¿×°ÔØ.



Àý3 ÓÐÁ½¸öº¯ÊýµÄ½Å±¾.


<HEAD>
<SCRIPT>
<!--- hide script from old browsers
function bar()
_ document.write("<HR ALIGN='LEFT' WIDTH=25%>")

function output(head,level,string)
_ document.write("<H" + level + ">" + head + "</H" + level + "><p>" + string)

// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<SCRIPT>
<!--- hide script from old browers
document.write (bar(),output("Make Me Big",3,"Make me ordinary."))
// end hiding from old browsers -->
</SCRIPT>
<P>
Thanks.
</BODY>

_
Àý3µÄ½á¹û:



Make Me Big
Make me ordinary.undefinedundefined
Thanks.

ÒýºÅ


Óõ¥ÒýºÅ°Ñ×Ö·û´®³£Á¿À¨ÆðÀ´,ÓÃË«ÒýºÅ°ÑÊôÐÔµÄÖµÀ¨ÆðÀ´,ÕâÑù½Å±¾Äܹ»°Ñ
¶þÕßÇø·Ö¿ª. ÔÚÉϸöÀý×ÓÖÐ, º¯ÊýbarÖÐ,³£Á¿left±»·ÅÔÚÊôÐÔÖµ.ÔÙ¾ÙÒ»¸öÀý×Ó:



<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc('astring')">



±àдʼþ´¦Àí³ÌÐò½Å±¾(Scripting Event Handlers)



NavigatorÉϵÄJavaScriptÓ¦ÓóÌÐò´ó²¿·ÖÊÇʼþÇý¶¯µÄ,ʼþ³£³£ÊÇÓû§¶¯×÷
µÄ½á¹û. ÀýÈç: °´¶¯°´Å¥ÊÇÒ»¸öʼþ, ½á¹ûÊÇ°Ñfocus¸³ÓëÒ»¸öformÔªËØ.Navigator
Äܹ»Ê¶±ðÒ»×éÌض¨µÄʼþ. Äã¿ÉÒÔ¶¨Òåevent handlers½Å±¾,ÕâЩ½Å±¾ÔÚʼþ·¢Éú
ʱ»á±»×Ô¶¯Ö´ÐÐ.



ʼþ´¦Àí³ÌÐòÊÇ×÷ΪHTML±ê¼ÇµÄÊôÐÔ·ÅÔÚÎĵµÖеÄ,°ÑÒªÖ´ÐÐJavaScript´úÂ븳
¸øHTML±ê¼Ç. Óï·¨ÈçÏÂ:



<TAG eventHandler="JavaScript Code">



ÆäÖÐ, TAGÊÇHTMLµÄijһ±ê¼Ç, eventHandlerÊÇʼþ´¦Àí³ÌÐòµÄÃû³Æ.



ÀýÈç, ¼Ù¶¨ÒÑ´´½¨ÁËÒ»¸öÃûΪcomputeµÄJavaScriptº¯Êý,Äã¿ÉÒ԰ѶԸÃ
º¯ÊýµÄµ÷Óø³¸øÕâ¸ö°´Å¥µÄonClickʼþ´¦Àí³ÌÐò,´Ó¶øʵÏÖµ±Óû§°´´Ë°´Å¥Ê±,
NavigatorÖ´Ðк¯Êýcompute.



<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">



Äã¿ÉÒÔ°ÑÈκÎJavaScriptÓï¾ä·ÅÔÚonClickºóµÄÒýºÅÄÚ,¶à¸öÓï¾äÖ®¼äÓ÷ֺŸô¿ª.
ÕâЩÓï¾äÖ»ÔÚµ±Óû§°´¶¯´Ë°´Å¥Ê±²Å±»Ö´ÐÐ.



Ò»°ã˵À´,°Ñ×Ô¼ºµÄʼþ´¦Àí³ÌÐò¶¨Òå³Éº¯ÊýÊÇÒ»ÖÖºÃÏ°¹ß,ÒòΪ:



. ÕâʹÄãµÄ´úÂëÄ£¿é»¯--- ͬһ¸öº¯Êý¿ÉÒÔ×÷Ϊ¶à¸ö²»Í¬itemµÄʼþ´¦Àí³ÌÐò.
. ÕâʹÄãµÄ´úÂëÈÝÒ׶Á¶®.



Çë×¢Òâ,ÔÚ´ËÀýÖÐ,ʹÓÃthis.formÀ´ÒýÓõ±Ç°form, ¹Ø¼ü×ÖthisÓÃÀ´Òý
Óõ±Ç°¶ÔÏó,´Ë´¦¼´Ö¸button¶ÔÏó,ÓÚÊÇthis.form½á¹¹±»ÓÃÀ´ÒýÓðüº¬´Ëbutton
µÄform. ÉÏÀýÖÐonClickʼþ´¦Àí³ÌÐòÊÇÒÔthis.form(µ±Ç°form)Ϊ²ÎÊýµ÷ÓÃ
compute()º¯Êý.




ÄÜÓÃÓÚHTML±ê¼ÇÖеÄʼþÈçÏÂ:



. Focus, Blur, Changeʼþ: Îı¾Óò,Îı¾ÇøºÍÑ¡Ôñ
. Clickʼþ: °´Å¥,ÎÞÏß°´Å¥,ºË¶Ô¿ò,µÝ½»°´Å¥,¸´Î»°´Å¥,Á´½Ó
. Selectʼþ: Îı¾Óò,Îı¾Çø
. MouseOverʼþ: Á´½Ó



Èç¹ûһʼþ¿ÉÓÃÔÚHTML±ê¼ÇÀï, Ôò¿ÉÒÔ¸øËü¶¨Òåʼþ´¦Àí³ÌÐò.ͨ³£Ê¼þ´¦Àí
³ÌÐòµÄÃû³ÆÊÇÒÔon¿ªÍ·,ºó¸úʼþÃû³Æ. Èç, FocusµÄ´¦Àí³ÌÐòÃûΪonFocus.



Ðí¶à¶ÔÏóÓÐÄ£ÄâʼþµÄ·½·¨(method).Èç,buttonÓÐÒ»¸öÃûΪclickµÄ·½·¨ÄÜ
Ä£Äâ°´Å¥±»°´ÏÂ. ×¢Òâ: Ä£ÄâʼþµÄ·½·¨²»ÄÜ´¥·¢Ê¼þ´¦Àí³ÌÐò.Èç·½·¨click
²¢²»ÄÜ´¥·¢Ê¼þ´¦Àí³ÌÐòonClick. µ«ÊÇ,Äã¿ÉÒÔÖ±½Óµ÷ÓÃʼþ´¦Àí³ÌÐò(Èç,
Ôڽű¾ÖÐ,ÏÔʽµ÷ÓÃonClick).



*** ´Ë´¦Îª±í¸ñ ***

ʼþ ºÎʱ·¢Éú
´¦Àí³ÌÐò
blur Óû§½«input focus´ÓformÔªËØÉÏÒÆÈ¥ onBlur
click Óû§ÔÚformÔªËØ»òÁ¬½ÓÉϽӶ¯Êó±ê onClick
change Óû§¸Ä±äÁËÎı¾,Îı¾Çø»òÑ¡ÔñÔªËصÄÖµ onChange
focus Óû§°Ñinput focus¸³¸øformÔªËØ onFocus
load Óû§°ÑÒ³×°ÈëNavigator onLoad
mouseover Óû§°ÑÊó±ê¹â±ê´Ólink»òanchorÉÏÒƹý onMouseOver
select Óû§Ñ¡ÔñÁËformÔªËصÄÊäÈëÓò onSelect
submit Óû§Ìá½»ÁËÒ»¸öform onSubmit
unload Óû§Í˳ö´ËÒ³
onUnload



Àý4 ÓÐÒ»¸öformºÍÒ»¸öevent handlerÊôÐԵĽű¾



<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form)
_ if (confirm("Are you sure?"))
_ form.result.value=eval(form.expr.value)
_ else
_ alert("Please come back again")

</SCRIPT>
</HEAD>

<BODY>
<FORM>
_ Enter an expression:
_ <INPUT TYPE="text" NAME="expr" SIZE=15>
_ <INPUT TYPE="button" VALUE="Calculate" ONCLICK="compute(this.form)">
_ <BR>
_ Result
_ <INPUT TYPE="text" NAME="expr" SIZE=15>
_ <BR>
</FORM>
</BODY>

Àý4ÖеÄÒ³ÃæÏÔʾ



Enter an expression:
Result:



Àý5 ÓÐÒ»¸öformµÄ½Å±¾, event handlerÊôÐÔÖÃÓÚBODY±ê¼ÇÖÐ



<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old browsers
function checkNum(str,min,max)
_if (str=="")
_ alert("Enter a number in the field, please.")
_ return false
_
_for (var i=0; i<str.length;i++)
_ var ch=str.substring(i,i+1)
_ if (ch < "0" || ch > "9")
___ alert("Try a number , please.")
____ return false
_
_
_var val=parseInt(str, 10)
_if ((val <min ) || (val> max))
___ alert("Try a number from 1 to 10.")
____ return false
_
_return true


function thanks()
_ alert("Thank you for your input.")

// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="ex5">
Enter a small number :
_ <INPUT NAME="num"
_ onChange="if (!checkNum(this.valu,1,10))
____this.focus();this.select; else thanks()">
</FORM>
</BODY>

Àý5ÖеÄÒ³ÃæÏÔʾ


Enter a number in the field and then click your mouse anywhere OUTSIDE of
the field.
Depending on what you enter,you will be prompted to enter another number,or
thanked.

Please enter a small number:


¼¼ÇÉÓë¼¼Êõ

±¾½Ú½éÉܼ¸ÖÖÓÐÓõıàд½Å±¾µÄ¼¼Êõ

¸üÐÂÒ³(Updating Pages)

ÔÚNavigatorÉÏJavaScriptÊÇ°´´ÓÒ³µÄ¶¥²¿µ½ÏµÄ˳ÐòÉú³É½á¹û. Ò»µ©ÓÐЩ¶«Î÷
±»ÖØÐÂÉè¼Æ(format),ÄãÖ»ÄÜ¿¿ÖØÐÂ×°ÔØ´ËÒ³µÄ°ì·¨À´¸Ä±ä,Ä¿Ç°,ÄãÖ»ÄܸüÐÂÕû
¸öÒ³, ¶ø²»ÄÜÖ»¸üÐÂijһ²¿·Ö. µ«ÊÇÄã¿ÉÒÔµ¥¶À¸üÐÂframeÖеÄ"sub-window".

´òÓ¡

Ä¿Ç°, »¹²»ÄÜ°ÑÓÃJavaScript²úÉúµÄÊä³ö´òÓ¡³öÀ´. ÀýÈç,ÈôÄãµÄÒ³ÉÏÓÐÈçÏÂÄÚÈÝ,

<P>This is some text
<SCRIPT>document.write("<P>And some generated text")</SCRIPT>

µ±´òӡʱ,ÄãÖ»»á´ò³ö"This is some text", ¼´Ê¹ÄãÄÜÔÚÆÁÄ»ÉÏ¿´µ½Á½ÐÐ.

ʹÓÃÒýºÅ

Ò»¶¨ÒªÇø·ÖË«ÒýºÅºÍµ¥ÒýºÅ,ÒòΪÔÚHTMLÖÐʼþ´¦Àí³ÌÐò±ØÐëÓÃË«ÒýºÅ
À¨ÆðÀ´,²ÎÊýÓõ¥ÒýºÅ,ÀýÈç:

<FORM NAME="myform">
<INPUT TYPE="button" NAME="button1" VALUE="Open Sesame!"
onClick="window.open('stmtsov.html', 'newWin','toolbar=no,directories=no')">
</FORM>

ÁíÍâ,Äã¿ÉÒÔÓÃÇ°Ö÷´Ð±Ïß(¶ÔÒýºÅ½øÐÐתÒå.

¶¨Ò庯Êý

ÔÚHTMLÒ³µÄHEAD²¿·Ö¶¨ÒåÈ«²¿º¯ÊýÊÇÒ»¸öºÃÏ°¹ß.ÕâÑù,ÔÚÏÔʾÈκÎÄÚÈÝ֮ǰ,
ËùÓк¯Êý¾ùÒѶ¨Òå.·ñÔòÔÚÒ³»¹ÔÚ×°ÔØʱ,Óû§¿ÉÄÜ×öһЩÊÂÇé´¥·¢Ê¼þ´¦Àí³ÌÐò,
µ÷ÓÃÁË䶨Ò庯Êý,½«µ¼Ö´íÎó.

´´½¨Êý×é

Êý×éÊÇÒ»¸öÓÐÐòµÄÖµµÄ¼¯ºÏ,ÀûÓÃÊý×éÃûºÍË÷ÒýÀ´ÒýÓÃ.ÀýÈç,Ò»¸öÃûΪempµÄÊý×é
´æ·Å׏ÍÔ±µÄÃû×Ö,²¢°´¹ÍÔ±±àºÅË÷Òý.ÓÚÊÇ,emp[1]ÊÇ1ºÅ¹ÍÔ±,emp[2]ÊÇ2ºÅ¹ÍÔ±,
ÒÀ´ÎÀàÍÆ.

JavaScriptÖÐûÓÐÃ÷È·µÄÊý×éÊý¾ÝÀàÐÍ,µ«ÓÉÓÚÊý×éÓë¶ÔÏóÓÐÀàËÆÖ®´¦(¼û
JavaScript Object Model),ÔÚJavaScriptÖÐ,ºÜÈÝÒ×´´½¨Êý×é.Äã¿ÉÒÔ¶¨ÒåÒ»¸ö
Êý×é¶ÔÏóÀàÐÍÈçÏÂ:

_function MakeArray(n)
_ this.length=n;
_ for (var i=1; i <= n; i++)
_ this[i] = 0
_ return this
_
_

ÕâÑù¾Í¶¨ÒåÁËÒ»¸öÊý×é,µÚÒ»¸öÊôÐÔlength±íʾÊý×éÖÐÔªËظöÊý(Ë÷ÒýΪ0),ÆäÓà
¸÷ÊôÐÔ³õʼֵΪ0,Ë÷ÒýΪ´óÓÚµÈÓÚ1µÄÕûÊý.

µ÷ÓÃnewʱ´øÉÏÊý×éÃûºÍÊý×éÔªËصĸöÊý,¾Í´´½¨ÁËÒ»¸öÊý×é.

emp=new makeArray(20);

¸ÃÓï¾ä´´½¨ÁËÒ»¸öÃûΪempµÄÊý×é,ÓÐ20¸öÔªËØ,³õʼֵΪ0.

²Ù×÷Êý×é(Populating an Array)

_ͨ¹ý¸øÊý×éÔªËظ³ÖµµÄ°ì·¨À´²Ù×÷Êý×é.Èç:

_emp[1]="Casey Jones"
_emp[2]="PHil Lesh"
_emp[3]="August West"
_

_µÈµÈ.
_

»¹¿ÉÒÔ´´½¨¶ÔÏóµÄÊý×é.Èç,¶¨ÒåÒ»¸öÃûΪEmployeesµÄ¶ÔÏóÀàÐÍ:

function Employee(empno,name,dept)
_this.empo= empno;
_this.name= name;
_this.dept= dept;


ÏÂÁÐÓï¾äÔò´´½¨ÁËÒ»¸ö´Ë¶ÔÏóµÄÊý×é:

emp=new MakeArray(3)
emp[1]=new Employee(1,"Casey Jones", "Engineering")
emp[2]=new Employee(2,"Phil Lesh", "Music")
emp[3]=new Employee(3,"August",""Admin)

Õâʱ,ÀûÓú¯Êýshow_props(ÔÚJavaScript Object ModelÖж¨Òå)À´ÏÔʾ¸Ã
Êý×éÖеĶÔÏó, ÈçÏÂ:

for (var n=1; n<=3; n++)
_document.write(show_props(emp[n],"emp")+"
");


Navigator ¶ÔÏó

. ʹÓà Navigator ¶ÔÏó
. Navigator¶ÔÏóµÄ²ã´Î½á¹¹
. JavaScript ºÍ HTML Layout
. Ö÷ÒªµÄNavigator¶ÔÏó

ʹÓÃNavigator¶ÔÏó

µ±ÏòNavigator×°ÔØһҳʱ, Navigator¾Í´´½¨ÁËһЩÓë¸ÃÒ³¡¢¸ÃÒ³µÄÄÚÈݼ°Æä
ËüÏà¹ØÐÅÏ¢¶ÔÓ¦µÄ¶ÔÏó.

ÿҳ(page)ÉÏÒ»°ãÒªÓÐÏÂÊö¶ÔÏó:

. window: ×²ãµÄ¶ÔÏó, windowµÄÊôÐÔ¶ÔÓ¦ÓÚÕû¸ö´°¿Ú,ÔÚ¶àframe
ÎĵµÖÐ(frames document), ÿ¸ö×Ó´°¿Ú¶¼¶ÔÓ¦Ò»¸öwindow¶ÔÏó.
. location: ÆäÊôÐÔ¶ÔÓ¦ÓÚµ±Ç°URL.
. history: ÆäÊôÐÔ¶ÔÓ¦ÓÚÓû§Ôø¾­·ÃÎʹýµÄURL.
. document: ÆäÊôÐÔ¶ÔÓ¦ÓÚµ±Ç°ÎĵµµÄÄÚÈÝ,Èç±êÌâ¡¢±³¾°É«ºÍformµÈ.

document¶ÔÏóµÄÊôÐԴ󲿷ÖÊÇÓëÄÚÈÝÏà¹ØµÄ(content-dependent),Ò²¾ÍÊÇ˵,
ÕâЩ¶ÔÏóÊÇ»ùÓÚÎĵµµÄÄÚÈݶø´´½¨µÄ. Èç, document¶ÔÏóΪÎĵµÖеÄÿ¸ö
formºÍanchorÉèÖÃÁËÒ»¸öÊôÐÔ.

Èç, ´´½¨Ò»¸öÃûΪsimple.htmlµÄÒ³,¸ÃÒ³µÄHTMLÈçÏÂ:

<TITLE>A Simple Document<TITLE>
<BODY><FORM> NAME ="myform" ACTION ="FormProc()" METHOD="get" >Enter a value:
<INPUT TY
Check if you want:
<INPUT TYPE="checkbos" NAME="Check1" CHECKED onClick ='update(this.form)">
Option #1
<P>
<INPUT TYPE="button" NAME="Button1" VALUE ='Press Me"
onClik="update(this.form)">
</FORM></BODY>

Ôò»á²úÉúwindow, location, historyºÍdocument¶ÔÏó,ÕâЩ¶ÔÏóÓÐÏÂÊöÊôÐÔ:

location.href="http://www.terrapin.com/samples/vsimple.html"
document.tile="A Simple Document"
document.fgColor=#000000
document.bgColor=#ffffff
history.lenth=7

ÕâЩȡֵ½öÊÇÒ»¸öÀý×Ó.ʵ¼ÊÉÏ,ÕâЩֵȡ¾öÓÚÕæÕýÎĵµµÄλÖÃ,±êÌâ,Ç°¾°,
±³¾°ÑÕÉ«µÈ.

Navigator »¹½«¸ù¾ÝÒ³µÄÄÚÈÝ´´½¨ÏÂÊöµÄ¶ÔÏó:

document.myform
document.myform.Check1
document.myform.Button1

Õâʱ,¶ÔÏóÓ¦ÓÐÏÂÊöÊôÐÔ:

document.myform.action=http://terapin/mocha/formproc()
document.myform.method=get
document.myform.lenth=5
document.myform.Button1.value=Press Me
document.myform.Button.name=Button1
document.myform.text1.value=blahblah
document.myform.text1.name=text1
document.myform.Check1.defaultChecked=true
document.myform.Check1.value=on
document.myform.Check1.name=Check1

×¢Òâ: ÉÏÀýÖÐ,ÿ¸öÊôÐÔµÄÒýÓö¼ÊÇÒÔdocument¿ªÊ¼,È»ºóÊÇformµÄÃû³Æmyform,
ÔÙÊÇÊôÐÔÃû»òÕßformÔªËصÄÃû³Æ.Õâ¸ö˳Ðò×ñÑ­ÁËNavigator¶ÔÏóµÄ²ã´Î½á¹¹.

Navigator¶ÔÏóµÄ²ã´Î½á¹¹

¸÷Navigator¶ÔÏóÖ®¼ä´æÔÚ×Ųã´Î¹Øϵ,ÕâÖÖ²ã´ÎÐÔ·´Ó³ÁËHTMLÒ³×ÔÉíµÄ²ã´Î½á¹¹.
ËäÈ»Äã²»Äܸù¾ÝÕâЩ¶ÔÏóÍÆÖª¶ÔÏóÀà(ÔÚJavaÖпÉÒÔ),µ«ÊÇÀí½âNavigatorÖÐJavaScript
ÀàµÄ²ã´ÎÊôÐÔÈÔÊÇÓÐÒæµÄ.ÓÉÓÚÕâÖÖ²ã´ÎÐÔÉæ¼°µÄÊǸ÷¸ö¶ÔÏóµÄʵÀý,¶ø²»ÊǶÔÏóµÄÀà,
ËùÒÔÔÚÑϸñµÄÃæÏò¶ÔÏóµÄ¹ÛÄîÖÐ,±»³ÆΪʵÀý²ã´ÎÐÔ.

ÔÚÕâÖÖ²ã´ÎÐÔÖÐ,¶ÔÏóµÄ"ºó´ú"ÊÇÖ¸´Ë¶ÔÏóµÄÊôÐÔ.ÀýÈç: Ò»¸öÃûΪform1dµÄformÊÇ
Ò»¸ö¶ÔÏó,ËüͬʱҲÊÇdocument¶ÔÏóµÄÒ»¸öÊôÐÔ,¼Ç×÷document.form1. Navigator
µÄ²ã´Î¹ØϵÈçÏÂ:

navigator

window
|
¡¡ +--parent, frames, self, top
¡¡ |
¡¡ +--location
|
+--history
|
+--document
|
+--forms
| |
| elements (text fields, textarea, checkbos, password
| radio, select, button,submit,reset)
+--links
|
+--anchors

ΪÁËÒýÓöÔÏóµÄijЩÊôÐÔ,ÐèÒªÖ¸Ã÷¸Ã¶ÔÏóµÄÃû³ÆºÍËüËùÓеÄ×æÏÈ.
ÌØÀý:²»ÐèÒª°üÀ¨window¶ÔÏó.

JavaScript ºÍ HTML Layout

ÒªÏëÔÚNavigatorÖÐÕýȷʹÓÃJavaScript,¾ÍÒª¶ÔNavigatorÔõÑù´¦ÀílayoutÓÐÒ»¸ö»ù
±¾Á˽â,layoutÊÇÖ¸´Ó¿ÝÔïµÄHTMLÎı¾¹æ³Ìµ½¼ÆËã»úÉÏͼÐÎÏÔʾµÄת»».Ò»°ã˵À´,
layoutÊDZ»Navigator˳Ðò´¦ÀíµÄ, ¼´Navigator´ÓHTMLÎļþµÄ¶¥²¿¿ªÊ¼,Ò»±ß¼ÆËãÔõÑù
°ÑÊä³öÏÔʾÔÚÆÁÄ»ÉÏ,Ò»±ßÒÀ´ÎÏòºó´¦Àí. ÕâÑù,Navigator´ÓHTMLÎĵµµÄHEAD²¿·Ö¿ªÊ¼,
È»ºóÔÙ´ÓBODYµÄ¶¥²¿¿ªÊ¼ÒÀ´Î´¦Àí.

ÓÉÓÚÕâÖÖ"×Ô¶¥ÏòÏÂ"µÄ×ö·¨, JavaScriptÖ»ÄÜ·´Ó³³öËüÒѾ­Óöµ½¹ýµÄHTML.ÀýÈç,
¼Ù¶¨Ä㶨ÒåÁËÒ»¸ö¾ßÓÐÁ½¸öÎı¾ÊäÈëÔªËصÄform, ÔòÕâÁ½¸öÔªËØÓÉ JavaScript
µÄÁ½¸ö¶ÔÏódocument.statform.usernameºÍdocument.statform.userageÀ´·´Ó³.
ÄãÄÜÔÚform±»¶¨ÒåÖ®ºóµÄÈκÎλÖÃʹÓÃËü,¶ø²»ÄÜÔÚform±»¶¨Òå֮ǰʹÓÃËü.
Èç,ÔÚÒ»¸ö½Å±¾Àï, ÔÚ¶¨ÒåÁËformÖ®ºó,¿ÉÒÔÏÔʾÕâЩ¶ÔÏóµÄÖµ:

<SCRIPT>
document.write(document.statform.username.value)
document.write(document.statform.userage.value)
</SCRIPT>

µ«ÊÇ,Èç¹ûÏëÔÚ¶¨Òåform֮ǰÕâÑù×ö(Èç,ÔÚ´ËHTMLÒ³ÖÐ,ÔÚ¶¨ÒåÕâ¸öformÇ°Ãæ),¾Í»á
µ¼Ö´íÎó. ÒòΪNavigatorÖÐ,Éв»´æÔÚÕâЩ¶ÔÏó.

ÀàËƵØ,Ò»µ©layoutÒѾ­±»ÏÔʾ³öÀ´,ÔÙÉèÖÃij¸öÊôÐÔÖµ,¼È²»ÄܸıäÆäÖµ,Ò²²»»á¸Ä
±äÏÔʾÇé¿ö.ÀýÈç, ¼ÙÈçÄãµÄÎĵµ±êÌⶨÒåÈçÏÂ:

<TITLE>My JavaScript Page</TITLE>

ÔòÔÚJavaScriptÖÐ"My JavaScript Page"±»×÷Ϊdocument.titleµÄÖµ.Ò»µ©Navigator
ÒѾ­ÔÚlayoutÖаÑËüÏÔʾ³öÀ´(´ËÀýÖÐ,ÏÔʾÔÚNavigator´°¿ÚµÄ±êÌâÌõÖÐ),¾Í²»ÄÜ
ÔÙÔÚJavaScriptÖиıäÕâ¸öÖµ.ËùÒÔ,Èô¸ÃÒ³µÄºóÃ沿·ÖÓÐÏÂÊö½Å±¾:

document.title="The New Improved JavaScript Page"

²»Äܸıädocument.titleµÄÖµ,Ò²²»»á¸Ä±äÒ³µÄÍâ¹Û,Ò²²»»á²úÉú´íÎó.


ÖØÒªµÄ Navigator ¶ÔÏó

×îÓÐÓõÄNavigator¶ÔÏóÓÐdocument,formºÍwindow.

ʹÓà document ¶ÔÏó

document ¶ÔÏóºÜÖØÒª,ÒòΪËüµÄÁ½¸ö·½·¨(method)writeºÍwritelnÄÜÉú³ÉHTML.
½èÖúÕâÁ½¸ö·½·¨, ¿ÉÒÔÏòÓû§ÏÔʾJavaScript±í´ïʽ. ¶þÕßµÄÇø±ðÔÚÓÚwriteln
ÔÚÐÐβ¼ÓÁËÒ»¸ö»Ø³µ,µ«ÊÇÓÉÓÚHTMLºöÂԻسµ,ËùÒÔÕâÒ»µã²î±ðÖ»¶ÔÔ¤¶¨Òå¸ñʽ
Îı¾(preformatted text)ÓÐÓ°Ïì.Èç,PRE±ê¼ÇÄÚ²¿µÄÎı¾.

document¶ÔÏó»¹ÓÐÁ½¸öʼþ´¦Àí³ÌÐò, onLoadºÍonUnload, ÒԱ㵱Óû§³õ´Î×°
ÔØÒ³»òÊÇÍ˳öҳʱÍê³ÉһЩ¹¦ÄÜ.

ÿ¸öÒ³ÖÐÖ»ÓÐÒ»¸ödocument¶ÔÏó,ËüÊǸÃÒ³ÄÚËùÓÐform, link, anchor¶ÔÏóµÄ
×æÏÈ.

ʹÓÃform¶ÔÏó

NavigatorΪÎĵµÄÚµÄÿ¸ö¿ò¼Ü´´½¨Ò»¸öform¶ÔÏó.¿ÉÒÔÓÃNAMEÊôÐÔ¸øformÃüÃû,
·½·¨ÈçÏÂ:

<FORM NAME="myform">
<INPUT TYPE="text" NAME="quantity", onChange="...">
...
</FORM>


ÕâÑù¾Í²úÉúÁËÒ»¸ö»ùÓÚ´Ë¿ò¼ÜµÄÃûΪmyformµÄJavaScript¶ÔÏó.Õâ¸öformÖÐÓÐÒ»
¸öÊôÐÔ¶ÔÓ¦×Åtext¶ÔÏó. Äã¿ÉÒÔÓÃÏÂÊö°ì·¨ÒýÓÃÕâ¸ötext¶ÔÏó.
_
_document.myform.quantity
_

Ä㻹¿ÉÒÔÕâÑùÒýÓÃtext¶ÔÏóµÄÊôÐÔvalue.

__document.myform.quantity.value
_

Ò»¸öÎĵµÄÚµÄËùÓÐform´æ·ÅÔÚÃûΪformsµÄÊý×éÖÐ, µÚÒ»¸öform(ÔÚ¸ÃÒ³×²¿)
¼ÇΪform[0],µÚ¶þ¸öΪform[1],ÒÀ´ÎÀàÍÆ.ËùÒÔÇ°ÃæÒýÓû¹¿ÉÒÔ¼ÇΪ:

_document.forms[0].quantity
__document.forms[1].quantity.value

ÀàËƵØ, formÄڵĸ÷ÔªËØ, ÈçÎı¾Óò,ÎÞÏß°´Å¥µÈµÈ, ¾ù´æÔÚÊý×éelementÖÐ.

ʹÓÃwindow¶ÔÏó

window¶ÔÏóÊÇä¯ÀÀÆ÷(Navigator)ÖÐËùÓÐÆäËü¶ÔÏóµÄ"¸¸¶ÔÏó".ÔÚÒýÓô°¿ÚµÄÊôÐÔºÍ
·½·¨Ê±,¿ÉÒÔÊ¡ÂÔwindow¶ÔÏóµÄÃû×Ö.

window¶ÔÏóµÄÏÂÊö¼¸¸ö·½·¨(method)ºÜÓÐÓÃ,¿ÉÒÔÓÃÀ´´´½¨ÐµĴ°¿ÚºÍµ¯³öʽ¶Ô»°¿ò:

. open ºÍ close : ´ò¿ª»ò¹Ø±ÕÒ»¸öä¯ÀÀÆ÷(browser)´°¿Ú
. alert: µ¯³öÒ»¸ö¾¯Ê¾¶Ô»°¿ò
. confirm: µ¯³öÒ»¸öÈ·È϶Ի°¿ò

window¶ÔÏóµÄÊôÐÔ¶ÔÓ¦ÓÚframesetÄÚµÄËùÓÐframe, ÕâЩframe´æ·ÅÔÚframesetÖÐ.
framesetÖаüº¬Í¬Ò»´°¿ÚÖи÷¸ö×ÓframeµÄÈë¿Ú.ÀýÈç,ÈôÒ»¸ö´°¿ÚÖÐÓÐÈý¸ö×Óframe,
ÕâЩ×Óframe¾ÍÓÃwindow.frame[0], window.frame[1]ºÍ window.frame[2]±íʾ.

ÊôÐÔstatusÓÃÓÚÉèÖÃλÓÚ¿Í»§´°¿Úµ×²¿×´Ì¬À¸ÄÚµÄÐÅÏ¢.


ʹÓÃwindow ºÍ frame

JavaScriptÔÊÐí´´½¨ºÍ´ò¿ª´ú±íHTMLÎı¾, form¶ÔÏóºÍframeµÄ´°¿Ú. window¶ÔÏó
ÊÇJavaScript¿Í»§²ã´Î½á¹¹µÄ×²ã¶ÔÏó, formÔªËغÍÈ«²¿JavaScript´úÂ붼ÊÇ´æ
ÔÚÓÚÎĵµÖÐ,¶øÎĵµ±»×°Ôؽø´°¿Ú. ΪÁËÀí½â´°¿ÚÔõÑù¹¤×÷,Äã¿ÉÒÔ¿ØÖƲÙ×÷ÕâЩ´°¿Ú.

. ´ò¿ªºÍ¹Ø±Õ´°¿Ú
. ʹÓà frame
. ÒýÓô°¿ÚºÍ frame
. ÔÚ´°¿ÚÖ®¼ää¯ÀÀ(navigating)

´ò¿ªºÍ¹Ø±Õ´°¿Ú

µ±Óû§Æô¶¯(launch)Navigatorʱ,½«×Ô¶¯´´½¨Ò»¸ö´°¿Ú.Óû§»¹¿ÉÒÔʹÓÃNavigatorµÄ
File²Ëµ¥ÉϵÄNew Web Browser´ò¿ªÒ»¸ö´°¿Ú, ¿ÉÒÔÓÃNavigatorµÄFile²Ëµ¥µÄClose
»òExit¹Ø±ÕÒ»¸ö´°¿Ú.Ò²¿ÉÒÔÓóÌÐòµÄ°ì·¨À´´ò¿ª»ò¹Ø±ÕÒ»¸ö´°¿Ú.

´ò¿ª´°¿Ú

Ó÷½·¨open´´½¨Ò»¸ö´°¿Ú.ÏÂÃæÓï¾ä´´½¨ÁËÒ»¸öÃûΪmsgWindowµÄ´°¿Ú,²¢Ôڸô°¿ÚÄÚ
ÏÔʾÎļþsesame.htmlµÄÄÚÈÝ.

_msgWindow=window.open("sesame.html")

ÏÂÃæµÄÕâ¸öÓï¾äÄܹ»´´½¨Ò»¸öÃûΪhomeWindowµÄ´°¿Ú,ÓÃÓÚÏÔʾNetscapeµÄhome page.

_homeWindow=window.open("http://www.netscape.com")

´°¿Ú¿ÉÒÔÓÐÁ½¸öÃû×Ö.ÏÂÊöÓï¾ä´´½¨ÁËÒ»¸öÓÐÁ½¸öÃû×ֵĴ°¿Ú,µÚÒ»¸öÃû×ÖΪmsgWindow
ÓÃÓÚÒýÓô°¿ÚµÄÊôÐÔ,·½·¨ºÍ°üº¬¹Øϵ, µÚ¶þ¸öÃû×ÖdisplayWindowÓÃÓÚ°Ñ´°¿Ú×÷Ϊ
formÌá½» »ò³¬Îı¾Á´µÄ¶ÔÏóÀ´ÒýÓÃʱ.

´´½¨´°¿Úʱ,²¢²»ÒªÇóÒ»¶¨¸ø³ö´°¿ÚÃû.µ«ÊÇÄãÈô´òËã´ÓÁíÒ»¸ö´°¿ÚÖÐÒýÓô˴°¿Ú,
Ôò´Ë´°¿Ú±ØÐëÓÐÒ»¸öÃû×Ö.ÓйØʹÓô°¿ÚÃû×ÖµÄÐÅÏ¢²Î¼ûwindows and framesÓйØ×ÊÁÏ.

´ò¿ª´°¿Úʱ,¿ÉÒÔÖ¸¶¨´°¿ÚÊôÐÔ,Èç´°¿ÚµÄ¸ß¶È,¿í¶È,ÊÇ·ñ°üº¬¹¤¾ßÌõ,locationÓò
»ò¹ö¶¯ÌõµÈµÈ.ÏÂÊöÓï¾ä´´½¨ÁËÒ»¸öûÓй¤¾ßÌõµ«´øÓйö¶¯ÌõµÄ´°¿Ú.

_msgWindow=window.open
_("sesame.html","displayWindow","toolbar=no,scrollbars=yes")

_Óйش°¿ÚµÄÊôÐÔµÄϸ½ÚÇë²Î¼ûOPEN ·½·¨.
_

¹Ø±Õ´°¿Ú

¿ÉÒÔÔÚ³ÌÐòÖÐʹÓ÷½·¨closeÀ´¹Ø±ÕÒ»¸ö´°¿Ú.²»ÔÊÐíÖ»¹Ø±ÕÒ»¸öframe,
¶ø²»¹ØµôÕû¸ö¸¸´°¿Ú.

ÏÂÊöÓï¾ä¾ù¿É¹Ø±Õµ±Ç°´°¿Ú:

window.close()
self.close()
//´ËÓï¾ä²»ÄÜÓÃÔÚʼþ´¦Àí³ÌÐòÖÐ
close()

ÏÂÊöÓï¾ä¹Ø±ÕÁËÒ»¸öÃûΪmsgWindowµÄ´°¿Ú:

msgWindow.close()

ʹÓÃframe

frameÊÇÒ»ÖÖÌØÊâµÄ´°¿Ú,Ëü¿ÉÒÔÔÚÒ»¸ö´°¿ÚÏÔʾ¶à¸ö¶ÀÁ¢¹ö¶¯µÄframe.ÿ¸öframe
ÓÖÓи÷×Ô²»Í¬µÄURL. ¸÷frame¿ÉÒÔÖ¸Ïò²»Í¬µÄURL,Ò²¿ÉÒÔ×÷ΪÆäËüURLÄ¿±ê,µ«±ØÐëÔÚ
ͬһ¸ö´°¿ÚÄÚ. һϵÁеÄframe ×é³ÉÒ³(page).
ÏÂͼÊÇÒ»¸öº¬ÓÐÈý¸öframeµÄ´°¿Ú

This frame is This frame is
named listFrame named contentFrame
| |
| |
-----------------v-----------------------------------v------------
| Music Club Toshiko Akiyoshi |
| Artists Interlude |
| |
| Jazz The Beatles |
| - T. Akiyoshi Please Please Me |
| _ J. Coltrame |
| - M. Davis Betty carter |
| - D. Gordon Ray Charles and Betty Carter |
| |
| Soul Jimmy Cliff |
| - B. Carter The Harder They Come |
| _ R. Charles |
| ... ... |
----------------------------------------------------------------
| Alphabetical By category Musician Descriptions |
-----------------^----------------------------------------------
|
|
This frame is named
navigateFrame

´´½¨Ò»¸öframe

ÔÚHTMLÎĵµÖÐʹÓÃ<frameSET>±ê¼Ç¾Í¿ÉÒÔ´´½¨Ò»¸öframe. <frameSET>±ê¼ÇÔÚHTML
ÎĵµÖеÄΨһ×÷ÓþÍÊǶ¨Òå×é³ÉÒ³µÄ¸÷¸öframeµÄ²¼¾Ö(layout).

Àý1 ÏÂÊöÓïÃû¶¨ÒåÁËÉÏͼËùʾµÄÒ»×éframe

<FRAMESSET ROWS ="90%,10%">
<FRAMESET COLS="30%,70%">
<FRAME SRC=category.html NAME="listFrame">
ALT="FORWARD" HEIGHT=32 WIDTH=32> <FRAME SRC=titles.html NAME="contentFrame>
ALT="FORWARD" HEIGHT=32 WIDTH=32> </FRAMESET>
<FRAME SRC =navigate.html NAME="navigateFrame">
</FRAMESET>

ÏÂͼ¸ø³öÁËÕâЩframeµÄ²ã´Î½á¹¹,ËäÈ»ÓÐÁ½¸öframeÊÇÔÚÁíÒ»¸öframesetÖж¨ÒåµÄ,µ«
ÕâÈý¸öframeÓÐͬһ¸ö¸¸Ç×, ÕâÊÇÒòΪframeµÄ¸¸Ç×ÊÇËüµÄ¸¸´°¿Ú,¶ø´°¿ÚÊÇÓÉframe¶ø
²»ÊÇframesetÈ·¶¨µÄ.

top
|
+--listFrame (category.html)
|
+--contentFrame(titles.html)
|
+--navigateFrame(navigate.html)


ÄãÒ²¿ÉÒÔÊý×éframesÒýÓÃÉÏÊöµÄframe(ÓйØÊý×éframesµÄÐÅÏ¢²Î¼ûframe¶ÔÏó):

. listframe Óà top.frame[0]±íʾ
. contentframe Óà top.frame[1]±íʾ
. navigateframe Óà top.frame[2]±íʾ


Àý2 ¿ÉÒÔÓÃÁíÒ»¸ö°ì·¨´´½¨ÉÏÊö´°¿Ú: ×îÇ°ÃæµÄÁ½¸öframeÓënavigateFrame
¸÷Óв»Í¬µÄ¸¸±²,¶¥²ãµÄframeset¶¨ÒåÈçÏÂ:

<FRAMESSET ROWS ="90%,10%">
<FRAME SRC=muske13.htm NAME="upperFrame">
ALT="FORWARD" HEIGHT=32 WIDTH=32> <FRAME SRC=navigate.html NAME="navigateFrame>
ALT="FORWARD" HEIGHT=32 WIDTH=32> </FRAMESET>

Îļþmuskel3.html°üº¬ÁËÉÏÊöframeµÄ¹Ç¼Ü,²¢¶¨ÒåÁËÏÂÊöframeset.

<FRAMESSET COLS ="30%,70%">
<FRAME SRC=categroy.html NAME="listFrame">
ALT="FORWARD" HEIGHT=32 WIDTH=32> <FRAME SRC=titles.html NAME="contentFrame>
ALT="FORWARD" HEIGHT=32 WIDTH=32> </FRAMESET>

ÏÂͼ˵Ã÷ÁËÕ⼸¸öframeµÄ²ã´Î¹ØϵupperFrameºÍnavigateFrame¹²ÏíÒ»¸ö¸¸
±²:×µÄwindow. ¶ølistFrameºÍcontentFrame¹²ÏíÒ»¸ö¸¸±²:upperFrame.

top
|
| +--listFrame
| | (category.html)
+---upperFrame-----------|
|
+--contentFrame
| (titles.html)
|
|
|
|
+--navigateFrame
(navigate.html)

¿ÉÒÔÓÃÏÂÃæµÄ°ì·¨ÒýÓÃÕâЩframe(¹ØÓÚframeÊý×éµÄÐÅÏ¢²Î¼ûframe¶ÔÏó).

. upperFrame Óà top.frame[0]±íʾ
. navigateFrame Óà top.frame[1]±íʾ
. listFrame Óà upperFrame.frames[0] »òtop.frames[0].frames[0]±íʾ
. contentFrame ÓÃupperFrame.frames[1] »òtop.frames[0].frames[1]±íʾ


¸üÐÂframe(updating frames)

Ö»ÒªÄã˵Ã÷ÁËframe²ã´Î½á¹¹,Äã¿ÉÒÔÓÃlocationÊôÐÔÀ´ÉèÖÃURL, ÒÔ¸üÐÂframeµÄ
ÄÚÈÝ.

ÀýÈç,ÔÚʹÓÃÉϽÚÀý2ÖÐframesetʱ,ÈôÏ£ÍûÓû§Äܹ»¹Ø±Õº¬ÓÐ×ÖĸÐò»ò·ÖÀàÐò
µÄ»­¼ÒÁбíµÄframe(ÃûΪlistframe),ÇÒÖ»Ïë¿´µ½°´×÷Çú¼ÒÅÅÐòµÄ×÷Æ·±êÌâ(
ÔÚcontentFrameÖÐ), Ôò¿ÉÒÔÏònavigateFrame ÖмÓÈëÈçÏ°´Å¥.

<INPUT TYPE="button" VALUE="Titles Only"
onClick="top.frames[0].location='artists.html'">


µ±Óû§°´¶¯´Ë°´Å¥Ê±,Îļþartist.html±»¼ÓÔص½ÃûΪupperFrameµÄframeÖÐ,¶ø
listFrameºÍcontentFrame±»¹Ø±Õ,ÇÒ²»ÔÙ´æÔÚ.

ÒýÓÃframeºÍÔÚframeÖ®¼ää¯ÀÀ(navigate)

ÒòΪframeÊÇÒ»ÖÖ´°¿Ú,ËùÒÔÄã¿ÉÒÔÓëʹÓô°¿ÚÀàËƵİ취ÒýÓÃframeºÍÔÚframe Ö®
¼ää¯ÀÀ.

frameµÄÀý×Ó

ÔÚÉÏÒ»½ÚÖÐ, Èôframeset±»Éè¼ÆΪһ¸öÒôÀÖ¾ãÀÖ²¿µÄ¿ÉÓõıêÌâ,ÔòÕâЩframe¼°Æä
HTMLÎļþ°üÀ¨ÏÂÊöµÄÄÚÈÝ:

. category.html λÓÚlistFrameÖÐ, ·ÅÓа´·ÖÀàÅÅÐòµÄ×÷Çú¼ÒÁбí
. titles.html λÓÚcontentFrameÖÐ, ·ÅÓа´×ÖĸÐòÁÐÀï¸÷×÷Çú¼ÒÐÕÃû¼°¸Ã×÷
Çú¼ÒµÄ×÷Æ·±êÌâ.

. navigate.html λÓÚnavigateFrameÖÐ, ·ÅÓг¬Îı¾Á´, ʹÓû§Ñ¡ÔñÔõÑùÔÚlistFrame
ÖÐÏÔʾ×÷Çú¼Ò:ÒÔ×ÖĸÐò»ò·ÖÀàÐò.Õâ¸öÎļþ»¹¶¨ÒåÁËÒ»¸ö³¬Îı¾Á´, ʹÓû§¿ÉÒÔÏÔʾÿ¸ö
×÷Çú¼ÒµÄ¼ò½é.

. ¸½¼ÓÎļþalphabet.html ·ÅÓа´×ÖĸÅÅÐòµÄ×÷Çú¼Ò,µ±Óû§ÏëÏÔʾ×ÖĸÐòÁбíʱ,
°´¶¯´ËÁ´,Õâ¸öÎļþÖоÍÏÔʾÔÚlistFrameÖÐ.

Îļþcategory.html (°´·ÖÀàÅÅÐò)°üº¬µÄ´úÂëÀàËÆÓÚÏÂÊö:

<B>Music Club Artists</B>
<P><B>Jazz</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0006 TARGET="contentFrame">Jon Coltrane</A>
<LI><A HREF=titles.html#0007 TARGET="contentFrame">Miles Davis</A>
<LI><A HREF=titles.html#0010 TARGET="contentFrame">Dexter Gordon</A>

<P><B>Soul</B>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Cater</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>
...



Îļþ alphabet.html (°´×ÖĸÅÅÐò) °üº¬µÄ´úÂëÀàËÆÓÚÏÂÊö:

<B>Music Club Artists</B>
<LI><A HREF=titles.html#0001 TARGET="contentFrame">Toshiko Akiyoshi</A>
<LI><A HREF=titles.html#0002 TARGET="contentFrame">The Beatles</A>
<LI><A HREF=titles.html#0003 TARGET="contentFrame">Betty Carter</A>
<LI><A HREF=titles.html#0004 TARGET="contentFrame">Ray Charles</A>


Îļþ navigate.html(ÔÚÆÁÄ»µ×²¿µÄµ¼º½Á´)°üº¬µÄ´úÂëÀàËÆÏÂÃæ. ×¢
Òâ: artists.htmlµÄÄ¿±êÊÇ"_parent". µ±Óû§°´¶¯´ËÁ´Ê±,Õû¸ö´°¿Ú±»ÖØд,
ÒòΪ×îÉϲ㴰¿ÚÊÇnavigateFrameµÄ¸¸±².

<A HREF=alphabet.html TARGET="listFrame"><B>Alphabetical</B></A>
&nbsp&nbsp&nbsp
<A HREF=category.html TARGET="listFrame"><B>By category</B></A>
&nbsp&nbsp&nbsp
<A HREF=artists.html TARGET="_parent">
<B>Musician Descriptopns</B></A>


Îļþtitles.html(Ö÷Îļþ,ÏÔʾÔÚÓұߵĿò¼ÜÖÐ)°üÀ¨µÄ´úÂë´óÖÂÈçÏÂ:

<!------------------------------------------------------------------>
<A NAME="0001"><H3>Toshiko Akiyoshi</H3></A>
<P>Interlude
<!------------------------------------------------------------------>
<A NAME="0002"><H3>The Beatles</H3></A>
<P>Please Please Me
<!------------------------------------------------------------------>
<A NAME="0003"><H3>Betty Carter</H3></A>
<P>Ray Charles and Betty Carter
...

Óйش´½¨frameÓ﷨ϸ½Ú²Î¼ûframe¶ÔÏó.

ÒýÓÃwindowºÍframe

ÓÃÄĸöÃû×ÖÀ´ÒýÓô°¿ÚÈ¡¾öÓÚÄãÊÇÏëÒýÓô°¿ÚµÄÊôÐÔ¡¢·½·¨ºÍʼþ´¦Àí³ÌÐò,
»¹ÊÇÏë°Ñwindow×÷ΪformÌá½»»ò³¬Îı¾Á´µÄ¶ÔÏó.

ÒòΪwindow¶ÔÏóλÓÚJavaScript¿Í»§²ã´Î½á¹¹µÄ×²ã. windowÊÇ˵Ã÷´°¿Ú
ÄÚ¸÷¶ÔÏó¼ä°üº¬¹ØϵµÄ»ù´¡.


ÒýÓô°¿ÚµÄÊôÐÔ¡¢·½·¨ºÍʼþ´¦Àí³ÌÐò

¿ÉÒÔÓÃÈçÏ°취֮һÀ´ÒýÓõ±Ç°´°¿Ú»òÆäËü´°¿ÚµÄÊôÐÔ¡¢·½·¨¼°Ê¼þ´¦Àí³ÌÐò:

. self»òwindow: selfºÍwindowº¬ÒåÏàͬ, ¶¼ÊÇÖ¸µ±Ç°´°¿Ú, ¿ÉÒÔÈÎÑ¡ÆäÒ»
À´ÒýÓõ±Ç°´°¿Ú.Èç,µ÷ÓÃwindow.close()»òself.close()À´¹Ø±Õµ±Ç°´°¿Ú

. top»òparent: topºÍparent¾ùÓÃÀ´Ìæ´ú´°¿ÚµÄÃû³Æ. topÊÇÖ¸×îÉϲãµÄNavigator
´°¿Ú, parentÔòÊÇÖ¸°üº¬framesetµÄ´°¿Ú.ÀýÈç,Óï¾ä
parent.frame2.document.bgColor="teal"
°ÑÃûΪframe2µÄframeµÄ±³¾°ÑÕÉ«ÖóÉteal. frame2Êǵ±Ç°framesetµÄÒ»¸öframe.

.´°¿Ú±äÁ¿µÄÃû×Ö: ´°¿Ú±äÁ¿ÃûΪ´ò¿ª´°¿Úʱָ¶¨µÄ±äÁ¿.Èç,msgWindow.close
¹Ø±ÕÃûΪmsgWindowµÄ´°¿Ú. µ«ÊÇÈôÏëÔÚʼþ´¦Àí³ÌÐòÖдò¿ª»ò¹Ø±ÕÒ»¸ö´°¿Ú,±ØÐëÓÃ
window.open()»òwindow.close(),¶ø²»ÄÜÓÃopen()ºÍclose().ÓÉÓÚJavaScriptÖеľ²Ì¬
¶ÔÏóµÄ×÷ÓÃÓòÎÊÌâ, µ÷ÓÃclose¶ø²»Ö¸¶¨¶ÔÏóÃûµÈ¼ÛÓÚdocument.close().

. Ê¡ÂÔ´°¿ÚÃû. ÒòΪ×ÜÊǼٶ¨Á˵±Ç°´°¿Ú,µ÷Óô°¿ÚµÄ·½·¨ºÍʹÓÃÆäÊôÐÔʱ,¿É
ÒÔÊ¡ÂÔ´°¿ÚÃû. Èçclose()¹Ø±ÕÁ˵±Ç°´°¿Ú.

Óйش°¿Ú·½·¨µÄÐÅÏ¢²Î¼ûwindow¶ÔÏó

Àý1 ÒýÓõ±Ç°´°¿Ú. ÏÂÃæÕâ¸öÓï¾äÒýÓÃÁ˵±Ç°´°¿ÚÄÚµÄÃûΪmusicformµÄform.
Èç¹ûºË¶Ô¿ò±»ºË¶Ô,Ôò¸ÃÓï¾äÏÔʾһ¸ö¾¯Ê¾.

_if (self.document.musicForm.checkbox1.checked)
__alert('The checkbox on the misicForm is checked')

Àý2 ÒýÓÃÆäËü´°¿Ú.ÏÂÃæµÄÓï¾äÒýÓÃÁËλÓÚ´°¿ÚcheckboxWinµÄÃûΪmusicformµÄform.
ÕâЩÓï¾äʵÏÖÅжÏÊÇ·ñºË¶Ô¿ò±»ºË¶Ô,Ö´Ðк˶Ըú˶Կò,ÅжÏÊÇ·ñselect¶ÔÏóµÄÒ»¸öÑ¡
ÏѡÖÐ,Ñ¡ÔñSELECT ¶ÔÏóµÄÒ»¸öÑ¡Ïî

_//ÅжÏÊÇ·ñºË¶Ô¿ò±»ºË¶Ô
_if (checkboxWin.document.musicForm.checkbox2.checked)
__alert('The checkbox on the misicForm in checkboxWin is checked')
_//Ö´Ðк˶Ըú˶Կò
_checkboxWin.document.musicForm.checkbox2.checked=true
_//ÅжÏÊÇ·ñselect¶ÔÏóµÄÒ»¸öÑ¡ÏѡÖÐ
_if (checkboxWin.document.musicForm.musicTypes.options[1].selected)
__ alert('Option 1 is selected!')
_//Ñ¡ÔñSELECT ¶ÔÏóµÄÒ»¸öÑ¡Ïî
_checkboxWin.document.musicForm.musicTypes.selectedIndex=1
_

Àý3 ÒýÓÃÁíÒ»¸ö´°¿ÚÖеÄframe. ÏÂÊöÓï¾äÒýÓÃÁË´°¿Úwindow2ÖеÄÃûΪframe2
µÄframe.ÕâÌõÓï¾ä°Ñframe2µÄ±³¾°ÑÕÉ«¸ÄΪ×ÏÉ«,Ãû×Öframe2±ØÐëÊÇÔÚ<FRAMESET>
±ê¼ÇÖÐÖ¸Ã÷. <FRAMESET>ÄܲúÉúframeset.
window2.frame2.document.bgColor="violet"


ÔÚformÌá½»»ò³¬Îı¾Á´ÖÐÒýÓÃÒ»¸ö´°¿Ú

µ±°ÑÒ»¸ö´°¿ÚÓÃ×÷formÌá½»»ò³¬Îı¾Á´µÄ¶ÔÏóʱ(×÷Ϊ<FORM>»ò<A>±ê¼Ç
µÄTARGETÊôÐÔ), ҪʹÓô°¿ÚÃû,¶ø²»ÄÜÓô°¿Ú±äÁ¿. Õâ¸ö´°¿Ú½«ÊÇÁ´±»×°ÔؽøµÄ
´°¿Ú,»òÕ߶ÔÓÚformÀ´Ëµ,ÊÇÏÔʾ·þÎñÆ÷ÏìÓ¦µÄ´°¿Ú.

Àý1 µÚ¶þ´°¿Ú. ÏÂÃæµÄÀý×Ó¸øµÚ¶þ´°¿Ú´´½¨ÁËÒ»¸ö³¬Îı¾Á´.Õâ¸öÀý×ÓÖÐ,
ÓÐ:Ò»¸ö°´Å¥,´Ë°´Å¥´°¿ÚÄÜ´ò¿ªÃûΪwindow2µÄ´°¿Ú;Ò»¸öÁ´½Ó,°ÑÎļþdoc2.html
×°Èë×îдò¿ªµÄ´°¿Ú;ÁíÒ»¸ö°´Å¥,´Ë°´Å¥¹Ø±Õ´°¿Ú.

<P>
<INPUT TYPE="button" VALUE="Open window2"
onClick="msgWindow=window.open('','resizable=no,width=200,height=200')"
<P>
<INPUT TYPE ="button" VALUE="Close window2"
onClick="msgWindow.close()">


Àý2 µÚ¶þ´°¿ÚµÄanchor.ÔÚµÚ¶þ´°¿ÚÄÚ¸øanchor´´½¨Ò»¸ö³¬Îı¾Á´,Õâ¸öÁ´
½ÓÔÚ´°¿Úwindow2ÖÐÏÔʾÎļþdoc2.htmlµÄÃûΪnumberµÄanchor .

<A HREF=doc2.html#numbers TARGET="window2">Numbers</A>

Àý3 frameµÄÃû³Æ. ÏÂÀýΪframeÄÚµÄanchor´´½¨ÁËÒ»¸ö³¬Îı¾Á´.Õâ¸öÁ´ÔÚ
ÃûΪcontFrameÖÐÏÔʾÎļþsesame.htmlÖÐÃûΪabs_method.Õâ¸öframe±ØÐë·ÅÔÚ
µ±Ç°framesetÖÐ,ÇÒframeµÄÃû×ÖÒªÓÃ<FRAMESET>±ê¼ÇµÄNAMEÊôÐÔ¶¨Òå.

<A HREF=sesame.html#abs_method TARGET="contentFrame">abs</A>

Àý4 ³£frameµÄÃû³Æ. ÏÂÀýΪÎļþ´´½¨ÁËÒ»¸ö³¬Îı¾Á´.Õâ¸öÁ´°ÑÎļþartists.html
µÄÄÚÈÝÏÔʾÔÚµ±Ç°framesetµÄ¸¸´°¿ÚÄÚ,Õâ¸öÁ´¶ÔÏó(link object)³öÏÖÔÚframesetµÄij¸ö
frameÖÐ,µ±Óû§°´¶¯´ËÁ´Ê±, framesetÖеÄËùÓÐframe¶¼Ïûʧ,artists.ftmlµÄÄÚÈݱ»×°Èë
µ½¸¸´°¿ÚÄÚ.

<A HREF="artists.html" TARGET="_parent">
<B>Musician Descriptions</B></A>


ÔÚ´°¿ÚÖ®¼ää¯ÀÀ(Navigating among windows)


¿ÉÒÔͬʱ´ò¿ªºÜ¶àNavigator´°¿Ú. Óû§¿ÉÒÔ°´¶¯´°¿Ú,¸ø´Ë´°¿Úfocus,ʵÏÖÔÚ
ÕâЩ´°¿ÚÖ®¼ää¯ÀÀ. Äã¿ÉÒÔÓñà³ÌÐòµÄ°ì·¨°Ñfocus¸øÒ»¸ö´°¿ÚÄڵĶÔÏó,»òÕßͨ¹ý
Ö¸¶¨´Ë´°¿Ú×÷Ϊ³¬¼¶Îı¾Á´Ä¿±êµÄ°ì·¨.¾¡¹ÜÄãÄܸıäµÚ¶þ´°¿ÚÄÚ¶ÔÏóµÄÖµ,µ«²¢²»
Äܼ¤»îµÚ¶þ´°¿Ú,µ±Ç°´°¿Ú×ÜÊǻµÄ.

»î¶¯´°¿ÚÊÇÓµÓÐfocusµÄ´°¿Ú,Ò»µ©´°¿ÚÓµÓÐÁËfocus,´Ë´°¿Ú±»·ÅÔÚ×îÇ°Ãæ,Äܹ»
¿É¼ûµØ±»¸Ä±ä. ÀýÈç,´Ë´°¿ÚµÄ±êÌâÀ¸¿ÉÒԸıäÑÕÉ«. ÊÓ¾õЧ¹ûËæÄãËùÓõÄƽ̨¶øÓÐËù±ä»¯.

Àý1 °Ñfocus¸³¸øÁíÒ»¸ö´°¿ÚµÄ¶ÔÏó.ÏÂÊöÓï¾ä¿ÉÒÔ°Ñfocus¸³¸ø´°¿ÚcheckboxWin
ÄÚµÄÎı¾¶ÔÏócity, ÒòΪcity»ñµÃÁËfocus, checkboxWinÒ²¾ÍµÃµ½ÁËfocus¶ø³ÉÁ˻
´°¿Ú.Õâ¸öÀý×Ó»¹°üÀ¨ÁË´´½¨checkboxWinµÄÓï¾ä.

_
_checkboxWin=window.open("doc2.html")
_...
_checkboxWin.document.musicForm.city.focus()
_

Àý2 ÀûÓó¬Îı¾Á´°Ñfocus¸³¸øÁíÒ»¸ö´°¿Ú. ÏÂÃæµÄ¾ä×ÓÖ¸¶¨window2×÷Ϊ³¬ÎÄ
±¾Á´µÄÄ¿±ê,µ±Óû§°´¶¯´ËÁ´Ê±,focusת»»µ½window2, Èôwindow2²»´æÔÚ,Ôò±»´´½¨.

<A HREF="doc2.html" TARGET="window2"> Load a file into window2</A>





Copyright: NPACT BACKWARD FORWARD