Chapter 4

In this chapter we saw that JavaScript is an object-based language and how we can use some of the native JavaScript objects, such as the Date and Math objects.

Question 1

Using the Date object, calculate the date 12 months from now and write this into a web page.

<html>
<body>
<script language=JavaScript>
    
var months = new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug",
                           "Sep","Oct","Nov","Dec");
var nowDate = new Date();
    
nowDate.setMonth(nowDate.getMonth() + 12);
document.write("Date 12 months ahead is " + nowDate.getDate());
document.write(" " + months[nowDate.getMonth()]);
document.write(" " + nowDate.getFullYear());
    
</script>
</body>
</html>

Save this as ch04_q1.htm.

Because the getMonth() method returns a number between 0 and 11 for the month rather than its name, an array called months has been created that stores the name of each month. We can use getMonth() to get the array index for the correct month name.

The variable nowDate is initialized to a new Date object. Because no initial value is specified, the new Date object will contain today's date.

To add 12 months onto the current date we simply use setMonth(). We get the current month value with getMonth(), and then add 12 to it.

Finally we write the result out to the page.

Question 2

Obtain a list of names from the user, storing each name entered in an array. Keep getting another name until the user enters nothing. Sort the names into ascending order, and then write them out to the page, with each name on its own line.

<html>
<body>
<script language=JavaScript>
    
var inputName = "";
var namesArray = new Array();
    
while ( (inputName = prompt("Enter a name","")) != "" )
{
   namesArray[namesArray.length] = inputName;
}
    
namesArray.sort();
    
var namesList = namesArray.join("<br>")
document.write(namesList);
    
</script>
</body>
</html>

Save this as ch04_q2.htm.

First we declare two variables: inputName, which will hold the name entered by the user, and namesArray, which holds an Array object that stores each of the names entered.

We use a while loop to keep getting another name from the user as long as the user hasn't left the prompt box blank. Note that the use of parentheses in the while condition is essential. By placing

 (inputName = prompt("Enter a name",""))

inside parentheses, we ensure that this is executed first and that a name is obtained from the user and stored in inputName variable. Then we compare the value returned inside the parentheses, whatever was entered by the user, with an empty string (denoted by ""). If they are not equal, that is, if the user did enter a value, we loop around again.

Now, to sort the array into order, we use the sort() method of the Array object.

namesArray.sort();

Finally, to create a string containing all values contained in the array elements with each being on a new line, we use the HTML <br> tag and write

var namesList = namesArray.join("<br>")
document.write(namesList);

The code namesArray.join("<br>") creates the string of array elements with a <br> between each. Finally, we write the string into the page with document.write().

Question 3

We saw earlier in the chapter when looking at the pow() method how we could use it inventively to fix a number to a certain number of decimal places. However, there is a flaw in the function we created. A proper fix() function should return 2.1 fixed to three decimal places as

2.100

However, our fix() function instead returns it as

2.1

Change the fix() function so that the additional zeros are added where necessary.

<html>
<head>
<script language=JavaScript>
    
function fix(fixNumber, decimalPlaces)
{
   var div = Math.pow(10,decimalPlaces);
   fixNumber = new String(Math.round(fixNumber * div) / div);
   If (fixNumber.lastIndexOf(".")==-1)
   {
      fixNumber = fixNumber + ".";
   }
    
   var zerosRequired = decimalPlaces -
            (fixNumber.length - fixNumber.lastIndexOf(".") - 1);
    
   for (; zerosRequired > 0; zerosRequired--)
   {
      fixNumber = fixNumber + "0";
   return fixNumber;
}
</script>
</head>
<body>
<script language=JavaScript>
    
var number1 = prompt("Enter the number with decimal places you want to fix","");
var number2 = prompt("How many decimal places do you want?","");
    
document.write(number1 + " fixed to " + number2 + " decimal places is: ");
document.write(fix(number1,number2));
    
</script>
</body>
</html>

Save this as ch04_q3.htm.

The function declaration and the first line remain the same as the fix() function we saw earlier in the chapter. However, things change after that.

We create the fixed number as before, using Math.round(fixNumber * div) / div. What is new is that we pass the result of this as the parameter to the String() constructor that creates a new String object, storing it back in fixNumber.

Now we have our number fixed to the number of decimal places required, but it will still be in the form 2.1 rather than 2.100 as required. Our next task is therefore to add the extra zeros required. To do this we need to subtract the number of digits after the decimal point from the number of digits required after the decimal point as specified in decimalPlaces. First, to find out how many digits are after the decimal point we write

 (fixNumber.length - fixNumber.lastIndexOf(".") - 1)

For our number of 2.1, fixNumber.length will be 3. fixNumber.lastIndexOf(".") will return 1; remember that the first character is 0, the second is 1, and so on. So fixNumber.length - fixNumber.lastIndexOf(".") will be 2. Then we subtract 1 at the end leaving a result of 1, which is the number of digits after the decimal place.

The full line is

var zerosRequired = decimalPlaces -
            (fixNumber.length - fixNumber.lastIndexOf(".") - 1);

We know the last bit (fixNumber.length - fixNumber.lastIndexOf(".") - 1) is 1 and that the decimalPlaces parameter passed is 3. 3 – 1 leaves two zeros required to be added.

Now that we know how many extra zeros are required, let's add them.

for (; zerosRequired > 0; zerosRequired--)
{
   fixNumber = fixNumber + "0";
}

Now we just need to return the result from the function to the calling code.

   return fixNumber;