Beginning with JavaScript

Richard L. Bowman, PhD ( richard.bowman@edtechbybowman.net )
Harrisonburg, VA, USA

I. Introduction

To learn to use JavaScript requires more than following one simple tutorial. Many good books are available. See the resources page at this site for a listing of several such books. For more web sites on web authoring, including JavaScript, visit http://www.edtechbybowman.net/effective-web-sites.html . Any user who already knows how to program in Basic, C or C++ can easily pick up the necessary JavaScript language constructs and syntax.

This tutorial will only give a few basic concepts and some teaching by example.

II. Examining an Example

For any user who already know a fair amount about composing web pages with HTML and has had experience with another programming language, then looking at a coded webpage, modifying it, checking with some good reference books or sites, and finally trying the new code, is an effective route to learning how to use JavaScript.

The example presented here is a Simple Calculator that can add or divide two numbers. Call up this web calculator, try it out, and then look at its code (using Notepad, or a similar editor).

A. Placement of JavaScript Code amidst the HTML Code

The code for the functions called by JavaScript code on a page may be placed anywhere on the webpage. Often it is placed within the <HEAD> tags for the page or right at the beginning of the <BODY> of the code. In any case, begin the JavaScript with following lines.

The need for the first line is probably obvious, but the second line requires some explanation. If a browser that does not execute JavaScript is interpreting this code, It expects a ">" to indicate the end of a tag that was begun by "<!--". Since it does not find the closing of the tag until it gets to the end of the JavaScript code and finds:

</script>

Thus that browser will ignore the JavaScript code since it is not like any tag that it knows. But the users of such a browser needs to be notified that their browser will not display the webpage properly. So it is good practice to add the following lines near the beginning of the display of the web page.

Other pieces of JavaScript code must be placed where they need to be executed within the structure of the webpage. In the case of the Simple Calculator, there is no other JavaScript code. The calculations are activated by the "onClick" even handler associated with the "+" and "/" buttons.

In JavaScript variables (such as t1 and t2) and other items such as the form "calculator" are really objects with properties and associated methods. These objects are groups of data with certain properties that can be manipulated by the methods associated with them. For example, to work with the value of the first number entered in the calculator, one refers to it as
"calculator.num1.value" or since the name of the form is passed to the functions "add()" or "div()" when they are called, the programmer only needs to refer to them as "form.num1.value" with one caveat. JavaScript does not make a sharp distinction between variables that have numeric values and those with text strings. The apparent mathematical "plus sign" adds two numbers but concatenates, i.e., joins, two text characters. So that the value of "4 + 4" is "8" and not "44", the built-in function "parseFloat()" is called to convert the values from the form into true numbers.

III. Assignments

Now you can try some programming yourself.

Try modifying the form and the JavaScript of the Simple Calculator so that subtraction "-" and multiplication "x" are added. (Note that the symbol for multiplication is the asterisk "*" in JavaScript code.) Remember to do this by saving the source code first to your own directory or disk and under your own name. Then open that web page and modify it in Notepad.
Go to the Resource page and try to modify an example there. A good candidate would be the Sample Quiz.

Return to Ed Tech by Bowman Home