Exercise 6 - Beginning Javascript Using Variables Using Arithmetic Operators

EXERCISE 6 - BEGINNING JAVASCRIPT –USING VARIABLES –USING ARITHMETIC OPERATORS

The following tasks should be completed using Code View in Dreamweaver or Notepad++. Create a folder named BeginningJavaScript on your working area (if the folder does not already exist), and save each file to this folder with a suitable name.

Do not forget to add the extension .html or (.htm) otherwise you will not be able to view the output in a browser.

Exercise 6a

The following code declares three variables which will be used to store numbers.

The user is prompted to enter the first value. This is stored in the variable number1.

The user is prompted to enter the second value. This is stored in the variable number2.

The values stored in number1 and number2 are then multiplied and stored in number3.

The result of the multiplication is then displayed.

Note that with JavaScript, you do not define a datatype when you declare a variable.

JavaScript deals with the contents of the variable as appropriate – string, integer, float, boolean.

However, if you put quotation marks (") around a number when you fill the variable the value will definitely be treated as a string. You will not be able to use the contents of the variable in calculations.

Another complication is that any values entered into a Prompt box are initially treated as text (string) – even if they are intended to be used in calculations. If you then try to multiply the values there will be no problems as we see this exercise. JavaScript works out that the values must be treated as numbers when you use the multiplicationoperator (*).

You will see later that problems arise when you use the + operator. JavaScript does not know that you mean this as the additionoperator – and automatically treats values as strings by interpreting the + as meaning concatenation (joining)

Using Code View in Dreamweaver or Notepad, enter the following text:

<html>

<head>

<title>Using Variables – Multiplying Numbers</title>

</head>

<body>

<script type = "text/javascript">

<!--

var number1;

var number2;

var number3;

number1 = window.prompt("Enter first number", 0);

number2 = window.prompt("Enter second number", 0);

number3 = number1 * number2

document.write("If you multiply " + number1 + " by " + number2 + " you get: " + number3);

window.alert("If you multiply " + number1 + " by " + number2 + "\nyou get: " + number3);

//-->

</script>

</body>

</html>

Save the file as exercise6a.html and view the page in your browser.

Exercise 6b

Edit your file as follows:

<html>

<head>

<title>Using Variables – Adding Numbers</title>

</head>

<body>

<script type = "text/javascript">

<!--

var number1;

var number2;

var number3;

number1 = window.prompt("Enter first number", 0);

number2 = window.prompt("Enter second number", 0);

number3 = number1 + number2

document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);

window.alert("If you add" + number1 + " to " + number2 + "\nyou get: " + number3);

//-->

</script>

</body>

</html>

Save the file as exercise6b.html and view the page in your browser.

What has happened? The values entered are treated as text (strings) and are concatenated.

Exercise 6c

Edit your file as follows:

<html>

<head>

<title>Using Variables – Adding Numbers – Using parseInt()</title>

</head>

<body>

<!--

var number1;

var number2;

var number3;

number1 = parseInt(window.prompt("Enter first number", 0));

number2 = parseInt(window.prompt("Enter second number", 0));

number3 = number1 + number2

document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);

window.alert("If you add" + number1 + " to " + number2 + "\nyou get: " + number3);

//-->

</script>

</body>

</html>

Save the file as exercise6c.html and view the page in your browser.

The function parseInt() is used to converted the value that the user types into the Prompt box into an integer before it is stored in a variable.

You, therefore, get the results that you had expected. The numbers are added!! Try entering decimal numbers (float). What happens? If you want values to be converted to decimal values you need to use parseFloat() instead of parseInt().

Exercise 6d

Edit your file as follows:

<html>

<head>

<title>Using Variables – Adding Numbers – Using parseFloat()</title>

</head>

<body>

<!--

var number1;

var number2;

var number3;

number1 = parseFloat(window.prompt("Enter first number", 0));

number2 = parseFloat(window.prompt("Enter second number", 0));

number3 = number1 + number2;

document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);

window.alert("If you add" + number1 + " to " + number2 + "\nyou get: " + number3);

//-->

</script>

</body>

</html>

Save the file as exercise6d.html and view the page in your browser.

Depending on what values you initially entered, you may find that the result is displayed with many numbers after the decimal point.

JavaScript has a methodMath.round() but this rounds a number to zero decimal places.

What happens if you want numbers to be displayed with, for example, two decimal places?

The following example shows how you can use the Math.round()method to round to 2 decimal places.

Exercise 6e

Edit your file as follows:

<html>

<head>

<title>Using Variables – Adding Numbers – Using Math.round()</title>

</head>

<body>

<!--

var number1;

var number2;

var number3;

number1 = parseFloat(window.prompt("Enter first number", 0));

number2 = parseFloat(window.prompt("Enter second number", 0));

number3 = number1 + number2;

number3 = number3 * 100;

number3 = Math.round(number3);

number3 = number3/100;

document.write("If you add " + number1 + " to " + number2 + " you get: " + number3);

window.alert("If you add" + number1 + " to " + number2 + "\nyou get: " + number3);

//-->

</script>

</body>

</html>

Save the file as exercise6e.html and view the page in your browser.

Can you explain how this works?

A - Beginning JavaScript - Ex6 - Using Variables - Using Arithmetic OperatorsVersion 3

Page 1 of 9