Mark Dixon Page 1 05 – Problem Solving & Data Types

Mark Dixon Page 2 Questions: Expressions a)What is the result of: 10 * Math.floor( ) b)How many functions are in the following: Math.floor (12.472) * Math.sqrt(9) + 8 / 2 c)How many operators are in the following: Math.floor (12.472) * Math.sqrt(9) + 8 / 2 d)Write an expression to: divide 15 by 3 and multiply the result by (15 / 3) * 6

Mark Dixon Page 3 Session Aims & Objectives Aims –to introduce the idea of types of data –to provide a more explicit understanding of problem solving skills and strategies Objectives, by end of this week’s sessions, you should be able to: –recognise different types of data numeric string (text) –correct errors relating to data types –recognise the key aspects of a problem start state goal state operations –be able to use typical strategies to solve unfamiliar programming problems

Mark Dixon Page 4 Example: AddNum v1 Add Numbers <input type="button" id="btnAdd" value="Add" onclick="btnAdd_onClick()" /> function btnAdd_onClick(){ lblResult.innerText = txtNum1.value + txtNum2.value; } Doesn't work!

Mark Dixon Page 5 Types of Information Numeric (numbers)29 (integer/whole) (real/decimal) String (text)"Hello there!" "BOO" Pictures (numbers) Sound (numbers)

Mark Dixon Page 6 AddNum problem The + operator works with: –numbers, and –text "23" + "16" "2316" double quotes enclose text Text input boxes store text: txtNum1.value + txtNum2.value We need to convert text to numbers

Mark Dixon Page 7 String Functions parseInt("63") convert to integer result is 63 String("bat").charAt(1)result is "a" String("hello").slice(1,3)result is "el" String("hello").substr(1,3)result is "ell" String("S Smith").lengthresult is 7

Mark Dixon Page 8 String Expressions

Mark Dixon Page 9 String Expressions & Errors "What is " + txtN1.Value + " times " "What is twice " txtN1.Value + "?" "What is 6 minus " + + txtN1.Value + "?" "This is a number + txtN1.Value data operator data operator ERROR! missing data ERROR! missing operator ERROR! missing "

Mark Dixon Page 10 Questions: String Expressions a)What is the result of: String("what is the time?").substr(3, 4) b)What is the result of: String("bob sal").slice(2,6) c)Write an expression to: convert "16" to a number d)Write an expression to: give the first two letters of "Mr Jon Smith" "t is" "b sa" parseInt("16") String("Mr Jon Smith").substr(1, 2)

Mark Dixon Page 11 Example: AddNum v2 Add Numbers <input id="btnAdd" type="button" value="Add" onclick="btnAdd_onClick()"/> function btnAdd_onClick(){ lblResult.InnerText = parseInt (txtNum1.Value) + parseInt (txtNum2.Value) }

Mark Dixon Page 12 Types of problem two types of problem: –Known problems: which we have successfully dealt with before, and can remember the solution –Unknown problems: which we have never seen before, and therefore have to discover / invent a solution for ourselves

Mark Dixon Page 13 What is a problem? All problems different However, have key parts: –Start state –Goal state –set of available operations Problem solving is the process of searching for a sequence of operations that will take us from the start state to the goal state

Mark Dixon Page 14 Example: Light Start state: light is off Goal state: light on Set of operations: –Push switch up (turns light on) –Push switch down (turns light off) Solution: 1. Push switch up Simple problems – small number of operations to solve

Mark Dixon Page 15 Important steps It is essential to understand the problem (start state, goal state, and operations) prior to finding a solution It is also often essential to be able to break a problem down into smaller sub-problems, i.e. identify intermediate sub-goal states failure to solve a problem is often due to these

Mark Dixon Page 16 More Complex Problems More complicated problems involve –the use of multiple operations to get from the start to the goal state –conditional execution of operations only do this if… (future lecture) –repeated operations do this until… (future lecture) –abstraction – more general description

Mark Dixon Page 17 Example: Horizontal mid point Start state: an image on the screen Goal state: to calculate its horizontal mid point Set of operations: –posLeft: gives the position of its left edge –posTop: gives the position of its top edge –Width: gives the distance between its left and right edges –Height: gives the distance between it top and bottom edges Solution: 1. get the posLeft value 2. add half the Width

Mark Dixon Page 18 Example: First Character Start state: the piece of text (e.g. "Hello") Goal state: extract the first character of a piece of text Set of operations: –String(s).slice(b, e): gives characters from b to e –String(s).substr(p, n): gives n characters from s, starting at position p –String(s).length: gives the number of characters in s Solution: 1. String(text).substr(0, 1)

Mark Dixon Page 19 Goal state Start state Operations –Move Up –Move Down –Move Left –Move Right Solution: Example: Movement 1.Move Up 2.Move Up 3.Move Up 4.Move Right 5.Move Right 6.Move Right 1.Move Up 2.Move Right 3.Move Up 4.Move Right 5.Move Up 6.Move Right or

Mark Dixon Page 20 Concrete vs. Abstract problems People can solve concrete problems easily –what is the first letter of hello –what is the first letter of you surname –an object's left edge is at position 100 the object is 50 wide where is its mid point? It is often difficult for them to describe the general (abstract) process they use

Mark Dixon Page 21 Concrete vs. Abstract code we have: –posLeft –posTop right = left + width middle = left + (width / 2) concrete code (works for window 800px wide): picBall.style.posLeft = 400 vs. abstract code (works for all window widths): picBall.style.posLeft = document.body.clientWidth / 2

Mark Dixon Page 22 Humans vs. Computers Humans and Computers work very differently Humans –declarative (goals): flexible sequence –intelligent: adaptive, questioning, rational –instinctive (without conscious thinking) –easily deal with incomplete and incorrect data –error prone (especially mundane repetitive tasks) Computers –procedural / algorithmic: fixed sequence –do exactly what they are told –cannot deal with errors –no imagination or creativity

Mark Dixon Page 23 Algorithms algorithm: step-by-step sequence of instructions, to solve a problem it describes how input data is to be processed in order to produce a desired output similar to recipe –ingredients (similar to data) –method (is a type of algorithm)

Mark Dixon Page 24 Algorithms Making a cup of tea: 1. Fill the kettle with water 2. Plug the kettle in 3. Switch the kettle on 4. Wait for the kettle to boil 5. Put water in cup 6. Put a tea bag into the cup 7. Add sugar to the cup 8. Add milk to the cup 9. Stir 10. Take the tea bag out

Mark Dixon Page 25 What vs. How what vs. how: –What: increase value of a text box by 1 –How: read the current value add 1 put the result back in the text box For example: swap, search, sort

Mark Dixon Page 26 Example: Swap v1 Swap <input id="btnSwap" type="button" value="Swap" onclick="btnSwap_onClick()" /> function btnSwap_onClick(){ txtA.value = txtB.value; txtB.value = txtA.value; } put txtB into txtA put txtA into txtB does not work!

Mark Dixon Page 27 Example: Swap v1 (why?)

Mark Dixon Page 28 Example: Swap v2 Swap <input id="btnSwap" type="button" value="Swap" onclick="btnSwap_onClick()" /> function btnSwap_onClick(){ txtTemp.value = txtA.value; txtA.value = txtB.value; txtB.value = txtTemp.value; } put txtA into temp put txtB into txtA put temp into txtB works!

Mark Dixon Page 29 Example: Swap v2 (Why?)

Mark Dixon Page 30 The Empty String Two double quotes (no space between) "" Used to clear contents: txtNum.value = "";

Mark Dixon Page 31 Example: Student Loan (Analysis) What: Calculate annual student load repayment from salary How: Algorithm: –read annual salary –deduct £15000 –calculate 9% –display result

Mark Dixon Page 32 Example: Student Loan (Design) When Calculate button is clicked: –read annual salary text box –deduct £15000 –calculate 9% –put result in paragraph Test Data: InputProcess Output –£ *0.09 =£0 –£ *0.09 =£90

Mark Dixon Page 33 Generating Assignment Code put "Hello" into txtA txtA.value = "Hello" get txtA and join it with txtB, and put the result in parRes parRes.innerText = txtA.value + txtB.value put into txtNum2, the result of multiplying txtNum1 by 2 txtNum2.innerText = txtNum1.value * 2

Mark Dixon Page 34 Questions: Assignment What is the code for: –put 0 into the posLeft property of picHouse –increase the posTop property of picHouse by 5 –decrease the posTop property of picCar by 9 picHouse.style.posLeft = 0 picHouse.style.posTop = picHouse.style.posTop + 5 picCar.style.posTop = picCar.style.posTop - 9

Mark Dixon Page 35 Errors txtTemp.value = "" + 5 type mismatch (cannot add "" to 5) txtTemp.value = "7" + 5 OK – VB converts "7" into 7 automatically txtTemp.value = OK – 7 plus 5 is 12 value.txtTemp = object required 'value' (object comes first)

Mark Dixon Page 36 Example: Text Shift Text Shift function window_onLoad(){ parH.innerText = "Hello There "; window.setInterval("TextShift()", 50); } function TextShift(){ parH.innerText = String(parH.innerText).substr(1) + String(parH.innerText).charAt(0); }

Mark Dixon Page 37 Tutorial Exercises: AddNum LEARNING OBJECTIVE: use a function to convert string (text) to integer (number) data Task 1: get the addnum examples (v1 and v2) working

Mark Dixon Page 38 Tutorial Exercises: Swap LEARNING OBJECTIVE: use an algorithm to solve a problem Task 1: get the swap examples (v1 and v2) working Task 2: change v2 of the swap page so that the temporary text box is hidden

Mark Dixon Page 39 Tutorial Exercises: Student Loan LEARNING OBJECTIVE: implement an algorithm in code Task 1: Create the user interface (page design) for the Student Loan example (from the lecture), using HTML tags (you will need a text box, a button, and a paragraph). Task 2: Add code that implements the following algorithm: When the Calculate button is clicked: –read annual salary text box –deduct £15000 –calculate 9% –put result in paragraph Task 3: Modify your program so that it calculates and displays monthly income and repayment amounts (as well an annual).

Mark Dixon Page 40 Tutorial Exercises: Text Shift LEARNING OBJECTIVE: develop and implement an algorithm to solve a problem use string manipulation functions, and sound Task 1: get the Text Shift example (from the lecture) working Task 2: modify your program so that the text goes the other way. Task 3: modify your program so that a noise is made when the user moves the mouse over the text.