Javascript Basics

What's covered?

This topic started in a moment of enthusiasm when I thought I might try to learn something about javascript. Well I did learn something, stick to writing! However I have had some feedback that people have found this a useful starting point so I will leave it in.

Java v Javascript

Let's get this clarified first as it does cause some confusion for people new to this area.

This topic is about javascript.

Where do I put the script?

There are some hard and fast rules and there are opinions and there is no simple answer!

Generally though, it is regarded as best practice to write the script into the head section or a file referenced from there.

Adding the Script to the Head Section

The script is written between two script tags as shown.

<script type= "text/javascript">

Write your javascript here.

</script>

Using a Javascript File

The alternative method is to add the javascript to a file so that it is only written once and referenced by many topics. This keeps your topics smaller and is easier; if you have to amend any of your javascript, the change only needs to be made once. The Javascript file can be edited using any text editor such as Notepad.

I have put all my javascript into a single file titled petergrainge.js which you can download by clicking this link.

To reference the javascript file, add the following between the head tags

<script type="text/javascript" src="petergrainge.js"></script>

Calling the Script

The script is called by events. Examples are clicking a button or hovering the mouse over a graphic. For the moment, the examples will show click events.

Calling the script is explained under each example.

Examples

OK there are only two and they are simple! I did say this is my first attempt so please be patient. I hope more will be added. Some will be code written by others but full credit will be given to them where that is the case.

Item

Description

Dialog box to display on loading the page or clicking a button

The Welcome popup that you saw when you came to this page is a simple javascript alert.

When the page is loaded, it finds the javascript file. The line

alert ("Welcome to the world of javascript.");

causes it to display the message without any user input.

This will occur in any topic that references the file. If you only want it to occur when specific topics are opened (loaded), then write the alert into a function as below and use an onload event.

If you do not want the dialog box to display unless called by the user, then the alert can be written into a function and linked to a button.

The button calls the script under function call_alert() in the file. The code below is added where required to the html in your topic.

<p><input type=button

value="Display Alert"

onclick="call_alert()"></p>

Note the button label is in quotes as it is more than one word. The button label in the next example does not have quotes.

Popup to display on clicking a button

This popup only displays when the button is clicked. The size and position of the popup are determined by the script.

The button calls the script under function popup1() in the file. The code below is added where required to the html in your topic.

<p><input type=button

value=Popup

onclick="popup1()"></p>

Changes to the text and image can be made in the javascript file or you can add that function to the <head> section instead.

Which method you use will depend on whether the script and image are required across multiple topics (leave it in the file) or are specific to a topic (add the function to the <head> section).

Note the button label does not need to be in quotes as it is only one word.

In RH, the published popup will include a Show Index link. You can remove that by commenting out some lines in the published popup file. Click the button above to display the popup, right click and select View Source to see the lines commented out.

Donations

If you find the information and tutorials on my site save you time figuring it out for yourself and help improve what you produce, please consider making a small donation.

Topic Revisions

Date

Changes to this page

06 Feb 2017

Topic reviewed. No changes made.

05 Feb 2005

What's covered revised.

10 May 2004

<script type= "text/javascript" under the heading "Adding the Script to the Head Section" amended to
<script type= "text/javascript">

03 Mar 2004 Methods of referencing the javascript further amended.
02 Mar 2004

Methods of referencing the javascript amended.

Calling of an alert dialog added to.