jsEditor - Function Navigator

Aim: to demonstrate how to use the Function Navigator Dialogue.

If you choose Tools: Function Navigator from the main menu, you will see a dialogue appear.

Click on the button Function Navigator. If there are any functions on your page, then they will be listed in the box on the left titled: Functions.

Open the file jscookie3.htm, which normally lives in the tutorial. It is here simply for practice with Function Navigator.

Load the file and click the Function Navigator button. You will get a list of functions appear in the left hand box.

Click on a function and its name will be selected in the page. So, click on setCookie( ...  and the function name will be selected on the page.

At the same time the box on the right with the title: Occurrences will fill with items. These are all the occurrences of this name in the page - all the times it is used. One of these values will be the actual function - the same as the one clicked on the right. The others will be examples where it is called.

Now click on getCookieVal(offset). The function, where it is declared will be selected on the page, and the page will scroll as appropriate. On the left two items will appear. One of these is the same as the current one. And the other is where the function is used.

If you click on getCookieVal(offset), nothing will change as this is where the function is declared.

Click on getCookieVal(i) and you find an instance where the function is used. In this case, it has a variable.

In a page, you would expect the function to have at least two entries in the Occurrences box: one for the declaration and one for the use.

If there is only one value then something is wrong. Either the function is not used and is redundant, or there is an error in its use. For example, it has been mispelled. (The viewer will pick this up for you when you try to run the program). Better, open it up in the default browser: if the browser crashes, then jsEditor will remain safe.

Here, getCookie(name) occurs only once and is redundant.

When you open a js file, the functions will often occur with only one example in the occurrences box. This is because they are used elsewhere in the page that the js file is linked to.

In this case, it is normal to have only one occurrence (which is the declaration!).

Close the Function Navigator dialogue and open the file jsTripleMenu.js. Open the Find Functions dialogue again.

This time it will appear with an addional button - Add JS Tags. Function Navigator searches the JavaScript code for functions. As js files do not have JavaScript tags, you need to add them to use Function Navigator. Click on the new button now.

Yet another button appears: Remove JS Tags. Providing the tags are left as they were, when you want to save the file after making changes, you can delete the JavaScript tags at the start and end of the document.

So we have two buttons and empty boxes. If you did not close the dialogue, the boxes would still hold the old values until you clicked on the Function Navigator button.

Click on the Function Navigator button now.

After a few seconds (this is a big page) the left-hand box will fill up with functions. You can now explore the functions in the page. Click on functions, and click on their occurrences in the right-hand box.

Click on the function go(aMenu) and the right-hand box will fill up with examples. In this case, it is confusing the history.go(0) with a function. In this case, it is clear which are examples of the use of the function and which are parts of history. However, it is a good idea to avoid using JavaScript words as function names.

Finally, click on the Remove JS Tags button and it will remove the tags it entered above.

If you click on the items they will still work.

Open any other page. It will ask you if you wish to save it, because there have been changes. As the page is the same as the original page, chose "No"

If you click on any items in the box the right-hand box will empty and nothing will happen. These are old items from the previous file.

If the new page isn't a js file, then only the Function Navigator button will remain. Click on this button. If there are any functions in the page, then Function Navigator will list them. If you are using these tutorial files, there probably won't be any functions to find.

Function Navigator can be extremely useful in navigating a complicated page.


You have learned how to:


Next: How to