JavaScript Basics Quiz Four Basics

Second, enhance the navigation function

1. Links in drop-down menu (links in Select menu)

Q: How do I implement a link to a different page in the Drop-down menu?

a: To create a drop-down menu as shown:Select a pageJavaScript FAQNumbersStringsNavigationColorsJavascripter.net

You can use the following code:

2. <form>
4. <select
6. OnChange= "if (this.selectedindex!=0)
8. Self.location=this. Options[this.selectedindex].value ">
10. <option value="" selected>Select a page
12. <option value="startpag.htm">JavaScript FAQ
14. <option value="numbers.htm">numbers
16. <option value="strings.htm">strings
18. <option value="navigati.htm">navigation
20. <option value="colors.htm">colors
22. <option value="Http://www.javascripter.net">javascripter.net
24. </Select>
26. </form>

Just change the menu item and its corresponding URL to the one you need. You can use an absolute address (just like http://www.javascripter.net), or you can use a relative address (like mypage.htm).

2. Buttons link (button links)

Q: How can I turn a button into a hyperlink to another page?

A: To create a button is like a:

You can use this piece of code:

1. <form< span class= "tag" >>  
2. << Span class= "Tag-name" >input  type =button  
3. value =
4. onclick =>
5. </form >  

Just change to the button text and destination address you need. Try this:

You can use an absolute address (like http://www.javascripter.net) or a relative address (like mypage.htm).

3. Back button

Q: Can I make the button like the Back button of the browser?

A: To create your own back button, you can use this piece of code:

1. <form>
2. <input type=button value="Back"
3. OnCLick="History.back ()">
4. </form>

Now try:

4. Forward buttons (Forward button)

Q: Can I make the button like the "Forward" button in the browser?

A: To create your own "forward" button, use this code:

1. <form< span class= "tag" >>
2. <input  type =button  value = "Forward"
3. onclick = "History.forward ()" >
4. </form >

If the forward button on the browser is currently unavailable, the forward button will also not work. The situation is that the current page is the last page in your browsing history. In other words, if you are using the browser's " back " button to reach this page (or the script's back button), then the Forward button will work. Now try it!

5. Query string (stirngs)

Q: My footsteps can I access the query string in the current URL?

a: The query string (or search string) is an optional part of the URL that follows the filename and directs (?) with a question mark. For example, the following URL contains a query string after the HTML filename ? myquery:

Http://www.myfirm.com/file.html?myquery

Your script can use the JavaScript Location.search property to access the query character press in the current URL. Click the button below to try it out! (To see the URL in the address, you might want to display the page in the top-level browser window.) ）

The code to create these buttons is:

2. <form>
4. <input type=button value="Add query? Test"
6. OnClick= "selfself.location=
8. self.location.protocol+ '//'
10. +self.location.host
12. +self.location.pathname+ '? Test '>
16. <input type=button value="Show query"
18. OnClick="alert (' Query string: ' +self.location.search ')>
22. <input type=button value="Remove query"
24. OnClick= "selfself.location=
26. self.location.protocol+ '//'
28. +self.location.host
30. +self.location.pathname ">
32. </form>

Note: The query string may sometimes not work as expected. For example, if you save this page on a local disk, it will not work on Internet Explorer 4.x (but still works in Netscape Navigator).

6. Pass the parameter to the page (passing parameters to a page)

Q: Can I pass parameters from the page to another page?

A: That's OK. There are several different ways to achieve this:

• Save the parameters in the cookie
• Save the argument in a different window or a variable in the frame
• Attribute Top.name (Name of browser window) with parameters that can be modified
• Concatenation of parameters as a query string after the URL of the target page

Here is a simple example to illustrate all the methods of passing parameters. The value passed should be the character for "it_worked". When you click on the button below, the button's event script will have these values (1) in the cookie named Parm_value, (2) in the top-level variable Top.parm_value and (3) in the Top.name property. The script then guides the browser to parm_get.htm, whose URL contains a query string with a value of URL encoding.

7. Find text (searching for text)

Q: How do I query a specific text string on the page?

a: in Netscape Navigator 4.x, you can use the window.find (String) method to find; See Find dialog box. In Internet Explorer 4.x or later, create a text Range object (Trang in the following example), and then use Trang.findtext (String).

Example: The following script finds and highlights on the page based on the text entered by the user.

The code for this example is:

2. <form name="F1" action= ""
4. OnSubmit= "if (this.t1.value!=null && this.t1.value!=")
6. FindString (This.t1.value); return false "
8. >
10. <input  type =< Span class= "Attribute-value" > "text"  name = t1  value =  size =20>
12. <input type="Submit" name=B1 value="Find">
14. </form>
18. <script language="JavaScript">
20. <!--
22. var trange=null
26. function FindString (str) {
28. if (parseint (navigator.appversion)<4) return;
30. var strfound;
32. if (navigator.appname= "Netscape") {
36. Navigator-specific CODE
40. strfound=self. Find (str);
42. if (!strfound) {
44. strfound=self. Find (str,0,1)
46. while (Self.find (str,0,1)) continue
48. }
50. }
52. if (Navigator.appName.indexOf ("Microsoft")!=-1) {
56. Explorer-specific CODE
60. if (trange!=null) {
62. Trange.collapse (False)
64. strfound=trange. FindText (str)
66. if (strfound) Trange.select ()
68. }
70. if (trange==null | | strfound==0) {
72. Trange=self. Document.body.createTextRange ()
74. strfound=trange. FindText (str)
76. if (strfound) Trange.select ()
78. }
80. }
82. if (!strfound) alert ("String" "+str+" ' Not found! ')
84. }
86. -- >
88. </Script>