CSCI-1080 Intro To CS: Web Development
Saint Louis University
Department of Computer Science
Arrays and Random numbers
List of learning outcomes
By the end of this study session you will be able to:
Define and use array to handle data inside your webpage “document”
Define and handle random numbers
Use the functions Math and Floor to handle data as example of function usage from a library
Arrays
An array is a logical linear continuous storage of elements.
0 1 2 ... n-1
You can think of array as a group of boxes, where each box has a unique identity, which is called an index. The index of the first box is always 0. Every (serious) programming language starts counting from zero. Some scripting programming language like Matlab start from 1 for convenience.
Defining an Array
Here is how you create a new array with 3 elements (boxes):
var food = [“lattice”, “tomatoes”, “break”];
You can create a new array with 10 boxes without any element inside the boxes as follow:
var food = new Array(10);
You can put anything in an array. Any element can be any data type (strings, integer...).
Convert Arrays into a String of its Elements
To convert an array into a string of elments we use the function array.join.
where array is the name of the array and separator is the text you want to use to split the elements in the string. The default is a comma, but you can also add for example a space.
In particular:
var pets = ["Dog", "Cat", "Rabbit"];
alert(pets.join(" and "));
// This shows "Dog and Cat and Rabbit"
separator is by default ","
var pets = ["Dog", "Cat", "Rabbit"];
alert(pets.join());
// This shows "Dog,Cat,Rabbit"
Retrieve (Get) Elements from Arrays
By merely specifying the index of the array element, we are able to retrieve it (or get it).
For example, in this array:
var pets = [“Dog”, “Cat”, “Rabbit”];
We can retrieve the last element (remember the element are 0, 1 and 2) like this:
alert(pets[2]); This shows “Rabbit”
Changing the content of an array
As easily as we can get elements from the array, we can also write (change) elements. In this example:
var pets = [“Dog”, “Cat”, “Goldfish”];
You can change something stored in the array like this:
Array Size
Often in programming is useful to find sizes of an array for data handling.
In Javascript, you can know the size of an array (i.e. how many boxes it has) using array.length as follows:
var pets = ["Dog", "Cat", "Rabbit"];
alert(pets.length); // This shows 3
Adding Array Elements
Javascript (and many other languages) have two ways to add element (without knowning in advance the position).
We can add element at the end with the function array.push():
var pets = ["Dog", "Cat", "Rabbit"];
pets.push("Hamster"); // Now pets is ["Dog", "Cat", "Rabbit", "Hamster"]
Alternatively, we can add an element to the front of the array (at the beginning) with the function array.unshift():
var pets = ["Dog", "Cat", "Rabbit"];
pets.unshift("Hamster"); // Now pets is ["Hamster" "Dog", "Cat", "Rabbit"]
In both scenarios (push or unshift) the index of the array is automatically updated.
Deleting Array Elements
To remove an element from the end of an array, we use array.pop():
var pets = ["Dog", "Cat", "Rabbit"];
var result = pets.pop();
// Now pets is [Dog", "Cat"]
The function pop() returns the removed element, so in the above example the variable result contains “Rabbit”.
To remove an element from the front we use the function array.shift():
var pets = ["Dog", "Cat", "Rabbit"];
var result = pets.shift();
// Now pets is ["Cat", "Rabbit"]
shift() returns the removed element, so result is "Dog" The index are automatically updated
Even when we remove elements, indexes are updated automatically.
Combining Arrays
We can use the function array1.concat(array2) to combine two arrays into one:
var pets = ["Dog", "Cat", "Rabbit", "Hamster"];
var primes = [2, 3, 5, 7, 11];
var result = pets.concat(primes);
// result is ["Dog", "Cat", "Rabbit", "Hamster",
// 2, 3, 5, 7, 11]
Random Numbers
Let us now look at how we generate and manipulate random numbers.
In Javascript you can generate a random number as follows:
var random_number = Math.random();
In a piece of HTML code we then have:
<!doctype html>
<html>
<body>
<script>
var random_number;
random_number = Math.random();
alert( random_number );
</script>
</body>
</html>
The resulting range is [0, 1), so 1 will not be generated. So how do I generate a random number between a range of my choice? Well, all you need is to multiply the value returned by your Math.random() function call by your range maximal value.
random_number = Math.random() * maxvalue;
We now have a number in the range [0, maxvalue).
<!doctype html>
<html>
<body>
<script>
var random_number;
random_number = Math.random() * 8;
alert("Random number in the range 0 to " +
"7.9999999:\n" + random_number );
</script>
</body>
</html>
Throw away the decimals
If we don't want the decimals, we can use another function of the library Math Math.floor() to throw it away. For example:
There is a similar funtion Math.ceil() that rounds the decimal up
In a real more complete example:
<!doctype html>
<html>
<body>
<script>
var random_number;
random_number = Math.random() * 50;
random_number = Math.floor( random_number );
alert("Random number in the range 0 to 49: " + random_number);
</script>
</body>
</html>
|