Datatypes and Arrays

Notes from April 13, 2005 class

Data types: converting a string to an integer

This won't work:

<html>
<body>
<script language="JavaScript" type="text/javascript">
<!--

var firstNumber=prompt("Enter the first number","");
var secondNumber=prompt("Enter the second number","");
var theTotal=firstNumber+secondNumber;
document.write(firstNumber+" added to "+secondNumber+" equals "+theTotal);

//-->
</script>
</body>
</html>

The numbers being collected via the prompts are being treated as strings. We need to convert the data type into numeric values (integers or floating numbers, depending on whether or not you want a decimal point) in order to be able to add them.

<html>
<body>
<script language="JavaScript" type="text/javascript">
<!--

var firstNumber=prompt("Enter the first number","");
var secondNumber=prompt("Enter the second number","");
var firstNumber=parseInt(firstNumber);
var secondNumber=parseInt(secondNumber);
var theTotal=firstNumber+secondNumber;
document.write(firstNumber+" added to "+secondNumber+" equals "+theTotal);

//-->
</script>
</body>
</html>

If you want decimal values, use parseFloat() instead of parseInt().

Arrays

An array is a way to store data of similar types, for eay access later in a script. You could use regular variables to hold each item and use a document.write() statement to write out each variable name, provided you have unlimited time and really enjoy unnecessary typing. Instead, you can store each item in an array and access it via its index number with a few lines of code using a loop.

The awful way:

<html>
<head>
<TITLE>Wasting time with a roster</TITLE>
<script language="JavaScript" type="text/javascript">
<!--
var student0="Arthur";
var student1="Gwen";
var student2="Lance";
var student3="Merlin";
//-->
</script>
</head>
<body>
document.write(student0+"<br>");
document.write(student1+"<br>");
document.write(student2+"<br>");
document.write(student3+"<br>");
</body>
</html>

Phooey.

If we store the values (student names) in an array, we can cycle through the values with a loop (not just now, but later, when we learn about loops) instead of writing out each value with a separate document.write() statement for each one.

For now, to keep up with how the book presents things, we're just learning about arrays, not loops, so we'll just learn how to put the stuff into the array. Next chapter, we'll learn an easy way to get information back out of an array.

var student_list = new Array("Arthur","Gwen","Lance","Merlin");

That could get cumbersome if you needed to keep track of the individual elements, so you can also do it like this if you prefer:

var student_list = newArray();
student_list[0] = "Arthur";
student_list[1] = "Gwen";
student_list[2] = "Lance";
student_list[3] = "Merlin";

The awful way, repeated:

<html>
<head>
<TITLE>Wasting time with a roster</TITLE>
<script language="JavaScript" type="text/javascript">
<!--
var student0="Art";
var student1="Gwen";
var student2="Lance";
var student3="Merlin";
//-->
</script>
</head>
<body>
document.write(student0+"<br>");
document.write(student1+"<br>");
document.write(student2+"<br>");
document.write(student3+"<br>");
</body>
</html>

The new way: using an array is more efficient:

<html>
<head>
<TITLE>Wasting way less time with a roster</TITLE>
<script language="JavaScript" type="text/javascript">
<!--
var student_list=new Array("Art","Gwen","Lance","Merlin");
//-->
</script>
</head>
<body>
document.write(student0+"<br>");
document.write(student1+"<br>");
document.write(student2+"<br>");
document.write(student3+"<br>");
</body>
</html>

Now for something that looks awful: using multi-dimensional arrays to store two or more indexes for each element.

IndexPerson onePerson twoPerson threePerson four
NameArtGwenLanceMerlin
AddressRoom 1Room 1Room 2 when Art's around, otherwise Room 1Pretty much anywhere he wants
WardrobeRobe, crownDress, crownArmorRobe, wand

<html>
<head><title>The castle roster</title></head>
<body>
<script language="JavaScript" type="text/javascript">

var castle_roster = new Array();

castle_roster[0] = new Array();
castle_roster[0][0] = "Arthur";
castle_roster[0][1] = "Room 1";
castle_roster[0][2] = "Robe, crown";

castle_roster[1] = new Array();
castle_roster[1][0] = "Gwen";
castle_roster[1][1] = "Room 1";
castle_roster[1][2] = "Dress, crown";

castle_roster[2] = new Array();
castle_roster[2][0] = "Lance";
castle_roster[2][1] = "Room 2 when Art's around, othewise Room 1";
castle_roster[2][2] = "Armor";

castle_roster[3] = new Array();
castle_roster[3][0] = "Merlin";
castle_roster[3][1] = "Pretty much anywhere he wants";
castle_roster[3][2] = "Robe, wand";

//now for the ugly write-out, since we haven't learned loops yet

//person one
document.write("<p>");
document.write("Name : " + castle_roster[0][0] + "<br />");
document.write("Room : " + castle_roster[0][1] + "<br />");
document.write("Wardrobe : " + castle_roster[0][2] + "<br />");
document.write("</p>");

//person two
document.write("<p>");
document.write("Name : " + castle_roster[1][0] + "<br />");
document.write("Room : " + castle_roster[1][1] + "<br />");
document.write("Wardrobe : " + castle_roster[1][2] + "<br />");
document.write("</p>");

//person three
document.write("<p>");
document.write("Name : " + castle_roster[2][0] + "<br />");
document.write("Room : " + castle_roster[2][1] + "<br />");
document.write("Wardrobe : " + castle_roster[2][2] + "<br />");
document.write("</p>");

//person four
document.write("<p>");
document.write("Name : " + castle_roster[3][0] + "<br />");
document.write("Room : " + castle_roster[3][1] + "<br />");
document.write("Wardrobe : " + castle_roster[3][2] + "<br />");
document.write("</p>");

</script>
</body>
</html>

Arrays are much more useful when used with decisions, loops, and functions, so keep reading.