JavaScript tutorial:
Viewing your web pages


It is important to be able to see what your pages will look like on the Internet - before you upload them. JavaScript Editor gives you the following ways to view your pages (available on the Main Toolbar and the View menu):

viewing webpages

  1. View your page using Internal Viewer.
    Thanks to built-in error-checking, this is an option you are likely to use a lot during the design stage.

  2. View your page in the browser.
    With a single click you open your default web browser to view your page.

  3. View your page in the browser via the local web server.
    If you are you using AJAX, PHP, or some other server-side technology to compose your pages, you need to run a local web server on your computer to view them.
    One click is all it takes to view your creation served by your web server (using http://localhost/...).

    Tip: Before using your option, you have to tell JavaScript Editor what is the root folder of your web server. To do that, select File / Local Server from the menu.

    If you are using Apache, the root folder is likely to be: c:\Apache\htdocs

    - You file location is: c:\Apache\htdocs\MyWebsite\MyPage.htm
    - The root folder of your web server: c:\Apache\htdocs
    - To view the file, JavaScript Editor will launch the default browser and direct it to open:

  4. View your page on the Internet.
    For example, you have just modified your page, selected the Put command - and presto, your page is live on the Internet...
    ... and you can view it immediately!  
    - You file location is: c:\Apache\htdocs\MyWebsite\MyPage.htm
    - In the Website Settings you specified the following HTTP address:
    - To view the file, JavaScript Editor will launch the default browser and direct it to open:

  5. Visual Web Designer.
    By default, your document opens in the code view, allowing you edit it - which is the main strength of JavaScript Editor. However, there will be occasions when it is easier to edit your pages using the Visual Web Designer, a fully-fledged WYSIWYG view of your document.

    Tip: Visual tools are great, but the code they generate can usually be improved upon.

    Switching back from the Visual Web Designer to code view will automatically cleanup and beautify your code if you have checked the option Cleanup / Auto-cleanup after Visual Web Designer.

    This allows you to have pages perfectly formatted for XHTML, which are smaller, faster to load, and faster to render in the browser.

    For more information see the Source Code Formatter section.

Viewing your pages in multiple browsers

Because of the differences in rendering your pages, it is a good idea to check how your pages look like in different browsers. The commands above work for your default browser, but you can easily add more browsers to the JavaScript Editor environment.

The fastest way to add additional browsers is by selecting Automate / Install Additional Components from the menu:

  • Browser support. Run this wizard to be able to open your pages in the browser you specify.

  • Browser support - local server. See option 3 above for more information.

  • Browser support - Internet . See option 4 above for more information.

Alternatively, you can add new browsers and other tools to the JavaScript Editor environment manually, by selecting Tools - Add/Edit from the menu.