1. 1 Agenda  Unit 8: Programs and Data

2. 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. 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] 111 115 200 rainArray rainArray[ 0 ] rainArray[ 1 ] rainArray[ 2 ]

4. 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. 5 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. 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. 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)

8. 8 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() ). Function doThis() { document.write(‘do this’ + ‘ ’) } When we use a function in a program, we say that we invoke or call the function. Example function call: doThis(); Heade r Body No arguments/parameters

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

10. 10 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 * 0.03937 } Functions which return a value vs. procedural functions

11. 11 Function calling another function

12. 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 end for 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. 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. 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. 15  A form can have a number of GUI widgets (such as buttons and text boxes).  GUI elements must be associated with a form. Adding GUI components to programs

16. 16 Create a form on which you can place the elements, by including the and 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 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). Adding GUI components to programs

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

18. 18 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 = ''> Adding GUI components to programs

19. 19 A units conversion program function twoDPs(anyNumber) { return Math.round (100 * anyNumber)/100 } function toGallons(numberOfLitres) { return twoDPs(numberOfLitres * 0.21998) } <INPUT TYPE = "text" NAME = "litres" VALUE = ''> <INPUT TYPE = "button" VALUE = "Convert" ONCLICK = "document.converter.gallons.value = toGallons(document.converter.litres.value)"> <INPUT TYPE = "text" NAME = "gallons" VALUE = ''> 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. 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. 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. 22 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 Some character-processing functions