1. Agenda
Unit 8: Programs and Data

2. Structured data - Array
There are many situations where we want to apply the same processing to a collections of data values at the same time.
In such situations we talk about structured data.
In most programming languages the name given to a collection of data values, that are all of the same type is an array.

3. Arrays
An array is a data structure that consists of a list of data values of the same type; for example, numbers or Strings.
An array should have a name.
Each data value is called an element.
The position of the data element in the array is called the index or subscript.
Index of an array starts at 0.
The first element in myArray is myArray[0]
rainArray
rainArray[ 0 ]
111
rainArray[ 1 ]
115
rainArray[ 2 ]
200

4. Array Declaration & Allocation
var rainArray = [111, 115, 200, 95, 23, 59, 144, 66, 37]
Creating an empty array: var rainArray = new Array(12)
Reserved word new is used to create an Array object.
The number 12 will provide enough memory for the 12 elements that are going to be stored in it.
Initial value for the elements of the array is undefined. It would be wrong to try to retrieve or manipulate such values.
Assigning values to elements: rainArray[0] = 112

5. Accessing the last element
Array length
JavaScript Array objects have a length property, which indicates the number of elements in the array.
To find the length of an array named myArray, we use the dot notation: myArray.length
It is important to remember that the length of an array is one greater than the index value of its last element.
Accessing the last element

6. Algorithm
An algorithm is a clearly specified set of instructions to be followed in order to carry out a task or obtain a solution to a problem.
Instructions written in an algorithm are known as structured English.
Example:
For each month of the year prompt for the rainfall figure for that month and put it into the correct position in the array end for.
The algorithm after coding:
var rainArray = new Array(12);
for (var month =0; month < rainArray.length; month = month + 1) {
rainArray[month] = window.prompt(‘Enter rainfall value’,’’) }

7. Parallel Arrays and the Math object
We say that two arrays are parallel when the information held at the same index in the two arrays is related.
The Math object can be used for rounding numbers:
Math.round(2.4) evaluates to 2.
Math.round(2.7) evaluates to 3.
Other methods:
Math.abs(number) Math.random() Math.sqrt(number) 7

8. No arguments/parameters
Functions
In real life, programs are often very large and have separate subtasks to perform.
We need to break one complex task into simpler subtasks.
JavaScript provides functions as a way for handling subtasks. (e.g. parseFloat()).
No arguments/parameters
Body
Header
Function doThis() {
document.write(‘do this’ + ‘<BR>’) }
When we use a function in a program, we say that we invoke or call the function. Example function call:
doThis();

9. Functions with arguments
Function doThis(aTime) {
document.write(‘do this ‘ + aTime + ‘<BR>’) }
Function call:
doThis(‘now’)

10. Functions which return a value vs. procedural functions
In JavaScript, a function is not required to have a return statement.
If no return, the function automatically returns the special value: undefined. We call these procedural functions.
Thus, a JavaScript function has an output whether you specify it or not.
An example of a function that returns a value.
function toInches(numberOfMm) {
return numberOfMm * }

11. Function calling another function

12. Functions with more than one argument
Problem: write a function printCharacterBlock that takes 3 arguments: number of lines, number of characters, and the output character.
for each line from 1 to number of lines
for each position from 1 to number of characters
write the given character
end for
move to a new line
function printCharacterBlock(lines,number,outputCharacter) {
for (var line = 1; line <=lines; line = line + 1)
for(var position = 1; position <= number; position = position + 1)
document.write(outputCharacter) }

13. Graphical User Interface
The introduction of Graphical User Interface or GUI has transformed our interaction with PCs from command-line interface to a GUI interface.
In a GUI interface, there are various visual components on the screen with which we can interact in a more intuitive manner.

14. Events
An event-driven model is a model in which the computer registers the occurrence of an event whenever the user does something.
For example, an event might be a click on a button, or the movement of the cursor over an image.
Programmers have to provide a piece of code for every event (called event handler) to specify what should happen when the event occurs.
Each event handler needs to be attached to the component for which the event occurred.
In general GUI programming consists of a relatively large number of relatively small pieces of code.

15. Adding GUI components to programs
A form can have a number of GUI widgets (such as buttons and text boxes).
GUI elements must be associated with a form.

16. Adding GUI components to programs
Create a form on which you can place the elements, by including the <FORM> and </FORM> tags.
Assign a value to the NAME attribute of the form.
Create each element which receives input from a user (such as a button), using the <INPUT> tag.
Set relevant attributes of the input element, for example:
TYPE (e.g. button, checkbox);
VALUE (its label);
ONCLICK (the action to be taken when it’s clicked - event handler).

17. Displays a dialogue box with two buttons, ‘OK’ and ‘cancel’
Adding GUI components to programs
Here is an example of the code for creating a form with a button.
<HEAD>
<TITLE>Program_8.4.1</TITLE>
<SCRIPT>
// JavaScript code will go in here
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "greeting">
<INPUT TYPE = "button“
VALUE = "Press Me"
ONCLICK = "window.confirm(‘Do you realise you just pressed the button?')">
</FORM>
…………
Displays a dialogue box with two buttons, ‘OK’ and ‘cancel’

18. ONCLICK = "document.greeting.response.value = 'Hello world!'">
Adding GUI components to programs
Adding a button and a text box…
<INPUT TYPE = "button“
VALUE = "Press Me"
ONCLICK = "document.greeting.response.value = 'Hello world!'">
<INPUT TYPE = "text“
NAME = "response"
VALUE = ''>

19. A units conversion program
function twoDPs(anyNumber) {
return Math.round (100 * anyNumber)/100 }
function toGallons(numberOfLitres)
return twoDPs(numberOfLitres * )
<INPUT TYPE = "text"
NAME = "litres"
VALUE = ''>
<INPUT TYPE = "button"
VALUE = "Convert"
ONCLICK = "document.converter.gallons.value = toGallons(document.converter.litres.value)">
NAME = "gallons"
Precision of two decimal places
Converts litres to gallons
Text box to read the value in liters
Converted value is displayed at a click of the button
Text box to display the value in gallons

20. Strings If myString currently has the value 'Hello world!',
myString.indexOf('Hell') returns 0
myString.indexOf('world') returns 6
myString.indexOf('r') returns 8
myString.indexOf('low') returns –1

21. Some character-processing functions
function isNumeric(aCharacter) {
return (aCharacter >= '0') && (aCharacter <= '9') }
function isLowerCase(aCharacter)
return (aCharacter >= 'a') && (aCharacter <= 'z')
function isUpperCase(aCharacter)
return (aCharacter >= 'A') && (aCharacter <= 'Z')
A function to test if the character is numeric
A function to test if the character is lower case
A function to test if the character is upper case

22. Some character-processing functions
function isAlpha(aCharacter) {
return (isUpperCase(aCharacter) || isLowerCase(aCharacter)) }
function isAlphaNumeric(aCharacter)
return (isAlpha(aCharacter) || isNumeric(aCharacter))
A function to test if the character is alphabetic
A function to test if the character is alphabetic or numeric