Abstract

This is a good first-time programming project. You'll learn how to use JavaScript to create a basic calculator program that you can run in your Web browser.

Objective

The objective of this project is to learn how to write a simple calculator with the JavaScript programming language. You will learn how to write a simple JavaScript calculator that can add, subtract, multiply or divide two numbers. You will be able to run your program in a Web browser.

Introduction

This is an example of a first-time programming project. You will be writing a calculator that can add, subtract, multiply or divide two numbers. The project uses JavaScript, an interpreted programming language supported by most Web browsers. You will learn how to write an HTML file containing your program, and how to load and run the file in your browser.

In this project, you will learn the basics of how JavaScript functions can be written to work with HTML FORM elements. Specifically, you will be working with HTML INPUT elements, and using JavaScript's built-in parseValue() and basic math functions.

Preliminaries

These are things you need to know before you get started.

  1. You'll need to write your file with a text editor, which is a program that can save plain text files. The "Notepad" program that comes with Windows will do just fine. You should not use a word processing program (e.g., Word), because word processors do not save files as plain text by default.
  2. JavaScript is a programming language for web pages, so the HTML file you will be writing is like a simple web page. Here is the basic format of an HTML file:

    <!-- comment line: ignored by browser, use these as notes to yourself about your program -->
    <HTML>
    <HEAD>
            [Title and JavaScript functions go here.]
    </HEAD>

    <BODY>
            [The parts you want to appear on the page go here.]
    </BODY>
    </HTML>

    HTML uses tags to designate various parts of the document. Tags are enclosed by the characters "<" (less-than sign) and ">" (greater-than sign). The first line is a comment, enclosed by "<!--" and "-->". Comments in an HTML file are ignored by the browser, so you can use them as notes to yourself. They can help you remember what the different parts of your program are supposed to do. You need the tag "<HTML>" at the beginning. The document has two sections, a HEAD section, which contains general information about the document, and a BODY section which contains the displayed material. The HEAD section is where you would specify the title of the document, and also where you would put JavaScript functions used in the document. The end of the HEAD section is indicated by the end tag, "</HEAD>". Next comes the BODY section, with material that you wish to appear on the page. It is ended by the end tag "</BODY>". Finally, the end of the document is indicated by the HTML end tag, "</HTML>". The same pattern applies to all HTML tags: the end tag is made by adding "/" (the forward slash character) to the beginning of the corresponding start tag.

  3. For practice, try using your text editor to write a very simple HTML file like the one below. (You can write it yourself, or you can copy and paste from your browser to your text editor.)

    <!-- Science Buddies: HelloWorld.html -->
    <HTML>
    <HEAD>
       <TITLE>Hello, world!</TITLE>
    </HEAD>

    <BODY>
       Hello, world!
    </BODY>
    </HTML>
  4. Use your text editor to save the file. Call it something like "HelloWorld.html" (when choosing a name for your file, always end the name with ".htm" or ".html").
  5. Now open your HelloWorld.html file with your browser. In your browser, use the "File" menu, and choose the option "Open..." (for Firefox, choose "Open File..."). Using the controls in the File Open dialog box that pops up, navigate to your file and select it. You should see "Hello, world!" on both the browser title bar and on the body of the page.

Getting Started with JavaScript

Now that you've succeeded with writing an HTML file and opening it with your browser, you're ready to delve into JavaScript. The following link has a step-by-step tutorial that will give you a great introduction to JavaScript programming: http://www.webteacher.com/javascript/index.html

Writing a JavaScript Calculator

To help get you started, here is an example of a JavaScript calculator that adds two numbers. This is just one of many ways to accomplish this task. You can use this example as a basis for your program, or you can start from scratch. If you build from this example, you will need to add functions and buttons for subtraction, multiplication, and division.

Simple Adder

Enter a number:

Enter a number:

Answer =

Here is the JavaScript source code for the simple adder. After you have gone through the JavaScript tutorial (above), you should be able to read through this code and understand what it is doing. Note that the two methods for denoting JavaScript comments are different than the method for HTML comments:

<!-- 2005/11/08 Science Buddies: JavaScript calculator, adds two numbers -->
<HTML>
<HEAD>
<TITLE>Simple Adder</TITLE>

<!-- saved from url=(0030)http://www.sciencebuddies.org/ -->
<!-- When this code is saved as a local file, the preceding line tells Internet Explorer to treat this file according to the security rules for the Internet zone (plus any security rules specific for the Science Buddies website). -->
<SCRIPT LANGUAGE="JavaScript">
<!-- old browsers can't handle JavaScript functions so comment them out
// This is a single-line JavaScript comment.
// Below is a multi-line JavaScript comment.
/* CalculateSum: this function has 3 arguments:
   Atext, Btext and form. It converts Atext and Btext to
   numbers using the built-in JavaScript "parseFloat" method.
   It then uses the form argument to output the sum of the
   numbers to the form's Answer field. Notice that the
   function does *not* need to know the the names of the
   form's input fields. Those values are passed as arguments.
   It does need to know that the form has a field named
   "Answer" so that it can put the result there.

   Here is how to end a multi-line JavaScript comment: */

function CalculateSum(Atext, Btext, form)
{
var A = parseFloat(Atext);
var B = parseFloat(Btext);
form.Answer.value = A + B;
}

/* ClearForm: this function has 1 argument: form.
   It clears the input and answer fields on the form.
   It needs to know the names of the INPUT elements in order
   to do this. */

function ClearForm(form)
{
form.input_A.value = "";
form.input_B.value = "";
form.Answer.value = "";
}

// end of JavaScript functions -->
</SCRIPT>
</HEAD>

<BODY>

<P><FONT SIZE="+2">Simple Adder</FONT></P>

<FORM NAME="Calculator" METHOD="post">
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P>
<P>Enter a number: <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Add Numbers" name="AddButton" onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear Fields" name="ClearButton" onClick="ClearForm(this.form)"></P>
<P>Answer = <INPUT TYPE=TEXT NAME="Answer" SIZE=12></P>
</FORM>

</BODY>
</HTML>

Note for JavaScript files with Internet Explorer:
If you experience difficulty running your JavaScript code in Internet Explorer, we strongly suggest that you install the Firefox web browser and use it instead of Internet Explorer. For more information or to download the Firefox installer, see: http://www.mozilla.com/firefox/.

If you want to continue to use Internet Explorer, try adding the following line at the beginning of your file:
<!-- saved from url=(0014)about:internet -->
This line will cause Internet Explorer to run your file according to the security rules for the Internet zone on your computer. In our experience this may work, or it may not. For more information see: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/motw.asp and http://www.phdcc.com/xpsp2.htm.

Terms, Concepts, and Questions to Start Background Research

To write a simple program in JavaScript, you should do research that enables you to understand the following terms and concepts:

  • HTML concepts:
    • start tags and end tags,
    • comments,
    • the <HEAD> section,
    • the <SCRIPT> section,
    • the <BODY> section,
    • the <FORM> section,
    • the <INPUT> tag.
  • JavaScript concepts:
    • functions,
    • variables,
    • objects,
    • properties,
    • methods,
    • events.
  • specific JavaScript functions:
    • parseFloat()
  • general programming concepts:
    • reserved words,
    • control statements (e.g., if...else, loops).

Questions:

  • How do you use an HTML form to get input from the user and store it in a variable?
  • How do you program a button in an HTML form to call a JavaScript function?
  • How do you pass information from an HTML form to a JavaScript function using a variable?
  • How do you program a JavaScript function to display information in an HTML form?

Bibliography

Materials and Equipment

  • computer with Web browser (e.g., Internet Explorer, Firefox)
  • text editing program (e.g., Notepad)

Experimental Procedure

Using what you have learned about programming in Javascript, create a program that can add, subtract, multiply or divide two numbers supplied by the user.

Here are some generally applicable programming tips to keep in mind as you get started with this project.

  1. Plan your work.
    • Methodically think through all of the steps to solve your programming problem.
    • Try to parcel the tasks out into short, manageable functions.
    • Think about the interface for each function: what arguments need to be passed to the function so that it can do its job?
  2. Use careful naming, good formatting, and descriptive comments to make your code understandable.
    • Give your functions and variables names that reflect their purpose in the program. A good choice of names makes the code more readable.
    • Indent the statements in the body of a function so it is clear where the function code begins and ends.
    • Indent the statements following an "if", "else", "for", or "while" control statement. That way you can easily see what statements are executed for a given branch or loop in your code.
    • Descriptive comments are like notes to yourself. Oftentimes in programming, you'll run into a problem similar to one you've solved before. If your code is well-commented, it will make it easier to go back and re-use pieces of it later. Your comments will help you remember how you solved the previous problem.
  3. Work incrementally.
    • When you are creating a program, it is almost inevitable that along the way you will also create bugs. Bugs are mistakes in your code that either cause your program to behave in ways that you did not intend, or cause it to stop working altogether. The more lines of code, the more chances for bugs. So, especially when you are first starting, it is important to work incrementally. Make just one change at a time, make sure that it works as expected and then move on.
    • With JavaScript, this is easy to do. To check your code, all you need to do is use your web browser to open the HTML file containing your code. After you've made a change in the code with your text editor, just save the file, then switch to your browser and hit the re-load page button to see the change in action.
    • Test to make sure that your code works as expected. If your code has branch points that depend on user input, make sure that you test each of the possible branch points to make sure that there are no surprises.
    • Also, it's a good idea to backup your file once in awhile with a different name. That way, if something goes really wrong and you can't figure it out, you don't need to start over from scratch. Instead you can go back to an earlier version that worked, and start over from there.
    • As you gain more experience with a particular programming environment, you'll be able to write larger chunks of code at one time. Even then, it is important to remember to test each new section of code to make sure that it works as expected before moving on to the next piece. By getting in the habit of working incrementally, you'll reduce the amount of time you spend identifying and fixing bugs.
  4. When debugging, work methodically to isolate the problem.
    • We told you above that bugs are inevitable, so how do you troubleshoot them? Well, the first step is to isolate the problem: which line caused the program to stop working as expected? If you are following the previous tip and working incrementally, you can be pretty sure that the problem is with the line you just wrote.
    • Check for simple typos first. A misspelled function name will not be recognized. In JavaScript, a misspelled variable name simply creates a new variable. This is an easy mistake to make, and can be hard to find.
    • Avoid using reserved words as variable or function names.
  5. Test your program thoroughly.
    • You should test the program incrementally as you write it, but you should also test the completed program to make sure that it behaves as expected.

Variations

  • Add error-checking to your program. For example, what happens if the user types in words instead of numbers? The JavaScript function isNaN() (for "is Not a Number") will be useful (you can look it up in the JavaScript reference). You will also need to use "if...else" statements to control the flow of the program (you can look up "if...else" statements in the JavaScript reference, and you can also study the next JavaScript programming project, on sorting a list of words: ABC's of Programming: Writing a Simple 'Alphabetizer' with JavaScript. Devise a way to test the input for validity before running calculations. If there is a problem, use the built-in JavaScript alert() method to display a message to the user, explaining the problem.

Credits

Ken Hess and Andrew Olson, Ph.D., Science Buddies


Last edit date: 2006-04-17 19:04:30

I Did this Project!I Did This Project!
Tell us about your experience with this science project.


characters left

characters left

characters left
Poor OK Good Very Good Excellent

Optional:  Attach a picture of your project (JPG, JPEG, GIF, PNG only)



Related Links

  • Science Fair Project Guide

Project Summary

Difficulty  5 
Time required Short (several days)
Prerequisites Familiarity with Web browser and text editing programs
Material Availability Readily available
Cost Very Low (under $20)
Safety No issues

Share this Project Idea!


Facebook Twitter MySpace More Services

Donate to Science Buddies

Sponsor

Sponsored by a generous grant from Symantec Corporation

Internet Safety Tips
Get educated about online safety
with help from Symantec.
symantec.com/norton/familyresources

Career Focus

If you like this project, you might enjoy exploring related careers.

Computer Programmer
Computers are essential tools in the modern world, handling everything from traffic control, car welding, movie animation, shipping, aircraft design, and social networking to book publishing, business management, music mixing, health care, agriculture, and online shopping. Computer programmers are the people who write the instructions that tell computers what to do. 		  Computer Software Engineer
Are you interested in developing cool video game software for computers? Would you like to learn how to make software run faster and more reliably on different kinds of computers and operating systems? Do you like to apply your computer science skills to solve problems? If so, then you might be interested in the career of a computer software engineer.
Software Quality Assurance Engineer & Tester
Software quality assurance engineers and testers oversee the quality of a piece of software's development over its entire life cycle. Their goal is to see to it that the final product meets the customer's requirements and expectations in both performance and value. During the software life cycle, they verify (officially state) that it is possible for the software to accomplish certain tasks. They detect problems that exist in the process of developing the software, or in the product itself. They try and make things not work (try to "break" the software) by creating errors or combinations of errors that a user might make. For example, if a user enters a period or a pound sign for a password, will that break the software? They seek to anticipate potential issues with the software before they become visible. At the end of the life cycle, they reflect upon how problems or bugs arose, and figure out ways to make the software development process better in the future. 		 


Join Science Buddies

Become a Science Buddies member! It's free! As a member you will be the first to receive our new and innovative project ideas, news about upcoming science competitions, science fair tips, and information on other science related initiatives.

Support Science Buddies

If this website has helped you, won't you consider a small gift so we may continue developing resources to help teachers and students?

 


 


It's free! As a member you will be the first to receive our new and innovative project ideas, news
about upcoming science competitions, science fair tips, and information on other science related initiatives.

Science Fair Project Home      Our Sponsors      Partners      About Us      Volunteer      Donate      Contact Us      Academic Outreach Partnerships      Site Map

Science Fair Project Ideas      Science Fair Project Guide      Ask an Expert      Blog      Teacher Resources      Parent Resources      Student Resources      Science Careers      Join Science Buddies     

Privacy Policy Science Buddies

Copyright © 2002-2012 Science Buddies. All rights reserved.
Reproduction of material from this website without written permission is strictly prohibited.
Use of this site constitutes acceptance of our Terms and Conditions of Fair Use.