Using JavaScript panels

You will see JavaScript panels used for demonstrations, exercises, and solutions. The information here will help you to make full use of them.

Types of JavaScript panels

Depending on the amount of information being displayed, different types of Web panels are used. When not all of the information can be viewed, a scroll bar will appear. If you wish to readjust the relative sizes of panes that appear one above the other, put your cursor between them until you see an arrow, which can be used to click and drag where the boundary is placed.

Two-pane JavaScript panels

The simplest JavaScript panels have two panes, the top for the JavaScript file and the bottom for the console.

Layout with two panes

Changeable view JavaScript panels

When HTML and/or CSS are used as well as JavaScript, there are panes for each of these on the left side of the page and panes for the web page and console on the right side of the page.

Layout with all code panes

You can change between two modes (pane view and tab view) by clicking on the button with label Tab view found in the top right corner of the panes on the left side of the page.

Pane view

The default is pane view mode with all panes visible. When in this mode, the tabs on the top left border can be used to remove panes. White letters on a blue background indicate what is visible.

Tab view

In tab view, only one pane at a time can be seen. Click on the appropriate tab on the top left border in order to select among the panes. As in pane view, white letters on a blue background indicate that a tab is being used.

Features of JavaScript panels

Running JavaScript

Initially, the console and rendered web page panes are empty. Clicking on the Run button (for two-pane panels) results in the JavaScript script being run and clicking on the Load page button results in the page being loaded. The green progress bar will indicate when the process has terminated.

You can view the rendered web page in its pane, or you can click on the arrow to have it appear in a separate window. open in new window icon

Changing the document

You can change the document any way you like and reload it as many times as you like to see the results of the changes. Clicking on the Restore button will remove any of the changes you have made, restoring the original content. (Be careful: using this button will cause you to lose any work you have done.)

Colour coding

Colours are used in the various types of panes to highlight built-in terms; you can take advantage of this feature to help identify errors in your work. Colours are also used to identify different types of data in the console, such as the use of different colours for strings and numbers.

Warning messages

You may see a symbol to the left of one of the line numbers in the left column. If you put your cursor over the symbol, you will see a message. Here are the meanings of the symbols, in increasing order of severity.

'i' icon in context

You are being given some information.

'triangle' icon in context

You are being given a caution.

'x' icon in context

You are being given a warning.

Although it is sometimes acceptable to have information and caution symbols showing, a warning is a good indication that a change is needed.