[Contents]

jsEditor - A plethora of buttons

Aim: to reveal how to handle the buttons.

Click on the main menu View. You will see you can toggle the side panel here to make the directories, etc disappear or apppear. You can also toggle the buttons. There are two sets: one for HTML and one for JavaScript.

When they are visible, you can right-click to change HTML to JavaScript and vice versa or make them disappear.

Choose View: HTML Buttons. A number of buttons appear at the top of the editor.

There are more options with the popup menus. For example forms do not appear on the buttons. You can get forms and form elements by right-clicking on the HTML mode button or on the page when in HTML mode.

The buttons call 'boilerplate code' and correspond to the popup menus.

Ensure you have clicked the HTML mode button.

Right click and choose forms: form. Now choose forms: select. Select code is added with some example options. Delete all but the one that says 'selected'.

Select a file in the filebox on the left-hand panel.

Click on the options button. An option with the selected filename and title is created. Choose another file.

Now the options button is disabled. Click on the Repeat button and another option is added with the selected filename and title.

I got the following (After typing 'Choose a file'):

<FORM NAME="" METHOD="POST" ACTION="" ENCTYPE="TEXT/PLAIN">

<SELECT NAME="">Choose a file

<OPTION VALUE="" SELECTED>Choose a file

<OPTION VALUE="ArrayTextImage.htm">Image Descriptions

<OPTION VALUE="cookie3.htm">Getting information from JavaScript cookies

</SELECT>

</FORM>

  1. Select this code.
  2. Click on BODY in the buttons
  3. Click at the top of this code and select HEAD from the buttons
  4. Select all this code and choose the HTML button.

I ended up with this:

<HTML>

<HEAD>

</HEAD>

<BODY>

<FORM NAME="" METHOD="POST" ACTION="" ENCTYPE="TEXT/PLAIN">

<SELECT NAME="">

<OPTION VALUE="" SELECTED>Choose a file

<OPTION VALUE="ArrayTextImage.htm">Image Descriptions

<OPTION VALUE="cookie3.htm">Getting information from JavaScript cookies

</SELECT>

</FORM>

</BODY>

</HTML>

Now select somewhere in the HEAD and add meta title, keywords and descriptions tags by clicking on the appropriate buttons. The cursor will be placed where you would normally type a title, keywords, etc. In this case, before you enter the next tags, move the cursor to a new line. Put the title tags in the first position after the HEAD. This is to give you practice with the buttons and to establish good practice with HTML pages. (The title is put first because some search engines have problems if it comes later.)

Now right-click on the buttons and choose 'Show JS buttons'.

Check your cursor is in the HEAD of the document and after the meta tags. Click the Java Script Tags button to add JavaScript tags.

Choose function and type 'goThere()' in the box.

The cursor will be inside the curly brackets ready for you to type your stuff.

Right-click on the JS mode button and choose Other: Location.

This will add the following code:

top.location=""

Type 'myform' in the function's brackets so you have:

function goThere(myform){

Now so far you should have this code:

function goThere(myform){

top.location=""

}

Now select 'top.location:=""'. And click on the if button.

Type or copy the following into the box:

myselect.options[myselect.selectedIndex].value!='none'

Continue until your code looks the same as mine, below (except for the file names and titles, of course!)

My complete code was:

<HTML>

<HEAD>

<TITLE></TITLE>

<META NAME="KEYWORDS" CONTENT="">

<META NAME="DESCRIPTION" COTENT="">

<SCRIPT LANGUAGE="JAVASCRIPT">

<!--//

function goThere(myselect){

if (myselect.options[myselect.selectedIndex].value!='none'){

top.location=myselect.options[myselect.selectedIndex].value;

}

}

//-->

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="" METHOD="POST" ACTION="" ENCTYPE="TEXT/PLAIN">

<SELECT onChange="goThere(this)">

<OPTION VALUE="none" SELECTED>Choose a file

<OPTION VALUE="ArrayTextImage.htm">Image Descriptions

<OPTION VALUE="cookie3.htm">Getting information from JavaScript cookies

</SELECT>

</FORM>

</BODY>

</HTML>

 

You have learned how to:

Next: How to