JavaScript Learning Examples

William Overington

13 June 1998

Updated 20 June 1998
The updating is that the section on downloading to local storage has been added and the graphic files are mentioned in the order that they are needed in case users first download just some of the files to local storage.

Here are some example files intended to help people wishing to begin learning JavaScript, with an orientation of helping people who would like to author JavaScript based free to the end user distance education packages for use on the internet.
The early examples do not contain any JavaScript but set the scene.
In order to use any particular example, please click on the link. The source code can be examined by using the source viewing facility on the browser. With Internet Explorer this is by selecting View and then selecting Source.
Users may choose to download the files, or just a selection of them to start off if they so choose, to local storage, in order to carry out the learning off line. With this possibility in mind, the files are listed down the page in the order that they are needed locally. Each graphic files is listed before the html file that first uses it.
In designing these pages as an experiment in free to the end user distance education on the internet, I have worked on the basis of seeking to provide a sequence of examples that take the student from knowing nothing about JavaScript to knowing a little. Please know that my own knowledge of JavaScript is not great and that these examples are not in the format of hiding the code in the head section and of enclosing the code within comments in order to ensure compatibility with old browsers that do not have JavaScript capability. Students who progress beyond these examples to study elsewhere may need to develop their style to suit such practice. However, within the intended limits, namely of seeking to help students go from knowing nothing about JavaScript to knowing a little and to being able to have a go at writing a JavaScript based page for application in education, I feel that these example pages may be of some practical educational usefulness.
There is, at present, some tutorial support available. Please see the bottom of this page. Tutorial advice is free with the questions asked and the responses provided being added to my portfolio of tutoring practice for possible future submission for assessment for a qualification.

This is the file that you are reading now. There is no link behind the file name in the adjacent column. This is just a note to mention that this file should preferably be stored locally if you are downloading the examples to local storage. In fact, the examples could be used without this file, but this file makes their use more convenient and there are notes in this file.
jsle0001.htm

Here is a link to the background colour file for this project. If you are downloading to local storage then please download this file. If using the learning examples on line, you may skip this section.
jsle9000.gif

A file that simply displays the background. This is useful because it shows the HTML code that is in each of the subsequent files and is intended so that it is clear which code is always present in these examples.
jsle5001.htm
Form introduced.
A file that simply states the existence of a form, with nothing upon the form. This form is called workspace, but you could use another name if you wish.
jsle5002.htm
Checkbox introduced.
A file that has a form. Upon the form is a checkbox. The checkbox may be checked and unchecked using the mouse, but there is no other effect.
jsle5003.htm

Upon a form is a checkbox. The checkbox may be checked and unchecked using the mouse, but there is no other effect. Upon accessing the page, the checkbox is checked when first viewed.
jsle5004.htm

Upon a form are two checkboxs. Each checkbox may be checked and unchecked using the mouse, but there is no other effect. Upon accessing the page, one of the checkboxes is unchecked when first viewed and the other checkbox is checked when first viewed.
jsle5005.htm
Button introduced.
A file that has a form. Upon the form is a button. The button may be clicked using the mouse, but there is no other effect.
jsle5011.htm
Text field introduced.
A file that has a form. Upon the form is a text field of size 20 characters. The text field may be clicked in using the mouse and text then entered, but there is no other effect.
jsle5021.htm

A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect.
jsle5022.htm

A file that has a form. Upon the form are two text fields each of size 20 characters. They are one below the other. Each text field may be clicked in using the mouse and text then entered, but there is no other effect.
jsle5023.htm

A file that has a form. Upon the form are two text fields each of size 20 characters. They are one below the other. They are each designated by a name on screen. Each text field may be clicked in using the mouse and text then entered, but there is no other effect.
jsle5024.htm

A file that has a form. Upon the form are two text fields each of size 20 characters. They are one below the other. They are each designated by a name on screen. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it.
jsle5025.htm

A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it. There is also a button on the form. The button may be clicked using the mouse, but there is no other effect.
jsle5031.htm
JavaScript introduced.
A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function does nothing at all.
jsle5032.htm

A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function copies the contents of the text field designated on the screen as "register a" to the text field designated on the screen as "register b".
jsle5033.htm
JavaScript Math introduced.
A file that has a form. Upon the form are two text fields each of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function generates a random number and places it in the text field designated on screen as "register a". Please try clicking the button several times and observe what happens.
jsle5041.htm
The JavaScript if statement introduced.
A file that has a form. Upon the form are two text fields each of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function generates a random number and places it in the text field designated on screen as "register a". The random number will be greater than or equal to zero and less than one. If the random number is less than 0.5 then "head" is displayed else "tail" is displayed.
jsle5042.htm

A file that has a form. Upon the form are two text fields each of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function generates a random number but does not display it. The random number will be greater than or equal to zero and less than one. If the random number is less than 0.5 then "head" is displayed else "tail" is displayed.
jsle5043.htm

A file that has a form. Upon the form is a checkbox and a text field of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The answer placed into the text field depends upon whether the checkbox is checked or not checked.
jsle5051.htm

A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page.
jsle5061.htm

A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. In addition, the page uses the background colour of this page.
jsle5062.htm

A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. In addition, the page uses the background colour of this page. Also, the answer is centred and uses large letters.
jsle5063.htm

Here is a link to a graphic of a London landmark. It is needed for the next two learning examples. If you are downloading to local storage then please download this file. If using the learning examples on line, you may skip this section.
jsle4064.gif

A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. There is a graphic of a London landmark. Please note that the graphic file used is a gif file with a transparent background.
jsle5064.htm

A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. There is a checkbox option for a graphic of a London landmark to be included. Notice how the information is obtained from the form and stored in a JavaScript variable before the new page is started to be written.
jsle5065.htm

There is an email tutorial facility for these examples. Tutorial advice is free with the questions asked and the responses provided being added to the tutor's portfolio of tutoring practice for possible future submission for assessment for a qualification.
email tutor

Here is a route to email the author, who is also the tutor, in order to make any comments.
email author

	This is the file that you are reading now. There is no link behind the file name in the adjacent column. This is just a note to mention that this file should preferably be stored locally if you are downloading the examples to local storage. In fact, the examples could be used without this file, but this file makes their use more convenient and there are notes in this file.	jsle0001.htm
	Here is a link to the background colour file for this project. If you are downloading to local storage then please download this file. If using the learning examples on line, you may skip this section.	jsle9000.gif
	A file that simply displays the background. This is useful because it shows the HTML code that is in each of the subsequent files and is intended so that it is clear which code is always present in these examples.	jsle5001.htm
Form introduced.	A file that simply states the existence of a form, with nothing upon the form. This form is called workspace, but you could use another name if you wish.	jsle5002.htm
Checkbox introduced.	A file that has a form. Upon the form is a checkbox. The checkbox may be checked and unchecked using the mouse, but there is no other effect.	jsle5003.htm
	Upon a form is a checkbox. The checkbox may be checked and unchecked using the mouse, but there is no other effect. Upon accessing the page, the checkbox is checked when first viewed.	jsle5004.htm
	Upon a form are two checkboxs. Each checkbox may be checked and unchecked using the mouse, but there is no other effect. Upon accessing the page, one of the checkboxes is unchecked when first viewed and the other checkbox is checked when first viewed.	jsle5005.htm
Button introduced.	A file that has a form. Upon the form is a button. The button may be clicked using the mouse, but there is no other effect.	jsle5011.htm
Text field introduced.	A file that has a form. Upon the form is a text field of size 20 characters. The text field may be clicked in using the mouse and text then entered, but there is no other effect.	jsle5021.htm
	A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect.	jsle5022.htm
	A file that has a form. Upon the form are two text fields each of size 20 characters. They are one below the other. Each text field may be clicked in using the mouse and text then entered, but there is no other effect.	jsle5023.htm
	A file that has a form. Upon the form are two text fields each of size 20 characters. They are one below the other. They are each designated by a name on screen. Each text field may be clicked in using the mouse and text then entered, but there is no other effect.	jsle5024.htm
	A file that has a form. Upon the form are two text fields each of size 20 characters. They are one below the other. They are each designated by a name on screen. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it.	jsle5025.htm
	A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it. There is also a button on the form. The button may be clicked using the mouse, but there is no other effect.	jsle5031.htm
JavaScript introduced.	A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function does nothing at all.	jsle5032.htm
	A file that has a form. Upon the form are two text fields each of size 20 characters. Each text field may be clicked in using the mouse and text then entered, but there is no other effect. The first text field, designated as "register a" to users has the text "How do you do?" in it. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function copies the contents of the text field designated on the screen as "register a" to the text field designated on the screen as "register b".	jsle5033.htm
JavaScript Math introduced.	A file that has a form. Upon the form are two text fields each of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function generates a random number and places it in the text field designated on screen as "register a". Please try clicking the button several times and observe what happens.	jsle5041.htm
The JavaScript if statement introduced.	A file that has a form. Upon the form are two text fields each of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function generates a random number and places it in the text field designated on screen as "register a". The random number will be greater than or equal to zero and less than one. If the random number is less than 0.5 then "head" is displayed else "tail" is displayed.	jsle5042.htm
	A file that has a form. Upon the form are two text fields each of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function generates a random number but does not display it. The random number will be greater than or equal to zero and less than one. If the random number is less than 0.5 then "head" is displayed else "tail" is displayed.	jsle5043.htm
	A file that has a form. Upon the form is a checkbox and a text field of size 20 characters. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The answer placed into the text field depends upon whether the checkbox is checked or not checked.	jsle5051.htm
	A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page.	jsle5061.htm
	A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. In addition, the page uses the background colour of this page.	jsle5062.htm
	A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. In addition, the page uses the background colour of this page. Also, the answer is centred and uses large letters.	jsle5063.htm
	Here is a link to a graphic of a London landmark. It is needed for the next two learning examples. If you are downloading to local storage then please download this file. If using the learning examples on line, you may skip this section.	jsle4064.gif
	A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. There is a graphic of a London landmark. Please note that the graphic file used is a gif file with a transparent background.	jsle5064.htm
	A file that has a form. There is a button on the form. The button may be clicked using the mouse. The effect is that a JavaScript function is obeyed. The function puts the message "London" on a specially created new page. There is a checkbox option for a graphic of a London landmark to be included. Notice how the information is obtained from the form and stored in a JavaScript variable before the new page is started to be written.	jsle5065.htm

	There is an email tutorial facility for these examples. Tutorial advice is free with the questions asked and the responses provided being added to the tutor's portfolio of tutoring practice for possible future submission for assessment for a qualification.	email tutor
	Here is a route to email the author, who is also the tutor, in order to make any comments.	email author